/* 글자 크기
   ------------------------------------------------------------
   기준을 한 단계 올렸다. 예전에는 크롬을 125% 로 확대해야 읽을 만했는데,
   확대는 쓰는 사람이 매번 해야 하는 일이라 기본값을 그 크기로 맞췄다.

     예전  10  11  12  13  14  15  16  17  21  22  24  26  27  32
     지금  12  14  15  16  17  19  20  21  26  27  30  32  34  40

   새로 값을 적을 때도 이 줄에서 골라 쓰면 어긋나지 않는다. */

:root{
  --ink:#26232B;
  --muted:#7E7A85;
  --paper:#F5F4F4;
  --panel:#FFFFFF;
  --line:#E7E3E3;
  /* 테마 — 녹색(10/8). 단추 · 강조 · 선택 표시가 모두 이 셋을 따른다.
     로고만 회사 빨강(--logo)을 그대로 쓴다. */
  --brand:#2F6B52;
  --brand-dark:#1F4D3A;
  --brand-soft:#E6F0EB;
  --logo:#D8232A;
  --blue:#2B5DA8;
  --blue-soft:#EAF1FB;
  --red:#C0392B;
  --red-soft:#FBEDEB;
  --green:#2E7D5B;
  --green-soft:#E8F4EE;
  --amber:#B07C1F;
  --amber-soft:#FBF3E2;
  --purple:#5B4A9E;
  --purple-soft:#EEEAF7;
  --teal:#1F6F73;
  --teal-soft:#E4F1F1;
  --slate:#4A5568;
  --slate-soft:#EDEFF2;
  --radius:10px;
  --shadow:0 1px 3px rgba(38,35,43,.08), 0 4px 16px rgba(38,35,43,.06);
}
*{margin:0;padding:0;box-sizing:border-box}

/* hidden 은 언제나 이긴다.
   브라우저 기본값은 [hidden]{display:none} 인데, 우리가 어딘가에
   .busy-veil{display:flex} 처럼 적어 두면 그쪽이 이겨서 감춰지지 않는다.
   실제로 로딩 막이 안 사라져 화면을 덮고 있었다. el.hidden 으로 여닫는
   자리가 여럿이라 여기서 한 번에 못박는다. */
[hidden]{display:none!important}

/* 권한이 있어야 쓰는 단추 · 칸. 처음엔 감춰 두고, 세션을 확인해 권한이
   맞을 때만 app.js 의 applyPermGates 가 perm-on 을 붙여 연다.
   거꾸로(보여 두고 나중에 감추기) 하면 불러오는 동안 권한 없는 사람에게도
   잠깐 보인다. */
[data-perm]:not(.perm-on){display:none!important}
html,body{height:100%}
body{font-family:'IBM Plex Sans KR',sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:17px}
input,textarea,select{font-family:inherit;font-size:17px;color:var(--ink)}
.mono{font-family:'IBM Plex Mono',monospace}
.view{display:none}
.view.active{display:block}
/* 회사 마크. 그림 파일 한 장을 mask 로 찍어 쓰기 때문에 색은 color 를 따라간다.
   흰 로고·붉은 로고·옅은 워터마크가 전부 같은 /assets/logo.png 하나다.

   PNG 를 쓰는 이유는 이게 회사에서 받은 원본이기 때문이다. 알파 채널이 있어
   모양이 그대로 마스크가 된다. 나중에 SVG 원본이 생기면 아래 세 줄의 파일명만
   바꾸면 된다 — 마크가 들어가는 아홉 페이지는 손댈 것이 없다. */
.mark{display:inline-block;width:26px;height:26px;flex-shrink:0;margin-right:9px;vertical-align:-7px;
  background:currentColor;
  -webkit-mask:url(/assets/logo.png) center/contain no-repeat;
          mask:url(/assets/logo.png) center/contain no-repeat}

/* ============ 버튼 ============ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;font-weight:500;
  transition:background .15s, box-shadow .15s, transform .05s;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-danger{background:#fff;border-color:#EFC6C0;color:var(--red)}
.btn-danger:hover{background:var(--red-soft)}
.btn-ghost{color:var(--muted);padding:9px 10px;border-radius:8px}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn-sm{padding:5px 11px;font-size:16px;border-radius:7px}
.btn-lg{padding:13px 20px;font-size:19px;width:100%;justify-content:center}

/* ============ 로그인 / 게스트 ============ */
.auth-wrap{min-height:100vh;display:flex}
.auth-brand{flex:1.1;background:linear-gradient(160deg,#24463C,#10261F);color:#fff;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
/* 오른쪽 아래 워터마크. 마크와 같은 파일을 크게 키워 옅게 깐다. */
.auth-brand::after{content:"";position:absolute;right:-96px;bottom:-104px;width:470px;height:470px;
  background:rgba(201,164,92,.10);pointer-events:none;
  -webkit-mask:url(/assets/logo.png) center/contain no-repeat;
          mask:url(/assets/logo.png) center/contain no-repeat}
.auth-brand > *{position:relative;z-index:1}

.brand-head{padding:34px 56px 30px}
/* 마크는 '한들 웹하드' 줄에 맞춘다. align-items:center 로 두면 업체명과 영문
   두 줄 전체의 가운데를 잡아서, 마크가 두 줄 사이에 걸쳐 보인다. */
.brand-logo{font-family:'Gowun Batang',serif;font-size:32px;font-weight:700;letter-spacing:1px;
  display:flex;align-items:flex-start}
.brand-logo .mark{width:42px;height:42px;margin-right:14px;vertical-align:0;margin-top:6px;color:var(--logo)}
.brand-logo .txt small{display:block;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:3px;color:rgba(233,222,196,.62);margin-top:4px;font-weight:400}

/* 사옥 사진. 파일이 없어도 붉은 띠로 남을 뿐 배치는 무너지지 않는다.
   위아래로 붉은 기를 덧씌워 위쪽 로고 영역과 아래 문구가 사진에 붙어 보이지 않게 한다. */
.brand-photo{flex-shrink:0;height:clamp(200px,32vh,340px);
  background-color:#10261F;background-position:center 42%;background-size:cover;background-repeat:no-repeat;
  filter:saturate(.72);
  background-image:linear-gradient(180deg,rgba(16,38,31,.62) 0%,rgba(16,38,31,.18) 26%,rgba(16,38,31,.26) 68%,rgba(16,38,31,.78) 100%),
    var(--hero,url(/assets/hero.jpg))}

.brand-body{padding:46px 56px 0;flex:1}
.auth-brand h1{font-family:'Gowun Batang',serif;font-size:40px;line-height:1.5;font-weight:700;max-width:440px}
.auth-brand h1 em{font-style:normal;border-bottom:3px solid #C9A45C;padding-bottom:2px}
.brand-lines{margin-top:26px;color:rgba(255,255,255,.75);font-size:17px;line-height:2}
.auth-brand .brand-foot{padding:0 56px 40px;font-size:15px;color:rgba(255,255,255,.5);letter-spacing:.5px}
.auth-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-card{width:100%;max-width:380px}
.auth-card h2{font-size:27px;font-weight:700;margin-bottom:6px}
.auth-card .sub{color:var(--muted);margin-bottom:28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:16px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:8px;background:#fff;transition:border-color .15s, box-shadow .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field .hint{font-size:15px;color:var(--muted);margin-top:6px}
/* 로그인 아래 두 선택지.
   알약 모양으로 두고 켜지면 칸 전체가 물든다. 체크 표시를 눈으로 찾지 않아도
   켜졌는지 알 수 있다.

   설명은 물음표를 눌렀을 때만 뜨고, 떠 있는 동안에도 아래 것들을 밀지 않는다.
   글이 나타났다 사라질 때마다 로그인 버튼이 움직이면 누르다 빗나간다. */
.login-opts{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap}

.opt{position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;
  font-size:16px;color:var(--muted);cursor:pointer;user-select:none;
  transition:border-color .14s,color .14s,background .14s}
.opt:hover{border-color:var(--brand);color:var(--brand)}
.opt input{position:absolute;opacity:0;width:0;height:0;margin:0}

/* 체크 표시는 직접 그린다. 기본 체크박스는 .field 의 width:100% 에 걸리고
   브라우저마다 크기가 달라 알약 안에서 자리를 못 잡는다. */
.opt .dot{width:15px;height:15px;flex:0 0 15px;border-radius:5px;
  border:1.5px solid var(--line);background:#fff;position:relative;
  transition:border-color .14s,background .14s}
.opt .dot::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .14s}
.opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft);
  color:var(--brand);font-weight:600}
.opt:has(input:checked) .dot{border-color:var(--brand);background:var(--brand)}
.opt:has(input:checked) .dot::after{transform:rotate(45deg) scale(1)}
.opt:has(input:focus-visible){box-shadow:0 0 0 3px var(--brand-soft)}

/* 물음표와 말풍선. 말풍선은 흐름에서 빠져 있어 아무것도 밀지 않는다. */
.tip-wrap{position:relative;display:inline-flex;margin-left:2px}
.tip-btn{width:16px;height:16px;padding:0;border:0;border-radius:50%;
  background:var(--line);color:#fff;font-size:14px;font-weight:700;line-height:16px;
  cursor:pointer;transition:background .14s}
.opt:has(input:checked) .tip-btn{background:var(--brand)}
.tip-btn:hover{background:var(--ink)}

.tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);
  width:max(240px,18rem);padding:11px 13px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:15px;font-weight:400;line-height:1.65;
  text-align:left;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;z-index:40;
  box-shadow:0 6px 20px rgba(38,35,43,.22);
  transition:opacity .14s,transform .14s,visibility .14s}
