/* shell.linkbiz.css — food_rnd 셸을 LinkBiz 구성으로 (shell.css 뒤에 링크한다)
 *
 * 마크업(index.html)은 그대로 두고 **선택자만 덮어쓴다**. 근거는 LinkBiz kit.css(work-layout.css 실측):
 *  · .gnb  → 다크 앱바 65px (#5b5866), 모듈 = 아이콘+라벨 세로형, 우측 유틸 아이콘 26px
 *  · .lnb  → 300px 흰 사이드바, 그림자, 활성 항목 좌측 5px 보라 바, 16px 메뉴 글자
 *  · .ctx  → 페이지 타이틀 툴바(브레드크럼 14px 보라 + 24px/600 제목) 우측에 제품 문맥 칩
 *  · .card → 8px 반경, 옅은 넓은 그림자 · .btn → 40px(기본)/32px(small) LinkBiz Button
 *  · table.list / .lbz-table → com-grid 머리(#f6f5fa) · 호버 #faf9fe · 선택 #f3effe
 */

/* ───────── 기본 ───────── */
body{ font-family:var(--font); font-size:var(--fs-base); color:var(--text-2); letter-spacing:var(--tracking); background:var(--bg); }
.note{ font-size:var(--fs-caption); color:var(--muted); letter-spacing:-0.2px; }
a{ color:var(--brand); } a:hover{ color:var(--brand-hover); }
.num, td.num, .lbz-num{ font-family:var(--font-num); }

