/* =============================================================
   거광 결재 — 화면 모양
   색이나 크기를 바꾸고 싶으면 맨 위 :root 안의 값만 고치면 됩니다.
   ============================================================= */

@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:url('/fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:500;font-display:swap;src:url('/fonts/Pretendard-Medium.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:url('/fonts/Pretendard-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:700;font-display:swap;src:url('/fonts/Pretendard-Bold.woff2') format('woff2')}

:root{
  --bg:#F6F0E6; --side:#EFE8DA; --card:#FDFBF6; --card-2:#F9F4EA;
  --line:#E2D9C7; --line-2:#D3C7B0;
  --text:#332E27; --text-2:#6E6558; --text-3:#948A79;
  --accent:#A33A2E; --accent-soft:#F3E2DC;
  --link:#2A5FA8; --ok:#3F7A54; --ok-soft:#E4EEE4;
  --wait:#B0651A; --wait-soft:#F7E9D6;
  --prog:#2A5FA8; --prog-soft:#E3EAF4;
  --f:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--f); font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---------- 로그인 ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.login{width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:32px 30px 28px; box-shadow:0 8px 30px rgba(51,46,39,.06)}
.login .logo{width:42px; height:42px; border-radius:11px; background:var(--accent); display:grid; place-items:center; color:#fff; font-size:18px; font-weight:700; margin-bottom:18px}
.login h1{font-size:22px; font-weight:700; margin:0 0 6px; letter-spacing:-.02em}
.login .sub{font-size:13.5px; color:var(--text-3); margin:0 0 24px}
.login .field{margin-bottom:14px}
.login .btn{width:100%; justify-content:center; margin-top:6px}
.login .note{font-size:12.5px; color:var(--text-3); margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line); line-height:1.65}

/* ---------- 틀 ---------- */
.app{display:grid; grid-template-columns:246px 1fr; min-height:100vh}
.side{background:var(--side); border-right:1px solid var(--line); padding:0 0 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto}
.side-brand{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); margin-bottom:12px}
.side-brand .logo{width:26px; height:26px; border-radius:7px; background:var(--accent); display:grid; place-items:center; color:#fff; font-size:12.5px; font-weight:700; flex:none}
.side-brand .nm{font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.nav-group{padding:0 10px; margin-bottom:15px}
.nav-label{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); padding:0 9px; margin:0 0 5px; font-weight:600}
.nav-item{display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border:none; background:none; border-radius:7px; font-family:var(--f); font-size:13.5px; color:var(--text-2); cursor:pointer; text-align:left; transition:background .13s,color .13s}
.nav-item:hover{background:rgba(163,58,46,.07); color:var(--text)}
.nav-item[aria-current="true"]{background:var(--card); color:var(--text); font-weight:600; box-shadow:0 1px 2px rgba(51,46,39,.06)}
.nav-item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.nav-item svg{width:16px; height:16px; flex:none; opacity:.75}
.nav-item .badge{margin-left:auto; font-size:10.5px; background:var(--accent); color:#fff; padding:1px 7px; border-radius:999px; font-weight:600; font-variant-numeric:tabular-nums}
.navtoggle{display:none}
.side-foot{margin-top:auto; padding:13px 19px 0; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-3)}
.side-foot b{display:block; color:var(--text-2); font-weight:500; font-size:13px}
.side-foot .out{background:none; border:none; color:var(--text-3); font-family:var(--f); font-size:11.5px; cursor:pointer; padding:6px 8px 0 0; text-decoration:underline}
.side-foot .out:hover{color:var(--text-2)}

.main{display:flex; flex-direction:column; min-width:0}
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--card); position:sticky; top:0; z-index:5}
.top h2{font-size:16px; font-weight:600; margin:0; letter-spacing:-.01em; display:inline}
.top .who{font-size:12.5px; color:var(--text-3); margin-left:9px}
.top-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.body{padding:22px 24px 60px; overflow:auto; flex:1}

