/* ============================================================
   LinkBiz Sentinel — 앱 셸 + Sentinel 전용 컴포넌트 레이어
   로드 순서: colors_and_type.css → linkbiz.css → fonts/*.css → 이 파일
   (styles.css 대신 이 4개를 web/src/theme/global.css 에서 @import)

   원칙
   - 색·간격·폰트는 --lb-* 토큰만 사용 (임의 hex 금지)
   - 컴포넌트 클래스는 LinkBiz 어휘 그대로: Button / Textinput / Divselect /
     Label-color / signal-color / stitArea / com-searchbox / lb-grid / status-card /
     writing-list / Tabs
   - 이 파일은 (1) 앱 셸(work-layout.css 실측값) (2) Sentinel에만 있는 화면
     (Drive 트리·타일·상세 패널, 모달, 컨텍스트 메뉴) (3) 다크 리매핑 만 담는다
   ============================================================ */

/* ---------- 0. 앱 전역 ---------- */
html,body,#root{ height:100%; }
body{ margin:0; background:var(--lb-bg); font-family:var(--lb-font-sans); font-size:var(--lb-fs-base);
  color:var(--lb-fg4); letter-spacing:var(--lb-tracking); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--lb-info); }
button{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; color:var(--lb-fg2); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#d8d6e0; border-radius:8px; border:2px solid var(--lb-bg); }

/* ---------- 1. 레이아웃 (3단: 앱바 65 / LNB 300 / 툴바 65 + 콘텐츠) ---------- */
.linkbiz-layout{ display:flex; flex-direction:column; height:100%; min-width:1280px; overflow:hidden; }
.app-container{ flex:1; display:flex; min-height:0; }

/* 1-1 상단 앱바 (다크) */
.linkbiz-app{ display:flex; align-items:center; height:65px; background:var(--lb-app-bar); color:#fff; flex:none; }
.toggle-app{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(255,255,255,.1); cursor:pointer; flex:none; }
.toggle-app .bars{ width:24px; height:2px; background:rgba(255,255,255,.7); position:relative; }
.toggle-app .bars:before,.toggle-app .bars:after{ content:""; position:absolute; left:0; width:24px; height:2px; background:rgba(255,255,255,.7); }
.toggle-app .bars:before{ top:-7px; } .toggle-app .bars:after{ top:7px; }
.app-main{ margin-left:15px; height:100%; min-width:0; }
.main-list-ty2{ display:flex; align-items:center; height:100%; gap:10px; list-style:none; margin:0; padding:0; }
.main-list-ty2 .app-btn{ display:flex; flex-direction:column; align-items:center; cursor:pointer; padding:0 2px; position:relative; }
.main-list-ty2 .app-btn .app{ width:48px; height:30px; display:flex; align-items:center; justify-content:center; }
.main-list-ty2 .app-btn .app i{ font-size:26px; color:rgba(255,255,255,.8); transition:color .2s ease; }
.main-list-ty2 .app-btn .app-txt{ color:rgba(255,255,255,.8); letter-spacing:-0.6px; font-size:13px; line-height:1.1; white-space:nowrap; }
.main-list-ty2 .app-btn:hover .app i,.main-list-ty2 .app-btn:hover .app-txt,
.main-list-ty2 li.active .app-btn .app i,.main-list-ty2 li.active .app-btn .app-txt{ color:#fff; }
.main-list-ty2 li.active .app-btn:after{ content:""; position:absolute; bottom:-7px; left:8px; right:8px; height:3px; background:#fff; border-radius:2px; }
.toolbar-util{ display:flex; align-items:center; margin-left:auto; padding-right:30px; height:100%; }
.toolbar-util .nav-list{ display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.toolbar-util .nav-push{ display:flex; align-items:center; justify-content:center; position:relative; min-width:52px; height:60px; background:none; border:0; cursor:pointer; }
.toolbar-util .nav-push .nav-ico{ font-size:26px; color:rgba(255,255,255,.8); transition:color .2s ease; }
.toolbar-util .nav-push:hover .nav-ico{ color:#fff; }
.toolbar-util .nav-push .badge{ position:absolute; left:27px; top:8px; min-width:16px; height:16px; padding:0 4px; background:var(--lb-color15); color:#fff; font-size:11px; line-height:16px; border-radius:1000px; text-align:center; font-family:'pps','Roboto',sans-serif; }
.toolbar-util .nav-list.core{ position:relative; padding:0 6px; }
.toolbar-util .nav-list.core:before{ content:""; position:absolute; top:6px; bottom:6px; left:0; right:0; background:#3d3752; border-radius:200px; }
.toolbar-util .nav-list.core .nav-push .nav-ico{ color:#fff; z-index:1; }
/* Sentinel: 앱바 우측 환경 태그(FR-INF04 빌드 식별) */
.toolbar-util .env-tag{ font-family:'pps','Roboto',monospace; font-size:11px; color:rgba(255,255,255,.55); margin-right:14px; user-select:text; }
.toolbar-util .env-tag.dev{ color:var(--lb-color21); font-weight:600; }

/* 1-2 좌측 LNB (흰색 300px) */
.app-lnb{ width:300px; min-width:300px; background:var(--lb-surface); box-shadow:var(--lb-shadow-lnb); z-index:3; display:flex; flex-direction:column; transition:width .2s ease,min-width .2s ease; }
/* Sentinel: LNB 접기/펼치기(햄버거 토글) — handoff 원안엔 접힘 상태가 없어 새로 정의한다 */
.linkbiz-layout.lnb-collapsed .app-lnb{ width:0; min-width:0; overflow:hidden; box-shadow:none; }
.lnb-wrap{ display:flex; flex-direction:column; height:100%; min-height:0; }
.lnb-wrap .biz-logo{ display:flex; align-items:center; justify-content:center; height:84px; margin:16px 0 8px; }
.lnb-wrap .biz-logo img{ max-width:180px; max-height:42px; }
.user-account{ display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.user-account .account-box{ display:flex; align-items:center; width:220px; }
.user-account .account-img{ width:52px; height:52px; min-width:52px; border-radius:50%; overflow:hidden; background:#eaeaea; display:flex; align-items:center; justify-content:center; color:var(--lb-info); font-weight:600; font-size:18px; }
.user-account .account-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.user-account .account-info{ display:flex; flex-direction:column; margin-left:15px; min-width:0; }
.user-account .account-info .name{ color:var(--lb-fg2); font-size:16px; font-weight:300; letter-spacing:-0.8px; }
.user-account .account-info .sum{ margin-top:5px; color:#999; font-size:14px; letter-spacing:-0.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-account .account-more{ margin-left:auto; color:#999; font-size:22px; cursor:pointer; }
.app-nav{ flex:1; overflow:auto; min-height:0; }
.app-nav-tit{ display:flex; align-items:center; padding:0 35px 0 50px; margin:18px 0 10px; }
.app-nav-tit:first-child{ margin-top:0; }
/* 🔵 원래 font-weight:300(Thin)·letter-spacing:-0.8px 조합이 이 굵기의 한글 폰트에서
   획이 고르지 않게 그려져 "깨진" 것처럼 보였다(2026-09 실측 — 4배 확대로 확인). 두껍게,
   자간은 좁히지 않는다. */
.app-nav-tit .tit.parent-tit{ position:relative; padding-left:14px; color:#111; font-size:16px; font-weight:600; letter-spacing:-0.3px; }
.app-nav-tit .tit.parent-tit:before{ content:""; position:absolute; left:0; top:50%; width:7px; height:15px; margin-top:-7.5px; background:var(--lb-info); border-radius:2px; }
.com-lnb{ list-style:none; margin:0; padding:0; }
.com-lnb > li > a{ display:flex; align-items:center; gap:10px; position:relative; padding:10px 15px 10px 50px; cursor:pointer; }
.com-lnb > li > a > i{ font-size:18px; color:var(--lb-fg7); }
.com-lnb > li > a > span{ font-size:16px; letter-spacing:-1px; color:var(--lb-fg2); }
.com-lnb > li > a:before{ content:""; position:absolute; left:0; top:0; width:5px; height:0; background:var(--lb-info); transition:height .1s ease; }
.com-lnb > li:hover > a:before,.com-lnb > li.active > a:before{ height:100%; }
.com-lnb > li:hover > a > span,.com-lnb > li:hover > a > i{ color:var(--lb-info); }
.com-lnb > li.active > a > span{ color:var(--lb-info); font-weight:600; }
.com-lnb > li.active > a > i{ color:var(--lb-info); }
.com-lnb > li > a .numb{ font-size:12px; margin-left:auto; background:#efefef; color:var(--lb-info); min-width:20px; height:20px; line-height:20px; padding:0 5px; text-align:center; border-radius:5px; font-family:'pps','Roboto',sans-serif; }
.app-copyright{ padding:7px 0; background:var(--lb-bg-gray3); text-align:center; }
.app-copyright .copyright{ font-size:12px; color:#aaa; }

/* 1-3 콘텐츠 영역 + 툴바(페이지 타이틀·브레드크럼) */
.app-contents{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--lb-bg); }
.linkbiz-toolbar{ display:flex; align-items:center; min-height:65px; background:var(--lb-bg); flex:none; }
.page-tit-wrap{ display:flex; align-items:center; width:100%; height:70px; padding:0 40px; }
.page-tit{ display:flex; width:100%; justify-content:space-between; align-items:center; }
.page-tit .current-tit{ display:flex; flex-direction:column; }
/* 🔵 원래 보라(--lb-info)·font-weight:300·letter-spacing:-0.5px 조합이 이 굵기의 한글
   폰트에서 획이 고르지 않게 그려져 "깨진" 것처럼 보였다(2026-09 실측 — 4배 확대로 확인).
   제목(h3, 아래)과 같은 계열의 무채색으로 톤을 맞추고 두께를 올렸다. */
.page-tit .parent-tit{ color:var(--lb-fg6); font-size:13px; font-weight:normal; letter-spacing:0; margin-bottom:2px; }
.page-tit .current-tit h3{ margin:0; color:var(--lb-fg2); font-size:24px; font-weight:600; letter-spacing:-1px; }
.page-tit .header-btn-area{ display:flex; align-items:center; gap:10px; }
.page-tit .header-btn{ cursor:pointer; color:#a5a5a5; font-size:20px; display:flex; background:none; border:0; padding:0; }
.page-tit .header-btn:hover{ color:var(--lb-info); }
.content-wrap{ flex:1; min-height:0; overflow:auto; }
.dev-content{ padding:6px 40px 40px; }

/* ---------- 2. 공통 보조 (linkbiz.css 확장) ---------- */
/* 선택 칸 화살표(삼성EnA_개선 `T-073`·`T-099`) — 원본 `divselect.svg` 는 viewBox(36.9×38) 안에
   화살표가 작게 들어 있어 10×6 칸에 넣으면 몇 px 로 줄었다. 화살표 부분만 잘라 마스크로 쓰고
   색은 `currentColor` 로 받는다 — 다크에서도 글자와 같은 색이 된다. 원본 규칙은 그대로 두고 덮는다(P-1). */
.Divselect:after{
  width:12px; height:7px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.9 14.9 16.2 9'%3E%3Cpath d='M12,23.9c-0.3,0-0.5-0.1-0.7-0.3l-7.1-7.1c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6.3,6.4l6.3-6.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-7.1,7.1C12.5,23.8,12.3,23.9,12,23.9z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.9 14.9 16.2 9'%3E%3Cpath d='M12,23.9c-0.3,0-0.5-0.1-0.7-0.3l-7.1-7.1c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6.3,6.4l6.3-6.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-7.1,7.1C12.5,23.8,12.3,23.9,12,23.9z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.stitArea{ min-height:44px; }
/* 버튼 줄(`Toolbar`) 바로 아래 그리드가 붙어 보이던 문제(관리자 프로젝트 관리 등) — 사이에 안내 문구가
   끼면 그 문구가 여백을 가지므로 **바로 붙을 때만** 띄운다. */
.stitArea + .lb-grid{ margin-top:10px; }
.stitArea.mgt10{ margin-top:10px; } .stitArea.mgt20{ margin-top:20px; } .stitArea.mgt30{ margin-top:30px; }
.stitL{ display:flex; align-items:center; gap:10px; }
.stitL .count{ color:var(--lb-info); font-family:'pps','Roboto',sans-serif; }
.mgt05{margin-top:5px}.mgt10{margin-top:10px}.mgt15{margin-top:15px}.mgt20{margin-top:20px}.mgt30{margin-top:30px}
.gap08{gap:8px}.gap12{gap:12px}
.text-muted{ color:var(--lb-fg6); }
.text-caption{ font-size:13px; color:var(--lb-fg6); letter-spacing:-0.2px; }
.notice-line{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--lb-fg5); margin:6px 0 10px; }
.notice-line i{ color:var(--lb-info); font-size:16px; }
/* 🔴 **`notice-line.warn` 은 handoff 가 참조만 하고 정의가 없었다**(§4 Agent UI 매핑 · P2 실측).
   경고 박스는 관리자 화면(Agent 초기 계정 고지)과 Agent 로컬 UI 양쪽이 쓴다. */
.notice-line.warn,.notice-line.danger{ align-items:flex-start; padding:10px 12px; margin:8px 0;
  border-radius:var(--lb-radius); color:var(--lb-fg3); line-height:1.55; }
.notice-line.warn{ background:color-mix(in srgb, var(--lb-color21) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--lb-color21) 42%, transparent); }
.notice-line.warn i{ color:var(--lb-color21); }
.notice-line.danger{ background:color-mix(in srgb, var(--lb-color01) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--lb-color01) 38%, transparent); }
.notice-line.danger i{ color:var(--lb-color01); }
.notice-line p{ margin:0; }
.lb-grid thead th.sortable{ cursor:pointer; user-select:none; }
.lb-grid thead th .sort{ margin-left:4px; font-size:12px; color:var(--lb-fg7); }
.lb-grid tbody tr.clickable{ cursor:pointer; }
.lb-grid tbody tr.selected td{ border-bottom-color:#e1d7ff; }
.lb-grid .empty{ padding:36px; text-align:center; color:var(--lb-fg6); font-size:14px; }
.lb-grid td .Groupbutton{ gap:6px; }
.load-more{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 0 4px; }
.load-more .total{ font-size:13px; color:var(--lb-fg6); }
.load-more .total b{ color:var(--lb-info); font-family:'pps','Roboto',sans-serif; }

/* 폼(writing-list) */
.writing-list{ background:var(--lb-surface); border:1px solid var(--lb-line-softer); border-radius:var(--lb-radius); overflow:hidden; }
.writing-row{ display:flex; border-bottom:1px solid var(--lb-line-softer); }
.writing-row:last-child{ border-bottom:0; }
.writing-row .writing-tit{ width:160px; min-width:160px; background:var(--lb-bg-gray5); padding:14px 18px; font-size:14px; font-weight:bold; color:var(--lb-fg3); display:flex; align-items:center; gap:4px; border-right:1px solid var(--lb-line-softer); }
.writing-row .writing-cont{ flex:1; padding:10px 18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.writing-row .writing-cont .fld-error{ width:100%; font-size:12px; color:var(--lb-color01); }
/* 입력칸 아래 안내 문구 — `fld-error` 와 같은 자리, 색만 보조 글자색 */
.writing-row .writing-cont .fld-hint{ width:100%; font-size:11px; line-height:1.6; color:var(--lb-fg6); }
.writing-row.has-error .Textinput{ border-color:var(--lb-color01); }
.fld .req,.require{ color:var(--lb-color01); }

/* 모달 (Modal.tsx ↔ .modal-bg 는 testscript 계약 — 이름 유지) */
.modal-bg{ position:fixed; inset:0; background:rgba(28,23,54,.42); display:grid; place-items:center; z-index:100; }
.modal-bg .lb-modal{ width:460px; max-height:85vh; overflow:auto; background:var(--lb-surface); border-radius:var(--lb-radius-xl); box-shadow:var(--lb-shadow-pop); padding:24px 28px 26px; }
/* 🔴 긴 제목(파일명이 들어가는 개정·삭제 팝업)은 줄을 바꾸고 닫기(x)는 첫 줄 오른쪽에 둔다(`T-093`).
   닫기를 flex-start 로 올리고 제목만 align-self:center — 한 줄일 때는 종전 모양 그대로다.
   ⚠️ `min-width:0` 이 없으면 제목이 줄어들지 않고 x 를 밀어낸다(flex 자식의 자동 최소 폭). */
.lb-modal .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.lb-modal .modal-head h3{ align-self:center; min-width:0; overflow-wrap:anywhere; font-size:18px; font-weight:bold; color:var(--lb-fg2); letter-spacing:-0.8px; }
.lb-modal .modal-head .Button{ flex-shrink:0; }
.lb-modal .modal-foot{ display:flex; justify-content:flex-end; gap:6px; margin-top:20px; }
.lb-modal .writing-row .writing-tit{ width:120px; min-width:120px; }
/* Sentinel: 모달 안 입력·셀렉트는 칸을 꽉 채운다 — 폭이 다른 여러 필드가 세로로 쌓일 때
   입력창 길이가 제각각이면 정렬이 흐트러져 보인다(디자인 개편 P1 뒤 실측). 2열 배치는
   라벨 고정폭(120px) 때문에 좁은 모달에서 쉽게 넘쳐 스크롤·겹침을 만들어(2026-09 실측)
   더 이상 쓰지 않는다 — 필드는 항상 1열로 쌓고 폭으로 여유를 준다. */
.lb-modal .writing-cont .Textinput{ width:100%; }
.lb-modal .writing-cont > .Divselect{ width:100%; }
/* 선택지가 짧은 셀렉트(사용/미사용 등)는 꽉 채우면 쓸데없이 커 보인다 — 호출부가 고정폭
   유틸을 주면 그 폭을 따른다(위 100% 규칙이 유틸보다 구체적이라 여기서 되살린다). */
.lb-modal .writing-cont > .Divselect.wid120{ width:120px; }
.lb-modal .writing-cont > .Divselect.wid160{ width:160px; }
.lb-modal .writing-cont > .Divselect.wid200{ width:200px; }
/* 확인 다이얼로그(alert-*.svg 글리프 사용) */
.lb-confirm{ width:400px; text-align:center; padding:34px 30px 26px; }
.lb-confirm .glyph{ display:block; width:56px; height:56px; margin:0 auto 14px; background:var(--lb-fg1);
  -webkit-mask:var(--glyph) no-repeat center/contain; mask:var(--glyph) no-repeat center/contain; }
.lb-confirm .glyph.danger{ background:var(--lb-color01); }
.lb-confirm .glyph[data-glyph="alert-x-mark"]{ --glyph:url("assets/icons/alert-x-mark.svg"); }
.lb-confirm .glyph[data-glyph="alert-warning"]{ --glyph:url("assets/icons/alert-warning.svg"); }
.lb-confirm .glyph[data-glyph="alert-info"]{ --glyph:url("assets/icons/alert-info.svg"); }
.lb-confirm .msg{ font-size:15px; color:var(--lb-fg3); line-height:1.55; }
.lb-confirm .modal-foot{ justify-content:center; }
/* ── Sentinel 보강 (디자인 개편 P1 · 2026-09-15) ───────────────────────────
   🔵 handoff 원안에 없던 것만 더한다. 화면 코드가 인라인 스타일로 들고 있던 동작을
      CSS 로 옮긴 것이며, 없으면 **조용히 기능이 사라지는** 것들이다. */
/* 🔴 여러 줄 확인 문구가 한 줄로 뭉개지지 않게. `confirmStore` 의 메시지에 `
` 이 들어간다
   (예: "파일 3개를 지웁니다.
되돌릴 수 없습니다."). 종전에는 인라인 `pre-line` 이 했다. */
.lb-confirm .msg{ white-space:pre-line; }
.lb-confirm h3{ font-size:17px; font-weight:bold; color:var(--lb-fg2); margin:0 0 6px; letter-spacing:-0.5px; }
/* Drawer 제목 — `.dh` 는 Drive 상세용이라 제목 칸 규칙이 없었다(닫기 버튼만 있었다). */
/* 🔴 **`status-card` 는 handoff 에 정의가 없었다** — 다크 블록(§5)이 이름을 참조하는데
   본문 규칙이 없어 KPI 카드가 무늬 없는 판으로 떨어진다(2026-09-15 P2 실측).
   CHECKLIST 1번(대시보드)이 요구하는 클래스라 여기서 정의한다.
   🔵 색은 `colorNN` 한 글자로 정한다 — 카드에 `color05` 를 붙이면 왼쪽 띠와 아이콘 칩이
      그 색이 된다. 화면 코드가 hex 를 들고 있을 이유가 없어진다(P-2). */
.status-card{ --sc:var(--lb-fg7); display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--lb-surface); border:1px solid var(--lb-line-softer); border-left:4px solid var(--sc);
  border-radius:var(--lb-radius); }
.status-card .ico{ width:42px; height:42px; min-width:42px; border-radius:10px; display:grid; place-items:center;
  font-size:20px; color:var(--sc); background:color-mix(in srgb, var(--sc) 14%, transparent); }
.status-card .val{ font-size:26px; font-weight:bold; color:var(--lb-fg1); line-height:1.1;
  font-family:'pps','Roboto',sans-serif; }
.status-card .lbl{ font-size:13px; color:var(--lb-fg6); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-card .sub{ font-size:11.5px; color:var(--lb-fg7); margin-top:1px; }
.status-card .txt{ min-width:0; }
.status-card.color01{ --sc:var(--lb-color01); } .status-card.color02{ --sc:var(--lb-color02); } .status-card.color03{ --sc:var(--lb-color03); } .status-card.color04{ --sc:var(--lb-color04); } .status-card.color05{ --sc:var(--lb-color05); } .status-card.color06{ --sc:var(--lb-color06); } .status-card.color07{ --sc:var(--lb-color07); }
.status-card.color08{ --sc:var(--lb-color08); } .status-card.color09{ --sc:var(--lb-color09); } .status-card.color10{ --sc:var(--lb-color10); } .status-card.color11{ --sc:var(--lb-color11); } .status-card.color12{ --sc:var(--lb-color12); } .status-card.color13{ --sc:var(--lb-color13); } .status-card.color14{ --sc:var(--lb-color14); }
.status-card.color15{ --sc:var(--lb-color15); } .status-card.color16{ --sc:var(--lb-color16); } .status-card.color17{ --sc:var(--lb-color17); } .status-card.color18{ --sc:var(--lb-color18); } .status-card.color19{ --sc:var(--lb-color19); } .status-card.color20{ --sc:var(--lb-color20); } .status-card.color21{ --sc:var(--lb-color21); }
.status-card.color22{ --sc:var(--lb-color22); } .status-card.color23{ --sc:var(--lb-color23); } .status-card.color24{ --sc:var(--lb-color24); } .status-card.color25{ --sc:var(--lb-color25); } .status-card.color26{ --sc:var(--lb-color26); } .status-card.color27{ --sc:var(--lb-color27); } .status-card.color28{ --sc:var(--lb-color28); }

/* 🔴 시크릿 1회 노출 모달 — `modal-bg` 를 **일부러 쓰지 않는다.** 그 클래스는 배경 클릭으로
   닫히는 모달의 것이고, 이 화면은 값을 한 번만 보여 주므로 실수로 닫으면 값을 영영 잃는다.
   (닫힘 동작 자체는 JS 가 쥔다 — 여기서는 겉모습만 맞춘다.) */
.secret-bg{ position:fixed; inset:0; background:rgba(28,23,54,.55); display:grid; place-items:center; }
.secret-modal{ overflow:auto; border-top:4px solid var(--lb-red1); }

.detail .dh .dh-title{ font-size:16px; font-weight:bold; color:var(--lb-fg2); letter-spacing:-0.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 🟡 한시 — `Field` 가 `.writing-list` 밖(화면 본문)에 홀로 쓰이는 곳이 21군데다.
   P2 가 그 화면들을 `writing-list` 로 감싸면 이 규칙은 지운다. */
.dev-content > .writing-row:first-of-type{ border-top:1px solid var(--lb-line-softer); }

/* 컨텍스트 메뉴 */
.ctx-menu{ position:fixed; min-width:180px; background:var(--lb-surface); border:1px solid var(--lb-line-softer); border-radius:var(--lb-radius-lg); box-shadow:var(--lb-shadow-layer); padding:6px; z-index:120; }
.ctx-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; background:none; border:0; border-radius:8px; font-size:14px; color:var(--lb-fg3); cursor:pointer; text-align:left; }
.ctx-menu button i{ font-size:17px; color:var(--lb-fg6); }
.ctx-menu button:hover{ background:var(--lb-bg-gray3); color:var(--lb-info); }
.ctx-menu button:hover i{ color:var(--lb-info); }
.ctx-menu button[disabled]{ color:var(--lb-fg7); cursor:not-allowed; background:none; }
.ctx-menu .sep{ height:1px; background:var(--lb-line-softer); margin:4px 6px; }

/* ---------- 3. Drive (사용자 웹) ---------- */
/* LNB 내부 — 드라이브 루트 + 폴더 트리 (com-lnb 대체) */
.drive-root{ display:flex; align-items:center; padding:6px 24px 6px 30px; }
.drive-root .tit{ display:flex; align-items:center; gap:6px; font-size:16px; font-weight:bold; color:var(--lb-fg1); }
.drive-root .tit i{ color:var(--lb-info); font-size:16px; }
.drive-root .find{ margin-left:auto; color:#a8a8a8; font-size:18px; cursor:pointer; background:none; border:0; }
.drive-root .find:hover{ color:var(--lb-info); }
.drive-space{ display:flex; gap:4px; padding:4px 24px 10px 30px; }
.drive-space .Button.small{ flex:1; }
.tree{ flex:1; overflow:auto; padding:6px 14px 20px; min-height:0; }
.tree ul{ list-style:none; margin:0; padding:0; }
.tnode{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:15px; color:#2c2c2c; letter-spacing:-0.5px; }
.tnode:hover{ background:#f5f4fb; }
.tnode.active{ color:var(--lb-info); font-weight:600; background:var(--lb-color25); }
.tnode .chev{ font-size:15px; color:#b3b3b3; width:14px; flex:none; }
.tnode .chev[role="button"]{ cursor:pointer; }
.tnode .chev[role="button"]:hover{ color:var(--lb-info); }
.tnode .fi{ font-size:19px; flex:none; }
.tnode .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tnode .Label-color.small{ height:18px; font-size:11px; padding:0 7px; }
.tnode.group{ font-weight:600; color:var(--lb-fg1); }
.fi-orange{ color:#f5a623; } .fi-purple{ color:#7a5cf0; } .fi-dark{ color:var(--lb-app-bar); } .fi-green{ color:#27b07a; } .fi-trash{ color:#9aa0aa; } .fi-blue{ color:var(--lb-color11); }
.lvl1{ padding-left:8px; } .lvl2{ padding-left:30px; } .lvl3{ padding-left:52px; } .lvl4{ padding-left:74px; }
.tree-note{ margin:6px 10px 0; font-size:12px; color:var(--lb-fg6); }

/* 콘텐츠 — 드라이브 툴바 · 경로 · 타일 */
.drive-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.drive-toolbar .spacer{ flex:1; }
.icon-btn{ width:40px; height:40px; border-radius:var(--lb-radius); border:1px solid var(--lb-line); background:var(--lb-surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#555; transition:all .3s; }
.icon-btn:hover{ background:var(--lb-bg-gray5); } .icon-btn i{ font-size:19px; }
.icon-btn.active{ background:var(--lb-info); border-color:var(--lb-info); color:#fff; }
.icon-btn[disabled]{ color:#aaa; background:var(--lb-bg-gray3); cursor:not-allowed; }
.drive-search{ position:relative; display:flex; align-items:center; }
.drive-search .Textinput{ padding-right:38px; }
.drive-search i{ position:absolute; right:12px; color:var(--lb-fg7); font-size:18px; pointer-events:none; }
.crumb{ display:flex; align-items:center; gap:8px; margin:18px 0 14px; padding-bottom:14px; border-bottom:1px solid var(--lb-line-soft); font-size:15px; color:#666; }
.crumb > span,.crumb b{ white-space:nowrap; }
.crumb .sep{ color:#c4c4c4; } .crumb b{ color:var(--lb-fg2); font-weight:600; }
.crumb .total{ margin-left:auto; font-size:13px; color:var(--lb-fg6); }
.crumb .total b{ color:var(--lb-info); font-family:'pps','Roboto',sans-serif; font-weight:600; }
.sel-bar{ display:flex; align-items:center; gap:8px; padding:8px 14px; margin-bottom:12px; background:var(--lb-color25); border-radius:var(--lb-radius); font-size:14px; color:var(--lb-fg3); }
.sel-bar b{ color:var(--lb-info); font-family:'pps','Roboto',sans-serif; }
.sel-bar .Groupbutton{ margin-left:auto; }

.filegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:16px; }
/* 파일 상세 드로어가 열리면 Drive 본문이 드로어 폭만큼 비켜선다(T-077). 드로어 폭은 min(560px, 92vw)
   (FileDetailModal 의 Drawer width) — 본문 오른쪽 여백 40px(.dev-content)을 빼고 간격 16px 을 더한다.
   좁은 화면에서는 본문이 너무 좁아지므로 종전처럼 덮는다. */
@media (min-width:1200px){
  .drive-main.with-drawer{ margin-right:calc(min(560px, 92vw) - 24px); }
}
.fcard{ position:relative; border:1px solid #ededf1; border-radius:12px; overflow:hidden; background:var(--lb-surface); cursor:pointer; transition:box-shadow .18s,border-color .18s; outline:none; }
.fcard:hover{ box-shadow:0 6px 18px rgba(20,18,48,.10); border-color:#e0ddee; }
.fcard.sel{ border-color:#7a5cf0; box-shadow:0 0 0 2px rgba(86,41,238,.18); background:#f8f6ff; }
.fcard.anchored{ outline:2px dashed var(--lb-color21); outline-offset:-2px; }
.fcard .chk{ position:absolute; top:10px; left:10px; width:22px; height:22px; border-radius:6px; border:1px solid #cbcbcb; background:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.fcard:hover .chk,.fcard.sel .chk{ opacity:1; }
/* 🔴 `T-015`(결과서 `U21`) — 선택 체크가 **안 보이던 것.** 원본 아이콘(`alert-check-mark.svg`)은
 *   fill 이 없어 기본 검정으로 그려지고, 테두리 원까지 12px 에 들어가 보라 위에서 거의 사라졌다.
 *   ⚠️ 원본 SVG·`linkbiz.css` 는 고치지 않는다(P-1) — 글리프(`ri-check-line`)를 흰색으로 얹는다.
 *   ⚠️ 흰색은 다크에서도 그대로다 — 배경이 항상 `--lb-info` 라 반전할 이유가 없다. */
:root{ --lb-on-info:#fff; }
.fcard.sel .chk{ background:var(--lb-info); border-color:var(--lb-info); }
.fcard .chk i{ display:none; font-size:16px; line-height:1; color:var(--lb-on-info); }
.fcard.sel .chk i{ display:block; }
.fcard .lock{ position:absolute; top:10px; right:10px; display:flex; gap:4px; font-size:16px; color:var(--lb-color21); }
/* 잠금(amber)·개정(blue)은 다른 축 — 표 보기 배지(`lockState.ts`)와 같은 색으로 칠한다 */
.fcard .lock .tone-amber{ color:var(--lb-color21); }
.fcard .lock .tone-blue{ color:var(--lb-color11); }
.thumb{ height:128px; display:flex; align-items:center; justify-content:center; background:#f4f4f7; }
.fcard.folder .thumb{ background:#fff; height:112px; }
.fcard.folder .thumb i{ font-size:60px; }
.finfo{ padding:12px 14px 13px; }
.finfo .fn{ font-size:14px; color:var(--lb-fg2); font-weight:500; letter-spacing:-0.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.finfo .fd{ font-size:12px; color:#9a9a9a; margin-top:6px; font-family:'pps','Roboto',sans-serif; }
.finfo .fd.fpath{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 업무 조회 결과의 폴더 경로(T-080) — 긴 경로는 말줄임, 전체는 툴팁 */
/* 목록 위 폴더 경로(T-081) — 상위 폴더명은 눌러서 이동한다. 현재 폴더와 이동할 수 없는 마디는 글자로 둔다. */
.drive-crumbs{ font-size:13px; min-width:0; overflow-wrap:anywhere; }
.drive-crumbs .sep{ margin:0 2px; }
.drive-crumbs .crumb-link{ background:none; border:0; padding:0; font:inherit; color:var(--lb-info); cursor:pointer; }
.drive-crumbs .crumb-link:hover, .drive-crumbs .crumb-link:focus-visible{ text-decoration:underline; }
.finfo .fo{ display:flex; align-items:center; gap:5px; font-size:12px; color:#8a8a8a; margin-top:7px; }
.finfo .fo i{ font-size:14px; color:#b3b3b3; }
.finfo .fo .Label-color.small{ margin-left:auto; }
/* 파일 타입 타일(assets/icons/doc_*.svg 가 있으면 img 로, 없으면 색 타일) */
.tile{ width:72px; height:72px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; font-size:17px; letter-spacing:.5px; box-shadow:0 4px 10px rgba(0,0,0,.12); font-family:'pps','Roboto',sans-serif; }
.tile.zip{ background:#f6a821; } .tile.hwp{ background:#2f9fe0; } .tile.xls{ background:#1f8a4c; } .tile.pdf{ background:#e2553e; }
.tile.doc{ background:#2b5fc4; } .tile.ppt{ background:#d5482b; } .tile.txt{ background:#3d3d3d; } .tile.img{ background:#7a5cf0; } .tile.etc{ background:#5b5866; }
.thumb img.doc-ico{ width:64px; height:64px; }
.thumb img.real{ width:100%; height:100%; object-fit:cover; }
.drive-dropzone{ position:relative; min-height:240px; }
.drive-dropzone.dragover:after{ content:"여기에 놓으면 이 폴더로 업로드합니다"; position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:rgba(86,41,238,.06); border:2px dashed var(--lb-info); border-radius:12px; color:var(--lb-info); font-size:15px; font-weight:600; pointer-events:none; }
.drive-empty{ padding:70px 0; text-align:center; color:var(--lb-fg7); font-size:14px; background:var(--lb-surface); border:1px dashed var(--lb-line-soft); border-radius:12px; }
.drive-empty i{ display:block; font-size:40px; margin-bottom:8px; color:#d0cde0; }

/* 우측 상세 패널 — 1620px 미만에서는 콘텐츠 위에 오버레이(콘텐츠 최소폭 확보) */
.app-container{ position:relative; }
@media (max-width:1619px){ .detail{ position:absolute; top:0; right:0; bottom:0; z-index:4; } }
.detail{ width:560px; min-width:560px; background:var(--lb-surface); border-left:1px solid #ededf1; box-shadow:-6px 0 24px rgba(20,18,48,.07); display:flex; flex-direction:column; min-height:0; }
.detail .dh{ display:flex; align-items:center; height:54px; padding:0 22px; flex:none; }
.detail .dh .close{ font-size:22px; color:#9a9a9a; cursor:pointer; background:none; border:0; margin-left:auto; }
.detail .dbody{ flex:1; overflow:auto; padding:0 28px 28px; min-height:0; }
.preview{ height:220px; border-radius:10px; background:#eef0fb; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.preview .tile{ width:110px; height:110px; font-size:26px; border-radius:22px; }
.file-row{ display:flex; align-items:baseline; gap:12px; margin:20px 2px 14px; }
.file-row .fname{ font-size:17px; color:#1f1f24; font-weight:bold; letter-spacing:-0.5px; word-break:break-all; }
.file-row .fmeta{ margin-left:auto; font-size:13px; color:#9a9a9a; font-family:'pps','Roboto',sans-serif; white-space:nowrap; }
.dl-row{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.dtabs{ display:flex; gap:26px; border-bottom:1px solid var(--lb-line-soft); }
.dtabs .t{ position:relative; padding:12px 2px; font-size:15px; color:#9a9a9a; cursor:pointer; background:none; border:0; }
.dtabs .t:hover{ color:#555; }
.dtabs .t.active{ color:#1f1f24; font-weight:bold; }
.dtabs .t.active:after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--lb-info); }
.rev-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.rev-table th{ padding:12px 10px; font-size:13px; font-weight:600; color:#444; border-bottom:2px solid #efecf7; text-align:left; }
.rev-table td{ padding:13px 10px; font-size:13.5px; color:#4a4a4a; border-bottom:1px solid #f2f2f5; }
.rev-table .num{ font-family:'pps','Roboto',sans-serif; }
.kv{ display:grid; grid-template-columns:110px 1fr; row-gap:10px; column-gap:12px; margin-top:14px; font-size:14px; }
.kv dt{ color:var(--lb-fg6); } .kv dd{ margin:0; color:var(--lb-fg3); word-break:break-all; }
/* 🔵 SHA-256 처럼 **한 글자씩 대조하는 값**은 고정폭이어야 한다 — 비례폭이면 0/O·1/l 이 붙어 보인다. */
.kv dd.mono{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12px; }

/* 🔴 식별자 칸 (UUID·코드) — `FR-TR05`(결과서 rev0.2 `A10`).
 *    표에서 **이름 옆에 ID 를 같이** 보일 때 쓴다. UUID 는 36자라 그대로 두면 칸을
 *    통째로 밀어내므로 폭을 잡고 줄인다 — 전체 값은 `title` 로 남긴다.
 *    고정폭인 이유는 위 `.kv dd.mono` 와 같다(0/O·1/l 이 붙어 보이면 대조를 못 한다). */
.id-cell{ display:inline-block; max-width:220px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  vertical-align:bottom; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12px; color:var(--lb-fg5); }

/* 🔴 카드 내부 여백 — `FR-TR20`(삼성EnA_개선 `T-012` · 결과서 `A4`).
 *
 * 원본 `.lb-card`(linkbiz.css:146)는 **배경·테두리·그림자만** 정의하고 padding 이 없다.
 * 그래서 제목이 **테두리에서 4px** 밖에 안 떨어져 "붙어 있다" 는 지적을 받았다.
 * ⚠️ 원본은 고치지 않는다(P-1) — Sentinel 소유 파일에서 **덧쓴다.**
 * ⚠️ 이미 자체 padding 을 가진 자식(표 전체를 담는 카드 등)이 이중으로 들뜨지 않도록
 *   `.lb-card > .lb-grid:only-child` 는 되돌린다 — 표는 자기 여백을 이미 갖는다. */
.lb-card{ padding:14px 16px; }
.lb-card > .lb-grid:only-child{ margin:-14px -16px; }

/* 🔴 검색 조건의 선택창이 잘리던 것 — `FR-TR21` (2026-10-14 **스크린샷 판정에서 발견**).
 *
 * 원본 `.Divselect` 는 `inline-flex` 에 최소 폭이 없다. 검색 표의 마지막 칸이 좁으면
 * 그대로 쪼그라들어 **"전체" 가 "전.." 로 잘린다**(권한 관리·Agent 관리 두 화면에서 실측).
 * ⚠️ 고객 목록(`T-0xx`)에 없던 항목이다 — **스크린샷을 눈으로 봤기 때문에** 찾았다.
 *   소스만 읽었으면 끝까지 몰랐을 부류다. */
.com-searchbox .Divselect{ min-width:132px; }

/* 전송(업로드/다운로드) 진행 */
.xfer-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--lb-line-softer); }
.xfer-row .nm{ flex:1; min-width:0; font-size:14px; color:var(--lb-fg3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xfer-row .bar{ width:180px; height:8px; background:#ececf6; border-radius:6px; overflow:hidden; }
.xfer-row .bar i{ display:block; height:100%; background:var(--lb-info); transition:width .3s; }
.xfer-row .bar i.ok{ background:var(--lb-color05); } .xfer-row .bar i.err{ background:var(--lb-color01); }
.xfer-row .pct{ width:44px; text-align:right; font-size:12px; color:var(--lb-fg6); font-family:'pps','Roboto',sans-serif; }

/* ---------- 4. 로그인 (login-layout) ---------- */
.login-layout{ height:100%; display:flex; align-items:center; justify-content:center; background:#f9fafc; min-width:0; }
.gate-login-wrap{ width:460px; }
.login-form{ background:var(--lb-surface); border-radius:var(--lb-radius-2xl); box-shadow:var(--lb-shadow-card); padding:54px 48px; }
.login-form .company_logo{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:34px; }
.login-form .company_logo img{ max-height:44px; }
.login-form .company_logo .sub{ font-size:14px; color:var(--lb-fg6); letter-spacing:-0.3px; display:flex; align-items:center; gap:6px; }
.login-form .company_logo .sub i{ color:var(--lb-info); }
.login-form fieldset{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.inputxt-login{ position:relative; display:flex; align-items:center; }
.inputxt-login label{ position:absolute; left:14px; color:#aaa; font-size:20px; display:flex; }
.inputxt-login input{ width:100%; height:50px; border:1px solid #ddd; border-radius:var(--lb-radius); padding:0 46px 0 46px; font-size:15px; font-family:var(--lb-font-sans); color:#202020; outline:none; transition:border-color .2s; background:var(--lb-surface); }
.inputxt-login input:focus{ border-color:var(--lb-info); }
.inputxt-login:hover label{ color:var(--lb-info); }
.inputxt-login .eye{ position:absolute; right:12px; background:none; border:0; color:#aaa; font-size:19px; cursor:pointer; }
.login-confirm-btn{ width:100%; height:52px; margin-top:18px; background:var(--lb-info); color:#fff; border:0; border-radius:var(--lb-radius); font-size:16px; font-family:var(--lb-font-sans); letter-spacing:-0.5px; cursor:pointer; transition:background .3s; }
.login-confirm-btn:hover{ background:var(--lb-info-hover); }
.login-confirm-btn[disabled]{ background:#b7afd4; cursor:not-allowed; }
.login-error{ margin:12px 0 0; font-size:13px; color:var(--lb-color01); display:flex; align-items:center; gap:6px; }
.login-id-save{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.login-id-save a{ font-size:14px; color:#777; cursor:pointer; }
.login-hint{ margin:16px 0 0; text-align:center; font-size:12px; color:var(--lb-fg7); line-height:1.5; }
.gate-login-footer{ text-align:center; margin-top:28px; }
.gate-login-footer .copyright{ font-size:13px; color:#aaa; }
.login-download{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; height:40px; padding:0 20px; border-radius:1000px; background:var(--lb-color25); color:var(--lb-info); font-size:14px; font-weight:600; }

/* ---------- 5. 다크 모드 (:root[data-theme="dark"]) ----------
   상태 팔레트(color01~28)·브랜드 보라는 유지, 표면·텍스트·라인만 반전.
   앱바는 라이트와 같은 #5b5866 계열을 더 어둡게. */
:root[data-theme="dark"]{
  --lb-fg1:#eef0f7; --lb-fg2:#e6e8f2; --lb-fg3:#d3d7e6; --lb-fg4:#c3c7d8; --lb-fg5:#aeb3c6; --lb-fg6:#878da0; --lb-fg7:#6b7089;
  --lb-line:#3a3f55; --lb-line-soft:#2c3142; --lb-line-softer:#2c3142;
  --lb-surface:#1e2233; --lb-bg:#14161f; --lb-bg-gray1:#181b26; --lb-bg-gray3:#232838; --lb-bg-gray5:#262b3c;
  --lb-app-bar:#2a2734; --lb-color25:#2b2450; --lb-color24:#3a2f66;
  --lb-shadow-card:1px 4px 8px 1px rgba(0,0,0,.45); --lb-shadow-pop:1px 5px 30px rgba(0,0,0,.6); --lb-shadow-lnb:1px -1px 10px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .Button{ background:var(--lb-surface); color:var(--lb-fg3); border-color:var(--lb-line); }
:root[data-theme="dark"] .Button:hover{ background:var(--lb-bg-gray5); color:var(--lb-fg2); }
:root[data-theme="dark"] .Button.info,:root[data-theme="dark"] .Button.active,:root[data-theme="dark"] .Button.small.active{ background:var(--lb-info); border-color:var(--lb-info); color:#fff; }
:root[data-theme="dark"] .Button.info.line{ background:transparent; color:#a99bff; border-color:#a99bff; }
:root[data-theme="dark"] .Button.Disabled,:root[data-theme="dark"] .Button[disabled]{ background:var(--lb-bg-gray3); color:var(--lb-fg7); border-color:var(--lb-line); }
/* 🔴 테두리형(`.Button.info.line`)은 선택자가 한 단계 더 구체적이라 위 비활성 규칙을 이긴다 —
   꺼진 버튼이 켜진 것처럼 보이고 커서만 금지 표시였다(`T-088`). 원본(`linkbiz.css`)의 라이트
   규칙도 같은 이유로 지므로 라이트·다크 둘 다 여기서 덮는다(P-1 — 원본은 고치지 않는다).
   :hover 도 함께 막는다 — 꺼진 버튼이 마우스를 올리면 보라색으로 채워졌다. */
.Button.info.line[disabled],.Button.info.line.Disabled,
.Button.info.line[disabled]:hover,.Button.info.line.Disabled:hover{ background:var(--lb-bg-gray3); color:var(--lb-fg7); border-color:var(--lb-line); }
:root[data-theme="dark"] .Button.info.line[disabled],:root[data-theme="dark"] .Button.info.line.Disabled,
:root[data-theme="dark"] .Button.info.line[disabled]:hover,:root[data-theme="dark"] .Button.info.line.Disabled:hover{ background:var(--lb-bg-gray3); color:var(--lb-fg7); border-color:var(--lb-line); }
:root[data-theme="dark"] .Textinput,:root[data-theme="dark"] textarea.Textarea,:root[data-theme="dark"] .Divselect,:root[data-theme="dark"] .inputxt-login input{ background:var(--lb-surface); color:var(--lb-fg2); border-color:var(--lb-line); }
:root[data-theme="dark"] .Textinput::placeholder{ color:var(--lb-fg7); }
:root[data-theme="dark"] .lb-grid,:root[data-theme="dark"] .status-card,:root[data-theme="dark"] .lb-card,:root[data-theme="dark"] .com-searchbox,:root[data-theme="dark"] .fcard,:root[data-theme="dark"] .writing-list{ background:var(--lb-surface); border-color:var(--lb-line-softer); }
:root[data-theme="dark"] .lb-grid thead th,:root[data-theme="dark"] .Table.Form-type th,:root[data-theme="dark"] .writing-row .writing-tit{ background:var(--lb-bg-gray3); color:var(--lb-fg3); border-color:var(--lb-line); }
:root[data-theme="dark"] .lb-grid tbody tr:hover{ background:var(--lb-bg-gray5); }
:root[data-theme="dark"] .lb-grid tbody tr.selected{ background:var(--lb-color25); }
:root[data-theme="dark"] .Table.Form-type{ background:var(--lb-surface); }
:root[data-theme="dark"] .tnode{ color:var(--lb-fg3); } :root[data-theme="dark"] .tnode:hover{ background:var(--lb-bg-gray5); }
:root[data-theme="dark"] .tnode.group,:root[data-theme="dark"] .drive-root .tit{ color:var(--lb-fg1); }
:root[data-theme="dark"] .thumb{ background:var(--lb-bg-gray3); } :root[data-theme="dark"] .fcard.folder .thumb{ background:var(--lb-surface); }
:root[data-theme="dark"] .fcard.sel{ background:var(--lb-color25); }
:root[data-theme="dark"] .finfo .fn,:root[data-theme="dark"] .file-row .fname,:root[data-theme="dark"] .dtabs .t.active{ color:var(--lb-fg1); }
:root[data-theme="dark"] .crumb{ border-color:var(--lb-line-soft); color:var(--lb-fg5); } :root[data-theme="dark"] .crumb b{ color:var(--lb-fg1); }
:root[data-theme="dark"] .detail{ border-color:var(--lb-line-softer); } :root[data-theme="dark"] .preview{ background:var(--lb-bg-gray3); }
:root[data-theme="dark"] .rev-table th,:root[data-theme="dark"] .rev-table td{ color:var(--lb-fg3); border-color:var(--lb-line-softer); }
:root[data-theme="dark"] .modal-bg .lb-modal,:root[data-theme="dark"] .ctx-menu{ background:var(--lb-surface); }
/* 🔵 아래 3줄은 P1~P3 에서 **새로 만든 클래스**의 다크 대응이다 — handoff §5 원안에는 없었다.
   ⚠️ 새 컴포넌트를 만들면 여기 한 줄을 **같이** 넣는다. 화면 코드에 다크 분기를 넣지 않는다(P-3·§3.9). */
:root[data-theme="dark"] .secret-bg .lb-modal{ background:var(--lb-surface); }
:root[data-theme="dark"] .xfer-row .bar{ background:var(--lb-bg-gray5); }
:root[data-theme="dark"] .status-card .ico{ background:color-mix(in srgb, var(--sc) 22%, transparent); }
:root[data-theme="dark"] .login-layout{ background:var(--lb-bg); }
:root[data-theme="dark"] .app-copyright{ background:var(--lb-bg-gray3); }
:root[data-theme="dark"] .com-lnb > li > a > span,:root[data-theme="dark"] .app-nav-tit .tit.parent-tit{ color:var(--lb-fg2); }
:root[data-theme="dark"] .user-account .account-info .name{ color:var(--lb-fg2); }
:root[data-theme="dark"] .com-lnb > li > a .numb{ background:var(--lb-color25); }
:root[data-theme="dark"] .icon-btn{ background:var(--lb-surface); color:var(--lb-fg3); border-color:var(--lb-line); }
:root[data-theme="dark"] .sel-bar{ background:var(--lb-color25); color:var(--lb-fg2); }
/* 날짜 입력칸의 달력 아이콘(삼성EnA_개선 `T-096`) — 브라우저 기본 컨트롤이라 color-scheme 으로만 바뀐다. */
:root[data-theme="dark"] input[type="date"],:root[data-theme="dark"] input[type="datetime-local"],:root[data-theme="dark"] input[type="time"],:root[data-theme="dark"] input[type="month"]{ color-scheme:dark; }
:root[data-theme="dark"] .Tabs > ul{ border-color:var(--lb-line-soft); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#3a3f55; border-color:var(--lb-bg); }
/* 🔵 로고 SVG(`logo_linkbiz.svg`)는 자체 색이 없어 기본값(검정)으로 그려진다 — `<img>`로
   불러온 외부 파일이라 페이지 CSS로 안쪽 path를 못 건드린다. 다크에서 어두운 배경에 묻히므로
   필터로 반전해 흰색처럼 보이게 한다. `.company_logo` 는 로그인 화면(관리자·사용자·비밀번호
   변경 3곳이 같은 마크업을 쓴다) — 다크 설정은 로그아웃 후에도 localStorage 에 남아 있어
   로그인 화면에도 그대로 적용된다(`theme.ts` 의 `initTheme()`가 앱 시작 시 건다). */
:root[data-theme="dark"] .lnb-wrap .biz-logo img,
:root[data-theme="dark"] .company_logo img{ filter:invert(1); }
/* 🔵 화면 설명 문구(`PageTitle`의 `desc`)도 다크에서 흰 계열로 — 라이트 전용 보라(`--lb-info`)가
   어두운 배경에서 잘 안 읽힌다. */
:root[data-theme="dark"] .page-tit .parent-tit,
:root[data-theme="dark"] .page-title p{ color:var(--lb-fg4); }