/* ───────── 넘침 방지 — 글자가 상자 밖으로 나가거나 세로로 쪼개지지 않게 ───────── */
.btn, .badge, .lbz-state, .sheet-badge, .cpy-chip, .ctx .kv, .ctx .pname, .ctx .dirty, .lnb a .mname, .gnb-mods .mod{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.row input, .row select{ min-width:0; max-width:100%; }
.row select{ text-overflow:ellipsis; }
table.list th, table.list td, table.kv th{ white-space:nowrap; }
table.list td.note, table.kv td{ white-space:normal; word-break:keep-all; }
.card, .card h2, .stitArea{ min-width:0; }
.card h2{ flex-wrap:wrap; row-gap:6px; }
.card h2 .sheet-badge, .card h2 .help{ flex:none; }
.ctx .pname{ max-width:320px; }
.status-card .value{ white-space:nowrap; }
.status-card .card-value-wrap{ flex-wrap:wrap; row-gap:4px; }

/* ───────── 버튼 (LinkBiz .Button) ───────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:40px; padding:3px 15px; font-size:15px; letter-spacing:-0.8px; color:#333;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); transition:all .3s; white-space:nowrap;
}
.btn:hover{ background:#fafafa; border-color:var(--line-2); color:#333; }
.btn i{ font-size:18px; line-height:1; }
.btn-info{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-info:hover{ background:var(--brand); border-color:var(--brand); color:#fff; filter:none; }
.btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-sm{ height:32px; padding:5px 10px; font-size:13px; border-radius:var(--radius-sm); }
.btn-sm i{ font-size:16px; }
.btn:disabled{ color:#aaa; background:#f4f4f4; border-color:#ddd; opacity:1; }
select.btn, select.btn-sm{ appearance:auto; padding-right:8px; }

/* ───────── 입력 (LinkBiz .Textinput) ───────── */
.row input, .row select, .ask input, .ask select{
  height:40px; padding:0 12px; font-size:15px; color:#202020; letter-spacing:-0.2px;
  border:1px solid var(--line-2); border-radius:var(--radius); background:#fff; transition:all .2s;
}
.row input:hover, .row select:hover{ border-color:#b7afd4; }
.row input:focus, .row select:focus{ border-color:var(--brand); outline:none; }
.row input::placeholder{ color:#999; }
.row{ gap:8px; margin:12px 0; }
.row .note{ font-size:14px; font-weight:bold; color:var(--text); }

/* ───────── GNB → 다크 앱바 ───────── */
.gnb{
  height:var(--gnb-h); gap:0; padding:0 30px 0 0;
  background:var(--app-bar); border-bottom:0; box-shadow:none; color:#fff;
}
.gnb > .icon-btn#snbToggle{
  width:60px; height:60px; margin:0; border-radius:0; border-right:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.75); font-size:24px; display:flex; align-items:center; justify-content:center;
}
.gnb > .icon-btn#snbToggle:hover{ background:none; color:#fff; }
.gnb .brand{ display:none; }                      /* 브랜드는 LNB 로고가 맡는다 */
.gnb-mods{ margin-left:15px; gap:10px; height:100%; }
.gnb-mods .mod{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  position:relative; height:100%; padding:0 6px; border-radius:0;
  color:rgba(255,255,255,.8); font-size:13px; font-weight:normal; letter-spacing:-0.6px;
}
.gnb-mods .mod::before{                            /* 모듈 아이콘 — data-icon 으로 바꿀 수 있다 */
  font-family:"remixicon"; content:"\ee00"; font-size:26px; line-height:30px;   /* ri-folder-line */
}
.gnb-mods .mod[data-mod="home"]::before{ content:"\ee1a"; }      /* ri-home-line */
.gnb-mods .mod[data-mod="rnd"]::before{ content:"\edd0"; }       /* ri-flask-line */
.gnb-mods .mod[data-mod="field"]::before{ content:"\ed6c"; }     /* ri-building-2-line */
.gnb-mods .mod[data-mod="mdm"]::before{ content:"\ec2b"; }       /* ri-database-2-line */
.gnb-mods .mod[data-mod="doc"]::before{ content:"\ecd3"; }       /* ri-file-list-3-line */
.gnb-mods .mod[data-mod="admin"]::before{ content:"\f0e5"; }     /* ri-settings-3-line */
.gnb-mods .mod:hover{ background:none; color:#fff; }
.gnb-mods .mod.on{ background:none; color:#fff; font-weight:normal; }
.gnb-mods .mod.on::after{ content:""; position:absolute; bottom:6px; left:8px; right:8px; height:3px; background:#fff; border-radius:2px; }

.gnb-search{
  height:40px; min-width:220px; max-width:280px; padding:0 14px; margin-right:10px;
  background:var(--app-bar-pill); border:0; border-radius:200px;
}
.gnb-search i{ color:#fff; font-size:18px; }
.gnb-search input{ color:#fff; font-size:14px; }
.gnb-search input::placeholder{ color:rgba(255,255,255,.6); }
.gnb-search:focus-within{ box-shadow:0 0 0 2px rgba(255,255,255,.25); border:0; }

.gnb .icon-btn{ min-width:52px; height:60px; padding:0; border-radius:0; color:rgba(255,255,255,.8); font-size:26px; display:flex; align-items:center; justify-content:center; }
.gnb .icon-btn:hover{ background:none; color:#fff; }
.gnb .icon-btn .badge{ left:27px; right:auto; top:8px; min-width:16px; height:16px; line-height:16px; font-size:11px; background:#fa167c; border-radius:1000px; font-family:var(--font-num); font-weight:normal; }
.gnb select#lang-sel, .gnb #reauth-btn, .gnb #logout-btn{
  height:32px; padding:0 10px; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; font-size:13px; border-radius:var(--radius-sm); margin-left:6px;
}
.gnb #logout-btn{ border-color:transparent; }
/* ★ 영어에서 `재인증`→`Re-authenticate`, `로그아웃`→`Sign out` 로 길어지면 flex 가 이 둘을
 * 줄여 **글자가 잘려 겹쳤다**(다크/en 골든 캡처). 줄이지 못하게 막고, 대신 검색칸이 줄어든다. */
.gnb select#lang-sel, .gnb #reauth-btn, .gnb #logout-btn{ flex:none; }
/* 언어 선택은 **가장 긴 선택지**(일본어·중국어의 "이월" 안내)에 맞춰 232px 로 벌어져 앱바를
 * 넘치게 했다. 닫힌 상태의 폭만 묶는다 — 펼치면 선택지는 그대로 다 보인다. */
.gnb select#lang-sel{ width:110px; }
.gnb-search{ flex:0 1 auto; min-width:120px; }
/* ★ 좁아지면 앱바가 넘친다 — 영어에서 1280px 일 때 142px, 1100px 일 때 322px 모자랐고
 * [로그아웃]이 화면 밖으로 밀려났다. 덜 중요한 것부터 접는다: 먼저 검색칸을 아이콘만 남기고,
 * 더 좁아지면 모듈 **라벨**을 접는다(아이콘과 `title` 은 남는다). */
@media (max-width:1400px){
  .gnb-search{ min-width:44px; padding:0 10px; }
  .gnb-search input{ width:0; min-width:0; padding:0; }
}
/* 그래도 모자라면 **모듈 띠**가 줄고 가로로 밀린다 — 폭이 아니라 실제 넘침에 반응하므로
 * 한국어(짧은 라벨)에서는 라벨이 그대로 남고 영어에서만 밀린다. */
.gnb-mods{ min-width:0; overflow-x:auto; scrollbar-width:none; }
.gnb-mods::-webkit-scrollbar{ display:none; }
.gnb #logout-btn:hover{ background:rgba(255,255,255,.08); }

/* ───────── LNB → 300px 사이드바 ───────── */
.lnb{ width:var(--lnb-w); border-right:0; box-shadow:var(--shadow-lnb); z-index:20; }
.lnb .biz-logo{
  flex-direction:column; justify-content:center; gap:8px; height:84px; margin:16px 0 8px; padding:0;
  /* ★ 작은 글자에 `--muted-2`(#909090)를 쓰지 않는다 — 흰 바탕에서 3.19:1 로 AA 미달이다.
   * 이 스킨을 올리면서 `shell.css` 에서 이미 고쳤던 대비 결함 세 개가 되살아났다(하네스 axe FAIL). */
  font-family:var(--font-title); font-size:13px; font-weight:normal; color:var(--muted);
}
.lnb .biz-logo i{ display:none; }
.lnb .biz-logo::before{ content:""; width:180px; height:36px; background:url("assets/logo_linkbiz.svg") no-repeat center/contain; }
.lnb .cpy-chip{ align-self:center; margin:0 0 12px; background:#f3effe; color:var(--brand); font-size:12px; font-weight:600; }
.lnb .account{
  width:220px; margin:0 auto 20px; padding:0; gap:0; border:0; background:none; border-radius:0;
}
.lnb .account:hover{ background:none; border:0; }
.lnb .account .avatar{ width:52px; height:52px; font-size:18px; font-weight:600; background:#eaeaea; color:var(--brand); }
.lnb .account .acct-txt{ margin-left:15px; }
.lnb .account .acct-txt b{ font-size:16px; font-weight:300; color:#222; letter-spacing:-0.8px; }
.lnb .account .acct-txt small{ margin-top:5px; font-size:14px; color:var(--muted); letter-spacing:-0.8px; }
.lnb .account i{ font-size:22px; color:#999; }
.lnb .who-line{ padding:0 40px 14px; font-size:12px; color:var(--muted); }

.lnb .grp{
  position:relative; margin:14px 0 10px; padding:0 35px 0 64px;
  font-size:16px; font-weight:300; color:#111; letter-spacing:-0.8px;
}
.lnb .grp::before{ content:""; position:absolute; left:50px; top:50%; width:7px; height:15px; margin-top:-7.5px; background:var(--brand); border-radius:2px; }
.lnb a{
  position:relative; padding:10px 15px 10px 50px; gap:6px; border-left:0;
  font-size:16px; letter-spacing:-1px; color:#222;
}
.lnb a::before{ content:""; position:absolute; left:0; top:0; width:5px; height:0; background:var(--brand); transition:height .1s ease; }
.lnb a:hover{ background:none; color:var(--brand); }
.lnb a:hover::before, .lnb a.on::before{ height:100%; }
.lnb a.on{ background:none; color:var(--brand); font-weight:600; }
.lnb a .lbz-lv{ display:none; }                                 /* 권한 등급은 툴팁으로 (title 유지) */
.lnb a .sheet{ font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 5px; line-height:16px; }
.lnb a.on .sheet{ color:var(--brand); border-color:#d3d0f5; background:#f3effe; }
.lnb a .fav-star{ color:transparent; }
.lnb a:hover .fav-star{ color:#d8d6e0; }
.lnb a .fav-star.on{ color:#fea626; }
.lnb .fav-bar{ border-bottom:0; padding:0 0 8px; }
.lnb .fav-bar .fav-tit{ position:relative; margin:14px 0 10px; padding:0 35px 0 64px; font-size:16px; font-weight:300; color:#111; letter-spacing:-0.8px; }
.lnb .fav-bar .fav-tit::before{ content:""; position:absolute; left:50px; top:50%; width:7px; height:15px; margin-top:-7.5px; background:#fea626; border-radius:2px; }
.lnb .fav-bar a{ padding:8px 15px 8px 50px; font-size:15px; }
.lnb .snb-foot{ padding:7px 0; text-align:center; background:#f4f4f4; border-top:0; font-size:12px; color:var(--muted); }

/* ───────── 제품 문맥바 → 페이지 툴바 ───────── */
.ctx{
  height:var(--ctx-h); left:var(--lnb-w); padding:0 40px; gap:20px;
  background:var(--bg); border-bottom:0;
}
/* ★ 화면 제목 — `linkbiz-shell.js` 가 `.lb-page-tit`(브레드크럼 span + 제목 h3)을 만든다.
 * CSS `::before` 한 덩어리로 두 줄을 그리면 **크기를 나눌 수 없다**(둘 다 14px 이 된다). */
.ctx .lb-page-tit{ display:flex; flex-direction:column; justify-content:center; gap:2px; margin-right:auto; min-width:0; }
.ctx .lb-page-tit > span{ font-size:14px; font-weight:300; color:var(--brand); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx .lb-page-tit > span:empty{ display:none; }
.ctx .lb-page-tit > h3{ margin:0; font-size:24px; font-weight:600; letter-spacing:-1px; color:var(--text); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx .pname{ font-size:15px; font-weight:600; color:#222; }
.ctx .pname::before{ font-family:"remixicon"; content:"\ed3f"; color:var(--brand); font-size:18px; margin-right:8px; vertical-align:-2px; } /* ri-box-3-line */
.ctx select#ctx-product{ height:32px; border:0; background:transparent; color:var(--muted); font-size:13px; }
.ctx .kv{ font-size:13px; color:var(--muted); font-family:var(--font-num); }
.ctx .kv b{ color:#222; }
.ctx .dirty{ height:20px; padding:0 8px; border-radius:1000px; background:#fff1dc; color:#e08a00; font-size:12px; font-weight:normal; display:inline-flex; align-items:center; }
.ctx > .pname, .ctx > select, .ctx > .kv, .ctx > .dirty{ display:inline-flex; align-items:center; }
/* 제품 문맥 칩 — 툴바 우측에 흰 카드로 **한 덩이**로 묶는다
 *
 * ★ 전에는 조각조각 떨어져 있었다. `.pname` 만 둥근 흰 카드고 나머지(select·kv·dirty)는
 *   `align-self:stretch` 라 **65px 툴바 안에서 70px 로 삐져나왔고**, 오른쪽 끝은 테두리가 없어
 *   흰 상자가 열린 채 끝났다(캡처 CTX2-20260914204408). 높이를 32px 로 못박고 양끝만 둥글린다. */
.ctx{ --chip-pad:0 12px; --chip-h:32px; }
.ctx .pname, .ctx > .kv, .ctx > select, .ctx > .dirty{
  height:var(--chip-h); padding:var(--chip-pad); margin-left:0;
  background:#fff; border:1px solid var(--line); border-left:0; border-radius:0; align-self:center;
}
.ctx .pname{ margin-left:auto; border-left:1px solid var(--line); border-radius:8px 0 0 8px; }
.ctx > :last-child{ border-radius:0 8px 8px 0; }
/* 칩 덩이 안쪽은 `gap` 을 없애 한 줄로 이어 붙인다 */
.ctx{ gap:0; }
.ctx .lb-page-tit{ margin-right:20px; }
.ctx > span[style*="flex:1"]{ display:none; }
.main.no-ctx{ top:var(--gnb-h); }
.main{ top:calc(var(--gnb-h) + var(--ctx-h)); left:var(--lnb-w); padding:var(--content-pad); }
body.snb-collapsed .ctx, body.snb-collapsed .main{ left:0; }

/* ───────── 카드 · 섹션 제목 ───────── */
.card{ border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow); }
.card h2{ margin:0 0 12px; min-height:32px; font-size:18px; font-weight:bold; color:#222; letter-spacing:-0.8px; }
.card h2 .help{ width:32px; height:32px; border-color:var(--line-2); border-radius:var(--radius-sm); font-size:16px; color:var(--muted); }
.card h2 .help:hover{ border-color:var(--brand); color:var(--brand); }
/* ★ 시트 배지 글자는 `--brand`(#5629ee) 다 — 스킨이 쓰던 #8364e8 은 이 연보라 바탕에서
 * **3.51:1** 로 AA 미달이었다(하네스 axe FAIL 7화면). #5629ee 는 같은 바탕에서 5.90:1. */
.card h2 .sheet-badge{ height:22px; padding:0 9px; font-size:12px; font-weight:600; border-radius:6px; line-height:22px; border-color:transparent; background:#ece7fc; color:var(--brand); }
.card h3{ font-size:16px; font-weight:600; color:#303030; letter-spacing:-0.8px; margin:20px 0 10px; }
.sheet-does{ margin:-6px 0 12px; }

/* ───────── 표 → com-grid ───────── */
table.list, table.kv, table.lbz-table{ font-size:14px; }
table.list thead th, table.lbz-table thead th{
  background:var(--lbz-grid-header-bg); color:var(--lbz-grid-header-fg); font-weight:600; font-size:13px;
  padding:10px 12px; border-top:0; border-bottom:1px solid #e3e1ec; white-space:nowrap;
}
table.list td, table.lbz-table td{ padding:9px 12px; color:var(--text-2); border-bottom:1px solid var(--line); }
table.list tbody tr:hover, table.lbz-table tbody tr:hover{ background:var(--lbz-grid-row-hover); }
table.lbz-table tbody tr.sel{ background:var(--lbz-grid-row-sel); }
.lbz-grid-scroll, .sheet-host, .wide-scroll{ border:1px solid var(--line); border-radius:var(--radius); overflow:auto; background:#fff; }
/* 표는 잘리지 않고 가로 스크롤한다 — 본문(제목·내용) 열만 줄바꿈 허용 */
table.list td:not(.num):not(.note){ white-space:normal; word-break:keep-all; }
.wide-scroll table.list thead th.sticky-col{ background:var(--lbz-grid-header-bg); }
.wide-scroll table.list .sticky-col.sticky-last{ box-shadow:1px 0 0 #e3e1ec; }
table.kv th{ background:#fafafa; color:#303030; font-weight:bold; width:150px; padding:9px 12px; }
table.kv td{ padding:9px 12px; }
.dhx_grid-header{ border-top:0 !important; }
.dhx_grid-header-cell{ background:var(--lbz-grid-header-bg) !important; color:var(--lbz-grid-header-fg) !important; }
/* ★ DHTMLX 는 제 서체(`Roboto, Arial, Tahoma, Verdana`)를 쓴다 — **한글이 하나도 없는 스택**이라
 * 한글은 폴백으로 떨어지고, 동봉한 Latin 서브셋과 섞이면서 화면에서 "원료"가 "훤툐"처럼
 * 다른 글자로 보였다(캡처 NUT-20260915023345). 앱 서체 스택을 물려준다. */
.dhx_widget, .dhx_grid, .dhx_grid *, .dhx_tooltip, .dhx_popup, .dhx_menu{ font-family:var(--font-table) !important; }
/* 표 안 글자는 13px 유지 — 열 폭이 13px 기준으로 계산돼 있다(sheet.js) */
.dhx_grid-header-cell, .dhx_grid-cell{ font-size:13px !important; letter-spacing:-0.2px; }

/* 페이지네이션 (grid.js paging-ty1) */
.paging-ty1{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:13px; color:var(--muted); }
.paging-ty1 .total b, .paging-ty1 .total{ font-family:var(--font-num); }
.paging-ty1 .pager-center{ display:flex; align-items:center; gap:4px; }
.paging-ty1 .page-list{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.paging-ty1 .page-button button{ min-width:30px; height:30px; padding:0 6px; border:1px solid var(--line-2); background:#fff; border-radius:var(--radius-sm); color:#333; font-family:var(--font-num); }
.paging-ty1 .page-button.current button{ background:var(--brand); border-color:var(--brand); color:#fff; }
.paging-ty1 .page-button.off button{ color:#ccc; }
.paging-ty1 select{ height:30px; border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:0 8px; font-size:13px; }
.grid-empty{ padding:40px; text-align:center; color:var(--muted); font-size:14px; }
.grid-empty i{ display:block; font-size:32px; margin-bottom:8px; color:#d8d6e0; }

/* ───────── 상태 배지 → Label-color ───────── */
.badge, .lbz-state{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:1000px;
  font-size:12px; font-weight:normal; border:0;
  /* ★ 개편 G-3(QA2-22·23·24) — 기본은 **바탕과 짝을 이룬 글자**. 전에는 글자만 흰색이고 바탕이 정해지지 않아,
   *   색을 따로 주지 않은 상태(ERP ACTIVE · 체크리스트 검토중 · 배합일지 서명 등)가 옅은 바탕 위 흰 글자로 **안 보였다**. */
  color:var(--text); background:var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.badge.st-active, .badge.st-completed, .badge.st-signed, .badge.st-resolved, .lbz-state[data-state="COMPLETED"], .lbz-state[data-state="SIGNED"]{ background:#1f7a5c; color:#fff; box-shadow:none; }   /* 흰 글자 5.4:1 */
.badge.st-conflict, .badge.st-open, .lbz-state[data-state="OPEN"]{ background:#c1002c; color:#fff; box-shadow:none; }   /* 흰 글자 6.1:1 */
.badge.st-in_progress, .badge.st-assigned, .lbz-state[data-state="IN_PROGRESS"]{ background:var(--color10); color:#fff; box-shadow:none; }
/* 작성 중 — 회색(#a3a1a1) 위의 **흰 글자는 2.57:1** 이다. 어두운 글자로 두면 7.45:1. */
.badge.st-draft, .lbz-state[data-state="DRAFT"]{ background:var(--color19); color:var(--text); }
.badge.st-in_review, .lbz-state[data-state="IN_REVIEW"]{ background:var(--color10); color:#fff; }
/* 결재완료 — `--color09`(#8364e8) 위 흰 글자는 4.23:1 이라 AA 미달. AA 보정색이 따로 있다. */
.badge.st-approved, .lbz-state[data-state="APPROVED"]{ background:var(--color09-aa); color:#fff; }
.lbz-state[data-state="RELEASED"]{ background:var(--color05); color:#fff; }
.badge.st-rejected, .lbz-state[data-state="REJECTED"]{ background:var(--color01); color:#fff; }
.badge.st-superseded, .badge.st-cancelled, .lbz-state[data-state="SUPERSEDED"], .lbz-state[data-state="CANCELLED"]{ background:#eee; color:#777; text-decoration:none; }
.lbz-lv{ font-size:11px; }
.lbz-err{ border-left:3px solid var(--fail); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:14px; padding:10px 12px; }
.lbz-warn{ font-size:14px; }

/* ───────── 도움말 팝업 · 대화상자 ───────── */
.help-pop, .ask{ border-radius:20px; border:0; box-shadow:var(--shadow-pop); padding:24px; }
.help-pop h3, .ask h3{ font-size:18px; font-weight:bold; color:#222; letter-spacing:-0.8px; }
.ask-row .btn{ min-width:88px; }

/* ───────── 로그인 → LinkBiz login-form ───────── */
.login-wrap{ background:#f9fafc; }
.login-card, .login{ width:460px; border-radius:var(--radius-card); box-shadow:var(--shadow); padding:54px 48px; border:0; }
.login-card .wordmark{
  height:44px; margin:0 auto 16px; background:url("assets/logo_linkbiz.svg") no-repeat center/contain; color:transparent; -webkit-text-fill-color:transparent; font-size:0;
}
.login-card .sub{ font-size:14px; color:var(--muted); margin-bottom:36px; }
.lg-field{ position:relative; border:1px solid #ddd; border-radius:8px; height:50px; padding:0 14px 0 46px; margin-top:12px; gap:0; transition:border-color .2s; }
.lg-field:focus-within{ border-color:var(--brand); }
.lg-field:hover i{ color:var(--brand); }
.lg-field i{ position:absolute; left:14px; font-size:20px; color:#aaa; }
.lg-field input{ font-size:15px; color:#202020; }
.lg-field .lg-eye{ position:static; margin-left:auto; }
.lg-field .lg-eye i{ position:static; }
.login-btn, .login .btn-info{
  height:52px; margin-top:18px; padding:0; border-radius:8px; border:0;
  background:var(--brand); color:#fff; font-size:16px; font-weight:normal; letter-spacing:-0.5px; transition:background .3s;
}
.login-btn:hover, .login .btn-info:hover{ background:var(--brand-hover); border:0; }
.lg-save{ font-size:14px; color:var(--muted); margin:18px 0 0; }
.toggle{ width:40px; height:22px; background:#cfcdd6; }
.toggle::after{ width:18px; height:18px; }
.toggle.on{ background:var(--brand); } .toggle.on::after{ left:20px; }
.login-foot{ font-size:14px; color:var(--muted); }
.login-foot .linkish{ text-decoration:none; font-size:14px; }
.login-copy{ font-size:13px; color:var(--muted); margin-top:28px; }
.login h1{ font-size:24px; font-weight:600; color:#222; letter-spacing:-1px; text-align:center; }
.login p.sub{ text-align:center; font-size:14px; margin-bottom:28px; }
.login label{ font-size:14px; font-weight:bold; color:#303030; }
.login input{ height:50px; border:1px solid #ddd; border-radius:8px; padding:0 14px; font-size:15px; }

/* ───────── 다크 모드 ─────────────────────────────────────────────────────
 * ★ 이 스킨은 **밝은 화면만 보고 쓰였다**. 토큰(`--text`·`--surface`…)은 `theme-dark` 에서
 *   뒤집히는데, 규칙 쪽이 `#222`·`#fff` 같은 값을 직접 박아 두어 토큰을 무시했다.
 *   그 결과 다크에서 **카드 제목·메뉴 글자가 배경과 같은 색**이 됐다(골든 dark 변형 캡처).
 *   여기서 그 하드코딩만 토큰으로 되돌린다 — 밝은 화면은 값이 같아 그대로다. */
body.theme-dark{
  /* 글자 */
  .card h2, .card h3, .lnb a, .lnb .grp, .lnb .fav-bar .fav-tit,
  .lnb .account .acct-txt b, .ctx .pname, .ctx .kv b,
  .help-pop h3, .ask h3, .login h1, .login label{ color:var(--text); }
  .btn, .btn:hover, .paging-ty1 .page-button button{ color:var(--text-2); }
  .row input, .row select, .ask input, .ask select, .lg-field input, .login input,
  thead input[data-flt],
  table.list input, table.list select, table.lbz-table input, table.lbz-table select{ color:var(--text); }
  /* 열 검색칸·표 안 편집칸 — grid.js/화면이 직접 찍는다(`.row` 밖이라 빠져 있었다) */
  table.list input, table.list select, table.lbz-table input, table.lbz-table select{ border-color:var(--line-2); }

  /* 바탕 */
  .btn, .paging-ty1 .page-button button,
  .row input, .row select, .ask input, .ask select, thead input[data-flt],
  table.list input, table.list select, table.lbz-table input, table.lbz-table select,
  .lbz-grid-scroll, .sheet-host, .wide-scroll,
  .ctx .pname, .ctx > .kv, .ctx > select, .ctx > .dirty{ background:var(--surface); }
  .btn:hover{ background:var(--surface-2); }
  .lnb .snb-foot, table.kv th{ background:var(--surface-2); color:var(--muted); }
  .login-wrap{ background:var(--bg); }
  .lnb .account .avatar{ background:var(--surface-2); }

  /* 테두리 — 밝은 화면의 #ddd·#e3e1ec 는 어두운 바탕에서 보이지 않는다 */
  .lg-field, .login input, .btn:disabled{ border-color:var(--line-2); }
  table.list thead th, table.lbz-table thead th{ border-bottom-color:var(--line); }
  .wide-scroll table.list .sticky-col.sticky-last{ box-shadow:1px 0 0 var(--line); }

  /* 보라 계열 옅은 바탕 — 어두운 화면에서는 글자가 묻힌다 */
  /* 어두운 바탕 위 보라 — `--pri-2`(#7d4dff)는 #2a2a2a 에서 **2.99:1** 이라 AA 미달이다.
   * 어두운 화면 전용으로 한 단계 밝힌 보라를 쓴다(#a78bfa = 5.28:1). */
  --pri-on-dark:#a78bfa;
  .lnb .cpy-chip, .lnb a.on .sheet, .card h2 .sheet-badge{ background:var(--surface-2); color:var(--pri-on-dark); border-color:var(--line-2); }
  /* 완주 안내의 작은 시트 배지는 앱 토큰(#8e6cff on #2a2440 = 4.02:1)을 쓴다 — 이것도 모자란다 */
  .sheet-badge{ color:var(--pri-on-dark); }
  .lnb a:hover, .lnb a.on, .ctx .lb-page-tit > span, a{ color:var(--pri-on-dark); }
  .ctx .dirty{ background:#4a3a14; color:#ffc94d; }
  .badge.st-superseded, .badge.st-cancelled,
  .lbz-state[data-state="SUPERSEDED"], .lbz-state[data-state="CANCELLED"]{ background:var(--surface-2); color:var(--muted); }
  .badge.st-draft, .lbz-state[data-state="DRAFT"]{ color:#101010; }   /* 회색 바탕 위 — 어두운 글자가 7.45:1 */
  .grid-empty i{ color:var(--line-2); }
  .toggle{ background:var(--line-2); }
  .btn:disabled{ background:var(--surface-2); color:var(--muted-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LinkBiz 컴포넌트 층 (2단계) — 목업 1d·1f·1h·1j 가 쓰는 어휘
 *
 * 출처는 `design_handoff_food_rnd_linkbiz/mockup/_ds/…/linkbiz.css` 이며, 색은 그 파일의
 * `--lb-*` 대신 **이 앱의 팔레트 토큰**(`--colorNN`·`--surface`…)으로 바꿔 옮겼다
 * (tokens.css "임의 색상 금지"). 그래서 다크 모드가 같은 규칙으로 따라온다.
 * light 변형 글자색은 목업 값 그대로 쓰면 AA 미달이라 **한 단계 어둡게** 잡았다.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 상태 알약 Label-color / 신호점 signal-color / 사각배지 badge-color ── */
.Label-color { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:1000px; font-size:13px; color:#fff; font-weight:normal; }
.Label-color.small { height:20px; padding:0 8px; font-size:12px; }
.badge-color { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:6px; font-size:12px; color:#fff; }
.signal-color { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); background:none; }
.signal-color::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; flex:none; }
.signal-color.square::before { border-radius:2px; }

.Label-color.color01, .badge-color.color01 { background:var(--color01); }
.Label-color.color05, .badge-color.color05 { background:var(--color05); }
.Label-color.color09, .badge-color.color09 { background:var(--color09-aa); }
.Label-color.color10, .badge-color.color10 { background:var(--color10); }
.Label-color.color11, .badge-color.color11 { background:var(--color11); }
.Label-color.color19, .badge-color.color19 { background:var(--color19); color:var(--text); }
.Label-color.color21, .badge-color.color21 { background:var(--color21); color:var(--text); }
/* light 변형 — 옅은 바탕 + 색 글자 */
.Label-color.light.color01, .badge-color.light.color01 { background:#fde7eb; color:#c1002c; }
.Label-color.light.color05, .badge-color.light.color05 { background:#e4f6ef; color:#1f7a5c; }
.Label-color.light.color09, .badge-color.light.color09 { background:#ece7fc; color:var(--brand); }
.Label-color.light.color11, .badge-color.light.color11 { background:#e3f5ff; color:#12688f; }
.Label-color.light.color19, .badge-color.light.color19 { background:#eeeeee; color:#5c5c5c; }
.Label-color.light.color21, .badge-color.light.color21 { background:#fff1dc; color:#9a5c00; }
.signal-color.color01 { color:#c1002c; }
.signal-color.color05 { color:#1f7a5c; }
.signal-color.color09 { color:var(--brand); }
.signal-color.color10 { color:var(--color10); }
.signal-color.color11 { color:#12688f; }
.signal-color.color19 { color:var(--muted); }
.signal-color.color21 { color:#9a5c00; }

/* ── KPI status-card ── */
.status-board-row { display:flex; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.status-card {
  flex:1 1 0; min-width:190px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);
}
.status-card .card-tit { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px; font-weight:bold; color:var(--text); }
.status-card .card-tit .unit { font-size:12px; font-weight:normal; color:var(--muted); white-space:nowrap; }
.status-card .card-value-wrap { display:flex; align-items:baseline; gap:8px; margin-top:10px; flex-wrap:wrap; row-gap:4px; }
.status-card .value { font-family:var(--font-title); font-size:34px; font-weight:bold; color:var(--text); line-height:1.1; white-space:nowrap; }
.status-card .value.sm { font-size:22px; white-space:normal; word-break:keep-all; }
.status-card .value.nodata { font-size:22px; font-weight:normal; color:var(--muted); }
.status-card .change { font-size:13px; font-weight:600; color:#1f7a5c; white-space:nowrap; }
.status-card .card-value-wrap.warning .value, .status-card .card-value-wrap.warning .change { color:#a8410a; }
.status-card.attn { border-color:var(--color26); }
.status-card .card-meta { display:flex; gap:18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; row-gap:8px; }
.status-card .card-meta .meta { display:flex; flex-direction:column; gap:3px; min-width:0; }
.status-card .card-meta .meta .tit { font-size:12px; color:var(--muted); white-space:nowrap; }
.status-card .card-meta .meta .count { font-size:16px; font-weight:600; color:var(--text-2); }

/* ── 섹션 제목 stitArea ── */
.stitArea { display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:6px; margin:0 0 12px; }
.stitArea .stit03 { margin:0; font-size:18px; font-weight:bold; color:var(--text); letter-spacing:-0.8px; }
.stitArea .stit03 b { color:var(--brand); font-weight:600; }
.stitR { display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap; row-gap:6px; }

/* ── 탭 Tabs (lbzTabs) ── */
.Tabs > ul { display:flex; gap:4px; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.Tabs > ul::-webkit-scrollbar { display:none; }
.Tabs > ul > li { flex:none; }
.Tabs > ul > li > button {
  padding:10px 18px; font-size:15px; color:var(--muted); background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;
  transition:color .2s, border-color .2s; white-space:nowrap;
}
.Tabs > ul > li > button:hover { color:var(--text-2); }
.Tabs > ul > li > button[aria-selected="true"] { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.Tabs > ul > li > button .cnt { margin-left:6px; font-family:var(--font-num); font-size:13px; color:var(--muted); }
.Tabs > ul > li > button[aria-selected="true"] .cnt { color:var(--brand); }
.Tabs .tab-panel { padding-top:14px; }

/* ── 조회 상자 com-searchbox ── */
.com-searchbox { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; margin:0 0 14px; }
.com-searchbox .row { margin:0; align-items:center; }
.com-searchbox input, .com-searchbox select { height:36px; }
.com-searchbox .sep { width:1px; height:22px; background:var(--line); margin:0 4px; flex:none; }
.com-searchbox .lbl { font-size:14px; font-weight:bold; color:var(--text-2); white-space:nowrap; }
.com-searchbox .spacer { margin-left:auto; }
table.Table.Form-type { width:100%; border-collapse:collapse; background:var(--surface); }
table.Table.Form-type th, table.Table.Form-type td { padding:6px 10px; text-align:left; font-size:14px; vertical-align:middle; border:0; }
table.Table.Form-type th { background:none; font-weight:bold; color:var(--text-2); width:110px; white-space:nowrap; }

/* ── 카드·표 ── */
.lb-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; min-width:0; }
.lb-split { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:14px; align-items:start; }
@media (max-width:1100px) { .lb-split { grid-template-columns:minmax(0,1fr); } }
.lb-grid { width:100%; border:1px solid var(--line); border-radius:var(--radius); overflow:auto; background:var(--surface); }
.lb-grid table { width:100%; border-collapse:collapse; }
.lb-grid thead th { background:var(--lbz-grid-header-bg); color:var(--lbz-grid-header-fg); font-weight:600; font-size:13px; padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.lb-grid tbody td { padding:9px 12px; font-size:14px; color:var(--text-2); border-bottom:1px solid var(--line); }
.lb-grid tbody td.wrap { white-space:normal; word-break:keep-all; }
.lb-grid tbody tr:hover { background:var(--lbz-grid-row-hover); }
.lb-grid tbody tr.sel { background:var(--lbz-grid-row-sel); }
.lb-grid tbody tr.sel td:first-child { color:var(--brand); font-weight:600; }
.lb-num { font-family:var(--font-num); }

/* ── 목록형(내 작업함 · 일정) ── */
ul.item-list, ul.notif-list { list-style:none; margin:0; padding:0; }
ul.item-list > li, ul.notif-list > li { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); min-width:0; }
ul.item-list > li:last-child, ul.notif-list > li:last-child { border-bottom:0; }
ul.item-list .code { flex:none; background:#f3effe; color:var(--brand); font-size:12px; font-weight:600; border-radius:5px; padding:2px 7px; white-space:nowrap; }
ul.item-list .tit, ul.notif-list .tit { flex:1; min-width:0; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
ul.item-list .dday { flex:none; font-family:var(--font-num); font-weight:600; font-size:13px; color:var(--muted); }
ul.item-list .dday.over { color:#c1002c; }
ul.item-list .dday.near { color:#a8410a; }
ul.notif-list .date { flex:none; width:48px; font-family:var(--font-num); font-weight:600; font-size:13px; color:var(--brand); }
ul.notif-list .sub { flex:none; font-size:13px; color:var(--muted); }
ul.notif-list .sub.over { color:#c1002c; }
.lb-empty { padding:24px 0; text-align:center; font-size:14px; color:var(--muted); }

/* ── 가로 막대(집계) ── */
.lb-bars { display:grid; gap:8px; }
.lb-bars .bar-row { display:grid; grid-template-columns:96px minmax(0,1fr) 48px; align-items:center; gap:10px; }
.lb-bars .track { height:10px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.lb-bars .fill { height:100%; border-radius:5px; background:var(--brand); }
.lb-bars .cnt { text-align:right; font-family:var(--font-num); font-weight:600; font-size:14px; color:var(--text-2); }

/* ── 접히는 안내 카드 ── */
details.flow-card > summary { cursor:pointer; font-size:15px; font-weight:bold; color:var(--text); list-style:none; }
details.flow-card > summary::-webkit-details-marker { display:none; }
details.flow-card > summary::before { content:"\ea6e"; font-family:"remixicon"; margin-right:6px; color:var(--brand); display:inline-block; transition:transform .2s; vertical-align:-2px; }
details.flow-card[open] > summary::before { transform:rotate(90deg); }
details.flow-card[open] > summary { margin-bottom:12px; }

/* 아이콘 전용 버튼의 읽어 주는 이름 */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── 다크 보정 ── */
body.theme-dark {
  .status-card, .lb-card, .com-searchbox, .lb-grid, table.Table.Form-type { background:var(--surface); }
  ul.item-list .code { background:var(--surface-2); color:var(--pri-on-dark); }
  ul.notif-list .date { color:var(--pri-on-dark); }
  .lb-grid tbody tr.sel td:first-child, .stitArea .stit03 b,
  .Tabs > ul > li > button[aria-selected="true"],
  .Tabs > ul > li > button[aria-selected="true"] .cnt { color:var(--pri-on-dark); }
  .Tabs > ul > li > button[aria-selected="true"] { border-bottom-color:var(--pri-on-dark); }
  .lb-bars .fill { background:var(--pri-on-dark); }
  .Label-color.light.color01, .badge-color.light.color01 { background:#3c1620; color:#ff8fa3; }
  .Label-color.light.color05, .badge-color.light.color05 { background:#12302a; color:#5fd8ac; }
  .Label-color.light.color09, .badge-color.light.color09 { background:var(--surface-2); color:var(--pri-on-dark); }
  .Label-color.light.color11, .badge-color.light.color11 { background:#11303d; color:#6fd0ff; }
  .Label-color.light.color19, .badge-color.light.color19 { background:var(--surface-2); color:var(--muted); }
  .Label-color.light.color21, .badge-color.light.color21 { background:#3a2c10; color:#ffc46b; }
  .signal-color.color01 { color:#ff8fa3; }
  .signal-color.color05 { color:#5fd8ac; }
  .signal-color.color09 { color:var(--pri-on-dark); }
  /* ★ color10(#4265d6)을 빠뜨렸다 — 어두운 바탕에서 **3.0:1** 이라 AA 미달이다.
   * "검토 중" 신호점이 현황 막대에 쓰인다(밝은 화면에서는 그대로 두어도 된다). */
  .signal-color.color10 { color:#8aa6ff; }
  .signal-color.color11 { color:#6fd0ff; }
  .signal-color.color21 { color:#ffc46b; }
  .status-card .change { color:#5fd8ac; }
  .status-card .card-value-wrap.warning .value, .status-card .card-value-wrap.warning .change { color:#ffb37a; }
  ul.item-list .dday.over, ul.notif-list .sub.over { color:#ff8fa3; }
  ul.item-list .dday.near { color:#ffb37a; }
  details.flow-card > summary::before { color:var(--pri-on-dark); }
}