/* DAK_BIZ — 시안 B (각진 라운드 최소). 자체호스팅 폰트. 라이트/다크. */
@font-face{font-family:'Pretendard Variable';src:url('/fonts/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-display:swap;font-style:normal}
@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk.woff2') format('woff2');font-weight:300 700;font-display:swap;font-style:normal}

:root{
  --navy:#17325a; --navy-600:#274a80; --navy-050:#eef2f8;
  --gold:#c49b3a; --gold-050:#f7f0dd;
  --red:#d63b28; --red-050:#fbe7e3;
  --green:#1f8f63; --green-050:#e5f3ec;
  --indigo:#5b57b4; --indigo-050:#ecebf7;
  --slate:#5b6576; --slate-2:#8a94a6;
  --bg:#f6f7f9; --panel:#ffffff; --ink:#16202e; --line:#e7eaf0; --soft:#f1f3f7;
  /* ★각진: 최소 radius 스케일 */
  --r-sm:3px; --r:6px; --r-lg:8px;
  /* 모션 언어(짧고 스냅) */
  --dur-fast:150ms; --dur-mid:200ms; --ease:cubic-bezier(.4,0,.2,1);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 6px 22px rgba(16,24,40,.08);
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --mono:'Space Grotesk',var(--font);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#8fb0e6; --navy-600:#6f97dd; --navy-050:#1b2942;
  --gold:#e0bd63; --gold-050:#39331f; --red:#ff6f5a; --red-050:#3c231f;
  --green:#49c08d; --green-050:#163a2c; --indigo:#9a95ea; --indigo-050:#262450;
  --slate:#9aa5b7; --slate-2:#6b7686;
  --bg:#0d1220; --panel:#151c2b; --ink:#e8ecf3; --line:#242e3f; --soft:#1a2233;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 10px 30px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --navy:#8fb0e6; --navy-600:#6f97dd; --navy-050:#1b2942;
  --gold:#e0bd63; --gold-050:#39331f; --red:#ff6f5a; --red-050:#3c231f;
  --green:#49c08d; --green-050:#163a2c; --indigo:#9a95ea; --indigo-050:#262450;
  --slate:#9aa5b7; --slate-2:#6b7686;
  --bg:#0d1220; --panel:#151c2b; --ink:#e8ecf3; --line:#242e3f; --soft:#1a2233;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45}
.boot{display:grid;place-items:center;height:100vh;color:var(--slate)}
.mono{font-family:var(--mono);font-feature-settings:"tnum"}
button{font-family:inherit;cursor:pointer}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.spin{display:inline-block;width:15px;height:15px;border:2px solid color-mix(in srgb,var(--slate) 40%,transparent);border-top-color:var(--navy);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-size:13px;box-shadow:var(--shadow);z-index:80;opacity:0;transition:.22s}
.toast.show{opacity:1}

/* ================= LOGIN (split, full-screen) ================= */
.login{display:grid;grid-template-columns:1.05fr .95fr;height:100vh}
.brandside{position:relative;color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:#101f38 var(--login-bg,url('/img/login-bg-rollers.jpg')) center/cover no-repeat}
.brandside::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(11,20,38,.55) 0%,rgba(11,20,38,.20) 42%,rgba(11,20,38,.72) 100%)}
.brandside>*{position:relative;z-index:1}
.brandside .logo{display:flex;align-items:center;gap:13px}
.brandside .logo img{height:38px;width:auto;max-width:260px;object-fit:contain}
.brandside .headline{position:relative}
.brandside .headline h2{font-size:clamp(24px,2.4vw,32px);line-height:1.25;margin:0;font-weight:700;letter-spacing:-.02em}
.brandside .headline p{margin:16px 0 0;opacity:.82;font-size:14px;line-height:1.65;max-width:360px}
.brandside .stat{position:relative;display:flex;gap:30px}
.brandside .stat .n{font-family:var(--mono);font-size:24px;font-weight:700}
.brandside .stat .l{font-size:12px;opacity:.72;margin-top:3px}
.formside{display:flex;flex-direction:column;justify-content:center;padding:48px min(9vw,72px);background:var(--panel)}
.form-card{width:100%}   /* 데스크톱: 투명 컨테이너 / 모바일: 반투명 카드(아래 미디어쿼리) */
.formside h3{margin:0 0 4px;font-size:22px;font-weight:700}
.formside .sub{color:var(--slate);font-size:13px;margin-bottom:28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:7px}
.inp{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--soft);border-radius:var(--r);padding:0 13px;height:48px}
.inp:focus-within{border-color:var(--navy);background:var(--panel)}
.inp input{border:0;background:transparent;outline:0;font-family:var(--font);font-size:14px;color:var(--ink);width:100%}
.inp input.mono{font-family:var(--mono);letter-spacing:.02em}
.inp svg{color:var(--slate-2)}
.rowb{display:flex;align-items:center;justify-content:space-between;margin:8px 0 22px}
.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--slate);user-select:none}
.chk input{accent-color:var(--navy)}
.btn-primary{width:100%;height:48px;border:0;border-radius:var(--r);background:var(--navy);color:#fff;font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.01em}
:root[data-theme="dark"] .btn-primary{color:#0d1220}
.formside .foot{margin-top:22px;font-size:11.5px;color:var(--slate-2);text-align:center}
.msg{margin-top:14px;font-size:13px;min-height:18px}
.msg.err{color:var(--red)} .msg.ok{color:var(--green)}

/* ================= APP SHELL (full-screen) ================= */
.app{display:flex;height:100vh;background:var(--bg);overflow-x:hidden}   /* ★페이지(셸) 가로 스크롤 금지 — 넓은 그리드/테이블은 자기 .gscroll/.tabpane 안에서만 가로 스크롤 */
/* 로고 라이트/다크 스왑(로그인 등에서 사용) */
.logo-w{display:none}
:root[data-theme="dark"] .logo-c{display:none} :root[data-theme="dark"] .logo-w{display:inline-block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-c{display:none} :root:not([data-theme="light"]) .logo-w{display:inline-block}}

/* ── 아이콘 레일(64px) ── */
/* 상단 헤더 밴드 공통 높이 — 레일 로고·패널헤더·탭줄의 하단 보더를 같은 Y로 정렬 */
:root{--hdr:48px}
.iconrail{width:64px;flex:0 0 64px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;z-index:3}
.ir-brand{height:var(--hdr);box-sizing:border-box;width:100%;margin:0;display:grid;place-items:center;overflow:visible;border-bottom:1px solid var(--line)}
/* 로고는 헤더 밴드(--hdr) 안에 세로중앙·온전히(잘림 방지). 높이 = 밴드 - 상하 여백 */
.ir-brand img{width:auto;height:auto;max-width:50px;max-height:calc(var(--hdr) - 18px);object-fit:contain;display:block}
/* 접기/펼치기 토글(로고 밴드 '아래', 모듈 아이콘 위) */
.ir-toggle{width:34px;height:30px;margin:8px 0 6px;border:1px solid var(--line);background:var(--panel);color:var(--slate-2);border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.ir-toggle svg{width:17px;height:17px}
.ir-toggle:hover{background:var(--soft);color:var(--navy);box-shadow:var(--shadow-sm)}
.ir-toggle:active{transform:scale(.94)}
.ir-mods{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px;width:100%}
.ir-mod{width:44px;height:44px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--slate-2);display:grid;place-items:center;cursor:pointer;position:relative}
.ir-mod svg{width:20px;height:20px}
.ir-mod:hover{background:var(--soft);color:var(--ink)}
.ir-mod.on{background:var(--navy-050);color:var(--navy)}
.ir-mod.on::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:var(--r-sm);background:var(--gold)}
.ir-foot{padding:10px 0 14px}
.ir-user{width:38px;height:38px;border-radius:var(--r);border:none;background:var(--gold-050);color:var(--gold);cursor:pointer;display:grid;place-items:center}
.ir-user .av{font-weight:700;font-size:13px}
.ir-user:hover{filter:brightness(.97)}
/* 공통 아바타: 이니셜 위에 사진(있으면) 오버레이. 크기/배경은 컨텍스트 클래스에서. */
.avatar{position:relative;overflow:hidden}
.avatar .av-ini{line-height:1}
.avatar .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 조직도 리더 칩용 소형 아바타 */
.org-chip-av{width:22px;height:22px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--gold-050);color:var(--gold);display:grid;place-items:center;font-size:10px;font-weight:700;margin-right:2px}

/* ── 넓은 메뉴 패널(232px, 접힘 가능) ── */
.menupanel{width:232px;flex:0 0 232px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.mp-head{height:var(--hdr);box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line)}
.mp-title{flex:1;font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.mp-collapse{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--slate-2);display:grid;place-items:center;cursor:pointer}
.mp-collapse:hover{background:var(--soft);color:var(--ink)}
.mp-nav{padding:10px;flex:1;overflow:auto}
.mp-group{margin-bottom:4px}
.mp-group.nohead{margin-bottom:2px}
.mp-items{overflow:hidden;transition:max-height .22s cubic-bezier(.4,0,.2,1);max-height:600px}
.mp-group:not(.open) .mp-items{max-height:0}
.mp-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);color:var(--slate);font-size:13.5px;font-weight:600;text-decoration:none;margin-bottom:2px;position:relative;cursor:pointer;white-space:nowrap}
.mp-item svg{width:18px;height:18px;flex:0 0 auto}
.mp-item:hover{background:var(--soft);color:var(--ink)}
.mp-item.on{background:var(--navy-050);color:var(--navy)}
.mp-item.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:var(--r-sm);background:var(--gold)}
/* ── 파일트리 스타일 그룹 ── */
.tree-node{margin-bottom:2px}
.tree-folder{width:100%;display:flex;align-items:center;gap:7px;padding:8px 10px;background:transparent;border:none;cursor:pointer;color:var(--slate);border-radius:var(--r)}
.tree-folder:hover{background:var(--soft);color:var(--ink)}
.tree-folder .glbl{flex:1;text-align:left;font-size:13px;font-weight:700;white-space:nowrap;letter-spacing:-.01em}
.tree-caret{display:inline-flex;color:var(--slate-2)}
.tree-caret svg{width:14px;height:14px;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.tree-node.open .tree-caret svg{transform:rotate(90deg)}
.tree-fi{display:inline-flex;color:var(--gold)}.tree-fi svg{width:17px;height:17px}
.tree-fi-open{display:none}
.tree-node.open .tree-fi-closed{display:none}.tree-node.open .tree-fi-open{display:inline-flex}
/* 하위 리프: 들여쓰기 + 트리 연결선(세로 스파인 + ㄴ 가지) */
.tree-children{position:relative;margin-left:19px;padding-left:13px}
.tree-node.open .tree-children::before{content:"";position:absolute;left:0;top:2px;bottom:10px;width:1px;background:var(--line)}
.tree-leaf{position:relative}
.tree-leaf .tree-line{position:absolute;left:-13px;top:50%;width:10px;height:1px;background:var(--line)}
.tree-leaf.on .tree-line{background:var(--gold)}
/* placeholder 모듈(전산 등) */
.mp-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 20px;color:var(--slate-2);gap:12px}
.mp-soon svg{width:34px;height:34px;color:var(--slate-2)}
.mp-soon-t{font-size:15px;font-weight:700;color:var(--slate)}
.mp-soon-d{font-size:12px;line-height:1.6}
@media (prefers-reduced-motion:reduce){ .tree-caret svg{transition:none!important} }
.mp-foot{border-top:1px solid var(--line);padding:12px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.mp-foot .av{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r);background:var(--gold-050);color:var(--gold);display:grid;place-items:center;font-weight:700;font-size:13px}
.mp-foot .nm{font-size:13px;font-weight:700}.mp-foot .rl{font-size:11px;color:var(--slate-2)}

.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.railexp{display:none}
.top{height:60px;flex:0 0 60px;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--panel)}
.top .crumb{font-size:15px;font-weight:700}.top .sp{flex:1}
.iconbtn{width:38px;height:38px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--slate);display:grid;place-items:center}
.iconbtn:hover{color:var(--ink);background:var(--soft)}
.idpill{font-family:var(--mono);font-size:12.5px;font-weight:600;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:6px 11px;color:var(--slate)}
/* PC 상단 알림 벨 + 뱃지 + 드롭다운 */
.noti-wrap{position:relative;display:inline-flex}
.noti-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--red);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.noti-badge[hidden]{display:none}   /* ★[hidden] 속성이 display:flex에 덮이던 버그 — 카운트 0이면 뱃지 숨김 */
.noti-pop{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:440px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);z-index:60}
.noti-pop-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px;position:sticky;top:0;background:var(--panel)}
.noti-readall{background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 9px;font-size:11.5px;font-weight:600;color:var(--slate);cursor:pointer}
.noti-readall:hover{background:var(--soft);color:var(--ink)}
.noti-pop-list{padding:6px}
.noti-item{display:block;padding:11px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.noti-item:hover{background:var(--soft)}
.noti-item.unread{border-left-color:var(--gold);background:color-mix(in srgb,var(--gold-050) 45%,transparent)}
.noti-item .ni-t{font-size:13px;font-weight:600}.noti-item.unread .ni-t{font-weight:700}
.noti-item .ni-b{font-size:12px;color:var(--slate);margin-top:2px;line-height:1.4}
.noti-item .ni-tm{font-size:10.5px;color:var(--slate-2);margin-top:4px;font-family:var(--mono)}
.noti-empty{padding:30px;text-align:center;color:var(--slate-2);font-size:13px}
.content{flex:1;overflow:auto;padding:22px}
.tabbar{display:none}

/* ===== 모바일 셸(≤860px): 하단 4탭 고정 + 본문 스크롤. 홈/전체메뉴/알림/MY ===== */
.mapp{display:none}
@media(max-width:860px){
  .mapp{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg)}
  .mb-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px calc(74px + env(safe-area-inset-bottom))}
  .mb-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
    background:var(--panel);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mb-tab{flex:1;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;color:var(--slate-2);font-size:10.5px;font-weight:600}
  .mb-tab svg{width:22px;height:22px}
  .mb-tab.on{color:var(--gold)}
  .mb-tab:active{transform:scale(.95)}
  .mb-stub{padding:48px 18px;text-align:center;color:var(--slate-2)}
  .mb-stub-t{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .mb-stub-d{font-size:13px;margin-top:9px;line-height:1.6}
}
/* 모바일 홈 컴포넌트(.mb-* 요소는 모바일 셸에서만 렌더 → PC 무영향, 전역 정의로 둠) */
.mb-greet{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px 14px}
.mb-greet-l{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.mb-greet .hi{font-size:19px;font-weight:700;letter-spacing:-.01em}
.mb-badge{font-size:11px;font-weight:700;color:var(--navy);background:var(--navy-050);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 8px}
.mb-icobtn{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--slate);display:grid;place-items:center;cursor:pointer}
.mb-icobtn:active{transform:scale(.95)}
.mb-today{margin-bottom:2px}
.mb-dt{font-size:11px;font-weight:700;opacity:.82}
.mb-sec-h{font-size:12px;font-weight:700;color:var(--slate);margin:18px 2px 10px}
.mb-qagrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb-qa{display:flex;align-items:center;gap:11px;padding:15px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px}
.mb-qa:active{background:var(--soft)}
.mb-qa-i{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--navy-050);color:var(--navy);display:grid;place-items:center}
.mb-qa-i svg{width:19px;height:19px}
.mb-qa-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-empty{grid-column:1/-1;text-align:center;color:var(--slate-2);padding:20px;font-size:13px}
.mb-load{display:grid;place-items:center;padding:26px}
/* 모바일 전체메뉴 도메인 아코디언 */
.mb-acc{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:var(--panel)}
.mb-acc-h{width:100%;display:flex;align-items:center;gap:11px;padding:15px 14px;background:none;border:0;cursor:pointer;color:var(--ink)}
.mb-acc-ic{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--navy-050);color:var(--navy);display:grid;place-items:center}
.mb-acc-ic svg{width:19px;height:19px}
.mb-acc-t{flex:1;text-align:left;font-size:15px;font-weight:700;letter-spacing:-.01em}
.mb-acc-car{color:var(--slate-2);display:inline-flex}
.mb-acc-car svg{width:18px;height:18px;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.mb-acc.open .mb-acc-car svg{transform:rotate(180deg)}
.mb-acc-body{max-height:0;overflow:hidden;transition:max-height .24s cubic-bezier(.4,0,.2,1)}
.mb-acc.open .mb-acc-body{max-height:660px}
.mb-acc-inner{padding:2px 10px 10px;border-top:1px solid var(--line)}
.mb-acc-grp{font-size:11px;font-weight:700;color:var(--slate-2);padding:9px 6px 4px;letter-spacing:.02em}
.mb-mi{display:flex;align-items:center;gap:11px;padding:12px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.mb-mi:active{background:var(--soft)}
.mb-mi-i{width:28px;height:28px;flex:0 0 auto;color:var(--navy);display:grid;place-items:center}
.mb-mi-i svg{width:18px;height:18px}
.mb-mi-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-mi-ar{color:var(--slate-2);display:inline-flex}.mb-mi-ar svg{width:16px;height:16px}
.mb-soon-row{padding:14px 12px;color:var(--slate-2);font-size:13px;text-align:center}
@media(prefers-reduced-motion:reduce){ .mb-acc-body,.mb-acc-car svg{transition:none!important} }

/* 모바일 MY: 프로필 + 목록 + 로그아웃 */
.mb-my{display:flex;flex-direction:column;gap:16px}
.mb-prof{display:flex;align-items:center;gap:14px;padding:18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.mb-prof-av{width:52px;height:52px;flex:0 0 auto;border-radius:var(--r);background:var(--gold-050);color:var(--gold);display:grid;place-items:center;font-size:20px;font-weight:700}
.mb-prof-info{min-width:0}
.mb-prof-nm{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mb-prof-sub{font-size:12.5px;color:var(--slate);margin-top:4px}
.mb-my-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mb-my-row{width:100%;display:flex;align-items:center;gap:12px;padding:15px 14px;background:none;border:0;border-top:1px solid var(--line);cursor:pointer;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.mb-my-row:first-child{border-top:0}
.mb-my-row:active{background:var(--soft)}
.mb-my-i{width:30px;height:30px;flex:0 0 auto;color:var(--navy);display:grid;place-items:center}
.mb-my-i svg{width:19px;height:19px}
.mb-my-l{flex:1;text-align:left}
.mb-my-val{color:var(--slate);font-weight:600;font-size:13px}
.mb-my-ar{color:var(--slate-2);display:inline-flex}.mb-my-ar svg{width:16px;height:16px}
/* 다크모드 토글 스위치(현재상태 반영, on=골드) */
.mb-switch{width:42px;height:24px;flex:0 0 auto;border-radius:999px;background:var(--line);position:relative;transition:background .18s}
.mb-switch.on{background:var(--gold)}
.mb-switch-k{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .18s}
.mb-switch.on .mb-switch-k{transform:translateX(18px)}
.mb-logout{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--red);font-weight:700;font-size:14px;cursor:pointer}
.mb-logout:active{background:var(--soft)}
.mb-logout svg{width:18px;height:18px}
/* 모바일 알림 탭 뱃지 + 목록 */
.mb-tab{position:relative}
.mb-tab-badge{position:absolute;top:1px;left:calc(50% + 3px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.mb-noti-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 12px}
.mb-readall{background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 11px;font-size:12px;font-weight:600;color:var(--slate);cursor:pointer}
.mb-readall:active{background:var(--soft)}
.mb-noti{display:flex;align-items:flex-start;gap:10px;padding:14px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;text-decoration:none;color:var(--ink)}
.mb-noti:active{background:var(--soft)}
.mb-noti-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:transparent;margin-top:5px}
.mb-noti.unread{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.mb-noti.unread .mb-noti-dot{background:var(--gold)}
.mb-noti.unread .mb-noti-t{font-weight:700}
.mb-noti-c{flex:1;min-width:0}
.mb-noti-t{font-size:14px;font-weight:600}
.mb-noti-b{font-size:12.5px;color:var(--slate);margin-top:3px;line-height:1.45}
.mb-noti-tm{font-size:11px;color:var(--slate-2);margin-top:5px;font-family:var(--mono)}
.mb-noti-ar{color:var(--slate-2);flex:0 0 auto;margin-top:3px}.mb-noti-ar svg{width:16px;height:16px}
/* 근무교대(M_SWAP/P_SWAP) — 모바일/PC 공용 */
.sw-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:18px}
.sw-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}.sw-row:last-child{margin-bottom:0}
.sw-l{width:74px;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--slate)}
.sw-in{flex:1;min-width:0;height:38px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);padding:0 12px;font-family:var(--font);font-size:13.5px;color:var(--ink)}
.sw-in:focus{outline:none;border-color:var(--navy)}
.sw-myjo{font-size:12.5px;color:var(--slate);flex:0 0 auto}.sw-myjo b{color:var(--navy)}.sw-warn{color:var(--red)}
.sw-actrow{justify-content:flex-end}
.sw-sec-h{font-size:12px;font-weight:700;color:var(--slate);margin:16px 2px 9px}
.sw-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;margin-bottom:9px}
.sw-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.sw-date{font-size:14px;font-weight:700}
.sw-badge{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--slate)}
.sw-badge.acc{background:var(--gold-050);color:var(--gold)}
.sw-badge.ok{background:var(--green-050);color:var(--green)}
.sw-badge.rej{background:var(--red-050);color:var(--red)}
.sw-badge.cxl{background:var(--soft);color:var(--slate-2)}
.sw-card-b{font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sw-nm{font-weight:700}.sw-arr{color:var(--slate-2)}
.sw-jo{font-size:11.5px;color:var(--slate);background:var(--soft);border-radius:var(--r-sm);padding:1px 8px}
.sw-reason{font-size:12.5px;color:var(--slate);margin-top:6px;font-style:italic}
.sw-acts{display:flex;gap:8px;margin-top:11px}
.sw-b{flex:1;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:13px;font-weight:700;cursor:pointer;background:var(--panel);color:var(--slate)}
.sw-b.ok{background:var(--navy);color:#fff;border-color:var(--navy)}
.sw-b.rej{background:var(--red);color:#fff;border-color:var(--red)}
.sw-b:active{transform:scale(.98)}
.sw-empty{text-align:center;color:var(--slate-2);font-size:13px;padding:22px}
/* 휴가 현황(P_LEAVE/M_LEAVE) — 연차(SAP)+대휴(자체) 모바일/PC 공용 */
.lv-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.lv-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.lv-card.gold{background:var(--gold-050);border-color:color-mix(in srgb,var(--gold) 30%,var(--line))}
.lv-cn{font-size:12px;font-weight:700;color:var(--slate)}
.lv-cv{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--navy);line-height:1;margin:6px 0 5px}
.lv-card.gold .lv-cv{color:var(--gold)}.lv-cv small{font-size:13px;color:var(--slate);font-weight:600;margin-left:3px}
.lv-cs{font-size:12px;color:var(--slate)}
.lv-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;margin-bottom:14px}
.lv-sec-h{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.lv-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm)}
.lv-badge.sap{background:var(--navy);color:#fff}.lv-badge.self{background:var(--gold-050);color:var(--gold)}.lv-badge.mng{background:var(--indigo-050);color:var(--indigo)}
.lv-yr{margin-left:auto;font-size:12px;color:var(--slate-2);font-family:var(--mono)}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.lv-i{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px}
.lv-i .n{font-size:11px;color:var(--slate-2);margin-bottom:3px}.lv-i .v{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink)}
.lv-i.strong{background:var(--navy-050)}.lv-i.strong .v{color:var(--navy)}
.lv-i.ok{background:var(--green-050)}.lv-i.ok .v{color:var(--green)}
.lv-empty{color:var(--slate-2);font-size:13px;text-align:center;padding:16px}
.lv-ledger{display:flex;flex-direction:column;gap:6px}
.lv-led{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--soft);border-radius:var(--r);font-size:12.5px;flex-wrap:wrap}
.lv-led-t{font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--r-sm)}
.lv-led.grant .lv-led-t,.lv-led-t.grant{background:var(--green-050);color:var(--green)}
.lv-led.use .lv-led-t,.lv-led-t.use{background:var(--gold-050);color:var(--gold)}
.lv-led-d{font-family:var(--mono);font-weight:700}
.lv-led-dt{color:var(--slate);font-family:var(--mono);font-size:11.5px}
.lv-led-x{font-size:10.5px;color:var(--red)}.lv-led-r{color:var(--slate);font-size:12px}
.lv-admin .lv-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lv-in{height:36px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);padding:0 10px;font-family:var(--font);font-size:13px;color:var(--ink)}
.lv-in.sm{width:120px}.lv-in:focus{outline:none;border-color:var(--navy)}
.lv-mng-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--slate);margin:8px 0}
.lv-mng-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.lv-mng-nm{font-weight:700;min-width:66px}
.lv-void{margin-left:auto;width:26px;height:26px;border:1px solid var(--line);background:var(--panel);color:var(--red);border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer}
.lv-void:hover{background:var(--red-050)}
@media(max-width:640px){ .lv-cards{grid-template-columns:1fr} .lv-admin .lv-form .lv-in{flex:1 1 45%} }

