/* shell.linkbiz.v2.css — 1차 적용 캡처(2026-09-15) 검토 + **app.js 전수 분석** 결과. shell.linkbiz.css 뒤에 링크한다.
*
* 전수 분석(app.js 10,418줄 · grid.js · sheet.js)에서 39개 화면이 쓰는 UI 원소는 아래 25개뿐이다.
* 이 파일은 그 원소 **전부**에 규칙을 준다 — 화면을 하나씩 캡처하지 않아도 모든 메뉴가 같은 규칙을 받는다.
*
* A. 글자 .note .sheet-does .mono td.wrap ul/pre.note ol.flow details.flow-card
* B. 컨트롤 input(text/password/date/number/search) select textarea checkbox input[type=file] label.chk
* — `.row` 안 · `.ask` 안 · **표 셀 안**(td input/select: 배치·체크리스트·목표·ERP 매핑 화면) · 단독
* C. 단추 .btn .btn-sm .btn-info .btn-primary .btn-danger · 카드 직속 단추(.card > .btn)
* D. 표 table.list(simpleTable) · table.lbz-table(lbzList/grid.js) · table.kv · .wide-scroll · .sheet-host(DHTMLX)
* E. 상태 .badge .lbz-state .lbz-badge .Label-color .signal-color .lbz-prog .lbz-dday .lbz-legend
* F. 알림 p/div.lbz-err span.lbz-err .lbz-warn .lbz-need .grid-empty .lb-empty
* G. 구조 .card .Tabs(lbzTabs) .status-board-row/.status-card .lb-card .lb-split .com-searchbox .help-pop .ask
* H. 셸 .gnb .lnb .ctx(.lb-page-tit · 제품 칩) — 1차 캡처 결함 보정
*/
/* ═══════════ H. 셸 — 캡처 결함 보정 ═══════════ */
/* 연하게 보이던 글자 — weight 300(LINESeed Thin) 금지 */
.lnb .biz-logo{ color:#505050; font-weight:600; }
.lnb .account .acct-txt b{ font-weight:600; color:#222; }
.lnb .account .acct-txt small{ color:#505050; font-size:13px; }
.lnb .who-line{ color:#505050; font-size:12.5px; line-height:1.55; }
.lnb .who-line b{ color:#222; }
.lnb .grp, .lnb .fav-bar .fav-tit{ font-weight:600; font-size:15px; color:#222; letter-spacing:-0.6px; }
.lnb a{ color:#303030; }
.lnb a .sheet{ color:#505050; }
.ctx .lb-page-tit > span{ font-weight:normal; color:var(--brand); display:inline-flex; align-items:center; gap:2px; }
.ctx .lb-page-tit > span::after{ content:"›"; font-size:14px; line-height:1; opacity:.8; }
.ctx .lb-page-tit > span:empty::after{ content:none; }
.ctx .lb-page-tit > h3{ line-height:1.2; }
.ctx{ overflow:hidden; }
/* 제품 칩 — select 는 화살표 세그먼트만(제품명 중복 노출 제거) */
.ctx > select#ctx-product{
width:36px; min-width:36px; padding:0; color:transparent; appearance:none; -webkit-appearance:none; cursor:pointer; border-left:0;
background:#fff url("data:image/svg+xml;utf8,") no-repeat center / 14px 14px;
}
.ctx > select#ctx-product:hover{ background-color:#fafafa; }
.ctx > select#ctx-product option{ color:#202020; }
.ctx > .kv{ font-size:13px; color:#505050; }
.ctx > .kv b{ color:#222; font-weight:600; }
.ctx .pname{ max-width:360px; }
/* 앱바 언어 — 다크 바 위 고스트 select */
.gnb select#lang-sel{
appearance:none; -webkit-appearance:none; width:auto; min-width:96px; height:32px; padding:0 26px 0 10px; color:#fff; cursor:pointer;
border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-sm); color-scheme:dark; font-size:13px;
background:transparent url("data:image/svg+xml;utf8,") no-repeat right 8px center / 12px 12px;
}
.gnb select#lang-sel:hover{ border-color:rgba(255,255,255,.5); }
.gnb select#lang-sel option{ color:#202020; background:#fff; }
/* ═══════════ A. 글자 ═══════════ */
.note, .sheet-does{ color:#606060; font-size:13px; line-height:1.6; }
.row .note{ color:#222; font-size:14px; font-weight:bold; }
.card h2{ color:#222; }
.card h2 .help{ font-weight:600; color:#505050; }
.mono, td.mono{ font-family:var(--mono, "Cascadia Mono", Consolas, monospace); font-size:12.5px; color:#505050; letter-spacing:0; }
td.wrap{ white-space:normal !important; word-break:keep-all; line-height:1.5; }
ul.note, ol.note{ margin:6px 0; padding-left:18px; }
ul.note li, ol.note li{ margin:3px 0; }
pre.note{ background:#fafafa; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; font-family:var(--mono, Consolas, monospace); font-size:12.5px; color:#303030; }
.help-pop .miss{ color:#909090; font-style:normal; }
ol.flow{ margin:8px 0 4px; padding-left:22px; }
ol.flow li{ margin:0 0 8px; font-size:14px; color:#303030; }
ol.flow li::marker{ color:var(--brand); font-weight:600; font-family:var(--font-num); }
ol.flow .flow-step b{ font-size:14px; color:#222; }
details.flow-card{ margin-bottom:14px; }
/* ═══════════ B. 컨트롤 — 어디에 있든 같은 Textinput/Divselect ═══════════ */
/* 기본 40px. 예외(.gnb-search · .lg-field · 표 셀 · 체크박스)는 아래에서 다시 정한다 */
.main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.main select, .main textarea,
.ask input:not([type="checkbox"]), .ask select, .ask textarea,
.help-pop input, .help-pop select{
height:40px; padding:0 12px; font-family:var(--font); font-size:15px; letter-spacing:-0.3px; color:#202020;
border:1px solid var(--line-2); border-radius:var(--radius); background-color:#fff; transition:border-color .2s, box-shadow .2s; box-sizing:border-box;
min-width:0; max-width:100%;
}
.main input::placeholder, .ask input::placeholder, .main textarea::placeholder{ color:#aaa; }
.main input:hover, .main select:hover, .main textarea:hover, .ask input:hover, .ask select:hover{ border-color:#b7afd4; }
.main input:focus, .main select:focus, .main textarea:focus, .ask input:focus, .ask select:focus{ border-color:var(--brand); outline:none; box-shadow:none; }
.main input:disabled, .main select:disabled, .main textarea:disabled, .ask input:disabled{ background-color:#f4f4f4; color:#aaa; border-color:#e3e3e3; }
.main input[readonly]{ background-color:#fafafa; }
/* select → Divselect */
.main select, .ask select, .help-pop select, .paging-ty1 select, .login-foot select{
appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
background:#fff url("data:image/svg+xml;utf8,") no-repeat right 12px center / 12px 12px;
text-overflow:ellipsis;
}
.main select:hover, .ask select:hover{ box-shadow:2px 2px 4px rgba(0,0,0,.10); }
.main select:focus, .ask select:focus{ box-shadow:none; }
.main select[multiple], .main select[size]{ height:auto; padding:6px; background-image:none; }
select option{ color:#202020; font-weight:normal; background:#fff; }
.row select{ max-width:420px; }
/* textarea */
.main textarea, .ask textarea{ height:auto; min-height:96px; padding:10px 12px; line-height:1.55; resize:vertical; font-size:14px; }
/* date / number / search */
.main input[type="date"]{ padding-right:8px; font-family:var(--font-num); font-size:14px; }
.main input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
.main input[type="number"]{ font-family:var(--font-num); }
.main input[type="search"]::-webkit-search-cancel-button{ cursor:pointer; }
/* 체크박스·라디오 — 브랜드색 */
.main input[type="checkbox"], .main input[type="radio"], .ask input[type="checkbox"]{
width:18px; height:18px; margin:0; accent-color:var(--brand); cursor:pointer; vertical-align:middle; flex:none;
}
.main label{ font-size:14px; color:#303030; display:inline-flex; align-items:center; gap:6px; }
/* 파일 선택 */
.main input[type="file"], .ask input[type="file"]{
display:inline-flex; align-items:center; height:40px; padding:0 12px 0 0; max-width:100%; min-width:260px;
border:1px solid var(--line-2); border-radius:var(--radius); background:#fff; color:#505050; font-size:14px; letter-spacing:-0.3px; font-family:var(--font);
}
input[type="file"]::file-selector-button{
height:38px; margin:0 12px 0 0; padding:0 14px; border:0; border-right:1px solid var(--line-2); border-radius:7px 0 0 7px;
background:#f4f4f4; color:#333; font:inherit; font-size:14px; letter-spacing:-0.8px; cursor:pointer; transition:all .3s;
}
input[type="file"]:hover::file-selector-button{ background:#ece7fc; color:var(--brand); }
input[type="file"]:focus{ outline:none; border-color:var(--brand); }
/* 칩형 체크(label.chk — 템플릿 편집기·열 고르기) */
label.chk{ height:32px; padding:0 12px 0 10px; border:1px solid var(--line-2); border-radius:1000px; background:#fff; font-size:13px; color:#303030; gap:6px; transition:all .2s; }
label.chk:hover{ border-color:#b7afd4; }
label.chk:has(input:checked){ background:#ece7fc; color:var(--brand); border-color:#d3d0f5; font-weight:600; }
label.chk input[type="checkbox"]{ width:15px; height:15px; }
/* 표 셀 안 컨트롤 — 32px small (배치 LOT·체크리스트 판정·개발 목표·ERP 매핑·문서 입력·시트 매핑) */
.main table td input:not([type="checkbox"]):not([type="radio"]), .main table td select, .main table td textarea{
height:32px; padding:0 10px; font-size:13px; border-radius:var(--radius-sm); width:100%; min-width:72px;
}
.main table td select{ padding-right:28px; background-position:right 8px center; background-size:11px 11px; }
.main table td textarea{ height:auto; min-height:60px; padding:6px 10px; }
.main table td input[type="checkbox"]{ width:16px; height:16px; }
.main table td .btn.btn-sm{ height:30px; padding:0 10px; font-size:13px; }
/* 셸 안 예외 — 전역 규칙에 덮이지 않게 다시 못박는다 */
.gnb-search input{ height:auto; border:0; border-radius:0; background:transparent; color:#fff; font-size:14px; padding:2px 0; }
.lg-field input{ height:auto; border:0; border-radius:0; background:transparent; padding:2px 0; font-size:15px; color:#202020; }
.login-foot select{ height:32px; border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:0 30px 0 10px; font-size:13px; color:#505050; background-position:right 10px center; }
/* .row — 라벨·컨트롤·단추가 한 줄에 정렬 */
.row{ gap:8px; align-items:center; }
.row > label{ font-size:14px; font-weight:bold; color:#222; white-space:nowrap; }
.row .sep{ width:1px; height:22px; background:var(--line); margin:0 4px; }
/* ═══════════ C. 단추 ═══════════ */
#cmp-expand:empty, #cmp-usage:empty, .card > div[id]:empty{ display:none; }
.card > .btn{ margin:0 6px 10px 0; vertical-align:middle; }
.card > .btn + .btn{ margin-left:0; }
.btn.active, .btn[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-danger:hover{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-primary:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
button.linkish{ color:var(--brand); text-decoration:none; background:none; border:0; padding:0; font-size:inherit; }
button.linkish:hover{ text-decoration:underline; }
/* ═══════════ D. 표 ═══════════ */
table.list, table.lbz-table{ margin:8px 0 0; }
table.lbz-table{ table-layout:auto; }
table.list thead th, table.lbz-table thead th{ text-align:left; padding:12px 12px; vertical-align:middle; }
table.lbz-table thead th.num, table.lbz-table td.num, table.list th.num, table.list td.num{ text-align:right; font-family:var(--font-num); }
table.lbz-table thead th.ctr, table.lbz-table td.ctr{ text-align:center; }
table.lbz-table th .sort-ico{ color:#909090; }
table.list td, table.lbz-table td{ vertical-align:middle; line-height:1.5; }
/* ISS-100·110 — simpleTable 페이지 나눔: 다른 쪽 줄은 숨긴다(입력 값은 DOM 에 남는다) · 쪽 표시는 표 아래에 고정 */
table.list tbody tr.st-off{ display:none; }
table.list tfoot.st-foot td{ position:sticky; bottom:0; background:var(--surface, #fff); padding:4px 8px; border-top:1px solid var(--line); }
table.list tfoot.st-foot .paging-ty1{ margin-top:0; }
table.list tbody tr:last-child td, table.lbz-table tbody tr:last-child td{ border-bottom:0; }
/* 동작 열 — 단추 폭만큼만 */
table.lbz-table thead th[data-col="__act"]{ width:1%; text-align:center; }
table.lbz-table td:has(> .btn[data-act]){ text-align:center; white-space:nowrap; }
table.lbz-table td .btn[data-act]{ height:30px; padding:0 10px; font-size:13px; }
table.list td:has(> .btn:only-child){ white-space:nowrap; }
/* 검색 행 */
table.lbz-table tr.lbz-fltr th{ padding:6px 12px 10px; background:var(--lbz-grid-header-bg); border-bottom:1px solid #e3e1ec; }
table.lbz-table tr.lbz-fltr th input, table.lbz-table tr.lbz-fltr th select{
width:100%; min-width:72px; height:32px; padding:0 10px; font-size:13px; letter-spacing:-0.3px;
border:1px solid var(--line-2); border-radius:var(--radius-sm); background-color:#fff; color:#202020;
}
table.lbz-table tr.lbz-fltr th select{ padding-right:28px; background-position:right 8px center; }
table.lbz-table tr.lbz-fltr th input::placeholder{ color:#aaa; }
table.lbz-table tr.lbz-fltr th input:focus, table.lbz-table tr.lbz-fltr th select:focus{ outline:none; border-color:var(--brand); }
table.lbz-table .selbox input[type="checkbox"]{ width:16px; height:16px; }
/* 표를 감싸는 상자가 없는 simpleTable — 카드 안에서 테두리 상자로 */
.card > table.list, .tab-panel > table.list, .card > div > table.list{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; border-collapse:separate; border-spacing:0; }
.card > table.list thead th:first-child{ border-top-left-radius:var(--radius); }
.card > table.list thead th:last-child{ border-top-right-radius:var(--radius); }
/* kv 표 */
table.kv{ font-size:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; border-collapse:separate; border-spacing:0; }
table.kv th{ background:var(--lbz-grid-header-bg); color:#303030; font-weight:600; width:160px; }
table.kv tr:last-child th, table.kv tr:last-child td{ border-bottom:0; }
/* 링크·배지·진행률·D-day (grid.js 렌더러) */
.lbz-badge{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:1000px; font-size:12px; color:#fff; white-space:nowrap; cursor:pointer; }
.lbz-link{ color:var(--brand); }
.lbz-link:hover{ text-decoration:underline; }
.lbz-prog{ position:relative; height:10px; background:#f0f0f4; border-radius:5px; min-width:80px; overflow:visible; }
.lbz-prog .bar{ height:100%; background:var(--brand); border-radius:5px; }
.lbz-prog span{ position:absolute; right:-40px; top:-4px; font-size:12px; font-family:var(--font-num); color:#505050; }
.lbz-dday{ font-family:var(--font-num); font-weight:600; color:#505050; }
.lbz-dday.over{ color:#c1002c; }
.lbz-dday.near{ color:#a8410a; }
.lbz-legend{ display:flex; gap:14px; margin:0 0 8px; font-size:13px; color:#505050; }
.lbz-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }
.lbz-sheet-del{ color:#c1002c; }
/* DHTMLX 시트 */
.dhx_tooltip{ background:#333 !important; color:#fff !important; border-radius:6px !important; font-size:12px !important; padding:6px 10px !important; }
.dhx_grid-header-cell{ font-weight:600 !important; }
.dhx_grid-cell{ color:#303030; }
.dhx_grid-row:hover .dhx_grid-cell{ background:var(--lbz-grid-row-hover); }
/* Arrhenius 등 SVG 차트 */
.ac-chart{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; display:inline-block; max-width:100%; overflow:auto; margin:8px 0; }
.ac-chart svg{ font-family:var(--font-num); font-size:12px; }
/* ═══════════ F. 알림 ═══════════ */
p.lbz-err, div.lbz-err{
position:relative; border:1px solid #f8c9d2; background:#fff4f6; color:#303030;
border-radius:var(--radius); padding:10px 14px 10px 42px; font-size:14px; line-height:1.55; margin:10px 0;
}
p.lbz-err::before, div.lbz-err::before{
content:"!"; position:absolute; left:14px; top:11px; width:18px; height:18px; border-radius:50%;
background:var(--color01); color:#fff; font-size:12px; font-weight:bold; line-height:18px; text-align:center; font-family:var(--font-num);
}
/* ISS-120 — 빈 오류 상자는 그리지 않는다(분홍 상자·'!' 만 남아 깨져 보였다) */
p.lbz-err:empty, div.lbz-err:empty{ display:none; }
span.lbz-err{ color:#c1002c; font-size:13px; font-weight:600; }
.lbz-warn{
border-left:0; border:1px solid #ffe2b3; background:#fff8ea; color:#303030; border-radius:var(--radius);
padding:10px 14px; font-size:14px; font-weight:normal; line-height:1.55; margin:10px 0;
}
.lbz-warn b{ color:#9a5c00; }
.lbz-need{ background:#fff4f6 !important; border-color:#f10f3a !important; }
.msg{ font-size:13px; }
.msg.ok{ color:#1f7a5c; }
/* ═══════════ G. 구조 ═══════════ */
.card h3{ display:flex; align-items:center; gap:8px; }
.Tabs{ margin:6px 0 0; }
.Tabs > ul > li > button{ color:#505050; }
.Tabs .tab-panel{ padding-top:14px; }
.Tabs .tab-panel:focus{ outline:none; }
.help-pop .close{ font-size:16px; color:#505050; top:16px; right:16px; }
.help-pop ul{ padding-left:18px; }
.help-pop li{ font-size:14px; color:#303030; }
.help-pop p{ font-size:14px; color:#303030; line-height:1.6; }
.ask p, .ask .note{ font-size:14px; line-height:1.6; }
.ask .ask-row{ margin-top:18px; }
/* 알림함 */
.noti-row{ padding:10px 4px; border-bottom:1px solid var(--line); }
.noti-row .noti-main b{ font-size:14px; color:#222; }
.noti-row .noti-main p{ font-size:13px; color:#606060; }
/* 도움말 열기 단추 — 카드 우측 */
.card h2 .sheet-badge{ margin-left:auto; }
.card h2 .help{ margin-left:0; }
/* ═══════════ 다크 모드 ═══════════ */
body.theme-dark{
.lnb .biz-logo, .lnb .account .acct-txt b, .lnb .grp, .lnb .fav-bar .fav-tit, .lnb a, .lnb .who-line b,
.card h2, .row .note, .row > label, .ctx > .kv b, .main label, ol.flow .flow-step b, .noti-row .noti-main b, label.chk{ color:var(--text); }
.lnb .account .acct-txt small, .lnb .who-line, .note, .sheet-does, .ctx > .kv, .lnb a .sheet, .mono, .noti-row .noti-main p, .Tabs > ul > li > button{ color:var(--muted); }
.main input:not([type="checkbox"]):not([type="radio"]), .main select, .main textarea, .ask input, .ask select, .ask textarea,
.main table td input, .main table td select, .ctx > select#ctx-product, table.lbz-table tr.lbz-fltr th input, table.lbz-table tr.lbz-fltr th select,
.main input[type="file"], label.chk, pre.note, .ac-chart{ background-color:var(--surface); color:var(--text); border-color:var(--line-2); }
.ctx > select#ctx-product{ color:transparent; }
.main input:disabled, .main select:disabled, .main input[readonly]{ background-color:var(--surface-2); color:var(--muted); }
input[type="file"]::file-selector-button{ background:var(--surface-2); color:var(--text); border-color:var(--line-2); }
label.chk:has(input:checked){ background:var(--surface-2); color:var(--pri-on-dark, #a78bfa); }
.gnb-search input{ background:transparent; color:#fff; }
p.lbz-err, div.lbz-err{ background:#3c1620; border-color:#5a2230; color:var(--text); }
span.lbz-err, .lbz-sheet-del{ color:#ff8fa3; }
.lbz-warn{ background:#3a2c10; border-color:#5a4520; color:var(--text); }
.lbz-need{ background:#3c1620 !important; }
table.lbz-table tr.lbz-fltr th{ background:var(--lbz-grid-header-bg); border-bottom-color:var(--line); }
table.kv th{ background:var(--surface-2); color:var(--text); }
.lbz-prog{ background:var(--surface-2); }
.lbz-prog .bar, .lbz-link, ol.flow li::marker, button.linkish{ color:var(--pri-on-dark, #a78bfa); }
.lbz-prog .bar{ background:var(--pri-on-dark, #a78bfa); }
/* ★ 글자색만 주면 **바탕이 흰색 그대로**라 1.11:1 이 된다(실측 38셀).
* DHTMLX 는 제 CSS 로 흰 바탕을 칠하므로 면까지 함께 뒤집는다. */
.dhx_grid, .dhx_grid-content, .dhx_grid-body, .dhx_grid-fixed-cols-wrap,
.dhx_grid-row, .dhx_grid-cell{ background-color:var(--surface); color:var(--text); }
.dhx_grid-cell{ border-color:var(--line) !important; }
.dhx_grid-row:hover .dhx_grid-cell{ background-color:var(--surface-2); }
.dhx_grid-header, .dhx_grid-header-cell{ background-color:var(--lbz-grid-header-bg) !important; color:var(--lbz-grid-header-fg) !important; }
}
/* ═══════════ 제품 문맥 칩 — 칩 전체가 클릭 영역 (README §4 · §2-9) ═══════════
* `linkbiz-shell.js` 가 제품명·select·Rev·고객·상태를 `.ctx-chip` 한 상자로 묶는다.
* select 는 **칩 전체를 덮는 투명 레이어**다 — 사람은 꺾쇠가 아니라 제품 이름을 누른다. */
.ctx .ctx-chip{
position:relative; display:inline-flex; align-items:center; margin-left:auto;
height:32px; background:#fff; border:1px solid var(--line); border-radius:8px;
box-shadow:var(--shadow); overflow:hidden; max-width:min(680px, 52vw);
}
.ctx .ctx-chip:hover{ border-color:#b7afd4; }
.ctx .ctx-chip > .pname{
margin:0; border:0; border-radius:0; box-shadow:none; background:none;
padding:0 8px 0 12px; max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
/* ISS-80 — 상자(32px) 높이에 맞춘 줄 높이로 글자를 **가운데**에 둔다(아이콘 18px 이 줄 상자를 키워 글자가 위로 쏠렸다) */
line-height:30px;
}
.ctx .ctx-chip > .pname::before{ vertical-align:top; line-height:30px; }
/* 투명 select 가 칩 전체를 덮는다 — 키보드 초점도 이것이 받는다 */
.ctx .ctx-chip > select#ctx-product{
position:absolute; inset:0; width:100%; min-width:0; height:100%; margin:0; padding:0;
opacity:0; border:0; cursor:pointer; background:none;
}
.ctx .ctx-chip > select#ctx-product:focus-visible{ opacity:0; }
.ctx .ctx-chip:focus-within{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(86,41,238,.18); }
/* 꺾쇠는 보이게 — 누를 수 있는 곳임을 알린다 */
.ctx .ctx-chip::after{
content:""; flex:none; width:22px; height:100%; margin-right:2px;
background:url("data:image/svg+xml;utf8,") no-repeat center / 13px 13px;
}
.ctx .ctx-chip > .kv{
margin:0; border:0; border-left:1px solid var(--line); border-radius:0; height:100%;
display:inline-flex; align-items:center; padding:0 10px; background:none; white-space:nowrap;
}
.ctx .ctx-chip > .kv[hidden]{ display:none; }
body.theme-dark{
.ctx .ctx-chip{ background:var(--surface); border-color:var(--line-2); }
.ctx .ctx-chip > .kv{ border-left-color:var(--line); }
}
/* ── 개편 v2 (PRD v2.0 V-02·V-03·V-18) — 제품·원료 상세의 탭·단계 막대·남은 일·요약 카드 ──
* 검수(PM-1·PM-2): 탭이 `` 인데 탭 모양은 `button` 에만 있어 **파란 링크 글자 한 줄**로 보였다.
* 선택자(a[role=tab])는 시험이 쓰므로 그대로 두고 모양만 탭으로 맞춘다. */
.Tabs > ul > li > a[role="tab"]{ display:inline-block; padding:10px 18px; font-size:15px; color:#505050; text-decoration:none;
border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .2s, border-color .2s; }
.Tabs > ul > li > a[role="tab"]:hover{ color:var(--text-2); background:var(--hover, rgba(117,84,224,.06)); }
.Tabs > ul > li > a[role="tab"][aria-selected="true"]{ color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.Tabs > ul > li > a[role="tab"]:focus-visible{ outline:2px solid var(--color09, #7554e0); outline-offset:-2px; }
/* 하위 화면 — 칸이 붙은 분할 단추(선택이 분명하게) */
.pd-subtabs{ display:inline-flex; gap:0; border:1px solid var(--line-2); border-radius:var(--radius-sm); overflow:hidden; margin:4px 0 10px; }
.pd-subtabs > a[role="tab"]{ border:0; border-right:1px solid var(--line-2); border-radius:0; padding:6px 14px; background:var(--surface); color:#505050; text-decoration:none; font-size:13px; }
.pd-subtabs > a[role="tab"]:last-child{ border-right:0; }
.pd-subtabs > a[role="tab"][aria-selected="true"]{ background:var(--brand); color:#fff; font-weight:600; }
/* 단계 막대 — 누를 수 있다(설계서 §5) */
.pd-step{ cursor:pointer; position:relative; }
.pd-step:hover{ background:var(--hover, rgba(117,84,224,.06)); }
.pd-step:focus-visible{ outline:2px solid var(--color09, #7554e0); outline-offset:1px; }
.pd-step .pd-step-name{ font-size:14px; }
.pd-step.cur{ outline:2px solid var(--brand); outline-offset:-2px; }
.pd-step .pd-step-mark{ font-size:11px; color:var(--muted); }
.pd-step.done .pd-step-mark{ color:var(--success); }
/* 남은 일 · [다음 단계로] */
.pd-todo{ border:1px solid var(--line-2); border-left:4px solid var(--brand); border-radius:var(--radius-sm); padding:8px 12px; margin:8px 0; background:var(--surface); }
.pd-todo.ok{ border-left-color:var(--success); }
.pd-todo h4{ margin:0 0 4px; font-size:14px; }
.pd-todo ul{ margin:4px 0 6px 18px; padding:0; }
.pd-todo li{ margin:2px 0; }
.pd-todo .row{ gap:8px; align-items:center; }
/* ISS-27(1) — 관문 막힘 이유는 '남은 일' 상자 **안의 한 구역**이다(따로 상자를 치면 영역이 둘로 보인다) */
.pd-todo-gate{ margin:6px 0 0; padding:6px 0 0; border-top:1px dashed var(--line-2); }
.pd-todo-gate strong{ font-size:13px; color:var(--warn-ink, var(--text)); }
/* ISS-11 — 승인 비밀번호는 [승인] 과 **같은 줄**(표 안 작업 칸)에 둔다 */
.apv-inline-pw{ width:150px; margin-right:4px; vertical-align:middle; }
/* ISS-84 — 결재 바는 화면 위에 고정된다(스크롤해도 [저장]·[검토 요청]·[승인] 이 보인다) */
.apv-sticky{ position:sticky; top:0; z-index:15; background:var(--surface, #fff); box-shadow:0 2px 6px rgba(0,0,0,.06); }
.row.apv-sticky{ padding:8px 10px; margin:0 0 10px; border:1px solid var(--line-2); border-radius:var(--radius, 8px); }
.apv-sticky .apv-acts{ margin-left:auto; gap:6px; }
/* ISS-86 ② — 확인 창의 '대상 · 행위' 줄 */
.ask .ask-what{ margin:0 0 8px; padding:6px 8px; background:var(--surface-2); border-radius:6px; font-size:13px; }
/* ══ ISS-31 AI 보조 표시 — 디자인 토큰 안에서(새 색을 만들지 않는다) ══ */
.ai-strip{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.ai-badge{ height:22px; padding:0 9px; border:1px solid #d3d0f5; border-radius:1000px;
background:#ece7fc; color:var(--brand); font-size:11px; font-weight:600; line-height:20px; cursor:pointer; }
.ai-badge:hover{ background:#e3dcfb; }
.ai-engine{ font-size:11px; color:var(--muted); }
/* R-30(ISS-31) — AI 가 채운 값: 옅은 배경 + 왼쪽 ✦. 사람이 고치면 클래스가 빠진다 */
input.ai-filled{ background:#f3f0fe linear-gradient(transparent, transparent); padding-left:18px;
background-image:none; position:relative; box-shadow:inset 3px 0 0 #b8acf6; }
td:has(> input.ai-filled){ position:relative; }
td:has(> input.ai-filled)::before{ content:"✦"; position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--brand); pointer-events:none; z-index:1; }
body.theme-dark input.ai-filled{ background:#2d2750; }
.ai-code{ font-size:10px; }
/* ISS-35 · ISS-52 · ISS-53 — 고칠 칸 강조 · 코드는 작게 */
.field-err{ outline:2px solid var(--fail, #d43c3c); outline-offset:1px; }
.err-code{ font-size:10px; color:var(--muted); font-weight:400; margin-left:4px; }
.gate-why{ margin:4px 0 0; padding-left:18px; font-size:13px; }
.gate-why li{ margin:2px 0; }
.ai-tip{ flex-basis:100%; max-width:520px; padding:8px 10px; border:1px solid var(--line-2);
border-left:3px solid var(--brand); border-radius:var(--radius-sm); background:var(--surface); }
.ai-tip p{ margin:0 0 3px; font-size:12px; }
.ai-tip p:last-child{ margin-bottom:0; }
.ai-fold{ flex-basis:100%; }
.ai-fold > summary{ font-size:12px; color:var(--muted); cursor:pointer; }
.ai-list{ margin:6px 0 0 16px; padding:0; }
.ai-list li{ margin:0 0 6px; font-size:12px; }
/* AI 가 채운 값 — 옆한 바탕 + 왼쪽 ✦. 사람이 고치면 지운다(화면이 data-ai 를 떼다) */
[data-ai="filled"]{ background:#f6f4ff; }
[data-ai="filled"]::before{ content:"\2726 "; color:var(--brand); font-size:10px; }
/* ══ ISS-32 물어보기 — 기존 카드·버튼 토큰을 그대로 쓴다 ══ */
.ask-panel{ margin:0 0 14px; }
.sq-input{ flex:1 1 320px; min-width:240px; }
.sq-suggest{ gap:6px; flex-wrap:wrap; margin:8px 0 0; }
.sq-chip{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border:1px solid var(--line-2);
border-radius:1000px; background:var(--surface); font-size:11px; color:var(--text); }
.sq-chip[data-kind="intent"]{ background:#ece7fc; border-color:#d3d0f5; color:var(--brand); font-weight:600; }
.sq-chip.from-ctx{ border-style:dashed; color:var(--muted); }
#sq-parsed{ gap:6px; flex-wrap:wrap; margin:8px 0 0; }
.sq-card{ margin:10px 0 0; padding:10px 12px; border:1px solid var(--line-2);
border-left:3px solid var(--brand); border-radius:var(--radius-sm); background:var(--surface); }
.sq-card.empty{ border-left-color:var(--muted); }
.sq-card-top{ gap:6px; margin:0 0 6px; }
.sq-answer-text{ margin:0 0 6px; font-size:14px; line-height:1.55; }
.sq-basis{ margin:6px 0 4px; }
.sq-nexts{ gap:6px; flex-wrap:wrap; margin:8px 0 0; }
.sq-chat{ margin:12px 0 0; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--bg, #fafafa); }
.sq-log{ max-height:460px; overflow:auto; }
.sq-me{ margin:10px 0 0; padding:6px 10px; border-radius:var(--radius-sm); background:#ece7fc; color:var(--brand); font-size:13px; font-weight:600; }
/* ISS-57 — 대화창: 내 질문은 오른쪽 말풍선, 답은 왼쪽 말풍선 */
.sq-log{ display:flex; flex-direction:column; gap:2px; padding:4px 2px; }
.sq-log .sq-me{ align-self:flex-end; max-width:78%; border-radius:14px 14px 4px 14px; }
.sq-log .sq-bot{ align-self:flex-start; max-width:86%; border-left-width:1px; border-radius:14px 14px 14px 4px; }
.sq-bot .ai-badge{ float:right; margin:0 0 4px 8px; }
.sq-more{ margin:4px 0 0; font-size:12px; }
.sq-more > summary{ cursor:pointer; color:var(--brand); }
.sq-links{ gap:10px; flex-wrap:wrap; margin:6px 0 0; font-size:12px; }
.sq-link{ color:var(--brand); text-decoration:none; }
.sq-link:hover, .sq-link:focus{ text-decoration:underline; }
.sq-typing .sq-dots{ display:inline-block; letter-spacing:2px; animation:sqBlink 1s infinite; }
@keyframes sqBlink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .sq-typing .sq-dots{ animation:none; } }
.sq-chat-in{ gap:6px; margin:10px 0 0; flex-wrap:wrap; }
/* ══ ISS-33 홈 대시보드 — 12칸 격자 4줄 ══ */
.dash-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:12px; margin:0 0 14px; }
.dash-card{ grid-column:span 4; padding:12px 14px; }
.dash-card[data-span="12"]{ grid-column:span 12; }
.dash-card[data-span="8"]{ grid-column:span 8; }
.dash-card-head{ gap:8px; align-items:center; margin:0 0 8px; }
.dash-card-head h4{ margin:0; font-size:14px; }
.dash-go{ margin-left:auto; }
.dash-brief{ margin:0; font-size:14px; line-height:1.6; }
.dash-nums{ gap:10px; flex-wrap:wrap; }
.dash-numcell{ flex:1 1 140px; display:flex; flex-direction:column; gap:2px; padding:10px 12px;
border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); text-align:left; cursor:pointer; }
.dash-numcell:hover{ border-color:var(--brand); }
.dash-num{ font-size:22px; font-weight:700; font-family:var(--font-num); color:var(--text); }
.dash-num.nodata{ font-size:13px; font-weight:400; color:var(--muted); }
.dash-pipe{ gap:8px; flex-wrap:wrap; }
.dash-stage{ position:relative; min-width:64px; display:flex; flex-direction:column; align-items:center; gap:2px;
padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; }
.dash-stage b{ font-size:18px; font-family:var(--font-num); }
.dash-stage.has-blocked{ border-color:var(--fail); }
.dash-dot{ position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--fail); }
@media (max-width: 1100px){ .dash-card, .dash-card[data-span="8"]{ grid-column:span 6; } }
@media (max-width: 760px){ .dash-card, .dash-card[data-span="8"], .dash-card[data-span="12"]{ grid-column:span 12; } }
/* 요약 카드 */
.pd-sum{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; margin:6px 0 10px; }
.pd-sum > div{ border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:8px 10px; background:var(--surface); }
.pd-sum dt{ font-size:12px; color:var(--muted); margin:0; }
.pd-sum dd{ margin:2px 0 0; font-size:14px; font-weight:600; }
/* ISS-83 — 미확인 알레르기 칸은 색만 경고로 — .lbz-warn 의 여백·글자 크기가 상자 크기를 바꾸지 않게 */
.pd-sum > div.lbz-warn{ margin:0; padding:8px 10px; border-width:1px; font-size:inherit; line-height:inherit; border-radius:var(--radius-sm); }
/* 단추 옆 오류(V-08) */
.btn-err{ display:inline-block; margin-left:8px; color:var(--fail); font-size:13px; vertical-align:middle; }
.btn-err:empty{ display:none; }
body.theme-dark{
.Tabs > ul > li > a[role="tab"]{ color:var(--muted); }
.Tabs > ul > li > a[role="tab"][aria-selected="true"]{ color:var(--pri-on-dark); border-bottom-color:var(--pri-on-dark); }
.pd-subtabs > a[role="tab"]{ color:var(--muted); }
}
.btn-err-box{ flex-basis:100%; }
.btn-err-box:empty{ display:none; }
.apv-who{ margin:2px 0 6px; }
.apv-pwlabel{ align-self:center; }
/* V-06 검색형 선택 */
.pick-search{ gap:6px; align-items:center; margin-right:6px; flex-wrap:wrap; }
.pick-search .pick-q{ min-width:200px; }
.pick-search .pick-cnt{ white-space:nowrap; }