/* 지출결의 사이트 — SNAX 대시보드(board.snax.team) 스타일: 밝은 회색 바탕 · 흰 카드 · 블루 1색 강조 · 로즈 = 경고 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
  --paper:#F6F7F9; --card:#FFFFFF; --sub:#F1F3F6;
  --ink:#101322; --ink-2:#3A3F51; --ink-cap:#70778C; --ink-3:#A6ACBF;
  --coral:#3B5BFE; --coral-hover:#2E49E0; --coral-tint:#EAEEFF;
  --coral-deep:#D93A56; --neg:#F2536D; --neg-soft:#FDE9ED;
  --pos:#178A61; --pos-soft:#E4F7EF; --warn:#F5A623;
  --line:#ECEEF2; --line-2:#F1F3F6; --line-strong:#DEE1E8;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:8px; --r-md:16px; --r-pill:999px;
  --shadow:0 1px 3px rgba(16,19,34,.04),0 4px 16px rgba(16,19,34,.05);
  --shadow-pop:0 8px 28px rgba(16,19,34,.10);
  --fs-hero:30px; --fs-title:24px; --fs-num2:20px; --fs-h2:16px; --fs-body:13.5px; --fs-sub:12px; --fs-micro:10.5px;
  --kr:"Inter","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--kr);font-size:var(--fs-body);font-weight:500;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:var(--coral);}
h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0;}
.num{font-feature-settings:"tnum";}
.caption{font-size:var(--fs-sub);font-weight:500;color:var(--ink-cap);line-height:1.5;}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}

/* 틀 — 사이드바 + 본문 */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;}
aside{background:var(--card);border-right:1px solid var(--line-2);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s1) var(--s2) 0;}
.brand img{height:24px;width:auto;align-self:flex-start;}
.brand span{font-size:var(--fs-sub);font-weight:600;color:var(--ink-cap);}
.who{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);border:1px solid var(--line);background:var(--sub);border-radius:var(--r-sm);}
.who .wrow{display:flex;align-items:center;gap:var(--s2);flex-wrap:nowrap;min-width:0;}
.who .dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--pos);flex-shrink:0;}
.who .nm{font-size:var(--fs-body);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.who .role{font-size:var(--fs-sub);font-weight:600;color:var(--ink-2);border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:2px 10px;flex-shrink:0;}
.who .lgbtn{margin-left:auto;border:0;background:var(--coral);color:#fff;font-size:var(--fs-sub);font-weight:700;border-radius:var(--r-pill);padding:4px 12px;cursor:pointer;flex-shrink:0;}
.who .lgbtn:hover{background:var(--coral-hover);}
nav{display:flex;flex-direction:column;gap:5px;}
nav .ng{font-size:var(--fs-micro);font-weight:700;color:var(--ink-cap);letter-spacing:.06em;padding:var(--s2) var(--s3) var(--s1);}
nav button{display:flex;align-items:center;gap:var(--s3);border:0;background:none;text-align:left;padding:10px 12px;border-radius:12px;color:var(--ink-cap);font-size:14px;font-weight:500;cursor:pointer;}
nav button:hover{background:var(--sub);color:var(--ink-2);}
nav button[aria-current="page"]{background:var(--coral-tint);color:var(--coral);font-weight:600;}
nav .cnt{margin-left:auto;background:var(--neg);color:#fff;font-size:var(--fs-micro);font-weight:700;border-radius:var(--r-pill);padding:1px 7px;}
aside .foot{margin-top:auto;padding:0 var(--s2);}

main{padding:var(--s5) var(--s7) var(--s7);max-width:1080px;width:100%;display:flex;flex-direction:column;gap:var(--s5);}
.vhead p{margin:var(--s1) 0 0;color:var(--ink-cap);font-size:var(--fs-body);}
.block{display:flex;flex-direction:column;gap:var(--s3);}

/* KPI */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);}
.stat{background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:var(--s1);min-width:0;}
.stat .t{font-size:var(--fs-body);font-weight:500;color:var(--ink-cap);}
.stat .n{font-size:var(--fs-hero);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-feature-settings:"tnum";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat .n i{font-style:normal;font-size:var(--fs-h2);font-weight:600;margin-left:2px;}
.stat .n.alert{color:var(--coral-deep);}
.stat .d{font-size:var(--fs-sub);color:var(--ink-cap);}

/* 카드 */
.card{background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow);padding:var(--s5);min-width:0;}
.sec{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap;}
.sec b{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.01em;white-space:nowrap;}
.sec:after{content:"";flex:1;height:1px;background:var(--line);order:5;min-width:var(--s4);}
.sec .sinput,.sec .rbtn2{order:9;}
.sinput.msel{width:auto;padding-right:var(--s2);cursor:pointer;}
.cardft{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);flex-wrap:wrap;}
.cardft .caption{margin-right:auto;}

.rbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:var(--coral);color:#fff;font-size:var(--fs-sub);font-weight:700;padding:8px 16px;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;white-space:nowrap;}
.rbtn:hover{background:var(--coral-hover);}
.rbtn.big{font-size:var(--fs-body);padding:10px 24px;}
.rbtn2{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2);font-size:var(--fs-sub);font-weight:700;padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;}
.rbtn2:hover{border-color:var(--coral);color:var(--coral);}
.rbtn:disabled,.rbtn2:disabled{opacity:.5;cursor:default;}
.sinput{border:1px solid var(--line-strong);background:var(--card);border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-sub);font-weight:600;width:210px;min-width:0;}
.sinput:focus{outline:0;border-color:var(--coral);}

.chip{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:var(--sub);color:var(--ink-2);font-size:var(--fs-micro);font-weight:700;white-space:nowrap;}
.chip--out{background:var(--neg-soft);color:var(--coral-deep);}
.chip--on{background:var(--coral-tint);color:var(--coral);}
.chip--ok{background:var(--pos-soft);color:var(--pos);}

.filters{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);}
.filters button{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink-2);padding:5px 12px;font-size:var(--fs-sub);font-weight:600;cursor:pointer;}
.filters button:hover{border-color:var(--coral);color:var(--coral);}
.filters button[aria-pressed="true"]{background:var(--coral-tint);border-color:var(--coral-tint);color:var(--coral);font-weight:700;}
.filters .n{margin-left:var(--s1);font-feature-settings:"tnum";}

/* 기안 목록 */
.rows{display:flex;flex-direction:column;}
.item{border-top:1px solid var(--line-2);}
.item:first-child{border-top:0;}
.item>summary{list-style:none;cursor:pointer;padding:var(--s3) var(--s2);display:flex;align-items:center;gap:var(--s3);border-radius:var(--r-sm);}
.item .sg{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s5);align-items:center;}
.pick,.pickall input{width:16px;height:16px;margin:0;accent-color:var(--coral);cursor:pointer;flex-shrink:0;}
.pickall{display:inline-flex;align-items:center;gap:var(--s3);padding:var(--s2);font-size:var(--fs-sub);font-weight:600;color:var(--ink-2);cursor:pointer;border-bottom:1px solid var(--line-2);width:100%;}
.xbtn .xico{width:14px;height:14px;color:var(--pos);flex-shrink:0;}
.item>summary::-webkit-details-marker{display:none;}
.item>summary:hover{background:var(--paper);}
.item[open]>summary{background:var(--paper);}
.item .title{font-size:var(--fs-body);font-weight:700;display:flex;gap:var(--s2);align-items:center;min-width:0;}
.item .title span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.item .meta{font-size:var(--fs-sub);color:var(--ink-cap);grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.item .amount{font-size:var(--fs-h2);font-weight:700;text-align:right;white-space:nowrap;font-feature-settings:"tnum";letter-spacing:-.01em;}
.item .steps{grid-column:2;grid-row:2;justify-content:flex-end;}

/* 진행 단계 — 접수 · 상신 · 결재. 끝난 단계 = 잉크, 지금 단계 = 블루 */
.steps{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sub);font-weight:600;color:var(--ink-3);white-space:nowrap;font-feature-settings:"tnum";}
.steps .s{display:flex;align-items:center;gap:var(--s1);}
.steps .dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--line-strong);}
.steps .s.done{color:var(--ink-2);} .steps .s.done .dot{background:var(--ink-2);}
.steps .s.now{color:var(--coral);} .steps .s.now .dot{background:var(--coral);}
.steps .bar{width:16px;height:1px;background:var(--line-strong);}

.detail{padding:var(--s2) var(--s2) var(--s4);display:flex;flex-direction:column;gap:var(--s4);}
.detail dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s2) var(--s4);margin:0;font-size:var(--fs-body);}
.detail dt{color:var(--ink-cap);font-size:var(--fs-sub);padding-top:2px;}
.detail dd{margin:0;font-weight:600;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;}
.files{display:flex;gap:var(--s2);flex-wrap:wrap;}
.files a{display:inline-block;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:var(--s1) var(--s3);font-size:var(--fs-sub);font-weight:600;text-decoration:none;color:var(--ink-2);}
.files a:hover{border-color:var(--coral);color:var(--coral);}
.history{margin:0;padding:var(--s3) 0 0;border-top:1px solid var(--line-2);list-style:none;font-size:var(--fs-sub);color:var(--ink-cap);display:flex;flex-direction:column;gap:var(--s1);}
.history .num{margin-right:var(--s2);}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}
.reason{display:flex;gap:var(--s2);flex:1;min-width:260px;}
.reason input{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 14px;background:var(--card);font-size:var(--fs-sub);}
.reason input:focus{outline:0;border-color:var(--coral);}

.more{display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s4) 0 0;border-top:1px solid var(--line-2);margin-top:var(--s2);}
.empty{padding:var(--s7) var(--s5);text-align:center;color:var(--ink-cap);display:flex;flex-direction:column;align-items:center;gap:var(--s3);}
.empty b{color:var(--ink);font-size:var(--fs-h2);font-weight:600;}