/* 모바일 잎(세부) 화면 헤더 */
.mb-scr-head{display:flex;align-items:center;gap:10px;padding:2px 0 14px}
.mb-back{width:36px;height:36px;flex:0 0 auto;border:1px solid var(--line);background:var(--panel);color:var(--slate);border-radius:var(--r);display:grid;place-items:center;cursor:pointer}
.mb-back:active{transform:scale(.95)}
.mb-scr-t{font-size:17px;font-weight:700;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* page head */
.phead{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.phead h1{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0}
.phead .desc{font-size:12.5px;color:var(--slate);margin-top:4px}.phead .sp{flex:1}
.select,.btn2{height:38px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 13px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.select svg,.btn2 svg{color:var(--slate-2)}
.btn2.solid{background:var(--navy);color:#fff;border-color:var(--navy)} .btn2.solid svg{color:#fff}
:root[data-theme="dark"] .btn2.solid{color:#0d1220}
.btn2.gold{background:var(--gold);color:#3a2f10;border-color:var(--gold)} .btn2.gold svg{color:#3a2f10}
.btn2:disabled{opacity:.5;cursor:not-allowed}
.native-sel{position:relative}
.native-sel select{appearance:none;height:38px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 34px 0 13px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.native-sel::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid var(--slate-2);border-bottom:2px solid var(--slate-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.native-sel input[type=month]{height:38px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 11px;font-family:var(--mono);font-size:13px;color:var(--ink)}

/* summary tiles */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow-sm)}
.tile .ic{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;background:var(--navy-050);color:var(--navy)}
.tile.g .ic{background:var(--green-050);color:var(--green)}
.tile.a .ic{background:var(--gold-050);color:var(--gold)}
.tile.r .ic{background:var(--red-050);color:var(--red)}
.tile .v{font-family:var(--mono);font-size:23px;font-weight:700;line-height:1}
.tile .k{font-size:11.5px;color:var(--slate);margin-top:4px;font-weight:600}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 14px;margin-bottom:14px;flex-wrap:wrap}
.palette{display:flex;gap:6px}
.pchip{font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--slate);cursor:pointer}
.pchip.sel{color:#fff;border-color:transparent}
.legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--slate);font-weight:600}
.sw{width:13px;height:13px;border-radius:var(--r-sm)}

/* GRID — calm */
.gwrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.gscroll{overflow:auto;max-height:calc(100vh - 246px)}
/* 근무표: 단일 스크롤(페이지 스크롤 없이 그리드 내부만, 뷰포트에 딱 맞게 반응형) */
html:has(.tabpane.roster-pane.on), body:has(.tabpane.roster-pane.on){overflow:hidden}
.tabpane.roster-pane.on{display:flex;flex-direction:column;overflow:hidden}
.roster-pane .phead{flex:0 0 auto;margin-bottom:12px}
.roster-pane #body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.roster-pane #body .toolbar{flex:0 0 auto}
.roster-pane #body .gwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.roster-pane #body .gwrap .gscroll{flex:1 1 auto;min-height:0;max-height:none}
.roster-pane #body .gwrap .note{flex:0 0 auto}
/* 얇은 인라인 요약(대형 KPI 카드 대체) */
.tb-sum{font-size:12px;color:var(--slate);font-weight:600;white-space:nowrap}
.tb-sum b{color:var(--ink);font-family:var(--mono);font-weight:700}
.tb-sum .dot{color:var(--slate-2);margin:0 9px}
.tb-sum .warn b{color:var(--gold)} .tb-sum .bad b{color:var(--red)}
/* 설정 페이지 */
.settings{max-width:560px}
.set-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.set-card h3{margin:0 0 3px;font-size:15px}
.set-card .d{font-size:12px;color:var(--slate);margin-bottom:14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:var(--panel);color:var(--slate);font-size:13px;font-weight:600;padding:9px 15px;display:inline-flex;align-items:center;gap:7px;border-right:1px solid var(--line);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--navy);color:#fff}
.seg button.on svg{color:#fff}
:root[data-theme="dark"] .seg button.on{color:#0d1220}
table.r{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;min-width:1080px}
table.r th,table.r td{padding:0;text-align:center}
table.r thead th{position:sticky;top:0;z-index:3;background:var(--soft);color:var(--slate-2);font-weight:600;font-size:10.5px;height:40px;border-bottom:1px solid var(--line)}
table.r thead th .dnum{font-family:var(--mono);font-size:12px;color:var(--slate)}
table.r thead th .dw{font-size:9px;font-weight:600;display:block;margin-top:1px}
table.r thead th.sat .dnum,table.r thead th.sat .dw{color:var(--indigo)}
table.r thead th.sun .dnum,table.r thead th.sun .dw{color:var(--red)}
table.r .emp{position:sticky;left:0;z-index:2;background:var(--panel);text-align:left;padding:0 14px;min-width:158px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
table.r thead th.emp{z-index:4;background:var(--soft)}
table.r .emp .nm{font-weight:600;font-size:13px}
table.r .emp .no{font-family:var(--mono);font-size:11px;color:var(--slate-2);margin-top:1px}
table.r tbody td{height:44px;border-bottom:1px solid var(--line);position:relative}
table.r tbody td.wend{background:color-mix(in srgb,var(--soft) 65%,transparent)}
table.r tbody tr:hover td{background:color-mix(in srgb,var(--navy-050) 45%,transparent)}
table.r tbody tr:hover .emp{background:var(--soft)}
.cell{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;border-radius:var(--r-sm);font-size:11.5px;font-weight:700;cursor:pointer}
.cell.day{background:var(--navy-050);color:var(--navy)}
.cell.night{background:var(--indigo-050);color:var(--indigo)}
.cell.simya{background:color-mix(in srgb,var(--indigo) 22%,transparent);color:var(--indigo)}
.cell.leave{background:var(--green-050);color:var(--green)}
.cell.off{color:var(--slate-2);font-weight:500;background:transparent}
.cell.empty{color:var(--line);cursor:pointer}
/* 근무표 셀: 근무조 칩 + 특이사항 배지 + 특근/연장 태그. 외부유래(SAP/그룹웨어)=옅게+S/G, 읽기전용. */
td:has(.rcell){padding:2px 3px;position:relative}
.cell.rcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:auto;min-height:30px;position:relative}
.cell.rcell.ro{cursor:default;background:color-mix(in srgb,var(--slate) 12%,transparent);border-radius:var(--r-sm)}   /* 읽기전용(마감월 셀 전체) = 배경 톤으로만(글씨 opacity 금지, 100% 또렷) */
/* 분리형: 메인 근무조 색칩 + 특이사항 태그 + 특근/연장 태그 */
.rc-jo{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--r-sm);line-height:1.5;min-width:28px;text-align:center}
.rc-jo.day{background:var(--navy-050);color:var(--navy)}
.rc-jo.night{background:var(--indigo-050);color:var(--indigo)}
.rc-jo.off{color:var(--red);font-weight:700;background:transparent}   /* 휴무 = 빨강 글씨(주간/야간은 기존 색 유지) */
.rc-jo.summer{color:#E08A2E;font-weight:700;background:color-mix(in srgb,#E08A2E 15%,transparent)}   /* 하계 = 자체 색(근무조 메인 칩) */
.rc-jo.none{color:var(--line);font-weight:500}
/* (.rc-jo.sap 흐림 제거 — SAP 근무조 프리필은 편집가능이므로 또렷하게. 잠김 흐림은 .cell.rcell.ro 로만) */
.rc-jo.sug{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slate) 45%,transparent)}   /* 글씨 opacity 금지 — 테두리로만 구분 */
.rc-sp{font-size:8.5px;font-weight:700;padding:0 5px;border-radius:var(--r-sm);line-height:1.55;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-sp.sp-leave{background:var(--indigo-050);color:var(--indigo)}
.rc-sp.sp-trip{background:rgba(13,148,136,.16);color:#0d9488}
.rc-sp.sp-sick{background:var(--gold-050);color:var(--gold)}
.rc-sp.sp-absent{background:var(--red);color:#fff}
.rc-sp.sp-unpaid,.rc-sp.sp-duty,.rc-sp.sp-etc{background:var(--soft);color:var(--slate)}
/* (.rc-sp.sap 흐림 제거 — 잠김 흐림은 .cell.rcell.ro 로만) */
.rc-ot{font-size:8px;font-weight:700;padding:0 4px;border-radius:var(--r-sm);background:var(--gold-050);color:var(--gold);line-height:1.5}
.rc-ot.ext{background:color-mix(in srgb,var(--gold) 12%,transparent)}
/* 확정 요소(SAP/그룹웨어)=요소만 읽기전용 흐림 · 52h초과 표시. (예정 점선·미저장 노랑점 폐지: 또렷/흐림+태그만) */
.rc-sp.roel,.rc-ot.roel{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slate) 50%,transparent)}   /* 확정(읽기전용) 요소 = 테두리로만 구분(글씨 100% 또렷, opacity 금지) */
/* 웹 예정(담당자 입력, 수정가능) = 플레인 텍스트(테두리·배경 둘 다 제거). '테두리+배경=확정 / 아무것도 없음=예정' */
.rc-sp.plan,.rc-ot.plan{background:transparent!important;box-shadow:none!important;color:var(--ink);padding:0 2px}
.rc-short{font-size:8.5px;font-weight:700;padding:0 5px;border-radius:var(--r-sm);line-height:1.55;background:rgba(14,155,181,.16);color:#0e9bb5}   /* 단축근무(그룹웨어 유래 읽기전용 태그) */
.rc-ot.flag{background:var(--gold-050);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}   /* 연장 세콤 이상치(확인 필요) */
.cell.rcell.over52{background:var(--red-050);border-radius:var(--r-sm)}
td:has(.cell.over52){background:var(--red-050)}
.cell.rcell:not(.ro){cursor:pointer}
/* 팔레트 그룹 + OT 시간입력 */
.pgrp{display:inline-flex;gap:3px;align-items:center;flex-wrap:wrap}
.pgrp-sep{width:1px;height:16px;background:var(--line);margin:0 5px;display:inline-block}
.oth{width:46px;height:26px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-size:12px;padding:0 5px;margin-left:5px}
.edit-sw{width:13px;height:13px;border-radius:var(--r-sm);background:var(--navy-050);box-shadow:inset 0 0 0 1px var(--navy);display:inline-block}
/* (.rc-src 출처 G/S 뱃지 폐지 — 확정=테두리+배경으로 구분) */
.sap-sw{width:13px;height:13px;border-radius:var(--r-sm);background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slate) 50%,transparent);display:inline-block}   /* 읽기전용 범례 = 테두리(흐림 아님) */
/* (미저장 노랑점 폐지 — 상단 '변경 N' 카운터로만 확인) */
.note{font-size:12px;color:var(--slate);padding:11px 15px;border-top:1px solid var(--line)}
.note b{color:var(--gold)}
.note b.off{color:var(--red)}
.placeholder{color:var(--slate);display:grid;place-items:center;min-height:40vh;text-align:center}
.placeholder .big{font-size:15px;color:var(--ink);margin-bottom:6px;font-weight:600}

/* ================= MOBILE ================= */
@media (max-width:860px){
  .login{grid-template-columns:1fr}
  .brandside{display:none}
  /* 모바일 로그인: 화면 전체 배경(cover) + 폼은 반투명 카드 */
  .formside{min-height:100vh;padding:24px;display:grid;place-items:center;position:relative;
    background:#101f38 var(--login-bg-m,url('/img/login-bg-rollers.jpg')) center/cover no-repeat}
  .formside::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,38,.52),rgba(11,20,38,.78))}
  .form-card{position:relative;z-index:1;max-width:400px;background:rgba(17,26,45,.72);border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-lg);padding:26px 22px;color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .form-card h3{color:#fff}
  .form-card .sub{color:rgba(255,255,255,.72)}
  .form-card .field label{color:rgba(255,255,255,.82)}
  .form-card .inp{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
  .form-card .inp:focus-within{background:rgba(255,255,255,.16);border-color:#fff}
  .form-card .inp input{color:#fff}
  .form-card .inp input::placeholder{color:rgba(255,255,255,.5)}
  .form-card .inp svg{color:rgba(255,255,255,.7)}
  .form-card .chk{color:rgba(255,255,255,.78)}
  .form-card .foot{color:rgba(255,255,255,.62)}
  .form-card .btn-primary{background:#2f5390;color:#fff}
  .app{flex-direction:column}
  .iconrail,.menupanel,.railexp{display:none!important}
  .main{height:100vh}
  .content{padding:14px 14px calc(76px + env(safe-area-inset-bottom))}
  .strip{grid-template-columns:repeat(2,1fr)}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:40}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--slate-2);text-decoration:none;font-size:10px;font-weight:600}
  .tabbar a.on{color:var(--navy)}
}

/* mobile home content */
.mhi{padding:8px 2px 14px}.mhi .h{font-size:20px;font-weight:700;letter-spacing:-.01em}.mhi .s{font-size:12.5px;color:var(--slate);margin-top:3px}
.todaycard{border-radius:var(--r-lg);padding:17px;color:#fff;margin-bottom:14px;
  background:linear-gradient(150deg,rgba(16,31,56,.66),rgba(16,31,56,.40)),#101f38 var(--card-bg,url('/img/card-bg-laser.jpg')) center/cover no-repeat}
/* 오늘카드는 배경이 항상 어두움 → 라이트/다크 모두 본문 텍스트는 밝게 통일(다크 검정 오버라이드 제거) */
.todaycard, :root[data-theme="dark"] .todaycard{color:#eef2f9}
.todaycard .tg{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.16);border-radius:var(--r-sm);padding:4px 10px;font-size:11px;font-weight:600}
:root[data-theme="dark"] .todaycard .tg{background:rgba(0,0,0,.16)}
.todaycard .sh{font-size:14px;font-weight:600;margin:12px 0 13px}
.punch{display:flex;gap:10px}.punch .p{flex:1;background:rgba(255,255,255,.13);border-radius:var(--r);padding:10px 12px}
:root[data-theme="dark"] .punch .p{background:rgba(0,0,0,.12)}
.punch .p .l{font-size:10px;color:rgba(238,242,249,.82)}.punch .p .t{font-family:var(--mono);font-size:18px;font-weight:600;margin-top:3px;color:#fff}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.qa a{background:var(--soft);border-radius:var(--r);padding:13px 4px;text-align:center;color:var(--slate);text-decoration:none;font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:7px}
.qa a .qi{color:var(--navy)}
.subhead{font-size:12px;font-weight:700;color:var(--slate);margin:4px 2px 9px}
.wk{display:flex;gap:5px}
.wk .d{flex:1;text-align:center;background:var(--soft);border-radius:var(--r);padding:8px 0}
.wk .d .dn{font-size:10px;color:var(--slate-2)}.wk .d .dt{font-size:11.5px;font-weight:700;margin-top:5px}
.wk .d.on{background:var(--navy-050);color:var(--navy)}.wk .d.ni{background:var(--indigo-050);color:var(--indigo)}
.wk .d.today{outline:2px solid var(--gold);outline-offset:-2px}

/* ===== 홈 오늘카드: 상태 배지 + 익일 ===== */
.todaycard .tcrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stbadge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.01em}
.stbadge.done{background:rgba(255,255,255,.18);color:#fff}
.stbadge.working{background:var(--gold);color:#3a2f10}
.stbadge.absent{background:var(--red);color:#fff}
:root[data-theme="dark"] .stbadge.done{background:rgba(0,0,0,.2)}
.punch .p .t .nx{font-family:var(--font);font-size:9px;font-weight:700;background:rgba(255,255,255,.22);border-radius:var(--r-sm);padding:1px 5px;margin-left:5px;vertical-align:2px}
:root[data-theme="dark"] .punch .p .t .nx{background:rgba(0,0,0,.2)}

/* ===== 월 근태내역(공용) ===== */
.ah-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ah-nav{display:flex;align-items:center;gap:10px}
.ah-nav .iconbtn{width:34px;height:34px}
.ah-ym{font-family:var(--mono);font-size:18px;font-weight:700;min-width:96px;text-align:center}
.ah-who{font-size:14px;font-weight:700}.ah-who .sub{font-size:12px;color:var(--slate);font-weight:600}
.ah-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.ah-tiles .tile{display:block;padding:11px 13px;text-align:left}
.ah-tiles .tn{font-size:11px;color:var(--slate);font-weight:600}
.ah-tiles .tv{font-family:var(--mono);font-size:21px;font-weight:700;margin-top:3px;line-height:1}
.ah-tiles .tv small{font-size:11px;color:var(--slate);font-weight:600;margin-left:2px}
.ah-tiles .tile.ok .tv{color:var(--green)}
.ah-tiles .tile.warn .tv{color:var(--red)}
.ah-cal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.ah-dows{display:grid;grid-template-columns:repeat(7,1fr);background:var(--soft);border-bottom:1px solid var(--line)}
.ah-dow{text-align:center;font-size:10.5px;font-weight:700;color:var(--slate-2);padding:8px 0}
.ah-dow.sun{color:var(--red)}.ah-dow.sat{color:var(--indigo)}
.ah-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.ac{min-height:66px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.ac:nth-child(7n){border-right:0}
.ac.empty{background:color-mix(in srgb,var(--soft) 50%,transparent)}
.ac.we{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.ac.today{outline:2px solid var(--gold);outline-offset:-2px;border-radius:var(--r-sm)}
.acd{display:flex;align-items:center;justify-content:space-between;gap:4px}
.acd .dnum{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--slate)}
.ac.today .acd .dnum{color:var(--gold)}
.acst{font-size:9px;font-weight:700;padding:1px 5px;border-radius:var(--r-sm)}
.acst.bad{background:var(--red-050);color:var(--red)}
.acst.working{background:var(--gold-050);color:var(--gold)}
.joband{align-self:flex-start;font-size:10px;font-weight:700;color:#fff;background:var(--jc,#8A8F98);border-radius:var(--r-sm);padding:1px 7px;line-height:1.5}
.ptimes{display:flex;flex-wrap:wrap;align-items:center;gap:3px;font-family:var(--mono);font-size:10.5px;color:var(--ink);margin-top:auto}
.ptimes.muted{color:var(--slate-2)}
.ptimes .arw{color:var(--slate-2)}
.ptimes .nx{font-family:var(--font);font-style:normal;font-size:8.5px;font-weight:700;background:var(--indigo-050);color:var(--indigo);border-radius:var(--r-sm);padding:0 4px;margin-left:2px}
.ah-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;padding:2px}
.ah-legend .lg i{width:11px;height:11px;border-radius:var(--r-sm);display:inline-block}
.ah-legend .lg.note{color:var(--slate-2);font-weight:600}
@media (max-width:860px){
  .ah-ym{font-size:16px;min-width:84px}
  /* 셀 높이 균일화: 모든 주(row) '고정' 높이 → 긴 라벨(대체공휴일 등) 있는 날도 셀이 커지지 않음(들쭉날쭉 방지).
     날짜숫자 + 배지(최대 2줄) + 출퇴근 시각이 이 높이 안에 들어가도록 산정. 넘치면 clip. */
  .ah-grid{grid-auto-rows:86px}
  .ac{min-height:0;padding:5px 5px;gap:3px;overflow:hidden}
  .acd .dnum{font-size:11.5px}
  /* 출퇴근 시간: 좁은 폭에서 줄바꿈 허용(고정 높이 안에서) */
  .ptimes{font-size:9.5px;gap:1px 4px;white-space:normal;word-break:keep-all;line-height:1.4}
}

/* ===== 근무표: 공휴일 · 주전 프리필 제안 ===== */
table.r thead th.hol .dnum, table.r thead th.hol .dw{color:var(--red)}
table.r tbody td.hol{background:color-mix(in srgb,var(--red-050) 55%,transparent)}
.cell.sug{border:1px dashed color-mix(in srgb,var(--slate) 55%,transparent);background:transparent!important;color:var(--slate)!important;font-weight:600}
.wgtag{font-size:9px;font-weight:700;color:var(--navy);background:var(--navy-050);border-radius:var(--r-sm);padding:0 5px;margin-left:4px;vertical-align:1px}
/* 근무형태 배지 색 구분(주전=네이비 기본 · 2교대=골드 · 3교대=인디고). 각진 톤 유지. */
.wgtag.shift2{color:var(--gold);background:var(--gold-050)}
.wgtag.shift3{color:var(--indigo);background:var(--indigo-050)}
.wgbrk{color:var(--slate-2);font-weight:600}
.wgbrk b{color:var(--slate)}
.tb-sum .sugm b{color:var(--slate-2)}
.note .sugdot{display:inline-block;font-size:10px;font-weight:700;color:var(--slate);border:1px dashed var(--slate-2);border-radius:var(--r-sm);padding:0 5px}
.note .holn{color:var(--red)}
/* 월근태 캘린더 공휴일 */
.ac.hol .acd .dnum{color:var(--red)}
.holband{align-self:flex-start;font-size:10px;font-weight:700;color:#fff;background:var(--red);border-radius:var(--r-sm);padding:1px 7px;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 월근태 캘린더 특이사항 배지(마감월 ZPH_PY008) — 색 그룹은 출퇴근현황과 동일 */
.ac-sp{align-self:flex-start;font-size:10px;font-weight:700;border-radius:var(--r-sm);padding:1px 7px;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-sp.sp-leave{background:var(--indigo-050);color:var(--indigo)}
.ac-sp.sp-unpaid,.ac-sp.sp-duty,.ac-sp.sp-etc{background:var(--soft);color:var(--slate)}
.ac-sp.sp-trip{background:rgba(13,148,136,.16);color:#0d9488}
.ac-sp.sp-sick{background:var(--gold-050);color:var(--gold)}
.ac-sp.sp-absent{background:var(--red);color:#fff}
/* 모바일: 배지(근무형태·공휴일·특이사항) 최대 2줄 줄바꿈 후 말줄임 — 고정 셀 높이 유지(셀 안에서 wrap, 넘치면 clip).
   ※ 위 base .holband/.ac-sp(nowrap)보다 뒤에 선언 → 모바일에서 이 규칙이 우선. */
@media (max-width:860px){
  .joband,.holband,.ac-sp{
    font-size:9px;padding:1px 6px;line-height:1.3;max-width:100%;
    white-space:normal;word-break:break-word;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
}

/* ===== 셸: 넓은 패널 접기(아이콘 레일만 남김) ===== */
.menupanel{transition:flex-basis .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1), opacity .18s ease}
.mp-item .lbl{white-space:nowrap}
/* 접힘 상태: 넓은 패널 width 0 + 페이드 → 콘텐츠 확장, 상단 펼치기 버튼 노출 */
.app.panel-collapsed .menupanel{flex-basis:0;width:0;opacity:0;border-right:0;pointer-events:none}
.app.panel-collapsed .railexp{display:grid}
/* 아이콘 hover 모듈명 툴팁 */
.ir-mod{position:relative}
.ir-mod:hover::after{content:attr(title);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--ink);color:var(--bg);padding:5px 9px;border-radius:var(--r-sm);font-size:12px;font-weight:600;white-space:nowrap;z-index:60;box-shadow:var(--shadow);pointer-events:none}
@media (prefers-reduced-motion:reduce){ .menupanel,.mp-items,.mp-ghead .gcaret svg{transition:none!important} }

/* ===== 현황판(P_DASH) ===== */
.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 15px;box-shadow:var(--shadow-sm)}
.kpi .kn{font-size:11.5px;color:var(--slate);font-weight:600}
.kpi .kv{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1;margin-top:6px}
.kpi.g .kv{color:var(--gold)} .kpi.ok .kv{color:var(--green)} .kpi.warn .kv{color:var(--gold)} .kpi.bad .kv{color:var(--red)}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-grid .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);min-height:180px}
.card-h{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.card-link{font-size:12px;font-weight:600;color:var(--navy);text-decoration:none}.card-link:hover{text-decoration:underline}
.chart-empty{color:var(--slate-2);font-size:12.5px;display:grid;place-items:center;min-height:120px}
/* 도넛 */
.donut-wrap{display:flex;align-items:center;gap:22px}
.donut{width:140px;height:140px;flex:0 0 auto}
.donut .dn-v{text-anchor:middle;font-family:var(--mono);font-size:24px;font-weight:700;fill:var(--ink)}
.donut .dn-l{text-anchor:middle;font-size:10px;fill:var(--slate)}
.donut-lg{display:flex;flex-direction:column;gap:8px}
.donut-lg .lg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--slate);font-weight:600}
.donut-lg .lg i{width:11px;height:11px;border-radius:var(--r-sm)}.donut-lg .lg b{color:var(--ink);font-family:var(--mono)}
/* 세로 막대 */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:6px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:5px}
.bar-v{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--slate)}
.bar-track{width:60%;max-width:34px;flex:1;display:flex;align-items:flex-end;background:var(--soft);border-radius:var(--r-sm)}
.bar-fill{width:100%;border-radius:var(--r-sm);min-height:3px;transition:height .3s cubic-bezier(.4,0,.2,1)}
.bar-l{font-size:11px;color:var(--slate-2);font-weight:600}
/* 가로 막대(부서 이상) */
.hbars{display:flex;flex-direction:column;gap:11px}
.hbar-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.hbar-l{flex:0 0 92px;color:var(--ink);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{flex:1;height:14px;background:var(--soft);border-radius:var(--r-sm);overflow:hidden}
.hbar-fill{display:block;height:100%;background:var(--red);border-radius:var(--r-sm);transition:width .3s cubic-bezier(.4,0,.2,1)}
.hbar-v{flex:0 0 auto;font-family:var(--mono);font-weight:700;color:var(--red)}
/* SECOM */
.secom{display:flex;flex-direction:column;gap:10px}
.secom .srow{display:flex;align-items:center;gap:10px;font-size:13px}
.secom .sl{flex:0 0 96px;color:var(--slate);font-weight:600}.secom .sv{color:var(--ink);font-weight:600}
.secom .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.secom .dot.on{background:var(--green)}.secom .dot.off{background:var(--slate-2)}
.secom .note-inline{color:var(--slate-2);font-size:11.5px;font-weight:500;border-top:1px solid var(--line);padding-top:9px}
@media (max-width:980px){ .kpi-row{grid-template-columns:repeat(3,1fr)} .dash-grid{grid-template-columns:1fr} }

/* ===== 근태 이상자(P_ABNORMAL) ===== */
.ab-dash{color:var(--slate-2)}
.native-sel input[type=date]{height:38px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 11px;font-family:var(--mono);font-size:13px;color:var(--ink)}
.ab-sum{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--slate);font-weight:600;margin-bottom:12px}
.ab-chip{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--soft);color:var(--slate)}
.ab-chip.warn{background:var(--gold-050);color:var(--gold)}.ab-chip.bad{background:var(--red-050);color:var(--red)}
.ab-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--panel)}
.ab-table thead th{position:sticky;top:0;background:var(--soft);color:var(--slate-2);font-weight:600;font-size:11.5px;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.ab-table td{padding:9px 12px;border-bottom:1px solid var(--line)}
.ab-table tr:hover td{background:color-mix(in srgb,var(--navy-050) 40%,transparent)}
.ab-d{font-family:var(--mono);color:var(--slate);font-weight:700}.ab-t{font-family:var(--mono)}
.ab-dim{color:var(--slate);font-size:12px}
.ab-t .nx{font-style:normal;font-size:9px;font-weight:700;background:var(--indigo-050);color:var(--indigo);border-radius:var(--r-sm);padding:0 4px;margin-left:3px}
.ab-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);background:var(--soft);color:var(--slate)}
.ab-tag.warn{background:var(--gold-050);color:var(--gold)}.ab-tag.bad{background:var(--red-050);color:var(--red)}
.ab-fix{font-size:12px;font-weight:600;color:var(--navy);text-decoration:none}.ab-fix:hover{text-decoration:underline}
.ab-empty{text-align:center;color:var(--slate-2);padding:26px}
/* 근태이상자 인라인 보정 */
.ab-manual{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:700;vertical-align:middle;background:var(--gold-050);color:var(--gold);border-radius:var(--r-sm);padding:1px 5px;cursor:help}
.ab-act{white-space:nowrap;text-align:right}
.ab-act button{font-family:var(--font);font-size:12px;font-weight:600;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:3px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.ab-act button:disabled{opacity:.5;cursor:not-allowed}
.ab-edit{color:var(--navy)}.ab-edit svg{width:13px;height:13px}
.ab-save{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .ab-save{color:#0d1220}
.ab-restore{color:var(--slate-2)}
.ab-act button+button{margin-left:5px}
.ab-editing td{background:color-mix(in srgb,var(--gold-050) 55%,transparent)}
.ab-in,.ab-out{width:130px;min-width:130px;height:34px;font-family:var(--mono);font-size:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);padding:0 10px;box-sizing:border-box}
.ab-in::-webkit-calendar-picker-indicator,.ab-out::-webkit-calendar-picker-indicator{cursor:pointer;margin-left:2px}
.ab-t{white-space:nowrap}   /* 시각 셀 — 입력창 잘림 방지 */
.ab-nx{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--slate-2);margin-left:6px;cursor:pointer}
.ab-nx input{width:13px;height:13px;accent-color:var(--navy)}

/* ===== 모션 언어 — 공통 마이크로 인터랙션 ===== */
.btn2,.btn-primary,.pchip,.iconbtn,.mp-item,.ir-mod,.mp-collapse,.mp-ghead,.seg button,.tab,.qa a,.card-link,.ab-fix,.cell,.org-add,.org-chip .org-lock,.org-chip .org-rm{
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
/* hover 들뜸 */
.btn2:hover,.btn-primary:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.iconbtn:hover,.railtoggle:hover,.pchip:hover{transform:translateY(-1px)}
/* active 눌림감 */
.btn2:active,.btn-primary:active,.pchip:active,.iconbtn:active,.railtoggle:active,.tab:active,.seg button:active{transform:translateY(1px) scale(.985)}
.cell:active{transform:scale(.93)}
/* focus-visible 접근성 링(골드) */
.btn2:focus-visible,.btn-primary:focus-visible,.pchip:focus-visible,.iconbtn:focus-visible,.mp-collapse:focus-visible,.mp-ghead:focus-visible,.seg button:focus-visible,.tab:focus-visible,.mp-item:focus-visible,.ir-mod:focus-visible,.native-sel select:focus-visible,.native-sel input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-sm)}
.inp:focus-within{outline:2px solid var(--navy);outline-offset:1px}
/* 아이콘버튼 hover 배경/테마 토글 회전 */
.iconbtn svg,.railtoggle svg{transition:transform var(--dur-mid) var(--ease)}
#themeBtn:active svg{transform:rotate(-35deg)}
/* 강조 버튼(저장/SAP반영/로그인): 눌림 + 은은한 채움 스윕 */
.btn2.solid,.btn2.gold,.btn-primary{position:relative;overflow:hidden}
.btn2.solid:hover,.btn2.gold:hover,.btn-primary:hover{box-shadow:var(--shadow)}
.btn2.solid::after,.btn2.gold::after,.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);transform:translateX(-120%);pointer-events:none}
.btn2.solid:active::after,.btn2.gold:active::after,.btn-primary:active::after{transition:transform .5s var(--ease);transform:translateX(120%)}
/* 로딩 상태(중복클릭 방지·인라인 스피너) */
.is-loading{color:transparent!important;pointer-events:none;position:relative}
.is-loading svg{opacity:0}
.is-loading::before{content:"";position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.btn2:not(.solid):not(.gold).is-loading::before{border-color:color-mix(in srgb,var(--slate) 40%,transparent);border-top-color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .btn2,.btn-primary,.pchip,.iconbtn,.mp-item,.ir-mod,.tab,.cell,.iconbtn svg{transition:none!important}
  .btn2:hover,.btn-primary:hover,.iconbtn:hover,.pchip:hover,.btn2:active,.btn-primary:active,.pchip:active,.iconbtn:active,.tab:active,.cell:active,#themeBtn:active svg{transform:none!important}
  .btn2.solid::after,.btn2.gold::after,.btn-primary::after{display:none}
}

/* ===== 셸: 탭 워크스페이스 (keep-alive) ===== */
/* 탭 줄: [좌] 탭목록(가변·스크롤) — [우] 테마·사번·로그아웃(고정). 기존 상단 유틸바 제거 대체 */
.tabrow{display:flex;align-items:stretch;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto;min-height:var(--hdr);box-sizing:border-box}
.tabutils{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:0 16px;margin-left:auto}
.tabstrip{display:flex;align-items:flex-end;gap:2px;padding:6px 12px 0;overflow-x:auto;overflow-y:hidden;min-height:0;flex:1 1 auto;min-width:0;scrollbar-width:thin}
.tabstrip::-webkit-scrollbar{height:6px}.tabstrip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tab{display:inline-flex;align-items:center;gap:5px;padding:7px 8px 7px 12px;border:1px solid var(--line);border-bottom:none;border-radius:var(--r) var(--r) 0 0;background:var(--soft);color:var(--slate);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;max-width:210px;position:relative;top:1px;transition:background .16s ease,color .16s ease}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--panel);color:var(--ink)}
.tab.on::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gold);border-radius:2px 2px 0 0}
.tab .tlabel{display:inline-flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tab .tlabel .tico{width:14px;height:14px;flex:0 0 auto;color:var(--slate-2)}
.tab.on .tlabel .tico{color:var(--navy)}
.tab .tclose{flex:0 0 auto;color:var(--slate-2);font-size:15px;line-height:1;width:18px;height:18px;display:grid;place-items:center;border-radius:var(--r-sm)}
.tab .tclose:hover{background:var(--red-050);color:var(--red)}
.workspace{flex:1;min-height:0;position:relative;background:var(--bg)}
.tabpane{display:none;height:100%;overflow:auto;padding:22px}
.tabpane.on{display:block}

@media (prefers-reduced-motion:reduce){
  .menupanel,.mp-item,.tab{transition:none!important}
}
@media (max-width:860px){
  .tabrow,.tabstrip{display:none}
  .tabpane{padding:14px 14px calc(76px + env(safe-area-inset-bottom))}
}

/* ── 파트/파트장 관리 (P_ORG) ── */
.btn-ghost{height:38px;border:1px solid var(--line);background:transparent;border-radius:var(--r);padding:0 15px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--slate);cursor:pointer}
.btn-ghost:hover{background:var(--soft)}
.org-sum{font-size:13px;color:var(--slate);padding:2px 2px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.2px}
.org-badge.kakao{background:var(--navy-050);color:var(--navy-600)}
.org-badge.manual{background:var(--gold-050);color:var(--gold)}
.org-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--panel)}
.org-table thead th{position:sticky;top:0;background:var(--soft);color:var(--slate-2);font-weight:600;font-size:11.5px;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.org-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.org-table tr:hover td{background:color-mix(in srgb,var(--navy-050) 40%,transparent)}
.org-pc{font-family:var(--mono);color:var(--slate-2);font-size:12px}
.org-pn{font-weight:600;color:var(--ink)}
.org-mc{color:var(--slate);font-variant-numeric:tabular-nums}
/* 리더 셀: td는 table-cell(세로 중앙) 유지 → 행 구분선 정렬. flex는 내부 wrapper로.
   min-height 통일 = 칩 유무·복수(2명) 무관 모든 행 동일 높이(미지정 행도 동일). */
.org-leaders{vertical-align:middle}
.org-lwrap{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:30px}
.org-none{font-size:12px;color:var(--slate-2)}
.org-chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 11px}
.org-chip.locked{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-050)}
.org-nm{font-size:12.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:baseline;gap:5px}
.org-en{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--slate-2)}
.org-chip .org-lock,.org-chip .org-rm{width:22px;height:22px;border:none;background:transparent;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--slate-2);padding:0}
.org-chip .org-lock svg,.org-chip .org-rm svg{width:13px;height:13px}
.org-chip.locked .org-lock{color:var(--gold)}
.org-chip .org-lock:hover{background:var(--gold-050);color:var(--gold)}
.org-chip .org-rm:hover{background:var(--red-050);color:var(--red)}
.org-add{height:30px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 11px;font-family:var(--font);font-size:12px;font-weight:600;color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.org-add svg{width:14px;height:14px;color:var(--navy-600)}
.org-add:hover{background:var(--soft);color:var(--ink)}
/* 추가 모달 */
.org-modal{position:fixed;inset:0;background:rgba(13,18,32,.42);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.org-modal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,0,0,.25);width:min(420px,100%);overflow:hidden}
.org-modal-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--ink);font-size:14px;padding:15px 17px;border-bottom:1px solid var(--line)}
.org-modal-h .org-modal-x{width:28px;height:28px;border:none;background:transparent;border-radius:var(--r-sm);cursor:pointer;color:var(--slate-2);display:inline-flex;align-items:center;justify-content:center}
.org-modal-h .org-modal-x:hover{background:var(--soft)}
.org-modal-b{padding:17px}
.org-modal-l{font-size:12.5px;color:var(--slate);margin-bottom:11px}
.org-modal-l b{color:var(--gold)}
.org-msel{width:100%;appearance:none;height:40px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 13px;font-family:var(--font);font-size:13px;color:var(--ink);cursor:pointer}
.org-msel[size]{height:auto;padding:6px;appearance:auto}
.org-msel[size] option{padding:6px 8px}
.org-msearch{width:100%;height:38px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 12px;font-family:var(--font);font-size:13px;color:var(--ink);margin-bottom:9px}
.org-msearch:focus{outline:none;border-color:var(--navy)}
.org-modal-f{display:flex;justify-content:flex-end;gap:9px;padding:14px 17px;border-top:1px solid var(--line);background:var(--soft)}