/* ---------- 공통 부품 ---------- */
.btn{font-family:var(--f); font-size:13.5px; padding:8px 15px; cursor:pointer; border-radius:8px; border:1px solid var(--line-2); background:var(--card); color:var(--text-2); transition:all .13s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.btn:hover:not(:disabled){background:var(--card-2); color:var(--text)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500}
.btn.primary:hover:not(:disabled){background:#8E3227}
.btn.danger{color:var(--accent); border-color:rgba(163,58,46,.35)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn svg{width:14px; height:14px}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px}
.stat{border:1px solid var(--line); border-radius:11px; padding:14px 16px 15px; background:var(--card-2)}
.stat.lead{background:var(--accent-soft); border-color:rgba(163,58,46,.24)}
.stat .k{font-size:12.5px; color:var(--text-2); margin-bottom:7px}
.stat .v{font-size:26px; font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:6px}
.stat.lead .v{color:var(--accent)}
.stat .n{font-size:12px; color:var(--text-3); margin:0}

.list-head{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 9px}
.list-title{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); margin:0; font-weight:600}
.list{display:grid; gap:7px; margin-bottom:24px}
.item{display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:var(--card); text-align:left; cursor:pointer; width:100%; color:inherit; font-family:var(--f); transition:border-color .13s,background .13s}
.item:hover{border-color:var(--line-2); background:var(--card-2)}
.item:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.kind{font-size:10.5px; padding:3px 0; text-align:center; border-radius:5px; font-weight:600}
.kind svg{width:12px!important; height:12px!important}
.kind.leave{background:var(--prog-soft); color:var(--prog)}
.kind.expense{background:var(--wait-soft); color:var(--wait)}
.kind.memo{background:var(--side); color:var(--text-3)}
/* 눌러서 이동하는 통계 칸 */
.stat.go{cursor:pointer; font-family:var(--f); text-align:left; width:100%;
  transition:border-color .13s, background .13s}
.stat.go:hover{border-color:var(--line-2); background:var(--card-2)}
.stat.go:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 자세히 보기 창의 한 줄 */
.drow{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:none}
.drow .dk{flex:none; width:78px; font-size:12.5px; color:var(--text-3)}
.drow .dv{font-size:14px; color:var(--text); line-height:1.5}

/* 달력 안의 일정은 눌러서 자세히 볼 수 있습니다 */
.mcell .ev.leave,.mcell .ev.half,.mcell .ev.out{cursor:pointer}

/* 표 안에서 사업장을 나누는 줄 */
.items tr.grouprow td{background:var(--side); padding:9px 12px;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line)}
.items tr.grouprow b{font-size:12.5px; letter-spacing:.02em; color:var(--text)}
.items tr.grouprow .g-note{font-size:11.5px; color:var(--text-3); margin-left:9px}
.items tr.grouprow:hover td{background:var(--side)}

/* 표 안의 작은 버튼 */
.btn.tiny{font-size:12px; padding:4px 10px; border-radius:6px}

/* 연차를 당겨쓴 경우 (마이너스) */
.minus{color:var(--accent); font-weight:600}

.item .t{display:block; font-size:14.5px; margin:0 0 2px; line-height:1.45; color:var(--text); font-weight:500}
.item .m{display:block; font-size:12px; color:var(--text-3); margin:0}
.s{font-size:11.5px; white-space:nowrap; padding:3px 10px; border-radius:999px; font-weight:500}
.s.pending{background:var(--accent-soft); color:var(--accent)}
.s.prog{background:var(--prog-soft); color:var(--prog)}
.s.approved{background:var(--ok-soft); color:var(--ok)}
.s.rejected{background:var(--wait-soft); color:var(--wait)}
.s.canceled,.s.draft{background:var(--side); color:var(--text-3)}
.s.filling{background:var(--wait-soft); color:var(--wait)}
.item.unseen{border-color:rgba(163,58,46,.35); background:var(--accent-soft)}
.item.unseen .t::after{content:"NEW"; font-size:9.5px; color:var(--accent); margin-left:7px; letter-spacing:.08em; font-weight:700; vertical-align:1px}
.empty{padding:26px 16px; text-align:center; color:var(--text-3); font-size:13.5px; border:1px dashed var(--line-2); border-radius:10px; background:var(--card-2)}