/* 확인 팝업 · 위험 버튼 */
.rbtn.danger{background:var(--coral-deep);} .rbtn.danger:hover{background:#B92C46;}
.rbtn2.danger{color:var(--coral-deep);} .rbtn2.danger:hover{border-color:var(--coral-deep);color:var(--coral-deep);background:var(--neg-soft);}
.actions.owner{justify-content:flex-end;}
.cbox{border:0;border-radius:var(--r-md);padding:var(--s5);width:420px;max-width:calc(100vw - 32px);box-shadow:var(--shadow-pop);color:var(--ink);}
.cbox::backdrop{background:rgba(16,19,34,.45);}
.cbox b{font-size:var(--fs-h2);font-weight:600;}
.cbox .cbody{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s1);color:var(--ink-2);overflow-wrap:anywhere;}
.cbox .cbody div:last-child{color:var(--ink-cap);font-size:var(--fs-sub);margin-top:var(--s2);}

/* 연결 상태 */
.health{font-size:var(--fs-sub);color:var(--ink-cap);display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;}
.health .hs{display:inline-flex;align-items:center;gap:6px;}
.health .hd{width:8px;height:8px;border-radius:var(--r-pill);background:var(--pos);}
.health .bad .hd{background:var(--neg);}
.health b{color:var(--ink-2);font-weight:600;}
.health .rbtn2{margin-left:0;}

/* 기안 양식 */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);}
.form .f{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.form .wide{grid-column:1 / -1;}
.form label,.form .lbl{font-size:var(--fs-body);font-weight:600;color:var(--ink-2);}
.form .hint{font-size:var(--fs-sub);color:var(--ink-cap);}
.form input[type=text],.form input[type=password],.form input[type=date],.form select,.form textarea{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:10px 12px;background:var(--card);width:100%;font-size:var(--fs-body);}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-tint);}
.form textarea{min-height:96px;resize:vertical;}
.form .err{font-size:var(--fs-sub);font-weight:600;color:var(--coral-deep);}
.form [aria-invalid="true"]{border-color:var(--neg);}
.form .check{display:flex;gap:var(--s2);align-items:flex-start;font-weight:500;color:var(--ink-2);}
.form .check input{margin-top:4px;accent-color:var(--coral);}
.drop{border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--s4);background:var(--paper);display:flex;flex-direction:column;gap:var(--s2);}
.drop.over{background:var(--coral-tint);border-color:var(--coral);}
.drop ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s1);}
.drop li{display:flex;gap:var(--s2);align-items:center;}
.drop li span{overflow-wrap:anywhere;}
.drop li button{border:0;background:none;color:var(--coral-deep);cursor:pointer;font-size:var(--fs-sub);font-weight:700;}

/* 로그인 인트로 */
.loginov{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s4);position:relative;overflow:hidden;
  background:linear-gradient(118deg,#EAEEFF 0%,#C7D0F5 26%,#97ACFE 55%,#5273FE 82%,#3B5BFE 100%);}
.lgcard{width:420px;max-width:100%;background:var(--card);border-radius:var(--r-md);padding:var(--s5);box-shadow:0 18px 48px rgba(16,19,34,.22);display:flex;flex-direction:column;gap:var(--s4);position:relative;}
.lgcard img{height:24px;width:auto;align-self:flex-start;}
.lgcard p{margin:0;color:var(--ink-2);}
.lgcard .note{background:var(--neg-soft);color:var(--coral-deep);border-radius:var(--r-sm);padding:var(--s3);font-size:var(--fs-sub);font-weight:600;}

.toast{position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);background:var(--ink);color:#fff;padding:var(--s3) var(--s5);border-radius:var(--r-pill);font-size:var(--fs-body);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px);box-shadow:var(--shadow-pop);z-index:10;}
.toast.on{opacity:1;}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);}
  aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s3);border-right:0;border-bottom:1px solid var(--line-2);padding:var(--s3) var(--s4);}
  .brand{flex-direction:row;align-items:center;gap:var(--s2);padding:0;}
  .who{flex-direction:row;align-items:center;margin-left:auto;padding:var(--s2) var(--s3);}
  nav{flex-direction:row;width:100%;} nav .ng{display:none;} aside .foot{display:none;}
  main{padding:var(--s4);}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);}
  .stat .n{font-size:var(--fs-title);}
}
@media (max-width:640px){
  .form{grid-template-columns:minmax(0,1fr);}
  .card{padding:var(--s4);}
  .item .sg{grid-template-columns:minmax(0,1fr);}
  .item>summary{align-items:flex-start;} .pick{margin-top:3px;}
  .item .title span:last-child{white-space:normal;}
  .item .amount{text-align:left;}
  .item .steps{grid-column:1;grid-row:auto;justify-content:flex-start;flex-wrap:wrap;}
  .detail dl{grid-template-columns:minmax(0,1fr);gap:0;}
  .detail dd{margin-bottom:var(--s2);}
  .sec .sinput{width:100%;}
  .who .role{display:none;}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none;}}