/* ── 홈 랜딩(전 탭 닫힘/로그인 직후, 탭 아님) ── */
.homelanding{display:none}
.homelanding.on{display:block;height:100%;overflow:auto}
.hl-inner{max-width:760px;margin:0 auto;padding:56px 24px 40px;text-align:center}
.hl-brand{margin-bottom:22px}
.hl-brand .logo{height:34px;width:auto;max-width:260px;object-fit:contain}
.hl-hi{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hl-hi b{color:var(--navy)}
.hl-grade{font-size:12px;font-weight:700;color:var(--gold);background:var(--gold-050);border-radius:999px;padding:3px 10px;margin-left:6px;vertical-align:middle}
.hl-sub{font-size:13px;color:var(--slate);margin-top:8px}
.hl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:30px}
.hl-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--slate);text-decoration:none;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-sm);transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.hl-card:hover{transform:translateY(-2px);border-color:var(--navy);color:var(--ink);box-shadow:var(--shadow)}
.hl-ic{width:40px;height:40px;border-radius:var(--r);background:var(--navy-050);color:var(--navy);display:grid;place-items:center}
.hl-ic svg{width:20px;height:20px}
.hl-empty{grid-column:1/-1;color:var(--slate-2);font-size:13px;padding:20px}
@media (prefers-reduced-motion:reduce){ .hl-card{transition:none!important} .hl-card:hover{transform:none!important} }