.tip b{color:#CFE6D9}
.tip::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--ink)}
.tip-wrap:hover .tip,.tip-btn:focus-visible + .tip,.tip-wrap.on .tip{
  opacity:1;visibility:visible;transform:translate(-50%,0)}

/* 좁은 화면에서는 말풍선이 화면 밖으로 나간다. 왼쪽 끝에 맞춘다. */
@media (max-width:520px){
  .tip{left:auto;right:-8px;transform:translate(0,4px);width:min(260px,78vw)}
  .tip::after{left:auto;right:14px;margin-left:0}
  .tip-wrap:hover .tip,.tip-btn:focus-visible + .tip,.tip-wrap.on .tip{transform:translate(0,0)}
}

.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:15px;margin:22px 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-back{margin-top:24px;text-align:center}
.link-btn{color:var(--brand);font-weight:500;text-decoration:none;background:none}
.link-btn:hover{text-decoration:underline}
.notice-open{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:14px;
  padding:9px;border-radius:8px;color:var(--brand-dark);background:var(--brand-soft);font-size:16px;font-weight:500}
.notice-open:hover{background:#D6E7DD}

/* ============ 테스트 계정 안내 (운영 전 삭제) ============ */

/* ============ 앱 레이아웃 ============ */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.side-brand{padding:22px 20px 18px;border-bottom:1px solid var(--line);font-family:'Gowun Batang',serif;
  font-weight:700;font-size:21px;color:var(--ink);letter-spacing:.5px;display:flex;align-items:flex-start}
.side-brand .mark{color:var(--logo);width:28px;height:28px;margin-right:9px;vertical-align:0;margin-top:3px}
.side-brand .txt small{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--muted);font-weight:400;margin-top:2px}
.side-nav{padding:14px 12px;flex:1}
.side-nav .nav-label{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:1px;padding:8px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:8px;color:var(--ink);text-align:left;margin-bottom:2px}
.nav-item svg{flex-shrink:0}
.nav-item .badge{margin-left:auto;background:var(--paper);color:var(--muted);font-size:14px;font-weight:600;
  padding:1px 7px;border-radius:99px;font-family:'IBM Plex Mono',monospace}