/* ---------- 폼 ---------- */
.form{display:grid; gap:19px; max-width:620px}
.field label{display:block; font-size:12px; color:var(--text-2); margin-bottom:7px; font-weight:600}
.field input,.field select,.field textarea{width:100%; font-family:var(--f); font-size:14.5px; color:var(--text); background:var(--card); border:1px solid var(--line-2); padding:10px 13px; border-radius:8px}
.field textarea{min-height:80px; resize:vertical; line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(163,58,46,.1)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-size:13.5px; padding:7px 15px; border:1px solid var(--line-2); border-radius:999px; background:var(--card); cursor:pointer; font-family:var(--f); color:var(--text-2); transition:all .13s}
.chip:hover{border-color:var(--text-3)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hint{font-size:12.5px; color:var(--text-3); margin:7px 0 0}
.callout{border:1px solid rgba(63,122,84,.3); border-radius:10px; padding:13px 16px; font-size:13.5px; color:var(--text-2); background:var(--ok-soft)}
.callout b{color:var(--ok); font-weight:600}
.callout.info{border-color:rgba(42,95,168,.28); background:var(--prog-soft)}
.callout.info b{color:var(--prog)}
.callout.warn{border-color:rgba(176,101,26,.3); background:var(--wait-soft)}
.callout.warn b{color:var(--wait)}
.callout.bad{border-color:rgba(163,58,46,.3); background:var(--accent-soft)}
.callout.bad b{color:var(--accent)}

.line-pick{border:1px solid var(--line-2); border-radius:10px; background:var(--card); padding:6px 16px 14px}
.line-row{display:flex; align-items:center; gap:13px; padding:10px 0; border-bottom:1px solid var(--line)}
.line-row:last-of-type{border-bottom:none}
.line-row .ord{font-size:10.5px; color:var(--accent); width:32px; flex:none; letter-spacing:.06em; font-weight:600}
.line-row .nm{font-size:14px; flex:1}
.line-row .nm span{color:var(--text-3); font-size:12.5px; margin-left:7px}
.line-row .x{background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px; padding:2px 6px; font-family:var(--f)}
.line-row .x:hover{color:var(--accent)}
.add-line{margin-top:11px; font-size:13.5px; color:var(--accent); background:none; border:1px dashed var(--line-2); padding:10px 14px; cursor:pointer; font-family:var(--f); width:100%; border-radius:8px}
.add-line:hover{border-color:var(--accent)}
.actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--line)}

/* ---------- 달력 ---------- */
.cal-tools{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.cal-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-2)}
.cal-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.cal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}