/* P_ORG 섹션 헤더(팀장/파트장) */
.org-sec-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink);padding:2px 2px 10px}
.org-sec-h svg{width:17px;height:17px;color:var(--navy)}
.org-sec-sub{font-size:12px;font-weight:500;color:var(--slate-2)}

/* ── 출퇴근 현황 매트릭스(P_ATTEND) ── */
/* 출퇴근현황 셀: 시각 상시 표시 + 상태/특이사항 배지. 균일 크기(들쭉날쭉 방지). */
.at-table td.at-cell{text-align:center;padding:3px 4px;min-width:56px;height:56px;white-space:nowrap;vertical-align:middle}
.at-table thead th{min-width:58px}.at-table thead th.emp,.at-table td.emp{min-width:0}
/* 사원 셀 세로 스택: 이름 / 근무유형 배지 / 사번 (2자 이름도 줄바꿈 안 깨지게) */
.at-table td.emp{vertical-align:middle;padding:6px 10px}
.at-table td.emp .nm{white-space:nowrap}
.at-table .emp-wg{margin:3px 0 1px}
.at-table .emp-wg .wgtag{margin-left:0}
.atc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.1}
.atc-b{font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--r-sm)}
.atc-b.warn{background:var(--gold);color:#3a2f10}
.atc-b.bad{background:var(--red);color:#fff}
.atc-b.off{background:var(--soft);color:var(--slate-2)}
/* 특이사항 배지 색 그룹(브랜드 팔레트, 라운드 최소) */
.atc-b.sp-leave{background:var(--indigo-050);color:var(--indigo)}                 /* 휴가류 인디고 */
.atc-b.sp-unpaid,.atc-b.sp-duty,.atc-b.sp-etc{background:var(--soft);color:var(--slate)}  /* 무급/당직·훈련/기타 슬레이트 */
.atc-b.sp-trip{background:rgba(13,148,136,.16);color:#0d9488}                     /* 출장 티얼 */
.atc-b.sp-sick{background:var(--gold-050);color:var(--gold)}                      /* 병가류 앰버 */
.atc-b.sp-absent{background:var(--red);color:#fff}                                /* 결근 레드 */
.atc-b.sp-short{background:rgba(14,155,181,.16);color:#0e9bb5}                     /* 단축근무 시안(휴가·이상과 구분) */
.atc-t{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink)}
.atc-t.muted{color:var(--slate-2)}
.atc-sep{color:var(--slate-2);margin:0 1px}
/* 출퇴근 2줄(위=출근·아래=퇴근) */
.atc-t2{display:flex;flex-direction:column;align-items:center;line-height:1.35;font-family:var(--mono);font-size:10.5px;font-weight:600}
.atc-t2 .atc-in{color:var(--ink)}
.atc-t2 .atc-out{color:var(--slate)}
.atc-t2.muted{color:var(--slate-2)}
/* 근무조 칩(시각 위) — 근무표 팔레트와 동일 색. 휴무=빨강(단, 휴무는 별도 배지라 여기 미노출) */
.atc-jo{font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--r-sm);line-height:1.4}
.atc-jo.jo-day{background:var(--navy-050);color:var(--navy)}
.atc-jo.jo-night{background:var(--indigo-050);color:var(--indigo)}
.atc-jo.jo-off{color:var(--red);font-weight:700;background:transparent}
.atc-jo.jo-summer{background:color-mix(in srgb,#E08A2E 15%,transparent);color:#E08A2E}
.atc-t2 .nx,.atc-t .nx{font-style:normal;color:var(--indigo);font-weight:700;margin-left:1px;font-size:8.5px}
.atc-dash{color:var(--line);font-weight:700}
.at-cell.ok{background:color-mix(in srgb,var(--green-050) 55%,transparent)}
.at-cell.ok .atc-t,.at-cell.ok .atc-t2 .atc-in,.at-cell.ok .atc-t2 .atc-out{color:var(--green)}
.at-cell.warn{background:var(--gold-050)}
.at-cell.bad{background:var(--red-050)}
.at-cell.off{color:var(--slate-2)}
.at-cell.none{color:var(--line)}
/* 특이사항 셀 배경 옅게(그룹색) */
.at-cell.sp-leave{background:color-mix(in srgb,var(--indigo-050) 60%,transparent)}
.at-cell.sp-trip{background:rgba(13,148,136,.09)}
.at-cell.sp-sick{background:color-mix(in srgb,var(--gold-050) 55%,transparent)}
.at-cell.sp-absent{background:var(--red-050)}
.at-cell.sp-unpaid,.at-cell.sp-duty,.at-cell.sp-etc{background:var(--soft)}
.at-cell.sp-short{background:rgba(14,155,181,.09)}
/* 일자별 연장/특근/심야 미니 태그(마감월) */
.atc-ot{font-size:8px;font-weight:700;color:var(--slate-2);line-height:1.1;margin-top:1px;letter-spacing:-.02em}
/* 사원별 월합계 열(우측, 마감월) */
.at-mon-h{min-width:118px;text-align:center;font-size:11px;font-weight:700;color:var(--slate)}
.at-table td.at-mon{min-width:118px;padding:5px 8px;vertical-align:middle;white-space:normal;border-left:2px solid var(--line)}
.atm-b{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--r-sm);margin:1px 3px 1px 0;white-space:nowrap}
.atm-b.ext{background:var(--gold-050);color:var(--gold)}
.atm-b.ext2{background:transparent;color:var(--gold);border:1px solid var(--gold-050)}   /* 특별연장 = 연장 계열, 옅게 */
.atm-b.sp{background:var(--indigo-050);color:var(--indigo)}
.atm-b.mid{background:rgba(13,148,136,.14);color:#0d9488}
.atm-b.mid2{background:transparent;color:#0d9488;border:1px solid rgba(13,148,136,.35)}  /* 특별심야 = 심야 계열, 옅게 */
.atm-empty{color:var(--slate-2);font-size:11px}
.at-legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--slate);margin-left:10px}
.at-legend .sw{width:11px;height:11px;border-radius:var(--r-sm);display:inline-block}
.at-legend .sw.ok{background:var(--green)}
.at-legend .sw.warn{background:var(--gold)}
.at-legend .sw.bad{background:var(--red)}
.at-legend .sw.off{background:var(--slate-2)}
.at-legend .sw.sp-short{background:#0e9bb5}
.ab-chip.ok{background:var(--green-050);color:var(--green)}

/* ── 로그인 브랜드 패널: 도메인 태그 + LME 카드 ── */
.brandside .brandfoot{position:relative;display:flex;flex-direction:column;gap:16px}
.domtags{display:flex;flex-wrap:wrap;gap:8px}
.domtag{font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 13px;backdrop-filter:blur(4px)}
.domtag:first-child{color:#0d1220;background:var(--gold);border-color:var(--gold)}   /* 골드 포인트 1개만 */
/* LME 전기동 미니 카드(반투명 글래스) */
.lme-card[hidden]{display:none}
.lme-card{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--r-lg);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);max-width:340px}
.lme-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.lme-t{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.02em}
.lme-p{font-family:var(--mono);font-size:19px;font-weight:700;color:#fff;line-height:1.1}
.lme-p .u{font-size:11px;font-weight:500;color:rgba(255,255,255,.6);margin-left:4px}
.lme-chg{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:2px}
.lme-chg.up{color:var(--gold)} .lme-chg.down{color:#ff8a7a}
.lme-spark{margin-left:auto;flex:0 0 auto}
.lme-spark svg{display:block}

/* ── 급여명세서(M_PAYSLIP) ── */
.ps-list{display:flex;flex-direction:column;gap:10px;max-width:640px}
.ps-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:15px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s var(--ease),border-color .15s,box-shadow .15s}
.ps-item:hover{transform:translateY(-1px);border-color:var(--navy);box-shadow:var(--shadow)}
.ps-l{flex:0 0 auto}
.ps-ym{font-size:15px;font-weight:700;color:var(--ink)}
.ps-ty{font-size:12px;color:var(--slate-2);margin-top:2px}
.ps-r{margin-left:auto;text-align:right}
.ps-net{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--navy)}
.ps-sub{font-size:11.5px;color:var(--slate-2);margin-top:2px}
.ps-arr{color:var(--slate-2);display:inline-flex}.ps-arr svg{width:16px;height:16px}
/* 상세 */
.ps-detail{max-width:720px}
.ps-back{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--panel);color:var(--slate);border-radius:var(--r);padding:7px 12px 7px 8px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:14px}
.ps-back:hover{background:var(--soft);color:var(--ink)}.ps-back svg{width:15px;height:15px}
.ps-head{margin-bottom:14px}
.ps-hym{font-size:20px;font-weight:700;color:var(--ink)}
.ps-hty{font-size:13px;font-weight:600;color:var(--gold);margin-left:6px}
.ps-hemp{font-size:13px;color:var(--slate);margin-top:3px}
.ps-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){ .ps-cols{grid-template-columns:1fr} }
.ps-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ps-ch{font-size:12px;font-weight:700;color:var(--slate-2);background:var(--soft);padding:9px 14px;border-bottom:1px solid var(--line)}
.ps-row{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px}
.ps-row:last-child{border-bottom:none}
.ps-nm{color:var(--slate)}
.ps-amt{font-family:var(--mono);font-weight:600;color:var(--ink);white-space:nowrap}
.ps-none{color:var(--slate-2);justify-content:center}
.ps-tot{background:var(--soft);font-weight:700}.ps-tot .ps-nm{color:var(--ink)}
.ps-net-card{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:16px 18px;background:var(--navy);color:#fff;border-radius:var(--r-lg)}
:root[data-theme="dark"] .ps-net-card{color:#eaf0fb}
.ps-net-card span{font-size:14px;font-weight:600;opacity:.9}
.ps-net-card b{font-family:var(--mono);font-size:22px;font-weight:700}

/* ── 월 근태내역: SAP 월집계(최종) ── */
.ah-sap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.ah-sap-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.ah-sap-b{font-size:10.5px;font-weight:700;color:#0d1220;background:var(--gold);border-radius:999px;padding:2px 9px}
:root:not([data-theme="light"]) .ah-sap-b{color:#0d1220}
.ah-sap-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.ah-sap-g .sc{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px}
.ah-sap-g .scn{font-size:11px;color:var(--slate-2);margin-bottom:3px}
.ah-sap-g .scv{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}
.ah-sap-g .sc.bad .scv{color:var(--red)} .ah-sap-g .sc.warn .scv{color:var(--gold)}
.ah-sap-n{font-size:11px;color:var(--slate-2);margin-top:10px}
.ah-sap-empty{font-size:12.5px;color:var(--slate-2);text-align:center;padding:16px}
/* 마감월: 월집계 정본 강조 + '마감' 배지 */
.ah-closed{margin-left:8px;font-size:11px;font-weight:700;color:#fff;background:var(--navy);border-radius:var(--r-sm);padding:2px 9px;vertical-align:2px;letter-spacing:.02em}
.ah-sap.closed{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset, var(--shadow-sm)}
.ah-sap.closed .ah-sap-b{background:var(--navy);color:#fff}
:root:not([data-theme="light"]) .ah-sap.closed .ah-sap-b{color:#fff}

/* ── 로그인 시세 카드 행(LME + 환율) ── */
.mkt-row{display:flex;flex-wrap:wrap;gap:12px}
.fx-card[hidden]{display:none}
.fx-card{display:flex;align-items:center;padding:13px 16px;border-radius:var(--r-lg);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);min-width:210px}
.fx-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.fx-t{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.02em}
.fx-p{font-family:var(--mono);font-size:16px;font-weight:700;color:#fff;display:flex;align-items:baseline;gap:7px}
.fx-p b{font-weight:700}
.fx-chg{font-size:12px;font-weight:700}
.fx-chg.up{color:var(--gold)} .fx-chg.down{color:#ff8a7a}
.fx-sub{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.fx-mini{font-size:11px;color:rgba(255,255,255,.66)}
.fx-mini b{font-family:var(--mono);color:rgba(255,255,255,.92);font-weight:600}

/* ===== 전자결재(EA) ===== */
.ea-tabs{display:flex;gap:4px;flex-wrap:wrap}
.ea-tab{height:34px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 12px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--slate);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ea-tab svg{width:14px;height:14px}
.ea-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .ea-tab.on{color:#0d1220}
.ea-cnt{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold)}
.ea-tab.on .ea-cnt{color:#fff}
/* 기안 폼 */
.ea-compose{max-width:760px;display:flex;flex-direction:column;gap:12px}
.ea-row{display:flex;align-items:center;gap:12px}
.ea-row>label{width:72px;flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--slate-2)}
.ea-in{height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-family:var(--font);font-size:13px;padding:0 10px;flex:1;min-width:0}
.ea-in.sm{flex:0 0 96px}
select.ea-in{cursor:pointer}
.ea-form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;padding:12px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r)}
.ea-fr{display:flex;flex-direction:column;gap:4px}
.ea-fr>label{font-size:11.5px;font-weight:600;color:var(--slate-2)}
.ea-req{color:var(--red);font-style:normal}
.ea-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;height:36px}
.ea-chk input{width:15px;height:15px;accent-color:var(--navy)}
.ea-sec-h{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:4px;display:flex;align-items:center;gap:8px}
.ea-sec-h small{font-weight:500;color:var(--slate-2);font-size:11px}
.ea-lineedit{display:flex;gap:8px;align-items:flex-start}
.ea-emp-wrap{position:relative;flex:1}
.ea-emplist{position:absolute;top:38px;left:0;right:0;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);max-height:240px;overflow:auto}
.ea-emplist:empty{display:none}
.ea-emp{padding:8px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line)}
.ea-emp:hover{background:var(--navy-050)}
.ea-emp-sub{color:var(--slate-2);font-size:11px}
.ea-lines{display:flex;flex-direction:column;gap:6px}
.ea-line-item{display:flex;align-items:center;gap:9px;padding:6px 10px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm)}
.ea-lt{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);white-space:nowrap}
.ea-lt-APPROVE{background:var(--navy-050);color:var(--navy)}
.ea-lt-AGREE{background:var(--indigo-050);color:var(--indigo)}
.ea-lt-RECV{background:var(--gold-050);color:var(--gold)}
.ea-lt-REF{background:var(--soft);color:var(--slate)}
.ea-ln-nm{flex:1;font-size:13px;font-weight:600;color:var(--ink)}
.ea-ln-nm small{font-family:var(--mono);font-weight:400;color:var(--slate-2);font-size:11px}
.ea-ln-ord{font-size:11px;color:var(--slate-2);font-variant-numeric:tabular-nums}
.ea-line-item button{width:24px;height:24px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);cursor:pointer;color:var(--slate-2);font-size:12px}
.ea-line-item button:hover{background:var(--soft);color:var(--ink)}
.ea-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
/* 결재함 표 */
.ea-boxtop{margin-bottom:10px}
.ea-boxtop .ea-in{max-width:280px}
.ea-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--panel)}
.ea-table thead th{position:sticky;top:0;background:var(--soft);color:var(--slate-2);font-weight:600;font-size:11.5px;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.ea-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ea-tr{cursor:pointer}
.ea-tr:hover td{background:color-mix(in srgb,var(--navy-050) 40%,transparent)}
.ea-ti{font-weight:600;color:var(--ink)}
.ea-no{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.ea-dt{font-family:var(--mono);font-size:11.5px;color:var(--slate-2)}
.ea-empty{text-align:center;color:var(--slate-2);padding:22px}
/* 상태 배지 */
.ea-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);white-space:nowrap;background:var(--soft);color:var(--slate)}
.ea-st-draft{background:var(--soft);color:var(--slate-2)}
.ea-st-sub{background:var(--gold-050);color:var(--gold)}
.ea-st-prog{background:var(--indigo-050);color:var(--indigo)}
.ea-st-ok{background:color-mix(in srgb,#2E9E6B 16%,transparent);color:#2E9E6B}
.ea-st-rej{background:var(--red-050);color:var(--red)}
.ea-st-wd{background:var(--soft);color:var(--slate-2)}
.ea-mine{margin-left:6px;font-size:10px;font-weight:700;background:var(--navy);color:#fff;border-radius:var(--r-sm);padding:1px 6px}
:root[data-theme="dark"] .ea-mine{color:#0d1220}
/* 상세 모달 */
.ea-modal{position:fixed;inset:0;z-index:1000;background:rgba(10,16,30,.5);display:flex;align-items:center;justify-content:center;padding:24px}
.ea-modal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.3));width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column}
.ea-modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ea-modal-h b{font-size:15px;color:var(--ink)}
.ea-modal-x{width:30px;height:30px;border:none;background:transparent;border-radius:50%;cursor:pointer;color:var(--slate-2);display:inline-flex;align-items:center;justify-content:center}
.ea-modal-x:hover{background:var(--soft);color:var(--ink)}
.ea-modal-b{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.ea-modal-f{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line)}
.ea-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--slate-2)}
.ea-meta b{color:var(--ink);font-weight:600}
.ea-content{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.ea-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px}
.ea-kvr{display:flex;flex-direction:column;gap:2px}
.ea-kvr .k{font-size:11px;color:var(--slate-2)}
.ea-kvr .v{font-size:13px;font-weight:600;color:var(--ink)}
.ea-json{font-family:var(--mono);font-size:11.5px;color:var(--slate);white-space:pre-wrap;margin:0}
/* 결재상태 요약 */
.ea-flow{display:flex;flex-direction:column;gap:6px}
.ea-fl{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.ea-fl-approved,.ea-fl-agreed{border-color:color-mix(in srgb,#2E9E6B 40%,var(--line))}
.ea-fl-rejected{border-color:color-mix(in srgb,var(--red) 45%,var(--line));background:var(--red-050)}
.ea-fl-wait{background:var(--soft)}
.ea-fl-av{width:24px;height:24px;flex:0 0 auto;border-radius:var(--r-sm);font-size:10px}
.ea-fl-nm{flex:1;font-size:12.5px;font-weight:600;color:var(--ink)}
.ea-fl-st{font-size:11px;font-weight:700;padding:1px 8px;border-radius:var(--r-sm);background:var(--soft);color:var(--slate-2)}
.ea-fl-st.st-approved,.ea-fl-st.st-agreed{background:color-mix(in srgb,#2E9E6B 16%,transparent);color:#2E9E6B}
.ea-fl-st.st-rejected{background:var(--red-050);color:var(--red)}
.ea-fl-st.st-wait{background:var(--gold-050);color:var(--gold)}
.ea-fl-dt{font-family:var(--mono);font-size:10.5px;color:var(--slate-2)}
.ea-fl-op{flex-basis:100%;font-size:11.5px;color:var(--slate);padding-left:33px}
/* 의견 */
.ea-comments{display:flex;flex-direction:column;gap:8px}
.ea-cm{background:var(--soft);border-radius:var(--r-sm);padding:8px 10px;font-size:12.5px}
.ea-cm b{color:var(--ink)}
.ea-cm-dt{font-family:var(--mono);font-size:10.5px;color:var(--slate-2);margin-left:6px}
.ea-cm>div{margin-top:3px;color:var(--slate)}
.ea-cm-add{display:flex;gap:8px}
.ea-opin{flex:1;min-height:38px;max-height:80px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-family:var(--font);font-size:12.5px;padding:8px 10px;resize:vertical}
@media (max-width:860px){
  .ea-form{grid-template-columns:1fr}
  .ea-kv{grid-template-columns:1fr}
  .ea-modal{padding:0;align-items:stretch}
  .ea-modal-card{max-width:none;max-height:100vh;border-radius:0}
  .ea-tabs{width:100%;overflow-x:auto}
}

/* ══════════ 전자결재 기안작성(EA1010 구성 · DAK 디자인) ══════════ */
.eac-body{background:var(--bg);color:var(--ink);font-family:var(--font);margin:0}
.eac-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:12px 18px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.eac-bar .sp{flex:1}
.eac-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.eac-title svg{width:17px;height:17px;color:var(--navy)}
.eac-title .eac-sub{font-size:11.5px;font-weight:600;color:var(--slate-2);margin-left:2px}
.eac-wrap{padding:16px 18px 40px;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.eac-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.eac-sech{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.eac-cnt{font-size:11px;font-weight:600;color:var(--slate-2)}
.eac-hint{font-size:11px;color:var(--slate-2);font-weight:500}
.eac-row2{display:flex;align-items:center;gap:8px}
.eac-row2.wrap{flex-wrap:wrap;row-gap:8px}
.eac-lb{font-size:12px;font-weight:600;color:var(--slate);white-space:nowrap}
.eac-in{height:34px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);
  font-family:var(--font);font-size:13px;padding:0 10px;min-width:120px;box-sizing:border-box}
.eac-in.wide{min-width:220px} .eac-in.full{width:100%;min-width:0}
.eac-in:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.eac-ta{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
  color:var(--ink);font-family:var(--font);font-size:13px;padding:9px 11px;resize:vertical}
.eac-ta:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* 결재선 */
.eac-lineops{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.eac-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.eac-cards{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.eac-card{position:relative;min-width:128px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--soft);padding:8px 10px}
.eac-card.draft{border-color:var(--navy);background:var(--navy-050)}
.eac-card.handler{border-color:var(--gold);background:var(--gold-050)}
.eac-cn{font-size:10px;font-weight:700;color:var(--slate-2);letter-spacing:.02em}
.eac-cnm{font-size:13px;font-weight:700;margin-top:2px}
.eac-cds{font-size:10.5px;color:var(--slate-2);margin-top:1px}
.eac-cx{position:absolute;top:3px;right:4px;border:0;background:transparent;color:var(--slate-2);
  font-size:14px;line-height:1;cursor:pointer;padding:2px}
.eac-cx:hover{color:var(--red)} .eac-cx.sm{position:static;font-size:13px}
.eac-addcard{width:98px;min-width:98px;align-self:stretch;border:1px dashed var(--slate-2);border-radius:var(--r-sm);
  background:transparent;color:var(--slate);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;padding:6px}
.eac-addcard:hover{border-color:var(--navy);color:var(--navy)}
.eac-handler{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.eac-hlb{font-size:12px;font-weight:700;margin-bottom:7px;display:flex;gap:6px;align-items:center}
.eac-chk{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;cursor:pointer}
.eac-chk input{width:15px;height:15px;accent-color:var(--gold)}
/* 문서정보표 */
.eac-meta{width:100%;border-collapse:collapse;font-size:12.5px}
.eac-meta th,.eac-meta td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.eac-meta th{background:var(--soft);color:var(--slate);font-weight:700;width:110px;white-space:nowrap}
.eac-meta td.muted{color:var(--slate-2)}
/* 항목담기 카트 */
.eac-timebox{display:inline-flex;align-items:center;gap:8px}
.eac-timebox[hidden]{display:none}   /* [hidden]이 display에 덮이지 않게 — 시간항목(연장·특근)일 때만 노출 */
.eac-handler[hidden]{display:none}
.eac-cartwrap{margin-top:10px}
.eac-cart{width:100%;border-collapse:collapse;font-size:12.5px}
.eac-cart th{background:var(--soft);color:var(--slate);font-weight:700;font-size:11.5px;padding:7px 9px;
  text-align:left;border-bottom:1px solid var(--line)}
.eac-cart td{padding:7px 9px;border-bottom:1px solid var(--line)}
.eac-cart tr:last-child td{border-bottom:0}
.eac-empty{color:var(--slate-2);text-align:center;padding:16px !important}
/* 첨부/참조 행 */
.eac-rows{display:flex;flex-direction:column;gap:0}
.eac-r{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.eac-r:last-child{border-bottom:0}
.eac-rl{width:76px;flex:0 0 76px;font-size:12px;font-weight:700;color:var(--slate);padding-top:6px}
.eac-rb{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eac-chips{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.eac-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  background:var(--navy-050);color:var(--navy);border-radius:var(--r-sm);padding:3px 8px}
.eac-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}
/* 사원 선택 모달 */
.eac-modal{position:fixed;inset:0;background:rgba(10,14,22,.5);display:flex;align-items:center;justify-content:center;z-index:60}
.eac-mbox{width:min(480px,92vw);max-height:78vh;display:flex;flex-direction:column;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow)}
.eac-mh{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700}
.eac-mx{border:0;background:transparent;color:var(--slate-2);font-size:18px;cursor:pointer;line-height:1}
.eac-mlist{overflow:auto;display:flex;flex-direction:column;gap:2px}
.eac-mi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:transparent;
  border-radius:var(--r-sm);padding:7px 9px;cursor:pointer;text-align:left;font-family:var(--font)}
.eac-mi:hover{background:var(--soft)}
.eac-mi b{font-size:13px;color:var(--ink)} .eac-mi span{font-size:11px;color:var(--slate-2)}
/* 모바일 = 전체화면 */
@media (max-width:860px){
  .eac-bar{padding:10px 12px;flex-wrap:wrap}
  .eac-bar .btn2{font-size:12px;padding:4px 8px}
  .eac-wrap{padding:12px 12px 32px}
  .eac-meta th{width:84px}
  .eac-r{flex-direction:column;gap:6px} .eac-rl{width:auto;flex:none;padding-top:0}
}
@media print{ .eac-bar,.eac-addcard,.eac-cx,.eac-lineops{display:none !important} .eac-wrap{max-width:none} }

/* ══════════ 전자결재 결재함(EA1020/1021/1022 구성 · DAK 디자인) ══════════ */
.eab-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:2px 0 12px}
.eab-tab{position:relative;border:0;background:transparent;color:var(--slate);font-family:var(--font);
  font-size:13px;font-weight:600;padding:9px 14px;cursor:pointer}
.eab-tab.on{color:var(--navy)} .eab-tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--gold)}
.eab-cnt{margin-left:5px;font-size:10.5px;font-weight:800;color:var(--red)}
.eab-search{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.eab-all{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--slate);cursor:pointer}
.eab-all[hidden]{display:none}
.eab-all input{width:14px;height:14px;accent-color:var(--gold)}
.eab-table{width:100%;border-collapse:collapse;font-size:12.5px}
.eab-table th{background:var(--soft);color:var(--slate);font-weight:700;font-size:11.5px;text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.eab-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.eab-table tr:last-child td{border-bottom:0}
.eab-table .mono{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.eab-t{min-width:240px}
.eab-title{border:0;background:transparent;color:var(--ink);font-family:var(--font);font-size:12.5px;
  font-weight:700;cursor:pointer;padding:0;text-align:left}
.eab-title:hover{color:var(--navy);text-decoration:underline}
.eab-sub{font-size:10.5px;color:var(--slate-2);margin-top:2px}
.eab-role{display:inline-block;font-size:9.5px;font-weight:800;background:var(--navy-050);color:var(--navy);
  border-radius:var(--r-sm);padding:1px 5px;margin-right:5px;vertical-align:1px}
.eab-urg{display:inline-block;font-size:9.5px;font-weight:800;background:var(--red);color:#fff;
  border-radius:var(--r-sm);padding:1px 5px;margin-right:5px;vertical-align:1px}
.eab-bd{display:inline-block;font-size:10px;font-weight:700;border-radius:var(--r-sm);padding:1px 6px;margin-right:3px}
.eab-bd.ref{background:var(--indigo-050);color:var(--indigo)} .eab-bd.recv{background:var(--gold-050);color:var(--gold)}
.eab-st{font-size:11.5px;font-weight:700;color:var(--slate)}
.eab-st.ok{color:var(--green)} .eab-st.bad{color:var(--red)} .eab-st.warn{color:var(--gold)} .eab-st.muted{color:var(--slate-2)}
.eab-a{white-space:nowrap;text-align:right}
.eab-b{border:1px solid var(--line);background:var(--panel);color:var(--ink);font-family:var(--font);
  font-size:11.5px;font-weight:600;border-radius:var(--r-sm);padding:3px 8px;cursor:pointer;margin-left:4px}
.eab-b:hover{border-color:var(--navy);color:var(--navy)}
.eab-b.ok{color:var(--navy);border-color:var(--navy)} .eab-b.bad{color:var(--red);border-color:var(--red-050)}
/* 문서 상세 모달 */
.eab-doc{width:min(760px,94vw)}
.eab-doc .eac-meta{margin-bottom:4px}
.eab-sech{font-size:12px;font-weight:700;margin:12px 0 6px}
.eab-reason{font-size:12.5px;line-height:1.6;background:var(--soft);border-radius:var(--r-sm);padding:9px 11px;white-space:pre-wrap}
.eab-lines{display:flex;flex-direction:column;gap:4px}
.eab-line{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 9px;background:var(--soft);border-radius:var(--r-sm)}
.eab-line.done{background:color-mix(in srgb,var(--green-050) 60%,transparent)}
.eab-line.rej{background:var(--red-050)}
.eab-lt{font-size:10.5px;font-weight:800;color:var(--slate-2);min-width:42px}
.eab-ls{font-size:11px;font-weight:700;color:var(--slate)}
.eab-op{font-size:11px;color:var(--slate-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eab-lat{margin-left:auto;font-size:10.5px;color:var(--slate-2)}
.eab-docact{display:flex;gap:6px;justify-content:flex-end;margin-top:14px}
@media (max-width:860px){
  .eab-search{gap:4px} .eab-table th:nth-child(3),.eab-table td:nth-child(3){display:none}
  .eab-t{min-width:0}
}

/* ══════════ 전자결재 기준정보(EA1030/1040 구성 · DAK 디자인) ══════════ */
.eb-actions{display:flex;justify-content:flex-end;margin-top:12px}
.eb-filter{font-size:11px;color:var(--slate-2);max-width:260px}
.eb-form{display:flex;flex-direction:column;gap:9px;overflow:auto;max-height:60vh}
.eb-f{display:flex;flex-direction:column;gap:4px}
.eb-f>span{font-size:11.5px;font-weight:700;color:var(--slate)}
.eb-steps{display:flex;flex-wrap:wrap;gap:5px;min-height:26px;align-items:center}
.eb-srch{display:flex;flex-direction:column;gap:4px}

/* ══════════ 기안작성 결재선 카드 — 아바타 + 드래그 정렬 ══════════ */
/* 컴팩트: 사진(64px)은 유지하고 카드 폭·여백만 축소. 사진을 역할 배지 바로 아래로 붙임. */
.eac-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  width:98px;min-width:98px;padding:4px 5px 5px}
.eac-card .eac-cn{align-self:stretch;text-align:left;margin:0;line-height:1.15;font-size:9.5px}
.eac-cav{margin:0;line-height:0}
/* ★아바타 컨테이너 — .avatar 베이스는 position/overflow만 주므로 크기·모양·표시는 여기서 전부 지정.
   (display 없으면 span이 inline이라 width/height가 무시되어 사진이 19×26으로 찌그러짐) */
.eac-cav .avatar.eac-av{display:grid;place-items:center;flex:0 0 auto;
  width:64px;height:64px;min-width:64px;min-height:64px;border-radius:50%;
  background:var(--gold-050);color:var(--gold);font-size:22px;font-weight:700;overflow:hidden}
.eac-cav .avatar.eac-av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* 이름(작게) · 직책(더 작게) — 상태 라벨은 기안작성 화면에서 미표시 */
.eac-card .eac-cnm{font-size:12px;font-weight:700;color:var(--ink);line-height:1.2;margin-top:2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eac-card .eac-cds{font-size:10px;font-weight:500;color:var(--slate-2);line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eac-card.appr{cursor:grab}
.eac-card.appr:active{cursor:grabbing}
.eac-card.dragging{opacity:.45;outline:1px dashed var(--navy)}
.eac-card.drop-l{box-shadow:inset 3px 0 0 var(--gold)}
.eac-card.drop-r{box-shadow:inset -3px 0 0 var(--gold)}
/* ▲▼ 순서 버튼(모바일·접근성 폴백) — 데스크톱은 hover 시 노출 */
.eac-ord{position:absolute;left:3px;bottom:3px;display:flex;gap:1px;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.eac-card:hover .eac-ord,.eac-card:focus-within .eac-ord{opacity:1}
.eac-ob{border:1px solid var(--line);background:var(--panel);color:var(--slate);border-radius:var(--r-sm);
  font-size:8px;line-height:1;padding:2px 3px;cursor:pointer}
.eac-ob:hover{border-color:var(--navy);color:var(--navy)}
@media (max-width:860px){ .eac-ord{opacity:1} .eac-card,.eac-addcard{width:96px;min-width:96px}
  .eac-cav .avatar.eac-av{width:56px;height:56px;min-width:56px;min-height:56px;font-size:19px} }
/* 이름 옆 직급(ATT_EMP.JobGrade ← @PH_PY001A.U_JIGCOD → @PH_PY105B.U_HOBNAM) */
.eac-card .eac-cnm .g{font-weight:600;color:var(--navy)}
.eac-card.handler .eac-cnm .g{color:var(--gold)}
/* ══════════ 항목담기 대상자 자동완성(typeahead) ══════════ */
.eac-tgt{position:relative;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
/* 폭 축소 — 항목·일자·대상자·본인·비고·담기가 한 줄에 들어오도록 */
.eac-tgt #eacTarget{width:96px;min-width:96px;padding:0 8px}
.eac-tgt #eacTarget.ok{border-color:var(--gold);font-weight:700;color:var(--ink)}   /* 확정(사번 확보) */
.eac-tgt #eacTarget.bad{border-color:var(--red);color:var(--red)}                   /* 미확정 = 무효 */
.eac-tgtme{border:1px solid var(--line);background:var(--panel);color:var(--slate);border-radius:var(--r-sm);
  font-family:var(--font);font-size:11px;font-weight:700;padding:5px 8px;cursor:pointer;white-space:nowrap}
.eac-tgtme:hover{border-color:var(--gold);color:var(--gold)}
.eac-tgtdd{position:absolute;top:calc(100% + 4px);left:0;z-index:40;min-width:290px;max-height:264px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.eac-tgtdd[hidden]{display:none}
.eac-tgti{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:8px;width:100%;
  border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:var(--font);text-align:left;padding:6px 9px;cursor:pointer}
.eac-tgti:last-child{border-bottom:0}
.eac-tgti:hover{background:var(--navy-050)}
.eac-tgtdd .avatar.eac-tgtav{display:grid;place-items:center;width:26px;height:26px;min-width:26px;min-height:26px;
  border-radius:50%;background:var(--gold-050);color:var(--gold);font-size:10px;font-weight:700;overflow:hidden}
.eac-tgtdd .avatar.eac-tgtav .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.eac-tgtn{font-size:12.5px;font-weight:700;white-space:nowrap}
.eac-tgtn b{font-weight:600;color:var(--navy)}
.eac-tgtd{font-size:11px;color:var(--slate-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.eac-tgte{font-size:10.5px;color:var(--slate-2)}
.eac-tgtempty{padding:10px;font-size:11.5px;color:var(--slate-2);text-align:center}
/* ── 항목담기 한 줄 유지 ──
   최악 조합(연장/특근 = 시작·종료 시각까지 노출)에서도 [담기]가 다음 줄로 내려가지 않도록
   항목·일자·시각·대상자 폭을 함께 줄이고, 비고가 남는 폭을 흡수·축소하게 한다. */
#eacCart, .eac-cartwrap{clear:both}
#eacItem{width:96px;min-width:96px}
#eacDate{width:112px;min-width:112px;padding:0 6px}
.eac-timebox{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.eac-timebox .eac-in{width:78px;min-width:78px;padding:0 4px}
#eacNote{flex:1 1 70px;min-width:62px}
#eacAdd{flex:0 0 auto}

/* ══════════ 결재 현황 접기/펴기 — 펼침=카드 / 접힘=요약표 ══════════ */
.eac-lvtg{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel);
  color:var(--slate);border-radius:var(--r-sm);font-family:var(--font);font-size:11px;font-weight:700;
  padding:3px 9px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.eac-lvtg:hover{border-color:var(--navy);color:var(--navy)}
.eac-lvi{font-size:9px;line-height:1;color:var(--gold)}
/* 요약표 — 순서/유형/직급/성명/부서/상태/결재시간 */
.eac-ltab{width:100%;border-collapse:collapse;font-size:12px}
.eac-ltab th,.eac-ltab td{border:1px solid var(--line);padding:6px 9px;text-align:left;white-space:nowrap}
.eac-ltab th{background:var(--soft);color:var(--slate);font-weight:700;font-size:11px}
.eac-ltab td.c,.eac-ltab th.c{text-align:center;width:48px}
.eac-ltab td.nm{font-weight:700;color:var(--ink)}
.eac-ltab tbody tr:hover td{background:var(--soft)}
/* 유형 배지 — 기안=네이비, 결재=기본, 담당=골드 */
.eac-lty{display:inline-block;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1px 6px;font-size:10.5px;font-weight:700;color:var(--slate)}
.eac-lty.df{border-color:var(--navy);color:var(--navy);background:var(--navy-050)}
.eac-lty.hd{border-color:var(--gold);color:var(--gold);background:var(--gold-050)}
.eac-lfx{margin-left:6px;font-size:10px;font-weight:600;color:var(--slate-2)}
/* 상태 — 승인=골드, 반려=레드, 대기=기본 */
.eac-lst{font-size:11px;font-weight:700;color:var(--slate-2)}
.eac-lst.ok{color:var(--gold)} .eac-lst.bad{color:var(--red)}
#eacLineTab[hidden],#eacLineOps[hidden],#eacCards[hidden]{display:none}
@media print{ .eac-lvtg{display:none} }

/* ══════════ 문서 상세(조회 모드) — 기안작성 레이아웃 재사용 + 진행상태 표기 ══════════ */
/* 입력폼 자리에 들어가는 읽기전용 텍스트 */
.ev-static{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;font-size:13px;
  font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.ev-static.grow{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 결재선 카드 진행상태 — 승인=골드테두리, 반려=레드테두리 */
.eac-card.done{border-color:var(--gold);background:var(--gold-050)}
.eac-card.rej{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}
.eac-card .eac-cst{align-self:stretch;margin-top:2px;font-size:9.5px;font-weight:700;line-height:1.3;
  color:var(--slate-2);border-top:1px solid var(--line);padding-top:2px}
.eac-card .eac-cst.ok{color:var(--gold)}
.eac-card .eac-cst.bad{color:var(--red)}
/* 결재 의견 목록 */
.ev-ops{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ev-op{display:flex;align-items:baseline;gap:8px;font-size:12px;padding:5px 8px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.ev-op b{font-weight:700;color:var(--ink);white-space:nowrap}
.ev-opst{font-size:10.5px;font-weight:700;white-space:nowrap}
.ev-opst.ok{color:var(--gold)} .ev-opst.bad{color:var(--red)}
.ev-optx{flex:1 1 auto;min-width:0;color:var(--slate);word-break:break-all}
.ev-opat{font-size:10.5px;color:var(--slate-2);white-space:nowrap}
@media print{ .eac-bar{display:none} }

/* 첨부 업로드 칩·드롭존 */
.eac-chip i{font-style:normal;font-size:10px;color:var(--slate-2);margin-left:2px}
.eac-chip.up{opacity:.75}
.eac-chip.dl,.eac-chip.lnk{border:0;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:4px}
.eac-chip.dl svg,.eac-chip.lnk svg{width:12px;height:12px}
.eac-chip.dl:hover,.eac-chip.lnk:hover{background:var(--navy);color:#fff}
.eac-chip.lnk.off{opacity:.55;cursor:not-allowed}
.eac-chip.lnk.off:hover{background:var(--soft);color:var(--slate)}
.eac-chip.dl:hover i,.eac-chip.lnk:hover i{color:#fff}
.eac-r.drop{background:var(--navy-050);border-radius:var(--r-sm);outline:1px dashed var(--navy)}
.spin.sm{width:11px;height:11px;border-width:2px;margin-right:2px}

/* ══════════════════════════════════════════════════════════════════════════
   전산(IT관리) — 앱스스크립트 IT자산관리시스템 이식 / DAK 디자인
   구성은 원본(요약카드·필터·목록·상세탭), 색은 네이비·골드·레드 팔레트만 사용.
   ══════════════════════════════════════════════════════════════════════════ */

/* 상단 요약 카드 */
.it-sum{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.it-card{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);padding:11px 13px}
.it-card .it-cl{font-size:11px;font-weight:600;color:var(--slate-2);margin-bottom:5px}
.it-card .it-cn{font-size:21px;font-weight:800;color:var(--ink);line-height:1}
.it-card.all .it-cn{color:var(--navy)}
.it-card.ok .it-cn{color:var(--gold)}
.it-card.bad .it-cn{color:var(--red)}
.it-card.warn .it-cn{color:var(--amber,#c98a1b)}
@media (max-width:1200px){ .it-sum{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .it-sum{grid-template-columns:repeat(2,1fr)} }

/* 검색 필터 줄 */
.it-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.it-filter #itQ{flex:1 1 260px;min-width:200px}
.it-chk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--slate);white-space:nowrap}

/* 목록 표 */
.it-table th.num,.it-table td.num{text-align:right}
.it-table td.it-nm{max-width:280px}
.it-link{border:0;background:transparent;color:var(--ink);font-family:var(--font);font-size:13px;
  font-weight:700;cursor:pointer;padding:0;text-align:left}
.it-link:hover{color:var(--navy);text-decoration:underline}
.it-cnt{margin-top:8px;font-size:11.5px;color:var(--slate-2);text-align:right}

/* 상태 뱃지 — 원본 12상태를 DAK 팔레트로 */
.it-st{display:inline-block;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1px 7px;font-size:10.5px;font-weight:700;white-space:nowrap;color:var(--slate)}
.it-st.ok{border-color:var(--gold);color:var(--gold);background:var(--gold-050)}
.it-st.wait{border-color:var(--navy);color:var(--navy);background:var(--navy-050)}
.it-st.warn{border-color:var(--amber,#c98a1b);color:var(--amber,#c98a1b)}
.it-st.bad{border-color:var(--red);color:var(--red);background:var(--red-050)}
.it-st.muted{color:var(--slate-2)}

/* 상세 모달 — 탭 */
.it-detail,.it-form,.it-assign{width:min(920px,94vw)}
.it-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px}
.it-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--slate-2);
  font-family:var(--font);font-size:12.5px;font-weight:700;padding:7px 12px;cursor:pointer}
.it-tab:hover{color:var(--ink)}
.it-tab.on{color:var(--navy);border-bottom-color:var(--gold)}
.it-tab i{font-style:normal;font-size:10px;color:var(--slate-2);margin-left:3px}
.it-pane{display:none}
.it-pane.on{display:block}

/* 감가상각 */
.it-dep{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:center}
.it-dep>div{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);padding:9px 11px}
.it-dep span{display:block;font-size:10.5px;color:var(--slate-2);margin-bottom:3px}
.it-dep b{font-size:15px;font-weight:800;color:var(--ink)}
.it-dep b.gold{color:var(--gold)}
.it-depbar{grid-column:1/-1;position:relative;height:20px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft);overflow:hidden;padding:0}
.it-depbar i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--navy) 30%,transparent)}
.it-depbar em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:700;color:var(--ink)}

/* 이력 */
.it-hist{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto}
.it-hrow{display:grid;grid-template-columns:88px 1fr auto auto;gap:9px;align-items:baseline;
  font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.it-hev{font-weight:700;color:var(--navy);white-space:nowrap}
.it-hv{color:var(--slate);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it-hv i{font-style:normal;color:var(--gold);margin:0 4px}
.it-hu{font-size:11px;color:var(--slate-2);white-space:nowrap}
.it-ht{font-size:10.5px;color:var(--slate-2);white-space:nowrap}

/* 등록/수정 폼 */
.it-grid{display:grid;grid-template-columns:100px 1fr 100px 1fr;gap:8px 10px;align-items:center;margin-bottom:6px}
.it-grid>label{font-size:12px;font-weight:600;color:var(--slate);white-space:nowrap}
.it-grid>input,.it-grid>select{min-width:0;width:100%}
@media (max-width:760px){ .it-grid{grid-template-columns:92px 1fr} }
.it-acts{display:flex;gap:6px;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.it-cur{font-size:12.5px;color:var(--slate);margin-bottom:10px}
.it-cur b{color:var(--ink)}

/* 모바일 '내 IT자산' */
.it-mylist{display:flex;flex-direction:column;gap:8px}
.it-mycard{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);padding:11px 13px}
.it-myh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.it-myh b{font-size:13.5px;font-weight:700;color:var(--ink)}
.it-myb{font-size:11.5px;color:var(--slate-2);line-height:1.5}

/* 공용/장비 계정 뱃지(사번 없는 배정자) */
.it-shared{display:inline-block;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 5px;font-size:9.5px;font-weight:700;color:var(--slate-2);margin-left:4px;vertical-align:1px}

/* ══════════ 전산 모듈 — 모바일(≤860px) ══════════
   원칙: 넓은 표는 카드형 리스트로 전환 / 모달은 풀스크린 / 터치 타깃 확보 / 가로 스크롤 금지. */
@media (max-width:860px){
  /* 요약 카드 2열 */
  .it-sum{grid-template-columns:repeat(2,1fr);gap:8px}
  .it-card{padding:9px 11px}
  .it-card .it-cn{font-size:18px}

  /* 필터 — 세로 적층 + 터치 높이 */
  .it-filter{flex-direction:column;align-items:stretch;gap:6px}
  .it-filter .eac-in{width:100%;height:40px}
  .it-filter #itQ{flex:none;min-width:0}
  .it-filter .btn2{height:40px;justify-content:center}
  .it-chk{height:40px}

  /* ★ 표 → 카드형 리스트 전환 (thead 숨기고 각 tr을 카드로) */
  .it-table thead{display:none}
  .it-table, .it-table tbody, .it-table tr, .it-table td{display:block;width:auto}
  .it-table{border-collapse:separate}
  .it-table tr{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
    padding:10px 12px;margin-bottom:8px}
  .it-table td{border:0;padding:2px 0;text-align:left !important}
  .it-table td:empty{display:none}
  /* 라벨을 각 셀 앞에 붙여 의미 유지 */
  .it-table td::before{content:attr(data-l);display:inline-block;min-width:64px;
    font-size:10.5px;font-weight:600;color:var(--slate-2);margin-right:6px}
  .it-table td.it-nm::before{display:none}
  .it-table td.it-nm{margin-bottom:4px}
  .it-table td.it-nm .it-link{font-size:14px}
  /* 가로 스크롤 금지 — 컨테이너 내부에서만 */
  .gwrap{overflow-x:hidden}

  /* 모달 풀스크린 */
  .eac-modal .eac-mbox.it-detail,
  .eac-modal .eac-mbox.it-form,
  .eac-modal .eac-mbox.it-assign{
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;margin:0;display:flex;flex-direction:column;overflow-y:auto}
  .eac-mbox.it-detail .eac-mh,.eac-mbox.it-form .eac-mh,.eac-mbox.it-assign .eac-mh{
    position:sticky;top:0;z-index:5;background:var(--panel);padding-top:12px}
  .eac-mbox.it-detail .eac-mx,.eac-mbox.it-form .eac-mx,.eac-mbox.it-assign .eac-mx{
    width:38px;height:38px;font-size:22px}
  /* 상세 탭 — 가로 스크롤 대신 줄바꿈 */
  .it-tabs{flex-wrap:wrap}
  .it-tab{padding:9px 10px;font-size:12px}
  /* 문서정보표 2열 → 1열 */
  .it-detail .eac-meta,.it-detail .eac-meta tbody,.it-detail .eac-meta tr,
  .it-detail .eac-meta th,.it-detail .eac-meta td{display:block;width:auto}
  .it-detail .eac-meta th{border-bottom:0;background:var(--soft);font-size:11px}
  .it-detail .eac-meta td{border-top:0;margin-bottom:6px}
  /* 감가상각 3열 → 1열 */
  .it-dep{grid-template-columns:1fr}
  /* 이력 행 — 2줄 배치 */
  .it-hrow{grid-template-columns:1fr auto;row-gap:2px}
  .it-hev{grid-column:1/-1}
  .it-ht{grid-column:2}
  /* 폼 그리드 1열 + 터치 높이 */
  .it-grid{grid-template-columns:1fr;gap:4px}
  .it-grid>label{margin-top:6px}
  .it-grid>input,.it-grid>select{height:42px}
  /* 액션바 하단 고정 */
  .it-acts{position:sticky;bottom:0;background:var(--panel);padding:10px 0;margin-top:auto}
  .it-acts .btn2{flex:1;height:44px;justify-content:center}
  /* 대상자 자동완성 드롭다운 폭 */
  .eac-tgt{width:100%}
  .eac-tgt #eacTarget,.eac-tgt #agQ{width:100%;min-width:0;height:42px}
  .eac-tgtdd{width:100%;min-width:0;max-height:50dvh}
  .eac-tgti{padding:10px 9px}
}
/* 모바일 '내 IT자산' 카드 — 버튼으로 바뀌었으므로 터치 스타일 보정 */
.it-mycard{display:block;width:100%;text-align:left;font-family:var(--font);cursor:pointer}
.it-mycard:hover{border-color:var(--navy)}
.it-myb svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
/* 처분신청 경고 문구 */
.it-warn{margin-top:10px;padding:8px 11px;border:1px solid var(--red);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--red) 7%,transparent);font-size:11.5px;color:var(--slate)}
.it-warn b{color:var(--red)}
/* 요청 유형 배지 */
.it-ty{display:inline-block;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1px 6px;font-size:10.5px;font-weight:700;color:var(--navy);background:var(--navy-050);white-space:nowrap}

/* ══════════ 전산 P5 — 자산실사 ══════════ */
.iv-list{display:flex;flex-direction:column;gap:10px}
.iv-card{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);padding:12px 14px}
.iv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.iv-h b{font-size:14px;font-weight:800;color:var(--ink)}
.iv-meta{font-size:11.5px;color:var(--slate-2);margin-bottom:8px}
.iv-bar{position:relative;height:22px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--soft);overflow:hidden;margin-bottom:9px}
.iv-bar i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--gold) 34%,transparent)}
.iv-bar em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:700;color:var(--ink)}
.iv-acts{display:flex;gap:6px;flex-wrap:wrap}
/* 스캔 입력 박스 */
.iv-scan{border:1px solid var(--gold);border-radius:var(--r-sm);background:var(--gold-050);
  padding:11px 13px;margin-bottom:12px}
.iv-scan .eac-sech{margin-bottom:8px}
.iv-last{margin-top:8px;font-size:12px;min-height:18px}
.iv-last .ok{color:var(--gold);font-weight:700}
.iv-last .bad{color:var(--red);font-weight:700}
.iv-last svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
@media (max-width:860px){
  .iv-scan .eac-row2{flex-direction:column;align-items:stretch}
  .iv-scan .eac-in,.iv-scan .btn2{width:100%;height:44px}
  .iv-scan #scId{font-size:16px}   /* iOS 자동 확대 방지 */
  .iv-acts .btn2{flex:1;height:40px;justify-content:center}
}

/* ══════════ 전산 P7 — 헬프데스크 ══════════ */
.hd-star{color:var(--gold);letter-spacing:1px;font-size:12px}
/* 방문 예약 슬롯 */
.hd-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-top:8px}
.hd-slot{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-family:var(--font);
  font-size:12.5px;font-weight:700;padding:7px 4px;cursor:pointer}
.hd-slot i{font-style:normal;font-size:10px;font-weight:600;color:var(--slate-2)}
.hd-slot:hover:not([disabled]){border-color:var(--navy)}
.hd-slot.on{border-color:var(--gold);background:var(--gold-050);color:var(--gold)}
.hd-slot[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
/* 처리 이력(댓글) */
.hd-cmts{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;margin-bottom:10px}
.hd-cmt{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);padding:8px 10px}
.hd-cmt.internal{border-color:var(--gold);background:var(--gold-050)}
.hd-cmt-h{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-bottom:3px}
.hd-cmt-h b{font-weight:700;color:var(--ink)}
.hd-chg{font-size:10.5px;font-weight:700;color:var(--navy);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 5px}
.hd-cmt-b{font-size:12.5px;color:var(--slate);line-height:1.5;white-space:pre-wrap}
/* 만족도 세부 */
.hd-satgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}
.hd-satgrid>div{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);padding:7px 9px;text-align:center}
.hd-satgrid span{display:block;font-size:10.5px;color:var(--slate-2);margin-bottom:2px}
.hd-satgrid b{font-size:14px;font-weight:800;color:var(--gold)}
.hd-satform{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.hd-satrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);padding:8px 11px}
.hd-satrow>span:first-child{font-size:12.5px;font-weight:600;color:var(--ink)}
.hd-stars button{border:0;background:transparent;color:var(--line);font-size:22px;line-height:1;
  cursor:pointer;padding:0 2px}
.hd-stars button.on{color:var(--gold)}
@media (max-width:860px){
  .hd-satgrid{grid-template-columns:repeat(2,1fr)}
  .hd-slots{grid-template-columns:repeat(3,1fr)}
  .hd-slot{padding:10px 4px}
  .hd-stars button{font-size:26px;padding:0 4px}
  .hd-cmts{max-height:none}
}

/* ══════════ 공용 차트 — DAK 팔레트(네이비/골드), 다크·라이트 자동, 가로스크롤 없음 ══════════ */
.chart-empty{padding:24px;text-align:center;font-size:12px;color:var(--slate-2)}
/* 도넛 */
.chart-donut{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chart-donut svg{width:168px;height:168px;flex:0 0 auto}
.chart-donut .c-total{font-size:22px;font-weight:800;fill:var(--ink);text-anchor:middle;
  font-family:var(--font-mono,var(--font))}
.chart-donut .c-unit{font-size:10px;fill:var(--slate-2);text-anchor:middle}
.chart-legend{list-style:none;margin:0;padding:0;flex:1 1 180px;min-width:0;
  display:flex;flex-direction:column;gap:3px;max-height:170px;overflow-y:auto}
.chart-legend.inline{flex-direction:row;gap:14px;max-height:none;margin-top:4px}
.chart-legend li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--slate)}
.chart-legend .ck{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.chart-legend .ck.line{height:3px;border-radius:2px}
.chart-legend .cn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-legend b{font-weight:700;color:var(--ink);font-size:12px}
.chart-legend em{font-style:normal;font-size:10.5px;color:var(--slate-2);min-width:38px;text-align:right}
/* 가로 막대 */
.chart-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.chart-bars li{display:grid;grid-template-columns:minmax(80px,34%) 1fr auto;align-items:center;gap:8px}
.chart-bars .bn{font-size:11.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-bars .bt{height:16px;border-radius:var(--r-sm);background:var(--soft);
  border:1px solid var(--line);overflow:hidden}
.chart-bars .bt i{display:block;height:100%}
.chart-bars b{font-size:11.5px;font-weight:700;color:var(--ink);min-width:44px;text-align:right}
/* 추이(세로 막대 + 선) */
.chart-trend svg{width:100%;height:220px;display:block}
.chart-trend .c-grid{stroke:var(--line);stroke-width:1}
.chart-trend .c-axis{font-size:10px;fill:var(--slate-2)}

/* ══════════ 전산 P8 — 보고서 레이아웃 ══════════ */
.rp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.rp-card{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);padding:13px 15px;min-width:0}
.rp-card.wide{grid-column:1/-1}
.rp-card h3{margin:0 0 10px;font-size:12.5px;font-weight:800;color:var(--ink)}
.rp-kv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rp-kv li{display:flex;justify-content:space-between;align-items:center;font-size:12px;
  border-bottom:1px solid var(--line);padding-bottom:5px}
.rp-kv li:last-child{border-bottom:0}
.rp-kv span{color:var(--slate)}
.rp-kv b{font-weight:800;color:var(--navy)}
/* 상각률 미니바 */
.rp-pct{position:relative;display:block;height:16px;min-width:64px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft);overflow:hidden}
.rp-pct i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--gold) 40%,transparent)}
.rp-pct em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:10px;font-weight:700;color:var(--ink)}
@media (max-width:860px){
  .rp-grid{grid-template-columns:1fr}
  .chart-donut{justify-content:center}
  .chart-donut svg{width:150px;height:150px}
  .chart-legend{flex:1 1 100%;max-height:none}
  .chart-bars li{grid-template-columns:minmax(70px,40%) 1fr auto}
  .chart-trend svg{height:190px}
}

