/* 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}
/* 사이드바 전용 — 전기안전체(한국전기안전공사, 무료·웹임베드 허용).
   파일이 없으면 브라우저가 이 @font-face 를 조용히 건너뛰고 Pretendard 로 그린다.
   → 폰트를 /fonts/KescoSafety.woff2 에 넣기만 하면 바로 적용된다. */
@font-face{font-family:'Kesco Safety';src:url('/fonts/KescoSafety.woff2') format('woff2');
  font-weight:400 700;font-display:swap;font-style:normal}

:root{
  --navy:#17325a; --navy-600:#274a80; --navy-050:#eef2f8;
  --gold:#c49b3a; --gold-050:#f7f0dd;
  /* 오늘의 글귀 포인트 — 로즈골드(라이트는 한 톤 진하게) */
  --rose-1:#e8b3a0; --rose-2:#cf8f8a; --rose-3:#a86a7d; --rose-4:#96525f;
  --quote-text:linear-gradient(180deg,var(--rose-2) 0%,var(--rose-3) 52%,var(--rose-4) 100%);
  --red:#d63b28; --red-050:#fbe7e3;
  --pink:#c2255c;   /* 전일 결근칸 글씨 — 밝은 바탕에서 읽히도록 진한 핑크 */
  /* 공지 분류 색 — 전산/안전/환경/인사. 배지를 쓰는 화면은 모두 이 토큰만 본다(색을 여기저기 적지 않는다) */
  --cat-it:#0f766e;      --cat-it-bg:rgba(45,200,185,.12);
  --cat-safety:#1d4ed8;  --cat-safety-bg:rgba(77,143,255,.12);
  --cat-env:#15803d;     --cat-env-bg:rgba(70,200,120,.14);
  --cat-hr:#c2410c;      --cat-hr-bg:rgba(255,150,60,.14);
  --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:2px; --r:2px; --r-lg:2px;
  /* 모션 언어(짧고 스냅) */
  --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;
  --pink:#ff9ec4;   /* 어두운 바탕에서 또렷한 핑크 */
  --cat-it:#5fd0c5;      --cat-it-bg:rgba(45,200,185,.16);
  --cat-safety:#8fb8ff;  --cat-safety-bg:rgba(77,143,255,.16);
  --cat-env:#6fd88c;     --cat-env-bg:rgba(70,200,120,.16);
  --cat-hr:#ffb86b;      --cat-hr-bg:rgba(255,150,60,.16);
  --rose-1:#f7d3c4; --rose-2:#e0a9a0; --rose-3:#c08497; --rose-4:#b76e79;
  --quote-text:linear-gradient(180deg,var(--rose-1) 0%,var(--rose-2) 42%,var(--rose-3) 78%,var(--rose-4) 100%);
  --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;
  --pink:#ff9ec4;   /* 어두운 바탕에서 또렷한 핑크 */
  --cat-it:#5fd0c5;      --cat-it-bg:rgba(45,200,185,.16);
  --cat-safety:#8fb8ff;  --cat-safety-bg:rgba(77,143,255,.16);
  --cat-env:#6fd88c;     --cat-env-bg:rgba(70,200,120,.16);
  --cat-hr:#ffb86b;      --cat-hr-bg:rgba(255,150,60,.16);
  --rose-1:#f7d3c4; --rose-2:#e0a9a0; --rose-3:#c08497; --rose-4:#b76e79;
  --quote-text:linear-gradient(180deg,var(--rose-1) 0%,var(--rose-2) 42%,var(--rose-3) 78%,var(--rose-4) 100%);
  --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}
/* 항목이 5개로 늘어 좁은 폭에서 넘칠 수 있다 — 줄바꿈 + 간격을 폭에 맞춰 줄인다(가로 스크롤 0). */
.brandside .stat{position:relative;display:flex;flex-wrap:wrap;gap:12px clamp(16px,2.4vw,30px)}
.brandside .stat .n{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1.1;display:flex;align-items:center;min-height:26px}
/* SAP 자리만 공식 로고 이미지 — 옆 항목 제목 글자 높이에 맞춰 세로 중앙 정렬(붕 뜨지 않게). */
.brandside .stat .n-logo{height:26px;width:auto;display:block}
.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:0;border-bottom:1px solid var(--line);background:transparent;padding:0;cursor:pointer;font:inherit;color:inherit}
.ir-brand:hover img{filter:brightness(1.18)}
.ir-brand:active img{transform:scale(.94)}
.ir-brand:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* 로고는 헤더 밴드(--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-title,.mp-ghead .glbl{font-family:'Kesco Safety',var(--font)}
.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:8px 6px;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)}
/* 로그인 ID — 상단 헤더에서 여기로 옮겼다(유틸바는 아이콘만 남긴다). 무채색·작게, 값은 등폭. */
.mp-foot .lid{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--slate-2);opacity:.8;
  overflow:hidden;text-overflow:ellipsis}
.mp-foot .lid:empty{display:none}

.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-sm);border:1px solid var(--line);background:var(--panel);color:var(--slate);display:grid;place-items:center;padding:0;flex:0 0 auto}
.iconbtn:hover{color:var(--ink);background:var(--soft)}
/* 사번칩 — 아이콘 버튼과 같은 높이로 맞춰 상단 유틸 줄의 크기를 통일 */
.idpill{display:inline-flex;align-items:center;height:38px;flex:0 0 auto;font-family:var(--mono);font-size:12.5px;font-weight:600;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 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){
  /*  스크롤하는 것은 셸 하나다.
      ★안쪽(.mb-body)을 스크롤시키면 하단 탭바가 그 바깥에 남아 저절로 고정된다 —
        탭바도 내용과 함께 흘러야 하므로 셸을 스크롤 상자로 두고 본문은 흐름에 맡긴다.
        그러면 앱바의 sticky 는 셸을 기준으로 잡혀 맨 위에 붙고, 탭바는 맨 끝에서 같이 밀려 올라간다.
      dvh 를 모르는 브라우저를 위해 vh 를 먼저 적어 둔다(뒤 선언이 이긴다). */
  .mapp{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg)}
  /*  ★flex:1 로 두면 본문이 화면 높이(1화면)에 묶이고 내용은 그 밖으로 넘친다.
      그러면 sticky 앱바가 "본문 영역"을 벗어나는 순간 풀려 같이 밀려 올라간다.
      내용만큼 자라게 두어야 앱바가 끝까지 붙어 있는다. 짧은 화면에서는 탭바가 내용 바로 뒤에 온다. */
  .mb-body{flex:0 0 auto;min-height:0;overflow:visible;
    padding:14px 14px calc(74px + env(safe-area-inset-bottom))}

  /*  상단 앱바(뒤로가기 + 제목) — 셸 스크롤 안에서 맨 위에 붙는다.
      · 좌우: 본문 여백(14px)만큼 밖으로 빼 화면 끝까지 덮는다(양옆으로 글자가 비치지 않게).
      · 아래: ★여백을 margin 으로 주면 그 틈으로 내용이 지나가 '반투명'처럼 보인다.
        padding 으로 줘서 배경이 그 틈까지 덮게 한다.
      · 높이: 뒤로가기 버튼 한 줄 높이만. 위아래 패딩을 최소로 둔다. */
  /*  ★기본 .mb-scr-head{padding:2px 0 14px} 이 이 블록보다 "뒤"에 있어 클래스 하나로는 진다.
      .mapp 을 앞에 붙여 이기게 한다 — 안 그러면 패딩이 그대로 남아 바가 두꺼워지고,
      아래 14px 틈으로 내용이 지나가 반투명처럼 보인다. */
  .mapp .mb-scr-head{position:sticky;top:0;z-index:30;
    margin:-14px -14px 0;padding:5px 14px 9px;
    background:var(--bg);border-bottom:1px solid var(--line)}
  /*  ★모바일에서는 "목록만 스크롤"(.env-listfill)을 끈다.
      그 레이아웃은 목록이 화면 높이를 다 먹어 안쪽만 스크롤하므로, 하단 탭바가 끝까지 밀려 올라가지 않는다.
      좁은 화면에서는 표가 카드로 펴지기도 해서 안쪽에 또 스크롤을 둘 이유가 없다 —
      본문 전체가 흐르고 탭바도 그 끝에서 같이 밀린다. PC(>860px)는 그대로 둔다. */
  /*  ★미디어쿼리는 특이도를 올리지 않는다 — 뒤에 선언된 .env-listfill 규칙에 그냥 진다.
      .mapp 을 앞에 붙여 이기게 한다(모바일 셸 안에서만 적용되니 뜻도 맞다). */
  .mapp .env-listfill{display:block;flex:none;height:auto;min-height:0}
  .mapp .env-listfill > .gwrap{flex:none;overflow:visible}
  .mapp .env-listfill .gscroll{height:auto;max-height:none;overflow:visible}
  .mapp .env-listfill thead th{position:static}
  .mapp .env-listfill > .env-pgfix{position:static}

  /*  ★정보·알림 화면은 본문을 overflow:hidden 으로 잠그고 안쪽 패널이 따로 스크롤한다.
      그러면 상단 앱바의 sticky 가 그 잠긴 상자 안에 갇혀 아무 데도 붙지 못한다.
      모바일에서는 안쪽 스크롤을 풀어 셸 하나만 스크롤하게 한다 — 다른 화면과 같은 모양이 된다.
      (.mapp 를 앞에 붙여 원래 규칙보다 특이도를 높인다) */
  .mapp .mb-body:has(.ib-pane),
  .mapp .mb-body:has(.nt-pane){display:block;overflow:visible}
  .mapp .ib-pane,
  .mapp .nt-pane{display:block;overflow:visible}
  .mapp .ib-pane > #ibBody{display:block;overflow:visible;min-height:0}
  .mapp .ib-pane > #ibBody > .ib-scroll,
  .mapp .ib-pane > #ibBody > .ib-empty,
  .mapp .ib-pane > #ibBody > .placeholder{flex:none;min-height:0;overflow:visible}
  .mapp .nt-pane > .gwrap{display:block;flex:none;min-height:0;overflow:visible}
  .mapp .nt-pane > .gwrap > .gscroll{flex:none;min-height:0;max-height:none;overflow:visible}

  /*  하단 탭바는 화면 아래에 붙여 둔다(흐름에서 빼낸다).
      ★흐름에서 빠지므로 본문 아래에 그만큼 자리를 비워 둬야 마지막 줄이 가리지 않는다. */
  .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)}
/* 높이는 JS(accSet)가 콘텐츠 기준으로 잡는다 — 예전 고정값(660px)은 항목이 많은 도메인에서 잘렸다.
   전환이 끝나면 max-height:none 이 되어 하위 아코디언을 여닫아도 그대로 따라간다. */
.mb-acc-body{max-height:0;overflow:hidden;transition:max-height .24s cubic-bezier(.4,0,.2,1)}
.mb-acc-inner{padding:2px 10px 10px;border-top:1px solid var(--line)}

/* 2단계 아코디언 — 하위 그룹(자산관리·헬프데스크 등). 기본 접힘, 여러 개 동시 열림 허용.
   폴더처럼 읽히도록: 왼쪽 폴더 아이콘(펼치면 열린 폴더) + 항목과 같은 급의 글씨 + 경계선. */
.mb-sub{border-top:1px solid var(--line)}
.mb-sub:first-child{border-top:0}
.mb-sub-h{width:100%;display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 6px;
  background:none;border:0;cursor:pointer;color:var(--slate);font-family:var(--font);
  font-size:14px;font-weight:700;letter-spacing:-.01em}
.mb-sub-h:hover .mb-sub-t{color:var(--ink)}
/* 폴더 아이콘은 PC 메뉴트리(.tree-fi)와 같은 골드 */
.mb-sub-i{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;color:var(--gold)}
.mb-sub-i svg{width:18px;height:18px}
.mb-sub-i .i-o{display:none}
.mb-sub.on .mb-sub-i .i-c{display:none}
.mb-sub.on .mb-sub-i .i-o{display:grid}
.mb-sub-t{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-sub-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--slate-2);
  background:var(--soft);border-radius:9px;padding:2px 8px}
.mb-sub-car{display:inline-flex;color:var(--slate-2)}
.mb-sub-car svg{width:16px;height:16px;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.mb-sub.on .mb-sub-car svg{transform:rotate(180deg)}
.mb-sub.on .mb-sub-t{color:var(--ink)}
/* 열린 폴더는 헤더 아래에 선을 그어 '이 아래가 이 폴더의 내용'임을 보이게 한다. */
.mb-sub.on .mb-sub-h{border-bottom:1px solid var(--line)}
.mb-sub-body{max-height:0;overflow:hidden;transition:max-height .22s cubic-bezier(.4,0,.2,1)}
/* 내용은 살짝 들여쓰고 왼쪽에 얇은 세로선 — 폴더 안이라는 표시 */
.mb-sub-inner{padding:4px 0 6px 8px;margin-left:19px;border-left:2px solid var(--line)}
.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,.mb-sub-body,.mb-sub-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}
/* 로그인 ID — PC 하단 프로필(.mp-foot .lid)과 같은 톤. 값은 등폭, 무채색·연하게. */
.mb-prof-id{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--slate-2);opacity:.8;margin-top:2px}
.mb-prof-id:empty{display:none}
.mb-my-h{font-size:11.5px;font-weight:700;color:var(--slate-2);letter-spacing:.02em;margin:4px 2px 7px}
.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:var(--r-sm);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}
/* 공통 단추·입력칸. 높이 38→32px, 좌우 여백 13→10px 로 한 단계 낮췄다(약 16%).
   ★손가락으로 쓰는 화면에서는 이 축소를 되돌린다 — 파일 아래쪽 '모바일 최소 크기' 참고. */
/*  HTML 의 hidden 속성은 display 를 지정한 순간 무력해진다.
    .btn2 처럼 display:inline-flex 를 준 것에 hidden 을 걸어 두면 그대로 보인다 —
    실제로 공지 '동의·서명 현황' 버튼이 그래서 늘 떠 있었다. 한 줄로 막아 둔다. */
[hidden]{display:none !important}

.select,.btn2{height:32px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 10px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;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:32px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 28px 0 10px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.native-sel::after{content:"";position:absolute;right:10px;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:32px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:0 9px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}

/* 여럿 고르는 거르개 — 겉모습은 옆의 native select 와 똑같이(높이·테두리·글꼴) */
.msel{position:relative}
.msel-btn{appearance:none;height:32px;max-width:190px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:0 28px 0 10px;font-family:var(--font);font-size:12.5px;font-weight:600;
  color:var(--ink);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.msel::after{content:"";position:absolute;right:10px;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}
.msel.on .msel-btn{border-color:var(--navy);color:var(--navy)}   /* 거르는 중 = 눈에 띄게 */
.msel-pop{position:absolute;z-index:60;top:calc(100% + 4px);right:0;min-width:170px;max-width:min(260px,92vw);
  max-height:min(60vh,340px);overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:5px}
.msel-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.msel-item:hover{background:var(--navy-050)}
.msel-item input{width:14px;height:14px;flex:0 0 auto;accent-color:var(--navy);cursor:pointer;margin:0}
.msel-item.all{font-weight:800}
.msel-sep{height:1px;background:var(--line);margin:4px 2px}
@media (max-width:560px){ .msel-btn{max-width:118px} }

/* 민감 화면 앞의 '한 번 더 확인' 모달 — 내용이 비치지 않게 화면을 덮는다 */
.su-mask{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(6px)}
.su-box{width:min(360px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:11px}
.su-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink)}
.su-h svg{width:19px;height:19px;fill:var(--navy)}
.su-d{font-size:12.5px;line-height:1.6;color:var(--slate)}
.su-in{height:38px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:0 11px;font-family:var(--font);font-size:13.5px;color:var(--ink);width:100%}
.su-in:focus{outline:none;border-color:var(--navy)}
.su-in:disabled{opacity:.6;cursor:not-allowed}
.su-msg{min-height:16px;font-size:12px;font-weight:700;color:var(--red)}
.su-f{display:flex;justify-content:flex-end;gap:8px}

/* 주간 식단표 — 엑셀을 옮긴 표. 좁은 화면에서는 표만 옆으로 밀린다(화면 전체가 밀리지 않게) */
.mw-meta{font-size:12px;color:var(--slate);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mw-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.mw-tb{border-collapse:collapse;width:100%;min-width:560px;font-size:12.5px}
.mw-tb th,.mw-tb td{border:1px solid var(--line);padding:7px 9px;text-align:center;
  vertical-align:middle;color:var(--ink);line-height:1.5;word-break:keep-all}
.mw-tb th{background:var(--soft);font-weight:800}
.mw-tb td:empty{background:color-mix(in srgb,var(--line) 18%,transparent)}
/* 끼니가 바뀌는 자리 — 중식과 석식 사이를 또렷한 가로 금으로 가른다(줄 번호가 아니라 끼니 기준) */
.mw-tb tr.mw-meal-start > th,.mw-tb tr.mw-meal-start > td{border-top:3px solid var(--navy)}
/* 왼쪽 끼니 라벨 — 세로로 합쳐진 '중식'·'석식' 칸. 끼니마다 바탕을 달리해 눈이 바로 따라간다 */
.mw-tb .mw-meal-lb{background:color-mix(in srgb,var(--navy) 18%,transparent)!important;color:var(--navy);
  font-weight:800;font-size:13px;letter-spacing:2px;writing-mode:vertical-rl;text-orientation:upright;
  white-space:nowrap;padding:6px 4px}
.mw-tb .mw-meal-lb.dim{background:color-mix(in srgb,var(--gold) 18%,transparent)!important;color:var(--gold)}
@media (max-width:560px){ .mw-tb{font-size:11.5px} .mw-tb th,.mw-tb td{padding:5px 6px} }

/* (옛) 점검 템플릿 상단 방식 패널 — 지금은 목록 줄에서 고른다. 규칙만 남겨 둔다 */
.env-mode{margin:10px 0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 14px}
.env-mode-h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:10px}
.env-mode-h svg{width:15px;height:15px;fill:var(--slate-2)}
.env-mode-h i{font-style:normal;font-weight:600;font-size:11.5px;color:var(--slate-2)}
.env-mode-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.env-mode-r{display:flex;align-items:center;gap:8px;min-width:0}
.env-mode-n{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.env-mode-n i{font-style:normal;font-weight:600;font-size:11px;color:var(--slate-2);margin-left:6px}
.env-mode-s{flex:0 0 auto;width:184px;max-width:52%}

/* 점검 템플릿 — 점검영역 한 줄로 접은 목록 */
.etg-table > tbody > tr.etg-h > td{vertical-align:middle}
.etg-table > tbody > tr.etg-h.on > td{background:var(--soft)}
.etg-tw{padding-right:0 !important;text-align:center}
.etg-tg{width:24px;height:24px}
.etg-bc{margin-left:7px;font-size:11px}
.etg-off{margin-left:7px}
.etg-mode{width:100%;min-width:0}
/* 점검 템플릿 — 환경점검 기준 담당자 */
.env-base{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.env-base-l{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--ink)}
.env-base .select{flex:0 1 320px;min-width:0}
.env-base-d{flex:1 1 auto;min-width:0;font-size:11px;color:var(--slate-2)}
@media (max-width:760px){ .env-base .select{flex:1 1 100%} .env-base-d{flex:1 1 100%} }
.etg-cfm{display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.etg-cfm span{font-size:11.5px;color:var(--slate-2)}
.etg-cfm input:checked ~ span{color:var(--amber,#c98a1b);font-weight:700}

/* 펼친 속 */
.etg-table > tbody > tr.etg-d > td{padding:0 0 10px;background:var(--soft)}
.etg-load,.etg-empty{padding:16px;text-align:center;color:var(--slate-2);font-size:12.5px}
.etg-eq{margin:0 10px 8px}
.etg-eq-h{display:flex;align-items:center;gap:7px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  font-size:12px;font-weight:800;color:var(--ink);margin-bottom:5px}
.etg-eq-h i{font-style:normal;font-weight:600;font-size:11px;color:var(--slate-2)}
.etg-items{margin:0 10px;width:calc(100% - 20px);background:var(--panel)}
.etg-eq .etg-items{margin:0;width:100%}
.etg-items > tbody > tr > td{padding:6px 9px;font-size:12px}
.etg-no{width:46px;color:var(--slate-2)}

@media (max-width:760px){
  .etg-mode{width:100%}
  .etg-eq,.etg-items{margin-left:6px;margin-right:6px}
  .etg-items{width:calc(100% - 12px)}
  .etg-eq .etg-items{margin:0;width:100%}
}

/* 환경점검 — 설비별 묶음과 "이 설비만 보기" 필터 */
.env-eqgrp{margin-bottom:14px}
.env-eqgrp[hidden]{display:none}
.env-eqgrp-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;
  padding:7px 11px;margin-bottom:7px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--soft);font-size:12.5px;font-weight:800;color:var(--ink)}
.env-eqgrp-h i{font-style:normal;font-weight:600;font-size:11px;color:var(--slate-2)}
.env-eqf{display:flex;align-items:center;gap:7px;min-width:0;margin-left:10px}
.env-eqf>span{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--slate-2)}
.env-eqf .select{width:186px;max-width:46vw}
@media (max-width:560px){ .env-eqf{width:100%;margin:6px 0 0} .env-eqf .select{flex:1 1 auto;width:auto;max-width:none} }

/* 환경점검 — QR 없이 골라서 들어가는 자리 */
.env-selpick{margin-top:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 14px}
.env-selpick-r{display:flex;flex-wrap:wrap;align-items:flex-end;gap:9px}
.env-selpick-c{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 150px}
.env-selpick-c>span{font-size:11px;font-weight:700;color:var(--slate-2)}
.env-selpick-r .btn2{flex:0 0 auto;min-height:36px}
@media (max-width:560px){ .env-selpick-c{flex:1 1 100%} .env-selpick-r .btn2{width:100%;justify-content:center} }

/* 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)}
/*  스크롤 주체를 바깥(탭 영역) 하나로 — max-height 를 두면 안쪽 표가 따로 스크롤되어
    세로 스크롤바가 둘이 된다. 높이를 내용에 맡기면 세로로는 넘칠 것이 없어 막대가 사라지고,
    가로는 그대로 표 안에서 민다(overflow:auto 는 유지). */
/*  점검 이력 — 스크롤하는 것은 "목록" 하나뿐.
    탭 영역을 스크롤시키면 머리글을 붙일 곳이 표 바깥이 되어 sticky 가 먹지 않는다.
    그래서 이력 화면을 세로 flex 로 세우고, 가운데 표만 남는 높이를 먹으며 스크롤하게 한다.
      · 머리글 : 그 스크롤 상자 안에서 sticky top
      · 페이지바: 스크롤 상자 "밖" 이라 늘 아래에 그대로 있다(가려질 일이 없다)
    탭 영역은 내용이 꼭 맞으므로 스크롤바가 생기지 않는다 → 세로 막대는 여전히 하나. */
/*  ★"100%"로는 안 된다 — 탭 줄(점검 입력/점검 이력) 같은 형제가 위에 있어서,
    팬이 100% 를 먹으면 그 형제 높이만큼 넘친다. 탭 영역을 세로 flex 로 세우고
    팬은 "남는 높이"를 받게 한다. 그래야 안쪽 목록 높이가 정확히 떨어진다. */
/*  ★높이를 % 로 물려주면 중간에 auto 가 하나만 끼어도 사슬이 끊긴다.
    탭 영역부터 이력 화면까지 전부 세로 flex 로 세워, 남는 높이를 아래로 넘긴다. */
/*  .tabpane.on{display:block} 이 뒤에 있어 클래스 둘로는 못 이긴다 — 셋으로 쓴다. */
.tabpane.on.env-fill{display:flex;flex-direction:column;min-height:0}
.env-fill:not(.tabpane){display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:auto}
.env-listfill{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:auto}
.env-listfill > .gwrap{flex:1 1 auto;min-height:0;overflow:hidden}
.env-listfill .gscroll{height:100%;max-height:none;overflow:auto}
.env-listfill thead th{position:sticky;top:0;z-index:3;background:var(--soft)}
.env-listfill > .env-pgfix{flex:0 0 auto;position:static}
/* 근무표: 단일 스크롤(페이지 스크롤 없이 그리드 내부만, 뷰포트에 딱 맞게 반응형) */
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}
/* 개인설정 — 내 프로필(읽기 전용) */
.mypro{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mypro .av{width:44px;height:44px;flex:0 0 auto;position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--gold-050);color:var(--gold);display:grid;place-items:center;font-weight:700;font-size:15px}
.mypro .av .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mypro-id{min-width:0}
.mypro-id .nm{font-size:15px;font-weight:700}
.mypro-id .rl{font-size:12px;color:var(--slate-2);margin-top:2px}
.mypro-grid{display:grid;grid-template-columns:88px 1fr;gap:8px 14px;margin:0;
  border-top:1px solid var(--line);padding-top:14px;font-size:13px}
.mypro-grid dt{color:var(--slate-2);font-size:12px}
.mypro-grid dd{margin:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
/* 시스템 설정 — 관리자 화면 바로가기 */
.set-links{display:flex;flex-direction:column;gap:6px}
.set-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--soft);color:var(--ink);text-decoration:none;transition:background .16s ease}
.set-link:hover{background:var(--panel)}
.set-link .sl-i{width:16px;height:16px;flex:0 0 auto;color:var(--slate-2)}
.set-link .sl-x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.set-link .sl-t{font-size:13px;font-weight:600}
.set-link .sl-d{font-size:11.5px;color:var(--slate-2)}
.set-link .sl-a{width:14px;height:14px;flex:0 0 auto;color:var(--slate-2)}
.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}
/* 열 폭은 colgroup(roster.js)이 정하고, 여기서는 그 폭을 그대로 쓰라고만 한다.
   table-layout:fixed 가 아니면 브라우저가 셀 '내용'을 보고 폭을 다시 나눠서
   빈 칸에 '특근'을 넣는 순간 표가 통째로 재배치된다. width 는 JS 가 인라인으로 준다. */
table.r{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12px}
table.r th,table.r td{padding:0;text-align:center;overflow:hidden}
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;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
/* 이름이 길어도 열을 밀지 않는다 — 한 줄로 두고 넘치면 말줄임 */
table.r .emp .nm,table.r .emp .no{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
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}

/* ── 근무표 사원 칸 — 조·업무가 한눈에 들어오게 ─────────────────────────────
   근무표를 짤 때 제일 많이 보는 것이 "이 사람 무슨 업무, 몇 조" 인데 회색 잔글씨라 잘 안 보였다.
   · 행 왼쪽에 조 색 띠를 둘러 같은 조끼리 덩어리로 보이게 한다.
   · 업무(라인)는 본문 색으로 또렷하게, 조는 색 배지로.
   · 근무형태(2교대·주전) 배지는 예전 그대로 연한 색이라 조 배지(원색)와 헷갈리지 않는다. */
table.r th.emp,table.r td.emp{border-left:4px solid var(--jo-c,transparent)}
table.r td.emp.picked{background:color-mix(in srgb,var(--navy-050) 70%,var(--panel))}
table.r tbody tr:hover td.emp.picked{background:color-mix(in srgb,var(--navy-050) 85%,var(--panel))}
.rg-emp{display:flex;align-items:center;gap:9px;min-width:0;height:100%;cursor:pointer}
.rg-emp.rg-head{cursor:default}
.rg-ei{min-width:0;flex:1;display:block}
.rg-ei .nm,.rg-ei .no{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 사원 선택 체크박스 — 평소에는 있는 줄도 모르게, 고른 것만 눈에 띄게.
   기본 체크박스는 흰 상자라 표 왼쪽에 흰 점이 줄줄이 찍혀 시선을 끌었다.
   테두리만 어둡게 남기고, 고르면 빨간 V 만 그린다. */
.rg-ck{appearance:none;-webkit-appearance:none;position:relative;
  width:13px;height:13px;flex:0 0 auto;margin:0;cursor:pointer;
  border:1px solid #c3c9d4;border-radius:3px;
  background:transparent;transition:border-color .12s ease,background .12s ease}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rg-ck:not(:checked){border-color:#3a4150}}
:root[data-theme="dark"] .rg-ck:not(:checked){border-color:#3a4150}
/* 손을 올렸을 때만 살짝 밝아진다 */
.rg-emp:hover .rg-ck:not(:checked){border-color:var(--slate-2)}
/* 고른 상태 — 빨간 V. 상자는 어둡게 두고 표시만 빨강. */
.rg-ck:checked{border-color:#e5484d;background:rgba(229,72,77,.14)}
.rg-ck:checked::after{content:'';position:absolute;left:3.5px;top:.5px;width:4px;height:8px;
  border:solid #e5484d;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* 헤더(전체선택)는 부분선택 상태도 보여 준다 */
.rg-ck:indeterminate{border-color:#e5484d}
.rg-ck:indeterminate::after{content:'';position:absolute;left:2px;top:5px;width:7px;height:0;
  border-top:2px solid #e5484d;transform:none}
.rg-ck:disabled{opacity:.3;cursor:not-allowed}
/* 행 체크박스는 직접 못 누른다 — 켜고 끄는 일은 사원 칸 전체가 받아 드래그까지 처리한다.
   (머리글 전체선택은 예전처럼 직접 눌러 쓴다) */
.rg-emp:not(.rg-head) .rg-ck{pointer-events:none}
table.r td.emp{cursor:pointer;user-select:none}
/* 끌어서 고르는 동안에는 글자가 잡히지 않게 */
body.rg-ckdrag{user-select:none;cursor:pointer}

/* [연장]을 고른 동안 — 근무조(주간/야간)가 없는 칸은 애초에 넣을 수 없다.
   누르기 전에 커서로 알려 준다(눌러 보고 아무 일도 안 일어나는 것이 제일 나쁘다). */
table.r.ot-ext .cell.nojo{cursor:not-allowed}
/* 그래도 눌렀을 때 — 그 칸만 잠깐 붉게 깜빡인다 */
.cell.nope{animation:rgNope .6s ease}
@keyframes rgNope{
  0%,100%{box-shadow:none}
  20%,60%{box-shadow:inset 0 0 0 2px #e5484d}
}
@media (prefers-reduced-motion:reduce){.cell.nope{animation:none;box-shadow:inset 0 0 0 2px #e5484d}}
/* 업무(라인) — 회색 잔글씨 → 본문 색, 한 단계 크게 */
table.r .emp .no .rg-line{font-family:var(--font);font-size:11.5px;font-weight:600;color:var(--ink)}
table.r .emp .no .rg-part{font-family:var(--font);font-size:11px;color:var(--slate-2);margin-right:5px}
table.r .emp .no .rg-no{font-family:var(--mono);font-size:11px;color:var(--slate-2)}
/* 조 배지 — 조마다 다른 색(원색). 색만으로도 구분되지만 글자도 함께 읽히게 흰 글씨. */
.rg-jo{display:inline-block;margin-left:5px;padding:0 6px;border-radius:999px;background:var(--c);
  color:#fff;font-family:var(--font);font-size:9.5px;font-weight:700;line-height:15px;vertical-align:1px}
/* 일괄·복사 적용 범위 안내 */
.rg-scope{font-size:10.5px;color:var(--slate-2);margin-left:6px;white-space:nowrap}
.rg-of{font-size:11px;color:var(--slate-2);font-weight:600}
/* 우클릭(모바일은 길게 누르기) 메뉴 */
.rg-menu{position:fixed;z-index:9999;min-width:210px;padding:5px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.rg-mh{padding:5px 9px 6px;font-size:11px;font-weight:700;color:var(--slate-2);border-bottom:1px solid var(--line);margin-bottom:4px}
.rg-mi{display:block;width:100%;text-align:left;padding:8px 9px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer}
.rg-mi:hover:not(:disabled){background:var(--soft)}
.rg-mi:disabled{opacity:.45;cursor:not-allowed}
.rg-mi-s{display:block;font-size:10.5px;font-weight:500;color:var(--slate-2);margin-top:2px}

/* 좁은 화면 — 요약줄이 한 줄로 고정돼 있어 툴바가 가로로 넘쳤다. 넘기지 말고 줄을 바꾼다. */
@media (max-width:520px){
  .roster-pane .tb-sum{white-space:normal;line-height:1.7}
  .roster-pane .tb-sum .dot{margin:0 5px}
  .roster-pane .palette{flex-wrap:wrap}
  .roster-pane .legend{flex-wrap:wrap}
  .rg-scope{margin-left:0}
}
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%;min-width:0;height:auto;min-height:30px;position:relative}
.cell.rcell>*{max-width:100%}
.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;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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 1.5px var(--gold);
  cursor:default}   /* 확정(읽기전용) 요소 = 노랑 테두리로만 구분(글씨 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)}   /* 연장 세콤 이상치(확인 필요) */
/* 주 52시간 초과 — 그 주의 칸을 빨간 테두리로. 노랑(확정)과 뜻이 다르므로 색을 나눈다:
   노랑 = 그룹웨어가 확정한 것(못 고침) / 빨강 = 법정 한도를 넘은 것(고쳐야 저장됨) */
.cell.rcell.over52{border-radius:var(--r-sm);box-shadow:inset 0 0 0 2px var(--red)}
td:has(.cell.over52){background:color-mix(in srgb,var(--red-050) 45%,transparent)}
.lg .sw.sw-over52{background:transparent;box-shadow:inset 0 0 0 2px var(--red)}
.lg .sw.sw-conf{background:transparent;box-shadow:inset 0 0 0 2px var(--gold)}   /* 확정(그룹웨어 승인·휴직) */
.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:var(--r-sm);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} }

/* 차트 공통 — 데이터 없음 표시(chart.js) */
.chart-empty{color:var(--slate-2);font-size:12.5px;display:grid;place-items:center;min-height:120px}

/* ===== 근태 이상자(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:var(--r-sm);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}
/* 상단 우측 유틸 — 왼쪽 탭과 똑같이 헤더 라인 높이를 꽉 채우는 세그먼트.
   각 박스가 헤더 상단선~하단선에 밀착(위아래 여백 0), 인접 테두리는 -1px 로 겹쳐 한 줄로 만든다.
   오른쪽 padding 0 → 마지막(로그아웃)이 헤더 우측 경계선에 딱 붙는다. */
.tabutils{display:flex;align-items:stretch;gap:0;flex:0 0 auto;padding:0 0 0 10px;margin-left:auto}
.tabutils > *{align-self:stretch}
.tabutils > * + *{margin-left:-1px}          /* 인접 세로 테두리 겹치기 */
.tabutils .noti-wrap{display:flex}
.tabutils .iconbtn{width:44px;height:auto;align-self:stretch;box-sizing:border-box;
  border:1px solid var(--line);border-radius:0;background:transparent;color:var(--gold);
  box-shadow:none;display:grid;place-items:center}
/* hover — 한 단계 또렷한 골드(다크는 밝게, 라이트는 진하게 보인다) */
.tabutils .iconbtn:hover{background:var(--soft);color:color-mix(in srgb,var(--gold) 70%,var(--ink));transform:none}
.tabutils .iconbtn:active{transform:none}
/* 토글형 버튼(편집모드 등) 켜짐 — 배경박스 대신 골드 강조 */
.tabutils .iconbtn.on{color:var(--gold);background:var(--gold-050);border-color:var(--gold);position:relative;z-index:1}
.tabutils .idpill{height:auto;align-self:stretch;box-sizing:border-box;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:0;background:transparent;padding:0 12px;color:var(--gold)}
/* 탭 바 — 위·왼쪽 경계선에 플러시(여백 0). 탭은 내용에 맞는 자연 너비이며 가로로 늘리지 않는다.
   오른쪽에 남는 공간은 비워 두고, 전체 폭 구분선은 .tabrow 의 border-bottom 이 담당한다. */
.tabstrip{display:flex;align-items:stretch;gap:2px;padding: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:var(--r-sm)}
/* 라벨(좌) · 닫기(우). 너비는 내용에 맞춤(flex 늘림 없음), 높이만 탭바 전체 높이로 통일. */
/* 배경은 기본값(비활성=--soft / 활성=--panel). 탭끼리는 얇은 --line 테두리로 경계를 만든다. */
.tab{flex:0 0 auto;max-width:210px;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:0 8px 0 12px;border:1px solid var(--line);border-radius:0;background:var(--soft);color:var(--slate);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;position:relative;transition:background .16s ease,color .16s ease,border-color .16s ease}
.tab:hover{color:var(--ink)}
/* 활성 탭: 탭 전체를 감싸는 골드 테두리로 구분(상단 바 대체).
   inset 그림자로 1px 덧대 2px처럼 또렷하게 — 레이아웃은 그대로. */
.tab.on{background:var(--panel);color:var(--ink);font-weight:700;
  border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.tab .tlabel{flex:0 1 auto;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 .tlabel .tnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.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:var(--r-sm);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:var(--r-sm);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:var(--r-sm);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) ── */
/* 출퇴근현황 셀: 시각 상시 표시 + 상태/특이사항 배지. 균일 크기(들쭉날쭉 방지). */
/* 날짜 칸 — 시각 두 줄이 들어갈 만큼만 남기고 여백을 걷었다(56 → 44px). */
.at-table td.at-cell{text-align:center;padding:2px 3px;min-width:52px;height:44px;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자 이름도 줄바꿈 안 깨지게) */
/*  세 줄(이름·담당·주전)이 행 높이를 정한다 — 줄간격을 바짝 붙여야 행이 실제로 낮아진다.
    날짜 칸(44px)보다 낮아지는 선까지만 줄이고, 글씨는 읽히는 크기를 지킨다. */
.at-table td.emp{vertical-align:middle;padding:2px 9px;line-height:1.15}
.at-table td.emp .nm{white-space:nowrap;font-size:12px}
.at-table td.emp .no{font-size:10px;margin-top:0}
.at-table .emp-wg{margin:1px 0 0}
.at-table .emp-wg .wgtag{font-size:9px;padding:0 5px;line-height:1.35}
.at-table .emp-wg .wgtag{margin-left:0}
.atc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.05}
.atc-b{font-size:9px;font-weight:700;padding:0 5px;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.2;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:0 5px;border-radius:var(--r-sm);line-height:1.3}
.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:var(--r-sm);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:var(--r-sm);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:104px;flex:0 0 104px;font-size:12px;font-weight:700;color:var(--slate);padding-top:7px}
.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}
/* 태블릿 구간(769~860px)에서는 표를 유지하되 문서번호 열만 접는다.
   768px 이하는 아래에서 카드형 행 스택으로 바뀌므로 열을 숨기면 안 된다(정보가 사라진다). */
@media (min-width:769px) and (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}
}

/* ── 전자결재 모바일(Phase E) ─────────────────────────────────────────
   PC와 같은 화면(ea-box.js)을 그대로 쓰고 배치만 바꾼다. */
.ea-hubseg{margin:0 0 12px}
@media (max-width:768px){
  .eab-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;scrollbar-width:none}
  .eab-tabs::-webkit-scrollbar{display:none}
  .eab-tab{flex:0 0 auto;min-height:40px}
  .eab-search{gap:6px}
  .eab-search .eac-in{flex:1 1 132px;min-width:0;min-height:40px}
  .eab-search .btn2{min-height:40px}
  .eab-search .eac-lb{font-size:11.5px}
  .eab-t{min-width:0}
  .eab-title{white-space:normal;text-align:left}
  /* 처리 버튼은 카드 맨 아래에서 한 줄로 — 터치 타깃 40px */
  .eab-table td.eab-a{justify-content:flex-start;flex-wrap:wrap;gap:6px;padding-top:8px;text-align:left}
  .eab-b{min-height:40px;padding:0 12px}
  .ea-hubseg{width:100%}
  .ea-hubseg .sf-sg{flex:1 1 0;min-height:40px}
}

/* ══════════ 전자결재 기준정보(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:var(--r-sm);flex:0 0 auto}
.chart-legend .ck.line{height:3px;border-radius:var(--r-sm)}
.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:var(--r-sm)}
.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:var(--r-sm) 0 0 0}
.qs-frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 var(--r-sm) 0 0}
.qs-frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 var(--r-sm)}
.qs-frame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 var(--r-sm) 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:var(--r-sm);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:2px;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}
/* ── 히어로밴드 날씨·미세먼지 — 시간·날짜 라인에 붙는 요약 한 줄 ──
   히어로는 사진 위 흰 글씨라 다크/라이트 모두 같은 톤을 쓴다. */
.dh-wx{display:inline-flex;align-items:center;gap:10px;color:#dbe3ef;font-size:12.5px;white-space:nowrap}
.dh-wx[hidden]{display:none}
.wx-now{display:inline-flex;align-items:center;gap:5px}
.wx-now b{font-family:var(--mono);font-size:14px;font-weight:700;color:#fff}
.wx-i{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#ffd98a;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.wx-i .wx-ray{stroke-width:1.5}
.wx-i .wx-drop{stroke:#9ec9ff}
.wx-x{color:#c7d2e3}
.wx-air{display:inline-flex;align-items:center;gap:5px}
.wx-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#8a94a6}
.wx-dot.good{background:#37d67a} .wx-dot.norm{background:#5aa9ff}
.wx-dot.bad{background:#ffb648}  .wx-dot.vbad{background:#ff6f5a}


/* 생활기상지수 — 날씨 아이콘을 누르면 펼쳐진다 */
.wx-life{display:inline-flex;align-items:center;gap:10px;padding-left:12px;
  border-left:1px solid rgba(255,255,255,.18)}
.wx-life[hidden]{display:none}
.wx-li{display:inline-flex;align-items:center;gap:4px;color:#c7d2e3;font-size:11.5px}
.wx-li i{font-style:normal;color:#93a0b4}
.wx-li b{font-weight:700;padding:1px 6px;border-radius:var(--r-sm);font-size:10.5px}
.wx-li b.good{background:rgba(55,214,122,.18);color:#8ff0bb}
.wx-li b.norm{background:rgba(90,169,255,.18);color:#a9cfff}
.wx-li b.warn{background:rgba(255,182,72,.20);color:#ffd08a}
.wx-li b.bad{background:rgba(255,111,90,.22);color:#ffa596}
@media (max-width:1400px){ .wx-life{display:none} }

/* 기상특보 — 발효 중일 때만 나타난다(히어로밴드) */
.wx-warn{display:inline-flex;align-items:center;gap:6px}
.wx-wn{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);white-space:nowrap;
  border:1px solid transparent}
.wx-wn.bad{background:rgba(214,59,40,.92);color:#fff}
.wx-wn.warn{background:rgba(224,141,40,.92);color:#fff}
.wx-wn.muted{background:rgba(255,255,255,.16);color:#dbe3ef;border-color:rgba(255,255,255,.28)}

/* 기상특보 — 안전보건 화면 상단 배너 */
.sf-warn{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--red-050);border-left:3px solid var(--red);font-size:12.5px}
.sf-warn > b{color:var(--red);font-weight:700}
.sf-wn{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);color:var(--slate)}
.sf-wn.bad{color:var(--red);border-color:var(--red)}
.sf-wn.warn{color:var(--gold);border-color:var(--gold)}
.sf-wn-d{color:var(--slate);margin-left:2px}

/* 외부데이터 위젯(유가·금속시세) — 기존 대시보드 카드 톤 그대로, 최소 라운드 */
.dh-feed-b{display:flex;flex-direction:column;height:100%;padding:10px 14px;box-sizing:border-box;gap:4px;overflow:hidden}
.dh-feed-b .dh-lab{flex:0 0 auto;display:flex;align-items:baseline;gap:6px}
.dh-feed-b .dh-lab em{font-style:normal;font-size:10.5px;color:var(--slate-2);font-weight:600}
.dh-frows{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:0;overflow:hidden}
.dh-frow{display:flex;align-items:baseline;gap:6px;font-size:11.5px;line-height:1.3;min-height:0}
.dh-fn{flex:1 1 auto;color:var(--slate);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-fv{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--ink)}
.dh-fc{font-style:normal;font-size:10.5px;font-weight:700;flex:0 0 auto;min-width:42px;text-align:right}
.dh-fc.up{color:var(--gold)} .dh-fc.down{color:var(--navy)} .dh-fc.flat{color:var(--slate-2)}
.dh-fcap{flex:0 0 auto;font-size:9.5px;color:var(--slate-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){ .dh-frow{font-size:12.5px} .dh-fv{font-size:14px} }
@media (max-width:860px){ .wx-warn{gap:4px} .wx-wn{font-size:10.5px;padding:1px 6px} }
/* 좁은 화면 — 예전에는 자리가 없다고 체감·습도를 감췄는데, 그게 가장 궁금한 값이다.
   감추는 대신 글자·간격을 줄여 '23° · 체감 25° · 습도 60% · 미세 나쁨' 이 한 줄에 들어가게 한다.
   그래도 모자라면 줄바꿈으로 흘러내리게 두고(가로 오버플로 0), 구분점으로 읽기 쉽게. */
@media (max-width:860px){
  .dh-wx{gap:6px;font-size:11.5px;flex-wrap:wrap}
  .wx-x{font-size:11px}
  .wx-feel::before,.wx-hum::before,.wx-air::before{content:'·';margin-right:5px;opacity:.5}
}
@media (max-width:400px){
  .dh-wx{gap:5px;font-size:11px}
  .wx-x{font-size:10.5px}
}
/* 오늘 근무유형·출퇴근은 시계 밴드에서 '내 근태' 카드로 옮겼다 — 밴드는 시계·상태·날짜·날씨만 남는다. */
.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-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-nsrc{font-style:normal;font-size:10px;font-weight:700;margin-right:5px;padding:1px 5px;
  border-radius:5px;background:var(--chip,rgba(127,140,170,.16));color:var(--slate);vertical-align:1px}

/* 공지 분류 배지 — 알약 모양, 옅은 바탕 + 같은 계열 글씨, 테두리 없음.
   ★색은 data-cat 으로만 고른다. 배지를 쓰는 화면이 늘어도 여기 한 곳만 보면 된다.
     (분류 키는 서버 NoticeCatalog 가 정하는 HR·SAFETY·IT·ENV 그대로다) */
[data-cat]{border:0}
[data-cat="IT"]    {background:var(--cat-it-bg)    !important; color:var(--cat-it)     !important}
[data-cat="SAFETY"]{background:var(--cat-safety-bg)!important; color:var(--cat-safety) !important}
[data-cat="ENV"]   {background:var(--cat-env-bg)   !important; color:var(--cat-env)    !important}
[data-cat="HR"]    {background:var(--cat-hr-bg)    !important; color:var(--cat-hr)     !important}
.dh-nf{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.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-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-heroact{position:absolute;top:12px;right:14px;display:flex;gap:8px}
/* 공공누리 제1유형 배지 — 배너 안쪽 우상단. 출처 문구는 툴팁으로만 보여 준다. */
.dh-kogl{position:absolute;top:10px;right:14px;z-index:3;display:block;line-height:0;
  background:rgba(255,255,255,.90);padding:3px 5px;border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.28);cursor:help}
.dh-kogl img{height:16px;width:auto;display:block}
/* 편집·테마 버튼이 있는 화면(모바일)에서는 그 아래로 내려 겹치지 않게 한다 */
.dh-hero:has(.dh-heroact) .dh-kogl{top:52px}
@media (max-width:860px){ .dh-kogl{top:52px;right:12px} .dh-kogl img{height:14px} }
.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}
.dh-ghostbtn.on{background:var(--gold);color:#1a1408;border-color:var(--gold)}

/* 타일 배치 — 처음 배치 그대로 되돌리고, 추가한 두 번째 영상만 우측 가로 카드로.
   내 근태(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}
.mp-foot .lid{font-size:10.5px}

/* [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(--rose-4);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dh-qa{font-size:11.5px;font-weight:600;color:var(--rose-4)}
/* background-clip:text 지원 시에만 그라데이션 글자로. 미지원이면 위의 단색이 그대로 보인다. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .dh-qt,.dh-qa{background-image:var(--quote-text);color:transparent;
    -webkit-background-clip:text;background-clip:text}
  .dh-qa{width:fit-content;max-width:100%}
}
@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}
/* 프로필 블록 = 개인설정 진입 버튼 */
.mp-foot-btn{cursor:pointer;transition:background .16s ease}
.mp-foot-btn:hover{background:var(--soft)}
.mp-foot-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.mp-foot-a{width:14px;height:14px;flex:0 0 auto;margin-left:8px;color:var(--slate-2);opacity:0;transition:opacity .16s ease}
.mp-foot-btn:hover .mp-foot-a,.mp-foot-btn:focus-visible .mp-foot-a{opacity:1}
/* 사이드바가 접히면 텍스트가 사라지므로 화살표도 숨긴다 */
.panel-collapsed .mp-foot-a{display:none}
/* ═════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   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:var(--r-sm);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:7px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:0 9px;height:32px;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:var(--r-sm);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:var(--r-sm);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-kind{display:inline-flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.rb-kind>span{font-size:12.5px;color:var(--slate)}
.rb-kind .select{width:128px}
@media (max-width:760px){
  .rb-bar{flex-wrap:wrap}
  .rb-bar .sp{display:none}
  .rb-search{flex:1 1 100%}
  .rb-kind{flex:1 1 auto}
  .rb-kind .select{flex:1 1 auto;width:auto;min-width:0}
}
.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)은 이제 감싸개다 — 등급 이름 버튼(.rb-itb)과 '인원 N' 버튼을 함께 담는다.
    예전엔 줄 자체가 <button> 이었는데, 그 안에 또 누를 것을 넣으면 규칙에 어긋나고
    키보드 이동 순서도 꼬여서 이렇게 나눴다. 겉모습은 그대로다. */
/*  ★이 줄은 <div> 로도 <button> 으로도 쓰인다(권한등급 목록은 div, 계정 목록은 button).
    버튼으로 쓰일 때 브라우저 기본 꼴(흰 배경·가운데 정렬·제 글꼴)이 그대로 남아,
    어두운 화면에서 그 줄만 흰 종이처럼 떠 보였다 — 고르지 않은 줄은 배경을 준 적이 없어서다.
    그래서 여기서 버튼 기본값을 모두 지우고, 바탕은 투명으로 둔다(둘러싼 패널 색이 비친다). */
.rb-item{appearance:none;-webkit-appearance:none;background:transparent;color:inherit;font:inherit;
  text-align:left;cursor:pointer;margin:0;
  display:block;width:100%;border:0;border-bottom:1px solid var(--line);
  padding:9px 12px;border-left:2px solid transparent}
.rb-itb{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer}
/*  등급 목록 줄 — 글자 밖 여백까지 눌리는 영역이다(커서도 줄 전체에서 손가락) */
.rb-item[data-g]{cursor:pointer}
.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-gbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.rb-gb{height:26px;padding:0 11px;font:inherit;font-size:12px;font-weight:600;color:var(--slate);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.rb-gb:hover{color:var(--ink);border-color:var(--slate-2)}
.rb-gb.on{color:var(--navy);border-color:var(--navy);background:var(--navy-050)}
.rb-gsum{font-variant-numeric:tabular-nums}
.rb-perm{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.rb-perm.one{grid-template-columns:1fr}
.rb-perm.one .rb-parea{max-width:860px}
.rb-perm.one .rb-ptable{max-height:none}
.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:minmax(0,1fr) 66px 46px 46px;align-items:center;gap:6px;
  padding:5px 11px;min-height:30px;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}
}

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 커스터마이즈 — 이동/리사이즈/추가/편집.
   색은 전부 토큰(var) 기반 → 라이트·다크 자동 대응. radius 는 기존 --dhr 유지.
   ══════════════════════════════════════════════════════════════════════════ */
/* 툴바 */
.dh-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.dh-barh{font-size:13px;font-weight:700;color:var(--ink)}
.dh-barx{font-size:11.5px;color:var(--slate-2)}
.dh-bar .sp{flex:1}
.dh-saved{font-size:11.5px;color:var(--gold);opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.dh-saved.on{opacity:1}
.dh-reset{height:28px;padding:0 11px;border:1px solid var(--line);background:var(--panel);color:var(--slate);
  border-radius:var(--r-sm);font-size:12px;font-weight:600}
.dh-reset:hover{border-color:var(--navy);color:var(--navy)}

/* 첫 등장 이후에는 재렌더 시 애니메이션 없이 즉시 표시(드래그가 끊겨 보이지 않게) */
.dh-bento.dh-ready .dh-t{opacity:1;transform:none;animation:none}
.dh-bento.dh-ready .dh-t.dh-drag{transform:none}

/* 드래그 중 */
.dh-bento.dh-dragging{cursor:grabbing}
/* 드롭 자리표시자 — 끄는 동안 '여기 놓입니다'만 보여 준다(다른 카드는 그대로) */
.dh-ph{border:2px dashed var(--gold);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--gold) 10%,transparent);pointer-events:none;z-index:1}
/* 드롭 후 자리 이동은 짧게 부드럽게 */
.dh-bento .dh-t:not(.dh-drag){transition:grid-column .18s var(--ease),grid-row .18s var(--ease)}
@media (prefers-reduced-motion:reduce){ .dh-bento .dh-t{transition:none!important} }
.dh-bento.dh-dragging .dh-t{transition:none}
.dh-t.dh-drag{z-index:30;box-shadow:var(--shadow);border-color:var(--gold);opacity:.92;cursor:grabbing;
  pointer-events:none;transition:none}
.dh-t.dh-rzing{border-color:var(--gold);transition:none}

/* 리사이즈 핸들 — PC 전용, hover 시에만 보인다 */
.dh-rz{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:12;
  opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.dh-rz::before{content:"";position:absolute;right:3px;bottom:3px;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);border-radius:0 0 2px 0}
.dh-t:hover .dh-rz{opacity:.9}

/* 카드 메뉴 버튼(⋯) — 모바일에서는 항상 보이게 */
.dh-more{position:absolute;top:8px;right:8px;z-index:12;display:flex;align-items:center;justify-content:center;
  gap:2px;width:26px;height:22px;border:0;border-radius:var(--r-sm);background:rgba(0,0,0,.34);
  opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.dh-more span{width:3px;height:3px;border-radius:50%;background:#fff;display:block}
.dh-t:hover .dh-more{opacity:1}
.dh-more:hover{background:rgba(0,0,0,.6)}

/* 컨텍스트 메뉴 */
.dh-cmenu{position:fixed;z-index:90;min-width:150px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column}
.dh-cmenu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  padding:8px 10px;border-radius:var(--r-sm);font-size:13px;color:var(--ink)}
.dh-cmenu button:hover{background:var(--soft)}
.dh-cmenu button.danger:hover{background:var(--red-050);color:var(--red)}
.dh-cmenu svg{width:14px;height:14px}

/* '+' 카드 · 바로가기 카드 */
.dh-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px dashed var(--line);background:transparent;color:var(--slate-2);min-height:96px}
.dh-add:hover{border-color:var(--gold);color:var(--gold);transform:none;box-shadow:none}
.dh-addi svg{width:20px;height:20px}
.dh-addl{font-size:11.5px;font-weight:600}
.dh-link{display:flex;flex-direction:column;justify-content:space-between}
.dh-linkic{display:block;color:var(--gold)}
.dh-linkic svg{width:22px;height:22px}
/* 글귀 카드 — 원래처럼 테두리·배경 없이 */
.dh-quotec{background:transparent;border-color:transparent;padding:12px 6px}
.dh-quotec:hover{box-shadow:none;border-color:transparent}

/* 추가/편집 다이얼로그 */
.dh-modal{position:fixed;inset:0;z-index:95;background:rgba(6,10,18,.5);display:grid;place-items:center;padding:16px}
.dh-mbox{width:min(460px,100%);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
.dh-mh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:14px;font-weight:700;
  border-bottom:1px solid var(--line)}
.dh-mx{background:none;border:0;color:var(--slate);display:flex}
.dh-mx svg{width:16px;height:16px}
.dh-mb{padding:14px}
.dh-mf{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.dh-mf>span:first-child{width:56px;flex:0 0 56px;font-size:12px;font-weight:700;color:var(--slate)}
.dh-mf input,.dh-mf select{flex:1;min-width:0;height:34px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r-sm);padding:0 10px;font-family:var(--font);font-size:13.5px;color:var(--ink)}
.dh-mf input:focus,.dh-mf select:focus{outline:0;border-color:var(--navy)}
.dh-mseg{display:flex;gap:4px}
.dh-msb{height:30px;padding:0 12px;border:1px solid var(--line);background:var(--panel);color:var(--slate);
  border-radius:var(--r-sm);font-size:12.5px;font-weight:600}
.dh-msb.on{border-color:var(--navy);background:var(--navy-050);color:var(--navy)}
.dh-mhid{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dh-mhl{font-size:11.5px;font-weight:700;color:var(--slate);margin-bottom:7px}
.dh-mhb{display:inline-flex;height:28px;padding:0 10px;margin:0 6px 6px 0;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);border-radius:var(--r-sm);font-size:12px}
.dh-mhb:hover{border-color:var(--gold);color:var(--gold)}
.dh-mfoot{display:flex;justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--line)}

@media (max-width:860px){
  /* 모바일: 리사이즈 핸들 숨기고, 카드 메뉴 버튼은 항상 노출(터치에는 hover 가 없다) */
  .dh-rz{display:none}
  .dh-more{opacity:1}
  .dh-bar{gap:8px}
  .dh-barx{display:none}
  .dh-t.dh-drag{opacity:.9}
}

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 통합 v2 — 하단 바로가기를 같은 그리드로 흡수 + 툴바 제거.
   ══════════════════════════════════════════════════════════════════════════ */
/* 안내 툴바 제거 → 히어로와 카드 사이 간격만 남긴다 */
.dh-bar{display:none}
.dh-bento{margin-top:14px}

/* 저장 표시 — 헤더를 없앴으므로 화면 우하단에 잠깐 뜨는 칩으로 */
.dh-saved{position:fixed;right:18px;bottom:126px;z-index:60;padding:6px 12px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);color:var(--slate);font-size:11.5px;
  box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:opacity var(--dur-mid) var(--ease)}
.dh-saved.on{opacity:1}

/* 하단 바로가기 카드(구 .dh-q .dh-qi) — 이제 그리드 카드 */
.dh-nav{display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.dh-navic{display:block;color:var(--gold)}
.dh-navic svg{width:22px;height:22px}
.dh-navl{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
:root[data-theme="dark"] .dh-nav .dh-navl{color:var(--ink)}

/* 확인 다이얼로그 */
.dh-mconfirm{width:min(360px,100%)}
.dh-mmsg{margin:0;font-size:13.5px;color:var(--ink);line-height:1.6}
.dh-mfoot{gap:8px}
.dh-mcancel{height:34px;padding:0 14px;border:1px solid var(--line);background:var(--panel);color:var(--slate);
  border-radius:var(--r-sm);font-size:13px;font-weight:600}
.dh-mcancel:hover{border-color:var(--navy);color:var(--navy)}
.dh-mbox .btn2{height:34px}

@media (max-width:860px){
  .dh-saved{right:12px;bottom:70px}
  .dh-navl{font-size:13px}
}

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 v3 — 12컬럼 그리드.
   카드 가로를 1/4(3) · 1/3(4) · 1/2(6) · 2/3(8) · 3/4(9) · 전체(12) 로 조절.
   배치는 JS 가 인라인 grid-column/grid-row 로 지정하므로 여기서는 컬럼 수만 정의한다.
   모바일(≤860px)은 뒤쪽 미디어쿼리에서 1열을 !important 로 강제 — 그대로 유지.
   ══════════════════════════════════════════════════════════════════════════ */
.dh-bento{grid-template-columns:repeat(12,1fr)}
/* 12컬럼에서는 카드 폭이 좁아질 수 있으므로 넘침만 방지 */
.dh-nav .dh-navl,.dh-link .dh-name{overflow:hidden;text-overflow:ellipsis}

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 v4 — 리사이즈 조작성 + 12컬럼 축소 보증.
   ══════════════════════════════════════════════════════════════════════════ */
/* ① 트랙이 내용 때문에 벌어지지 않게: 1fr = minmax(auto,1fr) 이라 긴 텍스트가 열을 밀어낸다.
      minmax(0,1fr) + 카드 min-width:0 으로 '지정한 span 폭'이 그대로 지켜지게 한다. */
.dh-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
.dh-bento>.dh-t,.dh-bento>*{min-width:0}
/* 카드 안 텍스트가 좁은 폭에서 카드를 밀어내지 않도록 */
.dh-t .dh-name,.dh-t .dh-lab,.dh-t .dh-small,.dh-t .dh-navl,.dh-t .dh-big{min-width:0;overflow-wrap:anywhere}

/* ② 리사이즈 핸들 — 18px 는 너무 작아 잡다가 '카드 이동'으로 빠진다.
      26px 로 키우고 PC 에서는 항상 옅게 보이게(발견 가능성), hover 시 뚜렷하게. */
.dh-rz{width:26px;height:26px;opacity:.28}
.dh-rz::before{right:5px;bottom:5px;width:11px;height:11px;border-width:2.5px}
.dh-t:hover .dh-rz{opacity:1}
.dh-rz:hover{opacity:1}
@media (max-width:860px){ .dh-rz{display:none} }   /* 모바일은 리사이즈 없음(기존 유지) */

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 v5 — 리사이즈 손잡이 3종.
   모서리만으로는 '가로만 줄이기'가 어렵다(정확히 코너를 잡아야 함).
   오른쪽 가장자리 전체 = 가로 전용, 아래 가장자리 전체 = 세로 전용 띠를 추가.
   ══════════════════════════════════════════════════════════════════════════ */
.dh-rz-e,.dh-rz-s{position:absolute;z-index:11;opacity:0;background:var(--gold);
  transition:opacity var(--dur-fast) var(--ease);touch-action:none}
/* 오른쪽 가장자리 — 가로 조절(잡기 쉽도록 폭 10px, 모서리 26px 는 비워둔다) */
.dh-rz-e{top:0;right:0;width:10px;bottom:26px;cursor:ew-resize}
/* 아래 가장자리 — 세로 조절 */
.dh-rz-s{left:0;right:26px;bottom:0;height:10px;cursor:ns-resize}
.dh-t:hover .dh-rz-e,.dh-t:hover .dh-rz-s{opacity:.22}
.dh-rz-e:hover,.dh-rz-s:hover{opacity:.75}
.dh-rz{touch-action:none;z-index:12}
@media (max-width:860px){ .dh-rz-e,.dh-rz-s{display:none} }   /* 모바일 리사이즈 없음(기존 유지) */

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 v6 — 모바일 단일 컬럼 세로 스택 (★파일 맨 뒤에 두어야 함)
   앞서 선언한 .dh-bento{grid-template-columns:repeat(12,...)} 가 미디어쿼리
   밖에 있어, 이 블록이 뒤에 오지 않으면 모바일에서도 12컬럼이 적용되어
   카드가 1/12 폭으로 찌부러진다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  /* 그리드 대신 단순 세로 스택 — 저장된 span 이 어떤 값이든 영향받지 않는다 */
  .dh-bento{display:flex;flex-direction:column;gap:10px;margin-top:12px;grid-template-columns:none}
  .dh-bento>*{grid-column:auto !important;grid-row:auto !important;width:100%;min-width:0}

  /* 카드 높이 — 세로로 눌리지 않게 넉넉히 */
  .dh-t{min-height:112px;height:auto}
  .dh-comp,.dh-month,.dh-pay,.dh-nav,.dh-link{min-height:88px}
  .dh-quotec{min-height:0;padding:8px 4px}
  .dh-notice{min-height:190px}
  .dh-ea{min-height:132px}
  /* 사진·영상 카드 = 16:9 배너 */
  .dh-photo,.dh-vid{aspect-ratio:16/9;min-height:0}
  .dh-vid video{object-fit:cover}

  /* 커스터마이즈 비활성 — 손잡이는 JS 가 만들지도 않지만 CSS 로도 확실히 차단 */
  .dh-rz,.dh-rz-e,.dh-rz-s{display:none !important}
  .dh-t{cursor:default}
  button.dh-t{cursor:pointer}

  /* '+ 바로가기 추가' — 맨 아래 전폭 버튼 */
  .dh-add{flex-direction:row;justify-content:center;gap:8px;min-height:52px;aspect-ratio:auto}
  .dh-add .dh-addl{font-size:13px}
}

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 v7 — 세로 반 칸(48px) 그리드.
   예전 행 높이가 96px 라 세로가 96px 단위로만 조절됐다. 행을 절반으로 낮추고
   기본 h 를 2배로 잡아(서버 Defaults) 겉보기 크기는 그대로 두면서
   카드 높이를 지금의 절반까지 줄일 수 있게 한다.
   ※ 이 규칙은 v6 모바일 블록(display:flex)보다 뒤에 오지만, flex 에서는
      grid-auto-rows 가 무시되므로 모바일 세로 스택에는 영향이 없다.
   ══════════════════════════════════════════════════════════════════════════ */
.dh-bento{grid-auto-rows:48px}

/* ══════════════════════════════════════════════════════════════════════════
   아이콘 = IBM Carbon (Apache-2.0) 32x32 세트 — fill 기반.
   기존 세트는 stroke 기반이었어서 svg.i 규칙을 뒤집는다. 색은 currentColor 라
   다크/라이트·활성(골드) 상태를 그대로 따라간다.
   ══════════════════════════════════════════════════════════════════════════ */
svg.i{fill:currentColor;stroke:none;stroke-width:0}
/* 레일·트리에서 16px 기준(요청 사양). 그 외는 기존 18px 유지 */
.ir-mod svg.i,.mp-item svg.i,.mp-ghead svg.i,.mp-smod svg.i{width:16px;height:16px}
.tree-caret svg.i{width:14px;height:14px}

/* ── 메뉴 검색 ── */
/* 메뉴 검색 — 상단 헤더(.mp-head)·하단 프로필(.mp-foot)과 같은 '밴드'로 사이드바 폭에 꽉 차게.
   좌우 여백 0, 모서리는 각짐(최소). 포커스는 레이아웃 변화 없는 inset 밑줄로 표시. */
.mp-search{display:flex;align-items:center;gap:8px;margin:0;padding:0 14px;height:38px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--soft)}
.mp-search:focus-within{background:var(--panel);box-shadow:inset 0 -2px 0 var(--navy)}
.mp-search svg.i{width:15px;height:15px;color:var(--slate-2);flex:0 0 auto}
.mp-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:var(--font);font-size:13px;color:var(--ink)}
.mp-search input::placeholder{color:var(--slate-2)}
.mp-search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6);cursor:pointer}
/* 사이드바 접힘 상태에서는 검색창을 숨긴다(아이콘 레일만 남음) */
.app.panel-collapsed .mp-search{display:none}

/* ── 검색 결과 ── */
.mp-sgroup{margin-bottom:10px}
.mp-smod{display:flex;align-items:center;gap:7px;padding:6px 8px 5px;font-size:11px;font-weight:700;
  color:var(--slate-2);letter-spacing:.02em}
.mp-ghead.as-label{cursor:default;background:none}
.mp-ghead.as-label:hover{background:none}
.mp-noresult{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 12px;
  color:var(--slate-2);text-align:center;font-size:13px}
.mp-noresult svg.i{width:22px;height:22px;opacity:.6}
.mp-noresult .d{font-size:11.5px;color:var(--slate-2);opacity:.8}

/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 v8 — 낮은 카드는 내부를 한 줄(가로)로 전환.
   .is-short 는 JS(ResizeObserver)가 실제 픽셀 높이(<64px)로 붙인다.
   높은 카드는 기존 세로 배치 그대로. 라벨은 어떤 경우에도 잘라내지 않고 말줄임(…).
   ══════════════════════════════════════════════════════════════════════════ */
.dh-t.is-short{padding:0 12px;display:flex;align-items:center;gap:9px}
/* 라벨류 공통 — 하드 클리핑 금지, 넘치면 말줄임 */
.dh-t.is-short .dh-lab,
.dh-t.is-short .dh-name,
.dh-t.is-short .dh-navl,
.dh-t.is-short .dh-addl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
/* 낮을 때 감추는 보조 요소(있어도 안 보이고 자리만 먹는 것들) */
.dh-t.is-short .dh-small,
.dh-t.is-short .dh-ghost,
.dh-t.is-short .dh-spark,
.dh-t.is-short .dh-nlist{display:none}

/* ── 바로가기(nav) · 링크 카드: 아이콘 왼쪽 + 라벨 오른쪽, 수직 가운데 ── */
.dh-nav.is-short,.dh-link.is-short{flex-direction:row;justify-content:flex-start}
.dh-nav.is-short .dh-navic,.dh-link.is-short .dh-linkic{flex:0 0 auto;display:flex;align-items:center}
.dh-nav.is-short .dh-navic svg,.dh-link.is-short .dh-linkic svg{width:17px;height:17px}
.dh-nav.is-short .dh-navl,.dh-link.is-short .dh-name{flex:1;font-size:13px;font-weight:700}
.dh-link.is-short .dh-lab{display:none}          /* '바로가기' 캡션은 낮을 때 생략 */

/* ── 값 카드(내 대휴·이번달 근무·급여명세 등): 라벨 왼쪽 + 숫자 오른쪽 한 줄 ── */
.dh-t.is-short .dh-big{margin:0 0 0 auto;font-size:19px;line-height:1;white-space:nowrap;flex:0 0 auto}
.dh-t.is-short .dh-big em{font-size:11px;margin-left:2px}
.dh-t.is-short .dh-lab{flex:0 1 auto;font-size:11.5px}
.dh-t.is-short .dh-name{font-size:13px}

/* ── 사진 카드(내 근태·연차·헬프데스크): 하단 고정 블록을 세로 가운데 한 줄로 ── */
.dh-photo.is-short .dh-c{position:absolute;left:12px;right:12px;top:50%;bottom:auto;
  transform:translateY(-50%);flex-direction:row;align-items:center;gap:9px}
.dh-photo.is-short .dh-name{font-size:13px;flex:1}
.dh-photo.is-short .dh-big{font-size:18px}

/* ── 전자결재: 좌우 배치를 수직 가운데로 ── */
.dh-ea.is-short .dh-flex{align-items:center;gap:9px}
.dh-ea.is-short .dh-flex>span{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.dh-ea.is-short .dh-pill{top:50%;transform:translateY(-50%);padding:2px 8px;font-size:10.5px}

/* ── 공지·글귀·영상 ── */
.dh-notice.is-short{gap:0}
.dh-quotec.is-short{padding:0 6px}
.dh-quotec.is-short .dh-qt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.dh-quotec.is-short .dh-qa{display:none}
.dh-vid.is-short 
/* ── '+ 바로가기 추가' ── */
.dh-add.is-short{flex-direction:row;justify-content:center;gap:7px}
.dh-add.is-short .dh-addi svg{width:16px;height:16px}

/* ===== 최초 로그인 비밀번호 강제 변경 게이트 ===== */
.pwgate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px}
.pwgate-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--shadow-sm)}
.pwgate-card h3{margin:0 0 6px;font-size:19px;font-weight:700}
.pwgate-card .sub{color:var(--slate);font-size:12.5px;line-height:1.6;margin-bottom:22px}
.pwgate-out{width:100%;margin-top:14px}
@media(max-width:860px){.pwgate{padding:16px}.pwgate-card{padding:22px 18px}}

/* ══════════════════════════════════════════════════════════════════════════
   평면(FLAT) ERP 레이어 — 업무 메뉴 화면 공통
   ---------------------------------------------------------------------------
   콘텐츠를 감싸던 카드/패널(둥근 박스 · 그림자 · 과한 여백)을 걷어내고
   "섹션 제목 + 얇은 구분선(--line) + 밀도 높은 표"의 평면 화면으로 통일한다.
   색은 전부 토큰이라 다크/라이트 자동 대응, PC·모바일 공용.

   ※ 대상이 아닌 것(클래스가 겹치지 않아 전역 규칙이어도 영향 없음)
      · 홈 대시보드 커스터마이즈 카드(.dh-*) · 로그인 위젯(.lme-card/.fx-card)
      · 모달/드롭다운(.ea-modal-card, .org-modal-card, .noti-pop, .pwgate-card)
      · 폼 컨트롤(.select, .btn2, .*-in, .native-sel …) · 셸(.ir-*, .mp-*, .mb-* )
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) 화면 여백 — 카드가 사라진 만큼 촘촘하게 */
.tabpane{padding:14px 18px}

/* 2) 제목줄 — 설명멘트는 숨기고(JS가 제거하지만 이중 안전장치), 보더·여백 없이 붙인다.
      대부분의 화면에서는 tidyHead()가 이 줄을 통째로 없애고 액션만 아래 줄로 옮긴다. */
.tabpane .phead{margin:0 0 8px;padding:0;border:0;min-height:0;justify-content:flex-end}
.tabpane .phead h1{margin-right:auto}   /* 제목이 있으면 왼쪽, 액션은 오른쪽 */
.tabpane .phead .desc,.tabpane .phead .sub{display:none}
.tabpane .phead:empty{display:none;margin:0}

/* 3) 카드/패널 래퍼 평면화 — 배경·테두리·라운드·그림자 제거, 좌우 여백 0(페이지 그리드에 정렬) */
.gwrap,.tile,.kpi,.dash-grid .card,.set-card,.rp-card,.hl-card,.iv-card,.it-mycard,
.ps-card,.ps-item,.ah-cal,.ah-sap,.oth,.sw-card,.sw-form,.lv-card,.lv-sec,
.ea-emplist,.eac-sec,.rb-form,.rb-side,.rb-parea{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding-left:0;padding-right:0}
/* 스티키 첫 열은 불투명 배경이 필요 → 카드 대신 페이지 배경으로 */
.gwrap table.r .emp{background:var(--bg)}
.gwrap table.r thead th.emp{background:var(--soft)}

/* 4) 섹션 구분 — 제목 다음 내용, 섹션 사이는 hairline */
.set-card,.lv-sec,.sw-form,.eac-sec,.rb-form{
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.set-card:last-child,.lv-sec:last-child,.eac-sec:last-child,.rb-form:last-child{
  border-bottom:0;margin-bottom:0;padding-bottom:0}

/* 5) 검색/필터 — 박스 없이 상단 툴바 한 줄 */
.toolbar{background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:0 0 10px;margin-bottom:12px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;row-gap:8px}

/* 6) 상단 KPI/요약 — 큰 카드 나열 대신 얇은 요약 스트립(라벨+숫자 한 줄, 세로 구분선).
      화면마다 컨테이너 이름만 다를 뿐 구조가 같아 공통 규칙 하나로 처리한다. */
.it-sum,.lv-cards,.strip,.ah-tiles,.kpi-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0 0 10px;
  border:0;background:transparent;min-height:34px}
.it-card,.lv-card,.tile,.kpi{
  flex:0 1 auto;display:flex;align-items:baseline;gap:7px;padding:4px 0;
  background:transparent;border:0;border-radius:0;box-shadow:none;min-height:0}
.lv-card.gold{background:transparent}
/* 항목 구분은 테두리 대신 가운뎃점으로 — 배경·보더 없이 평면 */
.it-card + .it-card::before,.lv-card + .lv-card::before,
.tile + .tile::before,.kpi + .kpi::before{
  content:"·";margin:0 13px;color:var(--slate-2);opacity:.55;font-weight:700}
/* 라벨은 작게, 숫자는 한 급 크게 — 큰 숫자 카드 느낌을 걷어낸다 */
.it-card .it-cl,.lv-cn{margin:0;font-size:11.5px;font-weight:600;color:var(--slate-2)}
.it-card .it-cn,.lv-cv{margin:0;font-size:15px;font-weight:700;line-height:1.2}
.lv-cs{font-size:11.5px;color:var(--slate-2)}

/* 7) 액션 버튼 — 제목줄에서 떼어내 요약/툴바 줄의 오른쪽 끝에 정렬(뜬 여백 제거) */
.head-acts{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.it-sum:has(.head-acts),.lv-cards:has(.head-acts),.strip:has(.head-acts),
.ah-tiles:has(.head-acts),.kpi-row:has(.head-acts){min-height:38px}
/* 요약줄이 없어 툴바·탭 줄로 옮겨간 경우에도 같은 위치 */
.toolbar > .head-acts,.it-filter > .head-acts,.rb-tabs > .head-acts{margin-left:auto}
.rb-tabs{align-items:center}
.rb-tabs > .head-acts{padding-bottom:6px}

@media (max-width:720px){
  .it-card,.lv-card,.tile,.kpi{padding:4px 0}
  .head-acts{margin-left:auto}
}

/* ═══ 홈 대시보드 편집모드 ═══
   평상시(뷰 모드)엔 카드가 잠겨 있고 클릭 시 링크 이동만 된다(조작 UI 자체를 안 그린다).
   편집모드에서만 이동·크기조절·추가·삭제가 열리고, 아래 표시가 붙는다. */
.dh-bento.dh-edit .dh-t{cursor:move;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent)}
.dh-bento.dh-edit .dh-t:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.dh-bento.dh-edit .dh-add{outline:1px dashed color-mix(in srgb, var(--gold) 60%, transparent);outline-offset:-1px}
/* 편집 중 배지 — 화면 하단 가운데에 은은하게(흔들림 없음) */
body.dh-editing::after{content:"편집 중 - 카드를 옮기거나 모서리를 끌어 크기를 조절하세요";
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;pointer-events:none;
  background:var(--gold);color:#1a1408;padding:7px 14px;border-radius:var(--r-sm);
  font-size:12px;font-weight:700;white-space:nowrap;box-shadow:var(--shadow)}
@media (max-width:860px){ body.dh-editing::after{bottom:70px;font-size:11.5px;padding:6px 11px} }

/* ═══ 안전보건(Safety) — Phase 0 껍데기 · 삭제자료 관리 ═══
   전역 평면 레이어를 그대로 따르고, 여기서는 빈 화면 안내와 표 보조 스타일만 둔다. */
.sf-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:64px 20px;color:var(--slate);text-align:center}
.sf-empty-i{width:34px;height:34px;color:var(--slate-2);opacity:.7}
.sf-empty-i svg{width:34px;height:34px}
.sf-empty-t{font-size:17px;font-weight:700;color:var(--ink)}
.sf-empty-d{font-size:13px;color:var(--slate);max-width:520px;line-height:1.6}
.sf-empty-p{margin-top:6px;font-size:12px;color:var(--slate-2)}
.sf-td-mid{text-align:center;color:var(--slate-2);padding:26px 0}
.sf-ro{font-size:11.5px;color:var(--slate-2)}


/* ═══ 안전보건 — 목록 페이저 · 등록/수정 폼(평면 ERP 스타일) ═══ */
.sf-pager{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 0 4px}
.sf-pg{font-size:12.5px;color:var(--slate);font-family:var(--mono)}
.sf-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sf-form-h{font-size:15px;font-weight:700;margin-bottom:14px}
.sf-grid{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px 14px;align-items:center;max-width:820px}
.sf-grid > label{font-size:12.5px;font-weight:600;color:var(--slate);white-space:nowrap}
.sf-grid .req{color:var(--red)}
.sf-grid .it-chk{justify-self:start}
.sf-ta{min-height:150px;padding:9px 11px;line-height:1.6;resize:vertical;font-family:var(--font)}
.sf-form-f{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;max-width:820px}
.sf-view-body{white-space:pre-wrap;line-height:1.7;font-size:13.5px;color:var(--ink);
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);max-width:820px}
@media (max-width:860px){
  .sf-grid{grid-template-columns:1fr;gap:6px 0}
  .sf-grid > label{margin-top:8px}
  .sf-form-f{justify-content:stretch}.sf-form-f .btn2{flex:1 1 0}
}

/* 안전보건 표의 관리 열 — .it-acts 의 모바일 카드용 상단 구분선/여백을 상쇄하고 한 줄 유지 */
.sf-acts{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;align-items:center;
  margin-top:0;padding-top:0;border-top:0;white-space:nowrap}
.sf-acts .btn2{white-space:nowrap}
@media (max-width:860px){
  .sf-acts{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);justify-content:flex-start}
}

/* ═══ 안전보건조직도(P_SF_ORG) — 카드 조직도 + CSS 연결선 ═══
   외부 차트 라이브러리 없이, 행(계층) × 3칸(좌 협의체 / 중앙 라인 / 우 전문관리) 그리드로 그린다.
   연결선은 의사요소로만: 중앙 카드 아래 세로선, 좌·우 카드에서 중앙으로 가로선. */
.og-top{display:flex;justify-content:flex-end;margin:0 0 10px}
.og-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--slate)}
.og-lg{display:inline-flex;align-items:center;gap:6px}
.og-dot{width:10px;height:10px;flex:0 0 auto;border-radius:var(--r-sm);display:inline-block}
.og-dot.navy{background:var(--navy)} .og-dot.indigo{background:var(--indigo)}
.og-dot.green{background:var(--green)} .og-dot.gold{background:var(--gold)}

.og-chart{--og-gap:26px;--og-arm:26px;display:flex;flex-direction:column;gap:var(--og-gap);padding:6px 0 4px}
.og-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px) minmax(0,1fr);
  gap:0 var(--og-arm);align-items:center}
.og-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.og-left{align-items:flex-end} .og-right{align-items:flex-start}
.og-mid{display:flex;flex-direction:column;gap:10px;position:relative;min-width:0}

/* 세로 연결선 — 라인조직 카드 사이(마지막 계층 아래는 긋지 않는다) */
.og-mid.has-link::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  width:2px;height:var(--og-gap);background:var(--line)}
/* 가로 연결선 — 좌·우 카드에서 중앙 칸으로 */
.og-left .og-card::after,.og-right .og-card::before{content:"";position:absolute;top:50%;
  width:var(--og-arm);height:2px;background:var(--line)}
.og-left .og-card::after{left:100%}
.og-right .og-card::before{right:100%}

.og-card{position:relative;box-sizing:border-box;width:100%;max-width:300px;
  border:1px solid var(--line);border-left:3px solid var(--slate-2);border-radius:var(--r-sm);
  background:var(--panel);padding:10px 12px}
.og-card.navy{border-left-color:var(--navy)}   .og-card.indigo{border-left-color:var(--indigo)}
.og-card.green{border-left-color:var(--green)} .og-card.gold{border-left-color:var(--gold)}
.og-role{font-size:13.5px;font-weight:700;color:var(--ink);padding-right:52px}
.og-sub{font-size:11.5px;color:var(--slate-2);margin-top:2px}
.og-name{font-size:12.5px;font-weight:600;color:var(--slate);margin-top:5px}
.og-desc{font-size:11.5px;color:var(--slate-2);margin-top:5px;line-height:1.5}

/* 카드 우상단 미니 편집 버튼 — 평상시 옅게, hover 시 또렷하게 */
.og-acts{position:absolute;top:7px;right:7px;display:flex;gap:2px;opacity:0;transition:opacity .15s ease}
.og-card:hover .og-acts,.og-card:focus-within .og-acts{opacity:1}
.og-mini{width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--slate-2);cursor:pointer;padding:0}
.og-mini:hover{background:var(--soft);color:var(--ink)}
.og-mini svg{width:14px;height:14px}

/* 보조 이미지 */
.og-imgwrap{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.og-details > summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);padding:4px 0}
.og-imeta{font-size:11.5px;color:var(--slate-2);font-weight:400;margin-left:8px}
.og-imgbox{margin-top:12px;overflow:auto}
.og-imgbox img{max-width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r-sm)}

/* 모바일 — 3칸을 한 줄로 접고 연결선은 감춘다(선이 어긋나 보이는 것 방지) */
@media (max-width:860px){
  .og-row{grid-template-columns:1fr;gap:10px}
  .og-left,.og-right{align-items:stretch}
  .og-card{max-width:none}
  .og-mid.has-link::after,.og-left .og-card::after,.og-right .og-card::before{display:none}
  .og-chart{gap:12px}
  .og-acts{opacity:1}
}

/* 서식관리 — 분류 탭 · 표 보조 */
.fm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.fm-tab{border:1px solid var(--line);background:transparent;color:var(--slate);border-radius:var(--r-sm);
  padding:5px 11px;font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.fm-tab:hover{background:var(--soft);color:var(--ink)}
.fm-tab.on{background:var(--navy-050);border-color:var(--navy);color:var(--navy)}
.fm-tab b{font-family:var(--mono);font-weight:700;margin-left:4px}
.fm-desc{color:var(--slate);font-size:12.5px;max-width:320px}
.fm-file{font-size:12.5px;word-break:break-all}
.fm-filepick input[type=file]{font-size:12.5px;color:var(--slate)}
.fm-cur{margin-top:7px;font-size:12px;color:var(--slate)}

#fmTbl td .btn2{white-space:nowrap}

/* ═══ 사고 발생 통계(P_SF_ACCIDENT) — 무재해 배너 · 인라인 SVG 차트 ═══ */
.ac-zero{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
  padding:12px 0 14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.ac-zero-t{font-size:12px;font-weight:700;color:var(--slate-2);letter-spacing:.02em}
.ac-zero-n{font-size:15px;font-weight:600;color:var(--slate);margin-top:3px}
.ac-zero-n b{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--gold);margin:0 3px}
.ac-zero-s{font-size:11.5px;color:var(--slate-2);margin-top:5px}
.ac-zero-s b{color:var(--slate);font-family:var(--mono)}
.ac-zero-r{flex:1 1 260px;max-width:420px;min-width:220px}
.ac-bar{height:8px;border-radius:var(--r-sm);background:var(--soft);overflow:hidden}
.ac-bar span{display:block;height:100%;background:var(--gold);transition:width .3s ease}
.ac-zero-p{font-size:11.5px;color:var(--slate-2);margin-top:5px;text-align:right;font-family:var(--mono)}

.ac-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:14px 0 16px}
.ac-ch{min-width:0}
.ac-ch-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ac-lg{font-size:11px;font-weight:600;color:var(--slate-2);display:inline-flex;align-items:center;gap:5px}
.ac-dot{width:9px;height:9px;border-radius:var(--r-sm);display:inline-block}
.ac-dot.acc{background:var(--red)} .ac-dot.near{background:var(--gold)}

/* SVG 차트 — 색은 클래스로 칠해 다크/라이트 자동 대응 */
.ch{width:100%;height:250px;display:block;overflow:visible}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-ax-l{stroke:var(--line);stroke-width:1}
.ch-ax{fill:var(--slate);font-size:13px;font-family:var(--font)}
.ch-val{fill:var(--ink);font-size:14px;font-weight:800;font-family:var(--mono)}
.ch-b.acc{fill:var(--red)} .ch-b.near{fill:var(--gold)} .ch-b.type{fill:var(--navy)}
.ch-b{transition:opacity .15s ease} .ch-b:hover{opacity:.75}

.ac-sum{color:var(--slate);font-size:12.5px;max-width:360px}
.ac-rec{margin-left:4px}

@media (max-width:860px){
  .ac-charts{grid-template-columns:1fr;gap:14px}
  .ac-zero{flex-direction:column;align-items:stretch;gap:10px}
  /* 세로로 세우면 flex-basis 260px 가 "높이 260px" 로 해석돼 빈 칸이 생긴다 → 내용 높이로. */
  .ac-zero-r{max-width:none;flex:0 0 auto}
  .ac-sum{max-width:none}
}

/* ═══ 위험성평가 현황(P_SF_RISK) ═══ */
.rk-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:14px 0 16px}
.ch-track{fill:var(--soft)}
.ch-b.g-low{fill:var(--green)} .ch-b.g-mid{fill:var(--slate-2)}
.ch-b.g-high{fill:var(--gold)} .ch-b.g-vhigh{fill:var(--red)}

/* 가로 막대(집계) — HTML/CSS. 폭이 변해도 글자·막대 두께가 그대로다. */
.hb{display:flex;flex-direction:column;gap:8px}
.hb-row{display:grid;grid-template-columns:var(--hb-l,96px) minmax(0,1fr) 30px;
  align-items:center;gap:12px}
.hb-l{font-size:13px;color:var(--slate);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-t{position:relative;height:26px;background:var(--soft);border-radius:var(--r-sm);overflow:hidden}
.hb-f{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:var(--r-sm);
  background:var(--navy);transition:width .35s var(--ease)}
.hb-f.g-low{background:var(--green)} .hb-f.g-mid{background:var(--slate-2)}
.hb-f.g-high{background:var(--gold)} .hb-f.g-vhigh{background:var(--red)}
.hb-v{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--ink);text-align:left}
@media (max-width:860px){ .hb-row{grid-template-columns:minmax(72px,34%) minmax(0,1fr) 28px;gap:8px} }
.rk-txt{color:var(--slate);font-size:12.5px;max-width:280px}
/* 빈도 × 강도 실시간 계산 줄 */
.rk-risk{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--slate)}
.rk-n{width:74px}
.rk-out{margin-left:6px;color:var(--slate)}
.rk-out b{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--ink);margin:0 2px}
@media (max-width:1200px){ .rk-charts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .rk-charts{grid-template-columns:1fr;gap:14px}
  .rk-txt{max-width:none}
}

/* ═══ 안전보건 등록/수정 팝업(safety-form.html) ═══ */
.sfp-body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  display:flex;flex-direction:column;min-height:100vh}
#sfpRoot{display:flex;flex-direction:column;min-height:100vh}
.sfp-head{display:flex;align-items:baseline;gap:10px;padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.sfp-t{font-size:16px;font-weight:700}
.sfp-s{font-size:12px;color:var(--slate-2)}
.sfp-body-in{flex:1 1 auto;overflow:auto;padding:16px 20px}
.sfp-body-in .sf-grid{max-width:none}
.sfp-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 20px;border-top:1px solid var(--line);background:var(--panel)}
.sfp-msg-i{flex:1 1 auto;font-size:12.5px;color:var(--red)}
.sfp-msg{padding:48px 24px;text-align:center;color:var(--slate)}
.sfp-msg-t{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.sfp-msg-d{font-size:13px;margin-bottom:20px}
.sfp-msg .sf-form-f{justify-content:center;max-width:none}

/* 계정 추가 팝업 — 방법 선택 세그먼트 + 안내문 */
.ac-seg{margin:0 0 14px}
.ac-seg button{flex:1 1 0}
.sfp-note{margin-top:12px;font-size:12px;line-height:1.6;color:var(--slate);
  background:var(--soft);border-left:3px solid var(--gold);padding:9px 12px;border-radius:var(--r-sm)}

/* 권한 표 — 논리화면 한 벌. 각 행에 지원 플랫폼 배지만 붙인다. */
.rb-pp{display:flex;justify-content:center}
.rb-plat{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--slate);background:var(--soft);white-space:nowrap}
.rb-plat.both{border-color:var(--gold);color:var(--gold);background:var(--gold-050)}
.rb-plat.pc{border-color:var(--navy);color:var(--navy);background:var(--navy-050)}
.rb-plat.mob{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-050)}

/* 내 자산 목록 — 본인 자산 안에서만 걸리는 검색줄 */
.it-mybar{display:flex;align-items:center;gap:10px;margin:0 0 12px}

/* ── 화학물질 MSDS ── */
/* 검색줄 — 좁은 검색창 + 바로 옆 버튼, 출처는 같은 줄 오른쪽 끝 */
.ms-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ms-q{flex:0 1 320px;max-width:33%;min-width:200px}
.ms-src{font-size:11px;color:var(--slate-2);white-space:nowrap}
.ms-bar .ms-src{margin-left:auto}
.ms-bar .sp{display:none}
/* 자료실 — 필터 셀렉트 + 페이지 이동 */
.lb-sel{flex:0 0 auto;min-width:110px;max-width:150px}
.lb-pager{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.lb-pager[hidden]{display:none}
.lb-pager .rb-mini.on{border-color:var(--gold);color:var(--gold);background:var(--gold-050)}
.lb-pager .rb-hint{margin-left:6px}
@media (max-width:860px){ .lb-sel{flex:1 1 45%;max-width:none} }
/* 자료 제목 = 링크. 별도 [열기] 버튼 없이 제목을 눌러 원문(새 탭)으로 간다. */
.lb-link{cursor:pointer;text-underline-offset:3px}
.lb-link:hover,.lb-link:focus-visible{color:var(--gold);text-decoration:underline}
.lb-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
@media (max-width:768px){ .lb-link{display:inline-block;padding:3px 0;min-height:22px} }

/* 결과 표 — 헤더 아래 굵은 선, 행마다 얇은 선, hover 강조 */
.ms-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.ms-table thead th{position:sticky;top:0;z-index:1;background:var(--soft);color:var(--slate-2);
  font-size:11.5px;font-weight:700;text-align:left;padding:9px 12px;
  border-bottom:2px solid var(--line)}
.ms-table tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ms-table tbody tr:last-child td{border-bottom:0}
.ms-table tbody tr:hover td{background:color-mix(in srgb,var(--navy-050) 45%,transparent)}
.ms-table .mono{font-family:var(--mono)}
.ms-actc{text-align:right;white-space:nowrap}

/* 상세 팝업 — 항목별 정의목록 */
.mv-sec{padding:12px 0;border-bottom:1px solid var(--line)}
.mv-sec:last-of-type{border-bottom:0}
.mv-h{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:13.5px;font-weight:700;color:var(--ink)}
.mv-h b{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold);
  border:1px solid var(--gold);border-radius:var(--r-sm);padding:1px 5px}
.mv-dl{display:grid;grid-template-columns:minmax(140px,26%) minmax(0,1fr);gap:2px 12px;margin:0}
.mv-dt{font-size:12px;color:var(--slate);padding:4px 0}
.mv-dt.lv2{padding-left:10px;color:var(--slate-2);font-size:11.5px}
.mv-dd{margin:0;padding:4px 0;font-size:12.5px;color:var(--ink);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.mv-none{font-size:12.5px;color:var(--slate-2);padding:2px 0 4px}
.mv-more{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.mv-more > summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--slate);padding:4px 0}
.sfp-foot .ms-src{flex:1 1 auto;text-align:left;margin-left:8px}
@media (max-width:860px){
  .ms-q{max-width:none;flex:1 1 100%}
  .ms-bar .ms-src{flex:1 1 100%;white-space:normal}
  .mv-dl{grid-template-columns:1fr;gap:0}
  .mv-dt{padding-bottom:0;font-weight:600}
}
.it-mybar .rb-search{flex:1 1 320px;max-width:420px}

/* ═══ 조직도 — 자유배치 · 연결선 · hover 애니메이션 ═══ */
/* 카드 hover: 살짝 떠오른다(뷰·편집 공통, 부드럽게) */
.og-card{transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease)}
.og-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--slate-2)}

.og-chart.og-free{position:relative;display:block;padding:0}
.og-chart.og-free .og-card{position:absolute;box-sizing:border-box;
  width:260px;max-width:260px;height:96px;margin:0;z-index:1;background:var(--panel);
  overflow:hidden;display:flex;flex-direction:column;gap:1px}
/* 카드 크기가 고정이므로 내용은 줄 수를 제한하고 넘치면 말줄임 */
.og-chart.og-free .og-role{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.32}
.og-chart.og-free .og-sub,.og-chart.og-free .og-name,.og-chart.og-free .og-desc{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-chart.og-free .og-desc{margin-top:auto}
/* 공지 본문(서식 있는 HTML)을 보여 주는 자리.
   ★그림·영상은 어떤 크기로 넣었든 화면 폭을 넘지 않게 눌러 준다(PC·모바일 공통). */
/* ★글자 크기·줄간격·문단 여백은 편집기(rich-editor.js 의 CONTENT_CSS)와 같은 값을 쓴다.
   기준 크기가 다르면 여백이 같아도 줄 간격이 어긋난다 — 한쪽을 고치면 다른 쪽도 같이 고칠 것. */
.nt-html{font-size:11pt;line-height:1.5;word-break:break-word}
.nt-html img,.nt-html iframe,.nt-html video,.nt-html table{max-width:100%}
.nt-html img,.nt-html video{height:auto}
.nt-html iframe{aspect-ratio:16/9;height:auto;width:100%;max-width:720px;border:0}
.nt-html table{border-collapse:collapse}
.nt-html table td,.nt-html table th{border:1px solid var(--line);padding:6px 8px}
.nt-html blockquote{margin:8px 0;padding:6px 12px;border-left:3px solid var(--line);color:var(--slate)}
.nt-html a{color:var(--gold);text-decoration:underline}
.nt-html p{margin:0 0 4px}
.nt-html ul,.nt-html ol{margin:4px 0}
/* 편집기 자리 — 폼 안에서 가로로 넘치지 않게 */
.sfp-rich{width:100%}
.sfp-body-in .tox-tinymce{max-width:100%;border-radius:8px}

/* ── 서식 편집기(TinyMCE) 툴바 — 작게, 그리고 하나도 숨기지 않게 ──────────────
   도구를 '…' 뒤에 접어 두면 표·전체화면 같은 것을 못 찾는다. 그래서 줄바꿈으로 전부 보여 주고,
   대신 버튼을 촘촘하게 만들어 줄 수가 늘어나지 않게 한다.
   ★여기 규칙은 .nt-editor-wrap 안쪽에만 건다 — 다른 화면의 TinyMCE 나 전역 스타일을 건드리지 않는다.
   ★버튼은 28px 아래로 내리지 않는다(손가락으로 눌러도 빗나가지 않게). */
.nt-editor-wrap{width:100%;min-width:0}
.nt-editor-wrap .tox-tinymce{max-width:100%;border-radius:8px}
/* 툴바가 두세 줄이 되어도 본문이 쪼그라들지 않게 — 높이는 고정 대신 '본문 최소치 + 툴바' 로 잡는다.
   (전체화면일 때는 TinyMCE 가 직접 높이를 맞추므로 건드리지 않는다) */
.nt-editor-wrap .tox-tinymce:not(.tox-fullscreen){height:auto!important}
.nt-editor-wrap .tox-tinymce:not(.tox-fullscreen) .tox-sidebar-wrap{min-height:320px}
/* 버튼·아이콘 */
.nt-editor-wrap .tox .tox-tbtn{height:28px;min-width:28px;margin:1px 0}
.nt-editor-wrap .tox .tox-tbtn svg{height:18px;width:18px}
/* 그룹·헤더 여백 — 한 줄에 더 많이 들어가도록 */
.nt-editor-wrap .tox .tox-toolbar__group{padding:0 3px;margin:0}
.nt-editor-wrap .tox .tox-editor-header{padding:2px 4px}
.nt-editor-wrap .tox .tox-toolbar,
.nt-editor-wrap .tox .tox-toolbar__primary{gap:0;flex-wrap:wrap;padding:0}
.nt-editor-wrap .tox .tox-toolbar__group{height:auto;min-height:0}
/* 글꼴·크기 고르는 칸 — 폭을 내용만큼만 */
.nt-editor-wrap .tox .tox-tbtn--bespoke{min-width:auto}
.nt-editor-wrap .tox .tox-tbtn--bespoke .tox-tbtn__select-label{font-size:12px;margin:0 4px}
.nt-editor-wrap .tox .tox-tbtn__select-chevron{width:12px}
/* 좁은 화면(모바일) — 가로로 넘치지 않게. 줄 수가 늘어나는 것은 받아들인다. */
@media (max-width:520px){
  .nt-editor-wrap .tox .tox-toolbar__group{padding:0 2px}
  .nt-editor-wrap .tox .tox-tbtn--bespoke .tox-tbtn__select-label{max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nt-editor-wrap .tox-tinymce:not(.tox-fullscreen) .tox-sidebar-wrap{min-height:240px}
}

/* 공지 목록의 관리 칸 — 버튼이 커서 빈 자리가 많았다. 한 줄에 딱 맞게 줄인다. */
.nt-acts{gap:4px;padding-left:0;padding-right:0}
.nt-mini{padding:2px 7px;font-size:11.5px;min-height:24px;gap:3px;border-radius:6px}
.nt-mini svg{width:13px;height:13px}
@media (max-width:860px){ .nt-mini{min-height:32px;font-size:12px;padding:4px 10px} }

.og-links{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
/* 직각 라우팅 — 모서리가 둥글어 보이지 않게 이음/끝 모양을 각지게 고정한다. */
.og-link{fill:none;stroke:var(--slate-2);stroke-width:2;opacity:.75;
  stroke-linejoin:miter;stroke-linecap:butt;shape-rendering:crispEdges}
.og-link.og-temp{stroke:var(--gold);stroke-dasharray:5 4}
.og-cut{pointer-events:auto;cursor:pointer}
.og-cut circle{fill:var(--panel);stroke:var(--line);stroke-width:1}
.og-cut path{stroke:var(--red);stroke-width:1.6;fill:none}
.og-cut:hover circle{fill:var(--red-050);stroke:var(--red)}

/* 편집모드 표시 · 드래그 · 연결점 */
.og-hint{font-size:12px;color:var(--slate);background:var(--soft);border-left:3px solid var(--gold);
  padding:8px 12px;margin:0 0 10px;border-radius:var(--r-sm)}
.og-chart.og-free.og-snapping{
  background-image:linear-gradient(to right, color-mix(in srgb,var(--line) 45%,transparent) 1px, transparent 1px),
                   linear-gradient(to bottom, color-mix(in srgb,var(--line) 45%,transparent) 1px, transparent 1px);
  background-size:68px 36px;background-position:0 0}
.og-cellhint{display:none}
.og-cellhint.on{display:block;fill:color-mix(in srgb,var(--gold) 14%,transparent);
  stroke:var(--gold);stroke-width:1.5;stroke-dasharray:5 4}
.og-chart.og-editing .og-card{cursor:grab;touch-action:none;user-select:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
.og-card.og-dragging{cursor:grabbing;transform:none;opacity:.92;box-shadow:var(--shadow);z-index:5;transition:none}
/* 연결을 끌어다 댔을 때 — 카드 전체가 아니라 '붙을 그 한 면'만 굵게 보여 준다.
   data-drop 값(T/R/B/L)이 끄는 동안 실시간으로 바뀌고, 놓으면 그 면으로 저장된다. */
.og-card.og-target{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.og-card[data-drop]::after{content:"";position:absolute;background:var(--gold);border-radius:3px;
  box-shadow:0 0 8px color-mix(in srgb,var(--gold) 70%,transparent);pointer-events:none;z-index:3}
.og-card[data-drop="T"]::after{left:-1px;right:-1px;top:-3px;height:5px}
.og-card[data-drop="B"]::after{left:-1px;right:-1px;bottom:-3px;height:5px}
.og-card[data-drop="L"]::after{top:-1px;bottom:-1px;left:-3px;width:5px}
.og-card[data-drop="R"]::after{top:-1px;bottom:-1px;right:-3px;width:5px}
/* 그 면의 연결점도 함께 키워 어디에 붙는지 한눈에 보이게 */
.og-chart.og-editing .og-card[data-drop="T"] .og-port-t{transform:translateX(-50%) scale(1.5)}
.og-chart.og-editing .og-card[data-drop="B"] .og-port-b{transform:translateX(-50%) scale(1.5)}
.og-chart.og-editing .og-card[data-drop="L"] .og-port-l{transform:translateY(-50%) scale(1.5)}
.og-chart.og-editing .og-card[data-drop="R"] .og-port-r{transform:translateY(-50%) scale(1.5)}
.og-port{display:none}
/* 보이는 점은 그대로 두고, 집을 수 있는 범위만 투명하게 넓힌다 —
   '변에 갖다 댄다'는 동작이 몇 px 빗나가도 그 면으로 잡히게. */
.og-chart.og-editing .og-port::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.og-chart.og-editing .og-port{display:block;position:absolute;
  width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--panel);
  cursor:crosshair;z-index:2;transition:transform .14s var(--ease)}
/* 네 변 한가운데에 하나씩. 카드 테두리에 반쯤 걸쳐 두어 카드를 잡는 손가락과 헷갈리지 않는다. */
.og-chart.og-editing .og-port-t{left:50%;top:-7px;transform:translateX(-50%)}
.og-chart.og-editing .og-port-b{left:50%;bottom:-7px;transform:translateX(-50%)}
.og-chart.og-editing .og-port-l{top:50%;left:-7px;transform:translateY(-50%)}
.og-chart.og-editing .og-port-r{top:50%;right:-7px;transform:translateY(-50%)}
.og-chart.og-editing .og-port-t:hover{transform:translateX(-50%) scale(1.35)}
.og-chart.og-editing .og-port-b:hover{transform:translateX(-50%) scale(1.35)}
.og-chart.og-editing .og-port-l:hover{transform:translateY(-50%) scale(1.35)}
.og-chart.og-editing .og-port-r:hover{transform:translateY(-50%) scale(1.35)}

@media (max-width:860px){
  /* 좁은 화면에서는 자유배치를 세로 스택으로 풀어 준다(좌표가 화면을 벗어나지 않게) */
  .og-chart.og-free{height:auto !important;display:flex;flex-direction:column;gap:10px}
  .og-chart.og-free .og-card{position:static;width:auto;max-width:none;height:auto}
  .og-chart.og-free.og-snapping{background-image:none}
  .og-links{display:none}
  .og-chart.og-editing .og-port{display:none}
}

/* ═══ 집계 가로 막대 — 크게(가독 우선) ═══ */
.ac-ch-h{font-size:13.5px;margin-bottom:10px}
.rk-charts{gap:26px}
.ac-charts{gap:26px}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 히어로 밴드 — 우상단 버튼·공공누리 배지와 텍스트 겹침 방지.
   밴드가 absolute 로 떠 있어서 좁은 폭에서 날짜·근무상태가 버튼 아래로
   파고들었다. 모바일에서는 밴드를 일반 흐름으로 되돌리고 버튼 높이만큼
   위쪽 여백을 확보한다 → 줄이 늘어나면 배너가 같이 커진다(겹침 0).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .dh-hero{height:auto;min-height:104px}
  .dh-heroimg,.dh-heroov{position:absolute;inset:0}
  .dh-herob{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;
    padding:54px 14px 12px;z-index:2}
  .dh-clockrow{gap:6px 12px}

  /* 터치 타깃 40px 확보 */
  .dh-heroact{top:10px;right:12px;gap:8px;z-index:4}
  .dh-ghostbtn{width:40px;height:40px}
  .dh-ghostbtn svg{width:17px;height:17px}

  /* 공공누리 배지는 버튼 반대편(좌상단)으로 — 날짜·버튼 어느 쪽과도 겹치지 않는다 */
  .dh-kogl,.dh-hero:has(.dh-heroact) .dh-kogl{top:14px;bottom:auto;right:auto;left:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   안전보건 Phase 3 — 서포터즈 실적 / P-SAFE 상벌현황
   ══════════════════════════════════════════════════════════════════════ */

/* 넓게 쓰는 차트(핵심안전수칙 10항목처럼 이름이 긴 것) */
.rk-charts .ac-wide{grid-column:span 2}

/* 상벌 점수 — 부호로 색을 나눈다 */
.ps-pl{color:var(--green)}
.ps-mi{color:var(--red)}

/* 세그먼트(원장 / 개인별 누계) */
.sf-seg{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;flex:0 0 auto}
.sf-sg{height:32px;padding:0 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--slate);
  background:var(--panel);border:0;border-right:1px solid var(--line);cursor:pointer}
.sf-sg:last-child{border-right:0}
.sf-sg:hover{color:var(--ink)}
.sf-sg.on{color:var(--navy);background:var(--navy-050)}

/* 사원 선택(등록 팝업) */
.sf-emp{position:relative;min-width:0}
.sf-empq{width:100%}
.sf-emppick{margin-top:6px}
.sf-empchip{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;
  border:1px solid var(--gold);border-radius:var(--r-sm);background:var(--gold-050);font-size:12.5px}
.sf-empchip .mono{color:var(--slate);font-size:11.5px}
.sf-empx{width:22px;height:22px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--slate);font-size:15px;line-height:1;cursor:pointer}
.sf-empx:hover{background:var(--soft);color:var(--ink)}
.sf-emplist{position:absolute;z-index:20;left:0;right:0;top:38px;max-height:230px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 8px 22px rgba(0,0,0,.22)}
.sf-emplist[hidden]{display:none}
.sf-emprow{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;min-height:40px;
  font:inherit;font-size:12.5px;text-align:left;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);cursor:pointer}
.sf-emprow:last-child{border-bottom:0}
.sf-emprow:hover{background:var(--soft)}
.sf-emprow .mono{color:var(--slate);font-size:11.5px}

/* ── 모바일(≤768px) : 표를 카드형 행 스택으로 ──────────────────────────
   th 를 숨기고 각 td 가 data-h 를 라벨로 달고 한 줄씩 쌓인다.
   페이지 자체는 가로로 밀리지 않는다(가로 스크롤 컨테이너도 필요 없어진다). */
@media (max-width:768px){
  .rk-charts .ac-wide{grid-column:auto}

  table.sf-resp thead{display:none}
  table.sf-resp, table.sf-resp tbody, table.sf-resp tr, table.sf-resp td{display:block;width:auto}
  table.sf-resp tr{border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--panel);margin:0 0 8px;padding:8px 10px}
  table.sf-resp td{border:0;padding:3px 0;display:flex;align-items:flex-start;gap:10px;min-height:0}
  table.sf-resp td::before{content:attr(data-h);flex:0 0 84px;color:var(--slate);
    font-size:11.5px;font-weight:600;padding-top:2px}
  table.sf-resp td:empty{display:none}
  table.sf-resp td.sf-td-mid{display:block;text-align:center;padding:16px 0}
  table.sf-resp td.sf-td-mid::before{content:none}
  table.sf-resp td.it-acts{padding-top:8px;flex-wrap:wrap}
  table.sf-resp td.it-acts .btn2{min-height:40px}
  table.sf-resp .rk-txt{white-space:normal}

  /* 터치 타깃 — 툴바 컨트롤 */
  .toolbar .select,.toolbar .btn2{min-height:40px}
  .sf-sg{height:40px}
}

/* 안전보건 등록/수정 폼 — 모바일에서는 폼 자체가 한 화면(별도 창/탭)이므로
   본문만 스크롤하고 저장·취소는 하단에 고정한다. 터치 타깃 40px. */
@media (max-width:768px){
  .sfp-head{padding:12px 14px 10px}
  .sfp-body-in{padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  .sfp-foot{position:sticky;bottom:0;flex-wrap:wrap;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--line);z-index:5}
  .sfp-foot .btn2{flex:1 1 0;min-height:44px;justify-content:center}
  .sfp-foot .sfp-msg-i{flex:1 1 100%;order:-1;margin:0 0 6px}
  .sf-grid .select,.sf-grid .sf-ta,.sf-grid input[type=date],.sf-grid input[type=number]{width:100% !important}
  .sf-emplist{top:44px}
}


/* ── 안전보건 Phase 4 ───────────────────────────────────────────────────
   비정형 작업(사전조치 배지) · Safety Talk(월×공정 매트릭스) · 안전테마(연간 캘린더).
   전부 인라인 HTML/CSS — 외부 차트·달력 라이브러리 없음. */

/* 사전 안전조치 배지 — 이행한 것만 진하게. 안 한 것은 흐리게 남겨 '빠졌다'가 보이게 한다. */
.sf-acts-w{display:inline-flex;gap:4px;flex-wrap:wrap}
.sf-act{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:9px;
  border:1px solid var(--line);color:var(--slate-2);background:transparent;
  font-size:10.5px;font-weight:600;letter-spacing:.2px;opacity:.55}
.sf-act.on{opacity:1;color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,var(--line));
  background:color-mix(in srgb,var(--green) 12%,transparent)}

/* 체크 목록(일괄등록 대상 공정) */
.sf-checks{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.sf-checks-h{display:flex;align-items:center;gap:6px;padding:7px 9px;border-bottom:1px solid var(--line)}
.sf-checks-h .sf-ro{margin-left:auto}
.sf-checks-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;
  padding:8px 9px;max-height:210px;overflow:auto}
.sf-chk{justify-content:flex-start;gap:7px;min-height:26px;white-space:normal}
.sf-chk .sf-ro{margin-left:auto}

/* Safety Talk 매트릭스 — 공정(행) × 1~12월(열) */
.tk-mxwrap{overflow-x:auto}
/* it-table 계열을 쓰지 않는다 — 그 클래스는 모바일에서 행을 카드로 접는데,
   매트릭스는 접으면 의미가 사라져 좁은 화면에서도 표 그대로 두고 가로 스크롤을 쓴다. */
table.tk-mx{min-width:640px;width:100%;border-collapse:separate;border-spacing:0;
  background:var(--panel);font-size:12.5px;color:var(--ink)}
table.tk-mx th,table.tk-mx td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:center}
table.tk-mx thead th{position:sticky;top:0;background:var(--soft);color:var(--slate-2);
  font-size:11.5px;font-weight:600;z-index:1}
table.tk-mx th.tk-pc{width:150px;min-width:150px;text-align:left;padding-left:10px;
  background:var(--panel);position:sticky;left:0;z-index:2}
table.tk-mx thead th.tk-pc{z-index:3;background:var(--soft)}
table.tk-mx th.tk-pc .sf-ro{display:block;font-weight:400}
.tk-tot{width:44px;color:var(--slate-2);font-size:12px}
.tk-c{width:38px;font-size:12px;font-weight:600;cursor:pointer;user-select:none}
.tk-c:hover{outline:1px solid var(--gold);outline-offset:-2px}
.tk-c0{color:var(--slate-2);opacity:.45;font-weight:400}
.tk-cd{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.tk-cp{color:var(--amber,#c98a1b);background:color-mix(in srgb,var(--amber,#c98a1b) 12%,transparent)}
.sf-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:10px;font-size:11.5px;color:var(--slate-2)}
.tk-lg{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line);margin-left:8px}
.tk-lg:first-child{margin-left:0}

/* 안전테마 연간 캘린더 — 12칸 grid */
.th-cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.th-mo{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
  min-height:118px;display:flex;flex-direction:column}
.th-mo.now{border-color:var(--gold)}
.th-mh{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);
  font-size:12.5px}
.th-mh .sf-ro{margin-left:auto}
.th-add{width:22px;height:22px;line-height:1;border:1px solid var(--line);border-radius:6px;
  background:transparent;color:var(--slate);cursor:pointer;font-size:13px}
.th-add:hover{border-color:var(--gold);color:var(--gold)}
.th-mb{display:flex;flex-direction:column;gap:4px;padding:8px 8px 10px}
.th-none{padding:2px 2px 4px}
.th-item{display:grid;grid-template-columns:8px minmax(0,1fr);gap:2px 7px;align-items:center;
  width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--soft);color:var(--ink);text-align:left;cursor:pointer}
.th-item:hover{border-color:var(--gold)}
.th-dot{width:8px;height:8px;border-radius:50%;background:var(--slate-2);grid-row:span 2}
.th-dot.st-ok{background:var(--green)}
.th-dot.st-warn{background:var(--amber,#c98a1b)}
.th-dot.st-bad{background:var(--red)}
.th-tt{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-mt{font-size:10.5px;color:var(--slate-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1200px){ .th-cal{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:768px){
  .th-cal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .th-mo{min-height:96px}
  .th-add{width:40px;height:40px;font-size:15px}
  .th-item{padding:7px}
  .sf-checks-b{grid-template-columns:1fr;max-height:none}
  .sf-chk{min-height:40px}
  /* 매트릭스는 열이 13개라 카드로 접지 않고 가로 스크롤을 쓴다(페이지는 스크롤되지 않는다). */
  table.tk-mx{min-width:560px}
  table.tk-mx th.tk-pc{width:120px;min-width:120px}
  .tk-c{height:40px;min-width:40px}   /* 터치 타깃 — 좁아도 40px 아래로 내려가지 않게 */
}
/* 아주 좁은 화면에서만 1열 — 390px 급에서는 2열이 스크롤이 짧아 낫다. */
@media (max-width:360px){ .th-cal{grid-template-columns:1fr} }


/* ── 안전보건 휴지통(Phase 5) ────────────────────────────────────────── */
.tr-ck,.tr-ckh{text-align:center}
/* 선택 칸 — PC 는 체크박스만, 모바일 카드에서는 라벨까지 눌리게 넓힌다. */
.tr-cklab span{display:none}
.tr-ck input,.tr-ckh input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.tr-old{color:var(--red)}                       /* 90일 넘게 묵은 건은 눈에 띄게 */
.toolbar .sp{flex:1 1 auto}
@media (max-width:768px){
  /* 카드 스택에서 체크박스는 첫 줄에 크게 — 터치로 고르는 칸이다. */
  table.sf-resp td.tr-ck{padding-top:4px}
  table.sf-resp td.tr-ck input{width:22px;height:22px}
  .tr-cklab{min-height:40px;gap:10px}
  .tr-cklab span{display:inline;font-size:12.5px}
  .tr-ckh{display:none}
}


/* 입력 대화상자(promptDialog) — 확인 대화상자와 같은 상자에 입력칸만 더한다. */
.dh-mtext{width:100%;box-sizing:border-box;margin-top:8px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft);color:var(--ink);font:inherit;font-size:13px;resize:vertical}
.dh-mtext:focus{outline:none;border-color:var(--gold)}
.dh-mtext.bad{border-color:var(--red)}
@media (max-width:768px){ .dh-mtext{font-size:16px}   /* iOS 확대 방지 */ }


/* ══════════════════════════════════════════════════════════════════════════
   홈 카드덱 v7 — 카드 폭 기준 자동 축소(컨테이너 쿼리)  ★파일 맨 뒤 유지
   문제: 카드 글자 크기가 고정(26px 숫자 등)이라, 카드를 좁게 줄이거나
        태블릿 폭(12컬럼이 그대로 유지되는 861~1024px)에서 내용이 잘렸다.
   방법: 카드 자체를 컨테이너로 삼고(cqi = 카드 폭의 1%), 글자·아이콘·여백을
        clamp(하한, N cqi, 상한) 으로 폭에 비례시킨다.
        - 하한: 가독 한계(10~12px). 그 아래로는 줄지 않는다.
        - 상한: 지금 PC 큰 카드에서 보이던 값. 큰 카드는 예전 그대로다.
   보조: 넘칠 수 있는 텍스트는 말줄임 / 줄수 제한으로 잘림 대신 생략을 보여 준다.
   ══════════════════════════════════════════════════════════════════════════ */
.dh-t{container-type:inline-size;container-name:dhcard}
.dh-t{padding:clamp(9px,3.4cqi,16px)}

/* 라벨·수치·설명 — 카드 폭에 비례 */
.dh-lab{font-size:clamp(10px,3.4cqi,11.5px);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-big{font-size:clamp(15px,10cqi,26px);margin-top:clamp(3px,1.4cqi,6px)}
.dh-big em{font-size:clamp(9px,3.6cqi,12.5px);margin-left:clamp(2px,.8cqi,3px)}
.dh-small{font-size:clamp(10px,3.2cqi,11.5px);margin-top:clamp(2px,1.2cqi,4px);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dh-name{font-size:clamp(11.5px,4.4cqi,14.5px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-photo .dh-name,.dh-vid .dh-name{font-size:clamp(12px,4.8cqi,16px)}
.dh-photo .dh-c,.dh-vid .dh-c{left:clamp(9px,3.4cqi,16px);right:clamp(9px,3.4cqi,16px);
  bottom:clamp(8px,3cqi,14px)}
.dh-ghost svg{width:clamp(20px,11cqi,38px);height:clamp(20px,11cqi,38px)}

/* 공지 카드 — 줄 간격·글자도 폭에 맞춘다(제목은 한 줄 말줄임 유지) */
.dh-notice .dh-nt{font-size:clamp(11px,3.4cqi,12.5px)}
.dh-notice .dh-nd{font-size:clamp(9.5px,2.8cqi,11px)}
.dh-notice .dh-ni{padding:clamp(4px,1.6cqi,6px) clamp(5px,2cqi,7px)}
.dh-notice .dh-nempty{font-size:clamp(10.5px,3.2cqi,12px)}

/* 바로가기·이동 카드 */
.dh-navl,.dh-qil{font-size:clamp(11px,4cqi,13px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 오늘의 글귀 — 카드가 좁아지면 글자도 줄고, 그래도 넘치면 줄 수를 줄인다.
   (글귀는 길이가 제각각이라 카드 높이에 맞춰 잘리는 대신 말줄임으로 끝내는 편이 낫다.) */
.dh-quotec .dh-quote{padding:clamp(6px,3cqi,14px) clamp(6px,3.4cqi,18px);gap:clamp(3px,1.4cqi,5px)}
.dh-qt{font-size:clamp(10.5px,3.6cqi,12.5px);line-height:1.55}
.dh-qa{font-size:clamp(9.5px,3cqi,11.5px)}
/* 컨테이너 쿼리는 inline-size 기준만 쓴다(높이 기준은 container-type:size 가 필요한데,
   모바일에서 카드 높이가 auto 라 size 컨테인먼트를 걸면 카드가 접힌다). */
@container dhcard (max-width:260px){ .dh-qt{-webkit-line-clamp:4} }

/* 아주 좁은 카드(1/12~2/12 폭)에서는 보조 설명을 접어 수치를 살린다. */
@container dhcard (max-width:150px){
  .dh-small{-webkit-line-clamp:1}
  .dh-ghost{display:none}
}

/* 행 높이는 48px 고정을 유지한다.
   드래그·리사이즈 계산이 ROW_H=48 를 전제로 픽셀↔칸을 환산하므로(homegrid.js),
   행이 내용에 따라 늘어나면 끄는 위치와 실제 칸이 어긋난다.
   → 잘림은 행을 늘리는 대신 위의 컨테이너 쿼리 축소로 푼다. */

/* 태블릿(861~1024px)은 12컬럼을 그대로 둔다.
   배치를 JS 가 인라인 grid-column 으로 지정하므로 CSS 에서 컬럼 수를 바꾸면
   저장된 좌표가 그리드 밖으로 밀려 가로 스크롤이 생긴다.
   → 이 구간의 잘림은 위의 컨테이너 쿼리 축소 + 행 자동 확장으로 푼다. */


/* ── 기안작성·문서상세 모바일(Phase E) ────────────────────────────────────
   두 화면은 모바일에서 같은 창을 통째로 쓴다(풀스크린). 여기서는 세 가지만 고친다.
    ① 결재 현황 표가 페이지를 가로로 밀던 것 → 표 자기 컨테이너 안에서만 스크롤
    ② 터치 타깃 — 상단 액션·토글·칩이 21~38px 이라 손가락으로 누르기 어려웠다 → 40px
    ③ 상단 액션 바가 좁은 폭에서 두 줄로 접힐 때 버튼이 눌리도록 폭 배분 */
@media (max-width:768px){
  /* ① 표는 접지 않는다(결재 순서·상태가 열로 읽혀야 한다) → 컨테이너 가로 스크롤 */
  .eac-body .gwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .eac-ltab{min-width:420px}

  /* ② 터치 타깃 */
  .eac-bar .btn2{min-height:40px;padding:0 12px;font-size:12.5px}
  .eac-body .btn2{min-height:40px}
  .eac-lvtg,.eac-tgtme{min-height:40px;padding:0 10px}
  .eac-in,.eac-body select,.eac-body input[type=text],.eac-body input[type=date],
  .eac-body input[type=time],.eac-body input[type=number]{min-height:40px}

  /* ④ 문서정보(메타) 표 — 라벨 폭 고정 + 값은 남는 폭에 맞춰 줄바꿈.
        고정 폭 select(.wide)가 표를 밀어 페이지가 가로로 스크롤되던 것을 막는다. */
  .eac-meta{width:100%;table-layout:fixed}
  .eac-meta th{width:78px}
  .eac-meta td{word-break:break-word}
  .eac-meta .eac-in,.eac-in.wide{width:100%;max-width:100%;box-sizing:border-box}
  /* .eac-in.wide 는 min-width:220px 이라 폭을 100%로 줘도 안 줄어든다 — 하한을 푼다. */
  .eac-in.wide{min-width:0}
  /* 메타 표 안의 입력은 셀 폭을 넘지 않게(기본 min-width 120px 를 푼다) */
  .eac-meta .eac-in{min-width:0}
  /* 가로 한 줄(.eac-row2) — 좁은 폭에서는 접히게, 자식은 줄어들 수 있게 */
  .eac-row2{flex-wrap:wrap}
  .eac-row2>*{min-width:0}

  /* 결재선 카드 영역의 작은 버튼(+ 결재자 추가 28px, 카드 삭제 × 17px) */
  .eac-addcard{min-height:44px}
  .eac-cx{width:28px;height:28px;display:grid;place-items:center}
  /* ③ 상단 액션 바 — 제목 줄과 버튼 줄을 분리하고 버튼은 균등 분할 */
  .eac-bar{gap:6px;row-gap:8px}
  .eac-bar .eac-title{flex:1 1 100%}
  .eac-bar .btn2{flex:1 1 0;justify-content:center}
}


/* ── 전산 화면 모바일 터치 타깃(Phase E) ────────────────────────────────
   PC 표를 카드로 접었더니 '카드 제목 = 상세 열기' 링크가 16px 밖에 안 됐다.
   카드에서는 이 링크가 주 동작이라 손가락으로 누를 수 있는 크기로 키운다. */
@media (max-width:768px){
  .it-table td .it-link,.eab-table td .it-link{display:inline-flex;align-items:center;
    min-height:40px;font-size:14px;padding:0 2px}
  /* 표 안의 체크박스(선택·실사 등) */
  .it-table td input[type=checkbox],.eab-table td input[type=checkbox]{width:22px;height:22px}
  /* 조직도 카드 액션(수정·삭제) — 24px 이라 누르기 어려웠다 */
  .og-mini{width:40px;height:40px}
  .og-mini svg{width:16px;height:16px}
  /* 목록 안 작은 버튼(MSDS 보기·자료실 페이지 이동 등) — 28px → 40px */
  .rb-mini{height:auto;min-height:40px;padding:0 12px}   /* height:28px 고정을 풀어야 커진다 */
  /* 검색 상자 — 껍데기는 36px, 실제 입력칸은 18px 이라 얇았다. 상자째 40px 로. */
  .rb-search{height:auto;min-height:40px;min-width:0}
  .rb-search input{min-height:38px;font-size:16px}   /* iOS 확대 방지 */
  /* 서식관리 분류 탭 — 28px 이라 손가락으로 고르기 어려웠다 */
  .fm-tab{min-height:40px;padding:0 12px;display:inline-flex;align-items:center}
  /* 툴바 체크박스 — 라벨(.it-chk)이 이미 40px 이지만 상자도 눌리게 키운다 */
  .it-chk input[type=checkbox]{width:20px;height:20px}
  /* 모바일 셸 뒤로가기 */
  .mb-back{width:40px;height:40px}
}


/* ══════════════════════════════════════════════════════════════════════════
   모바일 요약 목록 + 상세 시트 (mobile-list.js) — 자산목록·내 자산에서 시작.
   PC 표는 그대로 두고, 좁은 화면에서만 이 목록으로 바꿔 한 화면에 여러 건이 보이게 한다.
   ══════════════════════════════════════════════════════════════════════════ */
.msl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden}
.msl-row{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:9px 12px;
  border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:var(--font);text-align:left;cursor:pointer}
.msl-row:last-child{border-bottom:0}
.msl-row:hover,.msl-row:active{background:var(--soft)}
.msl-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.msl-t{font-size:14px;font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msl-m{font-size:11.5px;color:var(--slate-2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msl-row .it-st{flex:0 0 auto}
.msl-ar{flex:0 0 auto;display:inline-flex;color:var(--slate-2)}
.msl-ar svg{width:16px;height:16px}
.msl + .it-cnt{margin-top:10px}

/* 상세 시트 — 안전보건 풀스크린 폼과 같은 톤(헤더 고정 · 본문 스크롤 · 하단 액션바) */
.msl-sheet{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink)}
body.msl-lock{overflow:hidden}
.msl-sheet-h{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.msl-x{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);color:var(--slate);cursor:pointer}
.msl-x svg{width:18px;height:18px}
.msl-ht{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.msl-ht b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.msl-hs{font-size:11.5px;color:var(--slate-2)}
.msl-sheet-b{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 12px calc(16px + env(safe-area-inset-bottom))}
.msl-sec + .msl-sec{margin-top:14px}
.msl-sec-h{font-size:11.5px;font-weight:700;color:var(--slate-2);letter-spacing:.02em;margin:0 2px 6px}
.msl-dl{display:flex;flex-direction:column;margin:0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);overflow:hidden}
.msl-dl>div{display:flex;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line)}
.msl-dl>div:last-child{border-bottom:0}
.msl-dl dt{flex:0 0 96px;margin:0;font-size:11.5px;font-weight:600;color:var(--slate);padding-top:1px}
.msl-dl dd{flex:1;min-width:0;margin:0;font-size:13px;overflow-wrap:anywhere}
.msl-lines{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);overflow:hidden}
.msl-lines>div{display:flex;flex-wrap:wrap;gap:4px 10px;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--slate)}
.msl-lines>div:last-child{border-bottom:0}
.msl-lines b{font-size:12.5px;color:var(--ink)}
.msl-sheet-f{flex:0 0 auto;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--panel)}
.msl-sheet-f .btn2{flex:1 1 0;min-height:44px;justify-content:center}


/* 자산 관리화면 — 잠긴 항목·조회 권한 안내 한 줄(입력칸 아래 작은 회색 글씨) */
.it-ro{font-size:11.5px;color:var(--slate-2);margin:8px 2px 0;line-height:1.5}
.it-detail .eac-sech{margin-top:18px}
@media (max-width:768px){
  /* 관리화면 액션 — 손가락으로 누를 수 있게 */
  .it-detail .it-acts{flex-wrap:wrap;gap:8px}
  .it-detail .it-acts .btn2{flex:1 1 0;min-height:44px;justify-content:center}
}


/* ── 모바일 홈 배너: 좌상단 DAK 로고 · 우하단 공공누리 배지 ────────────────
   배지가 좌상단에 있어 로고 자리가 없었다. 배지는 사용자 표시 쪽(우하단)으로 내리고
   비워진 좌상단에 브랜드 마크를 넣는다.
   마크는 PC 사이드바(.ir-brand)와 같은 파일(/img/dak-logo1.png) — 회사 사진 배너가 아니라
   워드마크 하나만 쓴다. 금색이라 어두운 배너 사진 위에서 다크·라이트 모두 그대로 읽힌다.
   데스크톱 배너는 지금 배치를 그대로 둔다(이 블록은 ≤768px 전용). */
.dh-herologo{display:none}
@media (max-width:768px){
  .dh-herologo{display:block;position:absolute;top:11px;left:12px;z-index:4;line-height:0}
  /* 배너 높이에 맞춘 크기 — 폭은 비율대로 따라간다(가로 삐짐 0) */
  .dh-herologo img{height:20px;width:auto;max-width:40vw;object-fit:contain;display:block}
  .dh-kogl,.dh-hero:has(.dh-heroact) .dh-kogl{
    top:auto;left:auto;right:12px;bottom:10px;z-index:3}
  .dh-kogl img{height:13px}
}


/* ── 설정·개인설정 카드 안의 비밀번호 폼 크기 ────────────────────────────
   password.js 의 입력은 로그인 화면과 같은 마크업(.field/.inp/.btn-primary)이라
   카드 안에서 48px 짜리 큰 입력·전폭 버튼으로 나와 과했다.
   본문 폼(.eac-in, 34px)에 맞춰 낮추고, 버튼도 내용 폭으로 줄인다. */
.set-card .field{margin-bottom:12px;max-width:420px}
.set-card .field label{font-size:12px;margin-bottom:5px}
.set-card .inp{height:36px;padding:0 11px;gap:8px;border-radius:var(--r-sm);max-width:420px}
.set-card .inp input{font-size:13px}
.set-card .inp svg{width:15px;height:15px}
.set-card .btn-primary{width:auto;min-width:150px;height:36px;padding:0 18px;
  font-size:13px;border-radius:var(--r-sm)}
.set-card .msg{margin-top:8px;font-size:12px}
/* 모바일은 터치 타깃(≥40px)이 우선 — 카드 폭에 맞춰 전폭 버튼으로 되돌린다. */
@media (max-width:768px){
  .set-card .inp{height:44px}
  .set-card .field,.set-card .inp{max-width:none}
  .set-card .btn-primary{width:100%;height:44px;font-size:14px}
}


/* 본인 근무표 — 휴무는 근무조 색 밴드 대신 옅은 점선으로 구분(근무일과 한눈에 갈리게) */
/* 휴무는 빨강 — 회색이면 평일과 구분이 잘 안 된다(주말·공휴일 모두 이 배지를 쓴다).
   주간·야간과 같은 '채워진 배지'로 통일(점선 테두리는 제거) — 색만 다르고 모양은 같다. */
.joband.off{background:var(--red);color:#fff;border:0}


/* ── 인사 화면 모바일 터치 타깃(≤768px) ────────────────────────────────
   PC 화면을 모바일에 그대로 연결했더니 조직도 칩 버튼(30px)·연차 조회 입력(36px)·
   달 이동 아이콘(34px)이 손가락으로 누르기엔 작았다. 40px 로 올린다(글씨는 그대로). */
@media (max-width:768px){
  .org-add,.org-lock,.org-rm{min-height:40px;padding-top:0;padding-bottom:0}
  .lv-in{min-height:40px}
  .iconbtn,.ah-nav .iconbtn{width:40px;height:40px}   /* 달 이동 버튼(.ah-nav)이 34px 로 따로 줄어 있었다 */
  /* 근무표·조직 표는 접지 않고(열이 의미를 가진다) 자기 컨테이너에서만 가로 스크롤 */
  .rgrid-wrap,.org-wrap,.gscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}


/* ══════════════════════════════════════════════════════════════════════════
   기안작성 — 첨부·참조권자/조회권자 (ea-compose.js)
   그룹웨어의 구성(용량 안내 · 드롭존 · 대상 칩 목록 + 선택/전체삭제)을 가져오되
   색·라운드·간격은 우리 토큰으로. 밝은 톤 배경 대신 패널/소프트 두 단계만 쓴다.
   ══════════════════════════════════════════════════════════════════════════ */
.eac-atbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eac-atsum{font-size:11.5px;color:var(--slate-2);font-family:var(--mono)}
.eac-atsum b{color:var(--ink);font-weight:700}
.eac-atsum .eac-atn{margin-left:6px;color:var(--slate-2)}
.eac-atsum.full b,.eac-atsum.full .eac-atn{color:var(--red)}

/* 드롭존 — 점선 한 겹, 끌어오면 골드로 */
.eac-drop{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin-top:8px;padding:14px 12px;border:1px dashed var(--line);border-radius:var(--r-sm);
  background:var(--soft);color:var(--slate-2);font-size:12.5px;cursor:pointer;text-align:center}
.eac-drop svg{width:17px;height:17px}
.eac-drop em{font-style:normal;font-size:11px;color:var(--slate-2);opacity:.85;width:100%}
.eac-drop:hover{border-color:var(--navy);color:var(--slate)}
.eac-drop.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--ink)}
.eac-drop:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 첨부 목록 — 칩이 아니라 한 줄씩(파일명·크기·삭제) */
.eac-files{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.eac-file{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);font-size:12.5px}
.eac-file svg{width:15px;height:15px;color:var(--slate-2);flex:0 0 auto}
.eac-file .eac-fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eac-file i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--slate-2);flex:0 0 auto}
.eac-file.up{color:var(--slate-2)}
.eac-fx{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--slate-2);
  border-radius:var(--r-sm);font-family:var(--font);font-size:11.5px;padding:3px 9px;cursor:pointer}
.eac-fx:hover{border-color:var(--red);color:var(--red)}

/* 참조권자 · 조회권자 */
.eac-pnote{font-size:11.5px;color:var(--slate-2);line-height:1.5;margin-bottom:8px}
.eac-pbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.eac-pkind{flex:0 0 auto;width:104px;min-width:0}
.eac-pq{flex:1 1 220px;min-width:0}
.eac-picon{flex:0 0 auto;padding:0 11px}
.eac-pacts{display:flex;gap:6px;margin-top:8px}
.btn2.sm{height:28px;padding:0 11px;font-size:11.5px}
.eac-pchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.eac-pchip{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);font-size:12.5px;cursor:pointer}
.eac-pchip input{width:14px;height:14px;accent-color:var(--gold);flex:0 0 auto;cursor:pointer}
.eac-pcn{font-weight:700;white-space:nowrap}
.eac-pcs{color:var(--slate-2);font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eac-pcx{flex:0 0 auto;border:0;background:transparent;color:var(--slate-2);cursor:pointer;
  font-size:14px;line-height:1;padding:0 2px}
.eac-pcx:hover{color:var(--red)}
.eac-pempty{font-size:12px;color:var(--slate-2)}

/* 모바일 — 버튼 세로 스택, 입력 풀폭, 칩 줄바꿈, 터치 40px */
@media (max-width:768px){
  .eac-atbar{gap:8px}
  .eac-atbar .btn2{flex:1 1 100%;min-height:44px;justify-content:center}
  .eac-atsum{flex:1 1 100%;font-size:11px}
  .eac-drop{padding:18px 12px;font-size:12px}
  .eac-file{padding:9px 10px}
  .eac-fx{min-height:40px;padding:0 12px}
  .eac-pbar{gap:8px}
  .eac-pkind{flex:1 1 100%;width:auto;min-height:44px}
  .eac-pq{flex:1 1 calc(100% - 60px);min-height:44px}
  .eac-picon{flex:0 0 52px;min-height:44px}
  .eac-pacts{gap:8px}
  .eac-pacts .btn2.sm{flex:1 1 0;height:auto;min-height:40px;font-size:12.5px}
  .eac-pchip{padding:7px 10px;font-size:12px}
  .eac-pchip input{width:20px;height:20px}
  .eac-pcx{min-width:40px;min-height:40px;display:grid;place-items:center;font-size:17px}
  .eac-pcs{font-size:11px}
  .eac-pnote{font-size:11px}
}


/* ── 기안작성 하단 행(첨부·문서첨부·참조권자·조회권자) 정렬 ──────────────
   라벨 셀(104px 고정) + 내용 셀(나머지 전부). 내용 셀 안은 세로 스택으로 두고
   컨트롤 높이를 32px 로 통일한다(PC 에서도 과하게 크지 않게). */
.eac-rb-col{flex-direction:column;align-items:stretch;gap:8px;flex-wrap:nowrap}
.eac-cbtn{height:32px;padding:0 12px;font-size:12px;flex:0 0 auto}

/* 첨부: [버튼][드롭영역(남은 폭)][용량] 한 줄 */
/* 버튼 줄 — 왼쪽 [PC 파일추가], 오른쪽 끝에 용량·개수 카운터.
   드롭존은 이 줄이 아니라 아래에 행 전체 폭으로 따로 놓는다(참조권자 안내와 같은 폭). */
.eac-atline{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.eac-atline .eac-atsum{flex:0 0 auto;margin-left:auto;white-space:nowrap}

/* 참조·조회 입력줄: 좌측 붙인 그룹 + 우측 끝 삭제 버튼 묶음 */
.eac-pbar{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.eac-pgrp{display:flex;align-items:center;flex:1 1 auto;min-width:0}
.eac-pgrp>*{height:32px;border-radius:0}
.eac-pgrp .eac-pkind{flex:0 0 96px;width:96px;border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
.eac-pgrp .eac-pq{flex:1 1 auto;min-width:0;border-left:0;border-right:0}
.eac-pgrp .eac-picon{flex:0 0 40px;padding:0;display:grid;place-items:center;
  border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
.eac-pgrp .eac-picon svg{width:15px;height:15px}
.eac-pacts{display:flex;gap:6px;flex:0 0 auto;margin-top:0}

/* 칩 박스 — 내용 폭 100%, 최소 2줄 */
.eac-pbox{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);
  padding:8px;min-height:74px;align-content:flex-start;margin-top:0}
.eac-pbox .eac-pempty{align-self:center;margin:auto;color:var(--slate-2)}

/* 태블릿·모바일 — 라벨을 위로 올리고(기존 ≤860 규칙), 입력줄은 접히게 */
@media (max-width:1024px){
  .eac-atline{flex-wrap:wrap}
  .eac-atline .eac-atsum{order:-1;width:100%;text-align:right;margin-left:0}
}
@media (max-width:768px){
  .eac-rb-col{gap:10px}
  .eac-drop{padding:14px 12px;white-space:normal;
    justify-content:center;text-align:center;flex:1 1 100%}
  .eac-drop em{margin-left:0;padding-left:0;width:100%;white-space:normal}
  .eac-atline .btn2{flex:1 1 100%;min-height:44px;justify-content:center}
  /* 입력줄 래퍼를 없애(display:contents) 그룹·삭제버튼을 세로 스택의 직접 자식으로 만든다.
     그래야 삭제 버튼을 칩 박스 '아래'로 내릴 수 있다(order). */
  .eac-pbar{display:contents}
  .eac-pgrp{display:flex;order:1;width:100%}
  .eac-pgrp>*{height:44px}
  .eac-pgrp .eac-pkind{flex:0 0 92px;width:92px}
  .eac-pgrp .eac-picon{flex:0 0 48px}
  /* 삭제 버튼은 칩 박스 아래로 내린다(입력줄이 좁아 흩어지지 않게) */
  .eac-pnote{order:0}
  .eac-pacts{order:3;width:100%;display:flex}
  .eac-pacts .eac-cbtn{flex:1 1 0;height:auto;min-height:40px;font-size:12.5px}
  .eac-pbox{order:2;min-height:64px}
  .eac-pnote{font-size:11px}
}


/* ══════════════════════════════════════════════════════════════════════════
   환경 모듈 — 환경신고 / 신고접수현황 (env-report.js · env-report-mgt.js)
   목록·차트·배지는 안전보건과 같은 컴포넌트를 쓰고, 여기서는 환경 고유분만 얹는다.
     · 긴급(critical) 미처리 행 강조
     · 현장 사진 썸네일 격자 + 크게보기 오버레이
     · 상세 시트 안의 처리(상태변경) 패널
   ══════════════════════════════════════════════════════════════════════════ */

/* 제목 클릭 = 상세 열기 */
.env-ttl{cursor:pointer;text-underline-offset:3px}
.env-ttl:hover{text-decoration:underline}
.env-ttl:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}

/* 긴급 미처리 — 왼쪽 띠로만 알린다(배경을 칠하면 다크에서 글자가 죽는다) */
.env-urg > td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.it-card.env-kpi-urg{border-color:var(--red)}
.it-card.env-kpi-urg .it-cn{color:var(--red)}

/* 현장 사진 격자 */
.env-phs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.env-ph{position:relative;aspect-ratio:1/1;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.env-ph img{width:100%;height:100%;object-fit:cover;display:block}
.env-ph:hover{border-color:var(--gold)}
.env-ph:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.env-ph-sk{position:absolute;inset:0;background:var(--soft)}
.env-ph-x{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:var(--slate-2)}

/* 크게 보기 — 화면 위 오버레이(팝업 차단과 무관) */
.env-lb{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  background:rgba(0,0,0,.78);padding:16px;cursor:zoom-out}
.env-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm)}
.env-lb-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1}

/* 처리 패널(상세 시트 안) */
.env-act{display:flex;flex-direction:column;gap:8px}
.env-act label{font-size:11.5px;font-weight:700;color:var(--slate)}
.env-act .select{width:100%}
.env-act-f{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.env-act-f .sfp-msg-i{margin-right:auto;font-size:11.5px;color:var(--red)}

/* 파일 필드 안내문(팝업 폼 공통) */
.fm-hint{display:block;margin-top:4px;font-size:11px;line-height:1.5}

/* 모바일 — 터치 40px 이상, 사진은 3열, 오버레이 버튼도 크게 */
@media (max-width:768px){
  .env-phs{grid-template-columns:repeat(3,1fr);gap:6px}
  .env-act .select{min-height:44px}
  .env-act textarea.select{min-height:104px}
  .env-act-f{justify-content:stretch}
  .env-act-f .btn2{flex:1 1 100%;min-height:44px;justify-content:center}
  .env-act-f .sfp-msg-i{flex:1 1 100%;margin-right:0}
  .env-urg > td:first-child{box-shadow:none}
  .sf-resp tr.env-urg{box-shadow:inset 3px 0 0 var(--red)}
}


/* ══════════════════════════════════════════════════════════════════════════
   환경점검 — 점검 입력 / 이력 / 템플릿 (env-check.js)
   현장에서 장갑 낀 손으로 누르는 화면이라 결과 버튼을 크게 잡는다(모바일 48px).
   ══════════════════════════════════════════════════════════════════════════ */
#ecTabs{margin-bottom:12px}

/* 시작 카드 — QR 스캔 / 바코드 / 영역 선택 */
.env-pick{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:12px;display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.env-pick-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.env-pick-r .select{flex:1 1 180px;min-width:0}
.env-pick-r .btn2{flex:0 0 auto}
.env-pick-or{font-size:11.5px;color:var(--slate-2);text-align:center;position:relative}
.env-pick-or::before,.env-pick-or::after{content:'';position:absolute;top:50%;width:calc(50% - 48px);
  height:1px;background:var(--line)}
.env-pick-or::before{left:0}.env-pick-or::after{right:0}
.env-bc{font-family:var(--mono)}

.env-card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:12px;margin-bottom:12px}
.env-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px}
.env-empty{padding:20px;text-align:center;color:var(--slate-2);font-size:12.5px;
  border:1px dashed var(--line);border-radius:var(--r)}
.env-cycles{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.env-cycles .btn2 i{font-style:normal;font-size:11px;color:var(--slate-2);margin-left:4px}

/* 점검 머리(일자·시간·점검자) */
.env-meta{display:flex;gap:10px;flex-wrap:wrap}
.env-meta label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;
  color:var(--slate);flex:1 1 150px;min-width:0}
.env-meta .select{width:100%}
.env-lbl{display:block;font-size:11.5px;font-weight:700;color:var(--slate);margin-bottom:6px}

/* 요약바 — 화면 맨 위에 붙어 따라다닌다. 다 적었는지를 늘 보이게 */
.env-bulk{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel)}
.env-sum{font-size:12px;color:var(--slate-2);white-space:nowrap}
/* 환경점검조회 — 문제 중심 요약 */
.it-card .it-cs{margin-top:2px;font-size:10.5px;color:var(--slate-2);font-family:var(--mono)}
.env-none{display:block;padding:14px 4px;text-align:center}
.env-miss{display:flex;flex-direction:column;gap:5px}
.env-miss-r{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}
.env-miss-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
/*  일부 빠짐은 주황, 한 번도 안 돈 곳은 빨강 — 손쓸 일이 다르다 */
.env-miss-v{flex:0 0 auto;min-width:40px;text-align:right;font-family:var(--mono);
  font-weight:800;color:var(--amber,#c98a1b)}
.env-miss-r.none .env-miss-v{color:var(--red)}
.env-miss-r.none .env-miss-n{color:var(--red)}
.env-miss-d{flex:0 0 auto;min-width:92px;text-align:right}
.env-miss-lg{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--slate-2)}
.env-miss-d{flex:0 0 auto;font-size:10.5px;color:var(--slate-2);font-family:var(--mono)}
.env-sub{margin:0 0 12px}
.env-sub > summary{cursor:pointer;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);font-size:12px;color:var(--slate-2);list-style:none}
.env-sub > summary::-webkit-details-marker{display:none}
.env-sub > summary::before{content:"▸ ";color:var(--slate-2)}
.env-sub[open] > summary::before{content:"▾ "}
.env-sub[open] > summary{margin-bottom:8px}
.env-sum b{font-family:var(--mono);color:var(--ink)}
.env-sum b.env-ok{color:var(--green)}
.env-sum b.env-bad{color:var(--red)}

/* 항목 카드 — 두 줄로 끝낸다(1줄 이름+판정, 2줄 수리점검·비고·사진) */
.env-items{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.env-item{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:7px 9px}

/* 항목 카드 — 네 줄. 위에서 아래로 읽는 순서가 현장에서 하는 순서다.
   1줄 번호·항목명·배지 / 2줄 설명 / 3줄 판정·촬영·첨부 / 4줄 비고 */
.env-r1{display:flex;align-items:center;gap:8px;min-width:0}
.env-no{flex:0 0 19px;height:19px;border-radius:50%;background:var(--soft);color:var(--slate-2);
  display:grid;place-items:center;font-size:10.5px;font-family:var(--mono)}
.env-hd{display:flex;align-items:center;gap:6px;min-width:0}
.env-hd b{min-width:0;font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.env-cf{flex:0 0 auto;font-style:normal;font-size:10px;font-weight:800;line-height:1;
  padding:3px 5px;border-radius:2px;background:var(--amber,#c98a1b);color:#fff}

/* 설명 — 줄이지 않는다. 눌러서 펴 보게 만들면 결국 모두가 누른다 */
.env-r2{margin:4px 0 0 27px;font-size:12.5px;line-height:1.45;color:var(--slate)}

/* 판정 + 사진 — 설명 바로 아래 한 줄 */
.env-r3{display:flex;align-items:center;gap:6px;margin:7px 0 0 27px;min-width:0;flex-wrap:wrap}
.env-r3 .sp{flex:1 1 auto}
.env-seg{flex:0 0 auto;display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.env-sb{height:30px;min-width:52px;padding:0 11px;cursor:pointer;border:0;background:var(--soft);
  color:var(--slate);font-family:var(--font);font-size:12px;font-weight:700;line-height:1}
.env-seg .env-sb + .env-sb{border-left:1px solid var(--line)}
.env-sb:hover{color:var(--ink)}
.env-sb.on{color:#fff}
.env-sb.on.ok{background:var(--green)}
.env-sb.on.bad{background:var(--red)}
.env-sb.on.warn{background:var(--amber,#c98a1b)}
.env-sb.on.muted{background:var(--slate)}
.env-sb:disabled{opacity:.55;cursor:default}
.env-only{flex:0 0 auto;font-size:12px;color:var(--slate-2)}

.env-in{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.env-in .env-mv{width:110px;height:30px;padding:0 8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft);color:var(--ink);
  font-family:var(--mono);font-size:12.5px;text-align:right}
.env-unit{flex:0 0 auto;font-size:11.5px;color:var(--slate-2);font-family:var(--mono)}

/*  ★.env-ph 는 사진 썸네일 버튼이 이미 쓰는 이름이다(점검상세·환경신고 공용). 다른 이름을 쓴다. */
.env-pbtn{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.env-pbtn svg{width:15px;height:15px;fill:var(--slate-2)}
.env-pbtn:hover svg{fill:var(--ink)}
.env-pbtn.has{border-color:var(--gold)}

/* 비고 — 맨 아래 전체 폭. 카드 안쪽에 정확히 맞춘다 */
.env-r4{margin:6px 0 0 27px;min-width:0}
.env-r4 .env-rm{display:block;width:100%;box-sizing:border-box;height:30px;padding:0 9px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);
  color:var(--ink);font-family:var(--font);font-size:12px}
.env-r4 .env-rm::placeholder{color:var(--slate-2)}
.env-item .env-phprev{padding-left:27px}

/*  전체 비고 — 카드 안쪽 폭에 꽉. box-sizing 이 없으면 padding·border 만큼 오른쪽이 삐져나간다.
    가로 resize 도 막는다(손잡이를 끌면 카드 밖으로 나갔다). */
.env-card .sf-ta{display:block;width:100%;box-sizing:border-box;min-height:84px;resize:vertical}

@media (max-width:560px){
  /*  좁아도 줄 수를 늘리지 않는다. 손가락이 닿게 높이만 키운다. */
  .env-item{padding:9px 10px}
  .env-sb{height:36px;min-width:0;flex:1 1 0;padding:0 8px;font-size:12.5px}
  .env-seg{flex:1 1 auto}
  /*  좁아도 판정·촬영·첨부는 한 줄에 둔다 — 접히면 항목이 다시 길어진다.
      세그먼트가 남는 폭을 먹고 줄어들며 사진 버튼 자리를 지킨다. */
  .env-r3{gap:7px;flex-wrap:nowrap}
  .env-r3 .sp{display:none}
  .env-seg{min-width:0}
  .env-in{flex:1 1 auto}
  .env-in .env-mv{flex:1 1 auto;width:auto;min-width:0;height:36px}
  .env-pbtn{width:36px;height:36px}
  .env-pbtn svg{width:17px;height:17px}
  .env-r4 .env-rm{height:36px}
  .env-r2,.env-r3,.env-r4,.env-item .env-phprev{margin-left:0;padding-left:0}
}

/* 환경점검확인(P_ENV_CHECK_CONFIRM) 전용 — 점검 입력과 달리 한 항목을 넓게 편다.
   확인은 사무실에서 하나씩 들여다보는 일이라 압축할 이유가 없다. */
.cf-item{padding:10px 12px}
.cf-item .env-item-h{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px}
.cf-item .env-no{flex:0 0 22px;height:22px;font-size:11px}
.cf-item .env-item-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cf-item .env-item-t b{font-size:13px;line-height:1.4}
.cf-item .env-item-t .sf-ro{font-size:11.5px}
.env-res{display:flex;gap:6px;flex-wrap:wrap}
.env-res-b{flex:1 1 0;min-width:84px;height:38px;padding:0 10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);
  color:var(--slate);font-family:var(--font);font-size:12.5px;font-weight:600}
.env-res-b:hover{border-color:var(--navy)}
.env-res-b.on{color:#fff;border-color:transparent}
.env-res-b.on.ok{background:var(--green)}
.env-res-b.on.bad{background:var(--red)}
.env-res-b.on.warn{background:var(--amber,#c98a1b)}
.env-res-b.on.muted{background:var(--slate)}
.env-res-b:disabled{opacity:.55;cursor:default}
.env-in-row{display:flex;align-items:center;gap:8px}
.env-in-row .select{flex:1 1 auto;min-width:0}
.env-item-f{display:flex;align-items:center;gap:8px;margin-top:8px}
.env-item-f .cf-rm{flex:1 1 auto;min-width:0;height:32px;font-size:12px}
.env-phbtn{flex:0 0 auto;height:32px;cursor:pointer}
.env-phbtn.has{border-color:var(--gold);color:var(--ink)}

.env-save{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  padding-bottom:8px}
.env-save .sfp-msg-i{margin-right:auto;font-size:12px;color:var(--red)}

/* 이력 목록의 결과 카운트 */
.env-cnt{display:inline-flex;gap:6px;flex-wrap:wrap}
.env-cnt i{font-style:normal;font-size:11px;font-family:var(--mono);padding:1px 6px;
  border-radius:var(--r-sm);border:1px solid var(--line);color:var(--slate-2)}
.env-cnt i.ok{color:var(--green)}
.env-cnt i.bad{color:var(--red);border-color:var(--red)}
.env-cnt i.warn{color:var(--amber,#c98a1b)}
.env-itbl{margin-top:0}
tr.tr-off{opacity:.55}

/* 모바일 — 결과 버튼 48px, 선택 카드 세로 스택 */
@media (max-width:768px){
  .env-pick-r{gap:8px}
  .env-pick-r .btn2{flex:1 1 100%;min-height:44px;justify-content:center}
  .env-pick-r .select{flex:1 1 100%;min-height:44px}
  .env-meta label{flex:1 1 100%}
  .env-meta .select{min-height:44px}
  /* 아래 셋은 환경점검확인 전용 — 점검 입력 카드는 .env-r1/.env-r2 로 따로 접는다 */
  .cf-item .env-res-b{flex:1 1 calc(50% - 3px);min-width:0;height:48px;font-size:13px}
  .cf-item .env-item-f{flex-wrap:wrap}
  .cf-item .env-phbtn{flex:1 1 100%;height:auto;min-height:44px;justify-content:center}
  .env-bulk .btn2{flex:1 1 calc(50% - 4px);min-height:40px;justify-content:center}
  .env-save .btn2{flex:1 1 100%;min-height:46px;justify-content:center}
  .env-save .sfp-msg-i{flex:1 1 100%;margin-right:0}
  .cf-item .env-in-row .select{min-height:44px}
}


/* ── 환경점검확인 — 항목별 확인(env-check-confirm.js) ─────────────────────
   점검 항목 카드 위에 확인자가 쓰는 줄을 얹는다. 점검 결과는 배지로만 남기고
   확인 결과 버튼이 눈에 먼저 들어오게 한다. */
.cf-bulk{margin-bottom:8px}
.cf-item{position:relative}
.cf-item .env-item-h .it-st{flex:0 0 auto;align-self:flex-start}
.cf-orig{margin-bottom:8px;font-size:11.5px}
.cf-ph{margin-bottom:8px;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.cf-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cf-line .env-lbl{margin-bottom:0;flex:0 0 62px}
.cf-line .env-res{flex:1 1 auto;min-width:0}
.cf-item .cf-rm{flex:1 1 auto;min-width:0;height:32px;font-size:12px}
.cf-done{margin-top:6px;font-size:11px;color:var(--slate-2)}
.cf-save{padding-bottom:0}

@media (max-width:768px){
  .cf-line{gap:6px}
  .cf-line .env-lbl{flex:1 1 100%}
  .cf-line .env-res{flex:1 1 100%}
  .cf-item .cf-rm{flex:1 1 100%;height:44px;font-size:12.5px}
  .cf-ph{grid-template-columns:repeat(3,1fr)}
  .cf-bulk .btn2{flex:1 1 100%;min-height:44px;justify-content:center}
}


/* ── 폐기물 관리 — 올바로 연동(env-waste.js) ─────────────────────────────
   조회 전용 화면이라 새로 만드는 것은 기간 막대와 연결 상태 배지뿐이다.
   목록·집계는 환경/안전보건과 같은 컴포넌트를 그대로 쓴다. */
.alb-state{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--slate-2);white-space:nowrap}
.alb-state.ok{color:var(--green);border-color:var(--green)}
.alb-state.bad{color:var(--red);border-color:var(--red)}

.alb-note{font-size:11.5px;color:var(--slate-2);line-height:1.5;margin:0 0 10px;
  padding:8px 10px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--soft)}
.alb-bar{align-items:flex-end}
.alb-dt{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--slate)}
.alb-dt .select{width:160px}
.alb-quick{display:flex;gap:6px;flex-wrap:wrap}
.alb-quick .btn2{height:32px;padding:0 11px;font-size:12px}

@media (max-width:768px){
  .alb-bar{align-items:stretch}
  .alb-dt{flex:1 1 calc(50% - 4px)}
  .alb-dt .select{width:100%;min-height:44px}
  .alb-quick{flex:1 1 100%}
  .alb-quick .btn2{flex:1 1 0;min-height:40px;justify-content:center}
  .alb-bar .btn2.solid{flex:1 1 100%;min-height:44px;justify-content:center}
  .alb-state{font-size:11px}
}


/* ── 폐기물 신고 — 올바로 전송(env-waste-submit.js) ──────────────────────
   실제 신고가 나가는 화면이라, 위험한 버튼과 계정 표시를 눈에 띄게 둔다. */
.alb-warn{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.55;
  padding:10px 12px;border:1px solid var(--red);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--ink);margin-bottom:12px}
/* display:flex 가 전역 [hidden]{display:none} 을 이겨서 빈 빨간 박스가 남던 문제.
   숨김은 어떤 경우에도 숨김이 이겨야 한다. */
.alb-warn[hidden]{display:none !important}
/* 코드 로드 실패 안내 — 문구와 재시도 버튼이 한 줄에 */
/* 올바로 화면의 막대는 '건수'가 아니라 '수량(173.5 등)'을 보여 준다.
   공용 .hb-row 의 값 칸은 30px 고정이라 소수점 수량이 넘쳤다 → 이 화면에서만 값 칸을 늘리고
   폐기물 종류명이 길어 라벨이 폭을 밀어내는 것도 모바일에서 줄인다. */
/* 환경점검 통계도 '건수'가 네 자리를 넘는다(66,567 등) — 값 칸을 늘린다. */
.env-charts .hb-row{grid-template-columns:var(--hb-l,96px) minmax(0,1fr) minmax(52px,auto);gap:10px}
.env-charts .hb-v{font-size:13px;white-space:nowrap}
@media (max-width:768px){
  .env-charts .hb{--hb-l:78px}
  .env-charts .hb-l{font-size:11px}
  .env-charts .hb-v{font-size:12px}
}
#wsPane .hb-row{grid-template-columns:var(--hb-l,96px) minmax(0,1fr) minmax(46px,auto);gap:10px}
#wsPane .hb-v{font-size:13px;white-space:nowrap}
@media (max-width:768px){
  #wsPane .hb{--hb-l:78px}
  #wsPane .hb-l{font-size:11px}
  #wsPane .hb-v{font-size:12px}
}
/* 전송 이력 상세 새창(env-popup.html) — 전산·EA 상세 팝업과 같은 톤 */
.alb-pop{display:flex;flex-direction:column;min-height:100vh}
.alb-pop-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel);
  position:sticky;top:0;z-index:2}
.alb-pop-h b{font-size:15px;line-height:1.4;flex:1 1 240px;min-width:0}
/* 창을 최대화해도 값이 가로로 늘어지지 않게 읽기 폭을 잡는다 */
.alb-pop-b{flex:1;width:100%;max-width:920px;margin:0 auto;padding:16px 18px;display:flex;flex-direction:column;gap:16px}
.alb-pop-f{display:flex;justify-content:flex-end;gap:8px;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--panel);
  position:sticky;bottom:0}
.alb-sec-h{font-size:12px;font-weight:700;color:var(--slate-2);margin-bottom:7px}
@media (max-width:768px){
  .alb-pop-h{padding:12px 14px}
  .alb-pop-h b{font-size:14px;flex:1 1 100%}
  .alb-pop-b{padding:12px 14px;gap:14px}
  .alb-pop-f{padding:10px 14px}
  .alb-pop-f .btn2{flex:1 1 100%;min-height:44px;justify-content:center}
}

/* 전송 이력 상세 — 보낸 값 | 올바로 저장값 대조 */
.alb-logrow{cursor:pointer}
.alb-logrow:hover{background:var(--soft)}
.alb-logrow:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.alb-verify{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.alb-verify>.sf-ro{flex:1 1 200px;min-width:0}
/* 되읽기 결과는 버튼 줄과 같은 flex 안에 들어간다 — 폭을 안 주면 내용만큼만 줄어든다. */
.alb-verify>.alb-vsrc,.alb-verify>.alb-vwrap,.alb-verify>.alb-vgrid{flex:1 1 100%;width:100%}
/* 인터페이스ID는 표 위 작은 캡션으로 */
.alb-vsrc{margin-bottom:6px;font-size:11px;color:var(--slate-2);font-family:var(--mono)}

/* 대조표 — 폭을 꽉 채우는 얇은 표.
   공용 .it-table/.sf-resp 를 쓰면 좁은 창(팝업 860px)에서 카드로 쌓여
   왼쪽이 비고 오른쪽만 길어졌다. 그래서 이 화면 전용 표로 따로 그린다. */
.alb-vwrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-sm)}
.alb-vtbl{width:100%;border-collapse:collapse;table-layout:auto;font-size:12.5px}
.alb-vtbl th,.alb-vtbl td{padding:7px 10px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:middle;white-space:nowrap}
.alb-vtbl tbody tr:last-child th,.alb-vtbl tbody tr:last-child td{border-bottom:0}
.alb-vtbl thead th{background:var(--soft);color:var(--slate-2);font-size:11px;font-weight:700}
.alb-vtbl td.mono{font-family:var(--mono);font-size:12px;color:var(--ink);
  white-space:normal;word-break:break-all}
.alb-vtbl .alb-vl{width:96px;color:var(--slate);font-weight:700}
.alb-vtbl .alb-vok{width:46px;text-align:center}
.alb-vtbl tbody tr:hover{background:var(--soft)}
/* 표 셀 색은 .it-table td 규칙이 더 구체적이라 클래스만으로는 안 먹는다 */
.alb-vtbl .alb-same{color:var(--green);font-weight:800}
.alb-vtbl .alb-diff{color:var(--red);font-weight:800}

/* 되읽기만 보여 줄 때(비교 대상 없음) — 라벨:값 2~3열 격자, '보낸 값' 절과 같은 톤 */
.alb-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.alb-vgrid>div{display:flex;min-width:0;border-bottom:1px solid var(--line)}
.alb-vgrid dt{flex:0 0 92px;padding:7px 10px;background:var(--soft);
  font-size:11.5px;font-weight:700;color:var(--slate)}
.alb-vgrid dd{flex:1;min-width:0;margin:0;padding:7px 10px;font-size:12.5px;word-break:break-all}
@media (max-width:768px){
  .alb-verify>.btn2{flex:1 1 100%;min-height:44px;justify-content:center}
  .alb-verify>.sf-ro{flex:1 1 100%}
  .alb-vtbl{font-size:12px}
  .alb-vtbl th,.alb-vtbl td{padding:6px 8px}
  .alb-vtbl .alb-vl{width:76px}
  .alb-vgrid{grid-template-columns:1fr}
}
.alb-codebar{align-items:center;flex-wrap:wrap}
.alb-codebar>span{flex:1 1 220px;min-width:0}
.alb-codebar>.btn2{flex:0 0 auto;height:30px}
@media (max-width:768px){.alb-codebar>.btn2{flex:1 1 100%;min-height:40px;justify-content:center}}
.alb-warn svg{width:16px;height:16px;flex:0 0 auto;color:var(--red);margin-top:1px}
.alb-warn-top{margin-bottom:12px}

/* 작성 폼 — 라벨 셀(고정폭) + 입력 셀(나머지 전부). 기안작성 참조권자 줄과 같은 규칙.
   그리드로 잡아야 입력이 라벨 위로 올라타지 않는다(flex 는 라벨이 줄어들며 겹쳤다). */
.alb-form{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.alb-row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:10px}
.alb-row>label{font-size:12px;font-weight:700;color:var(--slate);min-width:0}
.alb-row>label .req{color:var(--red)}
.alb-row>label .alb-hint{display:block;font-size:10.5px;font-weight:600;color:var(--slate-2);margin-top:2px}
.alb-row>.select,.alb-row>.alb-in{min-width:0}
/* 한 줄에 입력이 둘 이상인 칸(인계일자=날짜+시간, 필증발급일+관리번호).
   좁아지면 겹치지 않고 줄바꿈한다. date/time 은 브라우저 기본 최소폭이 있어 min-width:0 이 꼭 필요하다. */
.alb-in{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.alb-in>.select{flex:1 1 150px;min-width:0;width:auto}
.alb-in>.btn2{flex:0 0 auto;height:32px;white-space:nowrap}
.alb-in>.alb-unit{flex:0 0 140px}
.alb-in>input[type=date],.alb-in>input[type=time]{flex:1 1 132px}
.alb-row textarea.select{resize:vertical;width:100%}

.alb-acts{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding-bottom:8px}
.alb-acts .sfp-msg-i{margin-right:auto;font-size:12px;color:var(--red)}
.alb-acts .btn2:disabled{opacity:.45;cursor:not-allowed}
.alb-del:not(:disabled){color:var(--red);border-color:var(--red)}

/* 전송 확인 창 — 요약을 다시 보여 준다 */
.alb-conf{max-width:520px}
.alb-sum{display:flex;flex-direction:column;gap:0;margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.alb-sum>div{display:flex;gap:0;border-bottom:1px solid var(--line)}
.alb-sum>div:last-child{border-bottom:0}
.alb-sum dt{flex:0 0 108px;padding:7px 10px;background:var(--soft);font-size:11.5px;font-weight:700;color:var(--slate)}
.alb-sum dd{flex:1;min-width:0;margin:0;padding:7px 10px;font-size:12.5px;word-break:break-all}
.dh-mok.alb-danger{background:var(--red);border-color:var(--red);color:#fff}


/* 태블릿 — 라벨 셀을 줄이고, 두 칸 입력은 한 줄에 못 들어가면 접힌다 */
@media (min-width:769px) and (max-width:1024px){
  .alb-row{grid-template-columns:104px minmax(0,1fr)}
  .alb-in>.select{flex:1 1 132px}
  .alb-in>.alb-unit{flex:0 0 120px}
}

@media (max-width:768px){
  .alb-row{grid-template-columns:minmax(0,1fr);gap:5px}
  .alb-row>label{width:auto}
  .alb-row>.select,.alb-in>.select{min-height:44px}
  .alb-in>.select{flex:1 1 100%}
  /* 날짜+시간은 모바일에서도 한 줄에 둔다(각각 절반) — 세로로 늘어지면 폼이 길어진다 */
  .alb-in>input[type=date]{flex:1 1 calc(60% - 4px)}
  .alb-in>input[type=time]{flex:1 1 calc(40% - 4px)}
  .alb-in>.alb-unit{flex:1 1 100%}
  .alb-in>.btn2{flex:1 1 100%;min-height:44px;justify-content:center}
  .alb-acts .btn2{flex:1 1 100%;min-height:46px;justify-content:center}
  .alb-acts .sfp-msg-i{flex:1 1 100%;margin-right:0}
  .alb-sum dt{flex:0 0 92px;font-size:11px}
  .alb-sum dd{font-size:12px}
}


/* ══════════════════════════════════════════════════════════════════════════
   긴 목록 공통 — 페이지네이션 · 행 클릭 · 아이콘 버튼
   (pager.js · 환경점검 조회/확인/이력·템플릿)
   ══════════════════════════════════════════════════════════════════════════ */

/* 페이지 이동 줄 */
.pgr{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;
  padding:12px 0 4px}
.pgr-one{justify-content:flex-end}
/*  페이지바를 화면 아래에 붙여 둔다 — 목록이 길면 끝까지 내려야 다음 쪽 버튼이 나왔다.
    스크롤 주체는 그대로 탭 영역 하나다(안쪽에 또 스크롤을 만들지 않는다).
    탭 영역이 스크롤 컨테이너라서, 그 안에서 sticky 로 바닥에 붙이면 그만이다. */
.env-pgfix{position:sticky;bottom:0;z-index:6;background:var(--bg);
  border-top:1px solid var(--line);margin-top:4px}
.env-pgfix .pgr{padding:9px 0}
.env-pgfix:empty{display:none;border:0}
.pgr-b,.pgr-n{min-width:32px;height:32px;padding:0 8px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
  color:var(--slate);font-family:var(--font);font-size:12.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.pgr-b:hover:not(:disabled),.pgr-n:hover:not(.on){border-color:var(--navy);color:var(--ink)}
.pgr-b:disabled{opacity:.35;cursor:default}
.pgr-nums{display:flex;gap:4px}
.pgr-n.on{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}
.pgr-sum{margin-left:10px;font-size:12px;color:var(--slate-2);white-space:nowrap}
.pgr-sum b{color:var(--ink);font-family:var(--mono)}
.pgr-t{color:var(--slate-2)}

/* 행 전체를 눌러 상세로 — [상세] 버튼을 없앤 목록들 */
tr.rowlink{cursor:pointer}
tr.rowlink:hover>td{background:var(--soft)}
tr.rowlink:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* 표 안의 아이콘 버튼(수정·삭제) — 글자를 빼서 열 폭을 줄인다 */
/* 테두리·배경 없이 아이콘만 — 표에서 '관리' 열이 먹던 자리를 없앤다.
   누를 곳은 여전히 26px 사각형이고, 올렸을 때만 옅은 바탕이 뜬다. */
.icobtn{width:26px;height:26px;padding:0;display:inline-grid;place-items:center;cursor:pointer;
  border:0;border-radius:var(--r-sm);background:none;color:var(--slate-2);line-height:0}
.icobtn+.icobtn{margin-left:2px}
.icobtn svg{width:16px;height:16px}
.icobtn:hover{background:var(--soft);color:var(--ink)}
.icobtn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.icobtn.del{color:var(--red)}
.icobtn.del:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
/*  ★흐린 빨강은 진한 빨강과 구별이 잘 안 된다 — 못 누르는 단추는 색 자체를 회색으로 바꾼다.
    "지울 수 있는가"를 눈으로 한 번에 가려야 실수로 누르지 않는다. */
.icobtn:disabled{opacity:.5;cursor:not-allowed;background:none}
.icobtn.del:disabled{color:var(--slate-2)}
.icobtn.del:disabled:hover{background:none}
.env-actcol{text-align:center;white-space:nowrap;padding-left:2px;padding-right:2px}

/* 표 행을 촘촘하게 — 관리 버튼이 빠져 높이를 더 줄일 수 있다 */
#ehTbl td,#esTbl td,#ccTbl td,#etTbl td{padding-top:7px;padding-bottom:7px}

/* ── QR 스캔 전용 입력 ─────────────────────────────────────────────────
   점검은 현장에서 QR 을 찍어야 열린다(책상 점검 방지). 그래서 이 카드에는
   영역·바코드 수기 입력이 없다. */
.env-scan{align-items:center;text-align:center;gap:12px;padding:26px 16px}
.env-scanbtn{min-width:200px;height:52px;font-size:15px;justify-content:center}
.env-scanbtn svg{width:20px;height:20px}
.env-scan-d{font-size:12.5px;color:var(--slate-2);line-height:1.6}
.env-scan-x{display:flex;align-items:flex-start;gap:9px;text-align:left;
  font-size:12.5px;line-height:1.6;color:var(--ink)}
.env-scan-x svg{width:17px;height:17px;flex:0 0 auto;color:var(--amber,#c98a1b);margin-top:2px}

@media (max-width:768px){
  /* 페이지 버튼은 손가락으로 눌러야 한다 */
  /* 9개 버튼(«‹12345›») 이 한 줄에 들어가도록 폭만 줄인다 — 높이는 손가락 기준 유지 */
  .pgr{gap:4px;padding:14px 0 6px}
  .pgr-b,.pgr-n{min-width:34px;height:40px;padding:0 4px;font-size:13px}
  .pgr-nums{gap:4px}
  .pgr-sum{flex:1 1 100%;text-align:center;margin-left:0}

  /* 카드 목록을 3줄 고정 격자로 — 건마다 열 자리가 같아야 눈이 훑을 수 있다.
     .sf-resp 는 셀마다 라벨(td[data-h]::before)을 세워 한 건이 8줄이 된다. 요약만 볼 때는
     그게 자리를 다 먹으므로 라벨을 끄고, 내용 길이와 무관한 고정 격자에 앉힌다.
       1줄: 점검일 · 시간(굵게) · 주기 · 점검자   ← 언제·누가를 먼저 읽는다
       2줄: 점검영역(말줄임)
       3줄: 결과 배지(양호·불량·수리·측정)
       오른쪽 고정: 확인 배지(위) · 삭제 아이콘(아래)
     값이 없는 셀도 자리를 지킨다(빈 칸으로 남아 다음 셀이 밀려오지 않는다). */
  #ehTbl.sf-resp tbody tr, #esTbl.sf-resp tbody tr, #ccTbl.sf-resp tbody tr{
    display:grid;
    /* 칸 폭은 가장 긴 값에 맞춰 고정 — 점검일 'YYYY-MM-DD' 가 잘리지 않을 만큼만 준다 */
    grid-template-columns:70px 36px 26px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    align-content:center;align-items:center;
    column-gap:5px;row-gap:1px;
    min-height:76px;padding:8px 54px 8px 10px;position:relative}
  #ehTbl.sf-resp tbody td, #esTbl.sf-resp tbody td, #ccTbl.sf-resp tbody td{
    display:block;padding:0;border:0;background:none;min-width:0;
    /* 메타를 '흐린 보조텍스트'로 두지 않는다 — 다크는 본문색에 가깝게, 라이트는 진한 회색 */
    font-size:11.5px;line-height:1.5;font-weight:600;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #ehTbl.sf-resp tbody td::before, #esTbl.sf-resp tbody td::before,
  #ccTbl.sf-resp tbody td::before{content:none}
  #ehTbl.sf-resp thead, #esTbl.sf-resp thead, #ccTbl.sf-resp thead{display:none}

  /* 1줄 — 각 셀이 정해진 칸에 들어간다(순서가 아니라 좌표로 앉힌다) */
  #ehTbl.sf-resp tbody td:nth-child(1), #esTbl.sf-resp tbody td:nth-child(1),
  #ccTbl.sf-resp tbody td:nth-child(1){grid-area:1/1;font-size:12px;font-weight:700}
  #ehTbl.sf-resp tbody td:nth-child(2), #esTbl.sf-resp tbody td:nth-child(2),
  #ccTbl.sf-resp tbody td:nth-child(2){grid-area:1/2;font-size:12px;font-weight:700}
  #ehTbl.sf-resp tbody td:nth-child(4), #esTbl.sf-resp tbody td:nth-child(4),
  #ccTbl.sf-resp tbody td:nth-child(4){grid-area:1/3}
  #ehTbl.sf-resp tbody td:nth-child(5), #esTbl.sf-resp tbody td:nth-child(5),
  #ccTbl.sf-resp tbody td:nth-child(5){grid-area:1/4}
  /* 2줄 — 점검영역이 네 칸을 가로지른다 */
  #ehTbl.sf-resp tbody td:nth-child(3), #esTbl.sf-resp tbody td:nth-child(3),
  #ccTbl.sf-resp tbody td:nth-child(3){grid-area:2/1/3/5;font-size:12.5px;font-weight:600}
  /* 3줄 — 결과 배지 */
  #ehTbl.sf-resp tbody td:nth-child(6), #esTbl.sf-resp tbody td:nth-child(6),
  #ccTbl.sf-resp tbody td:nth-child(6){grid-area:3/1/4/5;margin-top:1px}
  /* 오른쪽 고정 영역 — 격자 밖에 둬서 1줄 폭이 건마다 흔들리지 않게 한다 */
  #ehTbl.sf-resp tbody td:nth-child(7), #esTbl.sf-resp tbody td:nth-child(7),
  #ccTbl.sf-resp tbody td:nth-child(7){position:absolute;right:8px;top:8px;overflow:visible}
  #ehTbl.sf-resp tbody td:nth-child(8){position:absolute;right:6px;bottom:6px;overflow:visible}

  #ehTbl.sf-resp .env-cnt, #esTbl.sf-resp .env-cnt, #ccTbl.sf-resp .env-cnt{gap:4px;flex-wrap:nowrap}
  #ehTbl.sf-resp .env-cnt i, #esTbl.sf-resp .env-cnt i, #ccTbl.sf-resp .env-cnt i{
    font-size:10.5px;padding:0 5px}
  #ehTbl.sf-resp .it-st, #esTbl.sf-resp .it-st, #ccTbl.sf-resp .it-st{font-size:10px;padding:1px 5px}
  /* 확인자 이름·'-' 같은 보조 표시는 모바일에서 감춘다(자리만 먹는다) */
  #ehTbl.sf-resp tbody td:nth-child(7) .sf-ro,
  #esTbl.sf-resp tbody td:nth-child(7) .sf-ro,
  #ccTbl.sf-resp tbody td:nth-child(7) .sf-ro{display:none}
  #ehTbl.sf-resp tbody .rk-txt .sf-ro, #esTbl.sf-resp tbody .rk-txt .sf-ro{display:none}

  /* 템플릿 목록도 같은 규칙 — 9개 값이 라벨을 달고 세로로 서면 한 건이 330px 가 된다.
     3줄 고정 격자로 접는다.
       1줄: 항목명(굵게) | 바코드 | 순서
       2줄: 점검영역 | 주기 | 입력
       3줄: 설비명(가로지름) | 확인 배지
       오른쪽 고정: 수정·삭제 아이콘(세로로 둘) */
  #etTbl.sf-resp tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) 74px 40px;
    align-items:center;column-gap:4px;row-gap:2px;
    min-height:76px;padding:8px 46px 8px 10px;position:relative}
  #etTbl.sf-resp tbody td{
    display:block;padding:0;border:0;background:none;min-width:0;
    font-size:11px;line-height:1.45;color:var(--slate-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #etTbl.sf-resp tbody td::before{content:none}
  #etTbl.sf-resp thead{display:none}
  #etTbl.sf-resp tbody td:nth-child(5){grid-area:1/1;font-size:13px;font-weight:700;color:var(--ink)}
  #etTbl.sf-resp tbody td:nth-child(1){grid-area:1/2;font-size:10.5px}
  #etTbl.sf-resp tbody td:nth-child(8){grid-area:1/3;font-size:10.5px;text-align:right}
  #etTbl.sf-resp tbody td:nth-child(2){grid-area:2/1}
  #etTbl.sf-resp tbody td:nth-child(3){grid-area:2/2}
  #etTbl.sf-resp tbody td:nth-child(6){grid-area:2/3}
  #etTbl.sf-resp tbody td:nth-child(4){grid-area:3/1/4/3}
  #etTbl.sf-resp tbody td:nth-child(7){grid-area:3/3;overflow:visible}
  #etTbl.sf-resp tbody td:nth-child(9){position:absolute;right:5px;top:50%;
    transform:translateY(-50%);display:grid;gap:2px;overflow:visible;padding:0}
  #etTbl.sf-resp tbody td:nth-child(9) .icobtn+.icobtn{margin-left:0}
  #etTbl.sf-resp .it-st{font-size:10px;padding:1px 5px}
  /* 판정기준·'-' 같은 보조 표시는 모바일에서 감춘다(자리만 먹는다) */
  #etTbl.sf-resp tbody .rk-txt .sf-ro,
  #etTbl.sf-resp tbody td:nth-child(7) .sf-ro{display:none}

  /* 손가락으로 누를 자리는 넓히되 보이는 것은 아이콘뿐 */
  .icobtn{width:34px;height:34px}
  .icobtn svg{width:17px;height:17px}

  .env-scanbtn{width:100%;min-width:0;height:56px}
}


/* ══════════════════════════════════════════════════════════════════════════
   환경점검 상세 — 새 창(env-popup.html) · 모바일 풀스크린 시트 공용
   (env-check-detail.js — 점검이력 · 환경점검조회 · 환경점검확인)
   폐기물 전송이력 상세(.alb-pop)와 같은 톤이되, 시트 안에도 들어가야 해서 따로 둔다.
   ══════════════════════════════════════════════════════════════════════════ */
.envp-pop{display:flex;flex-direction:column}
.envp-pop-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel);
  position:sticky;top:0;z-index:2}
.envp-pop-h b{font-size:15px;line-height:1.4;flex:1 1 200px;min-width:0}
/* 창을 최대화해도 값이 가로로 늘어지지 않게 읽기 폭을 잡는다 */
.envp-pop-b{flex:1;width:100%;max-width:900px;margin:0 auto;padding:16px 18px;
  display:flex;flex-direction:column;gap:16px}
.envp-sec-h{font-size:12px;font-weight:700;color:var(--slate-2);margin-bottom:7px}
.envp-sum{display:flex;flex-direction:column;gap:0;margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.envp-sum>div{display:flex;gap:0;border-bottom:1px solid var(--line)}
.envp-sum>div:last-child{border-bottom:0}
/* 요약은 정보 밀도를 높인다 — 줄마다 여백을 조금씩 줄여 한 화면에 더 담는다 */
.envp-sum dt{flex:0 0 92px;padding:5px 9px;background:var(--soft);
  font-size:11.5px;font-weight:700;color:var(--slate)}
.envp-sum dd{flex:1;min-width:0;margin:0;padding:5px 9px;font-size:12.5px;word-break:break-word}

/* ── 점검 항목표 — 한 항목을 한 줄로 ──────────────────────────────────
   넓은 화면에서는 진짜 표로 촘촘하게 읽는다(행 여백 최소 + 옅은 얼룩). */
.envp-pop .env-itbl{width:100%}
.envp-pop .env-itbl th{padding:6px 8px;font-size:11px}
.envp-pop .env-itbl td{padding:5px 8px;font-size:12.5px;vertical-align:middle}
.envp-pop .env-itbl tbody tr:nth-child(even)>td{background:var(--soft)}
.envp-pop .env-itbl td .sf-ro{font-size:11px}
/* 값이 없는 칸 — '-' 를 옅게 (자리는 지키되 눈에 걸리지 않게) */
.env-itnil{color:var(--slate-2);opacity:.55}
/* 값 옆 작은 썸네일 — 사진이 있다는 표시. 누르면 원본을 크게 본다. */
.env-itph{display:inline-block;vertical-align:middle;margin-left:6px;width:22px;height:22px;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;
  background:var(--soft)}
.env-itph img{width:100%;height:100%;object-fit:cover;display:block}

/* 새 창일 때만 화면 전체를 채운다 — 시트 안에서는 시트가 이미 높이를 잡는다 */
.eac-body .envp-pop{min-height:100vh}
/* 시트는 자기 머리줄(.msl-sheet-h)이 있으니 본문 머리줄은 감춘다 — 제목이 둘로 보이지 않게 */
.msl-sheet .envp-pop-h{display:none}
.msl-sheet .envp-pop-b{padding:4px 0 0;gap:14px}

@media (max-width:768px){
  .envp-pop-h{padding:12px 14px}
  .envp-pop-h b{font-size:14px;flex:1 1 100%}
  .envp-pop-b{padding:12px 14px;gap:14px}
  .envp-sum dt{flex:0 0 84px;font-size:11px}
  .envp-sum dd{font-size:12px}
}



/* ══════════════════════════════════════════════════════════════════════════
   점검 항목표 — 좁은 화면(≤768px)
   .sf-resp 기본은 셀마다 라벨을 세워 한 항목이 4~5줄이 되고 오른쪽 절반이 빈다.
   라벨을 끄고 항목당 2줄로 접는다.
     1줄: [#] 항목명(굵게) ............ 점검 배지
     2줄: 설비 · 값+단위(+썸네일) ...... 확인 배지
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .envp-pop .env-itbl.sf-resp thead{display:none}
  .envp-pop .env-itbl.sf-resp tbody tr{
    display:grid;grid-template-columns:16px minmax(0,1fr) auto;
    column-gap:6px;row-gap:1px;align-items:center;
    padding:6px 8px;margin-bottom:4px}
  .envp-pop .env-itbl.sf-resp tbody td{
    display:block;padding:0;border:0;background:none;min-width:0;
    font-size:11.5px;line-height:1.45;color:var(--slate)}
  .envp-pop .env-itbl.sf-resp tbody td::before{content:none}
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(1){grid-area:1/1;
    font-size:10px;color:var(--slate-2);text-align:right}
  /* 항목명은 줄바꿈을 허용한다 — nowrap 으로 자르면 뒤에 붙는 비고가 통째로 사라진다 */
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(2){grid-area:1/2;
    white-space:normal;overflow:hidden}
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(2) b{font-size:12.5px;color:var(--ink)}
  /* 설비는 이름 옆에 작게, 비고는 그 아래 한 줄(길면 말줄임) */
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(2) .sf-ro{font-size:10.5px}
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(2)>div.sf-ro{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(3){grid-area:1/3;justify-self:end}
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(4){grid-area:2/2/3/3;font-size:11px}
  .envp-pop .env-itbl.sf-resp tbody td:nth-child(5){grid-area:2/3;justify-self:end}
  .envp-pop .env-itbl.sf-resp .it-st{font-size:10px;padding:1px 5px}
  .envp-pop .env-itph{width:18px;height:18px;margin-left:5px}
}


/* ══════════════════════════════════════════════════════════════════════════
   삭제 자료 관리(휴지통) — 좁은 화면(≤768px) 카드 압축
   .sf-resp 기본은 셀마다 라벨을 세워 한 건이 279px(8줄)이 된다. 환경 자료까지 들어오면서(E4)
   훑어볼 건수가 늘어 라벨을 끄고 4줄 고정 격자로 접는다.
     1줄: [체크] 제목(굵게) ............ 경과
     2줄:        모듈 배지 ............. 원본일자
     3줄:        삭제일시 .............. 삭제자
     4줄:        [복구] [영구삭제]
   열은 data-h 로 집는다 — 편집 권한 유무에 따라 셀 개수가 달라져 nth-child 는 못 쓴다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  #trTbl.sf-resp thead{display:none}
  #trTbl.sf-resp tbody tr{
    display:grid;grid-template-columns:24px minmax(0,1fr) auto;
    column-gap:6px;row-gap:2px;align-items:center;padding:9px 10px}
  #trTbl.sf-resp tbody td{
    display:block;padding:0;border:0;background:none;min-width:0;
    font-size:11.5px;line-height:1.45;color:var(--slate);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #trTbl.sf-resp tbody td::before{content:none}
  #trTbl.sf-resp tbody td[data-h="선택"]{grid-area:1/1;overflow:visible}
  #trTbl.sf-resp tbody td[data-h="선택"] .tr-cklab span{display:none}   /* 체크박스만 남긴다 */
  #trTbl.sf-resp tbody td[data-h="제목"]{grid-area:1/2}
  #trTbl.sf-resp tbody td[data-h="제목"] b{font-size:13px;color:var(--ink)}
  #trTbl.sf-resp tbody td[data-h="경과"]{grid-area:1/3;justify-self:end;font-size:11px}
  #trTbl.sf-resp tbody td[data-h="모듈"]{grid-area:2/2;overflow:visible}
  #trTbl.sf-resp tbody td[data-h="원본일자"]{grid-area:2/3;justify-self:end;font-size:11px}
  #trTbl.sf-resp tbody td[data-h="삭제일시"]{grid-area:3/2;font-size:11px}
  #trTbl.sf-resp tbody td[data-h="삭제자"]{grid-area:3/3;justify-self:end;font-size:11px}
  #trTbl.sf-resp tbody td[data-h="관리"]{grid-area:4/2/5/4;overflow:visible;
    display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
  /* 영구삭제는 되돌릴 수 없어 아이콘만 두지 않는다 — 글자를 남기되 버튼만 낮춘다 */
  #trTbl.sf-resp tbody td[data-h="관리"] .btn2{min-height:34px;padding:0 10px;font-size:12px}
  #trTbl.sf-resp .it-st{font-size:10.5px;padding:1px 6px}
}


/* ══════════════════════════════════════════════════════════════════════════
   문서첨부 설정 모달 (ea-compose.js pickDoc)
   좌측 문서함 트리 · 우측 목록(체크) · 하단 선택 목록 · 확인/닫기.
   좁은 화면에서는 트리를 접고 드롭다운으로 바꾸며, 목록은 카드로 쌓인다.
   ══════════════════════════════════════════════════════════════════════════ */
.eac-modal .eac-mbox.eda-box{width:min(1080px,96vw);max-height:90vh;gap:12px}

/* 필터 줄 */
.eda-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.eda-fs{flex:0 0 auto;width:auto;min-width:104px}
.eda-q{flex:1 1 180px;min-width:140px}
.eda-pchk{flex:0 0 auto;white-space:nowrap}

/* 본문 = 트리 + 목록 */
.eda-main{flex:1;min-height:0;display:flex;gap:12px}
.eda-tree{flex:0 0 190px;min-width:0;overflow:auto;padding-right:2px;
  border-right:1px solid var(--line)}
.eda-grp+.eda-grp{margin-top:10px}
.eda-gh{display:flex;align-items:center;gap:6px;padding:6px 4px;
  font-size:12px;font-weight:700;color:var(--slate);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.eda-gh svg{width:15px;height:15px;flex:0 0 auto;color:var(--gold)}
.eda-bx{width:100%;display:flex;align-items:center;gap:6px;padding:7px 10px 7px 24px;
  border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;
  color:var(--slate);font-family:var(--font);font-size:12.5px;text-align:left}
.eda-bx:hover:not(:disabled){background:var(--soft);color:var(--ink)}
.eda-bx.on{background:var(--navy-050);color:var(--navy);font-weight:700}
.eda-bx:disabled{opacity:.4;cursor:default}
.eda-bt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eda-bn{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--slate-2)}
.eda-bx.on .eda-bn{color:var(--navy)}

.eda-listwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.eda-listhead{display:flex;align-items:center;gap:8px}
.eda-msel{display:none}                      /* 넓은 화면에서는 좌측 트리를 쓴다 */
.eda-cnt{flex:1;min-width:0;font-size:12px;color:var(--slate-2);font-family:var(--mono)}
.eda-listwrap .gwrap{flex:1;min-height:120px}
.eda-listwrap .gscroll{max-height:320px;overflow:auto}
.eda-tbl td{padding-top:6px;padding-bottom:6px;font-size:12.5px}
.eda-tbl tbody tr{cursor:pointer}
.eda-tbl tbody tr:hover>td{background:var(--soft)}
.eda-tbl .pgr{padding:8px 0 0}

/* 선택 목록 */
.eda-picked{flex:0 0 auto;border-top:1px solid var(--line);padding-top:10px}
.eda-pt{font-size:12px;font-weight:700;color:var(--slate);margin-bottom:6px}
.eda-pt b{color:var(--ink);font-family:var(--mono)}
.eda-plist{display:flex;flex-wrap:wrap;gap:6px;max-height:88px;overflow:auto}

.eda-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:8px;
  border-top:1px solid var(--line);padding-top:10px}

@media (max-width:768px){
  /* 창을 꽉 채우고, 트리는 접어 드롭다운으로 — 좁은 화면에서 2단 구성은 못 쓴다 */
  .eac-modal .eac-mbox.eda-box{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;gap:10px}
  .eda-filter{gap:5px}
  .eda-fs{flex:1 1 46%;min-width:0}
  .eda-q{flex:1 1 100%}
  .eda-filter .btn2{flex:1 1 100%;min-height:40px;justify-content:center}
  .eda-main{gap:0}
  .eda-tree{display:none}
  .eda-msel{display:block;flex:1 1 auto;min-width:0;height:40px}
  .eda-listhead{flex-wrap:wrap}
  .eda-cnt{flex:0 0 auto;order:3}
  .eda-listhead .btn2{min-height:40px}
  .eda-listwrap .gscroll{max-height:none}
  /* 목록 카드 — 라벨 반복을 끄고 2줄로 */
  .eda-tbl.sf-resp thead{display:none}
  .eda-tbl.sf-resp tbody tr{
    display:grid;grid-template-columns:24px minmax(0,1fr) auto;
    column-gap:6px;row-gap:1px;align-items:center;padding:8px 10px}
  .eda-tbl.sf-resp tbody td{display:block;padding:0;border:0;background:none;min-width:0;
    font-size:11px;line-height:1.45;color:var(--slate);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .eda-tbl.sf-resp tbody td::before{content:none}
  .eda-tbl.sf-resp tbody td[data-h="선택"]{grid-area:1/1;overflow:visible}
  .eda-tbl.sf-resp tbody td[data-h="제목"]{grid-area:1/2}
  .eda-tbl.sf-resp tbody td[data-h="제목"] b{font-size:13px;color:var(--ink)}
  .eda-tbl.sf-resp tbody td[data-h="완료일시"]{grid-area:1/3;justify-self:end}
  .eda-tbl.sf-resp tbody td[data-h="양식명"]{grid-area:2/2}
  .eda-tbl.sf-resp tbody td[data-h="문서번호"]{grid-area:2/3;justify-self:end}
  /* 확인/닫기는 하단 고정 */
  .eda-picked{max-height:110px;overflow:auto}
  .eda-foot{position:sticky;bottom:0;background:var(--panel)}
  .eda-foot .btn2{flex:1 1 0;min-height:44px;justify-content:center}
}


/* ══════════════════════════════════════════════════════════════════════════
   현장 사진 — 촬영/갤러리 두 버튼 + 썸네일 미리보기
   환경점검 항목(.env-ph*)과 등록 폼(.fm-ph*)이 같은 모양을 쓴다.
   모바일에서는 두 버튼을 좌우로 나란히 둔다(한 손으로 바로 찍게).
   ══════════════════════════════════════════════════════════════════════════ */
.env-phbar,.fm-phbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.env-phbtn,.fm-phbtn{cursor:pointer}
.env-phprev,.fm-thumbs{display:flex;flex-wrap:wrap;gap:6px}
.env-phprev:not(:empty),.fm-thumbs:not(:empty){margin-top:8px}
.env-thumb,.fm-thumb{position:relative;width:64px;height:64px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--soft)}
.env-thumb img,.fm-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.env-thx,.fm-thx{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;
  display:grid;place-items:center;cursor:pointer;line-height:1;
  border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:13px}
.env-thx:hover,.fm-thx:hover{background:var(--red)}

/* 스캔 유효시간 안내 — 저장 줄 왼쪽에 조용히 */
.env-scanexp{flex:1 1 auto;min-width:0}

@media (max-width:768px){
  /* 촬영·갤러리를 반씩 나눠 좌우로 */
  .env-phbar,.fm-phbar{gap:8px}
  .env-phbar .env-phbtn,.fm-phbar .fm-phbtn{flex:1 1 0;min-width:0;min-height:44px;justify-content:center}
  .env-thumb,.fm-thumb{width:72px;height:72px}
  /* 저장 줄 — 취소·저장을 나란히, 안내문은 윗줄 */
  .env-save{flex-wrap:wrap}
  .env-scanexp{flex:1 1 100%;order:-1}
  .env-save .btn2{flex:1 1 0;min-height:44px;justify-content:center}
}


/* ══════════════════════════════════════════════════════════════════════════
   QR코드 인쇄 (env-check-qr.js) — A4 라벨 격자
   전산 자산라벨(.lb-*)과 같은 방식: 화면에서는 폭에 맞춰 축소해 보고,
   인쇄할 때는 축소를 풀어 mm 실척으로 낸다.
   라벨 1장 = 로고 / QR / 점검영역(크게) · 주기·설비명 / 바코드번호
   ══════════════════════════════════════════════════════════════════════════ */
.eqr-pop .envp-pop-h .sp{flex:1}
.eqr-zwrap{width:100%;overflow:hidden;padding:14px 0}
/* 축소해도 가운데를 지키게 origin 을 가운데로 둔다(왼쪽 기준이면 여백이 한쪽으로 몰린다) */
.eqr-zoom{transform-origin:top center;width:200mm;margin:0 auto}

/*  ★한 장에 하나 — A4 한 면을 라벨 하나가 꽉 채운다.
    장마다 페이지를 나누므로 여러 개를 고르면 고른 수만큼 장이 나온다. */
.eqr-page{width:200mm;min-height:252mm;display:flex;align-items:center;justify-content:center;
  padding:0;page-break-after:always;break-after:page}
.eqr-page:last-child{page-break-after:auto;break-after:auto}

.eqr-label{width:180mm;height:240mm;border:1.6pt solid #111;border-radius:4mm;padding:14mm 10mm;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10mm;
  background:#fff;color:#111;page-break-inside:avoid;break-inside:avoid;text-align:center}
.eqr-logo{height:16mm;width:auto;object-fit:contain;flex:0 0 auto}
/*  QR — 멀리서도 읽히게 크게. 한 변 120mm. */
.eqr-q{width:120mm;height:120mm;flex:0 0 auto}
.eqr-q svg{width:100%;height:100%;display:block}
.eqr-area{font-size:34pt;font-weight:800;line-height:1.2;width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqr-sub{font-size:16pt;line-height:1.35;width:100%;color:#333;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 화면에서 다크 테마여도 라벨은 종이색 그대로 — 인쇄물과 같은 모습으로 확인한다 */
.eqr-zoom,.eqr-page{background:transparent}

@media print{
  /* 인쇄에는 라벨만 남긴다 */
  .envp-pop-h{display:none !important}
  .eqr-zwrap{overflow:visible;padding:0;height:auto !important}
  .eqr-zoom{transform:none !important;width:auto;margin:0}
  .eqr-pop{min-height:0}
  body{background:#fff}
  /*  한 장에 하나이므로 여백을 줄여 라벨이 종이를 꽉 채우게 둔다.
      ★폭을 풀어 준다 — 200mm 로 고정해 두면 A4 가용 폭(210-16=194mm)을 넘어
        브라우저가 통째로 줄이거나 오른쪽을 잘라 낸다. */
  .eqr-page{width:auto;min-height:auto;padding:0}
  @page{size:A4 portrait;margin:8mm}
}

@media (max-width:768px){
  .eqr-pop .envp-pop-h{position:sticky;top:0}
  .eqr-pop .envp-pop-h .btn2{flex:1 1 0;min-height:44px;justify-content:center}
  .eqr-zwrap{padding:8px 0}
}

/* QR 인쇄 목록 — 좁은 화면(≤768px) 카드 압축.
   라벨을 반복해 세우면 한 건이 190px 가 된다 → 2줄 고정 격자로 접는다.
     1줄: [체크] 점검영역(굵게) ............ 항목수
     2줄:        바코드 | 주기 | 설비명
   칸마다 자리를 따로 줘서 건마다 열이 흔들리지 않게 한다. */
@media (max-width:768px){
  #qrTbl.sf-resp thead{display:none}
  #qrTbl.sf-resp tbody tr{
    display:grid;grid-template-columns:24px 76px 58px minmax(0,1fr);
    column-gap:6px;row-gap:1px;align-items:center;padding:9px 10px}
  #qrTbl.sf-resp tbody td{
    display:block;padding:0;border:0;background:none;min-width:0;
    font-size:11px;line-height:1.45;color:var(--slate);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #qrTbl.sf-resp tbody td::before{content:none}
  #qrTbl.sf-resp tbody td[data-h="선택"]{grid-area:1/1;overflow:visible}
  #qrTbl.sf-resp tbody td[data-h="점검영역"]{grid-area:1/2/2/4}
  #qrTbl.sf-resp tbody td[data-h="점검영역"] b{font-size:13px;color:var(--ink)}
  /* 오른쪽 정렬은 글자만 — justify-self:end 로 상자를 줄이면 건마다 열 자리가 흔들린다 */
  #qrTbl.sf-resp tbody td[data-h="항목수"]{grid-area:1/4;text-align:right !important}
  #qrTbl.sf-resp tbody td[data-h="바코드"]{grid-area:2/2}
  #qrTbl.sf-resp tbody td[data-h="주기"]{grid-area:2/3}
  #qrTbl.sf-resp tbody td[data-h="설비명"]{grid-area:2/4;text-align:right !important}
}

/* 계정관리 — 로그인 실패로 잠긴 계정 표시(관리자만 보는 화면) */
.rb-lock{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);
  font-size:10.5px;font-weight:700;white-space:nowrap}


/* ══════════════════════════════════════════════════════════════════════════
   계정관리(P_ACCOUNT) — 좁은 화면(≤768px) 카드
   9열짜리 관리표를 그대로 두면 가로로만 끌어야 해서 잠금 해제 한 번이 번거롭다.
   한 계정을 4줄로 접는다(열 순서: 1 로그인ID / 2 이름 / 3 사번 / 4 소속 /
   5 권한범위 / 6 등급 / 7 상태 / 8 가입일 / 9 관리).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* ★칸 번호(nth-child)로 자리를 잡던 것을 칸 이름으로 바꿨다.
     '접속' 칸이 나중에 맨 앞에 끼어들면서 번호가 한 칸씩 밀려, 로그인ID 자리에 접속이,
     사번 자리에 이름이 놓이는 식으로 전부 어긋나 있었다. 이름표는 열이 늘어도 안 밀린다.

     한 사람 = 두 줄.
       1줄  이름 · 사번            상태  ⋯
       2줄  부서 · 파트            등급
     단추 다섯 개는 [⋯]를 눌렀을 때만 셋째 줄로 펼쳐진다. */
  .rb-table thead{display:none}
  .rb-table tbody tr{display:grid;
    grid-template-columns:minmax(0,1fr) auto auto auto;
    column-gap:7px;row-gap:1px;align-items:center;
    padding:7px 10px;border-bottom:1px solid var(--line)}
  .rb-table tbody td{display:block;padding:0;border:0;background:none;min-width:0;
    font-size:11px;line-height:1.4;color:var(--slate);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .rb-table tbody td.rb-nm   {grid-area:1/1;font-size:13px;color:var(--ink);font-weight:600}
  .rb-table tbody td.rb-no   {grid-area:1/2;justify-self:end;font-size:11px}
  .rb-table tbody td.rb-stat {grid-area:1/3;justify-self:end;overflow:visible}
  .rb-table tbody td.rb-actc {grid-area:1/4;justify-self:end;overflow:visible;padding:0;margin:0}
  .rb-table tbody td.rb-dept {grid-area:2/1}
  .rb-table tbody td.rb-grade{grid-area:2/2/3/5;justify-self:end;overflow:visible;max-width:52vw}
  .rb-table tbody td.rb-grade .rb-sel{width:100%;min-height:26px;height:26px;font-size:11.5px;padding:0 22px 0 8px}
  /* 좁은 화면에서는 안 보여도 되는 칸 — 값은 그대로 있고 자리만 비운다 */
  .rb-table tbody td.rb-onc,
  .rb-table tbody td.rb-lid,
  .rb-table tbody td.rb-scope,
  .rb-table tbody td.rb-join{display:none}

  /* 관리 단추 — 평소엔 [⋯] 하나만, 펼치면 셋째 줄 전체를 쓴다 */
  .rb-table .rb-more{display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;border:1px solid var(--line);border-radius:7px;
    background:transparent;color:var(--slate);font-size:15px;line-height:1;cursor:pointer;padding:0}
  .rb-table .rb-more:hover{color:var(--ink);background:var(--soft)}
  .rb-table tbody td.rb-actc .rb-mini{display:none}
  .rb-table tbody tr.open td.rb-actc{grid-area:3/1/4/5;justify-self:stretch;margin-top:6px;
    display:flex;flex-wrap:wrap;gap:6px}
  .rb-table tbody tr.open td.rb-actc .rb-more{order:99;flex:0 0 auto}
  .rb-table tbody tr.open td.rb-actc .rb-mini{display:inline-flex;flex:1 1 auto;
    min-height:34px;justify-content:center}
}
/* [⋯]는 좁은 화면 전용 — PC 표에서는 자리만 차지한다 */
.rb-more{display:none}

/* 계정관리 상단 — 좁은 화면에서 탭 줄과 [계정 추가] 가 한 줄에 안 들어가 잘렸다.
   셸이 옮겨 놓는 액션 상자(.head-acts)를 줄바꿈 허용해 다음 줄로 내린다. */
@media (max-width:768px){
  .rb-tabs{flex-wrap:wrap;row-gap:6px}
  .rb-tabs .head-acts{flex:1 1 100%;justify-content:flex-end}
  .rb-tabs .head-acts .btn2{min-height:40px}
}


/* 임시 비밀번호 1회 표시 상자(계정관리 — 관리자 전용) */
.eac-modal .eac-mbox.tpw-box{width:min(420px,92vw);gap:12px}
.tpw-note{font-size:12px;line-height:1.6;color:var(--slate)}
.tpw-note b{color:var(--red)}
.tpw-row{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.tpw-k{flex:0 0 84px;font-size:11.5px;font-weight:700;color:var(--slate-2)}
.tpw-v{flex:1;min-width:0;font-size:14px;word-break:break-all}
.tpw-pw{font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.tpw-foot{display:flex;justify-content:flex-end;gap:8px}
@media (max-width:768px){
  .tpw-foot .btn2{flex:1 1 0;min-height:44px;justify-content:center}
}

/* ── 월 근태 마감(P_ATT_CLOSE) ─────────────────────────────
   출퇴근 현황 매트릭스(.at-table)를 그대로 쓰고, 마감 전용 요소만 여기서 더한다. */
.btn2.danger{background:var(--red);color:#fff;border-color:var(--red)} .btn2.danger svg{color:#fff}
.btn2.danger:hover{box-shadow:var(--shadow)}

/* KPI 줄 */
.ac-kpi{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.ac-k{flex:1 1 140px;min-width:120px;display:flex;flex-direction:column;gap:1px;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.ac-kl{font-size:11px;font-weight:600;color:var(--slate-2)}
.ac-kv{font-size:19px;font-weight:800;color:var(--ink);line-height:1.15}
.ac-ks{font-size:10.5px;color:var(--slate-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-k.is-bad{border-color:var(--red);background:var(--red-050)} .ac-k.is-bad .ac-kv{color:var(--red)}
.ac-k.is-closed{border-color:var(--navy);background:var(--navy-050)} .ac-k.is-closed .ac-kv{color:var(--navy)}
.ac-k.is-open .ac-kv{color:var(--slate)}

/* 이상 칩(필터) */
.toolbar.ac-chips{flex-wrap:wrap;gap:6px}
.ac-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--slate);cursor:pointer}
.ac-chip b{font-size:12.5px}
.ac-chip.bad{border-color:var(--red);color:var(--red);background:var(--red-050)}
.ac-chip.warn{border-color:var(--gold);color:var(--gold);background:var(--gold-050)}
.ac-chip.ot{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-050)}
.ac-chip.ok{border-color:var(--line);color:var(--slate-2);cursor:default}
.ac-chip.on{outline:2px solid currentColor;outline-offset:1px}
.ac-target{font-size:11px;font-weight:600;color:var(--slate-2);font-family:var(--mono)}

/* 매칭에서 빠진 인원 경고 — 급여 누락 위험이라 눈에 띄게 */
.ac-warn{border:1px solid var(--red);background:var(--red-050);border-radius:var(--r-sm);padding:9px 12px;margin:0 0 8px}
.ac-warn-h{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.ac-warn-h svg{flex:0 0 auto;color:var(--red);margin-top:1px}
.ac-warn-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ac-wchip{display:inline-flex;align-items:baseline;gap:6px;background:var(--panel);border:1px solid var(--red);
  border-radius:var(--r-sm);padding:3px 9px;font-size:11.5px}
.ac-wchip b{font-size:12.5px;color:var(--ink)}
.ac-wk{font-weight:700;color:var(--red)}
.ac-wn{font-family:var(--mono);color:var(--slate)}
.ac-wd{color:var(--slate-2)}

/* 액션 줄 */
.toolbar.ac-actions{flex-wrap:wrap;gap:6px}
.ac-only{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--slate);cursor:pointer}
.ac-lock{background:var(--navy-050);color:var(--navy);border-color:var(--navy)}

/* 이상 셀 — 배경까지 확실히 */
.at-table.ac-table td.at-cell.ac-hit.bad{background:var(--red-050);box-shadow:inset 0 0 0 1.5px var(--red)}
.at-table.ac-table td.at-cell.ac-hit.warn{background:var(--gold-050);box-shadow:inset 0 0 0 1.5px var(--gold)}
.at-table.ac-table td.at-cell.ac-hit.ot{background:var(--indigo-050);box-shadow:inset 0 0 0 1.5px var(--indigo)}
.atc-b.ac-iss.bad{background:var(--red);color:#fff}
.atc-b.ac-iss.warn{background:var(--gold);color:#3a2f10}
.atc-b.ac-iss.ot{background:var(--indigo);color:#fff}
.at-table.ac-table td.at-cell.dim{opacity:.35}

/* 이상 목록 */
.ac-list{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.ac-list-h{padding:7px 12px;font-size:12px;font-weight:700;color:var(--slate);background:var(--soft);border-bottom:1px solid var(--line)}
.ac-list-b{max-height:320px;overflow:auto}
.ac-item{display:grid;grid-template-columns:52px 90px 118px 1fr;align-items:center;gap:8px;
  padding:6px 12px;border-bottom:1px solid var(--line);font-size:12px}
.ac-item:last-child{border-bottom:0}
.ac-i-d{font-family:var(--mono);font-weight:700;color:var(--slate)}
.ac-i-n{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-i-b{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);text-align:center;white-space:nowrap}
.ac-i-b.bad{background:var(--red);color:#fff}
.ac-i-b.warn{background:var(--gold);color:#3a2f10}
.ac-i-b.ot{background:var(--indigo);color:#fff}
.ac-i-x{color:var(--slate-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-i-more{padding:7px 12px;font-size:11.5px;color:var(--slate-2)}

/* 마감 이력 */
.ac-log{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.ac-log-h{padding:7px 12px;font-size:12px;font-weight:700;color:var(--slate);background:var(--soft);border-bottom:1px solid var(--line)}
.ac-lrow{display:grid;grid-template-columns:74px 128px 90px 1fr;gap:8px;align-items:center;
  padding:6px 12px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--slate)}
.ac-lrow:last-child{border-bottom:0}
.ac-lrow.fail{background:var(--red-050)}
.ac-lact{font-weight:800;color:var(--ink)}
.ac-lat,.ac-lby{font-family:var(--mono)}
.ac-lmsg{color:var(--slate-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 확인 다이얼로그 본문 */
.ac-modal .ac-mlines{display:flex;flex-direction:column;gap:5px}
.ac-ml{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--slate);
  padding:5px 9px;border-radius:var(--r-sm);background:var(--soft)}
.ac-ml b{color:var(--ink);text-align:right}
.ac-ml.warn{background:var(--red-050)} .ac-ml.warn b{color:var(--red)}

/* 모바일 — 축소하되 읽을 수 있게. 표는 가로 스크롤, 목록은 2줄 카드. */
@media (max-width:768px){
  .ac-kpi{gap:6px}
  .ac-k{flex:1 1 calc(50% - 3px);min-width:0;padding:7px 10px}
  .ac-kv{font-size:17px}
  .ac-warn-h{font-size:12px}
  .toolbar.ac-actions .btn2{flex:1 1 0;min-height:42px;justify-content:center}
  .ac-item{grid-template-columns:46px 1fr;grid-template-areas:"d n" "d x";row-gap:2px}
  .ac-i-d{grid-area:d} .ac-i-n{grid-area:n}
  .ac-i-b{grid-area:n;justify-self:end}
  .ac-i-x{grid-area:x;font-size:11px}
  .ac-lrow{grid-template-columns:64px 1fr;grid-template-areas:"a t" "a m";row-gap:2px}
  .ac-lact{grid-area:a} .ac-lat{grid-area:t} .ac-lby{display:none} .ac-lmsg{grid-area:m;white-space:normal}
}
/* 마감 진행 중 알림(버튼 없는 모달) */
.ac-busy{min-width:300px;max-width:420px}
.ac-busy-b{display:flex;align-items:flex-start;gap:12px;padding:4px 2px;font-size:13px;color:var(--ink)}
.ac-busy-b .spin{flex:0 0 auto;margin-top:2px}
.ac-busy-s{margin-top:4px;font-size:11.5px;font-weight:500;color:var(--slate-2);line-height:1.5}

/* ── 로그인 실패 경고 모달 ───────────────────────────────── */
.lg-alert .lg-al-box{min-width:280px;max-width:380px}
.lg-alert .lg-al-box.locked .dh-mh{color:var(--red)}
.lg-al-m{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.lg-al-cnt{margin:10px 0 6px;padding:8px 12px;border-radius:var(--r-sm);
  background:var(--gold-050);color:var(--gold);font-size:13px;font-weight:600;text-align:center}
.lg-al-cnt b{font-size:15px}
.lg-al-box.locked .lg-al-cnt{background:var(--red-050);color:var(--red)}
.lg-al-s{margin:0;font-size:12px;color:var(--slate-2);line-height:1.5}
@media (max-width:768px){
  .lg-alert .lg-al-box{min-width:0;width:calc(100vw - 40px)}
  .lg-alert .dh-mfoot .btn2{flex:1 1 0;min-height:44px;justify-content:center}
}

/* 월 근태 마감 — 세로 스크롤은 페이지 하나만(그리드·목록 안에서 또 스크롤되지 않게).
   가로만 그리드 안에서 스크롤한다. */
.ac-pane .gwrap .gscroll{max-height:none}
.ac-pane .ac-list-b{max-height:none;overflow:visible}

/* ── 파트원 배정(P_PART_MEMBER) ────────────────────────── */
.pm-top{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:2px 0 10px}
.pm-leaders{display:flex;flex-wrap:wrap;gap:8px}
.pm-l{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);font-size:12.5px}
.pm-l.def{border-color:var(--navy);background:var(--navy-050)}
.pm-l-n{font-weight:700;color:var(--ink)}
.pm-l-g{color:var(--slate-2)}
.pm-l-c{font-family:var(--mono);font-weight:700;color:var(--navy)}
.pm-l-d{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--navy);color:#fff}
.pm-note{flex:1 1 260px;min-width:0;font-size:12px;line-height:1.6;color:var(--slate);
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.pm-mini{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);color:var(--slate);cursor:pointer}
.pm-mini:hover{border-color:var(--navy);color:var(--navy)}
/* [조장 해제] — 되돌리는 쪽이라 글씨만 빨갛게 해서 [조장 지정] 과 눈으로 구분되게 한다.
   바탕·테두리는 그대로 두고, 손을 올려도 빨강이 풀리지 않게 한 번 더 못 박는다. */
.pm-mini.danger{color:var(--red)}
.pm-mini.danger:hover{color:var(--red);border-color:var(--red)}
.toolbar.pm-actions{flex-wrap:wrap;gap:6px}

.pm-jos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.pm-jchip{font-size:11.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--indigo);
  background:var(--indigo-050);color:var(--indigo)}
.pm-jchip b{color:var(--indigo)}
.pm-jown{color:var(--slate-2)}

.pm-table td{vertical-align:middle}
.pm-table th.pm-nm,.pm-table td.pm-nm{min-width:170px;text-align:left}
.pm-table th.pm-own,.pm-table td.pm-own{min-width:150px}
.pm-table th.pm-line,.pm-table td.pm-line{min-width:100px}
.pm-table th.pm-jo,.pm-table td.pm-jo{min-width:96px}
.pm-table th.pm-act,.pm-table td.pm-act{min-width:110px}
/* 변경된 행 — 행 전체를 갈색으로 덮지 않고 왼쪽 금색 바 + 아주 옅은 틴트로만 표시한다.
   (값 자체가 묻히지 않게. 다크·라이트 모두 배경 위에 섞이는 color-mix 라 자연스럽다) */
.pm-table tr.dirty td{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.pm-table tr.dirty td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.pm-table .nm{font-weight:700;color:var(--ink);white-space:nowrap}
.pm-table .no{font-size:11px;color:var(--slate-2);white-space:nowrap}
.pm-tag{margin-left:5px;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:999px}
.pm-tag.lead{background:var(--navy-050);color:var(--navy)}
.pm-tag.jo{background:var(--indigo-050);color:var(--indigo)}
.pm-tag.leave{background:var(--slate-050,color-mix(in srgb,var(--slate-2) 18%,transparent));color:var(--slate)}
.pm-single{font-size:12.5px;color:var(--slate)}
.pm-in{width:88px;padding:5px 8px;font-size:12.5px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink)}
.pm-in:focus{outline:none;border-color:var(--navy)}

/* 라인·조 팔레트 + 칠하는 칸 — 근무표 입력과 같은 조작(값 선택 → 칸 클릭·드래그) */
.pm-pal{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.pm-pal .pgrp{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.pm-pal .pgl{font-size:11.5px;font-weight:700;color:var(--slate-2);margin-right:2px}
.pm-pal .pchip{padding:5px 11px}
.pm-pal .pchip.sel{background:var(--navy);color:#fff;border-color:transparent}
.pm-pal .pchip.clr.sel{background:var(--slate-2)}
.pm-hint{font-size:11px;color:var(--slate-2);margin-left:auto}
/* 칸: 터치로 훑을 때 브라우저가 스크롤로 가로채지 않게 touch-action:none — 칸 밖은 평소대로 스크롤된다 */
.pmc{display:block;min-width:72px;padding:6px 8px;border:1px dashed var(--line);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--slate-2);text-align:center;cursor:pointer;user-select:none;touch-action:none}
.pmc.has{border-style:solid;border-color:var(--navy);background:var(--navy-050);color:var(--navy);font-weight:700}
.pmc:hover{border-color:var(--navy)}
.pmc.ro{cursor:default;touch-action:auto}
.pmc.ro:hover{border-color:var(--line)}
.pm-savefirst{font-size:10.5px;color:var(--slate-2)}

/* 세로 스크롤은 페이지 하나만 — 표 안에서 또 스크롤되지 않게(가로만 그리드에서) */
.pm-pane .gwrap .gscroll{max-height:none}

@media (max-width:768px){
  .pm-l{flex:1 1 calc(50% - 4px);min-width:0}
  .pm-note{flex:1 1 100%}
  .toolbar.pm-actions .btn2{flex:1 1 0;min-height:42px;justify-content:center}
  .pm-in{width:72px}
  /* 모바일: 팔레트 칩·칸을 손가락으로 누를 수 있는 크기로(가로 오버플로는 표 안에서만) */
  .pm-pal{gap:6px;padding:7px 8px}
  .pm-pal .pchip{padding:7px 10px;font-size:11.5px}
  .pm-hint{margin-left:0;flex:1 1 100%}
  .pmc{min-width:60px;padding:8px 6px}
  .pm-table th.pm-line,.pm-table td.pm-line{min-width:76px}
  .pm-table th.pm-jo,.pm-table td.pm-jo{min-width:72px}
}
.pm-rule{display:block;margin-top:4px;font-size:11px;color:var(--slate-2)}

/* 근무표 일괄 버튼 묶음 + 배정 상태 배지 */
.fill-grp{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);font-size:12px;color:var(--slate)}
.fill-grp b{font-weight:700;color:var(--slate);margin-right:2px}
.btn2.mini{padding:3px 9px;font-size:11.5px;min-height:0}
.btn2[disabled]{opacity:.45;cursor:default}
.pm-st{margin-left:6px;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
.pm-st.assigned{background:var(--navy-050);color:var(--navy)}
.pm-st.auto{background:var(--indigo-050);color:var(--indigo)}
.pm-st.none{background:var(--soft);color:var(--slate-2)}
@media (max-width:768px){
  .fill-grp{flex:1 1 100%;justify-content:center}
  .fill-grp .btn2.mini{flex:1 1 0;min-height:36px;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   기안작성 모바일 압축 — 첨부·문서첨부·참조권자·조회권자 (≤768px 전용)
     · 드롭존은 터치에서 무용지물이라 숨긴다(끌어다 놓기가 없다).
     · 안내문은 작은 회색 한 줄, 빈 목록은 얇은 한 줄, 삭제 버튼은 대상이 있을 때만.
     · 문서첨부·참조·조회는 기본 접힘 — 헤더(라벨+인원수)만 보인다.
   ★PC(769px 이상)에는 아무 규칙도 적용하지 않는다 — 레이아웃 그대로.
   ══════════════════════════════════════════════════════════════════════════ */
/* 헤더의 인원수 뱃지·화살표는 모바일 전용 장식 — PC 에선 보이지 않는다 */
.eac-rcnt,.eac-rchv{display:none}

@media (max-width:768px){
  /* ── 아코디언 헤더 ── */
  .eac-r[data-acc]{padding:0;border-bottom:1px solid var(--line)}
  .eac-r[data-acc] .eac-rl{display:flex;align-items:center;gap:8px;width:100%;
    min-height:44px;padding:0 2px;margin:0;cursor:pointer;user-select:none}
  .eac-r[data-acc] .eac-rlt{font-size:12.5px;font-weight:700;color:var(--slate)}
  .eac-rcnt{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
    border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;
    font-family:var(--mono)}
  .eac-rcnt.zero{background:var(--soft);color:var(--slate-2)}
  .eac-rchv{display:grid;place-items:center;margin-left:auto;color:var(--slate-2);
    transition:transform var(--dur-fast) var(--ease)}
  .eac-rchv svg{width:14px;height:14px}
  .eac-r[data-acc].open .eac-rchv{transform:rotate(180deg)}
  .eac-r[data-acc]:not(.open) .eac-rb{display:none}      /* 접힘 = 헤더 한 줄만 */
  .eac-r[data-acc].open .eac-rb{padding-bottom:10px}

  /* ── 1. 첨부파일 ── */
  .eac-drop{display:none!important}                       /* 끌어다 놓기 영역 제거 */
  .eac-rb-col{gap:6px}
  .eac-atline{flex-wrap:nowrap;gap:8px}
  .eac-atline .btn2{flex:0 0 auto;min-height:40px;height:40px;padding:0 14px;justify-content:center}
  .eac-atline .eac-atsum{order:0;flex:1 1 auto;width:auto;margin-left:auto;text-align:right;
    font-size:10.5px;line-height:1.3;white-space:normal}
  .eac-files:empty{display:none}                          /* 첨부 없으면 자리 차지 안 함 */
  .eac-files{margin-top:0}

  /* ── 2. 문서첨부 ── */
  .eac-atline .eac-hint{flex:1 1 auto;min-width:0;font-size:10.5px;line-height:1.3;
    color:var(--slate-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical}
  .eac-chips:empty{display:none}

  /* ── 3·4. 참조권자 · 조회권자 ── */
  .eac-pnote{margin-bottom:0;font-size:10.5px;line-height:1.35;color:var(--slate-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .eac-pn-full{display:none}                              /* 긴 문구 대신 짧은 한 줄 */
  .eac-pn-short{display:inline}
  .eac-pbox{min-height:0;padding:6px 8px}
  .eac-pbox.is-empty{padding:4px 8px;border-style:dashed}
  .eac-pbox.is-empty .eac-pempty{margin:0;align-self:flex-start;font-size:10.5px;line-height:1.4}
  .eac-pchips{margin-top:0}
  .eac-r.no-people .eac-pacts{display:none}               /* 지정된 사람이 없으면 삭제 버튼 숨김 */
}

/* PC 에선 짧은 문구를 감추고 원래 안내문을 그대로 쓴다 */
@media (min-width:769px){ .eac-pn-short{display:none} }


/* ── 출퇴근 예외자(P_PUNCH_EXCEPT) ─────────────────────────────────────────
   임원 등 세콤 미기록자 등록. PC 는 표, 모바일은 같은 표를 가로 스크롤로 본다. */
.px-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:2px 0 10px}
.px-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 380px;min-width:0}
.px-al{font-size:12px;font-weight:700;color:var(--slate)}
.px-hint{font-size:11px;color:var(--slate-2)}
.px-sum{font-size:12px;color:var(--slate);white-space:nowrap}
.px-sum b{font-family:var(--mono);color:var(--navy);font-weight:700}
.px-in{padding:6px 9px;font-size:12.5px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink);min-height:34px}
.px-in:focus{outline:none;border-color:var(--navy)}
.px-in.wide{width:100%;min-width:120px}
.px-found{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft)}
.px-cand{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-size:12.5px;cursor:pointer;
  font-family:var(--font)}
.px-cand:hover{border-color:var(--navy)}
.px-cand[disabled]{opacity:.5;cursor:default}
.px-cand i{font-style:normal;font-size:11px;color:var(--slate-2)}
.px-cand em{font-style:normal;font-size:10.5px;color:var(--slate-2)}
.px-none{font-size:12px;color:var(--slate-2)}
.px-table td{vertical-align:middle}
.px-table th.px-nm,.px-table td.px-nm{min-width:200px;text-align:left}
.px-table th.px-t,.px-table td.px-t{min-width:104px}
.px-table th.px-rs,.px-table td.px-rs{min-width:200px}
.px-table th.px-on,.px-table td.px-on{min-width:70px}
.px-table th.px-act,.px-table td.px-act{min-width:110px}
.px-table .nm{font-weight:700;color:var(--ink);white-space:nowrap}
.px-table .no{font-size:11px;color:var(--slate-2);white-space:nowrap}
.px-table tr.off td{opacity:.55}
.px-tag.out{margin-left:5px;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--soft);color:var(--slate-2)}
.px-sw{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--slate);cursor:pointer}
.px-sw input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.px-mini{font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);color:var(--slate);cursor:pointer;font-family:var(--font)}
.px-mini:hover{border-color:var(--navy);color:var(--navy)}
.px-mini.del:hover{border-color:var(--red);color:var(--red)}
/* 세로 스크롤은 페이지 하나만 — 표 안에서 또 스크롤되지 않게(가로만 그리드에서) */
.px-pane .gwrap .gscroll{max-height:none}
@media (max-width:768px){
  .px-add{flex:1 1 100%} .px-hint{flex:1 1 100%}
  .px-in{min-height:40px}
  .px-sw input{width:20px;height:20px}
  .px-mini{min-height:38px;padding:0 12px}
  .px-cand{min-height:40px}
}

/* ── 권한등급 '전체' 탭 = 한 컬럼 연속 흐름 ───────────────────────────────
   예전에는 도메인마다 박스(2단 그리드) + 박스 안 460px 스크롤이라
   ① 전체를 한 번에 고르기 어렵고 ② 세로 스크롤이 여러 개였다.
   전체 탭에서는 박스를 풀어 한 줄로 잇고, 스크롤은 페이지 하나만 쓴다.
   개별 도메인 탭(.one)은 예전 그대로. */
.rb-allbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft)}
.rb-allbar .sp{flex:1}
.rb-allbar .rb-abd{width:1px;height:18px;background:var(--line);margin:0 4px}
.rb-allbar[hidden]{display:none}

.rb-perm.flow{grid-template-columns:1fr;gap:0}
.rb-perm.flow .rb-parea{background:transparent;border:0;border-radius:0;max-width:none;overflow:visible}
.rb-perm.flow .rb-ptable{max-height:none;overflow:visible}          /* 내부 스크롤 제거 = 세로 스크롤 1개 */
/* 도메인 구분은 소제목 한 줄로만 — 박스가 아니라 흐름 속 구분선 */
.rb-perm.flow .rb-pah{background:transparent;border-bottom:0;padding:14px 2px 4px;gap:7px}
.rb-perm.flow .rb-pah .rb-mini{display:none}                         /* 도메인별 전체선택 버튼은 상단 하나로 통합 */
.rb-perm.flow .rb-pat{font-size:12px;font-weight:700;color:var(--navy)}
.rb-perm.flow .rb-pac{font-family:var(--mono);font-size:11px;color:var(--slate-2)}
/* 열 제목은 맨 위 한 번만, 스크롤해도 붙어 있게 */
.rb-perm.flow .rb-parea:not(:first-of-type) .rb-phead{display:none}
.rb-perm.flow .rb-parea:first-of-type .rb-phead{position:sticky;top:0;z-index:2;background:var(--panel);
  border-bottom:1px solid var(--line)}
.rb-perm.flow .rb-prow{padding-left:2px;padding-right:2px}
@media (max-width:768px){
  .rb-perm.flow .rb-ptable{max-height:none}
  .rb-allbar{gap:5px;padding:7px 8px}
  .rb-allbar .rb-mini{min-height:38px;padding:0 11px}
  .rb-allbar .rb-hint{flex:1 1 100%}
}

/* ── 계정관리 접속 상태 ────────────────────────────────────────────────
   최근 활동 기준(실시간 소켓 아님). 초록=접속 중, 회색=마지막 활동 시각. */
.rb-table td.rb-onc{white-space:nowrap;width:84px}
.rb-on,.rb-off{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;white-space:nowrap}
.rb-on{background:color-mix(in srgb,var(--green,#3fa46a) 14%,transparent);color:var(--green,#3fa46a)}
.rb-off{background:var(--soft);color:var(--slate-2);font-weight:600}
.rb-on i,.rb-off i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.rb-on i{background:var(--green,#3fa46a);box-shadow:0 0 0 3px color-mix(in srgb,var(--green,#3fa46a) 22%,transparent)}
.rb-off i{background:var(--slate-2);opacity:.5}
@media (max-width:768px){ .rb-table td.rb-onc{width:auto} .rb-on,.rb-off{font-size:10.5px;padding:2px 6px} }

/* ── 헬프데스크 만족도 — 자유의견 표시 · 미평가 강조 ─────────────────────── */
.hd-satnote{margin-top:8px;padding:9px 11px;border-left:3px solid var(--navy);
  border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--soft);
  font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.hd-satnote b{display:block;margin-bottom:3px;font-size:11px;color:var(--slate-2)}
.hd-satta{width:100%;min-height:70px;resize:vertical}
.hd-hasnote{margin-left:5px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--navy-050);color:var(--navy)}
/* 완료됐는데 아직 평가 안 한 내 요청 — 눈에 띄게 */
.hd-rate{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);
  color:var(--gold);font-family:var(--font)}
.hd-rate:hover{background:var(--gold);color:#fff}
@media (max-width:768px){ .hd-rate{min-height:36px;padding:0 12px} .hd-satnote{font-size:12px} }

/* ── 모바일: 세로 스크롤은 페이지 하나만 ──────────────────────────────────
   PC 는 그리드 안에서 스크롤해 머리말을 고정하지만, 좁은 화면에서 그렇게 하면
   페이지 스크롤과 그리드 스크롤이 겹쳐(더블 스크롤) 손가락이 어디를 미는지 알 수 없다.
   모바일에서는 그리드가 통째로 길어지고 페이지만 스크롤한다(가로 스크롤은 그대로 유지). */
@media (max-width:768px){
  .gscroll{max-height:none}
}

/* ── 권한관리·권한등급: 좌 목록 / 우 권한이 각각 화면 안에서 스크롤 ───────────
   예전에는 오른쪽 권한 목록이 길어지면 탭 전체가 스크롤되고, 그 안에서 좌측 계정 목록이
   또 스크롤돼(스크롤 중첩) 손이 어디를 미는지 알 수 없었다.
   양쪽을 뷰포트 높이에 맞춰 잘라 각자 스크롤하게 두면 바깥은 스크롤되지 않는다.
   ※ 높이는 JS(fitGrids)가 실제 위치를 재서 잡는다 — 화면마다 머리말 높이가 달라서다. */
.rb-main{overflow-y:auto}
@media (max-width:768px){
  /* 모바일은 위아래로 쌓이므로 페이지 스크롤 하나만 쓴다 */
  .rb-main{overflow-y:visible;max-height:none!important}
  .rb-side{max-height:220px}
}

/* ── 자산 상세 민감정보 마스킹 안내 ────────────────────────────────────
   값 자체를 서버가 내려주지 않는다(응답 본문에 원값 없음). 화면 블러가 아니다. */
.it-masknote{display:flex;align-items:center;gap:7px;margin:0 0 10px;padding:8px 11px;
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--soft);font-size:11.5px;line-height:1.5;color:var(--slate)}
.it-masknote svg{width:14px;height:14px;flex:0 0 auto;color:var(--gold)}
.it-masknote code{font-family:var(--mono);padding:0 4px;border-radius:3px;background:var(--panel);color:var(--ink)}
@media (max-width:768px){ .it-masknote{font-size:11px;padding:7px 9px} }

/* ===== 근태월력(P_WORKCAL) — SAP PH_PY003 대체 =====
   달력 틀(.ah-cal/.ah-dows/.ah-grid/.ac)은 월 근태내역과 같은 것을 쓴다 —
   모바일 고정 행높이·오버플로 처리가 이미 맞춰져 있어서 따로 만들 이유가 없다. */
.wc-c{cursor:pointer}
.wc-c:hover{background:color-mix(in srgb,var(--gold-050) 60%,transparent)}
.wc-c .dnum.r{color:var(--red)}
.wc-c.wc-ex{background:color-mix(in srgb,var(--gold-050) 45%,transparent)}
.acst.wc-exb{background:var(--gold-050);color:var(--gold)}
/* 근태구분 배지 — 정상근무=네이비, 유급휴일=빨강, 무급휴일=회색(휴무 배지와 같은 '채워진' 모양) */
.wc-b{align-self:flex-start;font-size:10px;font-weight:700;color:#fff;border-radius:var(--r-sm);
  padding:1px 7px;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-b.work{background:#1B355E}   /* 근무표 팔레트 주간과 같은 색 — 담당자가 이미 아는 색 */
.wc-b.paid{background:var(--red)}
.wc-b.free{background:#8A8F98}
.wc-n{font-size:9.5px;font-weight:600;color:var(--red);line-height:1.3;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-state{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 2px;font-size:11.5px;color:var(--slate-2)}
.wc-state .r,.wc-state b.r{color:var(--red);font-weight:700}
.wc-edit{margin-top:14px;padding:12px 14px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg)}
.wc-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:8px 10px;margin-bottom:10px}
.wc-form label{font-size:11.5px;font-weight:700;color:var(--slate-2);white-space:nowrap}
@media (max-width:860px){
  .wc-b{font-size:9px;padding:1px 6px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;word-break:break-word}
  .wc-n{font-size:8.5px}
  .wc-form{grid-template-columns:auto minmax(0,1fr)}
}

/* ===== 로그인 인트로 — 골드 성운 영상 + 공식 워드마크 =====
   ★영상은 로그인 화면 '뒤'에 미리 깔려 있다.
     로그인 페이지가 뜨는 순간 #dakIntro(z 900)가 body 에 붙고 영상이 muted+loop 로 돌기 시작한다.
     그 위를 로그인 레이어(.login, z 1000)가 불투명하게 덮고 있어 보이지 않을 뿐이다.
     로그인에 성공하면 .login 만 투명해지고(0.7s) 뒤의 영상이 그대로 드러난다 — 새로 받을 게 없어 대기 0.
     새로고침(location.reload)이 없으므로 '불러오는 중'·흰 플래시·끊김이 생길 자리가 없다.
   타임라인(로그인 성공 = 0s): 로그인 투명화 0→0.7s / 로고 0.5→1.6s / 확대아웃 2.1→3.1s / 인트로 퇴장 2.6→3.5s.
   표시층만. 끝나면 DOM 이 제거되므로 클릭을 막지 않는다. */
#dakIntro{position:fixed;inset:0;z-index:900;overflow:hidden;background:#000}
#dakIntro.di-front{z-index:2000}   /* 로그인이 사라진 뒤 — 뒤에서 조립되는 메인을 덮는다 */
#dakIntro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
/* 영상이 아직 안 받아졌을 때의 바탕 — 골드톤이라 검게 튀지 않는다. */
#dakIntro .di-bg{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,#2a1f0b 0%,#120d05 45%,#000 100%)}
#dakIntro .di-veil{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 45%,rgba(0,0,0,0),rgba(0,0,0,.35))}

/* ── 로그인 레이어: 영상 위를 덮고 있다가 투명해지며 비켜 준다 ────────── */
.login{position:relative;z-index:1000}
.lg-alert{z-index:1100}            /* 로그인 실패 모달(z 95)은 로그인 레이어보다 위로 올린다 */
.login.di-going{animation:diLoginFade .7s ease forwards;pointer-events:none}
@keyframes diLoginFade{ from{opacity:1} to{opacity:0;visibility:hidden} }

/* ── 드러난 뒤: 로고 등장 → 확대 페이드아웃 → 인트로 퇴장 ──────────────
      .di-go 가 붙는 순간이 0s 다(지연값이 전부 그 시점 기준). */
#dakIntro .di-logo{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}
#dakIntro .di-logo img{width:min(760px,88vw);height:auto;opacity:0;transform:scale(.86);
  filter:drop-shadow(0 8px 40px rgba(0,0,0,.6))}
#dakIntro.di-go .di-logo img{
  animation:diLogoIn 1.1s cubic-bezier(.2,.8,.2,1) .5s forwards,
            diLogoZoom 1.0s cubic-bezier(.6,.02,.3,1) 2.1s forwards}
#dakIntro.di-go{animation:diOut .9s ease 2.6s forwards}
@keyframes diLogoIn{to{opacity:1;transform:scale(1)}}
@keyframes diLogoZoom{to{opacity:0;transform:scale(2.4);
  filter:blur(6px) drop-shadow(0 8px 40px rgba(0,0,0,.6))}}
@keyframes diOut{to{opacity:0;visibility:hidden;pointer-events:none}}

/* ── 예외 경로(재적재 후 재생) ────────────────────────────────────────
   한 페이지에서 세션이 만료돼 다시 로그인하는 드문 경우에만 쓴다. 앞사람 화면 모듈이
   메모리에 들고 있던 데이터를 지우려면 통째 재적재가 필요해서다(main.js 가 판단).
   그때는 로그인 화면을 검게 가라앉힌 뒤 재적재하고, 새 페이지에서 영상이 검정에서 떠오른다. */
.login.di-leaving{animation:diLoginOut 1.1s ease forwards;pointer-events:none}
@keyframes diLoginOut{
  from{opacity:1;filter:brightness(1) blur(0px)}
  to  {opacity:0;filter:brightness(0) blur(6px);visibility:hidden}
}
#dakFade{position:fixed;inset:0;z-index:2100;background:#000;pointer-events:none;
  animation:diFadeBlack 1.1s ease forwards}
@keyframes diFadeBlack{ from{opacity:0} to{opacity:1} }
#dakIntro.di-fade video,
#dakIntro.di-fade .di-bg{animation:diVideoIn 1.3s ease-out both}
@keyframes diVideoIn{ from{opacity:0;filter:brightness(.4)} to{opacity:1;filter:brightness(1)} }

/* ── 메인 조립 — 인트로가 빠지기 시작하는 순간(로그인 성공 +2.6s)에 body.intro-assemble 이 붙는다.
      지연값은 그 시점 기준이라 절대시각으로는 헤더 2.95s · 사이드바 3.15s · 카드 3.4~4.0s 다.
      시작 상태를 요소가 아니라 keyframes from{} 에 두어, 혹시 애니메이션이 안 돌아도
      화면이 투명한 채로 남지 않게 한다. ── */
@keyframes diDrop {from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:none}}
@keyframes diSlideL{from{opacity:0;transform:translateX(-110%)} to{opacity:1;transform:none}}
@keyframes diSlideU{from{opacity:0;transform:translateY(100%)}  to{opacity:1;transform:none}}
@keyframes diPop   {from{opacity:0;transform:translateY(18px) scale(.96)} to{opacity:1;transform:none}}

body.intro-assemble .tabrow,
body.intro-assemble .mb-body > .phead{animation:diDrop .55s cubic-bezier(.2,.9,.2,1) .35s both}
body.intro-assemble .iconrail       {animation:diSlideL .6s cubic-bezier(.2,.9,.2,1) .55s both}
body.intro-assemble .menupanel      {animation:diSlideL .6s cubic-bezier(.2,.9,.2,1) .62s both}
body.intro-assemble .mb-tabbar      {animation:diSlideU .5s cubic-bezier(.2,.9,.2,1) .55s both}
/* 카드는 .dh-bento.dh-ready .dh-t{animation:none} 보다 구체적이어야 이긴다(.dh-ready 를 함께 적는 이유). */
body.intro-assemble .dh-bento.dh-ready > *   {animation:diPop .5s cubic-bezier(.2,.9,.2,1) .8s both}
body.intro-assemble .dh-bento.dh-ready > *:nth-child(2){animation-delay:.9s}
body.intro-assemble .dh-bento.dh-ready > *:nth-child(3){animation-delay:1s}
body.intro-assemble .dh-bento.dh-ready > *:nth-child(4){animation-delay:1.1s}
body.intro-assemble .dh-bento.dh-ready > *:nth-child(5){animation-delay:1.25s}
body.intro-assemble .dh-bento.dh-ready > *:nth-child(n+6){animation-delay:1.4s}

@media (prefers-reduced-motion:reduce){
  /* 인트로 자체를 띄우지 않지만(intro.js), 조립 단계도 확실히 끈다. */
  #dakIntro,#dakIntro *,#dakFade,.login.di-leaving,.login.di-going,body.intro-assemble *{animation:none!important}
  #dakFade{display:none}
  .login.di-leaving,.login.di-going{opacity:1;filter:none;visibility:visible}
}

/* ===== 환경점검조회 — 요약 접기 + 스크롤 단일화 =====
   헤더·KPI·요약·검색바는 고정, 목록만 남은 높이를 채우며 스크롤한다(세로 스크롤바 1개). */
.tabpane.fold-pane.on{display:flex;flex-direction:column;overflow:hidden}
.fold-pane > .it-sum,
.fold-pane > .es-sum,
.fold-pane > .toolbar,
.fold-pane > .phead,
.fold-pane > .pager, .fold-pane > #esPager, .fold-pane > .note{flex:0 0 auto}
.fold-pane > .gwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.fold-pane > .gwrap > .gscroll{flex:1 1 auto;min-height:0;max-height:none}
/* 표 머리글은 스크롤해도 붙어 있게 */
.fold-pane .gscroll thead th{position:sticky;top:0;z-index:2;background:var(--soft)}

/* 요약 블록 — 토글 + 3패널 */
.es-sum{margin:4px 0 2px}
.es-sumtog{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:2px 0 6px;
  font-size:12px;font-weight:700;color:var(--slate);cursor:pointer}
.es-sumtog:hover{color:var(--ink)}
.es-sumtog .es-ar{font-size:10px;color:var(--slate-2)}
.es-sum.closed .es-body{display:none}

/* 요약 글씨 한 단계 축소 — 라벨·수치·막대 모두. 막대 정렬과 숫자 폭은 그대로 둔다. */
.es-sum .ac-ch-h{font-size:11.5px;margin-bottom:6px}
.es-sum .ac-lg{font-size:10px}
.es-sum .hb-l{font-size:11px}
.es-sum .hb-v{font-size:11.5px}
.es-sum .hb-row{gap:8px}
.es-sum .hb-t{height:7px}
/* SVG 차트를 쓰는 화면(안전보건 일부)도 같은 스텝으로 한 단계 축소 */
.es-sum .ch{height:220px}
.es-sum .ch-ax{font-size:12px}
.es-sum .ch-val{font-size:12.5px}
@media (max-width:860px){
  /* 모바일은 화면 자체가 스크롤이라 목록만 잔여높이로 만들지 않는다(이중 스크롤 방지). */
  .tabpane.fold-pane.on{display:block;overflow:auto}
  .fold-pane > .gwrap{display:block}
  .fold-pane > .gwrap > .gscroll{max-height:none}
  .es-sum .hb-l{font-size:10.5px}
  .es-sum .hb-v{font-size:11px}
}

/* ===== 파트원 배정 — 상단 고정 + 사원 목록만 스크롤 =====
   아래쪽 사원 값을 넣고 바로 [배정 저장]을 누를 수 있어야 한다(위로 다시 올라가지 않게).
   환경점검조회·안전보건에 쓴 단일 스크롤 패턴과 같은 방식 — 접기 토글만 없다. */
.tabpane.pm-pane.on{display:flex;flex-direction:column;overflow:hidden}
.pm-pane > .phead{flex:0 0 auto}
.pm-pane > #pmBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pm-pane > #pmBody > .pm-top,
.pm-pane > #pmBody > .pm-pal,
.pm-pane > #pmBody > .toolbar,
.pm-pane > #pmBody > .pm-jos,
.pm-pane > #pmBody > .placeholder{flex:0 0 auto}
.pm-pane > #pmBody > .gwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pm-pane > #pmBody > .gwrap > .gscroll{flex:1 1 auto;min-height:0;max-height:none}
/* 목록 헤더 행은 스크롤해도 컬럼이 보이게 */
.pm-pane .gscroll thead th{position:sticky;top:0;z-index:6;background:var(--soft);background-clip:padding-box}
.pm-pane .gscroll thead tr{background:var(--soft)}
@media (max-width:860px){
  /* 모바일은 페이지 스크롤 하나만 쓴다(이중 스크롤 방지) — 다른 화면과 같은 가드. */
  .tabpane.pm-pane.on{display:block;overflow:auto}
  .pm-pane > #pmBody{display:block}
  .pm-pane > #pmBody > .gwrap{display:block}
  .pm-pane > #pmBody > .gwrap > .gscroll{max-height:none}
}

/* ===== 안전보건 자료실 — 검색바 고정 + 목록만 스크롤 =====
   환경점검조회·파트원 배정과 같은 단일 스크롤 패턴(요약 차트가 없어 접기 토글은 없다). */
.tabpane.lb-pane.on{display:flex;flex-direction:column;overflow:hidden}
.lb-pane > .phead,
.lb-pane > .ms-bar,
.lb-pane > .lb-pager{flex:0 0 auto}
.lb-pane > #lbBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.lb-pane > #lbBody > .gscroll{flex:1 1 auto;min-height:0;max-height:none}
.lb-pane > #lbBody > .sf-td-mid{flex:0 0 auto}
.lb-pane .gscroll thead th{position:sticky;top:0;z-index:6;background:var(--soft);background-clip:padding-box}
@media (max-width:860px){
  .tabpane.lb-pane.on{display:block;overflow:auto}
  .lb-pane > #lbBody{display:block}
  .lb-pane > #lbBody > .gscroll{max-height:none}
}

/* 막대 목록 2열 — 월별처럼 12줄짜리가 요약 블록을 혼자 길게 만들 때.
   좁아지면 한 칸으로 접혀 가로 스크롤이 생기지 않는다. */
.hb-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.hb-2col > div{min-width:0}
@media (max-width:1100px){ .hb-2col{grid-template-columns:1fr;gap:0} }

/* 대시보드 뉴스 위젯 — 공지 카드와 같은 모양을 쓰고 [더보기]만 덧붙인다 */
.dh-news .dh-nlist{flex:1;min-height:0}
.dh-news .dh-ni{text-decoration:none}
.dh-nmore{flex:0 0 auto;margin-top:6px;padding:6px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;
  color:var(--slate);font-family:var(--font);font-size:11.5px;font-weight:600}
.dh-nmore:hover{border-color:var(--gold);color:var(--gold)}

/* ── 정보 허브 카드 ──────────────────────────────────────────────────────
   피드 하나 = 카드 하나. 넓으면 여러 장이 나란히, 좁으면 한 줄로 쌓인다.
   카드 안쪽만 넘치게 두고(목록이 길어도) 화면 전체가 가로로 밀리지 않게 한다. */
.ih-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));align-items:start}
.ih-card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ih-head{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.ih-head h3{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.ih-head .sp{flex:1}
.ih-d{font-size:11.5px;color:var(--slate-2);margin-top:2px}
.ih-as{font-size:11px;color:var(--slate-2);white-space:nowrap;font-family:var(--mono);display:flex;align-items:center;gap:6px}
.ih-stale{font-family:var(--font);font-weight:700;color:var(--gold);background:var(--gold-050);border-radius:999px;padding:1px 7px;font-size:10px}
.ih-body{padding:6px 0 8px}
.ih-list{list-style:none;margin:0;padding:0}
.ih-item{padding:9px 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);min-width:0}
.ih-item:last-child{border-bottom:0}
.ih-item:hover{background:color-mix(in srgb,var(--navy-050) 40%,transparent)}
/* 제목은 두 줄까지만 — 길다고 카드가 제멋대로 늘어나지 않게 */
.ih-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--ink);font-size:13px;font-weight:600;line-height:1.45;text-decoration:none;word-break:break-word}
.ih-t:hover{color:var(--gold);text-decoration:underline}
.ih-m{display:block;margin-top:3px;font-size:11px;color:var(--slate-2)}
.ih-dot{margin:0 5px;color:var(--slate-2)}
/* 관심 낱말이 걸린 기사 — 왼쪽에 금색 띠만 둘러 눈에 띄게(글자 색은 그대로) */
.ih-item.hit{box-shadow:inset 3px 0 0 var(--gold)}
/* 공고 카드 — 남은 날(D-n) 을 제목 앞에 달아 급한 것부터 눈에 들어오게 */
.ih-row1{display:flex;align-items:flex-start;gap:7px;min-width:0}
.ih-row1 .ih-t{flex:1;min-width:0}
.ih-dday{flex:0 0 auto;margin-top:1px;padding:1px 7px;border-radius:999px;font-family:var(--mono);
  font-size:10px;font-weight:700;line-height:16px;white-space:nowrap;
  color:var(--navy);background:var(--navy-050)}
.ih-dday.soon{color:#fff;background:#e5484d}          /* 일주일 이내 — 빨강 */
.ih-dday.always{color:var(--slate-2);background:var(--soft)}
.ih-dday.done{color:var(--slate-2);background:var(--soft)}
.ih-item.biz .ih-m{margin-top:4px}
.ih-s{margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--slate);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
/* 마감 지난 건은 흐리게 — 지우지는 않는다(참고용으로 남겨 둔다) */
.ih-item.off{opacity:.5}
.ih-more{display:block;width:calc(100% - 26px);margin:8px 13px 4px;padding:8px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);
  color:var(--slate);font-family:var(--font);font-size:12px;font-weight:600}
.ih-more:hover{border-color:var(--navy);color:var(--navy)}
.ih-tail{padding:8px 16px 2px;text-align:center;font-size:11px;color:var(--slate-2)}
/* 통계 지표 줄 — 왼쪽 이름·시점 / 오른쪽 값·증감 / 맨 끝 미니 추이 */
.ih-item.stat{padding:11px 16px}
.ih-srow{display:flex;align-items:center;gap:10px;min-width:0}
.ih-sl{flex:1;min-width:0}
.ih-sn{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-slink{color:inherit;text-decoration:none}
.ih-slink:hover{color:var(--gold);text-decoration:underline}
.ih-sr{flex:0 0 auto;text-align:right}
.ih-sv{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink);line-height:1.15}
.ih-sc{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:2px;font-size:10.5px}
.ih-cl{color:var(--slate-2);margin-right:5px}
.ih-chg{font-family:var(--mono);font-weight:700}
.ih-chg.up{color:#e5484d} .ih-chg.down{color:var(--navy)} .ih-chg.flat{color:var(--slate-2)}
.ih-spark{flex:0 0 88px;width:88px;height:24px;overflow:visible}
.ih-spark polyline{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
/* 카드 안 탭(법령 / 행정규칙) */
.ih-tabs{display:flex;gap:6px;padding:8px 16px 4px}
.ih-tab{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--slate);font-family:var(--font);font-size:11.5px;font-weight:700;cursor:pointer}
.ih-tab i{font-style:normal;margin-left:5px;color:var(--slate-2);font-family:var(--mono)}
.ih-tab.on{border-color:transparent;background:var(--navy);color:#fff}
.ih-tab.on i{color:#fff;opacity:.75}
@media (max-width:520px){
  .ih-srow{flex-wrap:wrap}
  .ih-spark{flex:1 0 100%;width:100%}
  .ih-tabs{padding:8px 13px 4px}
}
.ih-empty{padding:26px 16px;text-align:center;color:var(--slate);font-size:13px}
.ih-empty-s{margin-top:6px;font-size:11.5px;color:var(--slate-2)}
@media (max-width:520px){
  .ih-grid{grid-template-columns:1fr;gap:12px}
  .ih-head{padding:11px 13px}
  .ih-item{padding:9px 13px}
}

/* ── 정보 게시판(목록) ───────────────────────────────────────────────────
   바깥 자료를 사내 게시판과 같은 모양으로 보여 준다. 피드가 달라도 표 모양은 같다.
   ★좁은 화면에서는 표를 세로로 접는다 — 가로로 밀어 보게 두지 않는다.
      머리글은 감추고, 각 칸 앞에 data-h(칸 이름)를 붙여 읽을 수 있게 한다. */
.ib-search{flex:0 0 220px;max-width:220px}
.ib-chk{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--slate);cursor:pointer}
.ib-chk input{width:14px;height:14px;accent-color:var(--navy);cursor:pointer;margin:0}
.ib-stale{font-style:normal;font-weight:700;color:var(--gold);background:var(--gold-050);
  border-radius:999px;padding:1px 7px;margin-right:6px;font-size:10px}
.ib-sum{padding:2px 2px 8px;font-size:12px;color:var(--slate)}
.ib-sum b{color:var(--ink);font-family:var(--mono)}
.ib-dot{margin:0 7px;color:var(--slate-2)}
.ib-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ib-table thead th{position:sticky;top:0;z-index:2;background:var(--soft);color:var(--slate-2);
  font-weight:600;font-size:11px;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ib-table tbody td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;
  color:var(--slate);vertical-align:top;word-break:break-word}
.ib-table tbody tr{cursor:pointer}
.ib-table tbody tr:hover td{background:color-mix(in srgb,var(--navy-050) 45%,transparent)}
.ib-table tbody tr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.ib-table tbody tr.off{opacity:.5}
.ib-a{color:var(--ink);font-weight:600}
.ib-table tbody tr:hover .ib-a{color:var(--gold);text-decoration:underline}
.ib-sub{display:block;margin-top:3px;font-size:11px;color:var(--slate-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ib-hit{font-style:normal;margin-right:6px;padding:1px 6px;border-radius:999px;
  background:var(--gold-050);color:var(--gold);font-size:10px;font-weight:700}
/* 칸 폭 — 제목이 남는 자리를 다 가져간다 */
.ib-table .ib-src{width:112px} .ib-table .ib-date{width:124px} .ib-table .ib-org{width:186px}
/* ★날짜·신청기간은 한 줄로 — 접히면 줄마다 높이가 달라져 빈 자리가 생긴다 */
.ib-table .ib-date,.ib-table .ib-prd{white-space:nowrap}
.ib-table .ib-prd{width:150px} .ib-table .ib-stc{width:74px} .ib-table .ib-val{width:88px}
/* 박스오피스 — 순위·관객수는 오른쪽 정렬이 읽기 편하다 */
.ib-table .ib-rk{width:52px} .ib-table .ib-val2{width:104px}
.ib-table td.ib-rk{text-align:center;font-size:14px;font-weight:700;color:var(--ink)}
.ib-table th.ib-val,.ib-table th.ib-val2,.ib-table td.ib-val,.ib-table td.ib-val2{text-align:right}
.ib-table td.ib-val2{color:var(--slate);font-size:12.5px;font-weight:600}
.ib-base{color:var(--gold);font-family:var(--mono)}
@media (max-width:760px){
  .ib-table th.ib-val,.ib-table th.ib-val2,.ib-table td.ib-val,.ib-table td.ib-val2{text-align:left}
  .ib-table td.ib-rk{text-align:left}
}
.ib-table .ib-d{width:84px} .ib-table .ib-spk{width:104px} .ib-table .ib-ttl{width:auto}
.ib-none{text-align:center;color:var(--slate-2);padding:28px 12px !important}
/* 공고 상태 */
.ib-st{display:inline-block;padding:1px 7px;border-radius:999px;font-family:var(--mono);
  font-size:10px;font-weight:700;white-space:nowrap;color:var(--navy);background:var(--navy-050)}
.ib-st.soon{color:#fff;background:#e5484d}
.ib-st.always,.ib-st.done{color:var(--slate-2);background:var(--soft)}
/* 통계 */
.ib-chg{font-family:var(--mono);font-weight:700;font-size:11.5px}
.ib-chg.up{color:#e5484d} .ib-chg.down{color:var(--navy)} .ib-chg.flat{color:var(--slate-2)}
.ib-dim{color:var(--slate-2)}
.ib-val{font-size:14px;font-weight:700;color:var(--ink)}
/* 단위는 지표명 옆에 나란히(예전엔 아래 줄이라 행이 두 줄로 커졌다) */
.ib-unit{font-size:11px;color:var(--slate-2);white-space:nowrap}
/* 통계 표는 한 줄짜리 값만 있으므로 위아래 여백을 줄여 빈 자리를 없앤다 */
.ib-table tbody td.ib-val,.ib-table tbody td.ib-d,.ib-table tbody td.ib-spk{vertical-align:middle}
.ib-spark{width:90px;height:22px;overflow:visible}
.ib-spark polyline{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
/* 탭(법령 / 행정규칙) */
.ib-tabs{display:flex;gap:6px;margin:-4px 0 10px}
.ib-tab{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--slate);font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer}
.ib-tab i{font-style:normal;margin-left:6px;color:var(--slate-2);font-family:var(--mono)}
.ib-tab.on{border-color:transparent;background:var(--navy);color:#fff}
.ib-tab.on i{color:#fff;opacity:.75}
/* 쪽 번호 */
.ib-pager{display:flex;justify-content:center;gap:4px;padding:14px 0 4px;flex-wrap:wrap}
.ib-pg{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--slate);font-family:var(--mono);font-size:12px;font-weight:700;cursor:pointer}
.ib-pg:hover:not(:disabled){border-color:var(--navy);color:var(--navy)}
.ib-pg.on{background:var(--navy);border-color:transparent;color:#fff}
.ib-pg:disabled{opacity:.35;cursor:not-allowed}
/* ★목록은 페이지 스크롤 하나만 쓴다 — 표를 감싸는 내부 스크롤 상자를 두지 않는다.
   (남아 있더라도 높이를 묶지 않게 풀어 둔다) */
.ib-table + .ib-pager{margin-bottom:6px}
#ibBody .gwrap,#ibBody .gscroll{max-height:none;overflow:visible}
.ib-empty{padding:40px 16px;text-align:center;color:var(--slate);font-size:13px}
.ib-empty-s{margin-top:6px;font-size:11.5px;color:var(--slate-2)}
@media (max-width:760px){
  .ib-search{flex:1 1 100%;max-width:none;order:9}
  /* 표를 세로 목록으로 — 한 줄이 카드 하나처럼 쌓인다 */
  .ib-table{table-layout:auto}
  .ib-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ib-table tbody tr{display:block;padding:10px 2px;border-bottom:1px solid var(--line)}
  .ib-table tbody tr:hover td{background:transparent}
  .ib-table tbody td{display:block;width:auto !important;border:0;padding:1px 0;font-size:12px}
  .ib-table tbody td.ib-ttl{order:-1;font-size:13px;padding-bottom:3px}
  /* 칸 이름을 앞에 작게 붙여 무슨 값인지 알 수 있게(제목 칸은 빼고) */
  .ib-table tbody td:not(.ib-ttl)::before{content:attr(data-h) " · ";color:var(--slate-2);font-size:10.5px}
  .ib-table tbody td.ib-spk::before{content:none}
  .ib-spark{width:100%}
  .ib-pg{min-width:34px;height:34px}
}

/* ── 박스오피스 포스터 · 상세 덮개 ─────────────────────────────────────── */
/* 썸네일 38px + 셀 좌우 여백이 들어갈 만큼 폭을 준다.
   (좁으면 auto 여백이 음수가 되어 가운데 정렬이 깨진다) */
.ib-table .ib-pos{width:62px}
.ib-table.b-movie td.ib-pos,.ib-table.b-movie th.ib-pos{padding-left:6px;padding-right:6px}
.ib-poster{display:block;width:38px;height:54px;object-fit:cover;border-radius:3px;
  background:var(--soft);border:1px solid var(--line)}
.ib-poster.none{display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--slate-2)}
/* 덮개 — 앱 안에서 펴는 상세. 바깥 페이지를 끌어오지 않는다. */
.mv-wrap{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.mv-box{position:relative;width:min(720px,100%);max-height:86vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
/*  닫기 단추 — 30px 투명이라 눈에 띄지 않고 손가락으로 누르기도 어려웠다.
    44px 로 키우고 테두리·배경을 줘서 '누를 것'으로 보이게 한다. */
.mv-x{position:absolute;top:10px;right:10px;width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.mv-x:hover{background:var(--soft);border-color:var(--navy)}
.mv-x:active{transform:scale(.94)}
.mv-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mv-body{display:flex;gap:18px;padding:22px}
.mv-pos{flex:0 0 160px}
.mv-pos img{width:160px;height:229px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.mv-none{display:flex;width:160px;height:229px;align-items:center;justify-content:center;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);font-size:34px}
.mv-info{flex:1;min-width:0}
.mv-info h3{margin:0 0 10px;font-size:18px;font-weight:700;color:var(--ink);word-break:break-word}
.mv-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
.mv-meta span{font-size:12.5px;color:var(--ink);font-family:var(--mono)}
.mv-meta i,.mv-row i{font-style:normal;margin-right:6px;color:var(--slate-2);font-family:var(--font);font-size:11.5px}
.mv-row{font-size:12.5px;color:var(--slate);margin-bottom:5px;word-break:break-word}
.mv-plot-h{margin:14px 0 4px;font-size:11.5px;font-weight:700;color:var(--slate-2)}
.mv-plot{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--slate);word-break:break-word}
.mv-plot.dim{color:var(--slate-2)}
.mv-foot{margin-top:16px}
@media (max-width:640px){
  .mv-body{flex-direction:column;gap:14px;padding:18px}
  .mv-pos,.mv-pos img,.mv-none{width:100%;flex:none}
  .mv-pos img{height:auto;aspect-ratio:2/3}
  .mv-none{height:220px}
}

/* ── 박스오피스만 가운데 정렬 ────────────────────────────────────────────
   다른 게시판(뉴스·공고·통계)은 지금처럼 왼쪽 정렬을 쓴다 — 긴 제목이 많아 왼쪽이 읽기 편하다.
   박스오피스는 칸이 짧고 숫자가 많아 가운데가 줄맞춤이 잘 보인다.
   ★뒤에 오는 규칙이라 앞서 잡아 둔 오른쪽 정렬(.ib-val 등)을 덮는다. */
.ib-table.b-movie thead th,
.ib-table.b-movie tbody td{text-align:center;vertical-align:middle}
/* 영화명은 가운데 두되, 두 줄로 넘어가도 글자가 흩어지지 않게 */
/* ★영화명만 가로는 왼쪽, 세로는 가운데. 제목 길이가 제각각이라 왼쪽이 읽기 편하다. */
.ib-table.b-movie thead th.ib-ttl,
.ib-table.b-movie tbody td.ib-ttl{text-align:left}
.ib-table.b-movie td.ib-ttl .ib-a{display:inline-block}
.ib-table.b-movie td.ib-ttl .ib-sub{text-align:left}
/* 포스터 썸네일도 칸 한가운데로 */
.ib-table.b-movie .ib-poster{margin:0 auto}
/* 관객수는 가운데 정렬하되 자릿점은 그대로(숫자 폭 고정) */
.ib-table.b-movie td.ib-val,
.ib-table.b-movie td.ib-val2{text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  /* 좁은 화면에서는 표가 세로 목록으로 접힌다 — 칸이 없으니 왼쪽 정렬이 읽기 편하다 */
  .ib-table.b-movie tbody td,
  .ib-table.b-movie tbody td.ib-val,
  .ib-table.b-movie tbody td.ib-val2{text-align:left}
  .ib-table.b-movie .ib-poster{margin:0}
}

/* ── 상단 요약줄(본인 근무표 · 근태월력) — 네 항목 기준선 맞춤 ──────────────
   카드 시절 규칙(.ah-tiles .tile{display:block})이 평면 레이어보다 셀렉터가
   길어 살아남는 바람에 칸이 블록으로 서 있었다. 그래서 항목 사이에 넣는
   가운뎃점(·)이 칸과 칸 '사이'가 아니라 칸 '안'의 첫 줄로 들어갔고,
   점이 붙지 않는 첫 칸(근무)만 한 줄 위로 올라가 보였다.
   다른 요약줄(.it-sum·.kpi-row)과 같은 모양으로 맞춘다 — 라벨과 숫자를 한 줄에,
   네 항목 모두 같은 기준선(baseline)으로. 단위('일')가 붙어도 높이는 그대로다.
   PC·모바일 공용. */
.ah-tiles .tile{display:flex;align-items:baseline;gap:7px;padding:4px 0;text-align:left}
.ah-tiles .tv{margin-top:0;line-height:1.2}

/* ── 공지 게시판 — 관리 버튼 · 조회수 · 좋아요 ─────────────────────────────
   [수정][삭제]에서 네모 박스(테두리·배경·그림자)를 걷어내고 글자만 남긴다.
   표 안에서 버튼 두 개가 만들던 상자 높이가 사라져 행이 그만큼 낮아진다.
   ★색만으로 구분하지 않게 삭제는 글씨도 다르다(휴지통 + 빨강).
   PC·모바일 공용 — 모바일 카드에서도 같은 텍스트 버튼이다. */
.nt-acts .nt-mini,
.nt-acts .nt-mini:hover{background:transparent;border:0;box-shadow:none}
.nt-acts .nt-mini{
  padding:1px 5px;min-height:0;height:auto;line-height:1.4;border-radius:5px;
  font-size:11.5px;font-weight:600;color:var(--slate);gap:3px}
.nt-acts .nt-mini:hover{color:var(--ink);background:var(--soft)}
.nt-acts .nt-mini[data-act="del"]{color:var(--red)}
.nt-acts .nt-mini[data-act="del"]:hover{color:var(--red);background:var(--red-050)}
.nt-acts .nt-mini:disabled{opacity:.45}
.nt-acts{gap:8px;justify-content:flex-end;align-items:center}
/* 버튼이 얇아진 만큼 행도 낮춘다 — 표 전체가 아니라 이 열만 */
table.it-table td.nt-acts{padding-top:3px;padding-bottom:3px}

/* 목록의 조회·좋아요 숫자 — 가운데, 0 은 흐리게 */
.nt-num{text-align:center;color:var(--slate)}
.nt-num.z{color:var(--slate-2);opacity:.6}

/* 상세(팝업) 아래 줄 — 좋아요 · 조회 N명 */
.nv-bar{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.nv-bar button{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--slate);font-family:inherit}
.nv-bar button:hover{border-color:var(--slate-2);color:var(--ink)}
.nv-bar button svg{width:15px;height:15px;fill:currentColor}
.nv-like.on{color:var(--red);border-color:var(--red)}
.nv-like.on:hover{color:var(--red)}
.nv-views[disabled]{cursor:default;border-style:dashed}
.nv-views[disabled]:hover{border-color:var(--line);color:var(--slate)}

/* 조회자 명단 — 권한자만 열린다 */
.nv-viewers{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.nv-viewers table{width:100%;border-collapse:collapse;font-size:12.5px}
.nv-viewers th,.nv-viewers td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line)}
.nv-viewers th{font-size:11.5px;color:var(--slate-2);font-weight:600}
.nv-viewers td.mono{font-family:var(--mono)}
.nv-empty{color:var(--slate);font-size:12.5px;padding:8px 0}

/* ── 기사 미리보기 덮개(이차전지 뉴스) ─────────────────────────────────────
   영화 덮개(.mv-wrap/.mv-box)의 자리·닫기 동작을 그대로 쓰고 안쪽만 글 위주로 바꾼다.
   ★본문이 아니라 RSS 요약까지만 담는다 — 전문은 [원문 보기]로 언론사 페이지에서 읽는다. */
.nw-box{max-width:620px}
.nw-body{padding:22px 22px 18px}
.nw-meta{font-size:12px;color:var(--slate-2);font-weight:600;margin-bottom:6px}
.nw-t{margin:0 0 12px;font-size:18px;line-height:1.45;font-weight:700;color:var(--ink)}
.nw-sum{margin:0;font-size:13.5px;line-height:1.75;color:var(--slate);white-space:pre-line}
.nw-sum.dim{color:var(--slate-2);font-style:normal}
.nw-foot{display:flex;gap:8px;justify-content:flex-end;align-items:center;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.nw-foot .nw-go{text-decoration:none}
@media (max-width:560px){
  .nw-body{padding:18px 16px 14px}
  .nw-t{font-size:16.5px}
  .nw-foot .btn2{flex:1;min-height:42px;justify-content:center}
}

/* ── 상단 툴바 아이콘 — 올려놨을 때만 도는 작은 몸짓 ───────────────────────
   아이콘이 뜻하는 동작을 한 번 흉내 낸다. 종은 흔들리고, 되돌리기는 돌고,
   로그아웃 화살표는 나가는 쪽으로 한 걸음 움직인다.
   · 손대는 것은 안쪽 svg 의 transform 뿐이다 — 단추 크기·자리·누를 수 있는 넓이는 그대로다.
   · @media (hover:hover) 로 감싼다. 손가락으로 쓰는 화면에서는 :hover 가 눌린 뒤에도
     남아 있어서, 탭할 때마다 아이콘이 계속 떨리는 것처럼 보이기 때문이다.
   · 멀미를 겪는 사람을 위해 '모션 줄이기'에서는 전부 끄고 색만 바뀌게 둔다. */
@media (hover:hover) and (pointer:fine){
  /* 알림(종) — 좌우로 딸랑. 매다는 곳이 위쪽이라 회전축을 위로 올린다. */
  @keyframes tb-ring{
    0%{transform:rotate(0)}   15%{transform:rotate(-12deg)}  30%{transform:rotate(12deg)}
    45%{transform:rotate(-9deg)} 60%{transform:rotate(9deg)}
    75%{transform:rotate(-4deg)} 90%{transform:rotate(4deg)} 100%{transform:rotate(0)}
  }
  .tabutils #notiBtn:hover svg{
    transform-origin:50% 18%;
    animation:tb-ring .6s var(--ease) 1}

  /* 되돌리기(원형 화살표) — 왔던 길로 반 바퀴 */
  .tabutils #dashResetBtn:hover svg{transform:rotate(-180deg);transition-duration:.45s}

  /* 테마(해·달) — 천천히 돌면서 살짝 커지고 은은하게 빛난다 */
  .tabutils #themeBtn:hover svg{
    transform:rotate(22deg) scale(1.12);
    transition-duration:.5s;
    filter:drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 55%, transparent))}
  /* 누르는 순간의 기존 반응(반대로 확 돌기)은 그대로 살린다 */
  .tabutils #themeBtn:active svg{transform:rotate(-35deg) scale(1);transition-duration:.12s}

  /* 편집(연필) — 글씨 쓰려고 드는 손처럼 기울며 톡 */
  .tabutils #dashEditBtn:hover svg{transform:translateY(-2px) rotate(-14deg);transition-duration:.3s}
  /* 편집모드가 켜져 있는 동안은 눌린 상태 표시가 우선이라 기울이지 않는다 */
  .tabutils #dashEditBtn[aria-pressed="true"]:hover svg{transform:translateY(-2px)}

  /* 로그아웃(→) — 나가는 쪽으로 한 걸음 */
  .tabutils #logoutBtn:hover svg{transform:translateX(3px);transition-duration:.3s}

  /* 전자결재(문서) — 종이 한 장이 살짝 떠오르며 넘어가는 느낌 */
  @keyframes tb-page{
    0%{transform:translateY(0) rotateY(0)}
    45%{transform:translateY(-3px) rotateY(-24deg)}
    100%{transform:translateY(-2px) rotateY(0)}
  }
  .tabutils #eaBtn:hover svg{
    transform-origin:20% 50%;
    animation:tb-page .45s var(--ease) 1 forwards}
}

/* 모션 줄이기 — 움직임은 전부 끄고, 색·배경 변화만 남긴다(뜻은 그대로 전달된다). */
@media (prefers-reduced-motion:reduce){
  .tabutils .iconbtn:hover svg,
  .tabutils .iconbtn:active svg{animation:none!important;transform:none!important;filter:none!important}
  .tabutils .iconbtn:hover{transform:none!important}
}

/* ── 공지 표 줄 맞춤 ───────────────────────────────────────────────────────
   칸마다 담긴 것의 키가 다르다 — 글자만 있는 칸(순번·등록일·조회)과
   배지가 든 칸(고정·상태), 단추가 든 칸(관리)이 한 줄에 섞여 있다.
   표의 기본값이 vertical-align:top 이라 각자 칸 꼭대기에 붙어 서로 어긋나 보였다
   (실측 9.5px). 한 줄 안에서는 모두 세로 가운데에 놓는다.
   ★모바일(768px 이하)에서는 줄이 카드로 풀리므로 여기 규칙을 적용하지 않는다. */
@media (min-width:769px){
  .nt-table th,.nt-table td{vertical-align:middle}
  /* 마지막 줄에도 같은 구분선 — .eab-table 이 마지막 줄만 선을 지워 두어서(표를 카드처럼
     보이게 하려던 것) 목록 맨 아래만 선이 없었다. 게시판에서는 줄 수를 세기 어려워진다. */
  .nt-table tbody tr:last-child td{border-bottom:1px solid var(--line)}
  /* 숫자 칸은 머리와 본문이 같은 자리에 오게 둘 다 가운데 */
  .nt-table th.nt-num-h{text-align:center;width:62px}
  .nt-table td.nt-num{text-align:center}
  /* 관리 칸은 폭을 못 박는다 — 단추 글자 길이에 따라 다른 열이 밀리지 않게.
     단추가 줄 높이를 늘리지 않도록 위아래 여백도 최소로 둔다. */
  .nt-table th.nt-mg,.nt-table td.nt-acts{width:112px;white-space:nowrap}
  .nt-table th.nt-mg{text-align:right}   /* 머리글도 단추 위에 오게 */
  /* ★관리 칸은 .sf-acts 때문에 display:flex 였다 — 표 칸이 아니게 되어 vertical-align 이
     듣지 않았고, 칸 높이(24px)가 줄 높이(37px)보다 낮아 단추만 6.6px 위로 떠 있었다.
     다시 표 칸으로 돌려놓고 가운데 정렬한다. 오른쪽 붙이기는 text-align 으로. */
  .nt-table td.nt-acts{display:table-cell;vertical-align:middle;text-align:right;
    padding-top:2px;padding-bottom:2px}
  .nt-table td.nt-acts .nt-mini{display:inline-flex;vertical-align:middle;line-height:1.3}
}

/* ── 정보 허브 — 받아 온 시각 알약은 비면 감춘다 ─────────────────────────
   '마지막 업데이트' 문구를 걷어내면서 빈 껍데기만 남으면 검색창 오른쪽에
   까닭 없는 여백이 생긴다. 안이 비면 자리도 차지하지 않게 한다. */
.phead #ibAs:empty{display:none}

/* ── 영화 스틸컷 갤러리 ──────────────────────────────────────────────────
   상세 덮개의 줄거리 아래에 가로로 늘어놓는다. 좁은 화면에서는 옆으로 밀어 본다.
   ★KMDb 스틸은 207x138 축소판뿐이라 썸네일을 작게 두고, 크게 볼 때도 원래 크기를
     넘겨 늘리지 않는다(늘리면 뭉갠 그림이 된다). */
.mv-stills{padding:0 22px 18px}
.mv-stn{font-weight:600;color:var(--slate-2)}
.mv-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* 보여 주기만 하는 그림이다 — 누를 수 있는 것처럼 보이지 않게 손 모양 커서를 쓰지 않는다. */
.mv-st{flex:0 0 auto;display:block;padding:0;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:var(--soft);line-height:0}
.mv-st img{display:block;width:124px;height:82px;object-fit:cover}

@media (max-width:560px){
  .mv-stills{padding:0 16px 14px}
  .mv-st img{width:108px;height:72px}
}

/* ── 박스오피스 — 좁은 화면에서는 한 편을 한 줄로 ─────────────────────────
   공용 규칙은 좁아지면 칸을 세로로 쌓는다. 영화는 칸이 일곱이라 한 편이 화면
   절반을 차지해 두 편밖에 못 봤다. 여기서는 쌓지 않고 격자로 다시 짠다.

     ┌────┬────┬─────────────────────┐
     │ 1  │[포]│ 영화명              │   ← 순위 · 등락 · 포스터 · 제목
     │ ▲2 │    │ 당일 12,345  누적 … │   ← 관객수 두 개를 한 줄에
     └────┴────┴─────────────────────┘

   · 칸 이름(‘포스터 ·’ ‘당일 관객 ·’)은 붙이지 않는다 — 값만으로 읽힌다.
   · 개봉일·감독은 이 줄에서 뺀다. 눌러서 여는 상세 팝업에 그대로 있다.
   · 표 자체는 PC 와 같은 마크업이다. 넓은 화면은 손대지 않는다. */
@media (max-width:760px){
  .ib-table.b-movie tbody tr{
    display:grid;
    grid-template-columns:34px 44px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:9px;row-gap:1px;
    padding:7px 2px}

  /* 칸 이름 붙이기 끄기 */
  .ib-table.b-movie tbody td::before{content:none}
  .ib-table.b-movie tbody td{padding:0;min-width:0;order:0}

  /* 왼쪽 — 순위(크게) 위, 등락(작게) 아래 */
  .ib-table.b-movie td.ib-rk{grid-column:1;grid-row:1;
    text-align:center;font-size:17px;font-weight:700;line-height:1.2;color:var(--ink)}
  .ib-table.b-movie td.ib-stc{grid-column:1;grid-row:2;text-align:center;font-size:10.5px}
  .ib-table.b-movie td.ib-stc .ib-chg{font-size:10.5px}
  /* NEW 배지가 순위 칸(34px)을 넘지 않게 한 겹 줄인다 */
  .ib-table.b-movie td.ib-stc .ib-st{padding:1px 4px;font-size:9.5px;letter-spacing:-.02em}

  /* 포스터 — 두 줄에 걸쳐 세운다 */
  .ib-table.b-movie td.ib-pos{grid-column:2;grid-row:1 / span 2}
  .ib-table.b-movie td.ib-pos .ib-poster{width:44px;height:64px}

  /* 제목 — 한 줄로, 길면 말줄임 */
  .ib-table.b-movie td.ib-ttl{grid-column:3 / span 2;grid-row:1;font-size:13px;padding:0}
  .ib-table.b-movie td.ib-ttl .ib-a{display:block;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* 관객수 — 당일은 왼쪽, 누적은 오른쪽 끝. 자릿점은 그대로 둔다 */
  .ib-table.b-movie td.ib-val{grid-column:3;grid-row:2;
    text-align:left;font-size:12px;color:var(--ink);font-weight:600}
  .ib-table.b-movie td.ib-val2{grid-column:4;grid-row:2;
    text-align:right;font-size:11.5px;color:var(--slate-2);font-weight:600;white-space:nowrap}
  .ib-table.b-movie td.ib-val::before{content:"당일 ";color:var(--slate-2);font-weight:600}
  .ib-table.b-movie td.ib-val2::before{content:"누적 ";color:var(--slate-2);font-weight:600}

  /* 이 줄에서는 빼는 것들 — 상세 팝업에서 본다 */
  .ib-table.b-movie td.ib-date{display:none}
  .ib-table.b-movie td.ib-ttl .ib-sub{display:none}
}

/* ── 목록형 화면 — 위는 붙박이, 목록만 스크롤 ─────────────────────────────
   예전에는 탭 화면(.tabpane)이 통째로 스크롤러였다. 그래서 목록을 내리면
   검색줄·필터가 위로 밀려 사라졌고, 표 머리글은 화면 맨 위(여백 자리)에 붙어
   그 뒤로 줄이 지나가는 게 비쳐 보였다.

   화면을 세로 3단으로 못 박는다.
     1) 검색·필터 줄      — 안 움직임
     2) 표 머리글        — 안 움직임(이제 '화면 위'가 아니라 '목록 위'에 붙는다)
     3) 목록             — 여기만 스크롤
   스크롤 상자가 하나뿐이라 이중 스크롤이 생기지 않는다.
   열 폭은 표 하나를 그대로 두고 감싸기만 해서 머리글과 칸이 어긋나지 않는다. */

/* PC — 탭 화면이 3단 틀이 된다 */
.tabpane.ib-pane.on,
.tabpane.nt-pane.on{display:flex;flex-direction:column;overflow:hidden}

/* 정보 게시판(뉴스·이차전지·지원사업·국가통계·박스오피스) */
.ib-pane > .phead,.ib-pane > .ib-tabs{flex:0 0 auto}
.ib-pane > #ibBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ib-pane > #ibBody > .ib-sum,
.ib-pane > #ibBody > .ib-pager{flex:0 0 auto}
.ib-pane > #ibBody > .ib-scroll{flex:1 1 auto;min-height:0;overflow:auto}
/* 안내문·로딩 표시도 남은 자리를 채운다(위 두 줄이 붕 뜨지 않게) */
.ib-pane > #ibBody > .ib-empty,
.ib-pane > #ibBody > .placeholder{flex:1 1 auto;min-height:0;overflow:auto}
/* 머리글은 스크롤 상자 안쪽 맨 위에 붙는다. 배경을 칠해 뒤가 비치지 않게 한다. */
.ib-scroll .ib-table thead th{position:sticky;top:0;z-index:5;
  background:var(--soft);background-clip:padding-box}

/* 공지 게시판(인사·안전) */
.nt-pane > .phead,.nt-pane > .toolbar,.nt-pane > .sf-pager{flex:0 0 auto}
.nt-pane > .gwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.nt-pane > .gwrap > .gscroll{flex:1 1 auto;min-height:0;max-height:none}
/* 공지 표에는 원래 머리글 고정이 없었다 — 여기서 붙인다. */
.nt-pane .gscroll thead th{position:sticky;top:0;z-index:5;
  background:var(--soft);background-clip:padding-box}

/* 모바일 — 스크롤러는 .mb-body 다. 그 안에서 같은 3단을 만든다.
   (제목·뒤로 줄은 그대로 두고, 아래 내용만 3단으로 짠다) */
@media (max-width:860px){
  .mb-body:has(.ib-pane),
  .mb-body:has(.nt-pane){display:flex;flex-direction:column;overflow:hidden}
  .mb-body:has(.ib-pane) > .mb-scr-head,
  .mb-body:has(.nt-pane) > .mb-scr-head{flex:0 0 auto}
  .mb-body:has(.ib-pane) > .mb-scr-body,
  .mb-body:has(.nt-pane) > .mb-scr-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .ib-pane,.nt-pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  /* 모바일 표는 줄이 카드로 풀려 머리글이 없다 — 붙일 것도 없다.
     공지도 마찬가지라 .gscroll 만 남은 자리를 채우면 된다. */
  .nt-pane > .gwrap > .gscroll{max-height:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 밀도 — 한 화면에 더 많이 담기 (좁은 화면 전용. PC 는 손대지 않는다)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ④ 공지 게시판(인사·안전) ─────────────────────────────────────────────
   공용 카드 규칙은 칸마다 '이름표 · 값'을 한 줄씩 쌓아 한 건이 화면 절반을 먹었다.
   공지에서 정작 필요한 건 제목이고 나머지는 곁가지다.
     1줄  제목(굵게)
     2줄  구분 · 등록일 · 상태 · 조회 n · 좋아요 n   ← 작게 한 줄로 흘린다
   순번·게시기간은 접는다(목록에서 굳이 볼 값이 아니다). */
@media (max-width:768px){
  .nt-table tbody tr{display:block;padding:8px 10px;margin:0;
    border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
  .nt-table tbody td{display:inline-block;width:auto;padding:0;border:0;min-height:0;
    font-size:11px;line-height:1.5;color:var(--slate-2);margin:0 8px 0 0;vertical-align:middle}
  .nt-table tbody td::before{content:none}
  .nt-table tbody td:empty{display:none}

  .nt-table tbody td.it-nm{display:block;margin:0 0 2px;font-size:13px}
  .nt-table tbody td.it-nm .it-link{display:block;width:100%;padding:0;text-align:left;
    font-size:13px;font-weight:700;color:var(--ink);white-space:normal;line-height:1.45}

  /* 조회·좋아요는 숫자만 두면 무엇인지 모른다 — 아주 작은 이름표를 붙인다 */
  .nt-table tbody td.nt-num{text-align:left}
  .nt-table tbody td.nt-num::before{content:attr(data-h) " ";color:var(--slate-2);font-size:10.5px}
  .nt-table tbody td.nt-num.z{opacity:.55}

  /* 목록에서 자리만 차지하던 칸 */
  .nt-table tbody td[data-h="순번"],
  .nt-table tbody td[data-h="게시기간"]{display:none}

  /* 관리 단추 — 권한 있는 사람에게만 나온다. 아래 줄에 작게 */
  .nt-table tbody td.nt-acts{display:block;margin:5px 0 0;text-align:left}
  .nt-table tbody td.nt-acts .nt-mini{min-height:28px;font-size:11.5px;padding:2px 8px}
}

/* ── ③ 가로 막대 요약(그 밖의 안전활동 등) — 두 칸으로 ───────────────────
   '이름표 + 값 + 긴 빈 막대'가 한 줄씩 세로로 쌓여, 막대 오른쪽이 늘 비어 있었다.
   좁은 화면에서는 반반으로 접어 같은 높이에 두 배를 담는다.
   (.rk-charts · .env-charts 를 쓰는 화면이 함께 좋아진다) */
@media (max-width:768px){
  .rk-charts .ac-ch > div:not(.ac-ch-h),
  .env-charts .ac-ch > div:not(.ac-ch-h){
    display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;align-items:center}
  .rk-charts .hb-row,.env-charts .hb-row{
    grid-template-columns:minmax(34px,auto) minmax(0,1fr) minmax(22px,auto);
    gap:5px;margin:0}
  .rk-charts .hb-l,.env-charts .hb-l{font-size:11px}
  .rk-charts .hb-t,.env-charts .hb-t{height:16px}
  .rk-charts .hb-v,.env-charts .hb-v{font-size:11.5px;font-weight:700}
  .rk-charts .ac-ch-h,.env-charts .ac-ch-h{margin-bottom:4px}
}

/* ── ⑨ 근태이상자 — 부서·파트는 접고 핵심만 ──────────────────────────────
   일자·이름·출퇴근·사유가 핵심이다. 부서·파트는 화면 폭만 먹고 판단에 쓰이지 않는다. */
@media (max-width:768px){
  .px-dept{display:none}
  .px-nm .no{font-size:10.5px}
  .px-nm .nm{font-size:12.5px}
}

/* ── ⑥ 근무표 입력 — 사원 칸 압축 ────────────────────────────────────────
   폭은 JS(rgEmpW)가 116px 로 줄인다. 여기서는 그 안에 들어갈 것만 남긴다.
   이름은 남기고 업무·조·사번 줄은 접는다 — 조 색은 왼쪽 띠로 이미 보인다. */
@media (max-width:768px){
  table.r .emp{padding:0 6px}
  table.r .emp .nm{font-size:12px}
  table.r .emp .no .rg-part,
  table.r .emp .no .rg-no{display:none}
  table.r .emp .no .rg-line{font-size:10.5px}
}

/* ── ⑦⑧ 출퇴근 현황 · 월 근태마감 — 사원 칸과 날짜 칸 압축 ─────────────
   사원 칸이 이름·근무유형 배지·사번을 세로로 쌓아 한 사람이 세 줄을 먹었다.
   이름만 남기고(사번·배지는 접는다) 날짜 칸도 좁혀 더 많은 날이 들어오게 한다. */
@media (max-width:768px){
  .at-table td.emp{padding:4px 7px}
  .at-table td.emp .nm{font-size:12px}
  .at-table td.emp .no,
  .at-table .emp-wg{display:none}
  .at-table thead th{min-width:40px;font-size:10.5px}
  .at-table td{padding:2px 3px}
  .atc{gap:1px}
  .atc-b{font-size:8.5px;padding:0 4px}
}

/* ── ② 권한등급 목록 — 잘리지 않는 컴팩트 리스트 ────────────────────────
   등급 하나가 두 줄(이름 / 인원·화면)을 쓰면서 세로로 길어 몇 개 못 봤다.
   한 줄에 이름과 숫자를 나란히 두고 높이를 줄인다. 이름은 줄바꿈해 잘리지 않게. */
@media (max-width:768px){
  .rb-side .rb-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:7px 10px;min-height:0}
  .rb-side .rb-item .rb-itb{min-width:0}
  .rb-side .rb-item .rb-it{font-size:12.5px;white-space:normal;line-height:1.35;min-width:0}
  .rb-side .rb-item .rb-id2{font-size:10.5px;white-space:nowrap;flex:0 0 auto;margin:0}
  /* 화면 권한 표(70줄)는 좁은 화면에서 가로로 밀어 본다 — 글씨가 뭉개지지 않게 */
  .rb-parea{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── 모바일 최소 크기 — 손가락으로 누를 수 있게 ──────────────────────────
   PC 밀도를 높이려고 공통 컨트롤을 32px 로 낮췄지만, 손가락으로 쓰는 화면에서
   그대로 두면 눌러야 할 것을 못 누른다. 여기서는 되돌려 40px 이상을 준다
   (권장 터치 크기). 글씨도 PC 보다 살짝 키워 읽기 쉽게 둔다. */
@media (max-width:768px){
  .select,.btn2,
  .native-sel select,
  .native-sel input[type=month]{min-height:40px;height:auto;font-size:13px;padding-top:0;padding-bottom:0}
  .select,.btn2{padding-left:12px;padding-right:12px;gap:7px}
  .native-sel select{padding-left:12px;padding-right:30px}
  .native-sel::after{right:12px}
  .rb-search{height:40px;padding:0 11px}
  .rb-search input{font-size:13px}
}

/* ══════════════════════════════════════════════════════════════════════════
   안전보건조직도 — 좁은 화면용 세로 계층형
   PC 도면은 가로로 넓다. 휴대폰 폭에 맞춰 통째로 줄이면 글씨를 읽을 수 없다.
   그래서 같은 자료로 위에서 아래로 쌓는 그림을 따로 그린다(자리 좌표는 안 쓴다).
   필요하면 [전체 조직도 보기]로 원본을 줄여 보고 손가락으로 밀어 볼 수 있다.
   ★PC 는 이 규칙이 하나도 걸리지 않는다 — 배치·편집·저장 모두 그대로다.
   ══════════════════════════════════════════════════════════════════════════ */
.og-mtools{display:none}          /* 좁은 화면에서만 나온다 */
.og-tree{display:none}

@media (max-width:768px){
  .og-mtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
  /* ★[hidden] 속성은 display 를 지정하면 무시된다 — 아래 세 줄이 그 구멍을 막는다.
     이게 없으면 [전체 조직도 보기]로 넘어가도 계층형이 그대로 남아 두 개가 겹친다. */
  .og-mtools[hidden],.og-zoom[hidden],.og-narrow .og-tree[hidden]{display:none}
  .og-zoom{display:inline-flex;align-items:center;gap:6px}
  .og-zoom .btn2{min-width:40px;justify-content:center;font-size:16px;padding:0 10px}
  .og-zoom b{font-family:var(--mono);font-size:12px;color:var(--slate);min-width:38px;text-align:center}

  /* ── 세로 계층형 ── */
  .og-narrow .og-tree{display:block;padding-bottom:12px}
  .og-tlv{display:flex;flex-direction:column;gap:6px}
  /* 단과 단을 잇는 세로선 */
  .og-tl{width:2px;height:14px;margin:0 auto;background:var(--line)}

  .og-tcard{border:1px solid var(--line);border-left:4px solid var(--navy);
    border-radius:var(--r-sm);background:var(--panel);padding:8px 11px;box-shadow:var(--shadow-sm)}
  .og-tcard.navy  {border-left-color:var(--navy)}
  .og-tcard.indigo{border-left-color:var(--navy-600)}
  .og-tcard.green {border-left-color:var(--green)}
  .og-tcard.gold  {border-left-color:var(--gold)}
  /* 협의체(gold)는 본줄기가 아니라 옆에 붙는 것이라 살짝 들여 쓴다 */
  .og-tcard.gold{margin-left:18px;background:var(--soft)}

  /* 글씨는 확대 없이 읽히는 크기로 둔다 — 이 화면의 존재 이유다 */
  .og-trole{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4}
  .og-tsub {font-size:11.5px;font-weight:600;color:var(--slate-2);margin-top:1px}
  .og-tname{font-size:12.5px;color:var(--slate);margin-top:2px}
  .og-tdesc{font-size:11.5px;color:var(--slate-2);margin-top:3px;line-height:1.5}

  /* 계층형을 보는 동안에는 원본 도면을 접는다 */
  .og-narrow:not(.og-fullon) .og-chart,
  .og-narrow:not(.og-fullon) .og-imgwrap{display:none}

  /* ── 전체 조직도(원본) — 줄여서 보여 주고 손가락으로 민다 ──
     transform 대신 zoom 을 쓴다. transform 은 줄여도 차지하는 자리가 그대로라
     빈 공간이 남지만, zoom 은 자리까지 함께 줄어 스크롤 범위가 맞는다. */
  .og-narrow.og-fullon .og-chart{zoom:var(--og-k,.45)}
  .og-narrow.og-fullon{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── 보기 전용 — 편집으로 들어가는 길을 닫는다(편집은 PC 에서) ── */
  .og-narrow #ogEdit,
  .og-narrow #ogGrid,
  .og-narrow #ogImg,
  .og-narrow #ogNew,
  .og-narrow .og-acts,
  .og-narrow .og-port,
  .og-narrow .og-hint{display:none !important}
  .og-narrow .og-card{cursor:default}
}

/* ── 자동완성 흰 배경 지우기 ──────────────────────────────────────────────
   브라우저가 아이디·비밀번호를 채워 넣으면 그 칸만 제 색(연노랑/흰색)으로 칠한다.
   배경색은 우리가 못 바꾸지만, 칸 안쪽을 통째로 덮는 그림자를 넣으면 가려진다.
   글자색은 -webkit-text-fill-color 로만 바뀐다(color 는 먹지 않는다).
   transition 을 아주 길게 걸어 두는 것은 브라우저가 잠깐 칠했다 지우는 깜빡임을 막는 수법이다.
   ★칸마다 바탕이 다르다 — 로그인 칸(.inp)은 --soft, 보통 입력칸은 --panel 이다. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--panel) inset;
          box-shadow:0 0 0 1000px var(--panel) inset;
  caret-color:var(--ink);
  border-radius:inherit;
  transition:background-color 9999s ease-out 0s}

/* 로그인 칸과 검색줄은 바탕이 --soft 다 */
.inp input:-webkit-autofill,
.inp input:-webkit-autofill:hover,
.inp input:-webkit-autofill:focus,
.rb-search input:-webkit-autofill,
.rb-search input:-webkit-autofill:hover,
.rb-search input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--soft) inset;
          box-shadow:0 0 0 1000px var(--soft) inset}

/* 파이어폭스 계열 */
input:autofill,textarea:autofill{background-color:var(--panel);color:var(--ink)}
.inp input:autofill,.rb-search input:autofill{background-color:var(--soft)}

/* ── 권한등급 — 화면별 범위 칸 ────────────────────────────────────────────
   수정·조회 체크 옆에 '범위'를 둔다. 고를 수 있는 화면만 드롭다운이고,
   고정된 화면은 자물쇠와 값을 회색으로만 보여 준다(누를 수 없다). */
.rb-ps{flex:0 0 96px;display:flex;align-items:center;justify-content:center;min-width:0}
.rb-phead .rb-ps{font-size:11.5px;color:var(--slate-2);font-weight:700}
.rb-ssel{width:92px;height:26px;font-size:11.5px;padding:0 20px 0 7px}
.rb-slock{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--slate-2)}
.rb-slock svg{width:11px;height:11px}

@media (max-width:768px){
  /* 좁은 화면에서는 범위 칸이 줄을 밀어낸다 — 폭을 줄이고 가로 스크롤로 넘긴다 */
  .rb-ps{flex:0 0 78px}
  .rb-ssel{width:74px;height:32px;font-size:11px;padding:0 18px 0 6px}
  .rb-parea{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rb-parea .rb-prow{min-width:340px}
}

/* 등급 소속 인원 명단(권한등급 관리 — 읽기 전용 모달) */
/*  표가 길어지면 상자가 아니라 표 안쪽만 세로로 구른다 — 화면에 스크롤이 둘 생기지 않게. */
/*  ★<button> 인데 생김새 초기화를 빠뜨려, 브라우저 기본 버튼(회색 바탕 + outset 테두리 + 패딩)
    으로 그려지고 있었다. 그 박스가 줄 높이를 밀어 올려 등급 목록이 통째로 커 보였다.
    이 앱의 전역 button 규칙은 글꼴·커서만 손대므로, 링크처럼 쓰는 버튼은 여기서 직접 지워 준다. */
.gmb-lnk{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--slate) 45%,transparent)}
.gmb-lnk:hover,.gmb-lnk:focus-visible{color:var(--gold);text-decoration-color:var(--gold)}
.eac-modal .eac-mbox.gmb-box{width:min(560px,94vw);max-height:84vh;gap:10px}
.gmb-body{display:flex;flex-direction:column;gap:10px;min-height:0}
.gmb-sum{font-size:12px;color:var(--slate)}
.gmb-sum b{color:var(--ink)}
.gmb-scroll{overflow:auto;min-height:0;border:1px solid var(--line);border-radius:var(--r-sm)}
.gmb-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.gmb-tb th,.gmb-tb td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);
  white-space:nowrap;vertical-align:middle}
.gmb-tb thead th{position:sticky;top:0;z-index:1;background:var(--soft);
  font-size:11.5px;font-weight:700;color:var(--slate-2)}
.gmb-tb tbody tr:last-child td{border-bottom:0}
/*  부서는 길어질 수 있는 유일한 칸이라, 여기만 줄여서 가로 스크롤을 막는다. */
.gmb-dp{white-space:normal;word-break:keep-all;line-height:1.45}
.gmb-nm b{font-weight:700}
.gmb-on{color:var(--green)}
.gmb-off{color:var(--slate-2)}

@media (max-width:640px){
  .eac-modal .eac-mbox.gmb-box{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;gap:8px}
  .gmb-tb{font-size:12px}
  .gmb-tb th,.gmb-tb td{padding:7px 8px}
  /*  좁은 화면에서는 직위를 접고 이름 아래 붙여 네 칸을 세 칸으로 줄인다. */
  .gmb-tb th:nth-child(2),.gmb-tb td:nth-child(2){display:none}
  .gmb-nm::after{content:attr(data-pos);display:block;font-size:11px;color:var(--slate-2);font-weight:400}
  /*  칸 폭을 미리 나눠 두고 전부 접히게 한다 — 390px 에서 표가 삐져나가 가로로 구르던 것을 막는다.
      (세로 스크롤은 목록 안쪽 하나만 남는다) */
  .gmb-tb{table-layout:fixed}
  .gmb-tb th,.gmb-tb td{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
  .gmb-tb th:nth-child(1),.gmb-tb td:nth-child(1){width:36%}
  .gmb-tb th:nth-child(3),.gmb-tb td:nth-child(3){width:40%}
  .gmb-tb th:nth-child(4),.gmb-tb td:nth-child(4){width:24%}
  .gmb-tb .rb-ovtag{margin-left:0;margin-top:2px}
}

/* 연차대휴현황(P_MYLEAVE) — 탭 없이 내 범위 인원이 한 표에 그대로 나온다.
   ※예전의 범위 탭(.lv-tab)은 화면에서 없앴으므로 규칙도 같이 지웠다. */
.lv-note{margin:0 0 10px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--soft);font-size:12px;color:var(--slate)}
.lv-note b{color:var(--ink)}
/*  표는 바깥이 아니라 자기 영역 안에서만 구른다(세로 스크롤 하나 유지) */
.lv-tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);max-height:62vh}
.lv-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.lv-tb th,.lv-tb td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.lv-tb thead th{position:sticky;top:0;z-index:1;background:var(--soft);
  font-size:11.5px;font-weight:700;color:var(--slate-2)}
.lv-tb th.num,.lv-tb td.num{text-align:right;font-variant-numeric:tabular-nums}
.lv-tb tbody tr:last-child td{border-bottom:0}
.lv-tb tr.me{background:var(--gold-050)}
.lv-tb td.ok{color:var(--green);font-weight:700}
.lv-tb td.gold{color:var(--gold);font-weight:700}
.lv-jg{font-size:11px;color:var(--slate-2);font-weight:400}
.lv-dp{color:var(--slate)}
/*  여러 사람 틈에서 자기 줄을 바로 찾게 — 배경(tr.me)만으로는 좁은 화면에서 눈에 안 띈다. */
.lv-me{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;
  background:var(--gold);color:#fff;font-size:10.5px;font-weight:700;vertical-align:1px}
.lv-tb td.strong{font-weight:700;color:var(--ink)}

@media (max-width:640px){
  .lv-tw{max-height:none}
  .lv-tb{table-layout:fixed;font-size:12px}
  .lv-tb th,.lv-tb td{padding:6px 7px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
  /*  칸이 여덟이면 390px 에서 반드시 밀린다. 내역(전년이월·근속가산·당해발생)은 접고
      결과 셋만 남긴다 — 부서는 지우지 않고 이름 아래로 넣는다(::after). */
  .lv-tb th:nth-child(2),.lv-tb td:nth-child(2),
  .lv-tb th:nth-child(3),.lv-tb td:nth-child(3),
  .lv-tb th:nth-child(4),.lv-tb td:nth-child(4),
  .lv-tb th:nth-child(5),.lv-tb td:nth-child(5){display:none}
  /*  남는 칸은 넷 — 이름 40 + 발생계 20 + 사용 20 + 잔여 20 = 100%. */
  .lv-tb th:nth-child(1),.lv-tb td:nth-child(1){width:40%}
  .lv-tb th:nth-child(6),.lv-tb td:nth-child(6),
  .lv-tb th:nth-child(7),.lv-tb td:nth-child(7),
  .lv-tb th:nth-child(8),.lv-tb td:nth-child(8){width:20%}
  .lv-nm::after{content:attr(data-dp);display:block;font-size:11px;color:var(--slate-2);font-weight:400}
}

/* IP관리 — 할당대상이 실제 자산이면 눌러서 자산 상세를 연다 */
.ip-alink{cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--slate) 45%,transparent)}
.ip-alink:hover,.ip-alink:focus-visible{color:var(--gold);text-decoration-color:var(--gold)}

/* 비정형 작업 목록 — 공사기간이 길어져 작업명 칸을 밀어내던 것을 잡는다 */
/*  기간은 한 줄로 늘어놓지 않고 '시작 / ~종료 / 시각' 을 쌓는다. */
.sf-span2{font-size:11px;color:var(--slate-2);line-height:1.35}
/*  작업명은 이 표의 본문이다 — 아무리 좁아도 이만큼은 남긴다. */
.it-table.sf-resp td[data-h="작업명"]{min-width:150px}
.sf-mng{width:172px}
@media (max-width:1280px) and (min-width:861px){
  /*  본문 폭이 좁아지면 관리 버튼은 아이콘만 남겨 그 자리를 작업명에 내준다. */
  .sf-bl{display:none}
  .sf-mng{width:92px}
  .it-table.sf-resp td.sf-acts .btn2{padding-left:8px;padding-right:8px}
}

/* 팝업 공지 — 접속 직후 뜨는 창. 내용이 길어도 상자가 아니라 본문만 구른다(세로 스크롤 하나) */
/*  여러 장을 가운데에 한 줄로 늘어놓는 판. 넓으면 셋, 좁으면 하나(칸 수는 JS 가 정한다). */
.npz-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px}
.npz-row{display:flex;align-items:stretch;justify-content:center;gap:14px;max-width:100%}
/*  대기열 안내 — 아직 몇 장 남았는지 */
.npz-more{padding:4px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--slate)}

/*  ★가로로 길쭉한 띠가 아니라 네모진 카드로 둔다.
    폭을 440px 로 묶고 최소 높이를 함께 줘서, 내용이 짧아도 납작해지지 않는다.
    내용이 길면 세로로만 늘고(가로는 그대로), 더 길면 본문 안에서만 스크롤한다. */
.eac-modal .eac-mbox.npz-box{flex:0 1 440px;width:min(440px,calc(100vw - 32px));min-width:0;
  min-height:min(420px,76vh);max-height:82vh;gap:12px;padding:16px}
.npz-box .eac-mh{display:flex;align-items:center;gap:8px}
.npz-cat{flex:0 0 auto;padding:2px 9px;border-radius:999px;background:var(--gold-050);
  border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));
  font-size:11px;font-weight:700;color:var(--gold)}
/*  폭이 좁아진 만큼 제목은 두 줄까지 받아 준다(한 줄로 자르면 무슨 공지인지 모른다) */
.npz-title{flex:1 1 auto;min-width:0;line-height:1.4;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.npz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;color:var(--slate-2)}
.npz-until{color:var(--slate)}
.npz-must{padding:1px 8px;border-radius:var(--r-sm);background:var(--red-050,var(--soft));
  color:var(--red);font-weight:700}
/*  남은 높이는 본문이 채운다 — 위아래 여백이 들쭉날쭉하지 않게 */
.npz-body{overflow:auto;overflow-wrap:anywhere;min-height:0;flex:1 1 auto;padding:14px;line-height:1.7;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.npz-body img{max-width:100%;height:auto}
.npz-empty{color:var(--slate-2)}
.npz-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.npz-foot .btn2{min-height:34px}
/*  '오늘 하루 보지 않기' — 테두리·바탕 없이 글자만(옆 [닫기] 와 무게를 달리한다) */
.npz-foot .npz-day{background:transparent;border:0;box-shadow:none;color:var(--slate);
  padding:0 4px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.npz-foot .npz-day:hover{color:var(--ink);background:transparent}
.npz-foot .npz-day:disabled{opacity:.5;cursor:default}
.npz-hint{font-size:11.5px;color:var(--slate-2)}

@media (max-width:640px){
  /*  좁은 화면에서는 좌우에 여백만 남기고 폭을 꽉 채운다(화면 전체를 덮지는 않는다). */
  .eac-modal .eac-mbox.npz-box{flex:0 0 auto;width:calc(100vw - 28px);max-width:none;
    min-height:min(380px,72vh);max-height:80vh;border-radius:var(--r-lg);gap:10px;padding:14px}
  .npz-row{gap:0}
  .npz-title{-webkit-line-clamp:3}
  .npz-foot .btn2{flex:1 1 auto;min-height:40px}   /* 터치 타깃 확보 */
  .npz-foot .sp{display:none}
}

/* ══ 공지 등록/수정 폼 — 넓은 화면에서 2열 ══════════════════════════════
   짧은 칸(제목·상태·날짜·순서)이 한 줄씩 차지해 오른쪽이 늘 비어 있었다.
   1100px 이상에서는 라벨+입력 짝을 두 벌 놓아 빈 자리를 줄인다.
   본문(rich)·긴 글·버튼 편집기는 원래대로 한 줄을 다 쓴다. */
/*  ★기준을 860px 로 둔 이유
    등록/수정 폼은 새 창(팝업)이고 그 창의 폭이 곧 여기서 말하는 화면 폭이다.
    예전 기준(1100px)은 팝업 폭(720→980)보다 커서 2열이 한 번도 적용되지 않았다.
    768px(모바일 경계)보다는 위로 잡아, 팝업이 모바일 취급을 받지 않게 한다. */
@media (min-width:860px){
  .sfp-body-in .sf-grid{
    grid-template-columns:110px minmax(0,1fr) 110px minmax(0,1fr);
    max-width:none;
    column-gap:22px;
  }
  /*  한 줄을 통째로 쓰는 것들 — 본문·긴 글·체크목록.
      ★클래스 이름을 실제 마크업과 맞춰야 한다.
        본문 편집기는 .sf-rich 가 아니라 .nt-editor-wrap 이다(safety-popup.js fieldHtml).
        전에 .sf-rich 로 적어 두어 본문이 한쪽 열에 끼어 좁고 길게 들어갔다.
      ★본문은 늘 폼 맨 아래다 — 라벨을 첫 칸으로 내리고 내용이 끝까지 차지하게 한다. */
  .sfp-body-in .sf-grid > label:has(+ .sf-ta),
  .sfp-body-in .sf-grid > label:has(+ .sf-checks){grid-column:1 / 2}
  .sfp-body-in .sf-grid > .sf-ta,
  .sfp-body-in .sf-grid > .sf-checks{grid-column:2 / -1}

  /*  본문(에디터)만 세로로 쌓는다 — 라벨을 에디터 위에 얹고 둘 다 폼 전체 폭을 쓴다.
      라벨을 왼쪽 칸에 두면 그 칸(110px)과 사이 여백(22px)만큼 에디터가 좁아진다.
      글을 쓰는 자리라 가로가 넓을수록 낫다. */
  .sfp-body-in .sf-grid > label:has(+ .nt-editor-wrap),
  .sfp-body-in .sf-grid > .nt-editor-wrap{grid-column:1 / -1}

  /*  체크 한 개짜리 칸이 남는 자리를 넓게 벌리지 않게 — 다른 짝 행과 같은 높이로. */
  .sfp-body-in .sf-grid > .it-chk{align-self:center}
}

/* ══ 액션 버튼 편집기 ══════════════════════════════════════════════════ */
.sf-actwrap{margin-top:14px}
.na-ed{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);padding:10px 12px}
.na-ed-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.na-ed-t{font-size:12.5px;font-weight:700;color:var(--ink)}
.na-rows{display:flex;flex-direction:column;gap:6px}
.na-none{padding:6px 2px}
/*  한 행 = 이름 · 링크(선택) · 필수 · 서명받기 · 조작.
    입력 위에 무엇을 적는 칸인지 이름표를 얹는다(예시 문구를 칸 안에 넣지 않는다). */
.na-row{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(180px,1.6fr) auto auto auto;
  gap:6px 8px;align-items:end}
.na-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.na-fl{font-size:11px;font-weight:600;color:var(--slate-2)}
.na-row .it-chk{padding-bottom:7px;white-space:nowrap}
.na-acts{padding-bottom:4px}
.na-row .na-url[hidden]{display:none}
.na-acts{display:flex;gap:4px}

/* ══ 보기·팝업의 실행 버튼 ══════════════════════════════════════════════ */
.na-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.na-b{min-height:36px}
.na-must{color:var(--red);margin-left:3px}
.na-done{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:var(--r-sm);
  background:var(--soft);border:1px solid var(--line);font-size:12.5px;color:var(--green);font-weight:600}
.na-hint{margin-top:6px;font-size:11.5px;color:var(--slate-2)}

/* ══ 서명 캔버스 ══════════════════════════════════════════════════════ */
.eac-modal .eac-mbox.nsg-box{width:min(560px,94vw);gap:10px}
.nsg-hint{font-size:12px;color:var(--slate)}
/*  캔버스는 흰 바탕 고정 — 어두운 테마에서도 서명이 검게 보이게. */
.nsg-wrap{height:220px;border:1px dashed var(--line);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.nsg-cv{display:block;touch-action:none;cursor:crosshair}   /* touch-action:none = 손가락으로 그릴 때 화면이 안 밀린다 */
.nsg-foot{display:flex;align-items:center;gap:8px}

/* ══ 관리자 현황 ══════════════════════════════════════════════════════ */
.eac-modal .eac-mbox.nst-box{width:min(860px,95vw);max-height:86vh;gap:10px}
.nst-body{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:14px}
.nst-sec{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.nst-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.nst-cnt{font-size:12px;color:var(--slate)}
.nst-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nst-sub{font-size:11.5px;font-weight:700;color:var(--slate-2);margin-bottom:4px}
.nst-list{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:3px}
.nst-it{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;
  padding:4px 6px;border-radius:var(--r-sm);background:var(--soft)}
.eac-modal .eac-mbox.nsv-box{width:min(520px,92vw);gap:8px}
.nsv-img{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}

@media (max-width:640px){
  /*  모바일 — 모두 1열. 버튼 편집기도 줄을 나눠 쌓는다. */
  .na-row{grid-template-columns:1fr 1fr;gap:6px;align-items:center}
  .na-row .na-f{grid-column:1 / -1}
  .na-acts{justify-content:flex-end;padding-bottom:0}
  .nst-two{grid-template-columns:1fr}
  .eac-modal .eac-mbox.nsg-box{width:100vw;max-width:100vw;border-radius:0}
  .nsg-wrap{height:200px}
  .nsg-foot .btn2{flex:1 1 auto;min-height:40px}
  .na-b{min-height:42px}          /* 터치 타깃 */
}

/* 공지 폼 — '중요 공지' 는 눈에 먼저 들어와야 한다.
   체크 여부와 상관없이 빨강으로 두고, 켜 두었을 때만 더 진하고 굵게. */
.sfp-body-in .sf-grid > .it-chk:has(#f_important),
.sfp-body-in .sf-grid > .it-chk:has(#f_pinned){color:var(--red)}
.sfp-body-in .sf-grid > .it-chk:has(#f_important) input[type=checkbox],
.sfp-body-in .sf-grid > .it-chk:has(#f_pinned) input[type=checkbox]{accent-color:var(--red)}
.sfp-body-in .sf-grid > .it-chk:has(#f_important:checked),
.sfp-body-in .sf-grid > .it-chk:has(#f_pinned:checked){
  font-weight:700;color:color-mix(in srgb,var(--red) 78%,#000)}

/* 공지 폼 — 앞의 짧은 칸들과 본문 사이를 한 줄쯤 띄운다.
   본문은 성격이 다른 덩어리(라벨+에디터)라 바로 붙어 있으면 앞 줄에 딸려 보인다.
   ※ 라벨과 에디터 사이는 오히려 좁혀 한 덩어리로 보이게 한다. */
.sfp-body-in .sf-grid > label:has(+ .nt-editor-wrap){margin-top:14px;margin-bottom:-4px}

/* ══ 대표님께 건의·신고 ══════════════════════════════════════════════
   상단 아이콘 줄에서 이 버튼 하나만 네모 배경(오렌지)을 쓴다.
   나머지 아이콘은 배경 없이 그대로다 — 눈에 띄어야 할 통로가 하나뿐이라서. */
/*  ★여기서는 '배경색과 아이콘색'만 정한다.
    폭·높이·테두리·라운드·정렬은 위의 .tabutils .iconbtn 이 이미 정해 둔 값을 그대로 쓴다 —
    한 군데서만 바꾸면 옆 아이콘과 영영 어긋나지 않는다. */
.tabutils .iconbtn.sg-btn{background:#E8730C;color:#fff}
.tabutils .iconbtn.sg-btn svg,.tabutils .iconbtn.sg-btn .i{fill:#fff}
.tabutils .iconbtn.sg-btn:hover,.tabutils .iconbtn.sg-btn:focus-visible{background:#CF6412;color:#fff}
.tabutils .iconbtn.sg-btn:hover svg,.tabutils .iconbtn.sg-btn:hover .i{fill:#fff}

/*  모바일 — PC 같은 상단 아이콘 줄이 없어 홈 히어로 우상단(편집·테마 옆)에 같은 버튼을 둔다.
    크기·정렬은 옆 버튼(.dh-ghostbtn)을 그대로 쓰고, 여기서는 색만 정한다.
    ※PC 에서는 상단 아이콘 줄에 이미 같은 버튼이 있으므로 감춘다(같은 것이 두 번 보이지 않게). */
.dh-ghostbtn.dh-sg{background:#E8730C;border-color:#E8730C;color:#fff}
.dh-ghostbtn.dh-sg:hover{background:#CF6412;border-color:#CF6412}
@media (min-width:861px){ .dh-ghostbtn.dh-sg{display:none} }

/*  제출·상세 모달 — PC·모바일 같은 것을 쓴다(좁으면 아래에서 올라오는 시트). */
.sg-modal{position:fixed;inset:0;z-index:300;background:rgba(10,14,22,.5);
  display:flex;align-items:center;justify-content:center;padding:20px}
.sg-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  width:min(620px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sg-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sg-head-i{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:#E8730C}
.sg-head-i svg,.sg-head-i .i{fill:#fff;width:18px;height:18px}
.sg-head-t{font-size:15px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-x{border:0;background:none;color:var(--slate-2);cursor:pointer;padding:4px;border-radius:6px}
.sg-x:hover{background:var(--soft);color:var(--ink)}
.sg-body{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.sg-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.sg-l{font-size:12px;font-weight:700;color:var(--slate-2)}
.sg-cats,.sg-who{display:flex;flex-wrap:wrap;gap:6px}
/*  ★칩은 .btn2(공용 버튼)를 그대로 입는다 — 높이·라운드·글자는 다른 화면 버튼과 같다.
    이 화면이 따로 정하는 것은 '골랐을 때 무슨 색인가' 뿐이다. */
.sg-chip.on{background:#E8730C;border-color:#E8730C;color:#fff}
.sg-chip.on svg{color:#fff}
.sg-chip.on.warn{background:var(--navy);border-color:var(--navy)}
.sg-in,.sg-ta{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);padding:8px 10px;font:inherit;font-size:13px}
.sg-in:focus,.sg-ta:focus{outline:none;border-color:#E8730C}
.sg-ta{resize:vertical;min-height:150px;line-height:1.55}
.sg-note{font-size:11.5px;color:var(--slate-2);line-height:1.5}
.sg-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.sg-foot .sp{flex:1}
.btn2.sg-send{background:#E8730C;border-color:#E8730C;color:#fff}
.btn2.sg-send:hover{background:#CF6412;border-color:#CF6412}
.btn2.sg-send svg,.btn2.sg-send .i{fill:#fff}

/*  열람 — 목록·상세 */
.sg-tools{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sg-in.sm{width:220px}
.sg-row{cursor:pointer}
.sg-row:hover{background:var(--soft)}
.sg-tag{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);background:var(--soft);
  border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--slate)}
.sg-anon{color:#E8730C;font-weight:700}
.sg-dt{color:var(--slate-2);font-variant-numeric:tabular-nums}
.sg-ti{font-weight:600}
.sg-sent{color:var(--slate-2);font-size:11.5px}
.sg-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--slate)}
.sg-view{white-space:pre-wrap;word-break:break-word;line-height:1.65;font-size:13.5px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px}

@media (max-width:640px){
  /*  좁은 화면 — 아래에서 올라오는 시트로. 손가락이 닿는 자리에 버튼이 남는다. */
  .sg-modal{align-items:flex-end;padding:0}
  .sg-box{width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
  .sg-ta{min-height:120px}
  .sg-in.sm{width:100%}
  /*  목록은 분류·전달 칸을 접는다 — 제목·제출·일시만 남겨 밀리지 않게. */
  .sg-tb th:nth-child(1),.sg-tb td:nth-child(1),
  .sg-tb th:nth-child(5),.sg-tb td:nth-child(5){display:none}
  .sg-tb th:nth-child(2),.sg-tb td:nth-child(2){display:table-cell;width:52%}
  .sg-tb th:nth-child(3),.sg-tb td:nth-child(3){display:table-cell;width:22%}
  .sg-tb th:nth-child(4),.sg-tb td:nth-child(4){display:table-cell;width:26%}
}

/* ── 건의·신고: 상단 메가폰 hover 모션 ────────────────────────────────
   옆 아이콘들은 저마다 뜻에 맞는 hover 동작이 있는데 이 버튼만 가만히 있었다.
   메가폰은 '외치는' 물건이니, 손잡이를 축으로 한 번 들썩이게 한다.
   (@media 조건·감속 규칙은 위 아이콘들과 같은 것을 쓴다 — 모션 줄이기에서는 자동으로 꺼진다) */
@media (hover:hover) and (pointer:fine){
  @keyframes tb-shout{
    0%{transform:rotate(0) scale(1)}
    28%{transform:rotate(-11deg) scale(1.07)}
    52%{transform:rotate(5deg) scale(1.03)}
    78%{transform:rotate(-3deg) scale(1.02)}
    100%{transform:rotate(0) scale(1)}
  }
  .tabutils #sgBtn:hover svg{
    transform-origin:28% 72%;            /* 손잡이 쪽을 축으로 */
    animation:tb-shout .55s var(--ease) 1}
}

/* ── 건의·신고: 제출 새 창 ──────────────────────────────────────────── */
.sgw{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--ink)}
.sgw .sg-head{border-bottom:1px solid var(--line)}
.sgw .sg-body{flex:1;overflow:auto}
.sgw .sg-foot{border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--panel)}
.sg-note-i{font-weight:400;color:var(--slate-2);font-size:11px;margin-left:6px}
/*  창 안에서만 쓰는 알림 — 본체의 토스트를 쓸 수 없어서(다른 창) 여기 하나 둔다. */
.sg-toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:20;
  max-width:88%;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink);font-size:12.5px;box-shadow:var(--shadow)}

/* ── 건의·신고: 첨부 ─────────────────────────────────────────────────── */
.sg-att{display:flex;gap:8px;flex-wrap:wrap}
.sg-files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sg-file{display:flex;align-items:center;gap:8px;padding:6px 9px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font-size:12.5px}
.sg-file-i{display:grid;place-items:center;width:22px;height:22px;color:var(--slate-2);flex:0 0 auto}
.sg-file-i svg{width:16px;height:16px}
.sg-file-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-file-s{color:var(--slate-2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.sg-thumb{width:40px;height:40px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--soft);flex:0 0 auto}
/*  목록에서 '첨부 있음'을 한눈에 */
.sg-clip{display:inline-flex;align-items:center;gap:2px;margin-left:6px;
  color:var(--slate-2);font-size:11px;font-weight:700;vertical-align:1px}
.sg-clip svg{width:12px;height:12px}

@media (max-width:640px){
  .sgw{min-height:100dvh}
  .sg-file{flex-wrap:wrap}
  .sg-file-n{flex:1 1 100%;order:2;white-space:normal;word-break:break-all}
}

/* ── 연차대휴현황: 표가 화면 아래까지 채우게 ────────────────────────────
   근무표 입력(.roster-pane)과 같은 방식이다 — 탭을 세로 flex 로 두고
   표 상자가 남은 높이를 차지한다. 행이 많으면 표 안에서만 구른다(세로 스크롤 하나).
   ※그전에는 .lv-tw{max-height:62vh} 라 인원이 적든 많든 아래가 크게 비었다. */
html:has(.tabpane.lv-pane.on), body:has(.tabpane.lv-pane.on){overflow:hidden}
.tabpane.lv-pane.on{display:flex;flex-direction:column;overflow:hidden}
.lv-pane #lvBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.lv-pane #lvBody .lv-cards,
.lv-pane #lvBody .lv-sec-h{flex:0 0 auto}
.lv-pane #lvBody .lv-tw{flex:1 1 auto;min-height:0;max-height:none}

/*  '사용' 숫자 — 누를 수 있다는 것이 보여야 한다(숫자 모양·정렬은 그대로). */
.lv-use{border:0;background:none;padding:0;font:inherit;color:var(--gold);font-weight:700;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  font-variant-numeric:tabular-nums}
.lv-use:hover,.lv-use:focus-visible{color:color-mix(in srgb,var(--gold) 70%,var(--ink))}

/*  사용 내역 모달 */
.lv-modal{position:fixed;inset:0;z-index:300;background:rgba(10,14,22,.5);
  display:flex;align-items:center;justify-content:center;padding:20px}
.lv-mbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  width:min(460px,100%);max-height:min(82vh,760px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lv-mhead{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.lv-mtitle{font-size:14px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-mx{border:0;background:none;color:var(--slate-2);cursor:pointer;padding:4px;border-radius:var(--r-sm)}
.lv-mx:hover{background:var(--soft);color:var(--ink)}
.lv-mbody{overflow:auto;padding:0}
.lv-mfoot{display:flex;align-items:center;gap:8px;padding:11px 15px;border-top:1px solid var(--line)}
.lv-mfoot .sp{flex:1}
.lv-msum{font-size:12px;color:var(--slate);font-weight:600}
.lv-utb{font-size:12.5px}
.lv-utb thead th{position:sticky;top:0}
.lv-dt2{font-variant-numeric:tabular-nums}
.lv-kind{display:inline-block;padding:1px 7px;border-radius:var(--r-sm);
  background:var(--soft);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--slate)}
.lv-kind.half{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}

@media (max-width:768px){
  /*  모바일은 페이지 스크롤 하나만 쓴다 — 탭을 잠그지 않는다(근무표와 같은 규칙). */
  html:has(.tabpane.lv-pane.on), body:has(.tabpane.lv-pane.on){overflow:auto}
  .tabpane.lv-pane.on{display:block;overflow:visible}
  .lv-pane #lvBody{display:block}
  .lv-pane #lvBody .lv-tw{max-height:none}
  .lv-modal{align-items:flex-end;padding:0}
  .lv-mbox{width:100%;max-height:88vh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
}

/* ── 휴직 표시 ────────────────────────────────────────────────────────
   휴직은 퇴직이 아니다 — 목록에서 빼지 않고 이름 옆에 조용히 표시만 한다.
   퇴사 배지(회색)와 달리 '지금은 자리에 없다'는 뜻이라 푸른 계열로 구분한다. */
.rg-leave,.rb-leave,.lv-leave{display:inline-block;padding:1px 6px;border-radius:var(--r-sm);
  background:var(--indigo-050);color:var(--indigo);border:1px solid color-mix(in srgb,var(--indigo) 35%,transparent);
  font-size:10.5px;font-weight:700;vertical-align:1px;white-space:nowrap}
.lv-leave{margin-left:4px}

/* ── 근무 수정 요청 ──────────────────────────────────────────────────
   본인 근무표에서 우클릭(모바일은 길게 누르기)하면 뜨는 작은 쪽지. */
.ah-ctx{position:fixed;z-index:400;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:0 10px 30px rgba(0,0,0,.35);padding:4px;min-width:186px}
.ah-ctx-b{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;
  padding:9px 11px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
  border-radius:var(--r-sm);text-align:left}
.ah-ctx-b:hover{background:var(--soft);color:var(--gold)}
.ah-ctx-b svg{width:15px;height:15px}
.ah-ctx-d{padding:2px 11px 6px;font-size:11px;color:var(--slate-2);font-variant-numeric:tabular-nums}
.ah-grid .ac{cursor:context-menu}

/*  요청·승인 창 — 건의·신고 창과 같은 뼈대를 쓴다(크기·라운드는 시스템 기본). */
.sqw{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--ink)}
.sq-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sq-head-i{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:var(--navy)}
.sq-head-i svg{fill:#fff;width:18px;height:18px}
.sq-head-t{font-size:15px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-body{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.sq-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:var(--panel)}
.sq-foot .sp{flex:1}
.sq-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.sq-l{font-size:12px;font-weight:700;color:var(--slate-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sq-hint{font-weight:400;color:var(--slate-2);font-size:11px}
.sq-req{color:var(--red);font-size:11px}
.sq-in,.sq-ta{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);padding:7px 9px;font:inherit;font-size:13px}
.sq-in:focus,.sq-ta:focus{outline:none;border-color:var(--gold)}
.sq-ta{resize:vertical;line-height:1.55}
.sq-note{font-size:11.5px;color:var(--slate-2);line-height:1.6}
.sq-bad{color:var(--red)}
/*  바로 반영된다는 말은 눈에 띄어야 한다 — 되돌리기가 쉬운 일이 아니다. */
.sq-warn{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--gold-050);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  color:var(--gold);font-size:12.5px;font-weight:700}
.sq-warn svg{fill:currentColor;width:15px;height:15px;flex:0 0 auto}

.sq-rows{display:flex;flex-direction:column;gap:8px}
.sq-row{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:8px;align-items:end}
.sq-c{display:flex;flex-direction:column;gap:3px;min-width:0}
.sq-cl{font-size:11px;font-weight:600;color:var(--slate-2)}
.sq-rm{align-self:end;margin-bottom:3px}

.sq-items{display:flex;flex-direction:column;gap:6px}
.sq-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);font-size:13px}
.sq-item-d{font-variant-numeric:tabular-nums;color:var(--slate)}
.sq-item-t{font-weight:700}
.sq-view{white-space:pre-wrap;word-break:break-word;line-height:1.6;font-size:13px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 11px}
.sq-toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:20;
  max-width:88%;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink);font-size:12.5px;box-shadow:var(--shadow)}

/*  상태 배지 */
.sq-st{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:700;
  border:1px solid var(--line);background:var(--soft);color:var(--slate)}
.sq-st.pending{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.sq-st.approved{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.sq-st.rejected{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}

/*  인앱 목록 */
.sq-tools{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.sq-tools .sp{flex:1}
.sq-tools .btn2.on{background:var(--navy);border-color:var(--navy);color:#fff}
.sq-row2{cursor:pointer}
.sq-row2:hover{background:var(--soft)}
.sq-rg{font-variant-numeric:tabular-nums;line-height:1.5}
.sq-rs{color:var(--slate);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-dt{color:var(--slate-2);font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .sqw{min-height:100dvh}
  .sq-row{grid-template-columns:1fr 1fr;gap:6px}
  .sq-row .sq-c:nth-child(3){grid-column:1 / -1}
  .sq-rm{grid-column:1 / -1;justify-self:end}
  /*  좁은 화면에서는 사유·요청일을 접는다 — 요청자·구간·상태가 핵심이다. */
  .sq-tb th:nth-child(3),.sq-tb td:nth-child(3),
  .sq-tb th:nth-child(4),.sq-tb td:nth-child(4){display:none}
  .sq-tb th:nth-child(1),.sq-tb td:nth-child(1){display:table-cell;width:28%}
  .sq-tb th:nth-child(2),.sq-tb td:nth-child(2){display:table-cell;width:52%}
  .sq-tb th:nth-child(5),.sq-tb td:nth-child(5){display:table-cell;width:20%}
}

/* 근무표 — 휴직 기간 칸.
   주간·야간·휴무와 같은 자리에 '휴직'으로 박힌다. 사유는 쓰지 않는다.
   손댈 수 없는 칸이라는 것이 드러나게 배경을 한 톤 눌러 둔다.
   ※표에 저장된 값이 아니라 조회할 때마다 얹는 값이다(그룹웨어 전자결재 기준). */
/* 휴직 — 그룹웨어 전자결재가 확정한 것이므로 다른 확정 항목과 같은 노랑 테두리.
   글씨는 또렷하게(흐리면 '비어 있는 칸'으로 잘못 읽힌다). 커서는 default — 누를 수 없는 칸이다. */
/* 확정 전일 칸(휴직·출산휴가…) — 크기·배경은 주간·야간 칩과 같고(.rc-jo 를 그대로 물려받는다)
   글씨만 핑크다: 하루가 통째로 비었다는 뜻을 한눈에 준다(빨강은 주 52시간 초과 테두리가 쓰므로 색을 나눈다).
   노랑 테두리는 '그룹웨어가 확정한 것'을 가리키므로 그대로 둔다 — 색이 뜻하는 바가 서로 다르다. */
.rc-absent{background:transparent;color:var(--pink);
  font-weight:800;box-shadow:inset 0 0 0 1.5px var(--gold);cursor:default;
  min-width:0;max-width:100%}
.r td:has(.rc-absent){cursor:default}
/* 글자 수별 여백·자간 — 넉 자(출산휴가)까지 40px 칸 안에 넣는다. 글꼴 크기는 줄이지 않는다. */
.rc-jo.n2{padding:1px 7px;letter-spacing:-.2px}
.rc-jo.n3{padding:1px 3px;letter-spacing:-.5px}
.rc-jo.n4{padding:1px 1px;letter-spacing:-1.1px}

/* 근무표 상단 '근무수정 결재함' — 대기 건수를 버튼 안에 작게 붙인다. */
.rs-badge{display:inline-block;min-width:16px;padding:0 5px;margin-left:4px;border-radius:999px;
  background:var(--red);color:#fff;font-size:10.5px;font-weight:700;line-height:16px;text-align:center}

/*══════════════════════════════════════════════════════════════════════════════
  도움말 도우미 — 풍이·산이
   ★캐릭터는 공식 위젯(assets/mascot/mascot.html)을 액자(iframe)에 넣어 쓴다.
     위젯이 제 애니메이션을 들고 있으므로 여기서는 자리와 크기만 정한다 —
     위젯 속 모양에 손대는 규칙은 한 줄도 쓰지 않는다(액자 밖에서는 닿지도 않는다).
   ★위젯 기본 무대는 760×250 이다. 우하단 코너에 맞춰 .45 로 줄여 342×113 로 쓴다.
     비율을 지켜야 캐릭터가 찌그러지지 않으므로 scale 로만 줄인다.
   ★쌓임차례(z 70)는 토스트·모달·메뉴·인트로보다 아래 —
     도우미가 눌러야 할 것을 가리는 일은 없어야 한다.
══════════════════════════════════════════════════════════════════════════════*/
.hp-dock{position:fixed;right:20px;bottom:20px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.hp-chars{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/*  액자 — 위젯의 760×250 무대를 .45 로 줄인 자리만 차지하게 한다.
    scale 은 자리를 안 줄이므로, 바깥 상자에 줄어든 크기를 직접 적어 준다. */
.hp-stage{width:342px;height:113px;position:relative;overflow:visible;pointer-events:none}
.hp-frame{position:absolute;right:0;bottom:0;width:760px;height:250px;border:0;
  background:transparent;pointer-events:auto;
  transform:scale(.45);transform-origin:bottom right}

/*  말풍선 — 패널이 닫혀 있을 때만. 눌러도 패널이 열린다. */
.hp-bubble{position:relative;max-width:200px;padding:7px 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  color:var(--ink);font-size:12px;font-weight:600;line-height:1.4;
  box-shadow:var(--shadow-sm);white-space:nowrap}
.hp-bubble::after{content:"";position:absolute;right:26px;bottom:-6px;width:10px;height:10px;
  background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg)}
.hp-bubble:hover{border-color:var(--gold);color:var(--gold)}

/*  손잡이와 접기 — 액자가 포인터를 삼키므로 바깥에 따로 둔다. 올려야 보인다. */
.hp-tools{position:absolute;top:22px;right:-2px;display:flex;gap:3px;
  opacity:0;transition:opacity .15s}
.hp-chars:hover .hp-tools,.hp-tools:focus-within{opacity:1}
.hp-grip,.hp-hide{width:22px;height:22px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--slate-2);
  font-size:13px;line-height:1;display:grid;place-items:center}
.hp-grip{cursor:grab;touch-action:none}
.hp-grip:active{cursor:grabbing}
.hp-hide{font-size:15px}
.hp-grip:hover,.hp-hide:hover{border-color:var(--navy);color:var(--ink)}

/*  화면낭독기·키보드용 — 눈에는 안 보이되 초점이 가면 드러난다.
    액자 안의 그림은 키보드로 누를 수 없으니 같은 일을 하는 길을 하나 더 둔다. */
.hp-sr{position:absolute;left:0;bottom:0;width:1px;height:1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-sr:focus-visible{width:auto;height:auto;clip:auto;padding:5px 10px;
  border:1px solid var(--gold);border-radius:var(--r-sm);background:var(--panel);
  color:var(--ink);font-size:12px}

.hp-mini{width:44px;height:44px;cursor:pointer;border:1px solid var(--line);border-radius:50%;
  background:var(--panel);color:var(--gold);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.hp-mini svg{width:20px;height:20px;fill:currentColor}

/* 패널 */
.hp-pop{width:360px;max-width:calc(100vw - 48px);max-height:min(520px,calc(100vh - 160px));
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  box-shadow:0 18px 44px rgba(0,0,0,.42)}
.hp-pop-h{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.hp-pop-h b{flex:1 1 auto;font-size:13.5px;color:var(--ink)}
.hp-x{width:34px;height:34px;flex:0 0 auto;cursor:pointer;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft);color:var(--ink);font-size:19px;line-height:1;
  display:grid;place-items:center}
.hp-x:hover{border-color:var(--navy)}
.hp-pop-b{flex:1 1 auto;min-height:0;overflow:auto;padding:10px 14px 14px}
.hp-pop-f{flex:0 0 auto;padding:9px 14px;border-top:1px solid var(--line);text-align:right}
.hp-manage{padding:0;border:0;background:none;cursor:pointer;font-size:11.5px;color:var(--slate-2);text-decoration:none}
.hp-manage:hover{color:var(--gold);text-decoration:underline}

/* FAQ 목록(패널·도움말 화면 공용) */
.hp-group + .hp-group{margin-top:14px}
.hp-gh{font-size:11px;font-weight:800;color:var(--slate-2);letter-spacing:.02em;margin:0 0 6px 2px}
.hp-q{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);margin-bottom:6px}
.hp-q[data-off="1"]{opacity:.6}
.hp-q > summary{list-style:none;cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:700;
  color:var(--ink);display:flex;align-items:center;gap:6px}
.hp-q > summary::-webkit-details-marker{display:none}
.hp-q > summary::before{content:"▸";flex:0 0 auto;color:var(--slate-2);font-weight:400}
.hp-q[open] > summary::before{content:"▾"}
.hp-off{font-style:normal;font-size:10px;font-weight:700;color:var(--amber,#c98a1b)}
.hp-a{padding:0 12px 11px 28px;font-size:12.5px;line-height:1.6;color:var(--slate)}
.hp-dim{color:var(--slate-2)}
.hp-link{margin-top:8px}
.hp-link a{font-size:12px;color:var(--gold)}
.hp-empty{padding:28px 10px;text-align:center;font-size:12.5px;color:var(--slate-2)}

/* 도움말 화면 머리 */
.hp-hero{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.hp-hero-c{height:58px;width:auto;flex:0 0 auto}
.hp-hero-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hp-hero-t b{font-size:13.5px;color:var(--ink)}
.hp-hero-t span{font-size:11.5px;color:var(--slate-2)}

/* 편집 모드 */
.hp-edit{display:flex;flex-direction:column;gap:10px}
.hp-row{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:10px 12px}
.hp-row-1,.hp-row-2{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hp-row-2{margin-top:7px}
.hp-row .hp-f{flex:1 1 150px;min-width:0}
.hp-row .hp-w{flex:2 1 240px}
.hp-row .hp-n{flex:0 0 76px}
.hp-row .hp-s{flex:1 1 130px}
.hp-ta{flex:1 1 100%;margin-top:7px;min-height:62px;font-size:12.5px}
.hp-ck{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:12px;color:var(--slate);white-space:nowrap}

@media (max-width:860px){
  /* 모바일에는 떠다니는 도우미를 두지 않는다 — 좁은 화면에서 내용을 가린다 */
  /*  좁은 화면에는 떠다니는 도우미를 두지 않는다 — 내용을 가린다.
      보이지 않아도 액자가 떠 있으면 애니메이션이 계속 도므로 자리 자체를 없앤다
      (모바일 경로에서는 main.js 가 unmountHelper 로 아예 떼어 낸다). */
  .hp-dock{display:none}
  .hp-hero-c{height:46px}
  .hp-row-1 .hp-f,.hp-row-2 .hp-f{flex:1 1 100%}
  .hp-row .hp-n{flex:0 0 72px}
}

/*  '동작 줄이기'를 켠 사람에게는 액자를 아예 내린다 —
    캐릭터의 움직임은 위젯 안에서 도는 것이라 여기서 멈출 길이 없다.
    말풍선과 접기 단추는 그대로 남으니 도움말은 똑같이 쓸 수 있다. */
@media (prefers-reduced-motion:reduce){
  .hp-stage{display:none}
  .hp-bubble{margin-bottom:2px}
  .hp-tools{position:static;opacity:1;justify-content:flex-end;margin-top:2px}
}

/*══════════════════════════════════════════════════════════════════════════════
  외부 연동 인증키 관리 (P_API_KEY)
   ★이름은 전부 .ak- 로 시작한다 — app.css 는 전역 한 장이라 흔한 이름을 쓰면
     엉뚱한 화면이 함께 변한다(지난번 .env-lb 사고).
══════════════════════════════════════════════════════════════════════════════*/
.ak-grid td{vertical-align:top}
.ak-grid .ak-act{white-space:nowrap;text-align:right}
.ak-dim{color:var(--slate-2);font-size:11.5px;line-height:1.5}
.ak-code{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--ink);
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 7px}
.ak-b{height:28px;padding:0 10px;font-size:11.5px}
.ak-b + .ak-b{margin-left:4px}
.ak-danger{border-color:var(--red);color:var(--red)}
.ak-danger:hover{background:var(--red);color:#fff}
/*  폐기된 줄은 눌러 봐야 소용없는 줄이다 — 흐리게 두어 눈이 먼저 거른다. */
.ak-dead{opacity:.55}
.ak-exp td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.ak-empty{padding:30px 10px;text-align:center;color:var(--slate-2);font-size:12.5px}

.ak-loghead{display:flex;align-items:center;gap:8px;margin:16px 0 7px;
  font-size:12.5px;font-weight:700;color:var(--ink)}
.ak-loghead .ak-b{margin-left:auto}
.ak-ev{display:inline-block;padding:1px 7px;border-radius:var(--r-sm);
  font-size:10.5px;font-weight:700;background:var(--soft);color:var(--slate)}
.ak-ev-ISSUE,.ak-ev-RESUME{background:var(--green-050);color:var(--green)}
.ak-ev-PAUSE,.ak-ev-ROTATE{background:var(--gold-050);color:var(--gold)}
.ak-ev-REVOKE,.ak-ev-DENY{background:var(--red-050);color:var(--red)}

/* 발급 폼 */
.ak-form{width:min(520px,100%)}
.ak-fields{display:flex;flex-direction:column;gap:11px}
.ak-fields label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--ink)}
.ak-fields small{font-weight:400;font-size:11px;color:var(--slate-2);line-height:1.5}
.ak-req{font-size:10.5px;font-weight:700;color:var(--gold)}
.ak-two{display:flex;gap:11px}
.ak-two > label{flex:1 1 0;min-width:0}

/*  한 번만 보이는 원문 — 눈에 띄게, 그리고 통째로 선택되게. */
.ak-secret{width:min(560px,100%)}
.ak-keybox{margin:10px 0;padding:12px;border:1px solid var(--gold);border-radius:var(--r);
  background:var(--gold-050)}
.ak-keybox code{display:block;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
  line-height:1.6;color:var(--ink);word-break:break-all;user-select:all}

@media (max-width:860px){
  .ak-two{flex-direction:column}
  .ak-b{height:32px}

  /*  10칸짜리 표를 390px 에 밀어 넣으면 칸마다 글자가 한 자씩 세로로 떨어진다.
      좁은 화면에서는 표를 접어 한 건을 카드 하나로 세운다 — 칸 이름은 data-l 로 앞에 붙인다.
      (자바스크립트를 두 벌 쓰지 않으려고 같은 마크업을 CSS 로만 다시 세운다) */
  .ak-grid,.ak-grid thead,.ak-grid tbody,.ak-grid tr,.ak-grid td{display:block;width:auto}
  .ak-grid thead{display:none}
  .ak-grid tr{margin-bottom:9px;padding:11px 12px;border:1px solid var(--line);
    border-radius:var(--r);background:var(--panel)}
  .ak-grid td{display:flex;gap:9px;align-items:flex-start;padding:3px 0;border:0}
  .ak-grid td::before{content:attr(data-l);flex:0 0 68px;font-size:11px;font-weight:700;
    color:var(--slate-2);line-height:1.6}
  .ak-grid td[data-l="연동"]{padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid var(--line)}
  .ak-grid .ak-act{display:flex;flex-wrap:wrap;gap:5px;padding-top:9px;text-align:left}
  .ak-grid .ak-act::before{content:"";display:none}
  .ak-grid .ak-b{flex:1 1 auto;margin-left:0}
  .ak-grid .ak-empty{display:block;text-align:center}
  .ak-grid .ak-empty::before{display:none}
  /*  카드 안에서는 칸을 칠하는 대신 카드 왼쪽에 선을 둔다. */
  .ak-exp{box-shadow:inset 3px 0 0 var(--gold)}
  .ak-exp td:first-child{box-shadow:none}
  .ak-grid .gscroll,.ak-grid{min-width:0}
}

/*══════════════════════════════════════════════════════════════════════════════
  도움말 — 대화형 말풍선
   ★액자(iframe)와 그 둘레에는 배경을 한 톨도 주지 않는다. 캐릭터와 말풍선만 떠 보여야 한다.
     (어두운 박스의 진짜 원인은 위젯 문서의 color-scheme 이라 help.js 가 띄운 뒤 풀어 준다)
══════════════════════════════════════════════════════════════════════════════*/
.hp-dock,.hp-chars,.hp-stage,.hp-frame{background:transparent;border:0;box-shadow:none}

/* 대화 패널 속 — 두 겹을 깔고 보이고 감춘다 */
.hp-chatwrap,.hp-faqwrap{min-height:0}
.hp-chatwrap{display:flex;flex-direction:column;height:100%}
.hp-pop-b:has(.hp-chatwrap:not([hidden])){display:flex;flex-direction:column;padding:0}

/* 대화 줄 */
.hp-log{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 14px;
  display:flex;flex-direction:column;gap:9px}
.hp-say{display:flex;max-width:100%}
.hp-say-me{justify-content:flex-end}
.hp-said{max-width:85%;padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:1.6;
  word-break:break-word}
.hp-say-bot .hp-said{background:var(--soft);color:var(--ink);border-top-left-radius:4px}
.hp-say-me  .hp-said{background:var(--gold-050);color:var(--ink);border-top-right-radius:4px}
.hp-said-t{margin:0;font-weight:700}
.hp-said-b{margin-top:5px;color:var(--slate)}
.hp-more{margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.hp-more .hp-q{margin-top:5px;background:var(--panel)}

/*  기다리는 동안 — 멈춘 것인지 생각 중인지 알 수 없으면 사람은 또 누른다. */
.hp-wait{display:flex;gap:4px;align-items:center;padding:11px}
.hp-wait i{width:6px;height:6px;border-radius:50%;background:var(--slate-2);
  animation:hpDot 1.1s ease-in-out infinite}
.hp-wait i:nth-child(2){animation-delay:.18s}
.hp-wait i:nth-child(3){animation-delay:.36s}
@keyframes hpDot{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}

/* 입력줄 */
.hp-ask{flex:0 0 auto;display:flex;gap:7px;padding:9px 12px;border-top:1px solid var(--line)}
.hp-ask-i{flex:1 1 auto;min-width:0;height:34px;padding:0 11px;font-size:12.5px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink)}
.hp-ask-i:focus{outline:0;border-color:var(--gold)}
.hp-ask-s{flex:0 0 auto;width:34px;height:34px;cursor:pointer;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--gold);color:#1a1a1a}
.hp-ask-s svg{width:17px;height:17px;fill:currentColor}
.hp-ask-s:hover{filter:brightness(1.08)}

/* 바닥 단추 두 개 */
.hp-pop-f{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.hp-pop-f .hp-manage + .hp-manage{padding-left:10px;border-left:1px solid var(--line)}

/* 도움말 화면(모바일 포함)의 대화 상자 */
.hp-chatbox{display:flex;flex-direction:column;height:min(420px,52vh);margin-bottom:12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.hp-findbar{margin-bottom:10px}

@media (max-width:860px){
  .hp-chatbox{height:min(380px,48vh)}
  .hp-said{max-width:90%}
}