.nav-item:hover{background:var(--paper)}
.nav-item.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.nav-item.on .badge{background:#fff;color:var(--brand-dark)}
.side-user{border-top:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}
.side-user .who{flex:1;min-width:0}
.side-user .who b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .who span{font-size:14px;color:var(--muted)}
.main{flex:1;padding:36px 42px;min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.page-head h2{font-size:26px;font-weight:700}
.page-head .desc{color:var(--muted);margin-top:4px;font-size:16px}

/* ============ 패널 ============ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel + .panel{margin-top:24px}
.panel-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-head h3{font-size:19px;font-weight:600}
.panel-body{padding:24px}
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:9px;
  background:var(--amber-soft);color:#7A5410;font-size:16px;margin-bottom:16px}
.banner svg{flex-shrink:0;margin-top:2px}

/* ============ 업로드 존 ============ */
.dropzone{border:2px dashed #BFD5C9;border-radius:var(--radius);background:linear-gradient(180deg,#FCFDFC,#F5F9F6);
  padding:36px 20px;text-align:center;transition:border-color .15s, background .15s}
.dropzone.drag{border-color:var(--brand);background:var(--brand-soft)}
.dropzone .dz-icon{width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.dropzone b{display:block;font-size:19px;margin-bottom:4px}
.dropzone p{color:var(--muted);font-size:16px;margin-bottom:14px}
.dropzone .limit{font-size:15px;color:var(--muted);margin-top:12px;margin-bottom:0}
.dropzone .limit b{display:inline;font-size:inherit;margin:0;color:var(--ink)}
.dropzone .dz-text p{margin-bottom:0}
.dropzone .dz-act{margin-top:14px}
/* 모달 안에서 쓰는 납작한 드롭존. 세로 공간이 없어 아이콘·문구·버튼을 한 줄로 눕힌다. */
.dropzone.dz-compact{padding:16px 18px;display:flex;align-items:center;gap:14px;
  text-align:left;flex-wrap:wrap}
.dropzone.dz-compact .dz-icon{width:40px;height:40px;margin:0;flex-shrink:0}
.dropzone.dz-compact .dz-text{flex:1;min-width:150px}
.dropzone.dz-compact b{font-size:17px;margin-bottom:2px}
.dropzone.dz-compact .limit{margin-top:2px;font-size:14px}
.dropzone.dz-compact .dz-act{margin-top:0;flex-shrink:0}
.picked-file{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:14px;font-size:16px;color:var(--brand-dark);font-weight:500}
.picked-file .pill{background:var(--brand-soft);padding:5px 12px;border-radius:99px;display:inline-flex;align-items:center;gap:8px}
.picked-file .pill button{color:var(--brand-dark);font-weight:700;line-height:1}
.dz-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;color:var(--muted);font-size:14px}
.dz-note::before{content:'';width:6px;height:6px;border-radius:50%;background:#22A06B;box-shadow:0 0 0 3px #E7F6EF}

/* ============ 업로드 진행 ============ */
.up-overlay{display:none;position:fixed;inset:0;background:rgba(16,26,22,.45);z-index:60;
  align-items:center;justify-content:center;padding:20px}
.up-overlay.open{display:flex}
.up-card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  width:100%;max-width:430px;padding:26px 24px;text-align:center}
.up-card h4{font-size:19px;font-weight:700;margin-bottom:6px}
.up-card .up-file{font-size:16px;color:var(--muted);margin-bottom:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-bar{height:8px;border-radius:99px;background:var(--paper);overflow:hidden}
.up-bar span{display:block;height:100%;width:0;border-radius:99px;background:var(--brand);transition:width .2s ease}
.up-bar.busy span{animation:upPulse 1.1s ease-in-out infinite}
@keyframes upPulse{0%,100%{opacity:1}50%{opacity:.5}}
.up-pct{font-size:30px;font-weight:500;margin-top:14px}
.up-stat{font-size:15px;color:var(--muted);margin-top:4px}

/* ============ 거래처 검색 결과 ============ */
.pick-list{margin-top:8px;max-height:220px;overflow-y:auto;border-radius:8px}
.pick-list:not(:empty){border:1px solid var(--line)}
.pick-list .hint{padding:10px 12px;margin:0}
.pick-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--line);background:#fff}
.pick-row:last-child{border-bottom:none}
.pick-row:hover{background:var(--brand-soft)}
.pick-row .pr-name{flex:1;min-width:0;font-size:16px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-row .pr-sub{font-size:15px;color:var(--muted);flex-shrink:0}
.picked-box{background:var(--paper);border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:16px}
.up-list{margin-top:16px;max-height:210px;overflow-y:auto;text-align:left;
  border-top:1px solid var(--line);padding-top:10px}
.up-li{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:15px}
.up-li .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.up-li .s{flex-shrink:0;font-size:14px;font-weight:600;color:var(--muted)}
.up-li.done .n{color:var(--ink)}
.up-li.done .s{color:var(--green)}
.up-li.doing .s{color:var(--brand)}
.up-li.fail .n,.up-li.fail .s{color:var(--red)}

/* ============ 선택한 파일 목록 (다중 업로드) ============ */
.filelist{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.filelist:empty{display:none}
/* 파일 하나 = 두 줄 카드. 윗줄은 무슨 파일인지, 아랫줄은 어디로 보낼지.
   아랫줄은 아이콘 폭만큼 들여서 파일명과 같은 선에서 시작한다. */
.fl-item{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;
  padding:12px 14px 12px 13px;background:#fff;transition:border-color .15s,box-shadow .15s}
.fl-item:hover{box-shadow:0 1px 6px rgba(38,35,43,.06)}
.fl-top{display:flex;align-items:center;gap:12px}
.fl-top .fico{width:34px;height:34px;border-radius:8px;font-size:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.fl-name{flex:1;min-width:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-size{font-size:15px;color:var(--muted);flex-shrink:0}
.fl-del{color:var(--muted);font-size:21px;line-height:1;width:30px;height:30px;border-radius:7px;flex-shrink:0}
.fl-del:hover{background:var(--red-soft);color:var(--red)}

.fl-meta{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:10px;padding-left:46px}
.cat-pick{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cat-lbl{font-size:14px;font-weight:600;color:var(--muted);margin-right:4px;white-space:nowrap}
.cat-opt{padding:5px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;
  font-size:15px;color:var(--ink);transition:border-color .12s,background .12s,color .12s}
/* 고르는 칩은 부서 색을 쓴다 (--cat 은 cat-print 같은 칸 색에서 온다).
   안 고른 동안에는 글자에만 색이 돌고, 고르면 그 색으로 물든다 — 올릴 때
   고른 색이 목록 칩 색과 같아야 헷갈리지 않는다. */
.cat-opt{color:var(--cat,var(--ink))}
.cat-opt:hover{border-color:var(--cat)}
.cat-opt.on{background:var(--cat);border-color:var(--cat);color:#fff;font-weight:600}
.cat-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 비고는 오른쪽 끝에 붙인다. 분류 칩 바로 뒤에 붙어 있으면 칩과 한 덩어리로
   읽혀서, 고르는 자리와 적는 자리가 갈리지 않는다. */
.fl-cmt{flex:0 1 300px;min-width:180px;margin-left:auto;padding:7px 11px;border:1px solid var(--line);
  border-radius:8px;font-size:15.5px;background:var(--paper)}
.fl-cmt:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* 부서분류를 아직 안 골랐다. 올리기 전에 눈에 띄어야 한다.
   이름표에 글을 덧붙이면 고른 카드와 칩 시작점이 어긋나서, 색으로만 알린다.
   무엇을 해야 하는지는 아래 '파일마다 부서분류를 골라 주세요' 가 말해 준다. */
.fl-item.need{border-left-color:var(--brand)}
.fl-item.need .cat-lbl{color:var(--brand)}
/* '부서분류를 선택해 주세요' 창을 닫으면 안 고른 첫 카드로 데려가 한 번 깜빡인다. */
.fl-item.flash{animation:needFlash 1.4s ease}
@keyframes needFlash{
  0%,100%{background:#fff;box-shadow:none}
  25%,60%{background:var(--brand-soft);box-shadow:0 0 0 3px rgba(47,107,82,.18)}
}
.fl-sum{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:15px;color:var(--muted)}
.fl-sum b{color:var(--ink)}

/* ============ 고객 파일 리스트 ============ */
.receipt{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:15px 18px;
  display:flex;gap:14px;align-items:center;transition:box-shadow .15s}
.receipt:hover{box-shadow:var(--shadow)}
.receipt + .receipt{margin-top:12px}
/* 머리글은 표처럼 칸이 나뉘는 넓은 화면에서만 쓴다. 좁으면 행이 세로로 쌓여 의미가 없다. */
.receipt-head{display:none}
.receipt .fico{width:42px;height:42px;border-radius:9px;flex-shrink:0;align-self:flex-start;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.5px}
.f-pdf{background:var(--red-soft);color:var(--red)}
.f-doc{background:var(--blue-soft);color:var(--blue)}
.f-xls{background:var(--green-soft);color:var(--green)}
.f-img{background:var(--amber-soft);color:var(--amber)}
.f-etc{background:var(--paper);color:var(--muted)}
.receipt .fbody{flex:1;min-width:0}
.receipt .fname{font-weight:600;font-size:17px;word-break:break-all}
.receipt .fcomment{margin-top:7px;font-size:16px;color:var(--ink);background:var(--paper);
  border-radius:7px;padding:7px 11px;border-left:3px solid var(--brand)}
.receipt .fright{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0;text-align:right}
.receipt .fright .fmeta{font-size:15px;color:var(--muted);white-space:nowrap}
.receipt .fright .fmeta .sep{margin:0 5px;color:#D6CFCF}

/* ============ 테이블 ============ */
/* 표가 패널보다 넓으면 패널 안에서만 옆으로 구른다. 예전에는 좁은 화면(900px
   이하)에서만 그렇게 해서, 1440px 노트북 화면에서는 고객별 파일 관리 표가
   패널 밖으로 삐져나가 페이지 전체가 옆으로 밀리고 관리 칸이 안 보였다. */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:15px;font-weight:600;color:var(--muted);padding:13px 16px;
  border-bottom:1px solid var(--line);letter-spacing:.3px;white-space:nowrap;background:#FBFAFA}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#FBFAFA}
.tbl th.chk,.tbl td.chk{width:34px;padding-right:0}
.tbl input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;vertical-align:middle}
.tbl .fname-cell{display:flex;align-items:center;gap:10px;min-width:190px}
.tbl .fico{width:34px;height:34px;border-radius:8px;font-size:12px;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'IBM Plex Mono',monospace;flex-shrink:0}
.tbl .fname-cell b{font-weight:600;word-break:break-all}
.tbl .fname-cell .cmt{display:block;font-size:15px;color:var(--muted);font-weight:400;margin-top:1px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;
  font-size:15px;font-weight:500;white-space:nowrap;border:none}
.chip-cust{background:var(--brand-soft);color:var(--brand-dark)}
.chip-admin{background:var(--purple-soft);color:var(--purple)}
.chip-guest{background:var(--amber-soft);color:var(--amber)}
.chip-cat{background:#EFEDED;color:#5A5560}

/* ============ 부서분류 색 ============
   넷(출력실 · 가공실 · 제작실 · 기타)이 모두 같은 회색이라 표를 훑을 때
   한 덩어리로 보였다. 칸마다 제 색을 주고, 그 색을 칩 · 거르개 단추 ·
   올리기 카드의 고르는 칩 · 고객 폴더의 부서 칸이 함께 쓴다.

   색만으로 가르지 않는다 — 글자는 그대로 있고, 색은 거드는 역할이다
   (흑백으로 인쇄하거나 색을 못 가리는 사람도 읽을 수 있어야 한다). */
.cat-print{--cat:var(--blue);  --cat-bg:var(--blue-soft)}
.cat-work {--cat:var(--amber); --cat-bg:var(--amber-soft)}
.cat-make {--cat:var(--teal);  --cat-bg:var(--teal-soft)}
/* '기타' 는 색을 주지 않는다 — 셋 중 어디도 아니라는 뜻이라 회색이 맞다. */
.cat-etc  {--cat:#5A5560;      --cat-bg:#EFEDED}

/* 바탕은 비우고 테두리만 — 올리기 카드의 고르는 칩과 같은 모양이다.
   색이 바탕에 깔리면 표 한 줄에 색 덩어리가 여럿 생겨 되레 시끄러웠다. */
.chip-dept{background:#fff;border:1px solid var(--line);color:var(--cat);font-weight:600}

/* 거르개 단추. 안 눌린 동안에는 글자에만 색이 돌고, 눌리면 그 색으로 물든다 —
   지금 무엇으로 걸러 놓았는지가 아래 표의 칩과 같은 색으로 보인다. */
.cust-tab.cat-tab{color:var(--cat,var(--ink))}
.cust-tab.cat-tab:hover{border-color:var(--cat)}
.cust-tab.cat-tab.on{background:var(--cat);border-color:var(--cat);color:#fff}
.chip-on{background:var(--green-soft);color:var(--green)}
.chip-off{background:#EFEDED;color:var(--muted)}
button.chip{cursor:pointer}
button.chip:hover{box-shadow:0 0 0 2px var(--brand-soft)}
.icon-btn{width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;
  justify-content:center;color:var(--muted);transition:background .12s,color .12s}
.icon-btn:hover{background:var(--paper);color:var(--brand)}
.icon-btn.danger:hover{background:var(--red-soft);color:var(--red)}
.icon-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ============ 진행 상황 체크 ============ */
.prog-cell{display:flex;gap:5px;white-space:nowrap}
.prog{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--line);background:#fff;font-size:15px;font-weight:600;color:var(--muted);
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;user-select:none}
.prog input{width:13px!important;height:13px!important;margin:0;accent-color:var(--green);cursor:inherit}
.prog:hover{border-color:var(--green);color:var(--green)}
.prog.done{background:var(--green-soft);border-color:#BFE0CE;color:var(--green)}
.prog.locked{cursor:not-allowed;opacity:.55;background:#FAFAFA}
.prog.locked:hover{border-color:var(--line);color:var(--muted)}
.prog.done.locked:hover{border-color:#BFE0CE;color:var(--green)}
.prog-all{margin-left:2px;align-self:center;font-size:14px;font-weight:700;color:var(--green)}
.dept-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:15px;color:var(--muted);align-items:center}
.dept-legend b{color:var(--ink)}

/* ============ 필터바 / 탭 ============ */
/* 한 줄에 선 것들의 키를 맞춘다. 날짜칸 · 검색상자 · 버튼이 저마다 다른
   여백을 갖고 있어서, 나란히 두면 버튼만 작아 보였다. */
.filterbar{display:flex;gap:11px;align-items:stretch;flex-wrap:wrap;--bar-h:46px}
.filterbar > *{height:var(--bar-h)}
.filterbar select,.filterbar input{padding:0 14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.filterbar .btn{padding:0 16px;display:inline-flex;align-items:center;gap:6px}
.filterbar .tilde{display:flex;align-items:center}
.filterbar input[type=date]{font-family:'IBM Plex Mono',monospace;font-size:15px}
.filterbar .tilde{color:var(--muted)}
.filterbar select:focus,.filterbar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* 검색칸과 조회 버튼은 한 덩어리다. 테두리를 바깥에 한 번만 두르고
   안에서 세로줄로 나눈다. 따로 떨어져 있으면 버튼이 어느 칸에 걸린
   것인지 눈으로 안 잡힌다. */
.searchbox{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.filterbar .searchbox input{height:100%}
.searchbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.filterbar .searchbox input{border:0;border-radius:0;box-shadow:none}
.filterbar .searchbox input:focus{border:0;box-shadow:none}
.filterbar .btn-sm{height:var(--bar-h);font-size:16px}
.searchbox button{border:0;border-left:1px solid var(--line);border-radius:0;background:var(--bg);
  padding:0 14px;font-size:16px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
.searchbox button:hover{background:var(--brand-soft);color:var(--brand)}

/* 검색 결과에서 한 사람을 고르는 목록. 길어지면 안쪽만 구른다. */
/* 직원이 수백 명이면 다 나온다. 안쪽만 구르게 두고 높이를 화면에 맞춘다. */
.pick-list{border:1px solid var(--line);border-radius:8px;max-height:min(360px,45vh);overflow-y:auto;margin-bottom:16px}
.pick-list button{display:flex;width:100%;gap:10px;align-items:center;text-align:left;
  padding:10px 14px;border:0;border-bottom:1px solid var(--line);background:#fff;cursor:pointer}
.pick-list button:last-child{border-bottom:0}
.pick-list button:hover{background:var(--brand-soft)}
.pick-list button[disabled]{cursor:default;color:var(--muted);background:var(--bg)}
.pick-list .pk-nm{font-weight:600}
.pick-list .pk-id{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--muted)}
.pick-list .pk-tag{margin-left:auto;font-size:15px}
.pick-list .empty-row{padding:14px;color:var(--muted);font-size:16px;text-align:center}
/* 쪽 나누기. 표 바로 아래, 왼쪽에 몇 번째 줄인지 · 오른쪽에 쪽 단추.
   지금 쪽은 채워서, 단추 크기는 숫자가 두 자리가 돼도 흔들리지 않게 고정한다. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--line);background:var(--bg)}
.pg-info{font-size:15px;color:var(--muted);font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.pg-info b{color:var(--ink);font-weight:600}
.pg-btns{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg{min-width:36px;height:36px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:#fff;
  font-size:15px;font-family:'IBM Plex Mono',monospace;color:var(--ink);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.pg:hover:not(:disabled):not(.on){border-color:var(--brand);color:var(--brand)}
.pg.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;cursor:default}
.pg:disabled{opacity:.35;cursor:default}
.pg-gap{min-width:20px;text-align:center;color:var(--muted)}

.picked-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:16px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px}
.perm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px}
/* .field input 의 width:100% 가 체크박스까지 잡아서 칸을 통째로 먹는다.
   글자 옆에 붙는 표식이므로 크기를 고정하고 줄어들지 않게 둔다. */
.perm-grid label{display:flex;gap:9px;align-items:center;font-size:16px;font-weight:500;
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.perm-grid label:hover{border-color:var(--brand);color:var(--brand)}
.perm-grid input[type=checkbox]{width:15px!important;height:15px;flex:0 0 15px;margin:0;padding:0;
  accent-color:var(--brand);cursor:pointer}
.perm-grid label:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
@media (max-width:640px){.perm-grid{grid-template-columns:1fr}}
/* 분류 · 진행 거르개는 오른쪽 끝에 붙인다. 아래 표의 부서분류 · 진행
   칸도 오른쪽이라, 거르개가 그 위에 세로로 맞아떨어진다.
   이름표는 자기 단추들 바로 앞에 남는다 — 뒤로 밀면 무엇을 고르는
   줄인지 다 읽고 나서야 알게 된다. */
.tab-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  padding:14px 22px;border-bottom:1px solid var(--line)}
.tab-row .tab-label{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.5px;min-width:44px}

/* 분류 · 진행을 한 줄에. 분류는 왼쪽 끝, 진행은 오른쪽 끝에 붙인다.
   두 줄로 쌓아 두면 목록이 그만큼 아래로 밀렸다. 화면이 좁아 한 줄에
   못 들어가면 진행이 다음 줄로 내려가 왼쪽에서 시작한다. */
.tab-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line)}
.tab-bar .tab-row{justify-content:flex-start;padding:0;border-bottom:0}
.cust-tab{padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:16px;font-weight:500;color:var(--muted)}
.cust-tab:hover{border-color:var(--brand);color:var(--brand)}
.cust-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ============ 통계 카드 ============ */
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:24px}
/* 두 칸의 줄을 맞춘다. 가운데로 맞추면 글이 두 줄인 칸이 세 줄인 칸 옆에서
   아래로 처져 보인다 — 같은 '이름 — 숫자' 인데 눈에는 어긋나 보인다.
   위에서부터 맞추고, 칸 안을 이름 · 숫자 · 덧붙임 세 줄로 똑같이 둔다. */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;box-shadow:var(--shadow);display:flex;align-items:flex-start;gap:18px}
.stat .ico{width:48px;height:48px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-txt{min-width:0}
.stat .k{font-size:16px;color:var(--muted);font-weight:500;line-height:1.35}
.stat .v{font-size:34px;font-weight:700;margin-top:3px;font-family:'IBM Plex Mono',monospace;
  line-height:1.15;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
/* 단위는 숫자 옆에 작게. 글자 가운데서 끊기지 않게 한 덩어리로 둔다. */
.stat .v .u{font-size:16px;color:var(--muted);font-weight:400;
  font-family:'IBM Plex Sans KR',sans-serif;white-space:nowrap}
.stat .s{font-size:15px;color:var(--muted);margin-top:7px;line-height:1.4}

/* ============ 검색 범위 — 기간 · 사용 중만 을 안 따질 때 ============
   따지지 않는 칸은 감추고 그 자리에 까닭을 띄운다. 누르면 검색을 푼다.
   두 화면이 같은 모양이다(업로드 파일관리 '기간 무관 검색',
   로그인 계정관리 '모든 상태에서 검색').

   날짜 칸은 한 겹 감싸 두었다. 막대의 높이 규칙(.filterbar > *)이 바로
   아래 칸에만 걸려서, 감싼 안쪽 칸이 글자 높이로 줄어들었다 — 안쪽에도
   같은 높이를 준다. */
.filterbar .date-range{display:inline-flex;align-items:stretch;gap:11px}
.filterbar .date-range > *{height:var(--bar-h)}
.scope-note{display:inline-flex;align-items:center;gap:7px;padding:0 14px;border-radius:99px;border:0;
  background:var(--brand-soft);color:var(--brand-dark);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer}
.scope-note::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.scope-note .x{font-size:12px;opacity:.55;margin-left:2px}
.scope-note:hover{background:var(--brand);color:#fff}
.scope-note:hover .x{opacity:.9}
.scope-note:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 파일 이름 — 누르면 연다 */
.fname-open{background:none;border:0;padding:0;font:inherit;font-weight:700;color:inherit;text-align:left;
  cursor:pointer;word-break:break-all}
.fname-open:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.fname-open:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}

/* 제목 옆 기간 */
.t-period{margin-left:8px;font-size:15px;font-weight:500;color:var(--muted)}

/* 누를 수 있는 통계 카드 */
.stat.stat-go{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.stat.stat-go:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(38,35,43,.1)}
.stat.stat-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 고객명 옆 돋보기 */
.cust-cell{display:flex;align-items:center;gap:4px}
.cust-find{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;color:var(--muted);flex-shrink:0}
.cust-find:hover{background:var(--brand-soft);color:var(--brand)}

/* ============ 로그 ============ */
.log-badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:6px;
  font-size:15px;font-weight:600;white-space:nowrap}
.lb-up{background:var(--blue-soft);color:var(--blue)}
.lb-down{background:var(--green-soft);color:var(--green)}
.lb-del{background:var(--red-soft);color:var(--red)}
/* 색은 뜻 하나씩만 맡는다. 열두 가지 색이 되면 아무것도 눈에 안 들어온다.

     파랑  업로드          초록  다운로드 · 복원
     빨강  휴지통 · 삭제   보라  진행사항 체크
     청록  계정 · 거래처   황토  공지 · 발송
     회청  파일 수정       회색  로그인 · 기타                */
.lb-memb{background:var(--teal-soft);color:var(--teal)}
.lb-noti{background:var(--amber-soft);color:var(--amber)}
.lb-edit{background:var(--slate-soft);color:var(--slate)}
.lb-login{background:#EFEDED;color:#5A5560}
.lb-prog{background:var(--purple-soft);color:var(--purple)}
/* 이력의 첫 칸(행동)은 굵게 세우고 나머지는 흐리게 둔다.
   한 줄에 다 적히지만 눈으로는 두 덩이로 읽힌다. */
.lg-cell{display:flex;gap:12px;align-items:baseline}
.lg-act{flex:0 0 122px;font-weight:600;color:var(--ink)}

/* 넘친 줄도 제 칸 안에서 이어진다.
   keep-all 을 주면 한글이 낱말 가운데서 끊기지 않는다. 날짜처럼 띄어쓰기
   없는 토막은 통째로 다음 줄로 내려간다 — 2026-09- / 08] 로 갈리지 않는다. */
.lg-rest{flex:1;min-width:0;color:var(--muted);
  word-break:keep-all;overflow-wrap:break-word}

/* 좁은 화면에서는 두 칸을 위아래로 쌓는다. 나란히 두면 세부가 너무 좁다. */
@media (max-width:900px){
  .lg-cell{flex-direction:column;gap:2px}
  .lg-act{flex:none}
}

.log-time{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--muted);white-space:nowrap}

/* ============ 모달 ============ */
/* 모달이 화면보다 길어지면 배경째로 스크롤된다. align-items:center 로 세로 정렬하면
   넘칠 때 위쪽이 잘려 손이 닿지 않으므로, flex-start + margin:auto 로 가운데를 맞춘다. */
.modal-back{display:none;position:fixed;inset:0;background:rgba(16,26,22,.45);z-index:50;
  align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;animation:pop .18s ease;margin:auto}
/* 파일 목록이 들어가는 모달은 440px 로는 분류·비고가 눌린다. */
/* 넓은 모달. 파일 카드의 '부서분류 + 칩 넷 + 비고' 가 한 줄에 서려면
   이만큼 있어야 한다 — 좁으면 비고가 아래로 내려가 카드가 세 줄이 된다. */
.modal.modal-wide{max-width:780px}

/* 직접 칠 수 있는 select. 입력한 글자로 걸러진 목록이 아래로 펼쳐진다. */
.combo{position:relative}
.combo input{padding-right:34px}
.combo-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:30px;font-size:14px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;border-radius:0 8px 8px 0}
.combo-toggle:hover{color:var(--ink)}
.combo-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;padding:4px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(38,35,43,.14);max-height:196px;overflow-y:auto}
.combo-list.open{display:block}
.combo-list{max-height:260px}
.combo-list li{padding:8px 10px;border-radius:6px;font-size:17px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 이름 아래에 사업자번호 · 아이디 · 연락처를 작게 붙인다. 같은 이름이 둘일 때
   어느 쪽인지 여기서 갈린다. 게스트는 이름 옆에 G 로 표시한다. */
.combo-list li .cb-nm{display:block;overflow:hidden;text-overflow:ellipsis}
.combo-list li .cb-sub{display:block;font-size:14px;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis}
.combo-list li:hover .cb-sub,.combo-list li.active .cb-sub{color:var(--brand-dark);opacity:.75}
.combo-list li .cb-g{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;
  background:var(--brand-soft);color:var(--brand-dark);font-size:12px;font-weight:700;
  vertical-align:2px}
.combo-list li:hover,.combo-list li.active{background:var(--brand-soft);color:var(--brand-dark)}
.combo-list li.empty{color:var(--muted);cursor:default;font-size:15.5px;white-space:normal}
.combo-list li.empty:hover{background:transparent;color:var(--muted)}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:20px;font-weight:700}
.modal-body{padding:22px}
/* 파일을 여러 개 끌어다 놓으면 목록이 화면 밖으로 자란다. 목록만 스크롤시킨다.
   본문 전체에 overflow 를 걸면 대상 고객 자동완성 목록이 본문 경계에서 잘린다. */
.modal .filelist{max-height:min(34vh,280px);overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:#FBFAFA;flex-wrap:wrap}
.modal-foot .left{margin-right:auto;display:flex;align-items:center;gap:7px;font-size:16px;color:var(--muted)}
.info-rows{display:grid;grid-template-columns:120px 1fr;row-gap:12px;column-gap:14px;font-size:17px}
.info-rows dt{color:var(--muted);font-size:16px;word-break:keep-all}
.info-rows dd{font-weight:500;word-break:break-all}
/* 이름을 윗줄에 두고 값이 한 줄을 통째로 쓰는 칸. 비고 · 주소처럼 긴 글을
   120px 옆의 좁은 칸에 넣으면 서너 자마다 꺾여서 읽을 수가 없다. */
.info-rows dt.wide{grid-column:1/-1}
.info-rows dd.wide{grid-column:1/-1;margin-top:-7px}
.info-long{white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;font-weight:400;
  line-height:1.65;background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;max-height:190px;overflow-y:auto}

/* 공지 모달 */
.modal.wide{max-width:560px}
.modal-tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--line);background:#FBFAFA}
.modal-tab{padding:12px 14px;font-size:16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.modal-tab.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.tabpane{display:none;padding:22px;max-height:56vh;overflow-y:auto}
.tabpane.on{display:block}
.notice-item{padding:14px 0;border-bottom:1px solid var(--line)}
.notice-item:first-child{padding-top:0}
.notice-item:last-child{border-bottom:none;padding-bottom:0}
.notice-item .nh{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.notice-item .nh b{font-size:17px}
.notice-item .nd{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--muted);margin-left:auto}
.notice-item p{font-size:16px;color:#5B5660;line-height:1.7}
.chip-new{background:var(--brand);color:#fff;font-size:12px;padding:1px 7px;border-radius:99px;font-weight:700}
.chip-pin{background:var(--amber-soft);color:var(--amber);font-size:12px;padding:1px 7px;border-radius:99px;font-weight:700}
.notice-item p{white-space:pre-wrap}
.notice-title-cell{max-width:340px}
.notice-title-cell b{font-weight:600}
.notice-title-cell .prev{display:block;font-size:15px;color:var(--muted);font-weight:400;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guide-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.guide-step:last-child{border-bottom:none}
.guide-step .num{width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;font-family:'IBM Plex Mono',monospace}
.guide-step b{display:block;font-size:17px;margin-bottom:2px}
.guide-step p{font-size:16px;color:#5B5660;line-height:1.65}

/* ============ 토스트 ============ */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);
  color:#fff;padding:11px 20px;border-radius:10px;font-size:16px;opacity:0;pointer-events:none;
  transition:opacity .2s, transform .2s;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty b{display:block;color:var(--ink);margin-bottom:4px;font-size:19px}

@media (max-width:900px){
  .auth-brand{display:none}
  .app-shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto}
  .side-brand{border-bottom:none;border-right:1px solid var(--line);white-space:nowrap}
  .side-nav{display:flex;padding:8px;flex:1}
  .side-nav .nav-label{display:none}
  .nav-item{white-space:nowrap;margin-bottom:0}
  .nav-item .badge{margin-left:4px}
  .side-user{border-top:none;border-left:1px solid var(--line)}
  .side-user .who{display:none}
  .main{padding:20px 16px}
  .stat-row{grid-template-columns:1fr}
  .receipt{flex-wrap:wrap}
  .receipt .fright{width:100%;flex-direction:row;justify-content:space-between;align-items:center}
  .tbl-wrap{overflow-x:auto}
}

/* ============================================================
   PC 화면 (1100px 이상)
   기본 스타일은 좁은 화면 기준이라, 넓은 화면에서는 세로로 늘어지고
   여백만 커진다. 여기서 밀도를 높이고 최대 폭을 제한한다.
   ============================================================ */
@media (min-width:1100px){
  /* 내용이 와이드 모니터에서 무한정 늘어나지 않게 잡아둔다 */
  .main{padding:34px 44px;max-width:1560px;margin:0 auto}

  /* 통계 카드가 2장뿐이라 늘리면 휑해진다. 왼쪽 정렬로 고정 폭 */
  .stat-row{grid-template-columns:repeat(auto-fill,minmax(300px,360px));gap:18px}

  /* 드롭존을 세로 배치 → 가로 한 줄로. 세로 공간을 크게 아낀다 */
  .dropzone{display:flex;align-items:center;flex-wrap:wrap;gap:16px;
    padding:18px 22px;text-align:left}
  .dropzone .dz-icon{margin:0;width:44px;height:44px}
  .dropzone .dz-text{flex:1;min-width:220px}
  .dropzone b{font-size:17px;margin-bottom:2px}
  .dropzone p{font-size:15.5px}
  .dropzone .dz-text p:not(.limit){display:none}
  .dropzone .limit{margin-top:0}
  .dropzone .dz-act{margin-top:0;flex-shrink:0}
  .dropzone .dz-note{width:100%;justify-content:flex-start;margin-top:2px}

  /* 파일 행은 넓은 화면에서도 두 줄 카드로 둔다. 예전에는 한 줄로 펴서
     아이콘·이름·크기·셀렉트·비고·× 를 칸막이처럼 늘어놨는데 딱딱해 보였다. */

  /* 내가 올린 파일: 세로 스택 → 표처럼 한 줄 행.
     이름·분류·용량·날짜·버튼에 각각 칸을 주고 비율(fr)로 나눈다.
     비율로 나누면 행마다 같은 값으로 풀리기 때문에, 파일명 길이가 달라도 칸이 세로로 정렬된다.
     좁아질 때를 대비해 각 칸에 최소폭을 걸어 둔다. */
  .receipt,.receipt-head{display:grid;align-items:center;gap:14px;
    grid-template-columns:38px minmax(180px,2.4fr) minmax(112px,1fr) minmax(88px,.85fr) minmax(146px,1.15fr) 100px}
  .receipt{padding:11px 16px}
  /* 머리글은 행과 같은 칸 비율을 쓴다. 투명 테두리는 카드의 1px 테두리만큼 자리를 맞추기 위한 것. */
  .receipt-head{padding:0 16px 10px;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--muted);
    border:1px solid transparent;border-bottom-color:var(--line)}
  .receipt-head[hidden]{display:none}
  .receipt-head .rh-count{justify-self:end;white-space:nowrap;font-weight:500}
  .receipt + .receipt{margin-top:8px}
  .receipt .fico{width:38px;height:38px;align-self:center;grid-column:1;grid-row:1}
  .receipt .fbody{grid-column:2;grid-row:1;min-width:0}
  .receipt .fname{font-size:17px;word-break:break-word}
  .receipt .fcomment{margin-top:4px;font-size:15px;padding:4px 9px;border-left-width:2px}
  .receipt .fright{display:contents}
  .receipt .fright > div:first-child{grid-column:3;grid-row:1;justify-self:start;white-space:nowrap}
  /* 용량과 날짜는 한 덩어리로 묶여 있다. 여기서만 풀어 각자 칸을 차지하게 한다. */
  .receipt .fright > .fmeta{display:contents}
  .receipt .fmeta .sep{display:none}
  .receipt .fmeta .fsize{grid-column:4;grid-row:1;justify-self:start;white-space:nowrap}
  .receipt .fmeta .fdate{grid-column:5;grid-row:1;justify-self:start;white-space:nowrap}
  .receipt .fright > button{grid-column:6;grid-row:1;justify-self:end}

  /* 진행 오버레이도 넓은 화면에서는 목록을 더 보여준다 */
  .up-card{max-width:520px}
  .up-list{max-height:300px}
}

/* 와이드 모니터 */
@media (min-width:1600px){
  .main{padding:38px 56px}
  .receipt,.receipt-head{grid-template-columns:38px minmax(240px,2.6fr) minmax(112px,1fr) minmax(84px,.85fr) minmax(140px,1.15fr) 96px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ 여러 페이지로 나눈 뒤 붙인 것 ============ */
/* 세션을 되찾기 전에는 화면을 감춘다. 로그인 안 한 사람에게 메뉴가 잠깐
   비쳤다 사라지는 걸 막는다. */
body.boot .app-shell{visibility:hidden}
.app-page{display:block}


/* ============ 로그인 거래처 ============ */

/* 사용 중만 보기. 검색칸 옆에 놓여도 튀지 않게 테두리 없이 둔다. */
/* 목록 검색칸. 안내 문구가 끝까지 보여야 무엇으로 찾을 수 있는지 안다 —
   250px 에서는 '담당자' 가 잘렸다. 좁은 화면에서는 줄어든다. */
.list-search{width:370px;max-width:100%}
.panel-head h3 .chip{margin-left:6px;vertical-align:2px}
.only-on{display:inline-flex;align-items:center;gap:7px;font-size:16px;color:var(--muted);
  cursor:pointer;user-select:none;white-space:nowrap}
.only-on input{width:16px!important;height:16px;flex:0 0 16px;margin:0;accent-color:var(--brand);cursor:pointer}
.only-on:has(input:checked){color:var(--brand);font-weight:600}

/* 아직 웹하드 권한을 준 적 없는 곳 */
.chip-none{background:var(--paper);color:var(--muted);border:1px dashed var(--line)}

/* 권한이 없어 버튼 대신 놓이는 글자 */
.perm-none{font-size:15px;color:var(--muted)}


/* ============ 비밀번호 보내기 ============ */

.tel-picks{display:flex;gap:8px;flex-wrap:wrap}
.tel-pick{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;
  text-align:left;transition:border-color .14s,background .14s}
.tel-pick b{font-size:14px;font-weight:600;color:var(--muted)}
.tel-pick .num{font-size:17px;color:var(--ink);letter-spacing:.2px}
.tel-pick .none{font-size:15px;color:var(--muted)}
.tel-pick:hover:not(:disabled){border-color:var(--brand)}

/* 고른 것은 테두리와 바탕으로 표시하고, 앞에 체크를 그린다 —
   여러 개를 고를 수 있는 자리라 하나만 켜지는 것처럼 보이면 안 된다. */
.tel-pick.on{border-color:var(--brand);background:var(--brand-soft)}
.tel-pick.on b{color:var(--brand)}
.tel-pick.on b::before{content:'\2713  ';font-weight:700}
.tel-pick.on .num{color:var(--brand-dark);font-weight:600}

/* ERP 에 번호가 없는 칸. 감추지 않고 없다고 적어 둔다. */
.tel-pick.empty{background:var(--paper);border-style:dashed;cursor:not-allowed}

/* 보낼 내용 그대로. 문자로 도착할 모양을 미리 본다. */
.sms-preview{margin:0;padding:12px 14px;border-radius:9px;background:var(--paper);
  border:1px solid var(--line);font-family:'IBM Plex Sans KR',sans-serif;font-size:15px;
  line-height:1.7;white-space:pre-wrap;word-break:break-all;color:var(--ink)}

/* 보낼 내용을 고쳐 쓰는 칸. 미리보기와 같은 글꼴 · 줄 간격이라 문자로 도착할
   모양이 그대로 보인다. 세로로만 늘릴 수 있다. */
.field textarea.sms-edit{font-size:15px;line-height:1.7;background:var(--paper);resize:vertical;min-height:190px}
.field textarea.sms-edit:focus{background:#fff}
/* 이름표 줄 오른쪽 끝에 '기본 문구로'. */
.lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.field .lbl-row label{margin-bottom:0}
.lbl-row .link-btn{font-size:15px}
/* 칸 바로 아래 오른쪽 — 몇 바이트 썼는지. 넘으면 붉게. */
.sms-bytes{text-align:right;margin-top:4px;font-size:14px;color:var(--muted)}
.sms-bytes.over{color:var(--red);font-weight:600}
.field .sms-bytes + .hint{margin-top:2px}

/* 90byte 를 넘게 치려 하면 글자 수가 한 번 흔들린다. 왜 안 쳐지는지 눈이 그리로 간다. */
@keyframes byteShake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.sms-bytes.shake{animation:byteShake .18s linear 2;color:var(--brand)}

/* ============ 정보 상자의 묶음 제목 ============ */

#info-rows .grp{margin-top:14px;padding-bottom:6px;border-bottom:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--brand);letter-spacing:.3px}
#info-rows .grp:first-child{margin-top:0}

/* ============ 파일 올리기 ============ */

.dz-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.dz-foot .hint{margin:0}

/* 드롭존 안내. 예전에는 '한 번에 여러 개를 올릴 수 있습니다 · 파일당 최대 1GB'
   를 작은 글씨 한 줄로 이어 붙였는데, 두 이야기가 한 문장처럼 뭉개졌다.
   따로 떼어 작은 알약 두 개로 둔다.
   .dropzone b 가 블록으로 잡혀 있어서 알약 안의 1GB 가 줄을 바꾸지 않게 되돌린다. */
.dz-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.dz-fact{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 10px;border-radius:99px;
  background:#fff;border:1px solid var(--line);font-size:14.5px;color:var(--muted);white-space:nowrap}
.dz-fact svg{color:var(--brand);flex-shrink:0}
.dropzone .dz-fact b{display:inline;font-size:inherit;margin:0 0 0 2px;color:var(--ink)}

/* 안내 줄. 한 줄에 늘어놓고 가운뎃점으로 끊는다. */
.dz-note{flex-wrap:wrap}
.dz-note .dot{color:var(--line)}


/* ============ 고객별 파일 관리 — 오른쪽 묶음 ============ */

/* 올린 일시 · 부서분류는 오른쪽으로 붙인다. 왼쪽은 "무엇을 누가",
   오른쪽은 "언제 어디로" 로 나눠 두면 눈이 덜 헤맨다.
   칸 번호(nth-child)로 잡지 않고 이름을 단다 — 선택 칸은 삭제 권한이
   있을 때만 그려져서, 번호로 잡으면 권한마다 다른 칸이 붙는다. */
#page-admin-files .tbl .c-date,
#page-admin-files .tbl .c-cat{text-align:right}


/* ============ 불러오는 중 ============ */

/* 위쪽 가는 띠. 목록을 새로 고치는 정도의 짧은 일에 쓴다.
   화면을 막지 않으므로 그동안에도 다른 곳을 볼 수 있다. */
.busy-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;
  background:linear-gradient(90deg,var(--brand-soft),var(--brand),var(--brand-soft));
  background-size:40% 100%;background-repeat:no-repeat;
  animation:busy-slide 1.1s ease-in-out infinite}
@keyframes busy-slide{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}

/* 화면을 덮는 상자. 누른 결과를 기다리는 일에 쓴다 —
   기다리는 동안 같은 단추를 또 누르면 두 번 처리된다. */
.busy-veil{position:fixed;inset:0;z-index:75;background:rgba(38,35,43,.28);
  display:flex;align-items:center;justify-content:center}
.busy-box{display:flex;align-items:center;gap:12px;padding:18px 24px;border-radius:12px;
  background:#fff;box-shadow:0 8px 30px rgba(38,35,43,.22);font-size:17px;font-weight:500}
.spin{width:19px;height:19px;flex:0 0 19px;border-radius:50%;
  border:2.5px solid var(--brand-soft);border-top-color:var(--brand);
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 움직임을 불편해하는 사람에게는 돌리지 않는다. */
@media (prefers-reduced-motion:reduce){
  .busy-bar,.spin{animation:none}
  .busy-bar{background:var(--brand)}
}


/* ============ 접속 정보 — 받는 번호 ============ */

/* 고른 번호들. 위 단추로 넣거나 아래에서 직접 쳐서 넣는다. */
.tel-add{display:flex;gap:8px;margin-top:9px}
.tel-add input{flex:1}
.tel-add .btn{flex-shrink:0}

/* 보낼 곳. 고르는 자리(위 단추·입력칸)와 한눈에 갈려야 한다 —
   예전에는 고른 번호가 알약 모양으로 입력칸 바로 밑에 붙어 있어서,
   무엇이 후보고 무엇이 실제로 보낼 번호인지 헷갈렸다.
   테두리 상자에 한 줄씩 번호를 매겨 늘어놓는다. */
.send-count{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:99px;
  background:var(--brand);color:#fff;font-size:14px;font-weight:600;vertical-align:1px}
.send-count.zero{background:var(--line);color:var(--muted)}
.send-list{border:1.5px solid var(--brand);border-radius:10px;background:var(--brand-soft);
  padding:8px;display:flex;flex-direction:column;gap:6px}
.send-list.empty{border-color:var(--line);border-style:dashed;background:var(--paper)}
.send-row{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 12px;
  background:#fff;border:1px solid var(--line);border-radius:8px}
.send-row .no{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--brand);
  color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.send-row .num{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:.2px;white-space:nowrap}
.send-row .src{font-size:14px;color:var(--muted)}
.send-row button{margin-left:auto;width:28px;height:28px;border-radius:7px;color:var(--muted);
  font-size:19px;line-height:1;flex-shrink:0}
.send-row button:hover{background:var(--red-soft);color:var(--red)}
.send-empty{padding:14px 10px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}

.hint-inline{font-weight:400;color:var(--muted);font-size:14px;margin-left:6px}


/* ============ 사이드바 아래 ============ */

/* 이름과 로그아웃 아이콘의 가운데를 맞춘다. 아이콘 단추가 글자 상자를
   그대로 쓰면 svg 아래 여백 때문에 한 픽셀씩 내려앉는다. */
.side-user .btn-ghost{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;flex-shrink:0}
.side-user .who b{line-height:1.35}

/* 확인 창은 다른 모달 위에 겹쳐 뜬다. */
#modal-ask{z-index:70}

/* 확인 창. 본문이 여러 줄이라 400px 로는 좁아 낱말이 잘렸다. */
.modal.ask{max-width:480px}

/* 한글은 낱말 안에서도 아무 데서나 끊긴다 — 브라우저 기본값이 그렇다.
   keep-all 을 주면 띄어쓰기에서만 끊겨 '주인이 모/두' 같은 일이 없어진다. */
#ask-body{word-break:keep-all;overflow-wrap:break-word}

/* 활동 이력의 사용자 칸. '(산청)세진광고' 처럼 붙은 이름이 잘리지 않게
   한 줄로 두고, 그만큼 자리를 내준다. */
/* '(산청)세진광고' 처럼 띄어쓰기 없는 이름은 아무 데서나 끊긴다. 한 줄로
   두되, 아주 긴 이름이 표를 통째로 밀어내지 않도록 잘라서 보여주고
   전체는 마우스를 올리면 뜨게 한다. */
.log-who{min-width:120px;max-width:190px}
.log-who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ============ 거래처 연동 ============ */

/* 고른 거래처. 이름만으로는 같은 상호가 여럿일 때 못 가른다 —
   대표자와 사업자번호를 같이 놓아 누른 것이 맞는지 확인하고 넘어가게 한다. */
.picked-cust{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border:1px solid var(--brand);border-radius:10px;
  background:var(--brand-soft)}
.picked-cust .pc-body{min-width:0}
.picked-cust .pc-nm{display:block;font-size:18px;color:var(--brand-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picked-cust .pc-sub{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;
  font-size:15px;color:var(--muted)}
.picked-cust .pc-sub b{font-weight:600;color:var(--ink)}
.picked-cust .btn{flex-shrink:0;background:#fff}

/* 검색 결과의 대표자명. 상호 옆에 옅게 붙인다. */
.pk-ceo{font-weight:400;color:var(--muted);font-size:15px;margin-left:6px}

/* 게스트 표시. 색만으로는 흑백 인쇄나 색약에서 안 보인다. */
.g-mark{margin-left:5px;font-weight:700;font-size:13px;opacity:.75}


/* 표 안에서 눌러 정보를 여는 이름. 글자만 두면 누를 수 있는 줄 모른다. */
.name-link{font-weight:600;font-size:inherit;color:var(--ink);padding:0;
  border-bottom:1px dashed var(--line);border-radius:0;text-align:left;
  transition:color .14s,border-color .14s}
.name-link:hover{color:var(--brand);border-bottom-color:var(--brand)}
.name-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}


/* 로그인 게스트 계정 표의 비고. 길면 칸 안에서 줄을 바꾼다 — 표 전체를 밀지 않게 폭을 잡는다. */
.g-note{min-width:120px;max-width:220px;font-size:15px;word-break:keep-all;overflow-wrap:break-word}
.g-note-none{color:var(--muted)}
/* 칸이 많은 표(로그인 게스트 계정). 좌우 여백을 조금 줄여 노트북 화면에서도 관리 칸까지 한 번에 보이게 한다. */
.tbl-tight th,.tbl-tight td{padding-left:11px;padding-right:11px}
/* 비고 칸을 눌러 고친다. 글자만 두면 누를 수 있는 줄 모르니 점선 밑줄을 긋는다. */
.g-note-edit{text-align:left;font-size:inherit;color:var(--ink);padding:0;border-bottom:1px dashed var(--line);border-radius:0;word-break:keep-all;overflow-wrap:break-word}
.g-note-edit:hover{color:var(--brand);border-bottom-color:var(--brand)}
.g-note-edit:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ==================== 고객 폴더 (2026-10-06) ==================== */
/* 부서분류 네 칸. 그 부서로 올라온 파일이 있으면 색, 없으면 흐리게. */
.dept-dots{display:inline-flex;gap:5px;flex-wrap:wrap}
.dept-dot{padding:3px 10px;border-radius:99px;font-size:14px;font-weight:600;white-space:nowrap;
  background:#F3F2F2;color:#C9C5C8}
.dept-dot.on{background:var(--teal);color:#fff}
.dept-dot .n{margin-left:4px;font-weight:500;opacity:.85;font-size:13px}
.folder-back{margin:0 0 6px -8px;color:var(--muted)}
.folder-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.folder-title .chip{font-size:16px;padding:4px 12px}

/* ==================== 업체명 (10/6 — 칩 대신 글자) ==================== */
.cust-name{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 0;
  background:none;border:0;font:inherit;color:var(--ink);text-align:left}
button.cust-name{cursor:pointer}
.cust-name .cn-name{font-weight:600;white-space:nowrap}   /* 표가 좁아지면 한 글자씩 꺾였다 — 칩일 때처럼 한 줄로 */
button.cust-name:hover .cn-name{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
button.cust-name:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.cn-guest{flex-shrink:0;padding:0 5px;border:1px solid #E6CF9C;border-radius:4px;
  color:var(--amber);font-size:12px;font-weight:600;line-height:1.5}

/* ==================== 전체 보관 용량 (10/8) ====================
   막대 끝이 200GB(한도). 화면에는 이 한도만 보인다.
     여유   160GB 미만        녹색
     주의   160 ~ 200GB       주황
     초과   200GB 넘음        빨강 · 카드 전체가 붉고 꼬리표가 깜빡인다 · '빨리 정리'
     중단   서버가 막음       빨강 · '업로드 중단' */
.stat.stat-store{flex-wrap:nowrap}
.stat-store .stat-txt{flex:1}
.stat-store .k{display:flex;align-items:center;gap:8px;justify-content:space-between}
.store-badge{font-size:13px;font-weight:700;padding:1px 8px;border-radius:99px;white-space:nowrap;
  background:var(--brand-soft);color:var(--brand-dark)}
/* 눈금 글자(0 · 200GB)는 뺐다 — 숫자 옆 '/ 200GB' 와 겹쳐서 높이만 늘렸다(10/8). */
.store-bar{position:relative;height:8px;border-radius:99px;background:#ECEFED;margin:10px 0 2px;overflow:visible}
.store-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--brand);min-width:4px;
  transition:width .4s}
.stat-store.is-warn .store-bar .fill{background:var(--amber)}
.stat-store.is-warn .store-badge{background:var(--amber-soft);color:var(--amber)}
.stat-store.is-over,.stat-store.is-full{border-color:#E7A39B;background:linear-gradient(180deg,#FFF6F5,#FDECEA);
  box-shadow:0 0 0 3px rgba(192,57,43,.12),var(--shadow)}
.stat-store.is-over .ico,.stat-store.is-full .ico{background:var(--red);color:#fff}
.stat-store.is-over .v,.stat-store.is-full .v{color:var(--red)}
.stat-store.is-over .store-bar .fill,.stat-store.is-full .store-bar .fill{background:var(--red)}
.stat-store.is-over .store-badge,.stat-store.is-full .store-badge{background:var(--red);color:#fff;
  animation:storeAlarm 1.1s ease-in-out infinite}
.stat-store.is-over .s,.stat-store.is-full .s{color:var(--red);font-weight:600}
@keyframes storeAlarm{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.store-badge{animation:none!important}}

/* 고객별 파일보기 — 업체명 앞 폴더 그림 */
.cust-name .cn-folder{flex-shrink:0;color:#C9A45C}
button.cust-name:hover .cn-folder{color:var(--brand)}