/* ══════════ 전산 — 자산검색 셋트(공용) ══════════
   자산을 고르는 모든 화면이 쓰는 한 벌: 입력창(자동완성) + QR 스캔 버튼.
   후보 한 줄은 2단 — 위: 자산명·자산번호 / 아래: 사용자·위치·상태 */
.apk{position:relative;display:block;min-width:0}
.apk-row{display:flex;gap:6px;align-items:stretch}
.apk-row .apk-q{flex:1 1 auto;min-width:0}
.apk-scan{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  color:var(--slate-2);cursor:pointer}
.apk-scan:hover{border-color:var(--brand);color:var(--brand)}
.apk-scan svg{width:17px;height:17px}
.apk-dd{max-height:290px}
.apk-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  border:0;background:transparent;border-radius:var(--r-sm);padding:7px 9px;cursor:pointer;
  text-align:left;font-family:var(--font)}
.apk-i:hover{background:var(--soft)}
.apk-l1{display:flex;align-items:baseline;gap:8px;width:100%;min-width:0}
.apk-l1 b{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apk-id{flex:0 0 auto;font-size:11.5px;color:var(--slate-2)}
.apk-l2{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--slate-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.apk-l2 i{opacity:.45;font-style:normal}
.apk-l2 em{font-style:normal}
.apk-sh{color:var(--gold);font-weight:700}
.apk-none{opacity:.6}
/* 모바일이 QR 스캔의 주 사용처 — 입력창·버튼을 터치 크기(44px)로 키운다 */
@media (max-width:860px){
  .apk-row .apk-q, .apk-scan{min-height:44px}
  .apk-scan{width:48px}
  .apk-scan svg{width:20px;height:20px}
  .apk-i{padding:10px 9px}
  .apk-l1 b{font-size:14px}
  .apk-l2{font-size:12px}
}

/* ══════════ 전산 — QR 카메라 스캔 오버레이 ══════════ */
body.qs-open{overflow:hidden}
.qs{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:#0b0f16;color:#fff}
.qs-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.12)}
.qs-t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.qs-t svg{width:18px;height:18px}
.qs-bar .btn2{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.qs-bar .btn2:hover{background:rgba(255,255,255,.18)}
.qs-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qs-video{width:100%;height:100%;object-fit:cover;display:block}
/* 조준 사각형 — 실제 판독 영역(짧은 변의 80%)과 같은 크기 */
.qs-frame{position:absolute;width:min(80vmin,80%);aspect-ratio:1;pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45);border-radius:12px}
.qs-frame i{position:absolute;width:30px;height:30px;border:3px solid var(--gold,#C49B3A)}
.qs-frame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.qs-frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.qs-frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.qs-frame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.qs-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.12)}
.qs-msg{flex:1;min-width:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.85)}
.qs-msg.bad{color:#ff9b9b}
.qs-foot .btn2{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
@media (max-width:860px){ .qs-bar,.qs-foot{padding-left:12px;padding-right:12px} }

/* ══════════ 전산 — 공통 새창(팝업) 셸 ══════════
   전산의 등록/신청 폼과 목록 상세는 모달이 아니라 새창(it-popup.html)으로 연다.
   기존 모달 마크업(.eac-mbox)을 그대로 재사용하되, 창 전체를 쓰도록 껍데기만 벗긴다. */
.itw{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.itw-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.itw-t{display:flex;align-items:center;gap:8px;min-width:0;font-weight:800;font-size:15px}
.itw-t .sub{font-weight:600;font-size:12px;color:var(--slate-2)}
.itw-body{flex:1;padding:18px}
.itw-body .eac-mbox{width:auto;max-width:none;max-height:none;padding:0;
  border:0;border-radius:0;box-shadow:none;background:transparent}
.itw-body .eac-mbox > .eac-mh{display:none}   /* 제목은 itw-bar가 대신한다 */
.itw-body .it-acts{position:sticky;bottom:0;background:var(--bg);padding:12px 0 0;margin-top:4px}
@media (max-width:860px){
  .itw-bar{padding:10px 12px}
  .itw-body{padding:12px}
  .itw-body .it-acts{flex-wrap:wrap}
  .itw-body .it-acts .btn2{flex:1 1 auto}
}

/* ══════════ 전산 — 자산라벨인쇄 ══════════ */
/* 선택 화면(원본 #label-print-screen: 카테고리·상태·검색 필터 + 전체선택/선택해제 + 라벨인쇄) */
.lb-filter{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.lb-fld{display:flex;flex-direction:column;gap:6px;min-width:150px}
.lb-fld.grow{flex:1 1 220px}
.lb-fld .eac-in{width:100%}
.lb-fbtn{display:flex;gap:8px;flex-shrink:0}
.lb-actbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lb-actbar .eac-cnt{white-space:nowrap}
.lb-pager{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:12px}
.lb-pg{border:1px solid var(--line);background:var(--card);color:var(--fg);
  border-radius:6px;padding:5px 10px;font-size:12.5px;cursor:pointer;min-width:32px}
.lb-pg:hover{border-color:var(--brand)}
.lb-pg.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

/* ── 라벨 규격 — 앱스스크립트 printLabelsOnly() 원문 그대로 ──────────────
   .label { width:96mm; height:65mm; border:2px solid #000; border-radius:3mm;
            padding:3.5mm; display:flex; gap:3.5mm; position:relative }
   색만 DAK 아이덴티티(원본 라벨명 #1e40af → 네이비 #1B355E, 로고=사내 골드 로고).
   화면에서도 mm 실척으로 그려 인쇄물과 1:1(WYSIWYG)이 되게 한다. */
.lb-page{display:grid;grid-template-columns:repeat(2,1fr);gap:3mm;width:200mm;box-sizing:border-box}
.lb-page + .lb-page{border-top:2px dashed #ccc;margin-top:15px;padding-top:15px}
.lb-label{position:relative;box-sizing:border-box;
  width:96mm;height:65mm;
  border:2px solid #000;border-radius:3mm;
  padding:3.5mm;display:flex;gap:3.5mm;
  background:#fff !important;color:#000 !important;
  font-family:var(--font);overflow:hidden;
  break-inside:avoid;page-break-inside:avoid}
.lb-qr{flex:0 0 auto;width:25mm;height:25mm;border:1px solid #ccc;box-sizing:border-box}
.lb-qr svg{width:100%;height:100%;display:block}
.lb-info{flex:1;min-width:0;font-size:9pt;line-height:1.3;padding-top:0.5mm}
.lb-row{margin-bottom:1.5mm;display:flex;gap:1mm}
.lb-k{flex:0 0 18mm;font-weight:700;font-size:8.5pt;color:#1B355E}
.lb-v{flex:1 1 auto;min-width:0;font-size:9pt;color:#333;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-v.em{color:#1B355E;font-weight:800;letter-spacing:-0.01em}   /* 자산번호 = 네이비 강조 */
.lb-logo{position:absolute;bottom:1.5mm;left:2.5mm;height:9mm;width:auto;display:block}
.lb-corp{position:absolute;bottom:1.5mm;right:2.5mm;font-size:6pt;color:#999}

/* 라벨 미리보기 — mm 실척으로 그리고, 창이 좁을 때만 화면에서 축소해 보여준다(인쇄는 원래 크기) */
.lb-zwrap{overflow:hidden}
.lb-zoom{transform-origin:top left;width:200mm}

/* ── 인쇄: 라벨만 남기고 창 UI 제거. 원본 printLabelsOnly()의 @page 규격 그대로 ── */
@media print{
  @page{ size:A4; margin:14mm 5mm; }
  .itw-bar{display:none !important}
  .itw{min-height:0 !important;background:#fff !important}
  .itw-body{padding:0 !important;background:#fff !important}
  .lb-zwrap{overflow:visible !important;height:auto !important}
  .lb-zoom{transform:none !important;width:auto !important}
  .lb-page{width:auto !important;gap:3mm}
  .lb-page + .lb-page{border-top:0 !important;margin-top:0 !important;padding-top:0 !important;
    break-before:page;page-break-before:always}
}

@media (max-width:860px){
  .lb-filter{flex-direction:column;align-items:stretch;gap:10px}
  .lb-fld{min-width:0}
  .lb-fld.grow{flex:0 0 auto}    /* 세로 배치에서는 늘어나지 않게(빈 여백 방지) */
  .lb-fbtn button{flex:1}
  .lb-actbar{gap:8px}
  .lb-actbar .sp{display:none}
  .lb-actbar #lbPrint{flex:1 1 100%}
  .lbp-body{padding:12px}
}

/* ══════════════════ DAK 홈(벤토 대시보드) ══════════════════
   목업 dak_home_mockup_v5 기준. 다크 전용이던 목업을 앱 토큰(라이트/다크)으로 옮겼다.
   사진·영상 타일은 어두운 이미지 위 흰 글씨라 두 테마에서 동일하게 보인다.
   모서리는 요청대로 최소(3px). 외부 폰트·CDN 없음. */
.dh{--dhr:3px;position:relative}
.dh .placeholder{min-height:320px}

/* ── 인트로 ── */
.dh-intro{position:fixed;inset:0;z-index:80;background:#000;overflow:hidden;transition:opacity .8s}
.dh-intro.gone{opacity:0;pointer-events:none}
.dh-intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.dh-vg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.25),rgba(6,10,18,.8))}
.dh-skip{position:absolute;top:20px;right:22px;z-index:2;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);color:#fff;padding:8px 16px;font-size:12.5px;
  font-family:var(--font);border-radius:var(--dhr);cursor:pointer}
.dh-skip:hover{background:rgba(0,0,0,.55)}
.dh-pbar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* ── 히어로(요청대로 낮게 ~200px) ── */
.dh-hero{position:relative;height:200px;overflow:hidden;border-radius:var(--dhr)}
.dh-heroimg{position:absolute;inset:0;background:url("/assets/home/hero-aerial.jpg") center 45%/cover;
  animation:dh-kb 26s ease-out infinite alternate}
.dh-heroov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,24,.15),rgba(8,14,24,.62) 70%,rgba(8,14,24,.86))}
.dh-herob{position:absolute;left:24px;bottom:18px;right:24px}
.dh-hi{color:#dfe7f3;font-size:13.5px;margin-bottom:4px}
.dh-hi b{color:#fff;font-weight:700}
.dh-clockrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dh-clock{color:#fff;font-size:26px;font-weight:700;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:.5px;line-height:1.1}
.dh-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#bfe8cf}
.dh-live .d{width:7px;height:7px;border-radius:50%;background:#37d67a;animation:dh-pulse 1.8s infinite}
.dh-hsub{color:#c7d2e3;font-size:12.5px;margin-top:5px}
/* 오늘 내 정보 — 시계 밴드 둘째 줄(출퇴근=세콤 ATT_PUNCH, 근무유형=SAP ZPH_PY036).
   히어로 이미지 위 = 항상 밝은 글자이므로 라이트/다크 공통. 밴드 세로폭 증가는 한 줄(약 18px)로 제한. */
.dh-todayrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;line-height:1.2}
.dh-jo{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  color:#eaf1fb;font-size:11.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.dh-tp{color:#d7e2f0;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-replay{position:absolute;top:16px;right:18px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.22);color:#e7edf7;
  font-size:12px;font-family:var(--font);padding:7px 13px;border-radius:var(--dhr);cursor:pointer}
.dh-replay:hover{background:rgba(0,0,0,.55)}
.dh-replay svg{width:12px;height:12px;fill:currentColor;stroke:none}

/* ── 벤토 ── */
.dh-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:96px;gap:12px;margin-top:14px}
.dh-t{position:relative;overflow:hidden;padding:16px;text-align:left;font-family:var(--font);
  border:1px solid var(--line);border-radius:var(--dhr);background:var(--panel);color:var(--ink);
  opacity:0;transform:translateY(14px);display:block;width:100%;cursor:default;
  transition:transform var(--dur-mid) var(--ease),box-shadow var(--dur-mid) var(--ease),border-color var(--dur-mid) var(--ease)}
button.dh-t{cursor:pointer}
.dh-t.in{animation:dh-rise .55s both}
button.dh-t:hover,.dh-t.dh-vid:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.dh-lab{display:block;font-size:11.5px;color:var(--slate-2)}
.dh-big{display:block;font-family:var(--mono);font-weight:800;font-size:26px;line-height:1;margin-top:6px}
.dh-big em{font-size:12.5px;color:var(--slate-2);font-weight:400;font-style:normal;margin-left:3px}
.dh-big.g{color:var(--gold)} .dh-big.r{color:var(--red)}
.dh-small{display:block;font-size:11.5px;color:var(--slate);margin-top:4px;line-height:1.45}
.dh-name{display:block;font-weight:700;font-size:14.5px}
.dh-flex{display:flex;justify-content:space-between;align-items:flex-end;height:100%}
.dh-ghost{opacity:.16;align-self:flex-end}
.dh-ghost svg{width:38px;height:38px}
.dh-pill{position:absolute;top:12px;right:12px;background:var(--red);color:#fff;font-size:11px;
  font-weight:800;padding:3px 9px;border-radius:var(--dhr);animation:dh-pulse2 2.4s infinite}
.dh-spark{position:absolute;left:0;right:0;bottom:0;height:44px;width:100%}
.dh-spark path{stroke:var(--gold);stroke-width:2;fill:none;stroke-dasharray:400;stroke-dashoffset:400}
.dh-t.in .dh-spark path{animation:dh-draw 1.4s .5s forwards}

/* 사진·영상 타일 — 어두운 이미지 위 흰 글씨(두 테마 공통) */
.dh-photo .dh-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s var(--ease)}
.dh-photo:hover .dh-bg{transform:scale(1.06)}
.dh-photo .dh-o,.dh-vid .dh-o{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,24,.08),rgba(8,14,24,.88))}
.dh-photo .dh-c,.dh-vid .dh-c{position:absolute;left:16px;right:16px;bottom:14px}
.dh-photo .dh-name,.dh-vid .dh-name{color:#fff;font-size:16px}
.dh-photo .dh-small,.dh-vid .dh-small{color:#d6dfec}
.dh-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dh-vtag{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.42);color:#fff;font-size:11px;padding:4px 10px;border-radius:var(--dhr)}
.dh-vtag .d{width:6px;height:6px;border-radius:50%;background:var(--red);animation:dh-pulse2 1.4s infinite}

/* 공지 타일 */
.dh-notice{display:flex;flex-direction:column;gap:8px}
.dh-nlist{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}
.dh-ni{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:transparent;
  border:0;border-radius:var(--dhr);padding:6px 7px;cursor:pointer;font-family:var(--font);color:var(--ink)}
.dh-ni:hover{background:var(--soft)}
.dh-nt{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-pin{font-style:normal;font-size:10.5px;font-weight:800;color:var(--gold);margin-right:5px}
.dh-nd{flex:0 0 auto;font-size:11px;color:var(--slate-2)}
.dh-nempty{font-size:12px;color:var(--slate-2);padding:8px 7px}
.dh-paylab{margin-top:8px;color:var(--navy)}
:root[data-theme="dark"] .dh-paylab{color:var(--gold)}

/* 타일 배치 — 영상 카드는 구석이 아니라 가운데 열에 시원하게 */
.dh-att{grid-column:span 2;grid-row:span 3}
.dh-ea{grid-column:span 2;grid-row:span 2}
.dh-annual{grid-row:span 2}
.dh-vid{grid-column:span 2;grid-row:span 3}
.dh-notice{grid-column:span 2;grid-row:span 2}

/* ── 바로가기(비정형) ── */
.dh-q{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:78px;gap:10px;margin-top:22px}
.dh-qi{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--dhr);padding:14px 15px;
  cursor:pointer;font-family:var(--font);color:var(--ink);text-align:left;
  transition:transform var(--dur-mid) var(--ease),border-color var(--dur-mid) var(--ease),box-shadow var(--dur-mid) var(--ease)}
.dh-qi:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.dh-qic{display:inline-flex;color:var(--navy);transition:transform var(--dur-mid) var(--ease)}
.dh-qic svg{width:22px;height:22px}
:root[data-theme="dark"] .dh-qic{color:var(--gold)}
.dh-qi:hover .dh-qic{transform:scale(1.15)}
.dh-qil{font-size:13px;font-weight:600}
.dh-qi.xl{grid-column:span 2;grid-row:span 2}
.dh-qi.xl .dh-qic svg{width:28px;height:28px}
.dh-qi.xl .dh-qil{font-size:15px}
.dh-qi.lg{grid-column:span 2}
.dh-qi.md{grid-column:span 1;grid-row:span 2}
.dh-qi.sm{grid-column:span 1}

/* 공지 상세 */
.dh-nmodal{position:fixed;inset:0;z-index:70;background:rgba(10,14,22,.5);
  display:flex;align-items:center;justify-content:center;padding:20px}
.dh-nbox{width:min(560px,94vw);max-height:80vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--dhr);padding:18px;box-shadow:var(--shadow)}
.dh-nh{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.dh-nh b{font-size:15px}
.dh-nx{border:0;background:transparent;color:var(--slate-2);font-size:20px;cursor:pointer;line-height:1}
.dh-nmeta{font-size:11.5px;color:var(--slate-2);margin-top:4px}
.dh-nc{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--ink)}

@keyframes dh-kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,-1.5%)}}
@keyframes dh-rise{to{opacity:1;transform:none}}
@keyframes dh-pulse{0%{box-shadow:0 0 0 0 rgba(55,214,122,.55)}70%{box-shadow:0 0 0 8px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
@keyframes dh-pulse2{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes dh-draw{to{stroke-dashoffset:0}}

/* 모바일 — 1열(영상·공지 포함), 가로 스크롤 0 */
@media (max-width:860px){
  .dh-hero{height:168px;border-radius:0;margin:0 -12px}
  .dh-herob{left:16px;right:16px;bottom:14px}
  .dh-clock{font-size:22px}
  .dh-bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px;margin-top:12px}
  .dh-t{min-height:96px}
  .dh-att,.dh-ea,.dh-annual,.dh-vid,.dh-notice{grid-column:auto;grid-row:auto}
  .dh-att,.dh-vid{min-height:190px}
  .dh-notice{min-height:150px}
  .dh-q{grid-template-columns:repeat(2,1fr);grid-auto-rows:72px}
  .dh-qi.xl,.dh-qi.lg{grid-column:span 2;grid-row:span 1}
  .dh-qi.md{grid-row:span 1}
  .dh-qi{flex-direction:row;align-items:center}
}

@media (prefers-reduced-motion:reduce){
  .dh-heroimg,.dh-t,.dh-pill,.dh-live .d,.dh-vtag .d,.dh-spark path{animation:none !important}
  .dh-t{opacity:1;transform:none}
  .dh-spark path{stroke-dashoffset:0}
  .dh-intro{transition:none}
  .dh-t,.dh-qi,.dh-photo .dh-bg{transition:none !important}
}

/* ── 홈 수정분(인트로 제거 · 히어로 축소 · 영상 2개 · 사진 카드 2개) ── */
/* 인트로/다시보기는 폐지 — 관련 스타일 무효화 */
.dh-intro,.dh-vg,.dh-skip,.dh-pbar,.dh-replay{display:none !important}

/* 히어로: 200px → 128px (약 36% 축소), 시계도 한 단계 작게 */
.dh-hero{height:128px}
.dh-heroov{background:linear-gradient(180deg,rgba(8,14,24,.18),rgba(8,14,24,.55) 55%,rgba(8,14,24,.84))}
.dh-herob{left:20px;right:20px;bottom:12px}
.dh-hi{font-size:12.5px;margin-bottom:2px}
.dh-clock{font-size:21px}
.dh-clockrow{gap:12px}
.dh-hsub{margin-top:0;font-size:12px}
/* 모바일: 오늘 내 정보 한 줄 유지 — 여백·글자만 축소(밴드 높이 최소 증가) */
.dh-todayrow{margin-top:5px;gap:7px}
.dh-jo{font-size:11px;padding:2px 7px}
.dh-tp{font-size:12px}
.dh-heroact{position:absolute;top:12px;right:14px;display:flex;gap:8px}
.dh-ghostbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.22);color:#e7edf7;
  border-radius:var(--dhr);cursor:pointer}
.dh-ghostbtn:hover{background:rgba(0,0,0,.55)}
.dh-ghostbtn svg{width:15px;height:15px}

/* 타일 배치 — 처음 배치 그대로 되돌리고, 추가한 두 번째 영상만 우측 가로 카드로.
   내 근태(2x3)      | 전자결재(2x2)
                     | 연차(1x2, 사진) · 대휴 · 이번달
   회사소개 영상(2x3) | 공지(2x2)
   헬프데스크 · 급여  | 두번째 영상(2x1, 가로로 길게)  */
.dh-att{grid-column:span 2;grid-row:span 3}
.dh-ea{grid-column:span 2;grid-row:span 2}
.dh-annual{grid-column:span 1;grid-row:span 2}
.dh-vid{grid-column:span 2;grid-row:span 4}
.dh-notice{grid-column:span 2;grid-row:span 2}
.dh-hd{grid-column:span 1;grid-row:span 1}
.dh-pay{grid-column:span 1;grid-row:span 1}
.dh-vid2{grid-column:span 2;grid-row:span 1}      /* 우측 가로 카드(공지 아래) */

/* 사진 타일 안의 라벨/숫자 — 어두운 오버레이 위라 밝게(다른 사진 카드와 톤 통일) */
.dh-photo .dh-lab{color:#c9d5e6}
.dh-photo .dh-big{color:#fff}
.dh-photo .dh-big em{color:#c9d5e6}
.dh-photo .dh-big.g{color:var(--gold)}
.dh-photo .dh-c{display:flex;flex-direction:column}
/* 사진 위 가독성 확보 — 오버레이를 조금 더 진하게(수치·미니그래프가 선명하게) */
.dh-photo .dh-o{background:linear-gradient(180deg,rgba(4,8,15,.42),rgba(4,8,15,.72))}
.dh-annual .dh-spark{z-index:1}
.dh-annual .dh-spark path{stroke-width:2.4}

/* 두 번째 영상 카드 — 라벨 없이 영상만 */
.dh-vid2 .dh-o{background:linear-gradient(180deg,rgba(8,14,24,.05),rgba(8,14,24,.45))}

@media (max-width:860px){
  .dh-hero{height:104px}
  .dh-clock{font-size:19px}
  .dh-herob{left:14px;right:14px;bottom:10px}
  .dh-att,.dh-ea,.dh-annual,.dh-notice,.dh-vid,.dh-hd,.dh-pay{grid-column:auto;grid-row:auto}
  .dh-annual{min-height:150px}
  .dh-hd{min-height:140px}
  .dh-vid,.dh-vid2{min-height:180px}
}

/* ── 홈/사이드바 수정(A 시계밴드 배경 · C·D 프로필 · E 공지·영상 배치) ── */

/* [A] 시계 밴드 배경 = 코일 슬리팅 라인 배너. 밴드가 얇게 잘려도 자연스럽도록 중앙 기준.
       사진 위 어두운 그라데이션으로 시계·인사말 가독성 확보. */
.dh-heroimg{background:url("/img/hero-band.jpg") center/cover no-repeat}
.dh-heroov{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25) 45%,rgba(0,0,0,.55))}

/* [D] 아이콘 레일 아바타 — 레일 폭에 정사각으로 꽉 차게, 모서리 최소 */
.ir-foot{padding:8px 8px 12px;width:100%}
.ir-user{width:48px;height:48px;border-radius:var(--r-sm);overflow:hidden;padding:0}
.ir-user img{width:100%;height:100%;object-fit:cover;display:block}
.ir-user .av{width:100%;height:100%;display:grid;place-items:center;font-size:16px;border-radius:0}
.ir-user .av-ini{font-size:16px}

/* [C] 패널 하단 프로필 — 사진 없이 텍스트만(레일 아바타와 한 줄로 세로 중앙 정렬) */
.mp-foot{min-height:68px;padding:12px 14px}
.mp-foot .who{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.mp-foot .nm{font-size:13.5px;font-weight:700}
.mp-foot .rl{font-size:11.5px;color:var(--slate-2);overflow:hidden;text-overflow:ellipsis}

/* [E] 공지사항은 반칸(좌), 그 오른쪽 빈자리에 두 번째 영상.
       두 카드가 한 줄을 이루면서 아래 헬프데스크·급여 줄이 한 칸 위로 올라온다.
       회사소개 영상은 오른쪽 스택과 아래 끝을 맞추기 위해 3행으로(원래 크기). */
.dh-vid{grid-column:span 2;grid-row:span 3}
.dh-notice{grid-column:span 1;grid-row:span 2}
.dh-vid2{grid-column:span 1;grid-row:span 2}

@media (max-width:860px){
  .ir-user{width:40px;height:40px}
  .mp-foot{min-height:0}
  .dh-notice,.dh-vid2{grid-column:auto;grid-row:auto}
}

/* ── 사이드바 하단 프로필 아바타 — 정사각으로 딱 맞게 ──
   아바타와 텍스트가 레일/패널로 나뉘어 있으면 높이·간격을 맞출 수 없어,
   펼침 상태에서는 텍스트와 같은 줄(패널 하단)에 두고 레일 아바타는 접힘 전용으로 돌린다.
   → 어느 상태에서도 화면에 보이는 프로필 이미지는 항상 1개. */
.app:not(.panel-collapsed) .ir-foot{display:none}

.mp-foot{display:flex;align-items:center;gap:9px;padding:12px 14px;min-height:0}
/* 높이 = 옆 텍스트 두 줄 높이(stretch), 폭은 aspect-ratio로 정확한 정사각 */
.mp-foot .av{align-self:stretch;height:auto;width:auto;aspect-ratio:1;flex:0 0 auto;
  padding:0;margin:0;position:relative;overflow:hidden;border-radius:var(--r-sm);
  display:grid;place-items:center}
.mp-foot .av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mp-foot .av .av-ini{font-size:15px;line-height:1}
.mp-foot .who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}

/* 접힘 상태의 레일 아바타 — 정사각 유지, 이미지가 여백 없이 꽉 차게 */
.ir-foot{padding:8px 0 12px;width:100%;display:flex;justify-content:center}
.ir-user{width:48px;height:48px;flex:0 0 48px;padding:0;margin:0;overflow:hidden;
  border-radius:var(--r-sm);display:grid;place-items:center}
.ir-user .av{width:100%;height:100%;position:relative;overflow:hidden;border-radius:0;
  display:grid;place-items:center}
.ir-user .av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:860px){ .ir-user{width:40px;height:40px;flex:0 0 40px} }

/* ── 시계 밴드: 인사말 제거 후 남은 한 줄을 밴드 세로 중앙에 정렬 ── */
.dh-hi{display:none}
.dh-herob{top:50%;bottom:auto;transform:translateY(-50%)}
@media (max-width:860px){ .dh-herob{top:50%;bottom:auto;transform:translateY(-50%)} }

/* ── 시계 밴드: 다시 하단 정렬(인사말은 없는 채로) ── */
.dh-herob{top:auto;bottom:14px;transform:none}
@media (max-width:860px){ .dh-herob{top:auto;bottom:12px;transform:none} }

/* ── 오늘의 글귀 — '이번달 내 근무' 옆 빈칸에 얹는 텍스트(카드 아님) ── */
.dh-quote{display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:14px 18px;border:0;background:transparent;min-width:0;
  opacity:0;transition:opacity .5s var(--ease)}
.dh-quote.on{opacity:1}
.dh-qt{font-size:12.5px;line-height:1.6;color:var(--slate);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dh-qa{font-size:11.5px;color:var(--slate-2)}
@media (prefers-reduced-motion:reduce){ .dh-quote{transition:none} }

/* ── 사이드바 아바타 — 접힘/펼침 모두 정사각 + 아이콘 열과 세로 라인 일치 ──
   접힘: 메뉴 아이콘 버튼(.ir-mod)과 같은 44×44·같은 좌측 x(10px) → 세로 라인 일치
   펼침: 40×40, 좌측 끝을 패널 메뉴 아이콘 열(패널 좌단 +20px)에 맞춤 */
.ir-foot{padding:8px 0 12px;width:100%;display:flex;justify-content:center}
.ir-user{width:44px;height:44px;flex:0 0 44px;padding:0;margin:0;box-sizing:border-box;
  overflow:hidden;border-radius:var(--r-sm);display:block;position:relative}
.ir-user .av{position:absolute;inset:0;width:100%;height:100%;border-radius:0;
  display:grid;place-items:center;overflow:hidden}
.ir-user .av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ir-user .av .av-ini{font-size:15px;line-height:1}

.mp-foot{display:flex;align-items:center;gap:9px;padding:12px 14px 12px 20px;min-height:0}
.mp-foot .av{width:40px;height:40px;flex:0 0 40px;align-self:center;aspect-ratio:auto;
  padding:0;margin:0;box-sizing:border-box;position:relative;overflow:hidden;
  border-radius:var(--r-sm);display:grid;place-items:center}
.mp-foot .av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:860px){ .ir-user{width:40px;height:40px;flex:0 0 40px} }

/* 모바일은 항상 1열 — 타일 span이 뒤에서 다시 선언돼도 암시적 열이 생기지 않도록 마지막에 고정 */
@media (max-width:860px){
  .dh-bento{grid-template-columns:1fr}
  .dh-bento > *{grid-column:auto !important;grid-row:auto !important}
}


/* ══════════ 프로필 아바타 최종 확정 v2 (FINAL · 최우선) ══════════
   요구사항: 접든/펴든 사진은 "같은 자리"에 고정 + 사각형을 "꽉" 채운다.
   원인: 예전엔 아바타가 2개(레일용/패널용)라 토글 때 자리를 옮겼다.
   해결: 아바타는 '항상 보이는 아이콘 레일' 하단에 딱 1개만 둔다(고정).
         펼치면 오른쪽 패널엔 '텍스트만' 나온다(패널 아바타는 숨김).
   레일 아바타는 레일 폭을 거의 꽉 채우는 정사각, 사진은 여백 없이 cover. */

/* 레일 아바타 — 접힘/펼침 모두 '항상' 표시, 같은 위치, 레일 폭 꽉 채운 정사각 */
.ir-foot{display:flex !important;justify-content:center;align-items:flex-end;
  padding:0;width:100%;box-sizing:border-box}
.ir-user{width:100%;aspect-ratio:1;height:auto;flex:0 0 auto;padding:0;margin:0;box-sizing:border-box;
  overflow:hidden;border-radius:var(--r-sm);display:block;position:relative;background:var(--gold-050);cursor:pointer}
.ir-user .av{position:absolute;inset:0;width:100%;height:100%;border-radius:0;display:grid;place-items:center;overflow:hidden}
.ir-user .av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ir-user .av .av-ini{font-size:18px;line-height:1}

/* 패널 하단 — 아바타는 숨기고 텍스트만(아바타는 레일에 고정돼 있으니 중복 제거).
   텍스트를 레일 아바타 오른쪽 가까이 붙여 한 덩어리처럼 보이게. */
.mp-foot{display:flex;align-items:center;gap:0;padding:0 14px 0 12px;height:64px;min-height:64px;
  border-top:1px solid var(--line);white-space:nowrap}
.mp-foot .av{display:none !important}
.mp-foot .who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
/* ═════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   RBAC 관리 3화면 (P_ACCOUNT / P_GRADE / P_PERM) — 네이비·골드, 각진(최소 radius).
   색은 전부 토큰(var) 기반이라 라이트/다크 자동 대응. PC·모바일 공용(≤860px 1열).
   ══════════════════════════════════════════════════════════════════════════ */
.rb-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 12px}
.rb-tab{position:relative;display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  border-bottom:2px solid transparent;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--slate);
  border-radius:var(--r-sm) var(--r-sm) 0 0}
.rb-tab:hover{background:var(--soft);color:var(--ink)}
.rb-tab.on{color:var(--navy);border-bottom-color:var(--navy)}
.rb-tn{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--soft);color:var(--slate);font-size:11px;font-weight:700}
.rb-tab.on .rb-tn{background:var(--navy-050);color:var(--navy)}
.rb-tab.warn .rb-tn{background:var(--gold-050);color:var(--gold)}