/* 분기별 접기 */
.qtrs{display:grid; gap:9px; margin-bottom:18px}
.qtr{border:1px solid var(--line); border-radius:11px; background:var(--card); overflow:hidden}
.qtr[open]{border-color:var(--line-2)}
.qtr > summary{
  display:flex; align-items:center; gap:12px; padding:12px 17px; cursor:pointer;
  background:var(--card-2); font-size:14px; font-weight:600; list-style:none;
}
.qtr > summary::-webkit-details-marker{display:none}
.qtr > summary:hover{background:var(--side)}
.qtr > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.qtr .arrow{width:13px; height:13px; flex:none; color:var(--text-3); transition:transform .15s}
.qtr[open] .arrow{transform:rotate(90deg)}
.qtr .qname{flex:none}
.qtr .qmonths{font-size:12.5px; color:var(--text-3); font-weight:400}
.qtr .qsum{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--text-3); font-variant-numeric:tabular-nums}
.qtr .qsum.on{color:var(--accent)}
.qtr .qbody{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:14px 14px 16px}
@media (max-width:820px){ .qtr .qbody{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .qtr .qbody{grid-template-columns:1fr} }
.cal-month{border:1px solid var(--line); border-radius:10px; padding:9px 9px 7px; background:var(--card)}
.cal-month h4{font-size:12px; margin:0 0 6px; text-align:center; font-weight:600; color:var(--text-2)}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; margin-bottom:2px}
.cal-dow span{font-size:9px; color:var(--text-3); text-align:center; padding:1px 0}
.cal-dow span.d6{color:#2A5FA8}
.cal-dow span.d0{color:#A33A2E}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:1px}
.cal-day{aspect-ratio:1/1; display:grid; place-items:center; font-size:10.5px; border-radius:4px; border:none; background:none; font-family:var(--f); color:var(--text-2); cursor:pointer; padding:0; font-variant-numeric:tabular-nums; transition:background .1s}
.cal-day:hover:not(.blank):not(.used){background:var(--side)}
.cal-day:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.cal-day.blank{cursor:default; visibility:hidden}
.cal-day.sat{color:#2A5FA8}
.cal-day.sun,.cal-day.hol{color:#A33A2E}
.cal-day.used{background:var(--line-2); color:var(--text); cursor:not-allowed; font-weight:600}
.cal-day.plan{background:var(--accent)!important; color:#fff!important; font-weight:700}
.cal-day.half{background:var(--wait)!important; color:#fff!important; font-weight:700}
.cal-day.anniv{background:var(--ok)!important; color:#fff!important; font-weight:700}
.picked{display:flex; flex-wrap:wrap; gap:6px; min-height:30px}
.picked .p{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:4px 10px; border-radius:999px; background:var(--accent); color:#fff; font-variant-numeric:tabular-nums}
.picked .p.h{background:var(--wait)}
.picked .p button{background:none; border:none; color:#fff; cursor:pointer; padding:0 0 0 2px; font-size:12px; opacity:.85; font-family:var(--f)}
.picked .none{font-size:12.5px; color:var(--text-3)}
.meter{height:7px; background:var(--line); border-radius:99px; overflow:hidden; margin:8px 0 6px}
.meter i{display:block; height:100%; background:var(--accent); border-radius:99px}
.meter.ok i{background:var(--ok)}

/* ---------- 회사 일정 큰 달력 ---------- */
/* 앞 화면으로 돌아가기 */
.page-head{display:flex; align-items:center; gap:10px; min-width:0}
.btn.back{padding:6px 9px; line-height:0; flex:none}
.btn.back svg{width:18px; height:18px}

.mcal{border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; margin-bottom:20px}
.mcal-head{display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line); background:var(--card-2)}
.mcal-head span{text-align:center; font-size:11.5px; font-weight:600; color:var(--text-3); padding:9px 0}
.mcal-head span.s0{color:var(--accent)}
.mcal-head span.s6{color:var(--link)}
.mcal-body{display:grid; grid-template-columns:repeat(7,1fr)}
.mcell{min-height:132px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 7px 8px; display:flex; flex-direction:column; gap:3px}
.mcell:nth-child(7n){border-right:none}
.mcell.out{background:var(--card-2); opacity:.55}
.mcell.today{background:var(--accent-soft)}
.mcell.pickable{cursor:pointer; transition:background .12s}
.mcell.pickable:hover{background:var(--side)}
.mcell.pickable:hover .dnum{color:var(--accent)}
.mcell .ev{cursor:pointer}
.mcell .dnum{font-size:12px; font-weight:600; color:var(--text-2); font-variant-numeric:tabular-nums; margin-bottom:2px}
.mcell.sun .dnum,.mcell.hol .dnum{color:var(--accent)}
.mcell.sat .dnum{color:var(--link)}
.mcell.today .dnum{color:var(--accent)}
.mcell .hname{font-size:10px; color:var(--accent); margin-left:5px; font-weight:500}
.ev{font-size:11px; padding:2px 6px; border-radius:4px; line-height:1.4; cursor:default;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev.leave{background:var(--prog-soft); color:var(--prog)}
.ev.half{background:var(--wait-soft); color:var(--wait)}
.ev.evt{background:var(--ok-soft); color:var(--ok); font-weight:500; cursor:pointer}
.ev>span:first-child{display:inline-flex; vertical-align:-2px; margin-right:3px}
.ev .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev.out{background:rgba(148,138,121,.16); color:var(--text-2)}
.ev.more{background:none; color:var(--text-3); font-weight:600; padding:1px 6px; cursor:pointer}
.ev.more:hover{color:var(--accent)}
/* 하루 일정 모아보기 */
/* 출장·외근 여러 건 등록 */
.oentry{border:1px solid var(--line-2); border-radius:10px; padding:12px 12px 2px; margin-bottom:10px}
.oentry .ohead{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
  font-size:12.5px; font-weight:600; color:var(--text-2)}

.daybox .drow{display:flex; gap:9px; align-items:flex-start; padding:10px 2px; border-bottom:1px solid var(--line-2); cursor:pointer}
.daybox .drow:last-child{border-bottom:none}
.daybox .drow:hover{background:var(--side)}
.daybox .ic{flex:none; width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  background:var(--kb, var(--side)); color:var(--kc, var(--text-2))}
.daybox .tt{flex:1; min-width:0; font-size:13.5px; color:var(--text-1)}
.daybox .tt span{display:block; font-size:12px; color:var(--text-3); margin-top:2px}
.ev.evt svg{width:11px!important; height:11px!important; flex:none; vertical-align:-1px; margin-right:3px}

/* 일정 구분별 색 — 달력 칸, 범례, 목록 아이콘에 함께 적용됩니다 */
.k-회의{--kc:#2A5FA8; --kb:rgba(42,95,168,.13)}
.k-교육{--kc:#6D3FA8; --kb:rgba(109,63,168,.13)}
.k-행사{--kc:#B8548C; --kb:rgba(184,84,140,.14)}
.k-휴무{--kc:#A33A2E; --kb:rgba(163,58,46,.13)}
.k-출장{--kc:#178582; --kb:rgba(23,133,130,.13)}
.k-기타{--kc:#7A7266; --kb:rgba(122,114,102,.13)}
.k-휴가{--kc:var(--prog); --kb:var(--prog-soft)}
.k-외근{--kc:#8A7F6E; --kb:rgba(148,138,121,.16)}
.k-연차,.k-병가,.k-경조{--kc:var(--prog); --kb:var(--prog-soft)}
.k-반차{--kc:var(--wait); --kb:var(--wait-soft)}
.k-공휴일{--kc:var(--accent); --kb:var(--accent-soft)}
.ev.evt.k-회의,.ev.evt.k-교육,.ev.evt.k-행사,.ev.evt.k-휴무,.ev.evt.k-출장,.ev.evt.k-기타{
  background:var(--kb); color:var(--kc)}
.item .kind.k-회의,.item .kind.k-교육,.item .kind.k-행사,.item .kind.k-휴무,.item .kind.k-출장,.item .kind.k-기타{
  background:var(--kb); color:var(--kc)}

.legend{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px}
.legend .lg{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500;
  padding:3px 9px; border-radius:999px; background:var(--kb); color:var(--kc)}
.legend .lg svg{width:12px!important; height:12px!important; flex:none}
.ev.more{color:var(--text-3); background:none; padding-left:6px}
.mnav{display:flex; align-items:center; gap:10px}
.mnav .mtitle{font-size:16px; font-weight:700; min-width:118px; text-align:center; font-variant-numeric:tabular-nums}
.mnav button{width:32px; height:32px; display:grid; place-items:center; padding:0}

@media (max-width:820px){
  .mcell{min-height:76px; padding:4px 4px 6px}
  .ev{font-size:9.5px; padding:1px 4px}
  .mcell .dnum{font-size:11px}
}

/* ---------- 지출 항목 표 ---------- */
.doctype{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap}
.doctype button{font-family:var(--f); font-size:14px; padding:9px 20px; border:1px solid var(--line-2); background:var(--card); color:var(--text-2); border-radius:9px; cursor:pointer}
.doctype button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.doctype button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card)}
table.items{border-collapse:collapse; width:100%; font-size:13.5px; min-width:660px}
table.items th,table.items td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
table.items thead th{font-size:11px; letter-spacing:.06em; color:var(--text-3); font-weight:600; background:var(--card-2); white-space:nowrap}
table.items tbody tr:last-child td{border-bottom:1px solid var(--line)}
table.items tfoot td{font-weight:700; background:var(--card-2); padding:11px 10px}
table.items td.num,table.items th.num{text-align:right}
.cell{font-family:var(--f); font-size:13.5px; width:100%; min-width:96px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text)}
.cell:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(163,58,46,.1)}
.cell.amt{text-align:right; font-variant-numeric:tabular-nums; min-width:110px}
.cell.dt{min-width:132px}
.rm{background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px; padding:4px 6px; font-family:var(--f)}
.rm:hover{color:var(--accent)}

/* ---------- 첨부 ---------- */
.drop{border:1px dashed var(--line-2); border-radius:10px; padding:18px; text-align:center; background:var(--card-2); cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop b{display:block; font-size:13.5px; color:var(--text-2); font-weight:500; margin-bottom:3px}
.drop span{font-size:12.5px; color:var(--text-3)}
.files{display:grid; gap:6px; margin-top:10px}
.file{display:flex; align-items:center; gap:10px; padding:9px 13px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:13.5px}
.file .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file .sz{font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.file a{color:var(--link); text-decoration:none; font-size:12.5px}
.file .rm{flex:none}

/* ---------- 문서 ---------- */
.paper{border:1px solid var(--line); border-radius:11px; background:var(--card); padding:25px 27px 28px; max-width:760px}
.paper-head{display:flex; justify-content:space-between; align-items:flex-start; gap:22px; flex-wrap:wrap; margin-bottom:22px}
.paper-head h3{font-size:21px; font-weight:700; margin:0 0 5px; letter-spacing:-.01em}
.paper-head .no{font-size:11.5px; color:var(--text-3); margin:0}
.stampline{display:flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; flex:none}
.stampline .c{border-right:1px solid var(--line-2); min-width:72px; text-align:center}
.stampline .c:last-child{border-right:none}
.stampline .cap{font-size:10px; color:var(--text-3); padding:5px 8px; border-bottom:1px solid var(--line-2); background:var(--side); letter-spacing:.08em; font-weight:600}
.stampline .sg{height:52px; display:grid; place-items:center; font-size:13.5px; line-height:1.25; padding:4px; font-weight:500; color:var(--text-3)}
.stampline .sg.approved{background:var(--accent-soft); color:var(--accent)}
.stampline .sg.rejected{background:var(--wait-soft); color:var(--wait)}
.stampline .sg .dt{display:block; font-size:9.5px; color:var(--text-3); margin-top:2px; font-weight:400}

/* 도장 — 결재하시면 이름이 붉은 인장으로 찍힙니다 */
.seal{display:block; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.stampline .sg{height:66px}
.stampline .sg.stamped{background:var(--card); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; padding:3px}
.stampline .sg.stamped > span:first-child{display:block; line-height:0}
.stampline .sg.stamped .seal{width:42px; height:42px}
.stampline .sg.stamped .dt{margin-top:0}

/* 회장님 칸 */
/* 직급 — 구분 아래, 도장 위 */
.stampline .rank{font-size:11.5px; font-weight:600; color:var(--text-2); padding:5px 6px; line-height:1.3;
  border-bottom:1px solid var(--line-2); min-height:26px; display:grid; place-items:center; word-break:keep-all}
.stampline .c.chair .cap{background:var(--accent-soft); color:var(--accent)}
.stampline .c.chair .rank{color:var(--accent)}
.stampline .c.chair .sg{font-size:11.5px; color:var(--accent); font-weight:600}
.stampline .c.chair .sg.filed{color:var(--ok); background:var(--ok-soft)}
.line-row.chair{background:var(--accent-soft)}
.line-row.chair .ord{color:var(--accent)}
.chairbox{margin-top:22px}
.chair-acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.file .ftag{font-size:11px; color:var(--text-3); background:var(--side); padding:1px 8px; border-radius:999px; margin-left:8px; font-weight:500}
.fill-src{white-space:pre-wrap; font-size:13px; line-height:1.6; max-height:190px; overflow:auto;
  padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card-2)}
.preview-paper{max-width:none; border:none; padding:4px 2px 0; background:transparent}
.srclink{background:none; border:none; padding:0; color:var(--link); font-family:var(--f); font-size:inherit; cursor:pointer; text-decoration:underline; font-weight:600}

/* 회장 결재용 출력지 — 화면에는 보이지 않고 인쇄할 때만 나옵니다 */
.chair-sheet{display:none; color:#000; font-family:var(--f)}
.chair-sheet .cs-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px}
.chair-sheet .cs-co{font-size:11pt; font-weight:700; letter-spacing:-.01em}
.chair-sheet .cs-title{font-size:22pt; font-weight:800; letter-spacing:.38em; margin:12px 0 0}
.chair-sheet table{border-collapse:collapse; width:100%}
.chair-sheet th,.chair-sheet td{border:.8pt solid #000; padding:5px 7px; font-size:10pt; vertical-align:middle; color:#000}
.chair-sheet th{background:#f1f1f1; font-weight:600; white-space:nowrap}
.chair-sheet .cs-sign{width:auto}
.chair-sheet .cs-sign th{text-align:center; min-width:64px; font-size:9pt; padding:3px 6px}
.chair-sheet .cs-sign th.cs-side{min-width:0; width:22px; line-height:1.35; padding:4px 3px}
.chair-sheet .cs-sign td{height:74px; text-align:center; padding:3px}
.chair-sheet .cs-sign td > span:first-child{display:block; line-height:0}
.chair-sheet .cs-sign td .seal{margin:0 auto; width:46px; height:46px}
.chair-sheet .cs-sign td .d{display:block; font-size:7.5pt; margin-top:2px}
.chair-sheet .cs-sign .chair{min-width:82px; background:#fff}
.chair-sheet .cs-sign th.chair{background:#f1f1f1}
.chair-sheet .cs-info{margin-bottom:12px}
.chair-sheet .cs-info th{width:86px}
.chair-sheet .cs-sec{margin:12px 0 0}
.chair-sheet .cs-cap{font-size:10pt; font-weight:700; margin:0 0 5px}
.chair-sheet .num{text-align:right; font-variant-numeric:tabular-nums}
.chair-sheet .cs-items tbody td{height:23px}
.chair-sheet .cs-long{white-space:pre-wrap; line-height:1.6}
.chair-sheet .cs-say{text-align:center; font-size:11pt; margin:24px 0 6px}
.chair-sheet .cs-date{text-align:center; font-size:11pt; margin:0 0 18px}
.chair-sheet .cs-foot{border-top:.8pt solid #999; padding-top:6px; font-size:8pt; color:#444}
.rows{border-top:1px solid var(--line)}
.rows .r{display:grid; grid-template-columns:112px 1fr; gap:18px; padding:12px 2px; border-bottom:1px solid var(--line); font-size:14.5px}
.rows .k{color:var(--text-3); font-size:12px; padding-top:3px; font-weight:600}
.rows .v{color:var(--text)}
.rows .v.long{line-height:1.8; color:var(--text-2); white-space:pre-wrap}
.rows .v b{color:var(--accent); font-weight:600}
.decision{margin-top:22px; padding:19px; border:1px solid rgba(163,58,46,.24); border-radius:11px; background:var(--accent-soft)}
.decision > p{margin:0 0 13px; font-size:14px; color:var(--text-2)}
.decision > p b{color:var(--accent); font-weight:600}

/* ---------- 직원 고르기 ---------- */
.modal{position:fixed; inset:0; background:rgba(51,46,39,.4); display:grid; place-items:center; padding:20px; z-index:50}
.modal .box{background:var(--card); border:1px solid var(--line); border-radius:14px; width:100%; max-width:440px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(51,46,39,.2)}
.modal .head{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center}
.modal .head h3{margin:0; font-size:15px; font-weight:600}
.modal .head button{background:none; border:none; font-size:16px; color:var(--text-3); cursor:pointer; font-family:var(--f)}
.modal .search{padding:12px 16px; border-bottom:1px solid var(--line)}
.modal .search input{width:100%; font-family:var(--f); font-size:14px; padding:9px 12px; border:1px solid var(--line-2); border-radius:8px; background:var(--card-2); color:var(--text)}
.modal .search input:focus{outline:none; border-color:var(--accent)}
.modal .body-list{overflow-y:auto; padding:8px}
.modal .box > div{min-width:0}
.modal .scrolly{overflow-y:auto; min-height:0}     /* 내용이 길면 창 안에서 스크롤됩니다 */
.pick-row{display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:none; background:none; border-radius:8px; cursor:pointer; font-family:var(--f); text-align:left; color:inherit}
.pick-row:hover{background:var(--card-2)}
.pick-row .nm{font-size:14px; font-weight:500}
.pick-row .meta{font-size:12px; color:var(--text-3); margin-left:auto}

/* ---------- 알림 ---------- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--card); padding:11px 20px; border-radius:9px; font-size:13.5px; z-index:100; box-shadow:0 8px 24px rgba(51,46,39,.25); max-width:90vw}
.toast.bad{background:var(--accent)}

.loading{padding:40px; text-align:center; color:var(--text-3); font-size:13.5px}

@media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{position:static; height:auto; border-right:none; border-bottom:1px solid var(--line); padding-bottom:10px}
  .side-brand{margin-bottom:0; padding:12px 14px; justify-content:space-between}

  /* 메뉴 여닫기 */
  .navtoggle{display:flex; align-items:center; gap:6px; margin-left:auto;
    padding:7px 12px; border:1px solid var(--line-2); border-radius:8px;
    background:var(--card); color:var(--text-2); font-family:var(--f); font-size:13px; cursor:pointer}
  .navtoggle svg{width:16px; height:16px}
  .navtoggle[aria-expanded="true"]{background:var(--accent-soft); color:var(--accent); border-color:rgba(163,58,46,.3)}
  #nav-wrap{display:none; padding:12px 12px 2px}
  #nav-wrap.open{display:block}

  /* 메뉴 단추를 같은 크기의 격자로 */
  .nav-group{margin:0 0 12px; padding:0;
    display:grid; grid-template-columns:repeat(2,1fr); gap:7px}
  .nav-label{display:block; grid-column:1/-1; margin:0 0 1px; padding:0 2px}
  .nav-item{width:100%; min-height:42px; padding:8px 11px; border:1px solid var(--line);
    background:var(--card); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .nav-item .badge{margin-left:auto}
  .side-foot{display:flex; justify-content:space-between; align-items:baseline; padding-top:10px}
  .body{padding:18px 16px 40px}
  .top{padding:12px 16px}
  .two{grid-template-columns:1fr}
  .item{grid-template-columns:50px 1fr; gap:11px}
  .item .s{grid-column:2; justify-self:start; margin-top:4px}
  .rows .r{grid-template-columns:1fr; gap:2px}
  .paper{padding:20px 17px 24px}
}
@media (max-width:380px){
  .nav-item{font-size:12.5px; padding:8px 9px; gap:7px}
  .nav-item svg{width:15px; height:15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* =============================================================
   인쇄 · PDF 저장
   브라우저 인쇄에서 「PDF로 저장」을 고르면 파일이 됩니다.
   화면 색이 어둡더라도 출력물은 항상 흰 종이에 검은 글씨입니다.
   ============================================================= */
.print-only{display:none}

@media print{
  /* 어떤 화면 색을 쓰셔도 출력은 흰 종이 기준 */
  :root{
    --bg:#fff!important; --card:#fff!important; --card-2:#fff!important;
    --side:#fff!important; --line:#c9c9c9!important; --line-2:#9a9a9a!important;
    --text:#000!important; --text-2:#333!important; --text-3:#666!important;
    --accent:#000!important; --accent-soft:#f0f0f0!important;
    --link:#000!important; --ok:#000!important; --ok-soft:#f0f0f0!important;
    --kc:#000!important; --kb:#f0f0f0!important;
    --wait:#000!important; --wait-soft:#f0f0f0!important;
    --prog:#000!important; --prog-soft:#f0f0f0!important;
  }
  @page{margin:14mm 12mm}
  html,body{background:#fff!important; height:auto}
  body{font-size:11pt}

  .side,.top,.top-actions,.doctype,.list-more,.add-line,.rm,.x,
  .toast,.modal,.actions,.decision,.drop,.hint,.explain,
  .seg,.chips,.mnav,.cal-legend{display:none!important}
  .app{display:block!important; min-height:0}
  .main{display:block}
  .body{padding:0; overflow:visible}

  .print-only{display:block}
  .print-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    border-bottom:1.5px solid #000; padding-bottom:7px; margin-bottom:16px;
  }
  .print-head .co{font-size:13pt; font-weight:700; letter-spacing:-.02em}
  .print-head .when{font-size:9pt; color:#444}

  .paper{border:none!important; box-shadow:none!important; padding:0!important; max-width:none}
  .paper-head{margin-bottom:14px}
  .paper-head h3{font-size:16pt}
  .stampline{border-color:#000}
  .stampline .c{border-color:#000}
  .stampline .cap{border-color:#000; background:#f2f2f2}
  .stampline .rank{border-color:#000; color:#000}
  .stampline .sg.approved{background:#f2f2f2}

  .rows .r{padding:7px 2px; font-size:10.5pt; break-inside:avoid}
  .tablewrap{overflow:visible; border-color:#000}
  table{font-size:9.5pt}
  table.items thead th{background:#f2f2f2; border-color:#000}
  table.items th,table.items td{border-color:#c9c9c9}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  tfoot td{background:#f2f2f2}

  .stats{gap:8px; break-inside:avoid}
  .stat{border-color:#000; padding:9px 11px}
  .stat .v{font-size:15pt}
  .item{border-color:#c9c9c9; break-inside:avoid; padding:8px 10px}
  .callout{border-color:#999; background:#f7f7f7!important}
  .files .file{border-color:#c9c9c9}
  .file a{display:none}

  .chair-acts{display:none!important}
  body.print-chair .app,body.print-chair #login-view,body.print-chair .toast{display:none!important}
  body.print-chair .chair-sheet{display:block!important}

  .mcal{border-color:#000; break-inside:avoid}
  .mcell{min-height:74px; border-color:#c9c9c9}
  .ev{border:0.5pt solid #bbb}
}

/* ---------- 법인카드 영수증 ---------- */
.rcpt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rchip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 170px;
  padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card-2); font-size: 12.5px;
}
.rchip .rfile {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); text-decoration: none;
}
.rchip .rfile:hover { text-decoration: underline; }
.rchip .rx {
  flex: none; width: 18px; height: 18px; line-height: 1; border: 0; cursor: pointer;
  border-radius: 50%; background: transparent; color: var(--text-3); font-size: 12px;
}
.rchip .rx:hover { background: var(--line); color: var(--accent); }
.radd {
  padding: 4px 10px; border: 1px dashed var(--line); border-radius: 999px;
  background: transparent; color: var(--text-2); font-size: 12.5px; cursor: pointer;
}
.radd:hover { border-color: var(--link); color: var(--link); }
.radd:disabled { opacity: .55; cursor: default; }
.rcpt-loose {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2);
}

/* 추천 계정과목 · 업종 표시 */
.acell { display: flex; align-items: center; gap: 6px; }
.achip {
  flex: none; padding: 2px 7px; border-radius: 999px; font-size: 11.5px;
  background: var(--prog-soft); color: var(--prog); white-space: nowrap;
}
.vind { margin-top: 2px; font-size: 12px; color: var(--text-3); }