.rb-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rb-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:0 11px;height:36px;min-width:260px}
.rb-search.sm{min-width:220px;height:32px}
.rb-search.sd{margin:0 10px 10px}
.rb-search:focus-within{border-color:var(--navy)}
.rb-search input{border:0;background:transparent;outline:0;font-family:var(--font);font-size:13.5px;color:var(--ink);width:100%}
.rb-search svg{color:var(--slate-2);width:16px;height:16px}
.rb-hint{font-size:12px;color:var(--slate)}
.rb-hint b{color:var(--navy)}
.rb-dim{color:var(--slate);font-size:12.5px}

/* 표 */
.rb-table{width:100%;border-collapse:collapse;font-size:13px}
.rb-table th{position:sticky;top:0;z-index:1;background:var(--soft);color:var(--slate);font-size:11.5px;font-weight:700;
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.rb-table td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.rb-table tbody tr:hover{background:var(--soft)}
.rb-actc{text-align:right;white-space:nowrap}

/* 상태 칩 */
.rb-st{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.rb-st-ok{background:var(--green-050);color:var(--green)}
.rb-st-wait{background:var(--gold-050);color:var(--gold)}
.rb-st-off{background:var(--soft);color:var(--slate)}
.rb-ovtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--gold-050);
  color:var(--gold);font-size:10.5px;font-weight:700;white-space:nowrap}

/* 입력 */
.rb-sel,.rb-in{height:30px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);
  padding:0 9px;font-family:var(--font);font-size:13px;color:var(--ink);max-width:100%}
.rb-in.wide{flex:1;min-width:180px}
.rb-sel:focus,.rb-in:focus{outline:0;border-color:var(--navy)}
.rb-ck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate);white-space:nowrap}
.rb-fl{font-size:12px;font-weight:700;color:var(--slate);white-space:nowrap}
.rb-mini{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);border-radius:var(--r-sm);font-size:12px;font-weight:600}
.rb-mini:hover{border-color:var(--navy);color:var(--navy)}
.rb-mini svg{width:13px;height:13px}
.rb-mini.ok{border-color:var(--green);color:var(--green)}
.rb-mini.danger:hover{border-color:var(--red);color:var(--red)}
.rb-mini[disabled]{opacity:.45;pointer-events:none}
.rb-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.rb-frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rb-frow+.rb-frow{margin-top:10px}
.rb-frow .sp,.rb-bar .sp,.rb-pah .sp{flex:1}
.rb-who{display:flex;align-items:baseline;gap:8px;font-size:15px}

/* 좌우 분할 */
.rb-split{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}
.rb-side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  max-height:calc(100vh - 220px);overflow-y:auto}
.rb-sh{padding:9px 12px;font-size:11.5px;font-weight:700;color:var(--slate);background:var(--soft);
  border-bottom:1px solid var(--line)}
.rb-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:9px 12px;border-left:2px solid transparent}
.rb-item:hover{background:var(--soft)}
.rb-item.on{background:var(--navy-050);border-left-color:var(--navy)}
.rb-it{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.rb-id2{display:block;margin-top:2px;font-size:11.5px;color:var(--slate)}
.rb-main{min-width:0}

/* 화면권한 체크 그리드 */
.rb-perm{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.rb-parea{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rb-pah{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--soft);border-bottom:1px solid var(--line)}
.rb-pat{font-size:12px;font-weight:700;color:var(--ink)}
.rb-pac{font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.rb-ptable{max-height:460px;overflow-y:auto}
.rb-prow{display:grid;grid-template-columns:1fr 54px 54px;align-items:center;gap:6px;padding:6px 11px;
  border-bottom:1px solid var(--line);cursor:pointer}
.rb-prow:last-child{border-bottom:0}
.rb-prow:hover{background:var(--soft)}
.rb-prow.is-ov{background:var(--gold-050)}
.rb-phead{background:var(--panel);cursor:default;font-size:11px;font-weight:700;color:var(--slate);position:sticky;top:0;z-index:1}
.rb-phead:hover{background:var(--panel)}
.rb-pn{display:flex;align-items:center;gap:7px;min-width:0}
.rb-code{font-family:var(--mono);font-size:10.5px;color:var(--slate-2);flex:0 0 auto}
.rb-nm{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-pc{text-align:center}
.rb-prow input[type=checkbox]{width:15px;height:15px;accent-color:var(--navy);cursor:pointer}

@media(max-width:860px){
  .rb-split{grid-template-columns:1fr}
  .rb-side{max-height:220px}
  .rb-perm{grid-template-columns:1fr}
  .rb-bar{flex-wrap:wrap}
  .rb-search,.rb-search.sm{min-width:0;width:100%}
  .rb-table{font-size:12.5px}
  .rb-ptable{max-height:300px}
}