/* ============================================================
   views.css — 대시보드 / 폼 / 계정과목 / 준비중 / 모달 콘텐츠
   ============================================================ */

/* ---------- 전역 검색조건 영역 라인 ----------
   실서비스 기준: 조회/필터 영역은 위·아래 구분선이 항상 보인다. */
.emp-filter,
.dm-search,
.auth-filter,
.pt-filter,
.itm-filter,
.pitem-filter,
.rent-filter,
.psite-filter,
.fa-filter,
.bc-filter,
.ds-filter,
.ps-filter,
.stx-filter,
.rpt-filter,
.eled-filter,
.cert-filter,
.svl-filter,
.sve-filter,
.payr-filter,
.vat-filter,
.ec-filter,
.b2b-filter,
.acctm-toolbar {
  border-top: 1px solid var(--c-bg-cool);
  border-bottom: 1px solid var(--c-bg-cool);
  box-sizing: border-box;
}

/* ---------------- 대시보드 ---------------- */
.dash { min-width: 1360px; color: var(--c-text); }
.dash__top { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: -2px 0 var(--sp-2); color: var(--c-text-3); font-size: var(--fs-12); }
.dash__refresh { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: #fff; }
.dash__refresh .icon { fill: var(--c-text-2); }
.dash__row { display: grid; gap: 28px; margin-bottom: var(--sp-6); }
.dash__hero { grid-template-columns: 2.1fr 1fr 1fr; }
.dash__analytics { grid-template-columns: 1fr 1fr; align-items: start; }
.dash__bottom { grid-template-columns: 2fr 1.15fr .9fr; align-items: stretch; }

.dash-card, .dash-block { background: #fff; border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); }
.dash-card { padding: var(--sp-6); }
.dcard__head, .dash-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dcard__title, .dash-block__title { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.dcard__more { width: 24px; height: 24px; display: grid; place-items: center; color: var(--c-text-3); }
.dcard__more .icon { fill: var(--c-text-3); }
.dcard__more-link { font-size: var(--fs-12); color: var(--c-primary); }
.dcard__body { min-height: 0; }

/* 달력 위젯 */
.dash-schedule { min-height: 168px; display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-5); align-items: stretch; padding: var(--sp-5) var(--sp-6); background: #eef4ff; border-radius: var(--r-lg); }
.calbox { min-width: 0; }
.calbox__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 36px; }
.calbox__title { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.cal__nav { width: 20px; height: 20px; display: grid; place-items: center; color: #222; font-size: var(--fs-16); font-weight: var(--fw-bold); }
/* 칩 7개가 박스보다 넓다(실측 356 > 300) — hidden 이면 마지막 칩이 잘린 채 끝난다 */
.cal-strip { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.cal-chip { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 60px; border-radius: var(--r-md); background: #fff; }
.cal-chip__d { font-size: var(--fs-18); font-weight: var(--fw-bold); color: #222; line-height: 1; }
.cal-chip__w { font-size: var(--fs-12); color: var(--c-text-2); }
.cal-chip.is-holiday .cal-chip__d, .cal-chip.is-holiday .cal-chip__w { color: var(--c-error); }
.cal-chip.is-active { background: #7fa3ff; }
.cal-chip.is-active .cal-chip__d, .cal-chip.is-active .cal-chip__w { color: #fff; }
.calbox__detail { min-width: 0; background: #fff; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.calbox__date { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-primary); margin-bottom: var(--sp-3); }
.calbox__event { font-size: var(--fs-13); color: #222; padding: 2px 0; }
.calbox__empty { font-size: var(--fs-13); color: var(--c-text-3); }
.cal-chip { cursor: pointer; }
.cal-chip:hover:not(.is-active) { background: #f4f7ff; }
.cal__nav:hover { color: var(--c-primary); }

/* 리스트형(공지/업데이트) */
.dlist__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px dashed var(--c-border-2); }
.dlist__title { font-size: var(--fs-13); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlist__date { font-size: var(--fs-12); color: var(--c-text-3); flex: none; }

/* 튜토리얼 안내 배너 (메인 우측) — 부제·기간·모니터 아이콘을 뺀 뒤로는 우측 absolute
   장식이 없어 글줄 폭을 막을 이유가 사라졌다(예전 `max-width: calc(100% - 190px)` 는
   1920 기준 130px 라 32px 제목이 '데모사이/트'로 접혔다). 대신 flex 칼럼으로 세워
   배지는 위, 주황 배지는 카드 하단에 붙인다. word-break:keep-all 로 한글이 어절
   중간에서 끊기지 않게 한다. */
.demo-ad { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 168px; overflow: hidden; border-radius: var(--r-lg); padding: 26px 32px; color: #fff; background: linear-gradient(135deg, #2733c8 0%, #376cfb 100%); }
.demo-ad::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(150deg, rgba(255,255,255,.08) 0 2px, transparent 2px 24px); opacity: .35; }
.demo-ad__badge { position: relative; flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 14px; margin-bottom: 12px; border-radius: var(--r-pill); background: rgba(0,0,0,.22); font-size: var(--fs-12); font-weight: var(--fw-bold); }
.demo-ad__title { position: relative; flex: none; display: block; font-size: 24px; line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: -.3px; word-break: keep-all; }
.demo-ad__title b { color: var(--t-yellow); font-weight: 800; }
.demo-ad__copy { position: relative; flex: none; margin-top: 12px; font-size: var(--fs-14); line-height: 1.55; color: #CEF1FF; word-break: keep-all; }
/* 주황 배지는 카드 우하단 빈 자리로 — absolute 로 띄우면 1600(카드폭 318)에서 소개문구와
   겹치므로, 흐름 안에 두고 align-self 로만 오른쪽에 붙인다(겹치는 대신 카드가 커진다). */
.demo-ad__gift { position: relative; flex: none; align-self: flex-end; margin-top: 14px; display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border-radius: var(--r-pill); background: #ff8b1f; color: #fff; font-size: var(--fs-14); font-weight: var(--fw-bold); box-shadow: 0 8px 18px rgba(0,0,0,.18); }

/* 차트 */
.dash-block { border: 0; background: transparent; }
.dash-block__head { min-height: 32px; margin-bottom: var(--sp-3); }
.dash-block__meta { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; font-size: var(--fs-12); color: var(--c-text-3); }
.chart-panel, .top-panel { background: #fff; border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); overflow: hidden; }
.chart-panel { padding: var(--sp-5); }
.chart__legend { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; margin-bottom: var(--sp-2); font-size: var(--fs-12); color: var(--c-text-2); }
.chart__lg { display: inline-flex; align-items: center; gap: 4px; }
.chart__sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart__sw--a { background: var(--c-brand); }
.chart__sw--b { background: #e2eaff; }
.chart__unit { color: var(--c-text-3); margin-left: auto; }
.chart__grid { display: flex; gap: var(--sp-2); height: 234px; }
.chart__y { display: flex; flex-direction: column; justify-content: space-between; width: 52px; text-align: right; font-size: 11px; color: var(--c-text-3); padding-bottom: 18px; }
.chart__plot { flex: 1; display: flex; align-items: flex-end; gap: 4px; border-left: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); }
.chart__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.chart__bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; }
.chart__bar { width: 13px; min-height: 0; border-radius: 2px 2px 0 0; transition: height .3s; }
.chart__bar--a { background: var(--c-brand); }
.chart__bar--b { background: #e2eaff; }
.chart__x { font-size: 11px; color: var(--c-text-3); margin-top: 5px; }

/* TOP5 */
.toptable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-13); }
.toptable th { height: 32px; text-align: center; color: #222; font-weight: var(--fw-bold); padding: 6px 10px; border-right: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); background: #eaf2ff; font-size: var(--fs-13); }
.toptable th:nth-child(1) { width: 38%; }
.toptable th:nth-child(2) { width: 23%; }
.toptable th:nth-child(3) { width: 39%; }
.toptable th:last-child { border-right: 0; }
.toptable th.is-right, .toptable td.is-right { text-align: right; }
.toptable td { height: 32px; padding: 7px 12px; border-right: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); background: #fff; }
.toptable tbody tr:last-child td { border-bottom: 0; }
.toptable td:last-child { border-right: 0; }
.toprow--sum td { background: #eaf2ff; font-weight: var(--fw-bold); }
.top-piecell { padding: 0; text-align: center; vertical-align: middle; }
.piechart { width: 270px; height: 212px; max-width: 100%; overflow: visible; }
.piechart__line { fill: none; stroke: #777; stroke-width: 1; }
.piechart__label { fill: #666; font-size: 12px; font-weight: var(--fw-bold); }

/* 통계 카드 */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: var(--sp-6); padding: var(--sp-5) var(--sp-4); background: #fff; border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); }
.statbox { min-width: 0; padding: 0 var(--sp-4); border-left: 1px solid transparent; }
.statbox + .statbox { border-left-color: transparent; }
.statbox__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.statbox__head strong { flex: none; color: var(--c-brand); font-size: var(--fs-16); font-weight: var(--fw-bold); }
.statbox__head i { flex: 1; border-top: 1px dashed var(--c-border-2); }
.statbox__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.statbox__metric { min-width: 0; }
.statbox__amount { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-3); background: #e4e4e4; border-radius: var(--r-sm); }
.statbox__amount.is-sales { background: #e5ebff; }
.statbox__amount span, .statbox__count span { flex: none; font-size: var(--fs-13); color: #222; }
.statbox__amount b, .statbox__count b { min-width: 0; white-space: nowrap; font-size: var(--fs-14); color: #222; font-weight: var(--fw-bold); text-align: right; }
.statbox__count { height: 30px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-2); }

/* FAQ */
.dash-updates { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; min-height: 168px; }
.update-col { min-width: 0; }
.dash-faq { min-height: 168px; display: grid; grid-template-columns: 110px 1fr; grid-template-rows: 1fr auto; column-gap: var(--sp-5); align-items: start; }
.faq-head strong { display: block; color: var(--c-brand); font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: 0; }
.faq-head span { display: block; color: var(--c-text-2); font-size: var(--fs-13); }
.faqtags { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.faqtag { height: 36px; padding: 0 10px; border-radius: var(--r-md); font-size: var(--fs-13); color: var(--c-text-2); background: #f4f4f4; }
.faqtag:hover { color: var(--c-primary); background: var(--c-primary-bg); }
.dash-faq .dcard__more-link { grid-column: 1; align-self: end; }
.guide-stack { display: grid; gap: var(--sp-4); }
.guide-card { position: relative; overflow: hidden; min-height: 76px; padding: var(--sp-4) 98px var(--sp-4) var(--sp-6); text-align: left; background: #fff; border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); }
.guide-card__sub { display: block; margin-bottom: 5px; font-size: var(--fs-12); color: #aaa; }
.guide-card strong { display: block; font-size: var(--fs-20); font-weight: var(--fw-bold); color: #555; letter-spacing: 0; }
.guide-card__mark { position: absolute; right: 28px; top: 18px; width: 46px; height: 38px; border-radius: 6px; background: #d7e5ff; }
.guide-card__mark::before, .guide-card__mark::after { content: ''; position: absolute; background: #8db5ff; border-radius: 3px; }
.guide-card__mark::before { left: 8px; top: 9px; width: 30px; height: 4px; box-shadow: 0 9px 0 #8db5ff, 0 18px 0 #8db5ff; }
.guide-card__mark::after { right: -14px; top: -8px; width: 10px; height: 10px; box-shadow: -22px -4px 0 #c7dcff, 6px 18px 0 #c7dcff; }
.guide-card__mark--play::before { left: 17px; top: 9px; width: 0; height: 0; background: transparent; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #8db5ff; box-shadow: none; border-radius: 0; }
.guide-card__mark--play::after { right: -10px; top: -8px; width: 8px; height: 8px; box-shadow: -24px -5px 0 #c7dcff, 7px 19px 0 #c7dcff; }
.login__newshead { display: flex; align-items: center; border-bottom: 2px solid var(--c-text); padding-bottom: 6px; font-size: var(--fs-14); }

/* ---------------- 폼(회사정보) — 실서비스 100% 정합 ---------------- */
/* 고정 1600px 캔버스: 좁은 창에서 좌우 스크롤 재현(실서비스 .bs-02 동일) */
.companyform { width: 1600px; min-width: 1600px; padding-bottom: 28px; color: var(--c-text); }
/* 섹션 타이틀 */
.cf-title { width: 1050px; display: flex; align-items: baseline; gap: 8px; padding: 12px 32px 0 0; }
.cf-title strong { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.cf-title .cf-desc { font-size: var(--fs-12); color: var(--c-text-3); }
.cf-title .cf-save { margin-left: auto; }
/* 구분선 */
.cf-divider { height: 1px; background: var(--c-bg-cool); margin: 12px 0; }
/* 필드 그룹 */
.cf-group { width: 1050px; padding: 24px 32px; }
.cf-group.cf-col2 { display: grid; grid-template-columns: 473px 473px; column-gap: 40px; row-gap: 20px; align-content: start; }
.cf-item { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.cf-item.cf-full { grid-column: 1 / -1; }
/* 라벨 */
.cf-tit { width: 108px; min-width: 108px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; padding: 7px 0; }
.cf-tit.req::after { content: '*'; color: var(--c-required); margin-left: 2px; }
/* 입력 박스 */
.cf-box { flex: 1; display: flex; align-items: center; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; min-width: 0; }
.cf-box input { width: 100%; height: 30px; border: 0; padding: 0 12px; font-size: var(--fs-14); color: #222; background: transparent; }
.cf-box input::placeholder { color: var(--c-text-3); }
.cf-box.is-disabled { background: var(--c-bg-soft); }
.cf-box.is-disabled input { color: var(--c-text-2); }
.cf-box--fixed { flex: none; }
.cf-iconbtn { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: transparent; }
.cf-iconbtn .icon { fill: var(--c-text-3); width: 18px; height: 18px; }
/* 분할 입력(연락처/주민번호/Fax) */
.cf-split { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cf-split .cf-box { flex: 1; }
.cf-split .cf-sep { color: var(--c-text-3); flex: none; }
/* 라디오 */
.cf-radio { flex: 1; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.cf-radio label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: #222; cursor: pointer; }
.cf-radio input { width: 18px; height: 18px; accent-color: var(--c-primary); margin: 0; }
.cf-radio input:disabled + span { color: var(--c-text-2); }
/* 보조 버튼 (불러오기/연동관리/해지) */
.cf-sidebtn { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; }
.cf-sidebtn:hover { background: var(--c-primary-bg); }
.cf-info { flex: none; width: 16px; height: 16px; }
.cf-info .icon { fill: var(--c-text-3); width: 16px; height: 16px; }
/* 셀렉트(콤보) */
.cf-select { flex: 1; display: flex; align-items: center; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; padding: 0 8px 0 12px; font-size: var(--fs-14); color: #222; justify-content: space-between; }
.cf-select.is-disabled { background: var(--c-bg-soft); color: var(--c-text-2); }
.cf-select .icon { fill: var(--c-text-3); width: 16px; height: 16px; }
/* 대표자 추가/삭제 */
.cf-addbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.cf-addbtn:hover { background: var(--c-primary-bg); }
.cf-addbtn .icon { fill: var(--c-primary); width: 16px; height: 16px; }
.cf-addbtn--minus { border-color: var(--c-border); color: var(--c-text-2); }
.cf-addbtn--minus .icon { fill: var(--c-text-2); }
/* 저장 버튼 */
.cf-save { height: 32px; min-width: 80px; padding: 0 12px; border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.cf-save:hover { background: var(--c-brand-dark); }
/* 주소 (full) */
.cf-addr { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-addr__row { display: flex; align-items: center; gap: 6px; }
.cf-addr__zip { width: 144px; flex: none; }
.cf-addr__main { flex: 1; }
/* 첨부 */
.cf-attinfo { font-size: var(--fs-12); color: var(--c-text-3); margin-bottom: var(--sp-4); }
.cf-attlist { display: flex; flex-wrap: wrap; gap: 100px; list-style: none; }
.cf-attcard { width: 226px; }
.cf-attcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.cf-attcard__tit { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; display: flex; align-items: center; gap: 4px; }
.cf-attcard__upload { margin-left: auto; height: 28px; padding: 0 10px; border: 1px solid var(--c-primary); border-radius: var(--r-sm); background: #fff; color: var(--c-primary); font-size: var(--fs-12); white-space: nowrap; }
.cf-attcard__upload:hover { background: var(--c-primary-bg); }
.cf-attcard__body { border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.cf-attcard__img { width: 100%; height: 120px; position: relative; display: grid; place-items: center; background: var(--c-bg-soft); border-radius: var(--r-sm); padding: var(--sp-4); }
.cf-attcard__img img { position: absolute; inset: var(--sp-4); width: calc(100% - var(--sp-4) * 2); height: calc(100% - var(--sp-4) * 2); object-fit: contain; }
.cf-attcard__img .icon { width: 40px; height: 40px; fill: var(--c-border); }
.cf-attcard__name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--c-text-2); }
.cf-attcard__del { color: var(--c-text-3); font-size: var(--fs-12); text-decoration: underline; background: transparent; }
.cf-attcard__del:hover { color: var(--c-error); }

/* 모달 폼 그리드 */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5); }
.formcell { display: flex; flex-direction: column; gap: 5px; }
.formcell--full { grid-column: 1 / -1; }
.formcell__label { font-size: var(--fs-13); color: var(--c-text-2); font-weight: var(--fw-medium); }
.formcell__ctrl > .input, .formcell__ctrl > .select { width: 100%; }
.formcell.input--invalid .formcell__ctrl .input { border-color: var(--c-error); }
.formcheck { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--c-text-2); }

/* ---------------- 계정과목 ---------------- */
.acct { display: grid; grid-template-columns: 240px 1fr; min-height: 520px; }
.acct__left { border-right: 1px solid var(--c-border-2); padding: var(--sp-4); }
.acct__lefthead { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-text-2); margin-bottom: var(--sp-3); }
.acctree { display: flex; flex-direction: column; gap: 4px; }
.acctree__node { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-14); color: var(--c-text); background: var(--c-bg-soft); }
.acctree__node:hover { background: #e9edf3; }
.acctree__node.is-active { background: var(--c-primary); color: #fff; }
.acctree__cnt { font-size: var(--fs-12); opacity: .8; }
.acct__right { padding-top: var(--sp-2); min-width: 0; }
.acct__right .grid { margin: 0 var(--sp-4) var(--sp-4); }

.gridhost { min-height: 120px; }

/* 부팅 실패 안내 — 메인(P.guideHome)을 못 열었을 때 #app 에 남기는 마지막 문구.
   js/99-app.js renderHome(). 스타일이 없으면 빈 화면 좌상단에 본문 글자만 덩그러니 남는다. */
.apperr { padding: 90px var(--sp-5); text-align: center; font-size: var(--fs-14); color: var(--c-text-3); }

/* ---------------- 준비중 ---------------- */
.soon { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: 90px var(--sp-5); text-align: center; }
.soon__icon { width: 64px; height: 64px; display: grid; place-items: center; background: var(--c-bg-soft); border-radius: 50%; }
.soon__icon .icon { width: 30px; height: 30px; fill: var(--c-text-3); }
.soon__title { font-size: var(--fs-20); font-weight: var(--fw-bold); }
.soon__desc { color: var(--c-text-3); margin-bottom: var(--sp-3); }

/* ※ 온보딩(.onboard)·정기점검(.notice) 모달 규칙은 2026-08 구조개편(A안)에서 지웠다 —
   유일한 사용처였던 showOnboarding()·P.login.showMaintenanceNotice() 가 랜딩 화면과
   함께 없어졌다. 제목 없는 모달의 빈 헤더 처방은 .gdone-card 쪽에 같은 형태로 남아 있다.
   (`.hcert-field--notice` 는 이름만 비슷한 별개 규칙이다 — 홈택스 증명 화면) */

/* 페이지 서브탭 컨테이너 */
.page__subtabs { padding: var(--sp-3) var(--sp-5) 0; }

/* ---------------- 직원관리 (마스터-디테일) — 실서비스 정합 ---------------- */
/* 루트 폭: 라이브는 넓은 화면에서 좌측 직원목록만 고정(720px)이고 우측 상세폼이 남은 폭을 전부 먹는다(3200px 실측) */
.empmgr { width: 100%; min-width: 1600px; box-sizing: border-box; padding-bottom: 28px; color: var(--c-text); }
/* 상위 서브탭 (상시/임시) */
.emp-subtabs { display: flex; border-bottom: 1px solid var(--c-border-2); margin-bottom: var(--sp-4); }
.emp-subtab { width: 200px; height: 32px; position: relative; font-size: var(--fs-16); font-weight: var(--fw-semibold); color: #a8afb8; background: none; }
.emp-subtab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.emp-subtab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px; background: var(--c-brand); border-radius: 2px 2px 0 0; }
/* 필터바 */
.emp-filter { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.emp-search { display: flex; align-items: center; gap: 6px; }
.emp-search__box { display: flex; align-items: center; width: 240px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; }
.emp-search__box input { flex: 1; min-width: 0; border: 0; height: 30px; padding: 0 12px; font-size: var(--fs-14); background: transparent; }
.emp-search__btn { flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand); color: #fff; font-size: var(--fs-13); font-weight: var(--fw-medium); }
.emp-fld { display: flex; align-items: center; gap: 10px; }
.emp-fld__label { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-3); white-space: nowrap; }
.emp-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.emp-seg button { height: 30px; padding: 0 12px; font-size: var(--fs-14); color: var(--c-text-3); background: #fff; border: 0; border-left: 1px solid var(--c-bg-cool); }
.emp-seg button:first-child { border-left: 0; }
.emp-seg button.is-active { background: var(--c-brand); color: #fff; }
.emp-hist { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); }
.emp-hist:hover { background: var(--c-bg-soft); }
/* 본문: 콘텐츠 높이 채움(목록 박스가 하단까지) */
.emp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.emp-filter { flex: none; }
/* 2단 분할 */
.emp-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 720px minmax(856px, 1fr); gap: 24px; align-items: stretch; }
/* 좌: 목록 */
.emp-list { display: flex; flex-direction: column; min-height: 0; }
.emp-form { min-height: 0; overflow-y: auto; }
.emp-listhead { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); }
.emp-listhead__t { font-size: var(--fs-16); font-weight: var(--fw-bold); color: #222; }
.emp-listhead__cnt { display: flex; gap: 10px; font-size: var(--fs-12); color: var(--c-text-3); }
.emp-listhead__btns { margin-left: auto; display: flex; gap: 6px; }
.emp-addbtn { height: 32px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.emp-addbtn:hover { background: var(--c-primary-bg); }
.emp-delbtn { height: 32px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-disabled); font-size: var(--fs-14); cursor: not-allowed; }
/* 그리드 */
/* 그리드 박스: 둥근 테두리(1px #e1e5ea·radius8) + 높이 채움(하단까지) + 내부 스크롤 (실서비스 .wj-flexgrid 동일) */
.emp-gridhost { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.emp-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.emp-grid th:nth-child(2), .emp-grid td:nth-child(2) { width: 132px; }      /* 이름 */
.emp-grid th:nth-child(3), .emp-grid td:nth-child(3),                       /* 사원번호 */
.emp-grid th:nth-child(4), .emp-grid td:nth-child(4),                       /* 부서 */
.emp-grid th:nth-child(5), .emp-grid td:nth-child(5),                       /* 근무유형 */
.emp-grid th:nth-child(6), .emp-grid td:nth-child(6) { width: 110px; }      /* 상태 */
.emp-grid th:nth-child(7), .emp-grid td:nth-child(7) { width: 108px; }      /* 계정사용 */
/* 셀 경계: 세로·가로 모두 #e4e4e4 (실서비스 동일) */
.emp-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; padding: 0 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.emp-grid td { font-size: var(--fs-14); color: #222; height: 30px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-grid th:last-child, .emp-grid td:last-child { border-right: 0; }
.emp-grid tbody tr { cursor: pointer; }
.emp-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.emp-grid tbody tr.is-selected { background: #edf6ff; }
.emp-grid tbody tr.is-selected td { color: var(--c-primary); }
.emp-grid__chk { width: 36px; text-align: center; }
.emp-grid__empty td { text-align: center; color: var(--c-text-3); height: 90px; border-right: 0; }
.emp-grid__demo td { color: var(--c-primary); }
/* 우: 폼 (cf-* 재사용) — 섹션은 여백으로만 분리(실서비스 폼엔 구분선 없음) */
.emp-sec { display: flex; align-items: baseline; gap: 8px; margin-top: var(--sp-6); padding: 0 30px; }
.emp-form > .emp-sec:first-child { margin-top: var(--sp-1); }
.emp-empty { display: grid; place-items: center; min-height: 300px; color: var(--c-text-3); font-size: var(--fs-14); }
.emp-sec strong { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.emp-sec__desc { font-size: var(--fs-12); color: var(--c-text-3); }
.emp-sec__save { margin-left: auto; height: 32px; min-width: 80px; padding: 0 12px; border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.emp-sec__save:hover { background: var(--c-brand-dark); }
.emp-divider { height: 1px; background: var(--c-bg-cool); margin: var(--sp-4) 0; }
.emp-fgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 20px; padding: 24px 32px; }
/* 사진 블록 */
.emp-photo { display: flex; align-items: flex-start; gap: 16px; }
.emp-photo__box { width: 120px; height: 160px; flex: none; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); display: grid; place-items: center; }
.emp-photo__box .icon { width: 40px; height: 40px; fill: var(--c-border); }
.emp-photo__side { display: flex; flex-direction: column; gap: 8px; padding-top: var(--sp-2); }
.emp-photo__dim { font-size: var(--fs-12); color: var(--c-text-3); }
.emp-photo__btn { width: 90px; height: 30px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); }
.emp-photo__note { font-size: var(--fs-12); color: var(--c-text-3); }
/* 내/외국인 + 단일세율 체크 */
.emp-chkinline { display: flex; align-items: center; gap: 6px; margin-left: 8px; font-size: var(--fs-13); color: var(--c-text-2); white-space: nowrap; }
/* 비고 textarea (임시근로자) */
.cf-textarea { flex: 1; min-width: 0; min-height: 60px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 6px 12px; font-size: var(--fs-14); color: #222; resize: vertical; font-family: inherit; line-height: 1.5; }
.cf-textarea::placeholder { color: var(--c-text-3); }
.cf-item--top { align-items: flex-start; }

/* ============================================================
   부서관리 (기초정보 > 조직관리 > 부서관리) — bs07210 재현
   캔버스 1600px 고정 / 좌 조직도 500 + 우 부서정보 1070
   ============================================================ */
/* 루트 폭: 라이브는 좌측 조직도만 고정이고 우측 부서정보가 남은 폭을 채운다(3200px 실측) */
.deptmgmt { width: 100%; min-width: 1600px; box-sizing: border-box; padding-bottom: 28px; color: var(--c-text); }

/* 공용 버튼 (스코프) */
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-14); font-weight: var(--fw-medium); border: 1px solid transparent; background: #fff; color: var(--c-text); white-space: nowrap; cursor: pointer; }
.dm-btn .icon { fill: currentColor; width: 16px; height: 16px; }
.dm-btn--primary { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.dm-btn--primary:hover { background: var(--c-brand-dark); }
.dm-btn--line { border-color: var(--c-bg-cool); color: var(--c-text); }
.dm-btn--line:hover { border-color: var(--c-primary); color: var(--c-primary); }
.dm-btn--search { border-color: var(--c-primary); color: var(--c-primary); }
.dm-btn--search:hover { background: var(--c-primary-bg); }
.dm-btn:disabled { background: var(--c-bg-soft); color: var(--c-text-disabled); border-color: var(--c-border-2); cursor: not-allowed; }

/* ---- 상단 필터바 ---- */
.dm-search { padding: 12px 0; }
.dm-search-row { display: flex; align-items: center; gap: 24px; height: 32px; }
.dm-search-row.is-locked { opacity: .5; pointer-events: none; }
.dm-sitem { display: flex; align-items: center; gap: 10px; }
.dm-sitem__lbl { font-size: var(--fs-14); color: var(--c-text-2); white-space: nowrap; }
.dm-sitem--input { display: flex; align-items: center; gap: 6px; width: 300px; }
.dm-tgl-group { display: inline-flex; }
.dm-tgl { height: 32px; padding: 0 18px; border: 1px solid var(--c-bg-cool); border-right: 0; background: #fff; color: var(--c-text-2); font-size: var(--fs-14); cursor: pointer; }
.dm-tgl:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.dm-tgl:last-child { border-right: 1px solid var(--c-bg-cool); border-radius: 0 var(--r-md) var(--r-md) 0; }
.dm-tgl.is-active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.dm-sbtns { margin-left: auto; }
.dm-search-desc { margin-top: 10px; padding: 10px 14px; background: var(--c-bg-soft-2); border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.dm-search-desc p { font-size: var(--fs-12); color: var(--c-text-3); line-height: 1.7; }

/* ---- 본문 2분할 (콘텐츠 높이 채움) ---- */
.dm-contents { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 30px; }
.dm-left { width: 500px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.dm-right { flex: 1; min-width: 1070px; min-height: 0; overflow-y: auto; }

/* ---- 좌측: 조직도 헤더 ---- */
.dm-grid-title { display: flex; align-items: center; gap: 12px; height: 32px; margin-bottom: 12px; }
.dm-grid-title__t { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.dm-addbtn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-pill); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer; }
.dm-addbtn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.dm-addbtn .icon { width: 16px; height: 16px; fill: currentColor; }

/* ---- 좌측: 조직도 박스 ---- */
.dm-orgchart { border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); background: #fff; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dm-orgchart__head { display: flex; align-items: center; justify-content: space-between; height: 48px; flex: none; padding: 0 14px; border-bottom: 1px solid #eef1f5; }
.dm-orgchart__co { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.dm-co-ico { width: 18px; height: 18px; fill: var(--c-brand); }
.dm-orgchart__btns { display: flex; gap: 6px; }
.dm-ord { height: 28px; padding: 0 12px; font-size: var(--fs-13); }

/* ---- 트리 ---- */
.dm-tree { flex: 1; padding: 12px; overflow: auto; }
.dm-node { display: flex; align-items: center; height: 33px; padding-right: 11px; cursor: pointer; user-select: none; }
.dm-node-tog { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; margin-right: 2px; }
.dm-caret { width: 16px; height: 16px; fill: var(--c-text-3); }
.dm-node-body { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-md); }
.dm-node-ico { width: 16px; height: 16px; flex: none; fill: #6b83b0; }
.dm-node-text { font-size: var(--fs-14); color: #222; line-height: 1.2; white-space: nowrap; }
.dm-node:hover .dm-node-body { background: #f2f6ff; }
.dm-node.is-selected .dm-node-body { background: var(--c-primary-bg); }
.dm-node.is-selected .dm-node-text { color: var(--c-primary); }
.dm-node.is-selected .dm-node-ico { fill: var(--c-primary); }
.dm-tree.is-ordering .dm-node { cursor: move; }
.dm-node.is-dragging { opacity: .45; }
.dm-node.dm-drop-before .dm-node-body { box-shadow: inset 0 2px 0 var(--c-primary); }
.dm-node.dm-drop-after .dm-node-body { box-shadow: inset 0 -2px 0 var(--c-primary); }

/* ---- 우클릭 컨텍스트 메뉴 ---- */
.dm-ctxmenu { position: fixed; z-index: var(--z-popover); min-width: 150px; padding: 4px; background: #fff; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.dm-ctxmenu__item { display: block; width: 100%; height: 36px; padding: 0 12px; text-align: left; font-size: var(--fs-14); color: #222; background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.dm-ctxmenu__item:hover { background: var(--c-primary-bg); color: var(--c-primary); }

/* ---- 우측: 섹션 타이틀 ---- */
.dm-form-title { display: flex; align-items: center; min-height: 32px; }
.dm-form-title strong { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.dm-form-title .dm-cnt { color: var(--c-primary); font-weight: var(--fw-bold); margin-left: 4px; }
.dm-form-title__btns { margin-left: auto; display: flex; gap: 8px; }
.dm-right .dm-form-title + .dm-form { margin-top: 20px; }

/* ---- 우측: 부서정보 폼 (2열) ---- */
.dm-form.dm-col2 { display: grid; grid-template-columns: 473px 473px; column-gap: 40px; row-gap: 20px; align-content: start; }
.dm-item { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.dm-tit { width: 108px; min-width: 108px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.dm-tit.req::after { content: '*'; color: var(--c-required); margin-left: 2px; }
.dm-box { flex: 1; display: flex; align-items: center; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; min-width: 0; }
.dm-box input { width: 100%; height: 30px; border: 0; padding: 0 12px; font-size: var(--fs-14); color: #222; background: transparent; }
.dm-box input::placeholder { color: var(--c-text-3); }
.dm-box.is-disabled { background: var(--c-bg-soft); }
.dm-box.is-disabled input { color: var(--c-text-2); }
.dm-box__ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.dm-box__ico .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.dm-box__ico:disabled { cursor: not-allowed; }
.dm-box--grow { flex: 1; }
.dm-radio { flex: 1; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.dm-radio label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: #222; cursor: pointer; }
.dm-radio input { width: 18px; height: 18px; accent-color: var(--c-primary); margin: 0; }
.dm-radio input:disabled + span { color: var(--c-text-2); }

/* ---- 우측: 부서원 검색 + 그리드 ---- */
.dm-member-search { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.dm-member-search .dm-box { max-width: 320px; }
.dm-mgrid { margin-top: 12px; border-top: 2px solid #b9c2d0; }
.dm-mgrid__head { display: flex; align-items: center; height: 40px; background: var(--c-bg-soft-2); border-bottom: 1px solid var(--c-bg-cool); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; }
.dm-mgrid__chk { width: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.dm-mgrid__chk input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.dm-mgrid__th { flex: none; padding: 0 8px; display: flex; align-items: center; gap: 4px; }
.dm-mgrid__info { display: inline-flex; }
.dm-mgrid__info .icon { width: 14px; height: 14px; fill: var(--c-text-3); }
.dm-mgrid__empty { height: 160px; display: flex; align-items: center; justify-content: center; color: var(--c-text-3); font-size: var(--fs-13); border-bottom: 1px solid var(--c-bg-cool); }
.dm-mgrid__row { display: flex; align-items: center; height: 40px; border-bottom: 1px solid var(--c-bg-cool); font-size: var(--fs-13); color: var(--c-text); }
.dm-mgrid__td { flex: none; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   부서관리 — fillview 높이 채움 (좌 조직도 박스 / 우 부서원 그리드가 하단까지)
   .deptmgmt 후손 선택자(특이도 ↑)로 위 .dm-* 규칙을 안전하게 override
   ============================================================ */
.deptmgmt.fillview { min-height: 0; }
.deptmgmt .dm-search { flex: none; }
.deptmgmt .dm-contents { flex: 1; min-height: 0; align-items: stretch; }
.deptmgmt .dm-left { display: flex; flex-direction: column; min-height: 0; }
.deptmgmt .dm-grid-title { flex: none; }
.deptmgmt .dm-orgchart { flex: 1; min-height: 0; }            /* min-height:700 제거, 남는 높이 채움 */
.deptmgmt .dm-right { display: flex; flex-direction: column; min-height: 0; }
.deptmgmt .dm-right > .dm-form-title,
.deptmgmt .dm-right > .dm-form,
.deptmgmt .dm-right > .dm-member-search { flex: none; }
.deptmgmt .dm-mgrid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.deptmgmt .dm-mgrid__head { flex: none; }
.deptmgmt .dm-mgrid__empty { flex: 1; }                        /* 빈 상태가 하단까지 채움 */
.deptmgmt .dm-mgrid__body { flex: 1; min-height: 0; overflow-y: auto; }

/* 부서관리 — 우측 상세(.dm-detail) flex 전달: 부서원 그리드가 하단까지 채움
   (.dm-right > .dm-detail 래퍼가 중간에 있어 높이 전달이 끊겼던 것 보정) */
.deptmgmt .dm-right > .dm-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.deptmgmt .dm-detail > .dm-form-title,
.deptmgmt .dm-detail > .dm-form,
.deptmgmt .dm-detail > .dm-member-search { flex: none; }
.deptmgmt .dm-detail > .dm-mgrid { flex: 1; min-height: 0; }

/* 부서관리 — 우클릭 메뉴 '부서 삭제' 강조(빨강) */
.dm-ctxmenu__item--danger { color: var(--c-error); }
.dm-ctxmenu__item--danger:hover { background: #fff0f0; color: var(--c-error); }

/* ============================================================
   권한관리 — 사용자 목록 + 권한 매트릭스 (실서비스 bs04110 정합)
   ============================================================ */
/* 루트 폭: 라이브는 좌측 사용자목록·메뉴리스트만 고정이고 우측 권한 그리드가 남은 폭을 채운다(3200px 실측) */
.authmgr { width: 100%; min-width: 1600px; box-sizing: border-box; padding-bottom: 28px; color: var(--c-text); }
.auth-tabs { flex: none; display: flex; width: 400px; height: 40px; border-bottom: 5px solid #aeb8c6; margin-bottom: 16px; }
.auth-tab { position: relative; width: 200px; height: 40px; background: transparent; color: #a8afb8; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.auth-tab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.auth-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: var(--c-brand); border-radius: 2px 2px 0 0; }

.auth-filter { flex: none; display: flex; align-items: center; gap: 38px; height: 40px; margin-bottom: 8px; }
.auth-searchbox { width: 200px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.auth-search-input { width: 100%; height: 30px; border: 0; padding: 0 12px; font-size: var(--fs-14); color: #222; background: transparent; }
.auth-search-input::placeholder { color: var(--c-text-3); }
.auth-field { display: flex; align-items: center; gap: 10px; min-width: 0; }
.auth-field__label { font-size: var(--fs-14); color: var(--c-text-3); white-space: nowrap; }
.auth-seg { display: inline-flex; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.auth-seg button { height: 30px; padding: 0 12px; border-left: 1px solid var(--c-bg-cool); background: #fff; color: var(--c-text-3); font-size: var(--fs-14); }
.auth-seg button:first-child { border-left: 0; }
.auth-seg button.is-active { background: var(--c-brand); color: #fff; }
.auth-field--dept { gap: 8px; }
.auth-deptbox { width: 200px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.auth-deptbox.is-disabled { background: var(--c-bg-soft); }
.auth-deptbox input { width: 100%; height: 30px; border: 0; padding: 0 12px; font-size: var(--fs-14); color: var(--c-text-3); background: transparent; }
.auth-iconbtn { width: 40px; height: 32px; display: grid; place-items: center; border: 1px solid var(--c-brand); border-radius: var(--r-md); background: #fff; }
.auth-iconbtn .icon { width: 18px; height: 18px; fill: var(--c-brand); }
.auth-selectwrap { position: relative; width: 196px; height: 34px; }
.auth-selectwrap .icon { position: absolute; right: 10px; top: 9px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.auth-select { width: 100%; height: 34px; appearance: none; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 34px 0 12px; background: #fff; color: #222; font-size: var(--fs-14); }
.auth-filter-actions { margin-left: auto; display: flex; gap: 8px; }
.auth-btn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--r-md); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.auth-btn--search { border: 1px solid #738aa5; color: var(--c-brand); background: #fff; }
.auth-btn--reset { border: 1px solid var(--c-bg-cool); color: var(--c-text-3); background: #fff; }

.auth-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 584px minmax(992px, 1fr); gap: 24px; align-items: stretch; }
.auth-left,
.auth-right { min-height: 0; display: flex; flex-direction: column; }
.auth-titlebar { flex: none; display: flex; align-items: center; gap: 10px; height: 32px; margin-bottom: 12px; }
.auth-titlebar strong { color: var(--c-brand); font-size: var(--fs-16); font-weight: var(--fw-bold); }
.auth-counts { display: flex; gap: 10px; color: var(--c-text-3); font-size: var(--fs-12); }
.auth-counts span:last-child { color: var(--c-brand); font-weight: var(--fw-semibold); }
.auth-batch { margin-left: auto; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.auth-batch .icon { width: 18px; height: 18px; fill: currentColor; }
.auth-batch:disabled { color: #b6bed0; background: #fff; cursor: not-allowed; }
.auth-titlebar--right { gap: 5px; }
.auth-info { display: inline-flex; }
.auth-info .icon { width: 16px; height: 16px; fill: var(--c-brand); }
.auth-save-note { margin-left: auto; color: var(--c-text-3); font-size: var(--fs-12); font-weight: var(--fw-regular); }
.auth-save { width: 80px; height: 32px; margin-left: 8px; border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); }

.auth-gridbox { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.auth-usergrid,
.auth-groupgrid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.auth-usergrid th,
.auth-groupgrid th { position: sticky; top: 0; z-index: 1; height: 30px; background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); padding: 0 8px; white-space: nowrap; }
.auth-usergrid td,
.auth-groupgrid td { height: 30px; padding: 6px 10px; color: #222; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-usergrid th:last-child,
.auth-usergrid td:last-child,
.auth-groupgrid th:last-child,
.auth-groupgrid td:last-child { border-right: 0; }
.auth-usergrid tbody tr,
.auth-groupgrid tbody tr { cursor: pointer; }
.auth-usergrid tbody tr:hover,
.auth-groupgrid tbody tr:hover { background: #f7fbff; }
.auth-usergrid tbody tr.is-selected,
.auth-groupgrid tbody tr.is-selected { background: #edf6ff; }
.auth-usergrid tbody tr.is-selected td,
.auth-groupgrid tbody tr.is-selected td { color: var(--c-brand); }
.auth-usergrid__chk { width: 38px; }
.auth-usergrid th.auth-usergrid__chk,
.auth-usergrid td.auth-usergrid__chk { padding: 0; overflow: visible; text-overflow: clip; text-align: center; }
.auth-usergrid th:nth-child(2), .auth-usergrid td:nth-child(2) { width: 100px; }
.auth-usergrid th:nth-child(3), .auth-usergrid td:nth-child(3) { width: 100px; }
.auth-usergrid th:nth-child(4), .auth-usergrid td:nth-child(4) { width: 112px; }
.auth-usergrid th:nth-child(5), .auth-usergrid td:nth-child(5) { width: 112px; }
.auth-usergrid input[type="checkbox"],
.auth-permgrid input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.auth-usergrid input[type="checkbox"]:disabled,
.auth-permgrid input[type="checkbox"]:disabled { accent-color: #888; cursor: not-allowed; }
/* 권한 없는 메뉴 = 회색(비활성) 체크 — 라이브와 동일한 솔리드 회색 + 흰 체크 (브라우저 disabled 흐림 방지용 커스텀 렌더) */
.auth-permgrid input[type="checkbox"].auth-chk--dis { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 0; border-radius: 4px; background: #a9aeb6 center / 12px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5l3.2 3.2L10.5 1.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: 1; cursor: not-allowed; }
.auth-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-strong { font-weight: var(--fw-bold); color: var(--c-brand); }
.auth-groupcell { text-align: center; }
.auth-groupcell__inner { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; height: 18px; line-height: 18px; vertical-align: middle; }
.auth-groupcell__inner > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-groupcell .icon { width: 16px; height: 16px; fill: #aeb6c4; flex: none; }
.auth-emptyrow td { height: 120px; color: var(--c-text-3); border-right: 0; }

.auth-permwrap { flex: 1; min-height: 0; display: flex; gap: 24px; overflow: hidden; }
.auth-modulelist { width: 160px; flex: none; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; overflow: hidden; }
.auth-modulelist__head { height: 32px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border-2); color: #444; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.auth-modulelist__body { flex: 1; min-height: 0; overflow: auto; }
.auth-module { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--c-border-2); background: #fff; color: #222; font-size: var(--fs-14); font-weight: var(--fw-regular); }
.auth-module.is-active { background: var(--c-primary-bg); color: var(--c-brand); font-weight: var(--fw-medium); }
.auth-module:hover { background: #f2f6ff; }
.auth-permbox { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.auth-permgrid { width: 100%; min-width: 808px; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.auth-permgrid th { position: sticky; top: 0; z-index: 2; height: 30px; padding: 0 8px; background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.auth-permgrid td { height: 30px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-permgrid th:last-child,
.auth-permgrid td:last-child { border-right: 0; }
.auth-permgrid__menu { width: 286px; }
.auth-permgrid td.auth-permgrid__menu { text-align: left !important; } /* 데이터셀만 좌측; 헤더는 thead th 가운데 규칙 적용 */
.auth-permgrid th:not(.auth-permgrid__menu),
.auth-permgrid td:not(.auth-permgrid__menu) { width: 80px; }
.auth-permgrid th:last-child,
.auth-permgrid td:last-child { width: 120px; }
.auth-permgrid td.is-strong { background: #edf6ff; color: var(--c-brand); font-weight: var(--fw-bold); }
.auth-permgrid td.is-shade { background: #ecf1ff; font-weight: var(--fw-medium); }
.auth-dash { color: #333; }

/* ---------------- 거래처정보(신용정보) — 일반거래처 그리드 (실서비스 정합) ---------------- */
.ptmgr { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; color: var(--c-text); }  /* .fillview로 콘텐츠 높이 채움 */
.app.is-collapsed .ptmgr { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.pt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 필터바 */
.pt-filter { flex: none; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 8px 0 12px; }
.pt-search { display: flex; align-items: center; gap: 6px; }
.pt-combo { height: 32px; min-width: 110px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #222; cursor: pointer; white-space: nowrap; }
.pt-combo .icon { fill: var(--c-text-3); width: 16px; height: 16px; }
.pt-combopop { width: 150px; padding: 4px; }
.pt-combopop button { width: 100%; height: 30px; padding: 0 10px; border-radius: 4px; background: #fff; text-align: left; color: #222; font-size: var(--fs-14); }
.pt-combopop button:hover { background: var(--c-bg-soft); }
.pt-search__box { display: flex; align-items: center; width: 240px; height: 32px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; }
.pt-search__box input { flex: 1; min-width: 0; border: 0; height: 30px; padding: 0 12px; font-size: var(--fs-14); background: transparent; }
.pt-search__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 14px; border: 1px solid var(--c-srch-line); border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; }
.pt-search__btn .icon { width: 15px; height: 15px; fill: var(--c-brand); }
/* 카운트 + 툴바 */
.pt-toolbar { flex: none; display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-3); }
.pt-count { display: flex; gap: 12px; font-size: var(--fs-12); color: var(--c-text-3); }
.pt-count b { color: var(--c-text); font-weight: var(--fw-semibold); }
.pt-tools { margin-left: auto; display: flex; gap: 6px; }
/* 라이브 실측(2026-08-18 매입매출전표 .button-wrap.row):
   좌측 액션 그룹 → 카운트 → 우측 끝 [등록][수정][삭제]. 버튼 텍스트는 브랜드 네이비. */
.pt-tools--left { margin-left: 0; }
.pt-tools--right { margin-left: auto; }
.pt-toolbar > .pt-count { margin-left: 12px; }
.pt-tbtn { height: 32px; min-width: 80px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.pt-tbtn.pt-tbtn--del { color: #ff2828; }
.pt-tbtn.pt-tbtn--del:disabled { color: #ff2828; opacity: .55; }
.pt-tbtn:hover { background: var(--c-bg-soft); }
.pt-tbtn .icon { width: 15px; height: 15px; fill: currentColor; flex: none; }
.pt-tbtn--reg { color: var(--c-brand); }
.pt-tbtn--reg:hover { background: var(--c-primary-bg); }
.pt-tbtn:disabled { color: #888; cursor: not-allowed; }
/* 그리드 박스 */
.pt-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.pt-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.pt-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; padding: 0 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.pt-grid td { font-size: var(--fs-14); color: #222; height: 30px; padding: 6px 10px; text-align: left; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-grid th:last-child, .pt-grid td:last-child { border-right: 0; }
.pt-grid td.is-center { text-align: center; }
.pt-grid tbody tr { cursor: pointer; }
.pt-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.pt-grid tbody tr.is-selected { background: #edf6ff; }
.pt-grid th.pt-grid__chk, .pt-grid td.pt-grid__chk { width: 40px; text-align: center; overflow: visible; text-overflow: clip; }
.pt-grid__empty td { text-align: center; color: var(--c-text-3); height: 80px; }
.pt-grid__demo td { color: var(--c-primary); }

/* 신용등급 셀: 등급 텍스트 + 등락(▲빨강/▼파랑) — 실서비스(컬러 pill 아님) */
.pt-gradecell { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pt-gradecell:hover .pt-grade { text-decoration: underline; }
.pt-grade { color: #222; }
.pt-fluc { font-size: var(--fs-12); line-height: 1; }
.pt-fluc--up { color: var(--c-error); }
.pt-fluc--down { color: var(--c-primary); }

/* 기업 신용등급 팝업 */
.credit-modal .modal__foot { justify-content: center; }
.cr-sub { font-size: var(--fs-12); color: var(--c-text-3); margin-bottom: var(--sp-4); }
.cr-wrap { display: flex; gap: 16px; align-items: stretch; }
.cr-info { width: 264px; flex: none; background: var(--c-bg-soft-2); border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); padding: 18px; }
.cr-info__t { font-size: var(--fs-16); font-weight: var(--fw-bold); color: #222; margin-bottom: var(--sp-3); }
.cr-info__row { display: flex; gap: 10px; padding: 5px 0; font-size: var(--fs-13); align-items: flex-start; }
.cr-info__k { width: 60px; flex: none; color: var(--c-text-3); }
.cr-info__v { color: var(--c-text); flex: 1; line-height: 1.5; }
.cr-info__btn { width: 100%; margin-top: var(--sp-4); height: 32px; border: 1px solid var(--c-border-2); border-radius: var(--r-md); background: #fff; color: var(--c-text-disabled); font-size: var(--fs-12); }
.cr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cr-top { display: flex; gap: 16px; }
.cr-card { flex: 1; border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); padding: 18px 20px; min-height: 110px; }
.cr-card__t { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; margin-bottom: var(--sp-4); display: inline-flex; align-items: center; gap: 4px; }
.cr-card__t .cf-info .icon { width: 14px; height: 14px; }
.cr-bigval { font-size: 26px; font-weight: var(--fw-bold); color: var(--c-brand); text-align: right; }
.cr-bigval--rev { color: #222; }
.cr-grade-chg { text-align: right; margin-top: 8px; font-size: var(--fs-13); }
.cr-fin { border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); padding: 18px 20px; }
.cr-fin__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.cr-fin__head strong { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; }
.cr-fin__date { font-size: var(--fs-12); color: var(--c-text-3); }
.cr-fin__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cr-fincard { border: 1px solid var(--c-border-2); border-radius: var(--r-md); padding: 12px 14px; }
.cr-fincard__k { font-size: var(--fs-13); color: var(--c-text-2); margin-bottom: 8px; }
.cr-fincard__v { font-size: var(--fs-18); font-weight: var(--fw-bold); color: #222; }
.cr-chg { font-size: var(--fs-12); margin-top: 6px; }
.cr-chg--up { color: var(--c-error); }
.cr-chg--down { color: var(--c-primary); }

/* 거래처 등록 모달 폼 (2열) */
.pt-reg-modal .modal__foot { justify-content: center; gap: 8px; }
.pt-regform { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 12px; }
.pt-regform > .cf-item.cf-full { grid-column: 1 / -1; }
.pt-regform .cf-tit { width: 86px; min-width: 86px; }

/* emp-grid 체크박스 칼럼 ellipsis 예외 ('…' 잘림 방지) — th는 깨끗했으나 td가 .emp-grid td 의 ellipsis 상속 */
.emp-grid th.emp-grid__chk,
.emp-grid td.emp-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }

/* ============================================================
   품목정보 — 목록 + 품목 등록 팝업 (실서비스 bs02410 정합)
   ============================================================ */
.itemmgr { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; padding-bottom: 28px; color: var(--c-text); }
.app.is-collapsed .itemmgr { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.itemmgr.fillview { min-height: 0; }
.itm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.itm-filter { flex: none; display: flex; align-items: center; gap: 38px; height: 40px; margin-bottom: 10px; overflow: visible; }
.itm-search { display: flex; align-items: center; gap: 10px; }
.itm-filter__label,
.itm-fld__label { color: var(--c-text-3); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.itm-combo { width: 124px; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; padding: 0 10px 0 12px; color: #222; font-size: var(--fs-14); cursor: pointer; }
.itm-combo .icon { width: 16px; height: 16px; fill: var(--c-text-3); flex: none; }
.itm-combopop { width: 150px; padding: 4px; }
.itm-combopop button { width: 100%; height: 30px; padding: 0 10px; border-radius: 4px; background: #fff; text-align: left; color: #222; font-size: var(--fs-14); }
.itm-combopop button:hover { background: var(--c-bg-soft); }
.itm-searchbox { width: 200px; height: 32px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.itm-searchbox input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.itm-searchbox input::placeholder { color: var(--c-text-3); }
.itm-searchbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.itm-searchbtn .icon { width: 18px; height: 18px; fill: currentColor; }
.itm-fld { display: flex; align-items: center; gap: 12px; }
.itm-seg { height: 32px; display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.itm-seg button { height: 30px; padding: 0 14px; border-left: 1px solid var(--c-bg-cool); color: var(--c-text-3); background: #fff; font-size: var(--fs-14); white-space: nowrap; }
.itm-seg button:first-child { border-left: 0; }
.itm-seg button.is-active { background: var(--c-brand); color: #fff; }
.itm-toolbar { flex: none; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.itm-tools { display: flex; align-items: center; gap: 6px; }
.itm-tools--right { margin-left: auto; }
.itm-tbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.itm-tbtn:hover { background: var(--c-bg-soft); }
.itm-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.itm-tbtn--reg { color: var(--c-brand); }
.itm-tbtn--reg:hover { background: var(--c-primary-bg); }
.itm-tbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
.itm-count { flex: none; display: flex; align-items: center; gap: 12px; height: 22px; color: var(--c-text-3); font-size: var(--fs-13); }
.itm-count b { color: var(--c-brand); font-weight: var(--fw-semibold); }
.itm-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.itm-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.itm-grid th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.itm-grid td { height: 30px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itm-grid th:last-child,
.itm-grid td:last-child { border-right: 0; }
.itm-grid td.is-center { text-align: center; }
.itm-grid td.is-right { text-align: right; }
.itm-grid tbody tr { cursor: pointer; }
.itm-grid tbody tr:hover td { background: var(--c-bg-soft-2); }
.itm-grid tbody tr.is-selected td { background: #edf6ff; color: var(--c-brand); }
.itm-grid tbody tr.itm-grid__demo td { color: var(--c-primary); }
.itm-grid th.itm-grid__chk,
.itm-grid td.itm-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.itm-grid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.itm-grid__empty td { height: 120px; color: var(--c-text-3); text-align: center; }
.itm-switch { position: relative; width: 32px; height: 18px; margin: 0; appearance: none; border: 0; border-radius: 18px; background: #cfd6df; cursor: pointer; vertical-align: middle; }
.itm-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.itm-switch:checked { background: var(--c-brand); }
.itm-switch:checked::after { transform: translateX(14px); }

/* 품목 등록 모달 */
.itm-reg-modal .modal__head { padding: 20px 32px 6px; border-bottom: 1px solid var(--c-bg-cool); background: #fff; }
/* 라이브는 탭 내용에 따라 팝업 높이가 달라진다(고정 637px 이면 단가 탭의
   거래등급 표 5행이 잘린다). 내용에 맞추되 화면을 넘지 않게 max-height 로 제한. */
.itm-reg-modal { height: auto; max-height: 92vh; transform: translateY(-24px); }
.itm-reg-modal .modal__title { color: var(--c-brand); font-size: 20px; font-weight: var(--fw-bold); }
.itm-reg-modal .modal__close { color: var(--c-text-3); }
.itm-reg-modal .modal__body { padding: 16px 32px 6px; overflow: auto; background: #fff; }
.itm-reg-modal .modal__foot { justify-content: center; gap: 12px; padding: 12px 32px 20px; border-top: 0; background: #fff; }
.itm-reg-modal .modal__foot .btn { width: 89px; padding: 0 8px; border-radius: var(--r-md); }
.itm-reg-modal .modal__foot .btn--line { border-color: var(--c-primary); color: var(--c-primary); background: #fff; }
.itm-reg-modal .modal__foot .btn--ghost { border: 1px solid var(--c-required); color: var(--c-required); background: #fff; }
.itm-regform { width: 100%; color: #222; }
.itm-reg-tabs { display: flex; width: 100%; height: 36px; border-bottom: 1px solid #d5dae2; margin-bottom: 14px; }
.itm-reg-tab { position: relative; flex: 1; height: 36px; background: #fff; color: #888; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.itm-reg-tab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.itm-reg-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
/* 라이브(2026-08-20 운영 캡처): 공통 필드가 탭 위에 2열로 있고, 탭 3개가 그 아래 내용을 바꾼다. */
.itm-reg-common { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; align-items: start; margin-bottom: 14px; }
.itm-reg-panel { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; align-items: start; }
.itm-reg-panel.is-active { display: grid; }
.itm-reg-panel--single { grid-template-columns: minmax(0, 1fr); }
.itm-blank { min-height: 32px; }
.itm-datewrap { width: 168px; display: flex; }
.itm-field { min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 10px; }
.itm-field--full { grid-column: 1 / -1; }
.itm-field--top { align-items: flex-start; }
.itm-label { width: 90px; min-width: 90px; display: inline-flex; align-items: center; gap: 4px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.itm-label.is-required::after { content: '*'; margin-left: 2px; color: var(--c-required); }
.itm-info { width: 16px; height: 16px; display: inline-flex; flex: none; }
.itm-info .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.itm-input { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.itm-input input,
.itm-input textarea { width: 100%; height: 30px; border: 0; padding: 0 12px; color: #222; background: transparent; font-family: inherit; font-size: var(--fs-14); }
.itm-input textarea { height: 76px; padding-top: 8px; line-height: 1.45; resize: none; }
.itm-input--textarea { height: 78px; }
.itm-input input::placeholder,
.itm-input textarea::placeholder { color: var(--c-text-3); }
.itm-input.is-disabled { background: var(--c-bg-soft); }
.itm-input.is-disabled input { color: var(--c-text-2); }
.itm-input--search input { padding-right: 4px; }
.itm-input__icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; background: transparent; }
.itm-input__icon .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.itm-codefield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.itm-autochk { display: inline-flex; align-items: center; gap: 6px; color: #222; font-size: var(--fs-14); white-space: nowrap; }
.itm-autochk input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.itm-selectwrap { position: relative; flex: 1; min-width: 0; height: 32px; }
.itm-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.itm-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.itm-radio { flex: 1; min-width: 0; display: flex; align-items: center; gap: 22px; height: 32px; }
.itm-radio label { display: inline-flex; align-items: center; gap: 8px; color: #222; font-size: var(--fs-14); }
.itm-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.itm-switchlabel { flex: 1; height: 32px; display: inline-flex; align-items: center; gap: 8px; color: #222; font-size: var(--fs-14); }
.itm-inner-tabs { grid-column: 1 / -1; display: flex; align-items: center; height: 32px; border-bottom: 1px solid var(--c-bg-cool); margin-top: 0; }
.itm-inner-tabs span { width: 50%; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: #888; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.itm-inner-tabs span.is-active { color: var(--c-brand); border-bottom: 3px solid var(--c-brand); }
/* 대/중/소분류 — 이 폼 패널은 306px 라 3칸으로 쪼개면 칸마다 91px 뿐이고, 라벨 48px 을
   빼면 입력칸이 35px 만 남아 안의 검색 아이콘(30px)이 12px 씩 삐져나간다(실측).
   한 칸씩 세로로 펴면 각 줄이 패널 폭을 다 써서 입력칸도 아이콘도 제자리에 들어간다. */
.itm-catrow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 8px; }
.itm-catrow .itm-field { gap: 8px; }
.itm-catrow .itm-label { width: 48px; min-width: 48px; }
/* 거래등급별 단가 및 수량 — 라이브 실측: 매출등급/마진율(%)/매출가/거래수량, A~E등급,
   마진율은 읽기전용 회색칸, 첫 행(A등급)이 선택 강조. */
.itm-gradehead { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; }
.itm-gradehead strong { color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.itm-etcgrid { grid-column: 1 / -1; width: 100%; border-collapse: collapse; table-layout: fixed; }
.itm-etcgrid th { height: 34px; border: 1px solid var(--c-bg-cool); background: var(--c-bg-soft);
  color: #444; font-size: var(--fs-13); font-weight: var(--fw-bold); }
.itm-etcgrid td { height: 34px; border: 1px solid var(--c-bg-cool); padding: 0; text-align: center; }
.itm-etcgrid__grade { color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.itm-etcgrid__margin { background: var(--c-bg-soft); color: var(--c-text-2); font-size: var(--fs-14); }
.itm-etcgrid tr.is-sel td { background: #eef4ff; color: var(--c-primary); }
.itm-etcgrid tr.is-sel .itm-etcgrid__margin { background: #e4edff; }
.itm-etcinput { width: 100%; height: 32px; border: 0; padding: 0 10px; text-align: right;
  background: transparent; color: #222; font-family: inherit; font-size: var(--fs-14); }
.itm-filebox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.itm-filebox .itm-input { flex: 1; }
.itm-filebtn { width: 82px; height: 32px; flex: none; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.itm-filebtn:hover { background: var(--c-primary-bg); }

/* ============================================================
   거래처전용품목 — 거래처 + 전용 품목 그리드
   ============================================================ */
.partneritem { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; color: var(--c-text); }
.app.is-collapsed .partneritem { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.partneritem.fillview { min-height: 0; }
.pitem-filter { flex: none; display: flex; align-items: center; gap: 18px; height: 42px; margin-bottom: 8px; }
.pitem-fld { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pitem-fld--search { flex: none; }
.pitem-fld__label { color: var(--c-text-3); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.pitem-selectwrap { position: relative; width: 124px; height: 32px; }
.pitem-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.pitem-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.pitem-searchbox { width: 310px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.pitem-searchbox input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.pitem-searchbox input::placeholder { color: var(--c-text-3); }
.pitem-check { display: inline-flex; align-items: center; gap: 7px; height: 32px; color: #222; font-size: var(--fs-14); white-space: nowrap; cursor: pointer; }
.pitem-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.pitem-searchbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.pitem-searchbtn .icon { width: 18px; height: 18px; fill: currentColor; }
.pitem-toolbar { flex: none; display: flex; justify-content: flex-end; align-items: center; margin-bottom: 8px; }
.pitem-tools { display: flex; align-items: center; gap: 6px; }
.pitem-tbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.pitem-tbtn:hover { background: var(--c-bg-soft); }
.pitem-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.pitem-tbtn--reg { color: var(--c-brand); }
.pitem-tbtn--reg:hover { background: var(--c-primary-bg); }
.pitem-tbtn--danger { color: var(--c-required); }
.pitem-tbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
/* 라이브 실측: 좌 493px / 우 1095px (간격 12) */
.pitem-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 493px 1fr; gap: 12px; }
.pitem-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pitem-pane__head { flex: none; height: 28px; display: flex; align-items: center; justify-content: space-between; color: #222; }
.pitem-pane__head strong { font-size: var(--fs-14); font-weight: var(--fw-bold); }
.pitem-count { display: inline-flex; align-items: center; gap: 12px; color: var(--c-text-3); font-size: var(--fs-13); }
.pitem-count b { color: var(--c-brand); font-weight: var(--fw-semibold); }
.pitem-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.pitem-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.pitem-grid th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.pitem-grid td { height: 30px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pitem-grid th:last-child,
.pitem-grid td:last-child { border-right: 0; }
.pitem-grid td.is-center { text-align: center; }
.pitem-grid td.is-right { text-align: right; }
.pitem-grid tbody tr { cursor: pointer; }
.pitem-grid tbody tr:hover td { background: var(--c-bg-soft-2); }
.pitem-grid tbody tr.is-selected td { background: #edf6ff; color: var(--c-brand); }
.pitem-grid th.pitem-grid__chk,
.pitem-grid td.pitem-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.pitem-reg-grid th.pitem-grid__chk,
.pitem-reg-grid td.pitem-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.pitem-grid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.pitem-grid__empty td { height: 92px; color: var(--c-text-3); text-align: center; }

/* 거래처 전용 품목 등록 팝업 */
.pitem-reg-modal { height: 700px; transform: translateY(-34px); }
.pitem-reg-modal .modal__head { padding: 20px 32px 8px; border-bottom: 1px solid var(--c-bg-cool); background: #fff; }
.pitem-reg-modal .modal__title { color: var(--c-brand); font-size: 20px; font-weight: var(--fw-bold); }
.pitem-reg-modal .modal__body { padding: 16px 32px 8px; overflow: hidden; background: #fff; }
.pitem-reg-modal .modal__foot { justify-content: center; gap: 12px; padding: 12px 32px 20px; border-top: 0; background: #fff; }
.pitem-reg-modal .modal__foot .btn { width: 86px; border-radius: var(--r-md); }
.pitem-reg-modal .modal__foot .btn--ghost { border: 1px solid var(--c-required); color: var(--c-required); background: #fff; }
.pitem-reg { height: 560px; min-height: 0; display: flex; flex-direction: column; color: #222; }
.pitem-reg-top { flex: none; display: flex; align-items: center; gap: 10px; height: 34px; margin-bottom: 12px; }
.pitem-reg-label { width: 70px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.pitem-reg-input { width: 360px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); overflow: hidden; }
.pitem-reg-input input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.pitem-reg-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pitem-reg-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pitem-reg-panel__head { flex: none; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.pitem-reg-panel__head strong { margin-right: auto; color: #222; font-size: var(--fs-15); font-weight: var(--fw-bold); }
.pitem-reg-count { display: inline-flex; gap: 10px; color: var(--c-text-3); font-size: var(--fs-13); }
.pitem-reg-count b { color: var(--c-brand); font-weight: var(--fw-semibold); }
.pitem-reg-search { width: 100%; display: flex; align-items: center; gap: 6px; }
.pitem-reg-searchbox { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.pitem-reg-searchbox input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.pitem-reg-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.pitem-reg-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-13); }
.pitem-reg-grid th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 8px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.pitem-reg-grid td { height: 30px; padding: 6px 8px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pitem-reg-grid th:last-child,
.pitem-reg-grid td:last-child { border-right: 0; }
.pitem-reg-grid td.is-center { text-align: center; }
.pitem-reg-grid td.is-right { text-align: right; }
.pitem-reg-grid tbody tr { cursor: pointer; }
.pitem-reg-grid tbody tr:hover td { background: var(--c-bg-soft-2); }

/* ============================================================
   부동산임대(공급)정보 — 건물 목록 + 임대차 계약내용
   ============================================================ */
.rentinfo { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; color: var(--c-text); }
.app.is-collapsed .rentinfo { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.rentinfo.fillview { min-height: 0; }
.rent-filter { flex: none; display: flex; align-items: center; gap: 22px; min-height: 42px; margin-bottom: 8px; }
.rent-fld { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rent-fld__label { color: var(--c-text-3); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.rent-searchbox { width: 280px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.rent-searchbox input,
.rent-input input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.rent-searchbox input::placeholder,
.rent-input input::placeholder { color: var(--c-text-3); }
.rent-selectwrap { position: relative; min-width: 112px; height: 32px; }
.rent-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.rent-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.rent-seg { height: 32px; display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.rent-seg button { height: 30px; padding: 0 14px; border-left: 1px solid var(--c-bg-cool); color: var(--c-text-3); background: #fff; font-size: var(--fs-14); white-space: nowrap; }
.rent-seg button:first-child { border-left: 0; }
.rent-seg button.is-active { background: var(--c-brand); color: #fff; }
.rent-searchbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.rent-searchbtn .icon { width: 18px; height: 18px; fill: currentColor; }
.rent-toolbar { flex: none; display: flex; justify-content: flex-end; align-items: center; margin-bottom: 8px; }
.rent-tools { display: flex; align-items: center; gap: 6px; }
.rent-tbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.rent-tbtn:hover { background: var(--c-bg-soft); }
.rent-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.rent-tbtn--primary { color: var(--c-brand); }
.rent-tbtn--primary:hover { background: var(--c-primary-bg); }
.rent-tbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
.rent-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 560px 1fr; gap: 12px; }
.rent-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.rent-pane__head { flex: none; height: 32px; display: flex; align-items: center; justify-content: space-between; color: #222; }
.rent-pane__head strong { font-size: var(--fs-14); font-weight: var(--fw-bold); }
.rent-count { display: inline-flex; align-items: center; gap: 12px; color: var(--c-text-3); font-size: var(--fs-13); }
.rent-count b { color: var(--c-brand); font-weight: var(--fw-semibold); }
.rent-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.rent-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.rent-grid th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.rent-grid td { height: 30px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rent-grid th:last-child,
.rent-grid td:last-child { border-right: 0; }
.rent-grid td.is-center { text-align: center; }
.rent-grid td.is-right { text-align: right; }
.rent-grid tbody tr { cursor: pointer; }
.rent-grid tbody tr:hover td { background: var(--c-bg-soft-2); }
.rent-grid tbody tr.is-selected td { background: #edf6ff; color: var(--c-brand); }
.rent-grid th.rent-grid__chk,
.rent-grid td.rent-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.rent-grid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.rent-grid__empty td { height: 96px; color: var(--c-text-3); text-align: center; }
.rent-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.rent-badge--on { background: #e7f1ff; color: var(--c-primary); }
.rent-badge--off { background: #f0f0f0; color: var(--c-text-3); }
.rent-badge--warn { background: #fff4e3; color: #c66b00; }
.rent-detailhost { flex: none; min-height: 246px; margin-bottom: 12px; }
.rent-detail { display: flex; flex-direction: column; gap: 12px; }
.rent-section { border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; padding: 16px 18px; }
.rent-section__title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.rent-section__title strong { color: var(--c-brand); font-size: var(--fs-18); font-weight: var(--fw-bold); }
.rent-section__title span { color: var(--c-text-3); font-size: var(--fs-12); }
.rent-info-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 10px; }
.rent-field { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; }
.rent-field--full { grid-column: 1 / -1; }
.rent-label { flex: none; width: 88px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.rent-label.is-req::after { content: '*'; color: var(--c-required); margin-left: 2px; }
.rent-info-value { flex: 1; min-width: 0; display: flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); color: #222; font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rent-section--cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 12px; }
.rent-summary-card { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft-2); }
.rent-summary-card span { color: var(--c-text-3); font-size: var(--fs-12); }
.rent-summary-card strong { color: #222; font-size: var(--fs-16); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rent-contracts { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rent-contracts__head { flex: none; height: 28px; display: flex; align-items: center; justify-content: space-between; color: #222; }
.rent-contracts__head strong { font-size: var(--fs-14); font-weight: var(--fw-bold); }
.rent-contract-gridhost { flex: 1; min-height: 0; }
.rent-empty { height: 246px; display: grid; place-items: center; border: 1px solid var(--c-bg-cool); border-radius: 8px; color: var(--c-text-3); background: #fff; }

/* 부동산 임대정보 등록/계약 추가 팝업 */
.rent-modal-card .modal__head { padding: 20px 32px 8px; border-bottom: 1px solid var(--c-bg-cool); background: #fff; }
.rent-modal-card .modal__title { color: var(--c-brand); font-size: 20px; font-weight: var(--fw-bold); }
.rent-modal-card .modal__body { padding: 16px 32px 8px; background: #fff; }
.rent-modal-card .modal__foot { justify-content: center; gap: 12px; padding: 12px 32px 20px; border-top: 0; background: #fff; }
.rent-modal-card .modal__foot .btn { width: 86px; border-radius: var(--r-md); }
.rent-modal-card .modal__foot .btn--ghost { border: 1px solid var(--c-required); color: var(--c-required); background: #fff; }
.rent-modal { display: flex; flex-direction: column; gap: 16px; color: #222; }
.rent-modal__section { border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 14px 16px; }
.rent-modal__section h3 { color: var(--c-brand); font-size: var(--fs-16); font-weight: var(--fw-bold); margin-bottom: 12px; }
.rent-modal__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 10px; }
.rent-modal .rent-input { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.rent-modal .rent-input.is-disabled { background: var(--c-bg-soft); }
.rent-modal .rent-selectwrap { flex: 1; min-width: 0; }
.rent-modal .rent-field { min-height: 32px; }
.rent-modal .rent-label { width: 92px; }
.rent-modal__notice { color: var(--c-text-2); font-size: var(--fs-13); margin-bottom: 2px; }

/* 실서비스 정합 재현: 1.건물 등록 / 2.건물 별 호실 등록 / 3.건물 별 임대정보 등록 */
.rentinfo { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; padding: 0 0 28px; color: #222; }
.app.is-collapsed .rentinfo { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.rent-reg-top { flex: none; display: grid; grid-template-columns: 520px 1fr; gap: 16px; height: 236px; margin-bottom: 14px; }
.rent-reg-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.rent-reg-panel--leases { flex: 1; min-height: 0; }
.rent-sec-head { flex: none; height: 30px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.rent-sec-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
.rent-sec-title strong { color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; }
.rent-sec-note { color: var(--c-required); font-size: 11px; white-space: nowrap; }
.rent-sec-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.rent-mini-btn { height: 22px; min-width: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-12); font-weight: var(--fw-medium); }
.rent-mini-btn .icon { width: 14px; height: 14px; fill: currentColor; }
.rent-mini-btn--add { color: var(--c-primary); border-color: #b9ccff; }
.rent-mini-btn--delete { color: #ff6b6b; border-color: #ffd0d0; }
.rent-mini-btn:disabled { color: #f0a0a0; background: #fff; cursor: not-allowed; }
.rent-minus { width: 14px; height: 14px; display: inline-block; position: relative; border: 1px solid currentColor; border-radius: 50%; }
.rent-minus::after { content: ''; position: absolute; left: 3px; right: 3px; top: 6px; height: 1px; background: currentColor; }
.rent-reg-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; }
.rent-lease-gridhost { flex: 1; }
.rent-reg-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-13); }
.rent-reg-grid th { height: 26px; line-height: 26px; padding: 0 8px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #333; font-size: var(--fs-12); font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.rent-reg-grid td { height: 26px; line-height: 26px; padding: 0 8px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rent-reg-grid th:last-child,
.rent-reg-grid td:last-child { border-right: 0; }
.rent-reg-grid td.is-center { text-align: center; }
.rent-reg-grid td.is-right { text-align: right; }
.rent-reg-grid tbody tr { cursor: pointer; }
.rent-reg-grid tbody tr:hover td { background: var(--c-bg-soft-2); }
.rent-reg-grid tbody tr.is-selected td { background: #e8f4ff; color: var(--c-brand); }
.rent-reg-grid th.rent-grid__chk,
.rent-reg-grid td.rent-grid__chk { width: 36px; min-width: 36px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.rent-reg-grid th.rent-grid__chk input,
.rent-reg-grid td.rent-grid__chk input { width: 14px; height: 14px; margin: 0; accent-color: var(--c-brand); }
.rent-reg-grid__empty td { height: 92px; text-align: center; color: var(--c-text-3); }
.rent-req { color: var(--c-required); font-style: normal; margin-left: 2px; }
.rent-head-info { display: inline-block; width: 14px; height: 14px; fill: var(--c-brand); margin-left: 3px; vertical-align: -2px; }
.rentcell-input { height: 26px; display: flex; align-items: center; min-width: 0; background: transparent; }
.rentcell-input input { flex: 1; min-width: 0; height: 26px; line-height: 26px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; }
.rentcell-icon { width: 14px; height: 14px; fill: var(--c-text-3); margin-left: 4px; }
.rentcell-input--search { gap: 4px; }
.rentcell-input--search .rentcell-icon { width: 15px; height: 15px; border: 1px solid var(--c-border); border-radius: 3px; padding: 1px; background: #fff; fill: var(--c-text-3); }

/* ============================================================
   프로젝트/현장정보 — 프로젝트/현장 탭 + 목록 + 등록 팝업
   ============================================================ */
.psite { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; padding-bottom: 28px; color: var(--c-text); }
.app.is-collapsed .psite { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.psite.fillview { min-height: 0; }
.psite-tabs { flex: none; display: flex; align-items: flex-end; height: 38px; border-bottom: 1px solid var(--c-border-2); margin-bottom: 12px; }
.psite-tab { position: relative; width: 172px; height: 38px; background: #fff; color: #a6acb5; font-size: var(--fs-16); font-weight: var(--fw-bold); }
.psite-tab.is-active { color: var(--c-brand); }
.psite-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--c-brand); border-radius: 2px 2px 0 0; }
.psite-filter { flex: none; display: flex; align-items: center; gap: 38px; height: 40px; margin-bottom: 10px; overflow: visible; }
.psite-search,
.psite-fld { display: flex; align-items: center; gap: 10px; min-width: 0; }
.psite-filter__label,
.psite-fld__label { color: var(--c-text-3); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.psite-selectwrap { position: relative; width: 138px; height: 32px; }
.psite-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.psite-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.psite-searchbox { width: 250px; height: 32px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.psite-searchbox input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.psite-searchbox input::placeholder { color: var(--c-text-3); }
.psite-searchbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.psite-searchbtn .icon { width: 18px; height: 18px; fill: currentColor; }
.psite-seg { height: 32px; display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.psite-seg button { height: 30px; padding: 0 14px; border-left: 1px solid var(--c-bg-cool); color: var(--c-text-3); background: #fff; font-size: var(--fs-14); white-space: nowrap; }
.psite-seg button:first-child { border-left: 0; }
.psite-seg button.is-active { background: var(--c-brand); color: #fff; }
.psite-toolbar { flex: none; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.psite-tools { display: flex; align-items: center; gap: 6px; }
.psite-tools--right { margin-left: auto; }
.psite-tbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.psite-tbtn:hover { background: var(--c-bg-soft); }
.psite-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.psite-tbtn--reg { color: var(--c-brand); }
.psite-tbtn--reg:hover { background: var(--c-primary-bg); }
.psite-tbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
.psite-count { flex: none; display: flex; align-items: center; gap: 12px; height: 22px; color: var(--c-text-3); font-size: var(--fs-13); }
.psite-count b { color: var(--c-brand); font-weight: var(--fw-semibold); }
.psite-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.psite-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.psite-grid th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.psite-grid td { height: 30px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psite-grid th:last-child,
.psite-grid td:last-child { border-right: 0; }
.psite-grid td.is-center { text-align: center; }
.psite-grid td.is-right { text-align: right; }
.psite-grid tbody tr { cursor: pointer; }
.psite-grid tbody tr:hover td { background: var(--c-bg-soft-2); }
.psite-grid tbody tr.is-selected td { background: #edf6ff; color: var(--c-brand); }
.psite-grid tbody tr.psite-grid__demo td { color: var(--c-primary); }
.psite-grid th.psite-grid__chk,
.psite-grid td.psite-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.psite-grid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.psite-grid__empty td { height: 120px; color: var(--c-text-3); text-align: center; }
.psite-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 18px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.psite-badge--on { background: #e7f1ff; color: var(--c-primary); }
.psite-badge--off { background: #f0f0f0; color: var(--c-text-3); }

.psite-modal-card .modal__head { padding: 20px 32px 8px; border-bottom: 1px solid var(--c-bg-cool); background: #fff; }
.psite-modal-card .modal__title { color: var(--c-brand); font-size: 20px; font-weight: var(--fw-bold); }
.psite-modal-card .modal__body { padding: 16px 32px 8px; overflow: auto; background: #fff; }
.psite-modal-card .modal__foot { justify-content: center; gap: 12px; padding: 12px 32px 20px; border-top: 0; background: #fff; }
.psite-modal-card .modal__foot .btn { width: 88px; border-radius: var(--r-md); }
.psite-form { width: 556px; display: grid; grid-template-columns: 266px 266px; column-gap: 24px; row-gap: 8px; color: #222; }
.psite-form-field { min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 10px; }
.psite-form-field--full { grid-column: 1 / -1; }
.psite-form-field--top { align-items: flex-start; }
.psite-form-label { width: 106px; min-width: 106px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.psite-form-label.is-required::after { content: '*'; margin-left: 2px; color: var(--c-required); }
.psite-input { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.psite-input input,
.psite-input textarea { width: 100%; height: 30px; border: 0; padding: 0 12px; color: #222; background: transparent; font-family: inherit; font-size: var(--fs-14); }
.psite-input textarea { height: 76px; padding-top: 8px; line-height: 1.45; resize: none; }
.psite-input--textarea { height: 78px; }
.psite-input input::placeholder,
.psite-input textarea::placeholder { color: var(--c-text-3); }
.psite-input.is-disabled { background: var(--c-bg-soft); }
.psite-input.is-disabled input { color: var(--c-text-2); }
.psite-input__icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; background: transparent; }
.psite-input__icon .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.psite-codefield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.psite-autochk,
.psite-continuous { display: inline-flex; align-items: center; gap: 6px; color: #222; font-size: var(--fs-14); white-space: nowrap; }
.psite-autochk input,
.psite-continuous input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.psite-continuous { grid-column: 1 / -1; height: 32px; margin-left: 116px; }
.psite-radio { flex: 1; min-width: 0; display: flex; align-items: center; gap: 22px; height: 32px; }
.psite-radio label { display: inline-flex; align-items: center; gap: 8px; color: #222; font-size: var(--fs-14); }
.psite-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }

/* ============================================================
   고정자산정보 — 목록 + 등록/수정 팝업
   ============================================================ */
.famgr { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; padding-bottom: 28px; color: var(--c-text); }
.app.is-collapsed .famgr { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.famgr.fillview { min-height: 0; }
.fa-filter { flex: none; display: flex; align-items: center; gap: 28px; min-height: 40px; margin-bottom: 8px; overflow: visible; }
.fa-search,
.fa-fld { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fa-filter__label,
.fa-fld__label { color: var(--c-text-3); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.fa-selectwrap { position: relative; width: 138px; height: 32px; }
.fa-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.fa-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.fa-searchbox { width: 250px; height: 32px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.fa-searchbox input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.fa-searchbox input::placeholder { color: var(--c-text-3); }
.fa-searchbtn,
.fa-detailbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.fa-searchbtn .icon,
.fa-detailbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.fa-detailbtn.is-active .icon { transform: rotate(180deg); }
.fa-seg { height: 32px; display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.fa-seg button { height: 30px; padding: 0 14px; border-left: 1px solid var(--c-bg-cool); color: var(--c-text-3); background: #fff; font-size: var(--fs-14); white-space: nowrap; }
.fa-seg button:first-child { border-left: 0; }
.fa-seg button.is-active { background: var(--c-brand); color: #fff; }
/* 라이브: 드로어는 검색조건 바 안쪽에서 한 줄 차지 → flex 100% + 위 12px 간격 */
.fa-detail-filter { flex: 0 0 100%; display: none; align-items: center; gap: 24px; padding: 12px 0 0; }
.fa-detail-filter.is-open { display: flex; }
.fa-toolbar { flex: none; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fa-tools { display: flex; align-items: center; gap: 6px; }
.fa-tools--right { margin-left: auto; }
.fa-tbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.fa-tbtn:hover { background: var(--c-bg-soft); }
.fa-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.fa-tbtn--reg { color: var(--c-brand); }
.fa-tbtn--reg:hover { background: var(--c-primary-bg); }
.fa-tbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
.fa-count { flex: none; display: flex; align-items: center; gap: 12px; height: 22px; color: var(--c-text-3); font-size: var(--fs-13); }
.fa-count b { color: var(--c-brand); font-weight: var(--fw-semibold); }
.fa-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.fa-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.fa-grid th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.fa-grid td { height: 30px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-grid th:last-child,
.fa-grid td:last-child { border-right: 0; }
.fa-grid td.is-center { text-align: center; }
.fa-grid td.is-right { text-align: right; }
.fa-grid tbody tr { cursor: pointer; }
.fa-grid tbody tr:hover td { background: var(--c-bg-soft-2); }
.fa-grid tbody tr.is-selected td { background: #edf6ff; color: var(--c-brand); }
.fa-grid tbody tr.fa-grid__demo td { color: var(--c-primary); }
.fa-grid th.fa-grid__chk,
.fa-grid td.fa-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.fa-grid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.fa-grid__empty td { height: 120px; color: var(--c-text-3); text-align: center; }
.fa-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 18px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.fa-badge--on { background: #e7f1ff; color: var(--c-primary); }
.fa-badge--done { background: #f0f0f0; color: var(--c-text-3); }

.fa-modal-card { width: 1080px; height: 740px; max-width: 94vw; max-height: 92vh; border-radius: 10px; transform: translateY(-24px); }
.fa-modal-card .modal__head { height: 57px; flex: none; padding: 0 32px; border-bottom: 1px solid var(--c-bg-cool); background: #fff; }
.fa-modal-card .modal__title { color: var(--c-brand); font-size: 20px; font-weight: var(--fw-bold); }
.fa-modal-card .modal__close { width: 24px; height: 24px; color: #bbb; }
.fa-modal-card .modal__close .icon { width: 24px; height: 24px; fill: #bbb; }
.fa-modal-card .modal__body { flex: 1; min-height: 0; padding: 16px 32px 8px; overflow: hidden; background: #fff; }
.fa-modal-card .modal__foot { flex: none; justify-content: center; gap: 12px; height: 64px; padding: 8px 32px 20px; border-top: 0; background: #fff; }
.fa-modal-card .modal__foot .btn { width: 89px; height: 32px; border-radius: var(--r-md); font-size: var(--fs-14); }
.fa-modal-card .modal__foot .btn--ghost { border: 1px solid var(--c-required); color: var(--c-required); background: #fff; }
.fa-form { width: 716px; display: flex; flex-direction: column; gap: 14px; color: #222; }
.fa-form--live { width: 1016px; height: 100%; gap: 0; }
.fa-acq { flex: none; }
.fa-acq h3 { height: 26px; display: flex; align-items: flex-start; color: #777; font-size: var(--fs-16); font-weight: var(--fw-bold); }
.fa-acq-box { height: 125px; display: grid; grid-template-columns: 300px 300px 300px; column-gap: 30px; row-gap: 10px; align-content: center; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 12px 20px; background: #fff; }
.fa-acq-field { min-width: 0; height: 26px; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 12px; }
.fa-acq-field--wide .fa-input { max-width: 194px; }
.fa-acq-label { width: 108px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.fa-acq-label.is-required::after { content: '*'; margin-left: 2px; color: var(--c-required); }
.fa-acq .fa-input,
.fa-acq .fa-form-selectwrap { height: 26px; border-radius: 4px; }
.fa-acq .fa-input input,
.fa-acq .fa-form-select { height: 24px; font-size: var(--fs-14); }
.fa-acq .fa-input__icon { width: 32px; height: 24px; border-left: 1px solid var(--c-bg-cool); }
.fa-acq .fa-form-select { padding-left: 10px; }
.fa-radio-inline { height: 26px; display: inline-flex; align-items: center; gap: 18px; }
.fa-radio-inline label { display: inline-flex; align-items: center; gap: 8px; color: #222; font-size: var(--fs-14); white-space: nowrap; }
.fa-radio-inline input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.fa-radio-inline input:disabled { opacity: .35; }
.fa-status-pill { min-width: 46px; height: 30px; display: inline-flex; align-items: center; justify-content: center; justify-self: end; padding: 0 12px; border: 1px solid var(--c-primary); border-radius: 15px; color: var(--c-primary); background: #fff; font-size: var(--fs-13); font-weight: var(--fw-medium); }
.fa-live-tabs { flex: none; display: flex; align-items: flex-end; height: 40px; margin-top: 10px; margin-bottom: 10px; border-bottom: 1px solid #d5dae2; }   /* 라이브: 탭 선과 본문 사이 10px */
.fa-live-tab { position: relative; flex: 1; height: 40px; background: transparent; color: #a8afb8; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.fa-live-tab.is-active { color: var(--c-brand); }
.fa-live-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.fa-live-pane { flex: 1; min-height: 0; overflow: hidden; }
.fa-tab-pane { height: 100%; position: relative; }
.fa-tab-pane--calc { padding-top: 12px; }
.fa-calc-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: hidden; font-size: var(--fs-14); }
.fa-calc-table th { width: 140px; padding: 7px 12px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #333; font-size: var(--fs-14); font-weight: var(--fw-bold); text-align: center; vertical-align: middle; }
.fa-calc-table tr:last-child th,
.fa-calc-table tr:last-child td { border-bottom: 0; }
.fa-calc-cell { height: 36px; display: grid; grid-template-columns: 196px 203px 196px 203px; align-items: center; gap: 12px; padding: 2px 12px; border-bottom: 1px solid var(--c-border-2); background: #fff; }
.fa-calc-label { color: #333; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.fa-calc-label--sub { margin-left: 0; }
.fa-calc-label--mini { width: 60px; }
.fa-calc-cell .fa-input { height: 30px; border-radius: 6px; }
.fa-calc-cell .fa-input input { height: 28px; text-align: right; }
.fa-calc-cell--life { grid-template-columns: 196px 159px 40px 60px 130px 60px 130px; gap: 8px; }
.fa-input-searchbtn { width: 40px; height: 32px; display: grid; place-items: center; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; }
.fa-input-searchbtn .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.fa-calc-cell--recalc { grid-template-columns: 196px 203px 1fr 82px; }
.fa-calc-cell--recalc .fa-recalc { grid-column: 4; }
.fa-form-section { border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 14px 16px; background: #fff; }
.fa-form-section { border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 14px 16px; background: #fff; }
.fa-form-section h3 { margin-bottom: 12px; color: var(--c-brand); font-size: var(--fs-16); font-weight: var(--fw-bold); }
.fa-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 8px; align-items: start; }
.fa-form-field { min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 10px; }
.fa-form-field--full { grid-column: 1 / -1; }
.fa-form-field--top { align-items: flex-start; }
.fa-form-label { width: 124px; min-width: 124px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.fa-form-label.is-required::after { content: '*'; margin-left: 2px; color: var(--c-required); }
.fa-input { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.fa-input input,
.fa-input textarea { width: 100%; height: 30px; border: 0; padding: 0 12px; color: #222; background: transparent; font-family: inherit; font-size: var(--fs-14); }
.fa-input textarea { height: 76px; padding-top: 8px; line-height: 1.45; resize: none; }
.fa-input--textarea { height: 78px; }
.fa-input input::placeholder,
.fa-input textarea::placeholder { color: var(--c-text-3); }
.fa-input.is-disabled { background: var(--c-bg-soft); }
.fa-input.is-disabled input { color: var(--c-text-2); }
.fa-input__icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; background: transparent; }
.fa-input__icon .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.fa-form-selectwrap { position: relative; flex: 1; min-width: 0; height: 32px; }
.fa-form-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.fa-form-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.fa-codefield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.fa-autochk,
.fa-continuous { display: inline-flex; align-items: center; gap: 6px; color: #222; font-size: var(--fs-14); white-space: nowrap; }
.fa-autochk input,
.fa-continuous input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.fa-form-actions { display: flex; align-items: center; justify-content: flex-end; min-height: 32px; }
.fa-recalc,
.fa-mini-btn { height: 30px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; }
.fa-recalc .icon,
.fa-mini-btn .icon { width: 15px; height: 15px; fill: currentColor; }
.fa-changebar { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
.fa-changehost { grid-column: 1 / -1; border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: auto; }
.fa-changegrid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-13); }
.fa-changegrid th { height: 28px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; }
.fa-changegrid td { height: 38px; border-right: 1px solid var(--c-border-2); color: var(--c-text-3); text-align: center; }
.fa-changegrid th:last-child,
.fa-changegrid td:last-child { border-right: 0; }
.fa-continuous { grid-column: 1 / -1; height: 32px; margin-left: 134px; }
.fa-tab-pane--change { padding-top: 12px; }
.fa-live-changebar { height: 32px; display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.fa-live-smallbtn { height: 32px; min-width: 80px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.fa-live-smallbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.fa-live-smallbtn--add { color: var(--c-brand); }
.fa-live-smallbtn--del { color: var(--c-required); }
.fa-live-smallbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
.fa-live-gridbox { height: 316px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; }
.fa-live-changegrid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.fa-live-changegrid th { height: 30px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.fa-live-changegrid td { height: 30px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; text-align: center; }
.fa-live-grid__chk { width: 40px; }
.fa-live-grid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.fa-live-empty td { height: 210px; color: var(--c-text-3); }
.fa-tab-pane--extra { padding-top: 24px; }
.fa-extra-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 14px; align-items: start; }
.fa-extra-grid .fa-form-field { min-height: 32px; gap: 12px; }
.fa-extra-grid .fa-form-label { width: 108px; min-width: 108px; padding: 7px 0; }
.fa-extra-grid .fa-input { height: 32px; border-radius: var(--r-md); }
.fa-extra-grid .fa-input input { height: 30px; }
.fa-extra-grid .fa-form-field--full { grid-column: 1 / -1; }
.fa-extra-grid .fa-form-field--full .fa-input { max-width: 852px; }
.fa-extra-grid .fa-input--textarea { height: 78px; }
.fa-extra-grid .fa-continuous { margin-left: 120px; }

/* ============================================================
   업무용승용차 관리 — 목록 + 등록/수정 팝업
   ============================================================ */
.bcmgr { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; padding-bottom: 28px; color: var(--c-text); }
.app.is-collapsed .bcmgr { width: max(1600px, calc(100vw - var(--sidebar-w-collapsed) - 40px)); }
.bcmgr.fillview { min-height: 0; }
.bc-filter { flex: none; display: flex; align-items: center; gap: 28px; min-height: 40px; margin-bottom: 8px; overflow: visible; }
.bc-search,
.bc-fld { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bc-filter__label,
.bc-fld__label { color: var(--c-text-3); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.bc-selectwrap { position: relative; width: 138px; height: 32px; }
.bc-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.bc-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.bc-searchbox { width: 250px; height: 32px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.bc-searchbox input { width: 100%; height: 30px; border: 0; padding: 0 12px; background: transparent; color: #222; font-size: var(--fs-14); }
.bc-searchbox input::placeholder { color: var(--c-text-3); }
.bc-searchbtn,
.bc-detailbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.bc-searchbtn .icon,
.bc-detailbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.bc-detailbtn.is-active .icon { transform: rotate(180deg); }
/* 라이브: [상세 검색][조회][초기화] 는 검색바 **우측 끝**에 모여 있다. 초기화는 회색 톤 보조버튼. */
.bc-filter__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bc-resetbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: #888; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.bc-resetbtn .icon { width: 15px; height: 15px; fill: currentColor; }
.bc-resetbtn:hover { background: var(--c-bg-soft); }
/* 상세검색 줄의 검색칸(계정과목·운행자) — 칸 안 오른쪽 돋보기 */
.bc-searchbox--find { position: relative; width: 272px; }
.bc-searchbox--find input { width: 100%; padding-right: 34px; }
.bc-findbtn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px;
  display: grid; place-items: center; border: 0; background: none; }
.bc-findbtn .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.bc-seg { height: 32px; display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.bc-seg button { height: 30px; padding: 0 14px; border-left: 1px solid var(--c-bg-cool); color: var(--c-text-3); background: #fff; font-size: var(--fs-14); white-space: nowrap; }
.bc-seg button:first-child { border-left: 0; }
.bc-seg button.is-active { background: var(--c-brand); color: #fff; }
.bc-detail-filter { flex: 0 0 100%; display: none; align-items: center; gap: 24px; padding: 12px 0 0; }
.bc-detail-filter.is-open { display: flex; }
.bc-toolbar { flex: none; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bc-tools { display: flex; align-items: center; gap: 6px; }
.bc-tools--right { margin-left: auto; }
.bc-tbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.bc-tbtn:hover { background: var(--c-bg-soft); }
.bc-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.bc-tbtn--reg { color: var(--c-brand); }
.bc-tbtn--reg:hover { background: var(--c-primary-bg); }
.bc-tbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
.bc-count { flex: none; display: flex; align-items: center; gap: 12px; height: 22px; color: var(--c-text-3); font-size: var(--fs-13); }
.bc-count b { color: var(--c-brand); font-weight: var(--fw-semibold); }
.bc-gridhost { flex: 1; min-height: 0; width: 100%; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.bc-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.bc-grid th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.bc-grid td { height: 30px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-grid th:last-child,
.bc-grid td:last-child { border-right: 0; }
.bc-grid td.is-center { text-align: center; }
.bc-grid td.is-right { text-align: right; }
.bc-grid tbody tr { cursor: pointer; }
.bc-grid tbody tr:hover td { background: var(--c-bg-soft-2); }
.bc-grid tbody tr.is-selected td { background: #edf6ff; color: var(--c-brand); }
.bc-grid tbody tr.bc-grid__demo td { color: var(--c-primary); }
.bc-grid th.bc-grid__chk,
.bc-grid td.bc-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.bc-grid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.bc-grid__empty td { height: 120px; color: var(--c-text-3); text-align: center; }
.bc-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 18px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.bc-badge--on { background: #e7f1ff; color: var(--c-primary); }
.bc-badge--off { background: #f0f0f0; color: var(--c-text-3); }
.bc-badge--etc { background: #fff3d9; color: #97620b; }

.bc-modal-card { width: 700px; height: 780px; max-width: 94vw; max-height: 92vh; border-radius: 12px; transform: translateY(-18px); }
.bc-modal-card .modal__head { flex: none; height: 57px; padding: 0 32px; border-bottom: 1px solid var(--c-bg-cool); background: #fff; }
.bc-modal-card .modal__title { color: var(--c-brand); font-size: 20px; font-weight: var(--fw-bold); }
.bc-modal-card .modal__close { width: 24px; height: 24px; color: #bbb; }
.bc-modal-card .modal__close .icon { width: 24px; height: 24px; fill: #bbb; }
.bc-modal-card .modal__body { flex: 1; min-height: 0; padding: 16px 32px 8px; overflow: hidden; background: #fff; }
.bc-modal-card .modal__foot { flex: none; justify-content: center; gap: 12px; height: 64px; padding: 8px 32px 20px; border-top: 0; background: #fff; }
.bc-modal-card .modal__foot .btn { width: 89px; height: 32px; border-radius: var(--r-md); font-size: var(--fs-14); }
.bc-modal-card .modal__foot .btn--ghost { border: 1px solid var(--c-required); color: var(--c-required); background: #fff; }
.bc-form { width: 756px; display: flex; flex-direction: column; gap: 14px; color: #222; }
.bc-form--live { width: 100%; height: 100%; gap: 0; }   /* 636px 고정 → 팝업 폭 추종(좁은 창 잘림 방지) */
.bc-live-top { flex: none; height: 122px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; }
.bc-live-field { min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 12px; color: #222; font-size: var(--fs-14); }
.bc-live-field--full { grid-column: 1 / -1; width: auto; }
.bc-live-field--top { align-items: flex-start; }
.bc-live-field--compact { width: auto; max-width: 306px; }
.bc-live-blank { min-width: 0; min-height: 32px; }
.bc-live-label { width: 108px; min-width: 108px; height: 31px; display: flex; align-items: center; gap: 6px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.bc-live-label.is-required::after { content: '*'; margin-left: -2px; color: var(--c-required); }
.bc-live-label--long { letter-spacing: 0; }
.bc-live-info { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--c-brand); border-radius: 50%; color: var(--c-brand); font-size: 11px; font-weight: var(--fw-bold); line-height: 1; }
.bc-live-field .bc-input,
.bc-live-field .bc-form-selectwrap { flex: none; width: 186px; height: 32px; border-radius: 6px; }
.bc-live-field .bc-form-selectwrap { height: 34px; }
.bc-live-field .bc-form-select { height: 34px; border-radius: 6px; }
.bc-live-field .bc-input input,
.bc-live-field .bc-form-select,
.bc-live-field .bc-input textarea { font-size: var(--fs-14); }
.bc-live-field .bc-input input { height: 30px; }
.bc-live-field:has(.bc-input--date) { min-height: 34px; }
.bc-live-field .bc-input--date { height: 34px; }
.bc-live-field .bc-input--date input { height: 32px; }
.bc-live-field .bc-input__icon { width: 36px; height: 30px; border-left: 0; }
.bc-live-field .bc-input.is-disabled,
.bc-live-field .bc-form-selectwrap.is-disabled .bc-form-select { background: var(--c-bg-soft); }
.bc-live-codefield { width: 516px; display: flex; align-items: center; gap: 4px; }
.bc-live-codefield .bc-input { width: 462px; }
.bc-live-auto { height: 18px; display: inline-flex; align-items: center; gap: 8px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.bc-live-auto input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.bc-live-switch { width: 186px; height: 32px; display: inline-flex; align-items: center; gap: 8px; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.bc-live-switch input { position: relative; width: 32px; height: 18px; margin: 0; appearance: none; border: 0; border-radius: 18px; background: #cfd6df; cursor: pointer; }
.bc-live-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.bc-live-switch input:checked { background: var(--c-brand); }
.bc-live-switch input:checked::after { transform: translateX(14px); }
/* 라이브 실측(2026-08-20 등록 팝업): 탭 밑줄은 **활성 2px 네이비 + 전체 1px 연회색**이다.
   데모는 5px 굵은 띠라 바로 아래 버튼([추가]/[삭제])과 겹쳐 보였다. */
.bc-live-tabs { flex: none; display: flex; align-items: flex-start; height: 40px; margin-top: 8px; border-bottom: 1px solid #d5dae2; }
.bc-live-tab { position: relative; flex: 1; height: 40px; background: transparent; color: #a8afb8; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.bc-live-tab.is-active { color: var(--c-brand); }
.bc-live-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.bc-live-pane { flex: 1; min-height: 0; overflow: hidden; }
/* 2026-08-20: 306px 2열 **고정**이라 팝업이 700px 미만으로 줄면(브라우저 확대·좁은 창)
   내용 636px 가 그대로 남아 우측이 잘렸다. 유동 2열로 바꿔 팝업 폭을 따라가게 한다
   (기본 700px 에서는 636/2-12 = 306px 로 종전과 동일). */
.bc-live-pane-inner { height: 100%; padding-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; align-content: start; }
.bc-live-pane-inner .bc-live-field:first-child { margin-top: 0; }
/* 라이브 실측: 명칭칸(가변) + 코드칸 148px, 사이 18px. 균등 반반이 아니다. */
.bc-live-pair { width: auto; min-width: 0; flex: 1; display: flex; align-items: center; gap: 18px; }
.bc-live-pair .bc-input { flex: 1; min-width: 0; width: auto; }
.bc-live-pair .bc-input:last-child { flex: none; width: 148px; }
.bc-live-searchbtn { width: 40px; height: 32px; display: grid; place-items: center; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; }
.bc-live-searchbtn .icon { width: 17px; height: 17px; fill: var(--c-text-3); }
.bc-live-daterange { width: 516px; height: 34px; display: flex; align-items: center; gap: 4px; }
.bc-live-daterange .bc-input { width: 232px; }
.bc-live-daterange > span { width: 8px; text-align: center; color: #222; }
.bc-live-unit { width: 186px; display: flex; align-items: center; gap: 8px; }
.bc-live-unit .bc-input { width: 163px; }
.bc-live-unit input { text-align: right; }
.bc-live-field .bc-input--textarea { width: 516px; height: 80px; }
.bc-live-field .bc-input--textarea textarea { height: 78px; padding-top: 8px; resize: none; }
.bc-live-file { width: 516px; display: flex; align-items: center; gap: 4px; }
.bc-live-file .bc-input { width: 406px; }
.bc-live-upload { width: 106px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #738aa5; border-radius: 6px; background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.bc-live-note { grid-column: 1 / -1; margin-left: 120px; min-height: 17px; display: flex; align-items: center; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.bc-form-section { border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 14px 16px; background: #fff; }
.bc-form-section h3 { margin-bottom: 12px; color: var(--c-brand); font-size: var(--fs-16); font-weight: var(--fw-bold); }
.bc-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 8px; align-items: start; }
.bc-form-field { min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 10px; }
.bc-form-field--full { grid-column: 1 / -1; }
.bc-form-field--top { align-items: flex-start; }
.bc-form-label { width: 124px; min-width: 124px; color: #222; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.bc-form-label.is-required::after { content: '*'; margin-left: 2px; color: var(--c-required); }
.bc-input { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.bc-input input,
.bc-input textarea { width: 100%; height: 30px; border: 0; padding: 0 12px; color: #222; background: transparent; font-family: inherit; font-size: var(--fs-14); }
.bc-input textarea { height: 76px; padding-top: 8px; line-height: 1.45; resize: none; }
.bc-input--textarea { height: 78px; }
.bc-input input::placeholder,
.bc-input textarea::placeholder { color: var(--c-text-3); }
.bc-input.is-disabled { background: var(--c-bg-soft); }
.bc-input.is-disabled input,
.bc-input.is-disabled textarea { color: var(--c-text-2); }
.bc-input__icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; background: transparent; }
.bc-input__icon .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.bc-form-selectwrap { position: relative; flex: 1; min-width: 0; height: 32px; }
.bc-form-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.bc-form-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.bc-form-selectwrap.is-disabled .bc-form-select { background: var(--c-bg-soft); color: var(--c-text-2); }
.bc-codefield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bc-autochk,
.bc-continuous { display: inline-flex; align-items: center; gap: 6px; color: #222; font-size: var(--fs-14); white-space: nowrap; }
.bc-autochk input,
.bc-continuous input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.bc-radioseg { flex: 1; height: 32px; display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.bc-radioseg button { flex: 1; min-width: 0; height: 30px; border-left: 1px solid var(--c-bg-cool); background: #fff; color: var(--c-text-3); font-size: var(--fs-14); }
.bc-radioseg button:first-child { border-left: 0; }
.bc-radioseg button.is-active { background: var(--c-brand); color: #fff; }
.bc-live-driverpane { height: 100%; padding-top: 0; }
.bc-driverbar { grid-column: 1 / -1; height: 32px; display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; margin-bottom: 8px; }
.bc-mini-btn { height: 32px; min-width: 80px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.bc-mini-btn .icon { width: 15px; height: 15px; fill: currentColor; }
.bc-mini-btn--del { color: var(--c-required); }
.bc-driverhost { grid-column: 1 / -1; height: 425px; border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: auto; }
.bc-drivergrid { min-width: 0; width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.bc-drivergrid th { height: 30px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; }
.bc-drivergrid td { height: 34px; padding: 3px 4px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: center; }
.bc-drivergrid th:last-child,
.bc-drivergrid td:last-child { border-right: 0; }
.bc-drivergrid__chk { width: 38px; padding-left: 0; padding-right: 0; overflow: visible; text-overflow: clip; }
.bc-drivergrid__chk input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand); }
.bc-drivergrid .bc-input,
.bc-drivergrid .bc-form-selectwrap { height: 28px; border-radius: 4px; }
.bc-drivergrid .bc-input input,
.bc-drivergrid .bc-form-select { height: 26px; font-size: var(--fs-13); }
.bc-drivergrid__empty td { height: 390px; color: var(--c-text-3); text-align: center; font-size: var(--fs-14); }
.bc-continuous { grid-column: 1 / -1; height: 32px; margin-left: 134px; }

/* ============================================================
   감가상각명세서 2종 — BS06120 / BS06130
   ============================================================ */
.depstmt { width: 100%; min-width: 1600px; color: #222; background: #fff; }
.ds-canvas { flex: 1; min-height: 0; width: 1600px; display: flex; flex-direction: column; padding: 0; background: #fff; }
.ds-filter { flex: none; height: 66px; display: flex; align-items: center; gap: 36px; padding-top: 18px; }
.ds-fld { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-fld__label { color: var(--c-text-3); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.ds-selectwrap { position: relative; width: 138px; height: 32px; }
.ds-selectwrap .icon { position: absolute; right: 9px; top: 8px; width: 16px; height: 16px; fill: var(--c-text-3); pointer-events: none; }
.ds-select { width: 100%; height: 32px; appearance: none; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; padding: 0 32px 0 12px; color: #222; font-size: var(--fs-14); }
.ds-searchbtn { height: 32px; min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #738aa5; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.ds-searchbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.ds-toolbar { flex: none; height: 40px; display: flex; align-items: flex-start; gap: 8px; }
.ds-tbtn { height: 32px; min-width: 82px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.ds-tbtn:hover { background: var(--c-bg-soft); }
.ds-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.ds-gridbox { flex: 1; min-height: 0; width: 1600px; overflow: hidden; border: 1px solid var(--c-bg-cool); border-radius: 0; background: #fff; }
.ds-gridhost { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; }
.ds-gridscroll { flex: 1; min-height: 0; overflow: auto; }
.ds-gridfoot { flex: none; overflow: hidden; }
.ds-footgrid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.ds-footgrid td { height: 30px; padding: 6px 10px; line-height: 18px; border-right: 1px solid var(--c-border-2); border-top: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #222; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-footgrid td:last-child { border-right: 0; }
.ds-footgrid td.is-center { text-align: center; }
.ds-footgrid td.is-right { text-align: right; }
.ds-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-14); }
.ds-grid th { position: sticky; top: 0; z-index: 2; height: 30px; padding: 0 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.ds-grid td { height: 30px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); color: #222; background: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.ds-grid th:last-child,
.ds-grid td:last-child { border-right: 0; }
.ds-grid td.is-center { text-align: center; }
.ds-grid td.is-right { text-align: right; }
.ds-grid__summary td,
.ds-grid tfoot td { background: var(--c-bg-soft); color: #222; font-weight: var(--fw-bold); }
.ds-grid tfoot td { position: sticky; bottom: 0; z-index: 1; height: 30px; }
.ds-grid__empty td { height: 300px; color: var(--c-text-3); text-align: center; background: #fff; font-weight: var(--fw-regular); }
.ds-grid-zero { position: absolute; left: 8px; bottom: 7px; color: #222; font-size: var(--fs-14); pointer-events: none; }

/* ============================================================
   매입매출전표 (회계관리>전표관리) — 목록+분개+요약+등록팝업
   ============================================================ */
.psmgr { color: var(--c-text); }
.ps-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 필터 */
.ps-filter { flex: none; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 6px 0 12px; }
.ps-daterange { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #222; }
.ps-daterange .ps-cal { width: 16px; height: 16px; fill: var(--c-text-3); }
.ps-months { display: inline-flex; gap: 4px; }
.ps-month { height: 32px; min-width: 40px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-13); color: var(--c-text-2); }
.ps-month.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; font-weight: var(--fw-bold); }
.ps-detail { height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 4px; }
.ps-detail .icon { width: 14px; height: 14px; fill: currentColor; }
.ps-tooldiv { width: 1px; height: 18px; background: var(--c-bg-cool); margin: 0 4px; align-self: center; }
/* 목록 그리드 */
.ps-listhost { flex: 1; min-height: 140px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.ps-grid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.ps-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-13); font-weight: var(--fw-bold); color: #444; height: 34px; padding: 0 8px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.ps-grid td { font-size: var(--fs-13); color: #222; height: 32px; padding: 4px 8px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-grid th:last-child, .ps-grid td:last-child { border-right: 0; }
.ps-grid td.is-center { text-align: center; }
.ps-grid td.is-right { text-align: right; }
.ps-grid tbody tr { cursor: pointer; }
.ps-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.ps-grid tbody tr.is-selected { background: #edf6ff; }
.ps-grid th.ps-grid__chk, .ps-grid td.ps-grid__chk { width: 40px; text-align: center; overflow: visible; text-overflow: clip; }
.ps-grid__empty td { text-align: center; color: var(--c-text-3); height: 80px; }
.ps-grid__demo td { color: var(--c-primary); }
.ps-gubun { display: inline-block; min-width: 38px; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: var(--fw-bold); }
.ps-gubun--out { background: #ffe1e1; color: #d23a3a; }   /* 매출 = 분홍/빨강(라이브 색 체계) */
.ps-gubun--in { background: #e6ecff; color: #2d5fd6; }    /* 매입 = 연파랑 */
/* 요약바 — 라이브 colfooter 셀 한 줄 정합(매출액 #ffbcbc / 매입액 #e6ecff / 라벨 #e9eaf0 / 값 #f1f2f5·우측·N원) */
/* overflow:hidden 이면 1280~1680px 어디서도 오른쪽 끝(예상 부가세)이 잘려 볼 방법이 없다
   (실측: 내용 1488px > 보이는 폭 1390px). 그리드들과 같은 기준으로 가로 스크롤시킨다. */
.ps-summary { flex: none; display: flex; align-items: stretch; height: 34px; margin-top: 10px; border: 1px solid #e4e4e4; overflow-x: auto; overflow-y: hidden; }
.ps-sc { height: 34px; line-height: 34px; font-size: var(--fs-13); font-weight: var(--fw-bold); border-right: 1px solid #e4e4e4; white-space: nowrap; box-sizing: border-box; }
.ps-sc:last-child { border-right: 0; }
.ps-sc--lab { flex: none; width: 66px; text-align: center; background: #e9eaf0; color: #222; }
.ps-sc--lab.ps-sc--wide { width: 96px; }
.ps-sc--lab.ps-sc--out { background: #ffbcbc; }
.ps-sc--lab.ps-sc--in { background: #e6ecff; }
.ps-sc--val { flex: 1; min-width: 96px; text-align: right; padding: 0 12px; background: #f1f2f5; color: #444; }
/* 분개 */
.ps-jrnlwrap { flex: none; margin-top: 14px; display: flex; flex-direction: column; }
.ps-jrnltit { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ps-jrnltit strong { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.ps-jrnlhint { font-size: var(--fs-12); color: var(--c-text-3); }
/* 분개 그리드 박스 = flex 컬럼: 위 데이터 스크롤 + 아래 고정 합계바(공통규칙 — 합계행 박스 하단 고정) */
.ps-jrnlbox { display: flex; flex-direction: column; max-height: 252px; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.ps-jrnlhost { flex: 1; min-height: 0; overflow: auto; }
/* 합계바 — 데이터와 같은 폭(minWidth)이라 박스보다 넓을 수 있다. 스크롤바 없이
   가로로만 밀리게 두고, 미는 양은 js 가 데이터 그리드 scrollLeft 에 맞춘다. */
.ps-jrnlfoot { flex: none; background: var(--c-bg-soft); overflow-x: hidden; }
.ps-jrnl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ps-jrnl--foot { border-top: 1px solid #c9ced6; }
.ps-jrnl--foot td { border-bottom: 0; }
.ps-jrnl th { position: sticky; top: 0; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 32px; border-bottom: 1px solid var(--c-border-2); border-right: 1px solid var(--c-border-2); }
.ps-jrnl td { font-size: var(--fs-14); color: #222; height: 30px; line-height: 18px; padding: 6px 8px; border-bottom: 1px solid var(--c-border-2); border-right: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-jrnl th:last-child, .ps-jrnl td:last-child { border-right: 0; }
.ps-jrnl td.is-center { text-align: center; }
.ps-jrnl td.is-right { text-align: right; }
.ps-jrnl__sum td { background: var(--c-bg-soft); font-weight: var(--fw-bold); }
.ps-jg { display: inline-block; min-width: 34px; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: var(--fw-bold); }
.ps-jg--d { background: #e9f1ff; color: #1c5fd6; }
.ps-jg--c { background: #fdede9; color: #d2603a; }
/* 등록 모달 */
.ps-reg-modal .modal__foot { justify-content: center; gap: 8px; }
.ps-regbody { display: flex; flex-direction: column; gap: 16px; }
.ps-reghead { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
.ps-reghead .cf-item { display: flex; align-items: center; gap: 8px; }
.ps-reghead .cf-item.cf-full { grid-column: 1 / -1; }
.ps-reghead .cf-tit { width: 52px; min-width: 52px; flex: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #222; }
.ps-reghead .cf-box { flex: 1; }
.ps-reghead .cf-radio { flex: none; }
.ps-chk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); white-space: nowrap; }
.ps-regsec { border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.ps-regsec__bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--c-bg-cool); background: var(--c-bg-soft-2); }
.ps-regsec__bar strong { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; }
.ps-regtools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ps-paylab { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #222; }
.ps-rbtn { height: 28px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 3px; }
.ps-rbtn .icon { width: 13px; height: 13px; fill: currentColor; }
.ps-rbtn--del { color: #d2603a; }
/* 팝업 그리드 박스 = flex 컬럼: 위 데이터 스크롤 + 아래 고정 합계바(공통규칙 — 합계행 박스 하단 고정) */
.ps-itabbox { display: flex; flex-direction: column; max-height: 210px; overflow: hidden; }
.ps-itabhost { flex: 1; min-height: 0; overflow: auto; }
.ps-itabfoot { flex: none; background: var(--c-bg-soft); }
.ps-itab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ps-itab--foot { border-top: 1px solid #c9ced6; }
.ps-itab--foot td { border-bottom: 0; }
.ps-itab th { position: sticky; top: 0; background: var(--c-bg-soft); font-size: var(--fs-13); font-weight: var(--fw-bold); color: #444; height: 32px; border-bottom: 1px solid var(--c-border-2); border-right: 1px solid var(--c-border-2); white-space: nowrap; }
.ps-itab td { font-size: var(--fs-13); color: #222; height: 32px; padding: 2px 6px; border-bottom: 1px solid var(--c-border-2); border-right: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-itab td.ps-itab__chk { overflow: visible; text-overflow: clip; }
.ps-itab th:last-child, .ps-itab td:last-child { border-right: 0; }
.ps-itab td.is-right { text-align: right; }
.ps-itab td.is-center { text-align: center; }
.ps-itab__chk { width: 34px; text-align: center; }
.ps-itab__empty td { text-align: center; color: var(--c-text-3); height: 60px; }
.ps-itab__sum td, .ps-itab tfoot td { background: var(--c-bg-soft); font-weight: var(--fw-bold); text-align: right; }
.ps-itab__sum td:first-child, .ps-itab tfoot td:first-child { text-align: center; }
.ps-inp { width: 100%; height: 26px; border: 1px solid transparent; border-radius: 4px; padding: 0 6px; font-size: var(--fs-13); background: transparent; }
.ps-inp:focus { border-color: var(--c-primary); background: #fff; outline: none; }
.ps-inp.is-right { text-align: right; }
.ps-date { width: 100%; }
.cf-box--srch { display: flex; align-items: center; padding-right: 0; }
.cf-box--srch input { flex: 1; min-width: 0; border: 0; background: transparent; height: 30px; padding: 0 10px; font-size: var(--fs-14); }
.cf-srch { flex: none; width: 30px; align-self: stretch; display: grid; place-items: center; background: transparent; border: 0; border-left: 1px solid var(--c-bg-cool); cursor: pointer; }
.cf-srch .icon { width: 15px; height: 15px; fill: var(--c-text-3); }
/* 거래구분 선택 시 뜨는 증빙유형 코드목록 팝업 */
.ps-evidpop { position: fixed; z-index: 9999; width: 322px; max-height: 440px; overflow-y: auto; background: #fff; border: 1px solid var(--c-bg-cool); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.20); }
.ps-evidpop__t { position: sticky; top: 0; background: #fff; padding: 13px 18px; font-size: var(--fs-16); font-weight: var(--fw-bold); border-bottom: 1px solid var(--c-bg-cool); }
.ps-evidpop--out .ps-evidpop__t { color: #d23a3a; }   /* 매출 = 빨강 */
.ps-evidpop--in .ps-evidpop__t { color: #2d5fd6; }    /* 매입 = 파랑 */
.ps-evidlist { padding: 4px 0; }
.ps-evidrow { display: flex; align-items: center; gap: 14px; padding: 8px 18px; cursor: pointer; font-size: var(--fs-13); }
.ps-evidrow:hover { background: var(--c-bg-soft); }
.ps-evidcode { flex: none; width: 58px; font-weight: var(--fw-bold); }
.ps-evidpop--out .ps-evidcode { color: #d23a3a; }
.ps-evidpop--in .ps-evidcode { color: #2d5fd6; }
.ps-eviddesc { color: #222; }

/* ============================================================
   거래수집기관 등록 (기초정보>연동정보관리) — 카드형 대시보드
   ============================================================ */
.cimgr { width: 100%; padding-bottom: 28px; color: var(--c-text); }
/* 2026-08-20 라이브 리뉴얼 재실측 반영 — 3행 그리드(공동인증서 캐러셀 / 국세청·위택스·4대보험 3열 / 카드·은행계좌 2열).
   상세: _refs/collect-agency-spec.md
   이 화면은 라이브가 실제로 뷰포트 폭에 맞춰 늘고 주는 그리드 반응형이다(실측: grid-template-columns가
   뷰포트별로 다른 px값으로 계산됨). 다른 화면과 달리 layout.css의 전역 `.content > * { min-width:1600px }`
   를 이 화면만 오버라이드해 라이브와 동일하게 유동폭으로 둔다(2026-08-20 사용자 요청). */
.content > .cimgr { min-width: 1280px; }
.ci-box { border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; }
.ci-box__head { display: flex; align-items: center; gap: 12px; padding: 20px 20px 0; }
.ci-box__title { font-size: 15px; font-weight: var(--fw-bold); color: var(--c-brand); flex: none; }
.ci-box__desc { font-size: var(--fs-12); color: var(--c-text-3); flex: 1; }
.ci-headbtn { flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 4px; }
.ci-headbtn .icon { width: 14px; height: 14px; fill: currentColor; }
.ci-headbtn:hover { background: var(--c-primary-bg); }
.ci-grid2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
/* 공통 배지/버튼 */
.ci-flagwrap { display: flex; gap: 6px; }
.ci-flag { flex: none; font-size: 12px; font-weight: var(--fw-regular); padding: 2px 8px; border-radius: 4px; color: #fff; }
.ci-flag--corp { background: #888888; }
.ci-flag--personal { background: var(--c-brand); }
.ci-flag--fin { background: var(--c-primary); }
.ci-connectbtn { flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.ci-connectbtn:hover { background: var(--c-primary-bg); }
.ci-releasebtn { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: 13px; font-weight: var(--fw-medium); }
.ci-releasebtn:hover { background: var(--c-primary-bg); }
.ci-releasebtn--text { border: 0; background: transparent; color: var(--c-text-3); height: auto; padding: 0; font-weight: var(--fw-regular); }
.ci-releasebtn--text:hover { color: var(--c-text-2); background: transparent; text-decoration: underline; }
.ci-nodata { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.ci-nodata p { font-size: var(--fs-13); color: var(--c-text-disabled); }

/* Row1 — 공동인증서(캐러셀) */
.ci-certify { display: flex; align-items: center; gap: 24px; background: var(--c-bg-soft); padding: 20px; }
.ci-certify .ci-box__head { padding: 0; flex: none; flex-direction: column; align-items: flex-start; gap: 4px; width: 200px; }
.ci-cert__wrap { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ci-cert__track { flex: 1; display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; min-width: 0; }
.ci-cert__track::-webkit-scrollbar { display: none; }
.ci-cert__slide { flex: none; width: 320px; scroll-snap-align: start; }
.ci-cert__arrow { flex: none; width: 32px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 50%; background: #fff; color: var(--c-text-2); display: grid; place-items: center; cursor: pointer; }
.ci-cert__arrow .icon { width: 16px; height: 16px; fill: currentColor; }
.ci-cert__arrow:hover { background: var(--c-bg-soft); }
.ci-cert { border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; padding: 16px; cursor: pointer; }
.ci-cert.is-off { opacity: .55; cursor: default; }
.ci-cert__top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ci-cert__name { font-size: 14px; font-weight: var(--fw-regular); color: #222; word-break: break-all; }
.ci-cert__info p { font-size: var(--fs-12); color: var(--c-text-3); line-height: 1.8; }
.ci-cert__pill { margin-top: 8px; height: 26px; padding: 0 10px; border: 1px solid #ff2828; border-radius: 99px; background: #fff; color: #ff2828; font-size: var(--fs-13); font-weight: var(--fw-medium); }

/* Row2 — 국세청(홈택스) / 위택스 / 4대보험 신고 */
.ci-row2 { display: flex; flex-direction: column; height: 280px; overflow: hidden; }
.ci-hometax { grid-column: span 2; }
.ci-hometax__list { flex: 1; display: flex; padding: 12px 20px 20px; gap: 20px; }
.ci-hometax__item { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-hometax__item + .ci-hometax__item { padding-left: 20px; border-left: 1px solid var(--c-bg-cool); }
.ci-hometax__label { font-size: var(--fs-13); font-weight: var(--fw-bold); color: #222; margin-bottom: 8px; }
.ci-wetax .ci-nodata, .ci-insure4 .ci-nodata { padding: 0 20px 20px; }
.ci-card { flex: 1; border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; }
.ci-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ci-card__name { font-size: 14px; font-weight: var(--fw-bold); color: #222; margin-bottom: 8px; word-break: break-all; }
.ci-card__info p, .ci-card__date p { font-size: var(--fs-12); color: var(--c-text-3); line-height: 1.7; }
.ci-card__date { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--c-bg-cool); }

/* Row3 — 카드 / 은행계좌 (연동방식 > 기관 > 상품 3단, 내부 스크롤) */
.ci-row3 { grid-column: span 2; display: flex; flex-direction: column; height: 760px; overflow: hidden; }
.ci-row3 .ci-box__head { padding-bottom: 16px; }
.ci-linked { flex: 1; overflow-y: auto; }
.ci-linked__item + .ci-linked__item { border-top: 1px solid var(--c-bg-cool); }
.ci-linked__top { display: flex; align-items: center; gap: 20px; padding: 14px 20px; }
.ci-linked__way { flex: none; font-size: var(--fs-12); color: var(--c-text-3); }
.ci-linked__certname { flex: 1; font-size: 14px; font-weight: var(--fw-bold); color: #222; word-break: break-all; }
.ci-org { padding: 0 20px 20px; }
.ci-org__head { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ci-org__logo { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg-soft); color: var(--c-text-2); display: grid; place-items: center; font-size: 11px; font-weight: var(--fw-bold); }
.ci-org__name { flex: 1; font-size: 14px; font-weight: var(--fw-bold); color: #222; }
.ci-row { padding: 20px 0; }
.ci-row + .ci-row { border-top: 1px solid #f0f1f4; }
.ci-row__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ci-row__deposit { font-size: var(--fs-12); color: var(--c-text-3); margin-right: 8px; }
.ci-row__name { font-size: 14px; font-weight: var(--fw-regular); color: #222; }
.ci-row__account { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci-row__left { display: flex; align-items: center; gap: 8px; }
.ci-row__left p { font-size: var(--fs-13); color: #555; }
.ci-row__right { display: flex; gap: 16px; }
.ci-row__right span { font-size: var(--fs-12); color: var(--c-text-3); white-space: nowrap; }
/* 추가 연동 팝업(기관 선택 위저드) */
.ci-lk-modal .modal__foot { justify-content: center; gap: 8px; }
.ci-lk__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ci-lk__t { font-size: var(--fs-15); font-weight: var(--fw-bold); color: #222; }
.ci-wz { width: 200px; }
.ci-wz__bar { display: flex; gap: 6px; margin-bottom: 8px; }
.ci-wz__seg { flex: 1; height: 3px; border-radius: 2px; background: var(--c-bg-cool); }
.ci-wz__seg.is-on { background: var(--c-brand); }
.ci-wz__nums { display: flex; justify-content: space-between; }
.ci-wz__num { width: 24px; height: 24px; border-radius: 50%; background: #e1e5ea; color: #9aa3af; font-size: 12px; font-weight: var(--fw-bold); display: grid; place-items: center; }
.ci-wz__num.is-on { background: var(--c-brand); color: #fff; }
.ci-lktabs { display: flex; border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 18px; }
.ci-lktab { flex: 1; height: 42px; background: transparent; border: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #a8afb8; position: relative; cursor: pointer; }
.ci-lktab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.ci-lktab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.ci-lkgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ci-lktile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 92px; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #fff; cursor: pointer; }
.ci-lktile:hover { border-color: #aebfd6; }
.ci-lktile.is-sel { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset; }
.ci-lklogo { width: 34px; height: 34px; border-radius: 8px; background: #eef1f6; color: #5a6473; display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-bold); }
.ci-lkname { font-size: var(--fs-12); color: #333; }
.ci-lkbtn { height: 40px; padding: 0 22px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); color: #9aa3af; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.ci-lkbtn:not(:disabled) { background: #fff; color: var(--c-text-2); border-color: #aebfd6; cursor: pointer; }
.ci-lkbtn--primary:not(:disabled) { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.ci-lkbtn:disabled { cursor: not-allowed; }

/* ============================================================
   기업뱅킹연동 (기초정보>연동정보관리) — 은행별 연동 카드
   ============================================================ */
.cbmgr { width: 1600px; min-width: 1600px; padding-bottom: 28px; color: var(--c-text); }
/* 기업뱅킹연동 — 라이브 실측(2026-08-20): 은행명 제목줄 → (설명 2줄 | 가입절차 링크) → 연동 카드.
   가입절차는 배경 투명 + 브랜드색 밑줄 링크(끝에 화살촉), 연동하기는 #82a3ff 채움 + 흰 글자. */
.cb-desc { font-size: var(--fs-14); color: var(--c-text-2); margin-bottom: 26px; }
.cb-sec { margin-bottom: 34px; max-width: 732px; }
.cb-sec__t { display: block; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); margin-bottom: 10px; }
.cb-sec__row { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; }
.cb-sec__body { flex: 1; min-width: 0; }
.cb-sec__desc { font-size: var(--fs-14); line-height: 1.55; color: var(--c-text-2); }
.cb-guide { position: relative; flex: none; padding: 0 9px 5px; border: 0; background: none;   /* 라이브 실측 w=138 */
  color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--c-brand); }
/* 밑줄 끝의 화살촉 — 라이브 동일 */
.cb-guide::after { content: ''; position: absolute; right: -1px; bottom: -3.5px;
  border-left: 6px solid var(--c-brand); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.cb-guide:hover { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.cb-guide:hover::after { border-left-color: var(--c-primary); }
.cb-card { display: flex; align-items: center; gap: 16px; border: 1px solid var(--c-bg-cool); border-radius: 10px; padding: 16px 20px; }
.cb-logo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.cb-mark { width: 30px; height: 30px; }
.cb-card__plat { font-size: var(--fs-15); font-weight: var(--fw-bold); color: #222; }
.cb-badge { font-size: var(--fs-12); font-weight: var(--fw-bold); padding: 3px 10px; border-radius: 14px; background: #eef1f6; color: var(--c-text-3); }
.cb-linkbtn { margin-left: auto; flex: none; height: 36px; min-width: 138px; padding: 0 18px; border: 0; border-radius: var(--r-md);
  background: var(--c-primary-weak); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.cb-linkbtn:hover { background: var(--c-primary); }
.cb-linkbtn .icon { width: 14px; height: 14px; fill: currentColor; }

/* ============================================================
   회계설정 (기초정보>업무관리) — 3탭 설정 폼 (.acs-*)
   ============================================================ */
.acs { background: #fff; }
.acs-tabs { display: flex; border-bottom: 1px solid var(--c-bg-cool); padding: 0 8px; flex: none; }
.acs-tab { height: 44px; padding: 0 30px; background: none; border: 0; position: relative; font-size: 15px; font-weight: var(--fw-semibold); color: #9aa3af; cursor: pointer; }
.acs-tab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.acs-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.acs-head { display: flex; align-items: center; padding: 18px 24px 0; flex: none; }
.acs-head__t { flex: 1; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.acs-save { height: 34px; padding: 0 22px; border: 0; border-radius: var(--r-md); background: var(--c-primary); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-semibold); cursor: pointer; }
.acs-save:hover { filter: brightness(.96); }
.acs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 32px; }
.acs-panel { max-width: 1180px; }
.acs-desc { margin: 12px 0 6px; padding: 11px 16px; background: #f6f8fb; border: 1px solid #e7ebf1; border-radius: var(--r-md); font-size: var(--fs-13); color: var(--c-text-2); line-height: 1.6; }

.acs-sec { margin-top: 28px; padding-top: 28px; border-top: 1px solid #e9ecf1; }
.acs-sec__t { display: flex; align-items: center; gap: 10px; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); margin-bottom: 14px; }
.acs-sec__desc { margin: -8px 0 14px; font-size: var(--fs-13); color: var(--c-text-3); line-height: 1.6; }
.acs-secbtn { margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid #aebfd6; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-13); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.acs-secbtn:hover { background: var(--c-primary-bg); }
.acs-secbtn .icon { width: 13px; height: 13px; fill: currentColor; }

.acs-row { display: flex; align-items: center; min-height: 36px; margin-bottom: 10px; }
.acs-row.is-wide { align-items: flex-start; }
.acs-row__lab { width: 170px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.acs-row.is-wide .acs-row__lab { padding-top: 7px; }
.acs-radios { display: flex; gap: 24px; flex-wrap: wrap; }
.acs-radio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: #333; cursor: pointer; }
.acs-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-primary); }
.acs-inline { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.acs-curr { display: flex; align-items: center; gap: 6px; position: relative; }
.acs-curr__in { width: 240px; height: 32px; padding: 0 32px 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); color: #888; font-size: var(--fs-14); }
.acs-in { width: 300px; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #222; }
.acs-in[readonly] { background: var(--c-bg-soft); color: #555; }
.acs-sel { height: 32px; min-width: 110px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #222; background: #fff; }
.acs-ta { width: 560px; height: 66px; padding: 8px 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #222; resize: none; font-family: inherit; line-height: 1.5; }
.acs-appr { display: flex; gap: 14px; margin-top: 4px; }
.acs-appr__col { width: 150px; }
.acs-appr__h { display: block; height: 28px; line-height: 28px; text-align: center; background: var(--c-bg-soft); border: 1px solid var(--c-bg-cool); border-bottom: 0; font-size: var(--fs-13); color: #444; }
.acs-appr__col .acs-in { width: 150px; border-radius: 0; text-align: center; }

.acs-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; max-width: 920px; }
.acs-af { display: flex; align-items: center; gap: 10px; }
.acs-af__lab { width: 84px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.acs-af__name { position: relative; flex: 1; display: flex; }
.acs-af__name input { flex: 1; height: 32px; padding: 0 32px 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #222; }
.acs-af__code { width: 92px; flex: none; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); color: #555; font-size: var(--fs-14); text-align: center; }
.acs-srch { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.acs-srch .icon { width: 16px; height: 16px; fill: #8a93a0; }

.acs-infobox { padding: 14px 16px; background: #f6f8fb; border: 1px solid #e7ebf1; border-radius: var(--r-md); font-size: var(--fs-13); color: var(--c-text-2); line-height: 1.75; margin-bottom: 16px; max-width: 920px; }

.acs-gridtop { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.acs-gridwrap { display: inline-block; max-width: 100%; border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow: auto; }

/* 원가 계정체계 ‖ 과세유형 추가 (좌우 2단) */
.acs-2sec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; max-width: 1200px; margin-top: 28px; padding-top: 28px; border-top: 1px solid #e9ecf1; }
.acs-2sec > .acs-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.acs-2sec .acs-gridwrap { display: block; width: 100%; }
.acs-2sec .acs-grid { width: 100%; }
/* 지출경비 — 체크박스(사용중인 항목만 보기)를 표 우측선에 맞춤 */
.acs-expense { display: inline-block; max-width: 100%; }

/* 업무용승용차 / 어음·당좌 — 3열 상세정보 카드 */
.acs-vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 30px; max-width: 1200px; }
.acs-vcard { display: flex; flex-direction: column; }
.acs-vcard__head { display: flex; align-items: center; height: 34px; margin-bottom: 8px; }
.acs-vcard__t { flex: 1; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; }
.acs-vcard__btns { display: flex; gap: 8px; }
.acs-vbtn { height: 30px; padding: 0 12px; border: 1px solid #aebfd6; border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.acs-vbtn.is-del { border-color: #e6b3b3; color: #e06464; }
.acs-vbtn:hover { filter: brightness(.98); background: #f7f9fc; }
.acs-vbtn .icon { width: 14px; height: 14px; fill: currentColor; }
.acs-vcard__grid { border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow: auto; max-height: 220px; }
.acs-vgrid { width: 100%; table-layout: fixed; }
.acs-vgrid th, .acs-vgrid td { white-space: nowrap; }
.acs-vgrid th.acs-vc-chk, .acs-vgrid td.acs-vc-chk { width: 40px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.acs-vgrid td .acs-cellpick { width: 100%; }
.acs-vgrid .acs-vc-chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); vertical-align: middle; }
.acs-vc-addrow td { background: #f7faff; }
.acs-grid { border-collapse: collapse; }
.acs-grid th { height: 30px; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; text-align: left; padding: 0 14px; white-space: nowrap; }
.acs-grid td { height: 30px; border-bottom: 1px solid #eef0f3; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 14px; vertical-align: middle; }
.acs-grid tr:last-child td { border-bottom: 0; }
.acs-grid th.is-c, .acs-grid td.is-c { text-align: center; }
.acs-cellpick { position: relative; display: flex; width: 200px; }
.acs-cellpick input { flex: 1; height: 30px; padding: 0 30px 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-13); background: #fff; color: #222; }

.acs-switch { position: relative; width: 38px; height: 20px; margin: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 20px; background: #cfd6df; cursor: pointer; vertical-align: middle; flex: none; }
.acs-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.acs-switch:checked { background: var(--c-primary); }
.acs-switch:checked::after { transform: translateX(18px); }
.acs-switch:disabled { opacity: .55; cursor: default; }
.acs-sw { display: inline-flex; align-items: center; }
.acs-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: #333; cursor: pointer; }
.acs-chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); }

.acs-vatlist { max-width: 560px; border-top: 1px solid #eef0f3; }
.acs-vatrow { display: flex; align-items: center; height: 46px; border-bottom: 1px solid #eef0f3; }
.acs-vatrow__lab { flex: 1; font-size: var(--fs-14); color: #222; }
.acs-vatrow__lab.is-sub { padding-left: 18px; color: var(--c-text-3); display: inline-flex; align-items: center; }
.acs-vatinfo { width: 14px; height: 14px; fill: #aab1bd; vertical-align: middle; }

/* ============================================================
   급여설정 (기초정보>업무관리) — .acs-* 재사용 + 전용 .psset-*
   ============================================================ */
/* 섹션 제목 우측 안내문구 */
.psset-secdesc { margin-left: auto; font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--c-text-3); }
.acs-sec__t:has(.psset-secdesc) { gap: 16px; }
/* 급여일 설정 */
.psset-payday { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.psset-payday__day { display: inline-flex; align-items: center; gap: 6px; }
.psset-dayin { width: 90px; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); }
.psset-dayin:disabled { background: var(--c-bg-soft); color: #999; }
/* 계정과목 설정 행 */
.psset-acctlist { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.psset-acct { display: flex; align-items: center; gap: 10px; }
.psset-acct__lab { width: 110px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.psset-acct__pick { position: relative; width: 150px; flex: none; display: flex; }
.psset-acct__pick input { width: 100%; height: 32px; padding: 0 32px 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); color: #555; font-size: var(--fs-14); }
.psset-acct__name { width: 200px; flex: none; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); color: #555; font-size: var(--fs-14); }
/* 내부 서브탭(정규직/일용직/...) */
.psset-stabs { display: flex; border-bottom: 1px solid var(--c-border-2); margin-bottom: 18px; }
.psset-stab { min-width: 130px; height: 38px; position: relative; background: none; border: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #a8afb8; cursor: pointer; }
.psset-stab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.psset-stab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
/* 차변/대변 집계기준 행 */
.psset-jrow { display: flex; align-items: center; min-height: 36px; margin-bottom: 10px; }
.psset-jlab { width: 220px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
/* 라디오 + 설명 세로 배치 */
.psset-radcol { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; }
.psset-radnote { font-size: var(--fs-13); color: var(--c-text-3); }
/* 그리드 상단 툴바 */
.psset-gtools { display: flex; align-items: center; margin-bottom: 8px; }
.psset-gtools__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.psset-ord { display: inline-flex; gap: 4px; margin-right: 4px; }
.psset-ord__b { width: 30px; height: 30px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; display: grid; place-items: center; cursor: pointer; }
.psset-ord__b .icon { width: 16px; height: 16px; fill: #8a93a0; }
.psset-ord__b.is-up .icon { transform: rotate(180deg); }
.psset-gbtn { height: 30px; padding: 0 14px; border: 1px solid #aebfd6; border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.psset-gbtn:hover { background: var(--c-primary-bg); }
.psset-gbtn .icon { width: 15px; height: 15px; fill: currentColor; }
/* 멤버십 마크(기본항목/통상임금/퇴직금) */
.psset-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c-brand); }
/* 그리드 셀 내 인풋 */
.psset-cellin { width: 100%; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; font-size: var(--fs-13); color: #222; background: transparent; }
.psset-cellin:focus { border-color: var(--c-bg-cool); background: #fff; }
.psset-pick { position: relative; display: flex; }
.psset-pick input { flex: 1; height: 28px; padding: 0 28px 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-13); background: #fff; }
.psset-pick .acs-srch { width: 24px; height: 24px; }
/* 급여 전표처리 표(공제항목/적요내용/거래처) — 컬럼 폭 고정해 적요 텍스트 잘림 방지 */
.psset-jgrid .acs-grid { table-layout: fixed; width: 660px; }
.psset-jgrid .acs-grid th:nth-child(1), .psset-jgrid .acs-grid td:nth-child(1) { width: 120px; }
.psset-jgrid .acs-grid th:nth-child(2), .psset-jgrid .acs-grid td:nth-child(2) { width: 340px; }
.psset-jgrid .acs-grid th:nth-child(3), .psset-jgrid .acs-grid td:nth-child(3) { width: 200px; }
.psset-jgrid .psset-cellin { width: 100%; }
/* 불릿 안내 */
.psset-bullets { margin: 0; padding-left: 18px; }
.psset-bullets li { font-size: var(--fs-13); color: var(--c-text-2); line-height: 1.9; }
/* 퇴직금 계산방법 참고 박스 */
.psset-formula { margin-top: 16px; }
.psset-formula strong { display: block; font-size: var(--fs-14); color: #222; margin-bottom: 6px; }
.psset-formula div { font-size: var(--fs-13); color: var(--c-text-2); line-height: 1.8; }
/* 퇴직금 지급/공제 2단 */
.psset-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; max-width: 1100px; }
.psset-halfhead { display: flex; align-items: center; margin-bottom: 8px; }
.psset-halflab { font-size: var(--fs-15); font-weight: var(--fw-bold); color: #222; }
.psset-halfhead .psset-gtools__r { margin-left: auto; }
.psset-half .acs-gridwrap { display: block; width: 100%; }
.psset-half .acs-grid { width: 100%; }

/* ============================================================
   재고설정 (기초정보>업무관리) — .acs-*/.psset-* 재사용 + 전용 .stk-*
   ============================================================ */
.stk-bullets { margin: 0 0 14px; padding-left: 18px; }
.stk-bullets li { font-size: var(--fs-13); color: var(--c-text-2); line-height: 1.8; }
.stk-bullets li.is-red { color: #e0352b; }
/* 안전재고량 */
.stk-safe { display: inline-flex; align-items: center; gap: 8px; }
.stk-safein { width: 90px; height: 32px; padding: 0 10px; text-align: right; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); }
/* 입출고조정 ‖ 창고 2단(상단 라인 1줄) */
.stk-2sec .acs-gridwrap { display: block; width: 100%; }
.stk-2sec .acs-grid { width: 100%; }
/* 품목설정 소수점 2열 */
.stk-decimal { max-width: 760px; align-items: center; }
.stk-decimal .acs-af__lab { width: 60px; }
.stk-decimal .acs-sel { width: 180px; }
.stk-margingrid { margin-top: 12px; max-width: 360px; }
.stk-margingrid .acs-grid { width: 100%; }
/* 품목계정 그룹헤더 표 */
.stk-acctgrid { display: block; max-width: 980px; }
.stk-acctgrid .acs-grid { width: 100%; table-layout: fixed; }
.stk-acctgrid .stk-grp { text-align: center; font-weight: var(--fw-bold); }
.stk-acctgrid .stk-grp.is-buy { background: #eaf1fb; color: #2b4a77; }
.stk-acctgrid .stk-grp.is-sell { background: #fbecec; color: #8a3a3a; }
.stk-acctgrid .stk-itemacct { font-weight: var(--fw-semibold); color: var(--c-brand); background: #f7f9fc; }
.stk-acctgrid .psset-pick input { background: var(--c-bg-soft); color: #555; }
/* 품목분류 3열 */
.stk-cls3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; max-width: 1200px; }
.stk-clsgrid { display: block; width: 100%; min-height: 200px; }
.stk-clsgrid .acs-grid { width: 100%; table-layout: fixed; }
.stk-chk { width: 38px; overflow: visible; text-overflow: clip; }
.stk-chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); vertical-align: middle; }
.stk-addrow td { background: #f7faff; }
/* B2B 서비스 버튼 */
.stk-svcbtn { height: 34px; padding: 0 16px; border: 1px solid #aebfd6; border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer; }
.stk-svcbtn:hover { background: var(--c-primary-bg); }
/* B2B 연락처/이메일 */
.stk-contact { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; }
.stk-field { display: flex; align-items: center; gap: 10px; }
.stk-flab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; min-width: 84px; }
.stk-emailid { width: 160px; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); }
.stk-at { color: #888; }
.stk-subdesc { margin: 16px 0 10px; font-size: var(--fs-13); color: var(--c-text-3); }
/* B2B 메시징 */
.stk-msglist { margin-top: 14px; max-width: 420px; border-top: 1px solid #eef0f3; }
.stk-msgrow { display: flex; align-items: center; height: 44px; border-bottom: 1px solid #eef0f3; }
.stk-msglab { flex: 1; font-size: var(--fs-14); color: #222; }

/* ============================================================
   조직설정 (기초정보>업무관리) — .acs-*/.psset-* 재사용 + 전용 .org-*
   ============================================================ */
/* 라디오 + 인라인 설명 */
.org-radiolist { display: flex; flex-direction: column; gap: 8px; }
.org-radiorow { display: flex; align-items: flex-start; gap: 24px; min-height: 30px; }
.org-radio { width: 130px; flex: none; align-items: center; }
.org-rdesc { font-size: var(--fs-13); color: var(--c-text-2); line-height: 1.5; padding-top: 1px; }
/* 조직도 노출 정보 */
.org-exposerow { display: flex; align-items: center; min-height: 36px; margin-bottom: 8px; }
.org-exlab { width: 130px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.org-exposerow .acs-radios { gap: 30px; }
/* 부서원 정렬 */
.org-sorttop { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.org-sortlab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.org-sorttop .psset-gtools__r { margin-left: auto; }
.org-sortgrid { display: block; width: 100%; max-width: 1160px; }
.org-sortgrid .acs-grid { width: 100%; table-layout: fixed; }
.org-sortgrid .acs-grid th:nth-child(1), .org-sortgrid .acs-grid td:nth-child(1) { width: 90px; }
.org-sortgrid .acs-grid th:nth-child(2), .org-sortgrid .acs-grid td:nth-child(2) { width: 110px; }
.org-sortgrid .acs-grid th:nth-child(4), .org-sortgrid .acs-grid td:nth-child(4) { width: 90px; }
.org-sortgrid .acs-grid td:nth-child(3) { white-space: normal; color: var(--c-text-2); }
/* 직급/직책 */
.org-codetop { display: flex; margin-bottom: 8px; }
.org-codegrid { display: block; width: 100%; min-height: 180px; }
.org-codegrid .acs-grid { width: 100%; table-layout: fixed; }
.org-codegrid .acs-grid th:nth-child(3), .org-codegrid .acs-grid td:nth-child(3) { width: 100px; }

/* ============================================================
   회계관리 보고서 공용 (.rpt-*) — 필터바 + 서브탭 + 그리드
   ============================================================ */
.rpt { background: #fff; }
.rpt-filter { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 0; flex: none; }
.rpt-fitem { display: flex; align-items: center; gap: 8px; }
.rpt-flab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #444; }
.rpt-datebox { position: relative; display: flex; align-items: center; }
.rpt-datebox input { width: 218px; height: 32px; padding: 0 34px 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); color: #333; }
.rpt-cal { position: absolute; right: 2px; width: 28px; height: 28px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.rpt-cal .icon { width: 16px; height: 16px; fill: var(--c-primary); }
.rpt-sel { height: 32px; min-width: 112px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); color: #333; background: #fff; }
.rpt-search { width: 220px; height: 32px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); }
.rpt-actions { margin-left: auto; display: flex; gap: 8px; }
.rpt-btn { height: 32px; min-width: 80px; padding: 0 12px; border: 1px solid #aebfd6; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.rpt-btn .icon { width: 15px; height: 15px; fill: currentColor; }
.rpt-btn:hover { background: var(--c-primary-bg); }
.rpt-btn.is-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.rpt-btn.is-primary:hover { filter: brightness(.96); background: var(--c-primary); }

.rpt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 0 20px; }
.rpt-subtabs { display: flex; border-bottom: 1px solid var(--c-border-2); margin-top: 4px; flex: none; }
.rpt-subtab { width: 150px; height: 40px; position: relative; background: none; border: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #a8afb8; cursor: pointer; }
.rpt-subtab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.rpt-subtab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
/* 탭 상단 배치(검색조건 위) — 실서비스 정합 */
.rpt-subtabs--top { padding: 8px 0 0; margin-top: 0; }
/* 액션 툴바: 검색조건과 분리된 별도 영역(등록/다운로드/담보폐기). 검색조건 하단선과 16px 간격 */
.rpt-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 0 0; flex: none; }
.rpt-toolbar .rpt-actions { margin-left: 0; }
/* 단일 범위 날짜입력(한 박스 'a ~ b') */
.rpt-datebox--range input { width: 250px; }
.rpt-count { padding: 10px 2px; font-size: var(--fs-13); color: #888; flex: none; }
.rpt-count strong { color: var(--c-brand); font-weight: var(--fw-bold); margin-right: 2px; }
.rpt-gridhost { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.rpt-grid { width: 100%; border-collapse: collapse; }
.rpt-grid th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; padding: 0 12px; white-space: nowrap; }
.rpt-grid th.rpt-grp { text-align: center; }
.rpt-grid td { height: 30px; border: 1px solid #eef0f3; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 12px; }
.rpt-grid .rpt-code { text-align: center; }
.rpt-grid .rpt-name { text-align: left; }
.rpt-grid th.rpt-num, .rpt-grid td.rpt-num { text-align: right; }
.rpt-grid tfoot .rpt-sum td { background: #eef2f8; font-weight: var(--fw-bold); color: #222; border-top: 2px solid #cfd8e6; position: sticky; bottom: 0; }
.rpt-grid .rpt-sumlab { text-align: center; }

/* 월 범위 데이트박스 + 물결 */
.rpt-datebox.is-month input { width: 110px; }
.rpt-tilde { color: #888; margin: 0 2px; }

/* ============================================================
   기간 손익보고서 (.pl-*) — 계정과목 고정열 + 월별 손익
   ============================================================ */
.pl-host { overflow: auto; }
.pl-grid { border-collapse: collapse; white-space: nowrap; }
.pl-grid th { position: sticky; top: 0; z-index: 2; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); height: 30px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; padding: 0 10px; }
.pl-grid td { border: 1px solid #eef0f3; height: 30px; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 10px; }
.pl-grid th.pl-num, .pl-grid td.pl-num { text-align: right; min-width: 98px; }
.pl-grid th.pl-total, .pl-grid td.pl-total { min-width: 112px; }
/* 계정과목 고정열 */
.pl-grid th.pl-acccol, .pl-grid td.pl-acccol { position: sticky; left: 0; text-align: left; min-width: 252px; max-width: 252px; border-right: 1px solid #d5dbe3; background: #fff; z-index: 1; }
.pl-grid th.pl-acccol { z-index: 3; background: var(--c-bg-soft); }
.pl-grid td.pl-total { background: #fafbfd; font-weight: var(--fw-semibold); }
/* 분류/소계 강조 (행 규칙을 뒤에 둬 합계셀 배경까지 덮음) */
.pl-grid tr.pl-acc td.pl-acccol { padding-left: 26px; color: #555; }
.pl-grid tr.pl-cat td { font-weight: var(--fw-bold); background: #f3f6fb; }
.pl-grid tr.pl-cat td.pl-acccol { background: #e9f0f9; }
.pl-grid tr.pl-sub td { font-weight: var(--fw-bold); background: #e7edf6; color: #1a2b4a; }
.pl-grid tr.pl-sub td.pl-acccol { background: #dde6f2; }

/* ============================================================
   프로젝트/현장/부서별 손익보고서 (.dpl-*) — 좌측 목록 + 우측 P&L
   ============================================================ */
.dpl-wrap { flex: 1; min-height: 0; display: flex; }
/* 라이브 실측(2026-08-19): 좌측 마스터 패널 380px */
.dpl-list { width: 380px; flex: none; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; margin-right: 16px; }
.dpl-listtbl { width: 100%; border-collapse: collapse; }
.dpl-listtbl th { position: sticky; top: 0; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); height: 30px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; }
.dpl-listtbl td { border: 1px solid #eef0f3; height: 30px; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 10px; cursor: pointer; }
.dpl-listtbl .dpl-code { text-align: center; color: #666; width: 78px; }
.dpl-listtbl .dpl-name { text-align: left; }
.dpl-listtbl tbody tr:hover { background: #f5f8fc; }
.dpl-listtbl tbody tr.is-active td { background: #eaf1fb; color: var(--c-brand); font-weight: var(--fw-semibold); }
.dpl-right { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.dpl-search { position: relative; display: flex; }
.dpl-search input { width: 200px; height: 32px; padding: 0 34px 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); }
.dpl-search .rpt-cal { position: absolute; right: 2px; }

/* ============================================================
   보고서 합계 고정 박스 (.rpt-gridbox) — 데이터 스크롤 + 하단 합계바 분리
   전역규칙: 합계행은 tbody가 아니라 박스 하단 고정 footer 바, colgroup으로 컬럼폭 일치
   ============================================================ */
.rpt-gridbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow: hidden; }
.rpt-gridbox .rpt-gridhost { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; }
.rpt-gridbox .rpt-grid { table-layout: fixed; width: 100%; }
.rpt-gridbox .rpt-grid thead th { position: sticky; top: 0; z-index: 1; }
.rpt-gridfoot { flex: none; border-top: 2px solid #cfd8e6; }
.rpt-gridslot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rpt-footgrid { table-layout: fixed; width: 100%; border-collapse: collapse; }
.rpt-footgrid td { height: 30px; line-height: 18px; padding: 6px 12px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; background: #e7edf6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-footgrid td.rpt-num { text-align: right; }
.rpt-footgrid td.rpt-left { text-align: left; }

/* ============================================================
   금융보고서 (.fin-*) — 자금일보 / 예적금현황
   ============================================================ */
.rpt-grid th.rpt-left, .rpt-grid td.rpt-left { text-align: left; }
.rpt-grid tr.is-sub td { font-weight: var(--fw-bold); background: #eef2f8; }
.rpt-grid tr.is-total td { font-weight: var(--fw-bold); background: #e7edf6; border-top: 2px solid #cfd8e6; }
/* 예적금현황 — 잔액/상세 탭 영역 */
.fin-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fin-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fin-dep td { text-align: center; }
.fin-dep td.rpt-left { text-align: left; }
.fin-dep td.rpt-num { text-align: right; }
.fin-bankbox { position: relative; display: flex; }
.fin-bankbox input { width: 200px; height: 32px; padding: 0 34px 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); }
.fin-bankbox .rpt-cal { position: absolute; right: 2px; }
/* 현재계좌 선택기(상세 탭) */
.fin-curacct { gap: 6px; }
.fin-acctsel { min-width: 230px; }
.fin-navbtn { width: 30px; height: 32px; flex: none; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; display: grid; place-items: center; cursor: pointer; }
.fin-navbtn .icon { width: 16px; height: 16px; fill: #666; }

/* ============================================================
   항목별 계정등록 팝업 (.iae-*) — 집계항목 ‖ 계정과목
   ============================================================ */
.iae-pop { display: flex; gap: 20px; width: 712px; }
.iae-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iae-panel__top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.iae-gridhost { height: 320px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.iae-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.iae-grid th { position: sticky; top: 0; z-index: 1; height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; }
.iae-grid td { height: 30px; border: 1px solid #eef0f3; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 8px; text-align: center; }
.iae-grid td.iae-l { text-align: left; }
.iae-grid td.iae-x { padding: 0; width: 40px; }
.iae-grid tbody tr { cursor: pointer; }
.iae-grid tbody tr.is-active td { background: #eaf1fb; color: var(--c-brand); font-weight: var(--fw-semibold); }
.iae-del { width: 24px; height: 24px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.iae-del .icon { width: 17px; height: 17px; fill: #e06464; }
.iae-codecell { position: relative; display: flex; }
.iae-codecell input { width: 100%; height: 28px; padding: 0 28px 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-13); background: var(--c-bg-soft); color: #555; }
.iae-srch { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.iae-srch .icon { width: 15px; height: 15px; fill: #8a93a0; }
.iae-save { height: 34px; padding: 0 22px; border: 0; border-radius: var(--r-md); background: var(--c-primary); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-semibold); cursor: pointer; }
.iae-cancel { height: 34px; padding: 0 20px; border: 1px solid #e0a8a8; border-radius: var(--r-md); background: #fff; color: #d65a5a; font-size: var(--fs-14); font-weight: var(--fw-semibold); cursor: pointer; }

/* ============================================================
   어음당좌관리 그리드 (.nt-*) — 기본 가운데정렬 + 셀 말줄임
   ============================================================ */
.nt-recv td, .nt-pay td, .nt-agg td, .nt-check td { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-recv th, .nt-pay th, .nt-agg th, .nt-check th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   등록/수정/삭제함 (.hist-*) — 세그먼트 필터 + 작업구분 색상 + 이력 그리드
   ============================================================ */
.hist-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.hist-seg__btn { height: 30px; padding: 0 14px; border: 0; border-right: 1px solid var(--c-bg-cool); background: #fff; font-size: var(--fs-13); color: #555; cursor: pointer; }
.hist-seg__btn:last-child { border-right: 0; }
.hist-seg__btn.is-active { background: var(--c-brand); color: #fff; font-weight: var(--fw-semibold); }
.hist-grid { width: 100%; overflow: auto; }
.hist-grid .rpt-grid { table-layout: auto; min-width: 100%; }
.hist-grid th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.hist-grid td { text-align: center; white-space: nowrap; }
.hist-grid td.rpt-left { text-align: left; }
.hist-grid td.rpt-num { text-align: right; }
.hist-op { font-weight: var(--fw-semibold); }
.hist-op.is-add { color: var(--c-primary); }
.hist-op.is-edit { color: #1f9d57; }
.hist-op.is-del { color: #e0352b; }
.hist-op.is-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   증빙관리 (.ev-*) — 세금계산서 / 거래명세서
   ============================================================ */
.rpt > .rpt-subtabs { padding: 0 16px; margin-top: 0; }
.rpt-body2 { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 20px 20px; }
/* 월 세그먼트 */
.ev-months { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.ev-month { height: 30px; min-width: 40px; padding: 0 8px; border: 0; border-right: 1px solid var(--c-bg-cool); background: #fff; font-size: var(--fs-13); color: #555; cursor: pointer; }
.ev-month:last-child { border-right: 0; }
.ev-month.is-active { background: var(--c-brand); color: #fff; font-weight: var(--fw-semibold); }
/* 상태 체크박스 */
.ev-checks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ev-check, .ev-radio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-13); color: #444; cursor: pointer; }
.ev-check input, .ev-radio input { width: 15px; height: 15px; accent-color: var(--c-primary); }
/* 툴바 */
.ev-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0 0; flex: none; }
.ev-toolbar__l, .ev-toolbar__r { display: flex; gap: 6px; flex-wrap: wrap; }
/* 문서 그리드(체크박스) */
.rpt-gridbox .rpt-gridhost.ev-grid { overflow-x: auto; }
.ev-grid .rpt-grid { table-layout: auto; min-width: 100%; }
.ev-grid th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.ev-grid td { text-align: center; white-space: nowrap; }
.ev-grid td.ev-l { text-align: left; }
.ev-grid td.ev-r { text-align: right; }
.ev-grid th, .ev-grid td { padding-left: 12px; padding-right: 12px; }
.ev-grid th.ev-chk, .ev-grid td.ev-chk { width: 36px; min-width: 36px; overflow: visible; text-overflow: clip; padding: 0; }
.ev-grid td.ev-chk input, .ev-grid th.ev-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
/* 행 선택(거래명세서 수정 진입) + 수정 버튼 비활성 */
.ev-grid tbody tr.is-selected td { background: #edf6ff; color: var(--c-brand); }
.ev-toolbar .rpt-btn:disabled { opacity: .45; cursor: default; }
.ev-toolbar .rpt-btn:disabled:hover { background: #fff; }
/* 상태 뱃지 */
.ev-st { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.ev-st.is-temp { background: #eef0f3; color: #777; }
.ev-st.is-wait { background: #e7eefc; color: var(--c-primary); }
.ev-st.is-done { background: #e3f5ea; color: #1f9d57; }
.ev-st.is-fail { background: #fde8e8; color: #e0352b; }
/* 하단 합계 요약바(박스 하단 고정) */
.ev-summary { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0 22px; padding: 0 16px; height: 40px; background: #e7edf6; border-top: 2px solid #cfd8e6; }
.ev-sum__t { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-brand); }
.ev-sum__p { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-13); }
.ev-sum__k { color: #667; }
.ev-sum__v { font-weight: var(--fw-bold); color: #222; }

/* 작성 모달(.ev-doc) */
.ev-doc { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ev-doc__top { display: flex; align-items: center; justify-content: space-between; }
.ev-radios { display: flex; gap: 16px; }
.ev-parties { display: flex; gap: 14px; }
.ev-parties.is-single .ev-party { flex: 1; }
.ev-party { flex: 1; min-width: 0; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.ev-party__hd { height: 30px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: var(--fw-bold); color: #fff; }
.ev-party__hd.is-sup { background: #c75b6b; }
.ev-party__hd.is-buy { background: #4f74c9; }
.ev-party__bd { display: flex; flex-wrap: wrap; padding: 8px 10px; gap: 6px 10px; }
.ev-fld { display: flex; align-items: center; gap: 8px; width: calc(50% - 5px); }
.ev-fld--full { width: 100%; }
.ev-lab { width: 56px; flex: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; }
.ev-lab.is-req::after { content: ' *'; color: var(--c-required); }
.ev-ctl { flex: 1; min-width: 0; }
.ev-in { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-13); color: #222; }
.ev-in[readonly] { background: var(--c-bg-soft); color: #555; }
.ev-in.ev-num { text-align: right; }
.ev-regcell { position: relative; display: flex; }
.ev-srch { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.ev-srch .icon { width: 15px; height: 15px; fill: #8a93a0; }
.ev-doc__sums { display: flex; gap: 14px; align-items: center; }
.ev-doc__sums .ev-fld { width: auto; flex: 1; }
.ev-doc__gtools { display: flex; gap: 6px; }
/* 품목 미니그리드 */
.ev-itemgrid { border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); max-height: 220px; overflow: auto; }
.ev-itemtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ev-itemtable th { position: sticky; top: 0; z-index: 1; height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-12); font-weight: var(--fw-bold); color: #444; }
.ev-itemtable td { height: 32px; border: 1px solid #eef0f3; padding: 0 4px; text-align: center; }
.ev-itemtable td.ev-l { text-align: left; }
.ev-itemtable td.ev-r { text-align: right; padding-right: 8px; }
.ev-itemtable th.ev-chk, .ev-itemtable td.ev-chk { width: 40px; overflow: visible; text-overflow: clip; }
.ev-itemtable td.ev-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.ev-cell { width: 100%; height: 26px; border: 1px solid transparent; border-radius: 4px; padding: 0 6px; font-size: var(--fs-13); }
.ev-cell:focus { border-color: var(--c-primary); outline: none; background: #fff; }
.ev-cell.ev-num { text-align: right; }
.ev-rnum { font-size: var(--fs-13); color: #222; }
/* 거래명세서 작성 — 내부 탭(공급받는자/공급자) + 거래정보 + 발행설정 */
.ev-itabs { display: flex; border-bottom: 1px solid var(--c-bg-cool); }
.ev-itab { flex: 1; max-width: 220px; height: 38px; position: relative; background: none; border: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #a8afb8; cursor: pointer; }
.ev-itab.is-active { color: var(--c-brand); }
.ev-itab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.ev-trade-main { display: flex; gap: 14px; align-items: flex-start; }
.ev-tradeparty { flex: 1; min-width: 0; display: flex; }
.ev-tradeparty > .ev-party { flex: 1; min-width: 0; }
.ev-tradeinfo { width: 300px; flex: none; }
.ev-party__hd.is-info { background: #7a8699; }
.ev-tradeinfo .ev-fld { width: 100%; }
.ev-doc__settings { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 10px 0 0; border-top: 1px solid var(--c-bg-cool); }
.ev-set { display: flex; align-items: center; gap: 12px; }
.ev-set__t { font-size: var(--fs-13); font-weight: var(--fw-bold); color: #444; }
.ev-set__d { width: 1px; height: 16px; background: var(--c-bg-cool); }
/* 일반(대체)전표 — 구분 배지(.ps-gubun 재사용) + 대차 표시 + 분개 입력 select */
.gv-gb--swap { background: #eef0f4; color: #55617a; }   /* 대체 */
.gv-gb--in   { background: #e6ecff; color: #2d5fd6; }    /* 입금 */
.gv-gb--out  { background: #ffe1e1; color: #d23a3a; }    /* 출금 */
.gv-bal { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); color: var(--c-text-2); }
.gv-bal b { color: #222; font-weight: var(--fw-bold); }
.gv-bal__lab { color: var(--c-text-3); }
.gv-bal__tag { margin-left: 8px; padding: 2px 10px; border-radius: 12px; font-size: var(--fs-12); font-weight: var(--fw-bold); }
.gv-bal__tag.is-ok { background: #e3f6ec; color: #0a8f53; }
.gv-bal__tag.is-bad { background: #fdeaea; color: #d23a3a; }
.ps-jtab select.ps-inp { height: 28px; padding: 0 6px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-sm); background: #fff; font-size: var(--fs-13); color: #222; }
.ps-jtab .ps-inp.is-off { background: var(--c-bg-soft); color: var(--c-text-disabled); }

/* 일반(대체)전표 (st01210) — 엑셀형 그리드 직접입력 (Wijmo 룩 재현) */
.gv-legend { font-size: var(--fs-12); color: var(--c-text-3); white-space: nowrap; }
.gv-detail { flex: none; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 10px; background: var(--c-bg-soft-2); border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.gv-gridhost { flex: 1; min-height: 160px; overflow: auto; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; }
.gv-grid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.gv-grid th { position: sticky; top: 0; z-index: 1; height: 30px; background: #f1f2f5; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; padding: 0 6px; text-align: center; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; white-space: nowrap; }
.gv-grid td { height: 30px; font-size: var(--fs-13); color: #222; padding: 0 8px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-grid th:last-child, .gv-grid td:last-child { border-right: 0; }
.gv-grid td.is-center { text-align: center; }
.gv-grid td.is-right { text-align: right; }
.gv-grid th.gv-grid__chk, .gv-grid td.gv-grid__chk { width: 35px; text-align: center; overflow: visible; text-overflow: clip; }
.gv-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.gv-grid__new td { background: #fafcff; padding: 2px 4px; }
.gv-grid__new td.gv-cellsrch { padding-right: 2px; }
.gv-cellsrch__in { display: flex; align-items: center; gap: 2px; }
.gv-cell-inp { width: 100%; height: 26px; min-width: 0; border: 1px solid var(--c-bg-cool); border-radius: var(--r-sm); padding: 0 6px; font-size: var(--fs-13); color: #222; background: #fff; }
.gv-cell-inp.is-right { text-align: right; }
.gv-cell-inp.is-off { background: var(--c-bg-soft); color: var(--c-text-disabled); }
select.gv-cell-inp { padding: 0 2px; }
.gv-cellsrch .gv-cell-inp { flex: 1; }
.gv-cellsrch__b { flex: none; width: 22px; height: 26px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.gv-cellsrch__b .icon { width: 14px; height: 14px; fill: var(--c-text-3); }
.gv-grid__empty td { text-align: center; color: var(--c-text-3); height: 80px; }
.gv-grid__demo td { color: var(--c-primary); }
.gv-dc--d { color: #1c5fd6; font-weight: var(--fw-bold); }
.gv-dc--c { color: #d2603a; font-weight: var(--fw-bold); }
.gv-foot { flex: none; display: flex; align-items: stretch; height: 34px; margin-top: 10px; border: 1px solid #e4e4e4; overflow: hidden; font-size: var(--fs-13); font-weight: var(--fw-bold); }
.gv-foot__lab { display: flex; align-items: center; padding: 0 16px; background: #e9eaf0; color: #222; border-right: 1px solid #e4e4e4; white-space: nowrap; }
.gv-foot__lab--head { background: #ffd9d9; }
.gv-foot__val { flex: 1; min-width: 90px; display: flex; align-items: center; justify-content: flex-end; padding: 0 14px; background: #f1f2f5; color: #444; border-right: 1px solid #e4e4e4; white-space: nowrap; }
.gv-foot__val:last-child { border-right: 0; }
/* 툴바 좌/우 그룹 분리 — 좌: 다운로드~파일 다운로드+전표구분 안내 / 우: 전표묶기~결재상태 업데이트 */
.gv-tools--l { margin-left: 0; align-items: center; }
.gv-tools--l .gv-legend { margin-left: 6px; }
.gv-tools--r { margin-left: auto; }
.pt-tbtn .gv-tbtn__caret { width: 12px; height: 12px; margin-left: 1px; }
/* 상세검색조건 — 검색기준 셀렉트 */
.gv-detail__sel { height: 32px; min-width: 112px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-13); color: #333; background: #fff; }

/* 계정과목 (bs-03-110) — 분류탭 + 좌측 분류트리 + 우측 7컬럼 그리드 */
.acctm { color: var(--c-text); }
.acctm-top { flex: none; }
.acctm-toprow { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.acctm-tabs { display: inline-flex; }
.acctm-tab { height: 34px; padding: 0 20px; border: 1px solid var(--c-bg-cool); border-right: 0; background: #fff; color: var(--c-text-2); font-size: var(--fs-14); cursor: pointer; }
.acctm-tab:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.acctm-tab:last-child { border-right: 1px solid var(--c-bg-cool); border-radius: 0 var(--r-md) var(--r-md) 0; }
.acctm-tab.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; font-weight: var(--fw-bold); }
.acctm-usechk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: var(--c-text-2); cursor: pointer; }
.acctm-usechk input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.acctm-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.acctm-search { display: flex; align-items: center; gap: 6px; }
.acctm-search__box { display: flex; align-items: center; width: 260px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; }
.acctm-search__box input { flex: 1; min-width: 0; height: 30px; border: 0; padding: 0 12px; font-size: var(--fs-14); background: transparent; }
.acctm-search__btn { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: var(--c-primary); color: #fff; font-size: var(--fs-13); font-weight: var(--fw-medium); }
.acctm-search__btn .icon { width: 15px; height: 15px; fill: #fff; }
.acctm-tools { margin-left: auto; display: flex; gap: 6px; }
.acctm-tbtn { height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.acctm-tbtn:hover { background: var(--c-bg-soft); }
.acctm-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.acctm-tbtn--reg { color: var(--c-brand); }
.acctm-tbtn--reg:hover { background: var(--c-primary-bg); }

.acctm-body { flex: 1; min-height: 0; display: flex; gap: 16px; }
.acctm-tree { width: 300px; flex: none; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; padding: 6px; }
.acctm-tcat { padding: 8px 10px 4px; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-brand); }
.acctm-tnode { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--fs-14); color: #222; cursor: pointer; }
.acctm-tnode:hover { background: var(--c-bg-soft-2); }
.acctm-tnode.is-active { background: var(--c-primary-bg); color: var(--c-primary); font-weight: var(--fw-medium); }
.acctm-tnode--all { font-weight: var(--fw-semibold); }
.acctm-tnode__rng { font-size: var(--fs-12); color: var(--c-text-3); white-space: nowrap; }
.acctm-tnode.is-active .acctm-tnode__rng { color: var(--c-primary); }

.acctm-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acctm-count { flex: none; font-size: var(--fs-13); color: var(--c-text-3); margin-bottom: 8px; }
.acctm-count b { color: var(--c-text); font-weight: var(--fw-semibold); }
.acctm-gridhost { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; }
.acctm-grid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.acctm-grid th { position: sticky; top: 0; z-index: 1; height: 30px; background: #f1f2f5; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; padding: 0 8px; text-align: center; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; white-space: nowrap; }
.acctm-grid td { height: 30px; font-size: var(--fs-13); color: #222; padding: 0 10px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acctm-grid th:last-child, .acctm-grid td:last-child { border-right: 0; }
.acctm-grid td.is-center { text-align: center; }
.acctm-grid th.acctm-grid__chk, .acctm-grid td.acctm-grid__chk { width: 36px; text-align: center; overflow: visible; text-overflow: clip; }
.acctm-grid tbody tr { cursor: pointer; }
.acctm-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.acctm-grid tbody tr.is-selected { background: #edf6ff; }
.acctm-grid__empty td { text-align: center; color: var(--c-text-3); height: 80px; }
.acctm-drcr--d { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: var(--fw-bold); background: #e9f1ff; color: #1c5fd6; }
.acctm-drcr--c { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: var(--fw-bold); background: #fdede9; color: #d2603a; }
.acctm-use { color: var(--c-success); font-weight: var(--fw-medium); }
.acctm-use.is-off { color: var(--c-text-3); }

/* ============================================================
   운영 공통 그리드 디자인 정합 (실측 Wijmo bs-03-110)
   행 30px · 데이터셀 14px/#222 · 헤더 14px·700/#444/bg#f1f2f5 · padding 6px 10px · 보더 1px #e4e4e4
   → 셀폰트 13px·세로패딩0 으로 어긋났던 acctm/gv/ps 그리드를 실서비스에 맞춤(emp-grid는 기정합).
   ============================================================ */
.acctm-grid th, .gv-grid th, .ps-grid th { height: 30px; padding: 6px 10px; font-size: var(--fs-14); }
.acctm-grid td, .gv-grid td, .ps-grid td { height: 30px; padding: 6px 10px; font-size: var(--fs-14); }

/* 공통 그리드 행높이 30px 정합 (line-height) — normal(≈22px)+패딩으로 34px 되던 것 보정 */
.acctm-grid th, .acctm-grid td, .gv-grid th, .gv-grid td, .ps-grid th, .ps-grid td { line-height: 18px; }
/* 행높이 30px 정합 추가 — line-height 미지정으로 base 1.45가 행을 34px로 늘리던 그리드들 (실측 30px) */
.emp-grid th, .emp-grid td,
.pt-grid th, .pt-grid td,
.pitem-grid th, .pitem-grid td,
.psite-grid th, .psite-grid td,
.fa-grid th, .fa-grid td,
.bc-grid th, .bc-grid td { line-height: 18px; }

/* 공통 그리드 box-sizing — height 30px가 border-box로 정확히 적용되도록 */
.acctm-grid th, .acctm-grid td, .gv-grid th, .gv-grid td, .ps-grid th, .ps-grid td { box-sizing: border-box; }

/* 부동산임대 그리드 — 공통 그리드 표준(행30/14px/헤더14·700/#f1f2f5) 정합.
   편집형이라 셀 입력칸이 행을 채우도록 line-height:30 + 입력 height:30 (display grid의 6px패딩 대신). */
.rent-reg-grid { font-size: var(--fs-14); }
.rent-reg-grid th { height: 30px; line-height: 30px; padding: 0 10px; font-size: var(--fs-14); color: #444; }
.rent-reg-grid td { height: 30px; line-height: 30px; padding: 0 10px; font-size: var(--fs-14); }

/* 검색조건 영역 간격 보정 — 개별 화면의 40px 고정 높이를 실서비스 여백 기준으로 재정의 */
.emp-filter,
.dm-search,
.auth-filter,
.pt-filter,
.itm-filter,
.pitem-filter,
.rent-filter,
.psite-filter,
.fa-filter,
.bc-filter,
.ds-filter,
.ps-filter,
.eled-filter,
.cert-filter,
.svl-filter,
.sve-filter,
.payr-filter,
.acctm-toolbar {
  height: auto;
  min-height: 56px;
  padding-top: 12px;
  padding-bottom: 12px;
  align-items: center;
}

/* 검색조건 하단선 이후 간격 — 툴바/섹션 타이틀이 라인에 붙거나 겹쳐 보이지 않게 유지 */
.dm-search,
.auth-filter,
.pt-filter,
.itm-filter,
.pitem-filter,
.rent-filter,
.psite-filter,
.fa-filter,
.bc-filter,
.ds-filter,
.ps-filter,
.eled-filter,
.cert-filter,
.svl-filter,
.sve-filter,
.payr-filter,
.acctm-toolbar {
  margin-bottom: 12px;
}

.emp-filter {
  margin-bottom: 12px;
}
.rentcell-input { height: 30px; }
.rentcell-input input { height: 30px; line-height: 30px; font-size: var(--fs-14); }

/* ============================================================
   전기자료등록 (bs-03-200) — 상단 탭 + 좌:계정별 잔액 입력그리드 + 우:계정별 합계
   ============================================================ */
.pd { color: var(--c-text); }
.pd-tabs { flex: none; display: flex; align-items: flex-end; height: 38px; border-bottom: 1px solid var(--c-border-2); margin-bottom: 12px; }
.pd-tab { position: relative; height: 38px; padding: 0 22px; background: #fff; color: #a6acb5; font-size: var(--fs-16); font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 6px; }
.pd-tab.is-active { color: var(--c-brand); }
.pd-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--c-brand); border-radius: 2px 2px 0 0; }
.pd-tab__corp { font-size: 11px; font-weight: var(--fw-bold); color: var(--c-primary); background: var(--c-primary-bg); border-radius: 8px; padding: 1px 7px; }
.pd-body { flex: 1; min-height: 0; display: flex; gap: 16px; }
.pd-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-right { width: 460px; flex: none; display: flex; flex-direction: column; }
.pd-secbar { flex: none; display: flex; align-items: center; height: 34px; margin-bottom: 8px; }
.pd-sectit { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.pd-tools { margin-left: auto; display: flex; gap: 6px; }
.pd-tbtn { height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pd-tbtn:hover { background: var(--c-bg-soft); }
.pd-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.pd-tbtn--reg { color: var(--c-brand); }
.pd-tbtn--reg:hover { background: var(--c-primary-bg); }
.pd-gridhost { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; }
.pd-grid__sum td { position: sticky; bottom: 0; background: var(--c-bg-soft); font-weight: var(--fw-bold); color: #222; }
.pd-subtabs { flex: none; display: flex; gap: 4px; margin-top: 10px; border-top: 1px solid var(--c-border-2); padding-top: 10px; }
.pd-subtab { height: 30px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); }
.pd-subtab.is-active { background: var(--c-primary-bg); border-color: var(--c-primary); color: var(--c-primary); font-weight: var(--fw-medium); }
.pd-summary { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; padding: 4px 0; }
.pd-sumcat { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 14px; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; border-bottom: 1px solid #e4e4e4; }
.pd-sumcat__v { color: var(--c-brand); }
.pd-sumcls { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 14px 0 26px; font-size: var(--fs-13); color: var(--c-text-2); border-bottom: 1px solid #f0f1f4; }
.pd-sumcls__v { color: #222; }
.pd-sumempty { padding: 40px 0; text-align: center; color: var(--c-text-3); font-size: var(--fs-13); }

/* 전기자료등록 v2 — 좌 870 + 우 채움, 2단 재무상태표(자산|부채·자본), 대차차액, 하단 상세그리드 */
/* 루트 폭: 라이브는 좌측 계정별 잔액 그리드가 남은 폭을 전부 먹고 우측 계정별 합계가 고정이다(3200px 실측) */
.pd { width: 100%; min-width: 1600px; box-sizing: border-box; padding-bottom: 28px; }
.pd-body { gap: 20px; }
.pd-left { flex: 1; min-width: 870px; }
.pd-right { width: 710px; flex: none; min-width: 710px; }
.pd-gridhost { flex: none; height: 360px; overflow: auto; }
.pd-balrow { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 30px; padding: 0 12px; background: var(--c-bg-soft); border: 1px solid var(--c-bg-cool); border-top: 0; font-size: var(--fs-13); }
.pd-balrow__lab { color: var(--c-text-2); font-weight: var(--fw-semibold); }
.pd-balrow__v { font-weight: var(--fw-bold); color: #222; }
.pd-balrow__v.is-bad { color: var(--c-error); }
.pd-subgridhost { flex: 1; min-height: 80px; overflow: auto; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; }
.pd-subtabs { margin-top: 12px; }
.pd-period { margin-left: auto; font-size: var(--fs-13); color: var(--c-text-2); }
.pd-summary { flex: 1; min-height: 0; overflow: auto; }
.pd-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.pd-bscol { border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.pd-bshead { height: 34px; display: flex; align-items: center; justify-content: center; background: #eef0f4; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #333; border-bottom: 1px solid #e4e4e4; }
.pd-bsrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 10px; border-bottom: 1px solid #f0f1f4; font-size: var(--fs-13); }
.pd-bsrow__nm { color: var(--c-text-2); white-space: nowrap; }
.pd-bsrow__v { color: #222; background: #f5f6f8; padding: 5px 10px; border-radius: 4px; min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.pd-bsrow--mid { font-weight: var(--fw-bold); }
.pd-bsrow--mid .pd-bsrow__nm { color: #222; }
.pd-bsrow--mid .pd-bsrow__v { background: #e9f0ff; color: var(--c-brand); }
.pd-bsrow--tot { font-weight: var(--fw-bold); background: #fff4ec; }
.pd-bsrow--tot .pd-bsrow__nm { color: #c2622a; }
.pd-bsrow--tot .pd-bsrow__v { background: transparent; color: #c2622a; }
.pd-bs2 { border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }

/* 전기자료등록 v3 — 손익계산서 양식(단일 컬럼) + 상세보기 버튼 + 하단없는 탭 키큰 그리드 */
.pd-bottom { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pd-gridhost--tall { flex: 1; min-height: 0; height: auto; }
.pd-detailbtn { height: 24px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; color: var(--c-text-2); font-size: var(--fs-12); }
.pd-detailbtn:hover { background: var(--c-bg-soft); color: var(--c-primary); border-color: var(--c-primary); }
.pd-is { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.pd-isrow { display: flex; align-items: center; gap: 12px; }
.pd-isrow__lab { width: 210px; flex: none; padding: 9px 14px; background: #f3f5f8; border-radius: 6px; font-size: var(--fs-13); color: #333; }
.pd-isrow__v { flex: 1; padding: 9px 14px; background: #f3f5f8; border-radius: 6px; text-align: right; font-size: var(--fs-13); color: #222; font-variant-numeric: tabular-nums; }
.pd-isrow--calc .pd-isrow__lab, .pd-isrow--calc .pd-isrow__v { background: #e9f0ff; color: var(--c-brand); font-weight: var(--fw-bold); }

/* 전기자료등록 v4 — 합계바를 스크롤 영역과 분리해 그리드 박스 하단에 고정 */
.pd-gridbox { display: flex; flex-direction: column; flex: none; height: 360px; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; border-radius: var(--r-md); overflow: hidden; }
.pd-gridbox--tall { flex: 1; min-height: 0; height: auto; }
.pd-gridhost { flex: 1; min-height: 0; height: auto; overflow: auto; border: 0; scrollbar-gutter: stable; }
.pd-grid { table-layout: fixed; }
.pd-gridfoot, .pd-subfoot { flex: none; background: var(--c-bg-soft); }
.pd-footgrid { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid #c9ced6; }
.pd-footgrid td { height: 30px; padding: 6px 10px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; line-height: 18px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-footgrid td.is-right { text-align: right; }
.pd-footgrid td.gv-grid__chk { width: 35px; overflow: visible; text-overflow: clip; }
.pd-subbox { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; border-radius: var(--r-md); overflow: hidden; }
.pd-subgridhost { flex: 1; min-height: 0; overflow: auto; border: 0; scrollbar-gutter: stable; }

/* 전기자료등록 v5 — 원가명세서 내부 3탭(제조원가/도급원가/분양원가) pill 탭 */
.pd-innertabs { display: flex; gap: 8px; }
.pd-innertab { height: 32px; padding: 0 16px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.pd-innertab:hover { background: var(--c-primary-bg); }
.pd-innertab.is-active { background: var(--c-primary); color: #fff; }

/* ============================================================
   매출세금계산서 (거래수집 > 매출거래) — stx-*
   ============================================================ */
.stxmgr { color: var(--c-text); }
.stx-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 검색조건 바 (상하 라인은 전역 규칙) */
.stx-filter { flex: none; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-height: 34px; padding: 12px 0; }
.stx-daterange { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #222; }
.stx-daterange .stx-cal { width: 16px; height: 16px; fill: var(--c-text-3); }
.stx-months { display: inline-flex; gap: 4px; }
.stx-month { height: 32px; min-width: 40px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-13); color: var(--c-text-2); }
.stx-month.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; font-weight: var(--fw-bold); }
.stx-status { display: inline-flex; align-items: center; gap: 14px; padding-left: 4px; }
.stx-statchk { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-14); color: #222; white-space: nowrap; cursor: pointer; }
.stx-statchk input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.stx-srchbtn { height: 32px; padding: 0 18px; border: 1px solid var(--c-srch-line); border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.stx-detail { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 4px; }
.stx-detail .icon { width: 14px; height: 14px; fill: currentColor; }
/* 툴바 */
.stx-toolbar { flex: none; display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.stx-tools { margin-left: auto; display: flex; gap: 6px; }
.stx-tbtn { height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stx-tbtn:hover { background: var(--c-bg-soft); }
.stx-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.stx-tbtn:disabled { color: var(--c-text-disabled); cursor: not-allowed; background: #fff; }
/* 카운트 */
.stx-count { flex: none; display: flex; gap: 14px; margin: 10px 0 6px; font-size: var(--fs-13); color: var(--c-text-3); }
.stx-count b { color: var(--c-text); font-weight: var(--fw-semibold); }
/* 그리드 박스 (데이터 스크롤 + 합계바 하단 고정) */
.stx-gridbox { flex: 1; min-height: 160px; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.stx-gridhost { flex: 1; min-height: 0; overflow: auto; }
.stx-grid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.stx-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; padding: 0 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.stx-grid th:last-child { border-right: 0; }
.stx-grid td { font-size: var(--fs-14); color: #222; height: 30px; line-height: 18px; padding: 6px 10px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-grid td:last-child { border-right: 0; }
.stx-grid td.is-center { text-align: center; }
.stx-grid td.is-right { text-align: right; }
.stx-grid tbody tr { cursor: pointer; }
.stx-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.stx-grid tbody tr.is-selected { background: #edf6ff; }
.stx-grid tbody tr.is-excluded td { color: var(--c-text-disabled); }
.stx-grid th.stx-grid__chk, .stx-grid td.stx-grid__chk { width: 40px; text-align: center; overflow: visible; text-overflow: clip; }
.stx-grid__empty td { text-align: center; color: var(--c-text-3); height: 80px; }
.stx-grid__demo td { color: var(--c-primary); }
.stx-grid th .stx-tip { width: 14px; height: 14px; margin-left: 3px; padding: 0; border: 0; background: transparent; vertical-align: -2px; cursor: help; }
.stx-grid th .stx-tip .icon { width: 14px; height: 14px; fill: var(--c-text-3); }
/* 작성일자 — 발행완료=밑줄 */
.stx-date { cursor: pointer; }
.stx-date.is-issued { text-decoration: underline; text-underline-offset: 2px; font-weight: var(--fw-semibold); }
.stx-date:hover { color: var(--c-primary); }
/* 유형 배지 */
.stx-type { display: inline-block; min-width: 36px; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: var(--fw-bold); }
.stx-type--tax { background: #eef1f6; color: #5a6473; }
.stx-type--free { background: #eceff3; color: #8a93a0; }
.stx-type--zero { background: #e6ecff; color: #2d5fd6; }
/* 중복의심 배지 */
.stx-dup { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: var(--fw-bold); background: #fdecec; color: #e0453f; }
/* 합계바 — 박스 하단 고정 */
.stx-gridfoot { flex: none; }
.stx-foot { display: flex; align-items: stretch; height: 34px; border-top: 1px solid #e4e4e4; background: #fff; }
.stx-fc { display: flex; align-items: center; border-right: 1px solid #e4e4e4; font-size: var(--fs-13); }
.stx-fc:last-child { border-right: 0; flex: 1; }
.stx-fc__lab { padding: 0 12px; height: 100%; display: flex; align-items: center; background: #e9eaf0; color: #222; font-weight: var(--fw-bold); white-space: nowrap; }
.stx-fc__val { padding: 0 14px; height: 100%; display: flex; align-items: center; background: #f1f2f5; color: #444; font-weight: var(--fw-bold); white-space: nowrap; }
.stx-fc--head .stx-fc__lab { background: #ffbcbc; color: #b32020; }
.stx-fc--num { flex: 1; }
.stx-fc--num .stx-fc__val { flex: 1; justify-content: flex-end; }
/* 분개 패널 */
.stx-jrnlwrap { flex: none; margin-top: 16px; display: flex; flex-direction: column; }
.stx-jrnlbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stx-jrnlbar strong { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.stx-jrnlhint { font-size: var(--fs-12); color: var(--c-text-3); }
.stx-jrnltools { margin-left: auto; display: flex; gap: 6px; }
.stx-rbtn { height: 30px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); }
.stx-rbtn:hover { background: var(--c-bg-soft); }
.stx-jrnlhost { max-height: 220px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.stx-jrnl { table-layout: fixed; border-collapse: collapse; width: 100%; }
.stx-jrnl th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; padding: 0 8px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.stx-jrnl th:last-child { border-right: 0; }
.stx-jrnl td { font-size: var(--fs-14); color: #222; height: 30px; line-height: 18px; padding: 6px 8px; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-jrnl td:last-child { border-right: 0; }
.stx-jrnl td.is-center { text-align: center; }
.stx-jrnl td.is-right { text-align: right; }
.stx-jrnl__sum td { background: var(--c-bg-soft); font-weight: var(--fw-bold); }
.stx-jg { display: inline-block; min-width: 34px; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: var(--fw-bold); }
.stx-jg--d { background: #e9f1ff; color: #1c5fd6; }
.stx-jg--c { background: #fdede9; color: #d2603a; }

/* 전기자료등록 v6 — 계정과목별 상세보기 팝업 (매출원가/원재료비 원가구성) */
.pddtl { display: flex; flex-direction: column; gap: 8px; }
.pddtl-row { display: flex; align-items: center; gap: 10px; }
.pddtl-lab { width: 150px; flex: none; font-size: var(--fs-14); color: #333; }
.pddtl-sign { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-weight: var(--fw-bold); font-size: 16px; line-height: 1; color: #fff; background: transparent; }
.pddtl-sign.is-plus { background: #f06a6a; }
.pddtl-sign.is-minus { background: #4a7bf0; }
.pddtl-sign.is-eq { background: #8a93a0; }
.pddtl-val { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 12px; text-align: right; font-size: var(--fs-14); font-variant-numeric: tabular-nums; color: #222; }
.pddtl-val[readonly] { background: var(--c-bg-soft); }
.pddtl-row--result .pddtl-lab { font-weight: var(--fw-bold); color: #222; }
.pddtl-row--result .pddtl-val { background: var(--c-bg-soft); font-weight: var(--fw-bold); }
.pddtl-modal .modal__foot { justify-content: center; }

/* ===== 매출세금계산서 — 세금계산서 미리보기 팝업 ===== */
.stx-inv-modal .modal__foot { justify-content: center; }
.stx-inv { display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-13); color: #222; }
.stx-inv__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 2px; }
.stx-inv__appr { display: flex; align-items: center; gap: 16px; }
.stx-inv__apprlab { font-weight: var(--fw-bold); color: #444; }
.stx-inv__apprno { font-weight: var(--fw-bold); letter-spacing: .3px; color: #222; }
.stx-inv__types { display: flex; gap: 18px; }
.stx-inv__type { display: inline-flex; align-items: center; gap: 5px; color: #444; }
.stx-inv__type input { accent-color: var(--c-primary); }
/* 공급자/공급받는자 2단 */
.stx-inv__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stx-inv__party { width: 100%; border-collapse: collapse; table-layout: fixed; }
.stx-inv__party td, .stx-inv__party th { border: 1px solid #e4e4e4; padding: 7px 10px; vertical-align: middle; }
.stx-inv__head { text-align: center; font-size: var(--fs-15); font-weight: var(--fw-bold); padding: 9px; }
.stx-inv__party--sup .stx-inv__head { background: #fbe1e1; color: #d23a3a; }
.stx-inv__party--buy .stx-inv__head { background: #dfe7f7; color: #2d5fd6; }
.stx-inv__party .stx-inv__k { width: 88px; text-align: center; font-weight: var(--fw-bold); white-space: nowrap; }
.stx-inv__party--sup .stx-inv__k { background: #fdeeee; color: #d23a3a; }
.stx-inv__party--buy .stx-inv__k { background: #eef2fb; color: #2d5fd6; }
.stx-inv__v { background: #fff; color: #222; word-break: break-all; }
/* 작성정보 / 품목 / 결제 공통 그리드 */
.stx-inv__info, .stx-inv__items, .stx-inv__pay { width: 100%; border-collapse: collapse; table-layout: fixed; }
.stx-inv__info th, .stx-inv__items th, .stx-inv__pay th { background: #f1f2f5; color: #444; font-weight: var(--fw-bold); border: 1px solid #e4e4e4; padding: 7px 8px; text-align: center; white-space: nowrap; }
.stx-inv__info td, .stx-inv__items td, .stx-inv__pay td { border: 1px solid #e4e4e4; padding: 7px 8px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-inv__info td.is-right, .stx-inv__items td.is-right, .stx-inv__pay td.is-right { text-align: right; }
.stx-inv__info td.is-center, .stx-inv__items td.is-center { text-align: center; }
.stx-inv__items { min-height: 120px; }
.stx-inv__items th:nth-child(1) { width: 64px; } .stx-inv__items th:nth-child(3) { width: 90px; }
.stx-inv__items th:nth-child(4) { width: 80px; } .stx-inv__items th:nth-child(8) { width: 90px; }
.stx-inv__blank td { height: 30px; }
/* 결제 + 청구 */
.stx-inv__payrow { display: flex; align-items: stretch; gap: 12px; }
.stx-inv__payrow .stx-inv__pay { flex: 1; }
.stx-inv__claim { flex: none; width: 170px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e4e4e4; border-radius: 4px; font-size: var(--fs-15); }
.stx-inv__claim b { font-weight: var(--fw-bold); }
.stx-inv__claim span { color: var(--c-primary); font-weight: var(--fw-bold); }

/* 전기자료등록 v7 — 이익잉여금처분계산서(법인) 전체 폭 처분계산서 그리드 */
.pd-body { gap: 0; }
.pd-lrwrap { flex: 1; min-width: 0; display: flex; gap: 20px; }
.pd-chubun { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pdc-bar { flex: none; display: flex; align-items: center; gap: 12px; height: 48px; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); padding: 0 4px; margin-bottom: 12px; }
.pdc-field { display: flex; align-items: center; gap: 8px; }
.pdc-flab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.pdc-date { height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-14); color: #222; }
.pdc-bar .pd-tbtn { margin-left: auto; }
.pdc-gridhost { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; }
.pdc-grid td.pdc-nm { padding-left: 24px; }
.pdc-grid .pdc-head td, .pdc-grid .pdc-sum td { background: var(--c-bg-soft); font-weight: var(--fw-bold); color: #222; }
.pdc-grid .pdc-head td.pdc-nm, .pdc-grid .pdc-sum td.pdc-nm { padding-left: 10px; }
.pdc-grid .pdc-sub td.pdc-nm { font-weight: var(--fw-bold); }
.pdc-pick { width: 22px; height: 22px; margin-left: 6px; vertical-align: middle; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pdc-pick .icon { width: 13px; height: 13px; fill: var(--c-text-3); }
.pdc-pick:hover { border-color: var(--c-primary); }
.pdc-pick:hover .icon { fill: var(--c-primary); }

/* ============================================================
   금융관리 > 전계좌 현황 (allAccounts) — 요약 + 파이/계좌구분 + 입출금잔액현황
   ============================================================ */
/* 대시보드형 폭: 고정 1600 + 가운데 정렬(.hrdash·.mrpt 와 같은 기준).
   유동폭으로 두면 넓은 모니터에서 카드·차트가 과도하게 늘어난다. */
.aa { width: 1600px; min-width: 1600px; margin: 0 auto; color: var(--c-text); }
.aa-head { flex: none; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.aa-tit { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.aa-link { height: 28px; padding: 0 14px; border: 1px solid var(--c-primary); border-radius: 16px; background: #fff; color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.aa-link:hover { background: var(--c-primary-bg); }
.aa-summary { flex: none; display: flex; border: 1px solid var(--c-bg-cool); border-radius: 10px; background: #fbfcfe; margin-bottom: 16px; }
.aa-sumcell { flex: 1; padding: 18px 24px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--c-bg-cool); }
.aa-sumcell:last-child { border-right: 0; }
.aa-sumlab { display: flex; align-items: center; gap: 6px; font-size: var(--fs-15); font-weight: var(--fw-bold); color: #333; }
.aa-sumlab--brand { color: var(--c-brand); }
.aa-sumico { font-size: 16px; }
.aa-info { width: 16px; height: 16px; border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.aa-info .icon { width: 15px; height: 15px; fill: #b6bdc7; }
.aa-sumval { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; }
.aa-sumval strong { font-size: 24px; font-weight: var(--fw-bold); color: #222; font-variant-numeric: tabular-nums; }
.aa-unit { font-size: var(--fs-14); color: #555; }
.aa-sumdiff { text-align: right; font-size: var(--fs-13); color: #888; }
.aa-sumdiff .is-up { color: #e0352b; }
.aa-sumdiff .is-down { color: #2f6bd6; }
.aa-body { flex: 1; min-height: 0; display: flex; gap: 20px; }
.aa-panel { flex: 1; min-width: 0; border: 1px solid var(--c-bg-cool); border-radius: 10px; background: #fff; padding: 24px; overflow: auto; }
.aa-chartwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 20px; }
.aa-pielab { font-size: var(--fs-14); color: #555; font-weight: var(--fw-medium); }
.aa-pie svg { display: block; }
.aa-grid { width: 100%; border-collapse: collapse; }
.aa-grid th { height: 38px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; border-bottom: 2px solid #d7dbe2; padding: 0 8px; text-align: left; }
.aa-grid td { height: 56px; font-size: var(--fs-14); color: #222; border-bottom: 1px solid #eef0f4; padding: 0 8px; vertical-align: middle; }
.aa-krow { cursor: pointer; }
.aa-krow:hover td { background: #fafbfd; }
.aa-krow.is-sel td { background: #f2f4f7; }
.aa-grid .is-center { text-align: center; }
.aa-grid .is-right { text-align: right; }
.aa-kind { display: flex; align-items: center; gap: 8px; }
.aa-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; }
.aa-kname { font-weight: var(--fw-semibold); }
.aa-badge { font-size: 11px; font-weight: var(--fw-medium); border-radius: 4px; padding: 2px 7px; }
.aa-badge.is-avail { background: #e8f0ff; color: #2f6bd6; }
.aa-badge.is-unavail { background: #eef0f3; color: #8a93a0; }
.aa-bal { font-weight: var(--fw-bold); color: #222; }
.aa-pct { font-size: var(--fs-12); color: #999; }
.aa-rhead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.aa-rtit { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); position: relative; padding-left: 12px; }
.aa-rtit::before { content: ''; position: absolute; left: 0; top: 3px; width: 4px; height: 16px; background: var(--c-brand); border-radius: 2px; }
.aa-rdetail { height: 24px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 14px; background: #fff; color: var(--c-text-2); font-size: var(--fs-12); }
.aa-rdetail:hover { border-color: var(--c-primary); color: var(--c-primary); }
.aa-line { width: 100%; margin-bottom: 20px; }
.aa-line svg { display: block; }
.aa-banktit { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #333; padding: 10px 0; border-top: 1px solid #eef0f4; }
.aa-banks { display: flex; flex-direction: column; }
.aa-bankrow { display: flex; align-items: center; justify-content: space-between; height: 52px; border-bottom: 1px solid #f2f3f6; }
.aa-bankL { display: flex; align-items: center; gap: 8px; }
.aa-bankname { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.aa-banktag { font-size: 11px; color: #2f6bd6; background: #e8f0ff; border-radius: 4px; padding: 2px 6px; }
.aa-bankacc { font-size: var(--fs-13); color: #888; }
.aa-bankbal { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; font-variant-numeric: tabular-nums; }

/* ============================================================
   금융관리 > 계좌거래내역 (acctTx) — 계좌정보 4패널 + 계좌상세내역
   ============================================================ */
/* 대시보드형 폭: 고정 1600 + 가운데 정렬(카드사용내역 .atx.cu 도 이 규칙을 함께 쓴다).
   유동폭이면 4패널·차트가 늘어나 축 라벨이 찌그러진다(preserveAspectRatio="none"). */
.atx { width: 1600px; min-width: 1600px; margin: 0 auto; }
.atx-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.atx-info { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.atx-filterbar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); padding: 12px 2px; margin-bottom: 12px; }
.atx-note { font-size: var(--fs-13); color: #888; }
.atx-filter { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.atx-flab { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; }
.atx-fsel { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); font-size: var(--fs-13); color: #555; }
.atx-fsel .icon { width: 14px; height: 14px; fill: #9aa3ae; }
.atx-fbtn { height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 4px; }
.atx-fbtn .icon { width: 15px; height: 15px; fill: currentColor; }
.atx-fbtn:hover { background: var(--c-bg-soft); }
/* 행 높이는 콘텐츠에 맞춘다. grid-auto-rows:1fr 이면 남는 세로공간을 2행이 균등하게
   나눠 먹어, 화면이 높을수록 박스만 커지고 안은 빈다(막대 120px·TOP5 5줄·차트 200px 은 고정). */
.atx-grid2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; align-content: start; gap: 16px; overflow: auto; }
.atx-panel { border: 1px solid var(--c-bg-cool); border-radius: 10px; background: #fff; padding: 18px 20px; display: flex; flex-direction: column; min-height: 260px; }
.atx-phead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.atx-ptit { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); position: relative; padding-left: 11px; }
.atx-ptit::before { content: ''; position: absolute; left: 0; top: 3px; width: 4px; height: 15px; background: var(--c-brand); border-radius: 2px; }
.atx-mini { height: 26px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-12); display: inline-flex; align-items: center; gap: 4px; }
.atx-mini .icon { width: 13px; height: 13px; fill: currentColor; }
.atx-ptotal { margin-left: auto; display: flex; align-items: baseline; gap: 3px; }
.atx-ptotal strong { font-size: 20px; font-weight: var(--fw-bold); color: #222; }
.atx-ptotal span { font-size: var(--fs-13); color: #555; }
.atx-unit, .atx-legend { margin-left: auto; font-size: var(--fs-12); color: #999; }
.atx-legend { display: flex; gap: 12px; }
.atx-lg { display: inline-flex; align-items: center; gap: 5px; color: #666; }
.atx-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* 계좌잔액 */
.atx-acclist { flex: 1; min-height: 0; overflow: auto; }
.atx-accrow { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 6px; border-bottom: 1px solid #f2f3f6; cursor: pointer; }
.atx-accrow:hover { background: var(--c-bg-soft); }
.atx-accL { display: flex; flex-direction: column; gap: 2px; }
.atx-bankname { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.atx-bankacc { font-size: var(--fs-12); color: #888; }
.atx-accR { display: flex; align-items: center; gap: 8px; }
.atx-accbal { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; }
.atx-chev { width: 16px; height: 16px; fill: #b6bdc7; }
.atx-chart { width: 100%; }
/* 전월대비 */
.atx-prevwrap { flex: 1; display: flex; gap: 16px; }
.atx-prevgrp { flex: 1; display: flex; flex-direction: column; align-items: center; }
.atx-prevhd { display: flex; align-items: center; gap: 5px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; margin-bottom: 10px; }
.atx-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.atx-pbar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.atx-bval { font-size: var(--fs-12); color: #555; }
.atx-barfill { width: 38px; border-radius: 4px 4px 0 0; }
.atx-blab { font-size: var(--fs-12); color: #888; }
.atx-delta { margin-top: 10px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #e0352b; }
.atx-prevgrp:last-child .atx-delta { color: #2f6bd6; }
/* 월간 TOP5 */
.atx-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.atx-segbtn { height: 28px; padding: 0 12px; border: 0; background: #fff; color: var(--c-text-2); font-size: var(--fs-12); }
.atx-segbtn.is-active { background: var(--c-primary); color: #fff; }
.atx-top5 { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.atx-toprow { display: flex; align-items: center; gap: 10px; }
.atx-toprank { width: 18px; flex: none; text-align: center; font-size: var(--fs-13); font-weight: var(--fw-bold); color: #aaa; }
.atx-topbarwrap { flex: 1; min-width: 0; position: relative; height: 24px; display: flex; align-items: center; }
.atx-topbar { height: 24px; border-radius: 4px; min-width: 8%; }
.atx-topmemo { position: absolute; left: 10px; font-size: var(--fs-13); color: #fff; white-space: nowrap; }
.atx-topamt { flex: none; font-size: var(--fs-13); font-weight: var(--fw-bold); color: #222; }
/* 계좌상세내역 */
.atx-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.atx-dbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; border-radius: var(--r-md); overflow: hidden; }
.atx-dgridhost { flex: 1; min-height: 0; overflow: auto; }
.atx-dfoot { flex: none; display: flex; align-items: center; gap: 20px; height: 38px; padding: 0 14px; background: var(--c-bg-soft); border-top: 1px solid #c9ced6; font-size: var(--fs-13); }
.atx-fsum { color: #666; }
.atx-fsum .is-in { color: #e0352b; }
.atx-fsum .is-out { color: #2f6bd6; }
.atx-iobadge { font-size: 11px; font-weight: var(--fw-medium); border-radius: 4px; padding: 2px 8px; }
.atx-iobadge.is-in { background: #fdeceb; color: #e0352b; }
.atx-iobadge.is-out { background: #e9f0ff; color: #2f6bd6; }

/* ============================================================
   금융관리 > 카드사용내역 (cardUse) — .cu-* (월누적/캘린더/청구/사용액)
   ============================================================ */
.cu-monthnav { display: flex; align-items: center; gap: 10px; }
.cu-navbtn { width: 26px; height: 26px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cu-navbtn .icon { width: 15px; height: 15px; fill: #8a93a0; }
.cu-navbtn:hover { border-color: var(--c-primary); }
.cu-month { font-size: var(--fs-16); font-weight: var(--fw-bold); color: #222; }
.cu-cardL { display: flex; align-items: center; gap: 12px; }
.cu-issuer { width: 44px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #e8254e; color: #fff; font-size: 11px; font-weight: var(--fw-bold); border-radius: 5px; }
.cu-cname { display: flex; align-items: center; gap: 6px; }
.cu-corp { font-size: 11px; color: #2f6bd6; background: #e8f0ff; border-radius: 4px; padding: 1px 6px; }
/* 캘린더 */
.cu-cal { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 1px; background: #eef0f4; border: 1px solid #eef0f4; border-radius: 6px; overflow: hidden; }
.cu-caldow { background: #f7f8fa; text-align: center; padding: 6px 0; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: #666; }
.cu-caldow.is-sun { color: #e0352b; }
.cu-calday { background: #fff; padding: 5px 6px; min-height: 46px; display: flex; flex-direction: column; gap: 3px; }
.cu-caldate { font-size: var(--fs-12); color: #444; }
.cu-calday.is-sun .cu-caldate { color: #e0352b; }
.cu-calday.is-out { background: #fafbfc; }
.cu-calday.is-out .cu-caldate, .cu-calday.is-out { color: #c4cad2; }
.cu-calamt { font-size: 11px; font-weight: var(--fw-bold); color: #1f5c99; text-align: right; }
/* 월 청구 금액 */
.cu-bill { flex: 1; display: flex; flex-direction: column; }
.cu-billtot { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--c-bg-soft); border-radius: 8px; margin-bottom: 8px; }
.cu-billtot span { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #444; }
.cu-billtot strong { font-size: 18px; font-weight: var(--fw-bold); color: var(--c-brand); }
.cu-billrow { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 6px; border-bottom: 1px solid #f2f3f6; }
.cu-billL { display: flex; flex-direction: column; gap: 2px; }
.cu-billcard { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.cu-billdate { font-size: var(--fs-12); color: #888; }
.cu-billamt { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; }
/* 카드 사용액 */
.cu-use { flex: 1; display: flex; flex-direction: column; }
.cu-usehd { display: flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: #555; margin-bottom: 8px; }
.cu-usehd strong.is-up { color: #e0352b; }
.cu-usehd strong.is-down { color: #2f6bd6; }
.cu-useico { width: 18px; height: 18px; }
.cu-useico.is-up { fill: #e0352b; }
.cu-useico.is-down { fill: #2f6bd6; }

/* ============================================================
   금융관리 > 이체결과 (transferResult) — 필터 + 그리드 + 합계 footer 고정
   ============================================================ */
.tr-filter { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-height: 56px; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); padding: 12px 2px; }
.tr-months { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.tr-mbtn { height: 30px; padding: 0 11px; border: 0; border-right: 1px solid var(--c-bg-cool); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); }
.tr-mbtn:last-child { border-right: 0; }
.tr-mbtn.is-active { background: var(--c-primary); color: #fff; }
.tr-checks { display: inline-flex; gap: 14px; }
.tr-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: #444; cursor: pointer; }
.tr-filter .pd-tbtn { margin-left: auto; }
/* 2026-08-20 라이브 재실측: 검색조건 바의 [상세 검색]/[초기화]는 회색 보조버튼 —
   뒤쪽 전역 "툴바 버튼 규격 통일" 규칙(.pd-tbtn{color:var(--c-brand)})이 같은 특정도라 파일 순서상 이겨버려
   여기서 특정도를 높여 되돌린다(.pd-tbtn.tr-detailbtn). */
.pd-tbtn.tr-detailbtn { color: #888; }
/* 위 ".tr-filter .pd-tbtn{margin-left:auto}" 가 [상세 검색]과 [조회] 둘 다에 걸려
   auto margin 두 개가 남는 공간을 나눠 가지면서 사이가 벌어진다 — [조회]는 8px 고정으로 되돌린다. */
.tr-detailbtn + .pd-tbtn--reg { margin-left: 8px; }
.tr-inforow { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 2px 8px; }
.tr-infoico { width: 16px; height: 16px; fill: var(--c-primary); }
.tr-infotxt { font-size: var(--fs-13); color: #555; }
.tr-infotxt strong { color: var(--c-primary); }
.tr-count { margin-left: auto; font-size: var(--fs-13); color: #888; }
.tr-box { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; border-radius: var(--r-md); overflow: hidden; }
.tr-gridhost { flex: 1; min-height: 0; overflow: auto; }
.tr-foot { flex: none; border-top: 1px solid #c9ced6; background: var(--c-bg-soft); }
.tr-footinner { display: flex; align-items: center; gap: 28px; height: 44px; padding: 0 18px; flex-wrap: wrap; }
.tr-fcell { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); }
.tr-flab { color: #666; }
.tr-fcell strong { color: #222; font-weight: var(--fw-bold); }
.tr-fcell strong.is-ok { color: #1a9e5c; }
.tr-fcell strong.is-fail { color: #e0352b; }
.tr-fcell strong.is-wait { color: #e0892b; }
.tr-st { font-size: 11px; font-weight: var(--fw-medium); border-radius: 4px; padding: 2px 9px; }
.tr-st.is-ok { background: #e6f6ee; color: #1a9e5c; }
.tr-st.is-wait { background: #fdf0e2; color: #e0892b; }
.tr-st.is-fail { background: #fdeceb; color: #e0352b; }

/* ===== 매출현금영수증 — 음수(취소) + 현금영수증 미리보기 팝업 ===== */
.stx-grid td.crc-minus { color: var(--c-error); }
.crc-modal .modal__foot { justify-content: center; }
.crc-rcpt { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-13); color: #222; }
.crc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--c-brand); }
.crc-title { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.crc-type { font-size: var(--fs-13); font-weight: var(--fw-bold); color: #d23a3a; background: #fdeeee; padding: 2px 10px; border-radius: 4px; }
.crc-sec { font-size: var(--fs-13); font-weight: var(--fw-bold); color: #444; margin-top: 2px; }
.crc-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.crc-tbl th, .crc-tbl td { border: 1px solid #e4e4e4; padding: 8px 10px; vertical-align: middle; }
.crc-tbl .crc-k { width: 130px; background: #f1f2f5; color: #444; font-weight: var(--fw-bold); text-align: center; white-space: nowrap; }
.crc-tbl .crc-v { background: #fff; color: #222; word-break: break-all; }
.crc-tbl .crc-v.is-right { text-align: right; }
.crc-amt .crc-strong .crc-k { background: #ffe9e9; color: #b32020; }
.crc-amt .crc-strong .crc-v { font-weight: var(--fw-bold); color: #b32020; font-size: var(--fs-15); }

/* ============================================================
   금융관리 > 일반이체 (normalTransfer) — 출금정보/입금정보/이체목록
   ============================================================ */
.nt { color: var(--c-text); overflow: auto; }
.nt-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nt-tit { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
.nt-tit--sec { display: block; margin: 18px 0 10px; }
.nt-note { font-size: var(--fs-13); color: #888; }
.nt-exec { margin-left: auto; height: 36px; padding: 0 18px; border: 0; border-radius: var(--r-md); background: var(--c-brand); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 6px; }
.nt-exec .icon { width: 16px; height: 16px; fill: #fff; }
.nt-exec:hover { background: #00306b; }
.nt-input { height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-14); color: #222; }
.nt-input.is-right { text-align: right; }
.nt-input.nt-readonly { background: var(--c-bg-soft); color: #555; }
.nt-input.is-bad { color: var(--c-error); font-weight: var(--fw-bold); }
.nt-fromrow { display: flex; gap: 36px; align-items: center; background: #eef3fc; border: 1px solid #dbe6f7; border-radius: 8px; padding: 16px 20px; }
.nt-field { display: flex; align-items: center; gap: 10px; }
.nt-flab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #333; white-space: nowrap; }
.nt-inwrap { display: flex; align-items: center; gap: 6px; }
.nt-inwrap .nt-input { width: 280px; }
.nt-srch { width: 32px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.nt-srch .icon { width: 16px; height: 16px; fill: #8a93a0; }
.nt-srch:hover { border-color: var(--c-primary); }
.nt-fromrow .nt-field:nth-child(2) .nt-input { width: 200px; }
.nt-balbtn { height: 32px; padding: 0 12px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nt-balbtn .icon { width: 14px; height: 14px; fill: currentColor; }
.nt-balbtn:hover { background: var(--c-primary-bg); }
.nt-inbox { background: #fbfcfe; border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 18px 20px; }
.nt-inrow { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.nt-inrow > .nt-flab:first-child { width: 84px; flex: none; }
.nt-sel { height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 8px; font-size: var(--fs-14); background: #fff; min-width: 130px; }
.nt-inrow .nt-input { width: 260px; }
.nt-intabs { display: flex; gap: 14px; margin-left: 6px; }
.nt-intab { font-size: var(--fs-13); color: var(--c-primary); cursor: pointer; }
.nt-intab:hover { text-decoration: underline; }
.nt-amtwrap { display: flex; align-items: center; gap: 4px; }
.nt-amtwrap .nt-input { width: 220px; }
.nt-won { font-size: var(--fs-14); color: #333; }
.nt-quicks { display: flex; gap: 6px; flex-wrap: wrap; }
.nt-quick { height: 30px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); }
.nt-quick:hover { background: var(--c-bg-soft); border-color: var(--c-primary); color: var(--c-primary); }
.nt-quick--all { color: var(--c-primary); }
.nt-inrow .nt-flab:not(:first-child) { margin-left: 18px; }
.nt-hint { font-size: var(--fs-12); color: #999; margin: 8px 0 14px 84px; }
.nt-addbtn { height: 34px; padding: 0 16px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-14); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 6px; margin-left: 84px; }
.nt-addbtn .icon { width: 15px; height: 15px; fill: currentColor; }
.nt-addbtn:hover { background: var(--c-primary-bg); }
.nt-listhd { margin: 18px 0 8px; font-size: var(--fs-14); color: #444; }
.nt-listhd strong { color: var(--c-brand); }
.nt-max { color: #999; font-size: var(--fs-13); }
.nt-box { display: flex; flex-direction: column; flex: 1; min-height: 160px; border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; border-radius: var(--r-md); overflow: hidden; }
.nt-gridhost { flex: 1; min-height: 0; overflow: auto; }
.nt-gridhost table { width: 100%; }
.nt-del { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; }
.nt-del .icon { width: 16px; height: 16px; fill: #b6bdc7; }
.nt-del:hover .icon { fill: var(--c-error); }
.nt-foot { border-top: 1px solid #c9ced6; background: var(--c-bg-soft); }
.nt-footinner { display: flex; align-items: center; justify-content: center; gap: 14px; height: 56px; }
.nt-fc { display: inline-flex; align-items: center; gap: 8px; }
.nt-fc .nt-flab { font-size: var(--fs-13); }
.nt-fc .nt-input { width: 150px; }
.nt-op { font-size: 18px; font-weight: var(--fw-bold); color: #888; }
/* 계좌 선택 모달 */
.nt-pick { display: flex; flex-direction: column; max-height: 360px; overflow: auto; }
.nt-pickrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px; border-bottom: 1px solid #f2f3f6; cursor: pointer; }
.nt-pickrow:hover { background: var(--c-bg-soft); }
.nt-pickL { display: flex; flex-direction: column; gap: 3px; }
.nt-pbank { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.nt-pacc { font-size: var(--fs-13); color: #888; }
.nt-pbal { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }

/* ===== 분개 인라인 편집 + 전표발행 + 분개수정 팝업 (매출세금계산서/현금영수증 공용) ===== */
.stx-jrnlempty { padding: 28px 0; text-align: center; color: var(--c-text-3); font-size: var(--fs-13); border: 1px solid var(--c-bg-cool); border-top: 0; border-radius: 0 0 8px 8px; }
.stx-jinp { width: 100%; height: 24px; border: 1px solid transparent; border-radius: 4px; padding: 0 6px; font-size: var(--fs-13); background: transparent; color: #222; }
.stx-jinp:hover { border-color: var(--c-bg-cool); background: #fff; }
.stx-jinp:focus { border-color: var(--c-primary); background: #fff; outline: none; }
.stx-jinp.is-right { text-align: right; }
.stx-jinp.is-center { text-align: center; }
.stx-jrnl__sum.is-bad td:nth-child(4), .stx-jrnl__sum.is-bad td:nth-child(5) { color: var(--c-error); }
.stx-rbtn--issue { border-color: var(--c-brand); background: var(--c-brand); color: #fff; }
.stx-rbtn--issue:hover { background: #002a5c; }
.stx-rbtn--issue:disabled { background: #fff; color: var(--c-text-disabled); border-color: var(--c-bg-cool); cursor: not-allowed; }
.stx-rbtn--del { color: #d2603a; }
.stx-rbtn:disabled { color: var(--c-text-disabled); border-color: var(--c-bg-cool); cursor: not-allowed; }
/* 분개수정 팝업 */
.stx-je-modal .modal__foot { justify-content: center; gap: 8px; }
.stx-je { display: flex; flex-direction: column; gap: 12px; }
.stx-je-head { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; background: var(--c-bg-soft-2); border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.stx-je-fld { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); margin-right: 10px; }
.stx-je-fld__lab { color: var(--c-text-3); font-weight: var(--fw-semibold); }
.stx-je-fld__val { color: #222; font-weight: var(--fw-bold); }
.stx-je-tools { display: flex; gap: 6px; }
.stx-je-grid { max-height: 320px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.stx-je-grid .stx-jrnl th { position: sticky; top: 0; z-index: 1; }

/* 금융관리 > 대금이체 (paymentTransfer) — .pt-* (이체결과 .tr-* 재사용) */
.tr-st.is-pre { background: #eef0f3; color: #7e8896; }
.pt .tr-inforow { gap: 10px; }
.pt-act { height: 30px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 5px; }
.pt-act .icon { width: 14px; height: 14px; fill: currentColor; }
.pt-act:disabled { opacity: .45; cursor: not-allowed; }
.pt-act:not(:disabled):hover { background: var(--c-bg-soft); border-color: var(--c-primary); color: var(--c-primary); }
.pt-act--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pt-act--primary:not(:disabled):hover { background: #2257d6; color: #fff; }
.pt-issue { font-size: 11px; font-weight: var(--fw-medium); border-radius: 4px; padding: 2px 8px; background: #eef0f3; color: #8a93a0; }
.pt-issue.is-on { background: #e8f0ff; color: #2f6bd6; }

/* 급여이체 (salaryTransfer) — 미완료 건수 색 */
.tr-fcell strong.is-pre2 { color: #7e8896; }

/* ============================================================
   인사급여 > 대시보드 > 인사/급여현황 (pa-05-100)
   ============================================================ */
/* 대시보드형은 라이브도 고정폭이지만 **가운데 정렬**이다(3200px 실측: 좌여백 645 / 우여백 648) */
.hrdash { width: 1600px; min-width: 1600px; min-height: 742px; margin: 0 auto; color: #222; background: #fff; padding-bottom: 28px; }
.hrd-month { flex: none; height: 32px; display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 8px; }
.hrd-month__label { min-width: 90px; text-align: center; font-size: 20px; font-weight: var(--fw-bold); color: #222; letter-spacing: 0; }
.hrd-month__nav,
.hrd-month__cal { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; color: #888; }
.hrd-month__nav .icon,
.hrd-month__cal .icon { width: 18px; height: 18px; fill: currentColor; }
.hrd-month__nav:hover,
.hrd-month__cal:hover { color: var(--c-primary); }

.hrd-wrap { flex: none; height: 702px; display: flex; gap: 20px; }
.hrd-left { width: 400px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.hrd-right { width: 1180px; flex: none; display: flex; flex-direction: column; gap: 20px; }

.hrd-board { flex: none; width: 400px; border: 1px solid var(--c-bg-cool); border-radius: 10px; background: #fff; overflow: hidden; }
.hrd-board__inner { height: 100%; padding: 20px; }
.hrd-board__title { height: 36px; padding-bottom: 16px; border-bottom: 1px solid var(--c-bg-cool); color: #444; font-size: var(--fs-16); font-weight: var(--fw-bold); text-align: center; }
.hrd-paylist { padding: 0; margin: 0; list-style: none; }
.hrd-payrow { height: 80px; padding: 16px 20px 0; border-bottom: 1px dashed #d8dde5; }
.hrd-payrow:last-child { border-bottom: 0; }
.hrd-payrow__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hrd-payrow__label { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: #222; }
.hrd-payrow__amount { font-size: 18px; font-weight: var(--fw-bold); color: #222; white-space: nowrap; }
.hrd-payrow__diff { margin-top: 10px; text-align: right; color: var(--c-error); font-size: var(--fs-12); font-weight: var(--fw-medium); }

.hrd-board:first-child { height: 219px; }
.hrd-board--emp { height: 232px; }
.hrd-emp { height: 100%; display: flex; flex-direction: column; }
.hrd-emp__head { flex: none; height: 62px; display: flex; align-items: center; border-bottom: 1px solid var(--c-bg-cool); }
.hrd-emp__ico { position: relative; width: 86px; flex: none; height: 40px; }
.hrd-emp__ico::before,
.hrd-emp__ico::after { content: ''; position: absolute; background: #888; }
.hrd-emp__ico::before { left: 15px; top: 9px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 24px 0 0 #888, 12px -8px 0 #888; }
.hrd-emp__ico::after { left: 8px; top: 24px; width: 26px; height: 12px; border-radius: 14px 14px 3px 3px; box-shadow: 24px 0 0 #888; }
.hrd-emp__label { margin-left: 4px; font-size: var(--fs-16); font-weight: var(--fw-semibold); color: #222; }
.hrd-emp__total { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; color: #222; }
.hrd-emp__total span { font-size: 28px; font-weight: var(--fw-bold); letter-spacing: 0; }
.hrd-emp__total em { font-size: var(--fs-14); font-style: normal; font-weight: var(--fw-semibold); }
.hrd-emp__diff { margin-left: 18px; color: var(--c-error); font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; }
.hrd-emp__rows { flex: 1; padding-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.hrd-emp__row { display: grid; grid-template-columns: 1fr 78px 52px; align-items: center; min-height: 22px; font-size: var(--fs-14); }
.hrd-emp__name { color: #222; font-weight: var(--fw-medium); }
.hrd-emp__row strong { text-align: right; font-size: var(--fs-16); font-weight: var(--fw-bold); color: #222; }
.hrd-emp__small { text-align: right; color: #222; font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.hrd-emp__small.is-up { color: var(--c-error); }

.hrd-minirow { flex: none; height: 210px; display: flex; gap: 20px; }
.hrd-mini { position: relative; width: 190px; min-height: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 38px 28px 34px; border: 1px solid var(--c-bg-cool); border-radius: 10px; background: #fff; overflow: hidden; }
.hrd-mini.is-soon { background: #f1f2f5; }
.hrd-ribbon { position: absolute; top: 0; right: 24px; width: 58px; height: 43px; padding-top: 7px; background: #82a3ff; color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 1.1; text-align: center; }
.hrd-ribbon::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; border-left: 29px solid transparent; border-right: 29px solid transparent; border-top: 12px solid #82a3ff; }
.hrd-mini__ico { width: 34px; height: 34px; margin-bottom: 28px; display: block; color: #888; }
.hrd-mini__ico--cake { border-bottom: 8px solid #aaa; border-left: 4px solid transparent; border-right: 4px solid transparent; position: relative; }
.hrd-mini__ico--cake::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 10px; border-top: 4px solid #aaa; border-bottom: 4px solid #aaa; }
.hrd-mini__ico--cake::after { content: ''; position: absolute; left: 14px; top: -5px; width: 4px; height: 12px; background: #aaa; box-shadow: 7px 10px 0 #aaa, -7px 10px 0 #aaa; }
.hrd-mini__ico--doc { position: relative; border: 4px solid #888; border-top-width: 6px; }
.hrd-mini__ico--doc::before,
.hrd-mini__ico--doc::after { content: ''; position: absolute; left: 6px; right: 6px; height: 3px; background: #888; }
.hrd-mini__ico--doc::before { top: 8px; }
.hrd-mini__ico--doc::after { top: 17px; }
.hrd-mini__metric { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.hrd-mini__metric span { font-size: var(--fs-16); color: #888; font-weight: var(--fw-medium); }
.hrd-mini__metric strong { font-size: var(--fs-16); color: #222; font-weight: var(--fw-bold); white-space: nowrap; }
.hrd-textbtn { margin-top: 30px; height: 20px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; border: 0; background: transparent; color: #666; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.hrd-textbtn__mark { width: 18px; height: 18px; position: relative; display: inline-block; }
.hrd-textbtn--gift .hrd-textbtn__mark::before { content: '♡'; color: #ff8a9a; font-size: 20px; line-height: 18px; }
.hrd-textbtn--send .hrd-textbtn__mark::before { content: ''; position: absolute; left: 2px; top: 3px; width: 14px; height: 12px; border: 1px solid #376cfb; transform: skew(-18deg) rotate(-23deg); border-left-color: transparent; border-bottom-color: transparent; }
.hrd-textbtn:hover { color: var(--c-primary); }

.hrd-chartbox { position: relative; flex: none; width: 1180px; height: 472px; border: 1px solid var(--c-bg-cool); border-radius: 10px; background: #fff; overflow: hidden; }
.hrd-chartbox__head { position: absolute; left: 20px; top: 26px; z-index: 2; display: flex; flex-direction: column; gap: 25px; }
.hrd-chartbox__head strong { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.hrd-chartbox__head span { padding-left: 20px; color: #666; font-size: var(--fs-12); }
.hrd-chartsvg { position: absolute; left: 20px; top: 72px; width: 1120px; height: 344px; overflow: visible; }
.hrd-chartsvg__axis,
.hrd-chartsvg__x { fill: #555; font-size: 12px; font-weight: 400; }
.hrd-chartlegend { position: absolute; left: 48px; bottom: 22px; display: flex; align-items: center; gap: 22px; color: #555; font-size: var(--fs-12); }
.hrd-lg { display: inline-flex; align-items: center; gap: 6px; }
.hrd-lg i { display: inline-block; width: 16px; height: 10px; }
.hrd-lg--line i { width: 28px; height: 2px; background: #376cfb; position: relative; }
.hrd-lg--line i::after { content: ''; position: absolute; left: 10px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #376cfb; }
.hrd-lg--prev i { background: #eee; }
.hrd-lg--curr i { background: #c9f5f7; }

.hrd-bottom { flex: none; height: 210px; display: flex; gap: 30px; }
.hrd-listpanel { width: 575px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 10px; }
.hrd-listpanel__title { flex: none; height: 32px; display: flex; align-items: center; color: var(--c-brand); font-size: var(--fs-16); font-weight: var(--fw-bold); }
.hrd-listhead { flex: none; height: 32px; display: grid; grid-template-columns: 1fr 132px; align-items: center; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); color: #222; font-size: var(--fs-14); font-weight: var(--fw-medium); text-align: center; }
.hrd-listpanel--tax .hrd-listhead { grid-template-columns: 82px 1fr; text-align: left; }
.hrd-listpanel--tax .hrd-listhead span:first-child { text-align: center; }
.hrd-list { flex: 1; min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.hrd-list li { height: 32px; display: grid; grid-template-columns: 1fr 132px; align-items: center; border-bottom: 1px dashed #d6dce5; color: #222; font-size: var(--fs-14); }
.hrd-listpanel--tax .hrd-list li { grid-template-columns: 82px 1fr 54px; }
.hrd-list__main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrd-list__sub { color: #888; text-align: center; white-space: nowrap; }
.hrd-listpanel--tax .hrd-list__main { text-align: center; color: #888; }
.hrd-listpanel--tax .hrd-list__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; color: #222; }
.hrd-list__dday { color: #666; text-align: right; font-size: var(--fs-12); font-weight: var(--fw-bold); }

/* ===== 거래수집 미발행 건 그리드 인라인 편집 (매출세금계산서/현금영수증) ===== */
.stx-grid tr.stx-unissued { background: #fbfdff; }
.stx-grid tr.stx-unissued.is-selected { background: #edf6ff; }
.stx-grid td.stx-celledit, .stx-grid td.stx-cellsrch { padding: 2px 6px; overflow: visible; }
.stx-cellwrap { display: flex; align-items: center; gap: 3px; }
.stx-cellwrap .stx-cv { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stx-cellsrch__b { flex: none; width: 22px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; cursor: pointer; }
.stx-cellsrch__b .icon { width: 12px; height: 12px; fill: var(--c-text-3); }
.stx-cellsrch__b:hover { background: var(--c-bg-soft); border-color: var(--c-brand); }
.stx-cinp { width: 100%; height: 24px; border: 1px solid var(--c-bg-cool); border-radius: 4px; padding: 0 6px; font-size: var(--fs-13); background: #fff; }
.stx-cinp:focus { border-color: var(--c-primary); outline: none; }
.stx-typesel { width: 100%; height: 24px; border: 1px solid var(--c-bg-cool); border-radius: 4px; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-primary); background: #fff; padding: 0 2px; cursor: pointer; }
.stx-typesel:focus { border-color: var(--c-primary); outline: none; }
/* 상/하 박스 비율: 상단 그리드가 주, 하단 분개는 고정 높이(약 5행) */
.stx-jrnlhost { height: 190px; max-height: 190px; }

/* 금융관리 > 지출결의서 (expenseSlip) — .es-* (이체결과 .tr-* / .pt-act 재사용) */
.es-toolbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 2px 10px; }
.es-toolbar .tr-count { margin-left: 0; }
.es-regbtn { margin-left: auto; }
.es-route { font-size: 11px; font-weight: var(--fw-medium); border-radius: 4px; padding: 2px 9px; background: #eef2f8; color: #5b6b86; }
.es-tlink { color: var(--c-primary); cursor: pointer; font-size: var(--fs-13); }
.es-tlink:hover { text-decoration: underline; }
.es-regform { display: flex; flex-direction: column; gap: 12px; }
.es-frow { display: flex; align-items: center; gap: 12px; }
.es-flab { width: 84px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #444; }
.es-frow .nt-input { flex: 1; }
.es-fval { flex: 1; font-size: var(--fs-14); color: #222; }
.es-amtwrap { flex: 1; display: flex; align-items: center; gap: 6px; }
.es-amtwrap .nt-input { flex: 1; }

/* ===== 분개 박스: 합계행을 데이터 스크롤과 분리해 박스 하단 고정(공통규칙) ===== */
.stx-jrnlbox { height: 200px; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.stx-jrnlhost { flex: 1; min-height: 0; overflow: auto; border: 0; border-radius: 0; height: auto; max-height: none; }
.stx-jrnlfoot { flex: none; overflow: hidden; background: var(--c-bg-soft); border-top: 1px solid var(--c-border-2); }
.stx-jrnl--foot { border-collapse: collapse; }
.stx-jrnl--foot td { font-size: var(--fs-14); height: 30px; line-height: 18px; padding: 6px 8px; border-right: 1px solid var(--c-border-2); background: var(--c-bg-soft); font-weight: var(--fw-bold); }
.stx-jrnl--foot td:last-child { border-right: 0; }
.stx-jrnl--foot td.is-center { text-align: center; }
.stx-jrnl--foot td.is-right { text-align: right; }
.stx-jrnl--foot .stx-jrnl__sum.is-bad td:nth-child(4), .stx-jrnl--foot .stx-jrnl__sum.is-bad td:nth-child(5) { color: var(--c-error); }
.stx-jrnlempty { border: 0; }
/* 분개수정 팝업도 동일 분리 */
.stx-je-grid { display: flex; flex-direction: column; max-height: 340px; overflow: hidden; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.stx-je-host { flex: 1; min-height: 0; overflow: auto; }
.stx-je-foot { flex: none; background: var(--c-bg-soft); border-top: 1px solid var(--c-border-2); }

/* 지출결의서 작성 팝업 (expenseSlip 등록) — .es-r* */
.es-reg { display: flex; flex-direction: column; }
.es-rtop { display: flex; border: 1px solid var(--c-bg-cool); }
.es-rinfo { flex: 1; display: flex; flex-direction: column; }
.es-rfrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--c-bg-cool); min-height: 40px; }
.es-rfrow:last-child { border-bottom: 0; }
.es-rlab { width: 104px; flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--c-bg-soft); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; border-right: 1px solid var(--c-bg-cool); }
.es-req { color: var(--c-error); }
.es-rin { flex: 1; min-width: 0; height: 38px; border: 0; padding: 0 12px; font-size: var(--fs-14); color: #222; background: #fff; }
.es-rin.es-ro { background: var(--c-bg-soft); color: #666; }
.es-rtext { height: 64px; padding: 8px 12px; resize: none; font-family: inherit; line-height: 1.4; }
.es-rfrow--top { align-items: flex-start; }
.es-rfrow--top .es-rlab { align-items: flex-start; padding-top: 10px; }
.es-rappr { width: 290px; flex: none; border-left: 1px solid var(--c-bg-cool); display: flex; flex-direction: column; }
.es-appr { display: flex; flex: 1; }
.es-appr-side { width: 28px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--c-bg-soft); border-right: 1px solid var(--c-bg-cool); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; writing-mode: vertical-rl; letter-spacing: 4px; }
.es-appr-cols { flex: 1; display: flex; }
.es-appr-col { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--c-bg-cool); }
.es-appr-col:last-child { border-right: 0; }
.es-appr-h { height: 28px; display: flex; align-items: center; justify-content: center; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-bg-cool); font-size: var(--fs-12); color: #555; }
.es-appr-sign { flex: 1; min-height: 56px; }
.es-writer { padding: 6px 10px; text-align: right; font-size: var(--fs-12); color: #888; border-top: 1px solid var(--c-bg-cool); }
.es-rinfo--full { border: 1px solid var(--c-bg-cool); border-top: 0; }
.es-rinfo--full .es-rfrow:last-child { border-bottom: 0; }
.es-racts { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 8px; }
.es-rbtn { height: 30px; padding: 0 12px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 5px; }
.es-rbtn .icon { width: 15px; height: 15px; fill: currentColor; }
.es-rbtn:hover { background: var(--c-primary-bg); }
.es-rbtn--del { border-color: var(--c-error); color: var(--c-error); }
.es-rbtn--del:hover { background: #fdeceb; }
.es-rbox { border: 1px solid var(--c-bg-cool); border-top: 2px solid #b9c2d0; border-radius: var(--r-md); overflow: hidden; }
.es-rgridhost { max-height: 220px; overflow: auto; }
.es-rgrid td { padding: 3px 4px; vertical-align: middle; }
.es-cell { width: 100%; height: 30px; border: 1px solid var(--c-bg-cool); border-radius: 5px; padding: 0 8px; font-size: var(--fs-13); color: #222; background: #fff; }
.es-cell.is-right { text-align: right; }
.es-cell[readonly] { background: var(--c-bg-soft); }
.es-cellwrap { display: flex; align-items: center; gap: 4px; }
.es-cellwrap .es-cell { flex: 1; }
.es-cellbtn { width: 28px; height: 30px; flex: none; border: 1px solid var(--c-bg-cool); border-radius: 5px; background: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.es-cellbtn .icon { width: 14px; height: 14px; fill: #8a93a0; }
.es-cellbtn:hover { border-color: var(--c-primary); }
.es-rfoot { border-top: 1px solid #c9ced6; background: var(--c-bg-soft); }
.es-rfootin { display: flex; align-items: center; gap: 20px; height: 40px; padding: 0 14px; font-size: var(--fs-13); }
.es-rflab { font-weight: var(--fw-semibold); color: #444; }
.es-rfsum { margin-left: auto; font-weight: var(--fw-bold); color: var(--c-brand); }

/* ===== 분개 수정 팝업(매입매출전표 스타일) 보강 ===== */
.ps-itemmemo { display: flex; align-items: center; gap: 8px; }
.ps-itemmemo > span { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #222; white-space: nowrap; }
.ps-itemmemo input { width: 300px; height: 28px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 8px; font-size: var(--fs-13); }
select.ps-inp { width: 100%; height: 26px; border: 1px solid var(--c-bg-cool); border-radius: 4px; font-size: var(--fs-13); background: #fff; padding: 0 4px; }
select.ps-inp:focus { border-color: var(--c-primary); outline: none; }
.cf-box--srch .crc-evidcode { flex: none; width: 84px; border-right: 1px solid var(--c-bg-cool); color: var(--c-primary); font-weight: var(--fw-semibold); }
.ps-jtab th, .ps-jtab td { white-space: nowrap; }
.ps-jtab td .stx-cellwrap { gap: 2px; }
.ps-jtab td .ps-inp { min-width: 0; }

/* 지출결의서 작성 팝업 v2 — 실서비스 정합 (결재 6박스·평문값·연한파랑 입력행) */
.es-rappr { width: 344px; }
.es-rval { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 12px; height: 38px; font-size: var(--fs-14); color: #222; }
.es-rval--muted { color: #aeb6c2; }
.es-rdate { margin: 0 12px; width: 200px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; font-size: var(--fs-14); color: #222; }
.es-appr { display: flex; flex: 1; }
.es-appr-cols { flex: 1; display: flex; gap: 8px; padding: 8px; }
.es-appr-col { flex: 1; display: flex; flex-direction: column; gap: 8px; border: 0; }
.es-appr-box { border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; }
.es-appr-box--top { height: 44px; }
.es-appr-box--btm { flex: 1; min-height: 68px; }
.es-rgridhost { min-height: 200px; max-height: 260px; }
.es-rgrid tbody tr { background: #f2f7ff; }
.es-rgrid td { padding: 4px 6px; border-bottom: 1px solid #e4e9f0; }
.es-cell { border: 0; background: transparent; height: 28px; padding: 0 6px; }
.es-cell[readonly] { background: transparent; }
select.es-cell { background: #fff; border: 1px solid #cdd6e2; border-radius: 5px; flex: 1; }
.es-cellbtn { background: transparent; border: 0; flex: none; }
.es-cellbtn:hover { border: 0; }
.es-cellbtn:hover .icon { fill: var(--c-primary); }
.es-cellwrap .es-cell { flex: 1; }

/* ============================================================
   영수증업로드(Beta) — 거래수집 > 매입거래 (그리드형 + 업로드 플로우) (.rup-*)
   ============================================================ */
/* Beta 안내 배너 */
.rup-banner { flex: none; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; color: #666; }
.rup-banner__ic { width: 15px; height: 15px; fill: #f5a623; }
.rup-banner strong { color: #f5a623; font-weight: 700; }
/* 영수증 업로드 버튼(파랑 강조) */
.stx-tbtn.rup-upbtn { border-color: var(--c-primary); color: var(--c-primary); }
.stx-tbtn.rup-upbtn:hover { background: var(--c-primary-bg, #f2f7ff); }
.stx-tbtn.rup-upbtn .icon { fill: var(--c-primary); }
.rup-note { margin-left: 12px; color: #9aa3b0; font-size: 12px; }
/* 미리보기 클립 버튼 */
.rup-clip { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.rup-clip .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.rup-clip:hover .icon { fill: var(--c-primary); }
/* AI 분석 진행 오버레이 */
.rup-ai__overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(33,40,54,.55); }
.rup-ai { width: 420px; padding: 36px 40px 40px; background: #fff; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.25); text-align: center; }
.rup-ai__doc { width: 72px; height: 72px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 14px; background: #eef3ff; }
.rup-ai__doc .icon { width: 36px; height: 36px; fill: var(--c-primary); }
.rup-ai__track { height: 8px; border-radius: 5px; background: #e9ecf3; overflow: hidden; }
.rup-ai__bar { height: 100%; width: 0; background: var(--c-primary); border-radius: 5px; transition: width .25s ease; }
.rup-ai__pct { display: block; text-align: right; margin: 6px 0 16px; font-size: 13px; font-weight: 700; color: var(--c-primary); }
.rup-ai__t { display: block; font-size: 17px; font-weight: 700; color: var(--c-brand); }
.rup-ai__d { margin: 8px 0 0; font-size: 14px; color: #444; }
.rup-ai__n { margin: 14px 0 0; font-size: 12px; color: #9aa3b0; line-height: 1.6; }
/* 영수증 정보확인 팝업 */
.rup-info-modal .modal__foot { justify-content: center; gap: 8px; }
.rup-info { display: flex; gap: 22px; }
.rup-info__imgbox { flex: none; width: 300px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rup-info__img { width: 100%; max-height: 430px; min-height: 360px; display: flex; align-items: flex-start; justify-content: center; padding: 14px; border: 1px solid var(--c-bg-cool); border-radius: 8px; background: #f4f5f7; overflow: auto; }
.rup-info__page { font-size: 13px; color: #666; font-weight: 600; }
.rup-info__form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rup-info__sec { font-size: 14px; font-weight: 700; color: #444; margin-top: 4px; }
.rup-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rup-fld { display: flex; align-items: center; gap: 10px; }
.rup-fld__lab { width: 84px; min-width: 84px; font-size: 13px; font-weight: 600; color: #222; }
.rup-fld__lab.req::after { content: '*'; color: #ff2828; margin-left: 2px; }
.rup-fld .cf-box, .rup-fld .rup-info__selwrap, .rup-fld .rup-info__amtwrap { flex: 1; min-width: 0; }
.rup-info__sel { width: 100%; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 8px; font-size: 14px; background: #fff; }
.rup-info__amtwrap { display: flex; align-items: center; gap: 6px; }
.rup-info__amt { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; font-size: 14px; text-align: right; }
.rup-info__won { font-size: 13px; color: #444; }
/* 미리보기 모달 */
.rup-preview-modal .modal__foot { justify-content: center; }
.rup-preview { display: flex; justify-content: center; padding: 18px; background: #eceef1; border-radius: 8px; }
/* 영수증(실물 모양 렌더) */
.rup-receipt { width: 300px; padding: 18px 18px 22px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); font-family: 'Courier New', monospace; color: #1c1c1c; font-size: 12px; line-height: 1.5; }
.rup-receipt.is-small { width: 100%; box-shadow: none; font-size: 11px; padding: 6px 8px; }
.rup-rc__brand { text-align: center; font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.rup-rc__sub { text-align: center; font-size: 12px; margin-top: 2px; }
.rup-rc__meta { text-align: center; font-size: 11px; color: #333; }
.rup-rc__hr { border-top: 1px dashed #999; margin: 8px 0; }
.rup-rc__order { text-align: center; font-size: 15px; font-weight: 800; }
.rup-rc__irow { display: grid; grid-template-columns: 1fr 20px auto; gap: 4px; }
.rup-rc__q { text-align: center; }
.rup-rc__amt { text-align: right; font-variant-numeric: tabular-nums; }
.rup-rc__trow { display: flex; justify-content: space-between; }
.rup-rc__trow.is-pay { font-weight: 800; font-size: 14px; }
.rup-rc__vat { text-align: right; font-size: 11px; color: #555; }
.rup-rc__thx { text-align: center; margin-top: 6px; color: #444; }

/* ============================================================
   사원대장 (인사급여 > 사원관리 > 사원대장) — .eledger / .eled-*
   상단 4탭 · 탭별 검색조건바/툴바 · 전체폭 그리드 · 사원 등록 팝업
   실측 스펙: _refs/employee-ledger-spec.md
   ============================================================ */
/* 루트 폭: 콘텐츠 패널을 항상 100% 채움(라이브는 3200px 화면에서 그리드가 2906px 까지
   늘어난다 — 1600px 은 고정폭이 아니라 하한이다). 기준 패턴 = .svl/.sve. */
.eledger { width: 100%; min-width: 1600px; box-sizing: border-box; padding-bottom: 28px; color: var(--c-text); }

/* ---- 상단 4탭 (언더라인형, 좌측 정렬·고정폭 — 어음관리 .rpt-subtab 패턴) ---- */
.eled-tabs { flex: none; display: flex; border-bottom: 1px solid var(--c-border-2); margin-bottom: var(--sp-4); }
.eled-tab { width: 200px; height: 40px; position: relative; font-size: var(--fs-16); font-weight: var(--fw-semibold); color: #a8afb8; background: none; }
.eled-tab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.eled-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-brand); border-radius: 2px 2px 0 0; }

/* 본문: 콘텐츠 높이 채움(그리드 박스 하단까지) */
.eled-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- 검색조건 바 (상·하단 라인은 공용 라인블록에서) ---- */
.eled-filter { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.eled-filter__left { display: flex; align-items: center; gap: 10px; }
.eled-filter__lbl { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-3); white-space: nowrap; }
.eled-srchbox { display: flex; align-items: center; width: 300px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; }
.eled-srchbox input { flex: 1; min-width: 0; border: 0; height: 30px; padding: 0 12px; font-size: var(--fs-14); background: transparent; color: #222; }
.eled-srchbox input::placeholder { color: var(--c-text-3); }
.eled-srchbtn { flex: none; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.eled-srchbtn .icon { width: 16px; height: 16px; fill: #fff; }
.eled-filter__right { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.eled-fld { display: flex; align-items: center; gap: 10px; }
.eled-fld__lbl { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-3); white-space: nowrap; }
.eled-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.eled-seg button { height: 30px; padding: 0 14px; font-size: var(--fs-14); color: var(--c-text-3); background: #fff; border: 0; border-left: 1px solid var(--c-bg-cool); }
.eled-seg button:first-child { border-left: 0; }
.eled-seg button.is-active { background: var(--c-brand); color: #fff; }

/* ---- 툴바 (다운로드/업로드 · 등록/수정/삭제) ---- */
.eled-toolbar { flex: none; display: flex; align-items: center; margin-bottom: 10px; }
.eled-toolbar__left { display: flex; align-items: center; gap: 8px; }
.eled-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.eled-tool { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.eled-tool .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.eled-tool:hover:not(:disabled) { background: var(--c-bg-soft); }
.eled-tool--act { color: var(--c-primary); }
.eled-tool--act .icon { fill: var(--c-primary); }
.eled-tool--reg { border-color: #b9c7ff; }
.eled-tool:disabled { color: var(--c-text-disabled); cursor: not-allowed; }
.eled-tool:disabled .icon { fill: var(--c-text-disabled); }

/* ---- 카운트 ---- */
.eled-count { flex: none; display: flex; gap: 14px; margin-bottom: var(--sp-2); font-size: var(--fs-12); color: var(--c-text-3); }

/* ---- 그리드 (전체폭, 가로 스크롤, 합계 없음) ---- */
.eled-gridhost { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.eled-grid { table-layout: fixed; border-collapse: collapse; }
.eled-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; box-sizing: border-box; }
.eled-grid td { font-size: var(--fs-14); color: #222; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.eled-grid th.is-left, .eled-grid td.is-left { text-align: left; }
.eled-grid th.is-right, .eled-grid td.is-right { text-align: right; }
.eled-grid th:last-child, .eled-grid td:last-child { border-right: 0; }
.eled-grid tbody tr { cursor: pointer; }
.eled-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.eled-grid tbody tr.is-focused { background: #edf6ff; }
.eled-grid tbody tr.is-focused td { color: var(--c-primary); }
.eled-grid__code { color: var(--c-primary); }
.eled-grid tbody tr.is-focused td.eled-grid__code { color: var(--c-primary); font-weight: var(--fw-medium); }
/* 체크박스 칼럼 ellipsis 예외 + 고정폭 ('…' 잘림 방지) */
.eled-grid th.eled-grid__chk, .eled-grid td.eled-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.eled-grid__chk input { width: 16px; height: 16px; accent-color: var(--c-primary); margin: 0; vertical-align: middle; }
.eled-grid__empty td { text-align: center; color: var(--c-text-3); height: 200px; border-right: 0; }

/* ============================================================
   사원 등록/수정 팝업 (.eled-modal — P.ui.Modal 위에 스코프)
   ============================================================ */
.eled-modal { width: 700px; }
.eled-modal .modal__body { padding: 0; overflow-x: hidden; }
.eled-modal .modal__foot { justify-content: center; gap: 8px; background: #fff; }
.eled-btn--cont { background: #fff; border-color: var(--c-primary); color: var(--c-primary); }
.eled-btn--cont:hover { background: var(--c-primary-bg); }
.eled-btn--cancel { background: #fff; border-color: #f0a9a9; color: #e0453f; }
.eled-btn--cancel:hover { background: #fdf0f0; }

/* 팝업 탭 */
.eled-reg__tabs { display: flex; border-bottom: 1px solid var(--c-border-2); padding: 0 24px; }
.eled-reg__tab { flex: 1; height: 46px; position: relative; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #a8afb8; background: none; }
.eled-reg__tab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.eled-reg__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-brand); }
/* 높이는 내용에 맞춰 자동(실서비스 동일 — 탭별 필드 수에 따라 팝업 높이가 달라짐).
   넘칠 때만 모달 카드(max-height:90vh)의 modal__body가 스크롤. */
.eled-reg__host { padding: 16px 24px 18px; }

/* 팝업 2열 폼 그리드 (너비 700px 기준, 실측 높이에 맞춰 행 간격 컴팩트) */
.eled-reg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 9px; align-items: start; }
.eled-reg__grid .cf-item { display: flex; align-items: center; gap: 6px; min-height: 32px; min-width: 0; }
.eled-reg__grid .cf-item.cf-full { grid-column: 1 / -1; }
.eled-reg__grid .cf-tit { width: 92px; min-width: 92px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.eled-reg__subhd { grid-column: 1 / -1; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--c-bg-cool); font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }

/* 팝업 전용 컨트롤 */
.eled-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: #222; white-space: nowrap; flex: none; cursor: pointer; }
.eled-chk input { width: 16px; height: 16px; accent-color: var(--c-primary); margin: 0; }
.eled-addr { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eled-addr__row { display: flex; gap: 6px; }
.eled-email { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.eled-at { color: var(--c-text-3); }
.eled-phone { flex: 1; min-width: 0; }
.eled-acct { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.eled-acct .cf-box { flex: 1; }
.eled-unit { color: var(--c-text-3); font-size: var(--fs-14); }
.eled-minibtn { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); white-space: nowrap; }
.eled-minibtn .icon { width: 15px; height: 15px; fill: var(--c-primary); }
.eled-minibtn.is-off { color: var(--c-text-disabled); cursor: not-allowed; }
.eled-minibtn.is-off .icon { fill: var(--c-text-disabled); }
.eled-memo { flex: 1; min-width: 0; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 8px 12px; font-size: var(--fs-14); font-family: inherit; resize: vertical; }

/* 부양가족 탭 */
.eled-fam { display: flex; flex-direction: column; gap: 10px; }
.eled-fam__note { font-size: var(--fs-13); color: var(--c-text-3); }
.eled-fam__tools { display: flex; gap: 8px; }
.eled-fam__gridbox { border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: hidden; }
.eled-fam__grid { width: 100%; border-collapse: collapse; }
.eled-fam__grid th { background: var(--c-bg-soft); font-size: var(--fs-13); font-weight: var(--fw-bold); color: #444; height: 30px; padding: 6px 8px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.eled-fam__grid td { font-size: var(--fs-13); color: #222; height: 30px; padding: 6px 8px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.eled-fam__grid th:last-child, .eled-fam__grid td:last-child { border-right: 0; }

/* ===== 재고관리 > 대시보드 > 재고현황 (.skd-*) ===== */
/* 대시보드형 폭: 고정 1600 + 가운데 정렬(.hrdash·.mrpt 와 같은 기준) */
.skdash { width: 1600px; min-width: 1600px; margin: 0 auto; }
.skd-month { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; }
.skd-month__nav, .skd-month__cal { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 6px; color: #555; cursor: pointer; }
.skd-month__nav:hover, .skd-month__cal:hover { background: var(--c-bg-soft); }
.skd-month__nav .icon, .skd-month__cal .icon { width: 18px; height: 18px; fill: #555; }
.skd-month__label { font-size: 18px; font-weight: 700; color: #222; min-width: 96px; text-align: center; }
.skd-wrap { display: flex; gap: 24px; align-items: flex-start; padding: 8px 0 24px; }
.skd-main { width: 1116px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.skd-row1, .skd-row3 { display: flex; gap: 20px; }
.skd-txn, .skd-chart, .skd-cur, .skd-stockbox, .skd-sales { background: #fff; border: 1px solid var(--c-bg-cool); border-radius: 10px; }
/* 입고/출고 */
.skd-txn { width: 548px; height: 196px; display: flex; flex-direction: column; overflow: hidden; }
.skd-txn__head { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; border-radius: 10px 10px 0 0; }
.skd-txn--in .skd-txn__head { background: #eef3ff; }
.skd-txn--out .skd-txn__head { background: #fdeef0; }
.skd-txn__title { font-size: 15px; font-weight: 700; color: #333; }
.skd-txn__more { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; cursor: pointer; }
.skd-txn__more strong { font-size: 15px; font-weight: 700; }
.skd-txn--in .skd-txn__more strong { color: #376cfb; }
.skd-txn--out .skd-txn__more strong { color: #ff5263; }
.skd-txn__more span { font-size: 13px; color: #666; }
.skd-txn__more .icon { width: 14px; height: 14px; fill: #999; }
.skd-txn__sub { padding: 8px 16px 2px; font-size: 12px; color: #999; }
.skd-txn__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; }
.skd-txn__row { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 13px; color: #333; }
.skd-txn__date { width: 56px; flex: none; color: #888; }
.skd-txn__badge { width: 32px; flex: none; text-align: center; font-size: 11px; border-radius: 4px; padding: 1px 0; }
.skd-txn--in .skd-txn__badge { color: #376cfb; background: #e9f0ff; }
.skd-txn--out .skd-txn__badge { color: #ff5263; background: #ffe9ec; }
.skd-txn__item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skd-txn__qty { width: 56px; flex: none; text-align: right; }
.skd-txn__unit { width: 30px; flex: none; color: #888; }
.skd-txn__amt { width: 102px; flex: none; text-align: right; font-weight: 600; }
/* 입출고 현황 차트 */
.skd-chart { height: 342px; padding: 16px 18px; display: flex; flex-direction: column; }
.skd-chart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.skd-chart__title { font-size: 16px; font-weight: 700; color: #003879; }
.skd-chart__legend { display: flex; align-items: center; gap: 14px; }
.skd-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #555; }
.skd-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.skd-lg--in i { background: #5b8def; }
.skd-lg--out i { background: #f4a0ae; }
.skd-chart__unit { font-size: 12px; color: #999; }
.skd-chartsvg { width: 100%; flex: 1; min-height: 0; }
.skd-chartsvg__axis { font-size: 11px; fill: #aaa; }
.skd-chartsvg__x { font-size: 12px; fill: #666; }
/* 현 재고량 */
.skd-cur { width: 180px; height: 190px; flex: none; display: flex; flex-direction: column; padding: 16px; }
.skd-cur__head { display: flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; font-size: 14px; font-weight: 600; color: #444; cursor: pointer; }
.skd-cur__head .icon { width: 14px; height: 14px; fill: #999; }
.skd-cur__num { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; }
.skd-cur__num strong { font-size: 24px; font-weight: 700; color: #003879; }
.skd-cur__num em { font-size: 14px; font-style: normal; color: #666; }
/* 매출 Top5 품목 재고량 */
.skd-stockbox { width: 916px; height: 190px; flex: none; padding: 14px 16px; }
.skd-stockbox__title { font-size: 16px; font-weight: 700; color: #003879; margin-bottom: 10px; }
.skd-stockbox__grid { display: flex; gap: 10px; }
.skd-stockitem { flex: 1; min-width: 0; border: 1px solid #eef0f3; border-radius: 8px; padding: 10px 12px; background: #fbfcfe; }
.skd-stockitem__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.skd-stockitem__name { font-size: 13px; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skd-stockitem__ico { width: 15px; height: 15px; flex: none; fill: #c2cad6; }
.skd-stockitem__type { font-size: 11px; color: #999; margin: 1px 0 8px; }
.skd-metric { display: flex; align-items: center; justify-content: space-between; height: 22px; font-size: 12px; color: #777; }
.skd-metric__val { color: #444; }
.skd-metric.is-strong .skd-metric__lab { color: #555; }
.skd-metric.is-strong .skd-metric__val { font-size: 14px; font-weight: 700; color: #222; }
.skd-metric.is-neg .skd-metric__val { color: #ff2828; }
/* 매출금액 패널 */
.skd-sales { width: 460px; flex: none; align-self: stretch; padding: 16px 18px; display: flex; flex-direction: column; }
.skd-sales__head { display: flex; align-items: center; justify-content: space-between; }
.skd-sales__titlewrap { display: inline-flex; align-items: center; gap: 5px; }
.skd-sales__titlewrap strong { font-size: 16px; font-weight: 700; color: #003879; }
.skd-sales__titlewrap .icon { width: 14px; height: 14px; fill: #b5bdc8; }
.skd-iconbtn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 6px; cursor: pointer; }
.skd-iconbtn .icon { width: 16px; height: 16px; fill: #888; }
.skd-iconbtn:hover { background: var(--c-bg-soft); }
.skd-tg { display: flex; gap: 12px; margin-top: 10px; }
.skd-tg__btn { border: 0; background: transparent; padding: 0; font-size: 12px; color: #aaa; cursor: pointer; }
.skd-tg__btn.is-on { color: #376cfb; font-weight: 700; }
.skd-sales__amount { display: flex; align-items: center; gap: 3px; margin-top: 10px; }
.skd-sales__amount strong { font-size: 26px; font-weight: 800; color: #222; letter-spacing: -0.5px; }
.skd-sales__amount span { font-size: 14px; color: #444; }
.skd-sales__amount .icon { width: 16px; height: 16px; fill: #999; }
.skd-sales__diff { margin-top: 4px; font-size: 12px; color: #ff2828; }
.skd-seg { display: flex; gap: 8px; margin-top: 16px; }
.skd-seg__btn { flex: 1; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: 13px; color: #888; cursor: pointer; }
.skd-seg__btn.is-on { border-color: #376cfb; color: #376cfb; font-weight: 700; background: #f4f7ff; }
.skd-share { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.skd-share__pct { align-self: flex-end; font-size: 12px; font-weight: 700; color: #376cfb; }
.skd-share__bar { height: 8px; border-radius: 4px; background: #eef1f5; overflow: hidden; }
.skd-share__bar i { display: block; height: 100%; border-radius: 4px; background: #376cfb; }
.skd-rank__head { display: flex; align-items: center; height: 32px; margin-top: 12px; border-bottom: 1px solid var(--c-bg-cool); }
.skd-rank__h-no { width: 34px; flex: none; font-size: 12px; color: #888; }
.skd-rank__h-name { flex: 1; min-width: 0; font-size: 12px; color: #888; }
.skd-rank__h-diff { width: 70px; flex: none; text-align: right; font-size: 12px; color: #888; }
.skd-rank__h-amt { width: 96px; flex: none; text-align: right; font-size: 12px; color: #888; }
.skd-rank { flex: 1; min-height: 0; overflow-y: auto; }
.skd-rank__row { display: flex; align-items: center; height: 40px; border-bottom: 1px solid #f1f2f5; font-size: 13px; }
.skd-rank__no { width: 22px; height: 22px; flex: none; margin-right: 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #eef1f5; color: #98a1ae; font-weight: 700; font-size: 12px; }
.skd-rank__no.is-top { background: #376cfb; color: #fff; }
.skd-rank__no.is-etc { background: #5a6472; color: #fff; width: auto; padding: 0 8px; }
.skd-rank__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.skd-rank__diff { width: 70px; flex: none; text-align: right; color: #888; font-size: 12px; }
.skd-rank__diff.is-up { color: #ff2828; }
.skd-rank__diff.is-down { color: #376cfb; }
.skd-rank__amt { width: 96px; flex: none; text-align: right; font-weight: 600; color: #222; }
.skd-rank__row.is-etc .skd-rank__amt { color: #888; font-weight: 400; }

/* ===== 재고관리 > 구매관리 > 발주서 (.po-*) ===== */
.po.fillview { gap: 0; }
/* 필터바 (상하 1px 라인) */
.po-filterbar { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); flex: none; }
.po-sel { height: 32px; min-width: 110px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; font-size: 13px; color: #222; background: #fff; }
.po-daterange { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px; font-size: 13px; color: #333; }
.po-cal, .po-search { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; }
.po-cal { width: 24px; height: 24px; border-radius: 5px; }
.po-cal .icon { width: 16px; height: 16px; fill: #6b7785; }
.po-cal:hover { background: var(--c-bg-soft); }
.po-monthrow { display: flex; gap: 4px; }
.po-month { height: 30px; min-width: 38px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: 13px; color: #555; cursor: pointer; }
.po-month:hover { border-color: var(--c-primary); color: var(--c-primary); }
.po-month.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
.po-search { margin-left: auto; gap: 5px; height: 32px; padding: 0 16px; border: 1px solid var(--c-srch-line); border-radius: 6px; background: #fff; color: var(--c-brand); font-size: 13px; font-weight: 500; }
.po-search .icon { width: 15px; height: 15px; fill: var(--c-brand); }
/* 툴바 */
.po-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 0; flex: none; }
.po-tbtn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: 13px; color: #444; cursor: pointer; }
.po-tbtn .icon { width: 15px; height: 15px; fill: #6b7785; }
.po-tbtn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.po-tbtn:hover .icon { fill: var(--c-primary); }
.po-tbtn--detail { margin-left: auto; }
.po-batch { margin-left: auto; }
/* 섹션 */
.po-sec { display: flex; flex-direction: column; min-height: 0; }
.po-sec__head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 8px; }
.po-sec__title { font-size: 15px; font-weight: 700; color: #003879; }
.po-sec__count { font-size: 12px; color: #888; }
.po-sec__count b { color: var(--c-primary); font-weight: 700; }
.po-master { flex: none; }
.po-master .po-grid__scroll { height: 321px; }
.po-detail.fillgrow { flex: 1; min-height: 220px; padding-bottom: 16px; }
/* 그리드 공통 */
.po-grid__scroll { overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; }
.po-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.po-grid th, .po-grid td { border: 1px solid #e4e4e4; padding: 6px 10px; height: 30px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #222; }
.po-grid thead th { position: sticky; top: 0; z-index: 1; background: #f1f2f5; font-weight: 700; color: #444; text-align: center; }
.po-grid td.is-r, .po-grid th.is-r { text-align: right; }
.po-req { color: #ff2828; }
.po-grid__chk { width: 40px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.po-grid__chk input { vertical-align: middle; }
.po-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.po-grid td.is-r .po-cell { justify-content: flex-end; }
.po-cell__v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-grid td.is-r .po-cell__v { flex: none; }
.po-cell__ph { color: #aab2bf; }
.po-pick { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; cursor: pointer; }
.po-pick .icon { width: 13px; height: 13px; fill: #8a93a0; }
.po-pick:hover { border-color: var(--c-primary); }
.po-pick:hover .icon { fill: var(--c-primary); }
.po-grid td.has-pick { padding-right: 4px; }
.po-grid__row { cursor: pointer; }
.po-grid__row:hover td { background: #f6f9ff; }
.po-grid__row.is-sel td { background: #e9f0ff; }
.po-grid__inputrow td { background: #fbfcfe; }
.po-grid__inputrow .po-cell__ph { color: #b6bdc8; }
.po-grid__empty td { text-align: center; color: #888; height: 120px; }
/* 디테일 박스 (합계 하단 고정) */
.po-detail__box { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow: hidden; }
.po-detail__scroll { flex: 1; min-height: 0; overflow: auto; }
.po-detail__scroll .po-grid { border-left: 0; border-top: 0; }
.po-detail__foot { flex: none; overflow-x: hidden; border-top: 2px solid #c9ced6; background: var(--c-bg-soft); }
.po-footgrid td { height: 30px; font-weight: 700; color: #222; background: var(--c-bg-soft); border-color: #e4e4e4; }
.po-foot__lab { text-align: center; color: #444; }

/* ===== 입/출금 내역 (거래수집 > 계좌거래) — bk-* / 계좌필터 ===== */
.stx-acctfld { display: inline-flex; align-items: center; gap: 6px; }
.stx-acctfld__lab { font-size: var(--fs-14); color: #222; font-weight: var(--fw-semibold); white-space: nowrap; }
.stx-acctsel { height: 32px; min-width: 150px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 8px; font-size: var(--fs-14); background: #fff; }
.stx-grid td.bk-in { color: #1c5fd6; font-weight: var(--fw-semibold); }
.stx-grid td.bk-out { color: #d2603a; font-weight: var(--fw-semibold); }
/* 분개수정 팝업 거래메모 입력(헤더 내) */
.bk-memofld { flex: 1 1 100%; }
.bk-memoinp { flex: 1; min-width: 220px; height: 28px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 8px; font-size: var(--fs-13); }

/* ============================================================
   증명서발급 (인사급여 > 사원관리 > 증명서발급) — .certv / .cert-*
   검색조건바 · 툴바(출력/발송/발송내역/추가/삭제) · 전체폭 리스트 · 증명서 발급 팝업
   실측 스펙: _refs/cert-issue-spec.md
   ============================================================ */
/* 루트 폭: 사원대장(.eledger)과 같은 이유로 100% — 라이브는 넓은 화면에서 폭을 채운다 */
.certv { width: 100%; min-width: 1600px; box-sizing: border-box; padding-bottom: 28px; color: var(--c-text); }
.cert-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- 검색조건 바 (상·하단 라인은 공용 라인블록) ---- */
.cert-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cert-datebox { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #333; white-space: nowrap; }
.cert-csel { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 32px; min-width: 130px; padding: 0 8px 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #222; cursor: pointer; }
.cert-csel .icon { width: 16px; height: 16px; fill: var(--c-text-3); flex: none; }
.cert-srchbox { display: flex; align-items: center; width: 300px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; }
.cert-srchbox input { flex: 1; min-width: 0; border: 0; height: 30px; padding: 0 12px; font-size: var(--fs-14); background: transparent; color: #222; }
.cert-srchbox input::placeholder { color: var(--c-text-3); }
.cert-srchbtn { flex: none; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.cert-srchbtn .icon { width: 16px; height: 16px; fill: #fff; }

/* ---- 툴바 ---- */
.cert-toolbar { flex: none; display: flex; align-items: center; margin-bottom: 10px; }
.cert-toolbar__left { display: flex; align-items: center; gap: 8px; }
.cert-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cert-tool { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.cert-tool .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.cert-tool:hover:not(:disabled) { background: var(--c-bg-soft); }
.cert-tool--act { color: var(--c-primary); }
.cert-tool--act .icon { fill: var(--c-primary); }
.cert-tool--reg { border-color: #b9c7ff; }
.cert-tool:disabled { color: var(--c-text-disabled); cursor: not-allowed; }
.cert-tool:disabled .icon { fill: var(--c-text-disabled); }

/* ---- 카운트 ---- */
.cert-count { flex: none; display: flex; gap: 14px; margin-bottom: var(--sp-2); font-size: var(--fs-12); color: var(--c-text-3); }

/* ---- 그리드 ---- */
.cert-gridhost { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.cert-grid { table-layout: fixed; border-collapse: collapse; }
.cert-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; box-sizing: border-box; }
.cert-grid td { font-size: var(--fs-14); color: #222; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.cert-grid th.is-left, .cert-grid td.is-left { text-align: left; }
.cert-grid th:last-child, .cert-grid td:last-child { border-right: 0; }
.cert-grid tbody tr { cursor: pointer; }
.cert-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.cert-grid tbody tr.is-focused { background: #edf6ff; }
.cert-grid tbody tr.is-focused td { color: var(--c-primary); }
.cert-grid__code { color: var(--c-primary); }
.cert-grid th.cert-grid__chk, .cert-grid td.cert-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.cert-grid__chk input { width: 16px; height: 16px; accent-color: var(--c-primary); margin: 0; vertical-align: middle; }
.cert-grid__empty td { text-align: center; color: var(--c-text-3); height: 200px; border-right: 0; }

/* ---- 증명서 발급 팝업 (단일 컬럼) ---- */
.cert-modal { width: 520px; }
.cert-modal .modal__foot { justify-content: center; gap: 8px; background: #fff; }
.cert-btn--cancel { background: #fff; border-color: #f0a9a9; color: #e0453f; }
.cert-btn--cancel:hover { background: #fdf0f0; }
.cert-reg { display: flex; flex-direction: column; gap: 14px; }
.cert-reg .cf-item { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.cert-reg .cf-tit { width: 92px; min-width: 92px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.cert-reg .cf-box, .cert-reg .cf-select, .cert-reg .cf-radio { flex: 1; }
/* 증명서종류 — 실제 선택 가능한 인라인 드롭다운 */
.cert-dd { position: relative; cursor: pointer; }
.cert-dd > .icon { transition: transform 0.15s; }
.cert-dd.is-open > .icon { transform: rotate(180deg); }
.cert-ddmenu { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: #fff; border: 1px solid var(--c-border-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 4px; }
.cert-dd.is-open .cert-ddmenu { display: block; }
.cert-ddmenu button { display: block; width: 100%; height: 34px; padding: 0 10px; border-radius: 4px; background: #fff; text-align: left; color: #222; font-size: var(--fs-14); }
.cert-ddmenu button:hover { background: var(--c-bg-soft); }

/* ===== 자료수집현황 (거래수집 > 이력관리) — .dch-* ===== */
.dch-hint { margin-left: auto; font-size: var(--fs-12); color: var(--c-text-3); }
.dch-sec { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 6px; }
.dch-sec--det { margin-top: 14px; }
.dch-secbar { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dch-sectit { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.dch-detdate { font-size: var(--fs-13); color: var(--c-text-3); }
.dch-secbar__sp { flex: 1; }
.dch-secbar .stx-tbtn { margin-left: auto; }
.dch-sec--det .dch-secbar .dch-recollect { margin-left: 0; }
.dch-tophost { flex: 1; min-height: 90px; max-height: 230px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.dch-tophost .stx-grid tbody tr { cursor: pointer; }
.dch-tophost .stx-grid th { white-space: normal; line-height: 1.25; }
.dch-strong { font-weight: var(--fw-bold); color: var(--c-brand); }
.dch-reqdate { color: var(--c-primary); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dch-detbox { flex: 1; min-height: 0; }
.dch-dethost { flex: 1; min-height: 0; }
.dch-errrow td { background: #fff7f6; }
.dch-st { display: inline-block; min-width: 40px; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: var(--fw-bold); }
.dch-st--ok { background: #e7f7ee; color: #1a9d5a; }
.dch-st--err { background: #fdecec; color: #e0453f; }

/* ===== 재고관리 > 구매관리 > 발주대비 입고내역 (.poin-*) — .po-* 그리드 재사용 ===== */
.poin-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #444; cursor: pointer; user-select: none; }
.poin-check input { width: 15px; height: 15px; }
.po-toolbar .poin-count { font-size: 12px; color: #888; }
.po-toolbar .poin-count b { color: var(--c-primary); font-weight: 700; }
.poin-scroll { flex: 1; min-height: 0; margin-bottom: 16px; }
.poin-ghd { text-align: center; background: #e9edf3 !important; color: #333 !important; }
.poin-grid thead tr:nth-child(2) th { top: 30px; }
.poin-remain { color: #ff2828; font-weight: 700; }

/* ===== 입고/출고 처리·내역 (.po-* 재사용 추가분) ===== */
.po-cell__caret { width: 14px; height: 14px; flex: none; fill: #9aa3af; }
.po-grid td.has-sel .po-cell { justify-content: space-between; }
.po-grid td.po-mark { text-align: center; padding: 0; }
.po-grid td.po-mark span.is-on { color: #2f7d32; font-weight: 700; }
.po-filterbar__detail { margin-left: auto; }
.po-filterbar__detail + .po-search { margin-left: 8px; }
/* 2026-08-20 라이브 재실측(발주서 등 po-* 계열): [상세 검색]/[초기화]는 .po-tbtn 기본(#444)보다 옅은 회색 */
.po-tbtn.po-filterbar__detail { color: #888; }

/* ===== 자료수집현황 v2 — 2단 그룹헤더 마스터-디테일 (.dch-* 재정의) ===== */
.dch-flab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; margin-right: 4px; white-space: nowrap; }
.dch-srch { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.dch-srch .icon { width: 15px; height: 15px; fill: #fff; }
.dch-tophost { flex: none; height: 220px; max-height: 220px; min-height: 220px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; margin-top: 6px; }
.dch-tophost .stx-grid tbody tr { cursor: pointer; }
.dch-topgrid th.dch-th { background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; padding: 0 8px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; }
.dch-topgrid thead tr:first-child th { position: sticky; top: 0; z-index: 2; }
.dch-topgrid thead tr:nth-child(2) th { position: sticky; top: 30px; z-index: 2; }
.dch-cnt { color: var(--c-primary); font-weight: var(--fw-semibold); }
.dch-reqdate { color: var(--c-primary); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dch-dethost { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; margin-top: 12px; }
.dch-errrow td { background: #fff7f6; }
.dch-res-new { color: var(--c-primary); font-weight: var(--fw-semibold); }
.dch-res-err { color: var(--c-error); font-weight: var(--fw-bold); }

/* ===== 재고관리 > 재고관리 (재고수불현황 좌우 분할 .invl-*) ===== */
.po-filterbar__chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #444; }
.po-filterbar__chk input { width: 15px; height: 15px; }
.invl-cols { flex: 1; min-height: 0; display: flex; gap: 16px; padding-bottom: 16px; }
.invl-left { width: 500px; flex: none; }
.invl-right { flex: 1; min-width: 0; }
.invl-rfoot { flex: none; display: flex; align-items: center; height: 40px; border-top: 2px solid #c9ced6; background: var(--c-bg-soft); padding: 0 16px; }
.invl-rfoot__lab { font-size: 13px; font-weight: 700; color: #444; margin-right: 24px; }
.invl-metric { display: flex; align-items: center; gap: 8px; margin-right: 28px; font-size: 13px; }
.invl-metric__lab { color: #666; }
.invl-metric__val { font-weight: 700; color: var(--c-brand); }

/* ============================================================
   4대보험 신고 (.si-* 취득/상실/피부양자, .ci-* 민원처리현황)
   ============================================================ */
.si > .rpt-subtabs { padding: 0 16px; margin-top: 0; }
.si-body { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 12px 20px 20px; }
.si-left { width: 56%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.si-right { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.si-formhost { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.si-formfoot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--c-bg-cool); }
/* 사업장 카드 */
.si-bizcard { width: 100%; border-collapse: collapse; flex: none; table-layout: fixed; }
.si-bizcard th, .si-bizcard td { border: 1px solid var(--c-bg-cool); font-size: var(--fs-13); padding: 0 10px; height: 32px; }
.si-bizcard th { background: var(--c-bg-soft); color: #444; font-weight: var(--fw-semibold); width: 110px; text-align: center; }
.si-bizcard th.si-sub { width: 80px; }
.si-bizcard td { color: #222; }
.si-rechk { height: 26px; padding: 0 12px; float: right; }
/* 사원목록 */
.si-emplist { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.si-emptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.si-emptable th { position: sticky; top: 0; z-index: 1; height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; }
.si-emptable td { height: 30px; border: 1px solid #eef0f3; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-emptable td.si-l { text-align: left; }
.si-emptable td.si-x { color: #c0392b; font-weight: var(--fw-semibold); }
.si-emptable th.si-chk, .si-emptable td.si-chk { width: 34px; overflow: visible; padding: 0; }
.si-emptable td.si-chk input, .si-emptable th.si-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.si-emptable tbody tr { cursor: pointer; }
.si-emptable tbody tr:hover { background: #f6f8fc; }
.si-emptable tbody tr.is-sel td { background: #eaf1fb; }
/* 우측 신고폼 */
.si-form { display: flex; flex-direction: column; gap: 14px; }
.si-formtop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.si-sec { border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.si-sechd { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px; background: #eef3fb; border-bottom: 1px solid var(--c-bg-cool); }
.si-sectit { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }
.si-secchk { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-13); color: #555; cursor: pointer; }
.si-secchk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.si-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px; }
.si-fld { display: flex; align-items: center; gap: 8px; min-width: 0; }
.si-lab { width: 96px; flex: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; }
.si-lab.is-req::after { content: ' *'; color: var(--c-required); }
.si-ctl { flex: 1; min-width: 0; }
.si-in { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-13); color: #222; background: #fff; }
select.si-in { padding: 0 4px; }
.si-srchcell { position: relative; display: flex; }
.si-srchbtn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.si-srchbtn .icon { width: 15px; height: 15px; fill: #8a93a0; }
.si-inlinechk { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-13); color: #555; }
.si-inlinechk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.si-deps { display: flex; flex-direction: column; gap: 12px; }
.si-delbtn { width: 24px; height: 24px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.si-delbtn .icon { width: 17px; height: 17px; fill: #e06464; }
/* 민원처리현황 그룹헤더 그리드 */
.ci-grid .rpt-grid { table-layout: auto; min-width: 100%; }
.ci-grid th { position: sticky; top: 0; z-index: 1; white-space: nowrap; text-align: center; }
.ci-grid td { text-align: center; white-space: nowrap; }
.ci-grid td.ci-l { text-align: left; }
.ci-grid th.ci-chk, .ci-grid td.ci-chk { width: 34px; overflow: visible; padding: 0; }
.ci-grid td.ci-chk input, .ci-grid th.ci-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.ci-st { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.ci-st.is-done { background: #e3f5ea; color: #1f9d57; }
.ci-st.is-wait { background: #e7eefc; color: var(--c-primary); }
.ci-st.is-proc { background: #fdf3e0; color: #c8861a; }

/* ===== 재고량 조회 팝업(.iqp-*) — 창고 목록(좌) + 품목별 재고(우) ===== */
.iqp-modal .modal__foot { justify-content: center; }
.iqp-cols { display: flex; gap: 16px; }
.iqp-wh { width: 264px; flex: none; display: flex; flex-direction: column; }
.iqp-stock { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iqp-label { height: 36px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: #444; margin-bottom: 8px; }
.iqp-bar { display: flex; gap: 8px; height: 36px; margin-bottom: 8px; }
.iqp-search { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 12px; font-size: 13px; color: #222; }
.iqp-srchbtn { flex: none; height: 36px; gap: 5px; }
.iqp-wh .iqp-box { height: 420px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.iqp-stockbox { height: 420px; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow: hidden; }
.iqp-scroll { flex: 1; min-height: 0; overflow: auto; }
.iqp-cols .po-grid thead th { position: sticky; top: 0; z-index: 1; }
/* 신규 입력행 실제 드롭다운 */
.po-grid__inputrow td .po-cellsel { flex: 1; min-width: 0; height: 26px; border: 1px solid #cdd6e2; border-radius: 5px; background: #fff; font-size: 13px; color: #222; padding: 0 4px; cursor: pointer; }
.po-grid__inputrow td .po-cellsel:focus { border-color: var(--c-primary); outline: none; }

/* ============================================================
   급여입력 (.pay-*) — 분할(좌 지급리스트 / 우 지급·공제 상세)
   ============================================================ */
.pay > .rpt-subtabs { padding: 0 16px; margin-top: 0; }
.pay-body { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 12px 20px 20px; }
.pay-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pay-grid { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.pay-grid .rpt-grid { table-layout: auto; min-width: 100%; }
.pay-grid th { position: sticky; top: 0; z-index: 1; white-space: nowrap; text-align: center; }
.pay-grid td { text-align: center; white-space: nowrap; }
.pay-grid td.pay-l, .pay-grid td.rpt-left { text-align: left; }
.pay-grid td.pay-r, .pay-grid td.rpt-num { text-align: right; }
.pay-grid tbody tr { cursor: pointer; }
.pay-grid tbody tr:hover { background: #f6f8fc; }
.pay-grid tbody tr.is-sel td { background: #eaf1fb; }
/* 우측 상세 */
.pay-detail { width: 430px; flex: none; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 14px; overflow-y: auto; }
.pay-empty { color: #888; font-size: var(--fs-13); text-align: center; padding: 40px 0; }
.pay-empcard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.pay-fld { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pay-lab { width: 64px; flex: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; }
.pay-lab.is-req::after { content: ' *'; color: var(--c-required); }
.pay-tables { display: flex; gap: 12px; }
.pay-tbl { flex: 1; border-collapse: collapse; table-layout: fixed; }
.pay-tbl th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; }
.pay-tbl td { height: 30px; border: 1px solid #eef0f3; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 8px; }
.pay-tbl th.pay-l, .pay-tbl td.pay-l { text-align: left; }
.pay-tbl th.pay-r, .pay-tbl td.pay-r { text-align: right; }
.pay-tbl tfoot td { height: 30px; background: #eef3fb; font-weight: var(--fw-bold); border: 1px solid var(--c-border-2); }
.pay-totals { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--c-bg-cool); }
.pay-tot { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-13); color: #555; }
.pay-tot strong { color: #222; font-size: var(--fs-14); }
.pay-tot.is-net { padding-top: 6px; border-top: 1px dashed var(--c-bg-cool); }
.pay-tot.is-net span { color: var(--c-brand); font-weight: var(--fw-bold); }
.pay-tot.is-net strong { color: var(--c-brand); font-size: var(--fs-16); }
/* 등록 모달 */
.pay-reg { display: flex; flex-direction: column; gap: 10px; width: 872px; max-width: 100%; }
.pay-regtop { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pay-regtools { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.pay-reggrid { max-height: 360px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.pay-regtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pay-regtable th { position: sticky; top: 0; z-index: 1; height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; }
.pay-regtable td { height: 30px; border: 1px solid #eef0f3; font-size: var(--fs-14); color: #222; line-height: 18px; padding: 6px 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-regtable td.pay-l { text-align: left; }
.pay-regtable td.pay-r { text-align: right; }
.pay-regtable th.pay-chk, .pay-regtable td.pay-chk { width: 38px; overflow: visible; padding: 0; }
.pay-regtable td.pay-chk input, .pay-regtable th.pay-chk input, .pay-grid td.pay-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); }

/* ============================================================
   급여등록 팝업 (.payreg-*) — 라이브 1:1
   ============================================================ */
.payreg-doc { display: flex; flex-direction: column; gap: 12px; width: 858px; max-width: 100%; }
.payreg-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 12px 14px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fafbfd; }
.payreg-hf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.payreg-lab { width: 70px; flex: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; }
.payreg-lab.is-req::after { content: ' *'; color: var(--c-required); }
.payreg-hc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.payreg-radios { display: flex; gap: 16px; }
.payreg-roi { position: relative; display: flex; flex: 1; }
.payreg-roi .rpt-cal { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.payreg-paydate { gap: 8px; }
.payreg-paydate .rpt-datebox { flex: 1; }
/* 지급사원 그리드 영역 */
.payreg-listtop { display: flex; align-items: center; justify-content: space-between; }
.payreg-cnt { font-size: var(--fs-13); color: #555; }
.payreg-cnt::before { content: ''; }
.payreg-listbtns { display: flex; gap: 6px; }
.payreg-listgrid { height: 200px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.payreg-listgrid .pay-regtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.payreg-listgrid thead th { position: sticky; top: 0; z-index: 2; }
.payreg-listgrid tfoot td { position: sticky; bottom: 0; z-index: 2; height: 32px; background: #eef3fb; font-weight: var(--fw-bold); border: 1px solid var(--c-border-2); padding: 0 8px; }
.payreg-listgrid tfoot td.pay-l { text-align: left; }
.payreg-listgrid tfoot td.payreg-r { text-align: right; }
.payreg-empty { text-align: center; color: #888; padding: 40px 0; }
/* 지급/공제 항목 도구 */
.payreg-itemtools { display: flex; justify-content: space-between; }
.payreg-itemtools__l, .payreg-itemtools__r { display: flex; gap: 6px; }
.payreg-itemtools__l { flex: 1; }
.payreg-itemtools__r { flex: 1; justify-content: flex-end; }
.payreg-items { display: flex; gap: 14px; }
.payreg-itemtbl { flex: 1; min-width: 0; max-height: 180px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.payreg-itemtbl .pay-tbl { width: 100%; }
.payreg-itemtbl .pay-tbl th { position: sticky; top: 0; z-index: 1; }
/* 합계 */
.payreg-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.payreg-tot { display: flex; align-items: center; gap: 10px; }
.payreg-tlab { width: 110px; flex: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; text-align: right; }
.payreg-tlab.is-net { color: var(--c-required); font-weight: var(--fw-bold); }
.payreg-suminp { flex: 1; text-align: right; background: var(--c-bg-soft) !important; }

/* 급여수정 — 지급항목 행 삭제(⊖, hover 시 노출) */
.payreg-itemtbl .pay-tbl td.pay-l { position: relative; }
.payreg-itemdel { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; background: none; display: none; place-items: center; cursor: pointer; }
.payreg-itemtbl .pay-tbl tbody tr:hover .payreg-itemdel { display: grid; }
.payreg-itemdel .icon { width: 16px; height: 16px; fill: #e0352b; }

/* ===== 재고평가 / 재고자산수불현황 (.eva-* / .evl-* / .evp-*) ===== */
.eva-master, .evl-top { flex: none; }
.eva-mscroll { height: 140px; }
.eva-acts { margin-left: auto; display: flex; gap: 8px; }
.po-tbtn.eva-eval { border-color: var(--c-primary); color: var(--c-primary); }
.po-tbtn.eva-eval .icon { fill: var(--c-primary); }
.evp { display: flex; flex-direction: column; gap: 12px; }
.evp-desc { font-size: 13px; color: #666; line-height: 1.5; margin: 0 0 4px; }
.evp-row { display: flex; align-items: center; gap: 12px; }
.evp-lab { width: 80px; flex: none; font-size: 14px; font-weight: 600; color: #222; }
.evp-input { flex: 1; height: 36px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 12px; font-size: 14px; color: #222; }
.evl-cols { flex: 1; min-height: 0; display: flex; gap: 16px; padding-bottom: 16px; }
.evl-left { width: 500px; flex: none; }
.evl-right { flex: 1; min-width: 0; }
.evl-left .po-grid__scroll, .evl-right .po-grid__scroll { flex: 1; min-height: 0; }
.evl-carry td { background: #f2f7ff; font-weight: 700; }

/* ============================================================
   퇴직금관리 — 퇴직금 지급대장 .svl / 퇴직금 추계액 .sve
   실측 스펙: _refs/severance-spec.md
   ============================================================ */
/* 루트 폭: 콘텐츠 패널을 항상 100% 채움(사이드바 접힘/펼침·모니터 폭 무관), 최소 1600px 보장 */
.svl, .sve { width: 100%; min-width: 1600px; box-sizing: border-box; padding-bottom: 28px; color: var(--c-text); }
.svl-body, .sve-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 공통 그리드(전체폭) */
.svl-gridhost, .sve-gridhost { overflow: auto; }
.svl-gridhost { flex: 1; min-height: 0; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.svl-grid, .sve-grid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.svl-grid th, .sve-grid th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; box-sizing: border-box; }
.svl-grid td, .sve-grid td { font-size: var(--fs-14); color: #222; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.svl-grid th.is-left, .svl-grid td.is-left, .sve-grid th.is-left, .sve-grid td.is-left { text-align: left; }
.svl-grid th.is-right, .svl-grid td.is-right, .sve-grid th.is-right, .sve-grid td.is-right { text-align: right; }
.svl-grid th:last-child, .svl-grid td:last-child, .sve-grid th:last-child, .sve-grid td:last-child { border-right: 0; }
.svl-grid tbody tr, .sve-grid tbody tr { cursor: default; }
.svl-grid tbody tr { cursor: pointer; }
.svl-grid tbody tr:hover, .sve-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.svl-grid tbody tr.is-focused, .sve-grid tbody tr.is-focused { background: #edf6ff; }
.svl-grid tbody tr.is-focused td, .sve-grid tbody tr.is-focused td { color: var(--c-primary); }
.svl-grid__chk { width: 40px; padding-left: 0; padding-right: 0; text-align: center; overflow: visible; text-overflow: clip; }
.svl-grid__chk input { width: 16px; height: 16px; accent-color: var(--c-primary); margin: 0; vertical-align: middle; }
.sve-grid__rn { color: var(--c-text-3); }
.svl-grid__empty td, .sve-grid__empty td { text-align: center; color: var(--c-text-3); height: 120px; border-right: 0; }

/* ---- 지급대장 ---- */
.svl-filter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.svl-datebox, .sve-monthbox { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #333; white-space: nowrap; }
.svl-months { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.svl-months button { height: 30px; min-width: 44px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: var(--c-text-3); }
.svl-months button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.svl-months button.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.svl-toolbar { flex: none; display: flex; align-items: center; margin-bottom: 10px; }
.svl-toolbar__left { display: flex; gap: 8px; }
.svl-toolbar__right { margin-left: auto; display: flex; gap: 8px; }
.svl-tool, .sve-tool { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.svl-tool .icon, .sve-tool .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.svl-tool:hover:not(:disabled), .sve-tool:hover { background: var(--c-bg-soft); }
.svl-tool--act { color: var(--c-primary); }
.svl-tool--act .icon { fill: var(--c-primary); }
.svl-tool--reg { border-color: #b9c7ff; }
.svl-tool:disabled { color: var(--c-text-disabled); cursor: not-allowed; }
.svl-tool:disabled .icon { fill: var(--c-text-disabled); }
.svl-count { flex: none; display: flex; gap: 14px; margin-bottom: var(--sp-2); font-size: var(--fs-12); color: var(--c-text-3); }

/* ---- 추계액 ---- */
.sve-filter { display: flex; align-items: center; gap: 12px; }
.sve-filter__lbl { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-3); }
.sve-toolbar { flex: none; display: flex; margin-bottom: 10px; }
/* 추계액 그리드박스: 데이터 스크롤 + 합계 하단 고정 */
.sve-gridbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.sve-gridhost { flex: 1; min-height: 0; }
.sve-gridfoot { flex: none; border-top: 2px solid var(--c-border-2); }
.sve-footgrid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.sve-footgrid td { height: 34px; padding: 6px 10px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; background: var(--c-bg-soft); border-right: 1px solid var(--c-border-2); box-sizing: border-box; white-space: nowrap; }
.sve-footgrid td.is-right { text-align: right; }
.sve-footgrid td.is-left { text-align: left; }
.sve-footgrid td:last-child { border-right: 0; }

/* ============================================================
   퇴직금 입력 팝업 (.svl-modal)
   ============================================================ */
.svl-modal { width: 1080px; }
.svl-modal .modal__body { padding: 0; overflow-x: hidden; }
.svl-modal .modal__foot { justify-content: center; gap: 8px; background: #fff; }
.svl-btn--cancel { background: #fff; border-color: #f0a9a9; color: #e0453f; }
.svl-btn--cancel:hover { background: #fdf0f0; }
.svl-reg { display: flex; flex-direction: column; }
/* 상단 사원정보 3열 */
.svl-reg__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 12px; padding: 20px 24px; }
.svl-reg__top .cf-item { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; }
.svl-reg__top .cf-tit { width: 110px; min-width: 110px; flex: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.svl-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: #222; white-space: nowrap; flex: none; cursor: pointer; }
.svl-chk input { width: 16px; height: 16px; accent-color: var(--c-primary); margin: 0; }
/* 팝업 탭 */
.svl-reg__tabs { display: flex; border-top: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); background: #f8fafc; }
.svl-reg__tab { flex: 1; height: 42px; position: relative; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #8a93a0; background: none; }
.svl-reg__tab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); background: #fff; }
.svl-reg__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-brand); }
.svl-reg__host { padding: 18px 24px 22px; min-height: 360px; }
/* 퇴직정산내역 3열 테이블 */
.svl-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svl-ptbl { border: 1px solid var(--c-bg-cool); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.svl-ptbl__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 12px; background: #f1f4f8; border-bottom: 1px solid var(--c-bg-cool); }
.svl-ptbl__title { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #333; }
.svl-ptbl__body { min-height: 220px; }
.svl-ptable { width: 100%; border-collapse: collapse; }
.svl-ptable th { height: 30px; padding: 6px 10px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #555; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border-2); }
.svl-ptable th.is-left { text-align: left; }
.svl-ptable th.is-right { text-align: right; }
.svl-ptable td { height: 30px; line-height: 18px; padding: 6px 10px; font-size: var(--fs-14); color: #222; border-bottom: 1px solid #eef0f3; }
.svl-ptable td.is-left { text-align: left; }
.svl-ptable td.is-right { text-align: right; }
.svl-ptbl__empty td { text-align: center; color: var(--c-text-3); height: 180px; }
.svl-ptbl__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; background: #f8fafc; border-top: 1px solid var(--c-bg-cool); }
.svl-ptbl__foot span { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #444; }
.svl-ptbl__foot strong { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }
.svl-ptbl__foot--2 { flex-direction: column; height: auto; padding: 0; }
.svl-ptbl__foot--2 > div { width: 100%; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px; border-top: 1px solid var(--c-bg-cool); }
.svl-recalc { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-12); color: var(--c-text-2); cursor: pointer; }
.svl-recalc .icon { width: 14px; height: 14px; fill: var(--c-text-3); }
/* 보조 탭 패널 */
.svl-tabpanel { display: flex; flex-direction: column; gap: 10px; }
.svl-subbar { display: flex; align-items: center; gap: 10px; }
.svl-sublbl { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }
.svl-subbar .cf-box { flex: none; width: 280px; }
.svl-note { font-size: var(--fs-12); color: var(--c-text-3); }
.svl-gridhost--auto { flex: none; max-height: 280px; border: 1px solid var(--c-bg-cool); border-radius: 6px; }

/* ===== 재고관리 보고서: 이익현황조회 / 재고잔량분석 (.pr-*) ===== */
.pr.fillview { gap: 0; }
.pr-tabs { display: flex; border-bottom: 1px solid var(--c-bg-cool); flex: none; }
.pr-tab { height: 44px; padding: 0 22px; border: 0; background: transparent; font-size: 15px; color: #888; cursor: pointer; position: relative; }
.pr-tab:hover { color: #555; }
.pr-tab.is-on { color: var(--c-brand); font-weight: 700; }
.pr-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.pr-controls { display: flex; align-items: center; gap: 18px; padding: 10px 2px; flex: none; }
.pr-ctl { display: inline-flex; align-items: center; gap: 8px; }
.pr-ctl__lab { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: #444; }
.pr-ctl__ico { width: 14px; height: 14px; fill: #b5bdc8; }
.pr-ctlsel { height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; font-size: 13px; color: #222; background: #fff; min-width: 130px; }
.po-filterbar .pr-negchk { margin-left: auto; }
.pr-host { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 16px; }
.pr-box { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow: hidden; }
.pr-box.fillgrow { margin-bottom: 16px; }
.pr-data { flex: 1; min-height: 0; overflow: auto; }
.pr-data .po-grid { border-left: 0; border-top: 0; }
.pr-sub td { background: #eef3ff; font-weight: 700; color: #222; }
.pr-sub__lab { text-align: center; color: #444; }
.pr-neg td { background: #fdecec; color: #e23b3b; }
.pr-neg td .po-cell__v { color: #e23b3b; }

/* ============================================================
   급여입력 탭 전환 (일반/일용직/사업소득자/기타소득자)
   ============================================================ */
.pay-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pay-tabwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 와이드 플랫 그리드(가로스크롤 + 합계 하단 고정) */
.pay-flatbox { flex: 1; min-height: 0; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: column; }
.pay-flathost { flex: 1; min-height: 0; overflow-y: auto; overflow-x: visible; }
.pay-flathost .rpt-grid { table-layout: fixed; width: 100%; }
.pay-flathost thead th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.pay-flatfoot { flex: none; border-top: 2px solid #cfd8e6; }
.pay-flatfoot .rpt-footgrid { table-layout: fixed; width: 100%; border-collapse: collapse; }
.pay-flatfoot .rpt-footgrid td { height: 30px; line-height: 18px; padding: 6px 10px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; background: #eef3fb; white-space: nowrap; text-align: center; }
.pay-flatfoot .rpt-footgrid td.rpt-left { text-align: left; }
.pay-flatfoot .rpt-footgrid td.rpt-num { text-align: right; }
.pay-flat td { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-flat td.rpt-left { text-align: left; }
.pay-flat td.rpt-num { text-align: right; }
.pay-flat th { white-space: nowrap; }
/* 일용직 좌/우 */
.pay-dailyrwrap { flex: 1.4; min-width: 0; display: flex; flex-direction: column; }
.pay-dailytop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex: none; }
.pay-dailyleft .rpt-grid, .pay-dailyright .rpt-grid { table-layout: fixed; width: 100%; }
.pay-dailyright thead th { white-space: nowrap; }

/* 기타소득자 2단(기타소득 + 이자배당소득) */
.pay-other2 { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 20px; }
.pay-othersec { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pay-sectit { flex: none; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); padding: 0 2px 4px; }

/* ============================================================
   급여대장 (.plg / .pay-led*) — 그룹헤더 + 사원당 2행
   ============================================================ */
.pay-ledtool { display: flex; align-items: center; gap: 12px; padding: 14px 20px 0; flex: none; }
.pay-ledtool__l { display: flex; align-items: center; gap: 14px; }
.pay-ledtool__c { flex: 1; text-align: center; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.pay-ledtool__r { width: 120px; flex: none; }
.plg th { white-space: nowrap; }
/* 사원 2행 세트 구분선: 두 번째 행(plg-r2) 아래만 진한 보더 */
.plg tbody tr.plg-r2 td { border-bottom: 1px solid var(--c-border-2); }
.plg tbody tr.plg-r1 td { border-bottom: 1px solid #f0f2f5; }
.plg tbody tr.plg-r1:hover td, .plg tbody tr.plg-r2:hover td { background: #f6f8fc; }
.pay-ledempty { display: grid; place-items: center; height: 100%; min-height: 200px; color: #888; font-size: var(--fs-13); }

/* ============================================================
   급여보고서 3종 (인사급여 > 급여보고서) — 공용 스코프 .payr / .payr-*
   연간 급여집계(.payr--annual: 2단 그룹헤더 와이드 그리드)
   지급/공제 항목별 집계(.payr--side: 좌측 항목 체크리스트 패널 + 월별 그리드)
   실측 스펙: _refs/pay-report-spec.md  · 표시 데이터 전부 가상값
   ============================================================ */
/* 루트 폭: 넓은 모니터 전체 폭 채움(반응형), 최소 1600px (.ptmgr 등과 동일) */
.payr { width: max(1600px, calc(100vw - var(--sidebar-w) - 40px)); min-width: 1600px; padding-bottom: 28px; color: var(--c-text); }
.payr-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- 검색조건 바 (상·하단 라인은 공용 라인블록) ---- */
.payr-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.payr-filter__lbl { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-3); white-space: nowrap; }
.payr-monthbox { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #333; white-space: nowrap; }
.payr-monthbox .cf-iconbtn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-sm); }
.payr-monthbox .cf-iconbtn .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.payr-sep { color: var(--c-text-3); padding: 0 2px; }
.payr-sel { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 32px; padding: 0 10px; min-width: 110px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #333; cursor: pointer; }
.payr-sel .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.payr-srchbox { display: flex; align-items: center; width: 240px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; }
.payr-srchbox input { flex: 1; min-width: 0; border: 0; height: 30px; padding: 0 12px; font-size: var(--fs-14); background: transparent; color: #222; }
.payr-srchbox input::placeholder { color: var(--c-text-3); }
.payr-srchbtn { flex: none; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-srch-line); border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.payr-srchbtn .icon { width: 16px; height: 16px; fill: var(--c-brand); }
.payr-chk { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: var(--fs-14); color: var(--c-text-2); cursor: pointer; white-space: nowrap; }
.payr-chk input { width: 16px; height: 16px; accent-color: var(--c-primary); }

/* ---- 툴바 (다운로드) ---- */
.payr-toolbar { flex: none; display: flex; align-items: center; margin-bottom: 10px; }
.payr-tool { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.payr-tool .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.payr-tool:hover { background: var(--c-bg-soft); }

/* ---- 탭 (좌측 정렬·고정폭 언더라인 — 사원대장 .eled-tabs 패턴) ---- */
.payr-tabs { flex: none; display: flex; border-bottom: 1px solid var(--c-border-2); margin-bottom: var(--sp-4); }
.payr-tab { width: 200px; height: 40px; position: relative; font-size: var(--fs-16); font-weight: var(--fw-semibold); color: #a8afb8; background: none; }
.payr-tab.is-active { color: var(--c-brand); font-weight: var(--fw-bold); }
.payr-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-brand); border-radius: 2px 2px 0 0; }

/* ---- 메인 영역 (연간=그리드 단독, 지급/공제=좌패널+그리드) ---- */
.payr-main { flex: 1; min-height: 0; display: flex; align-items: stretch; }

/* 좌측 항목 체크리스트 패널 */
.payr-side { flex: none; width: 196px; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; background: #fff; }
.payr-side__all { flex: none; padding: 12px 12px 10px; border-bottom: 1px solid var(--c-bg-cool); }
.payr-side__list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.payr-chip { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-md); background: var(--c-primary-bg); color: var(--c-primary); font-size: var(--fs-14); font-weight: var(--fw-medium); cursor: pointer; }
.payr-chip input { flex: none; width: 16px; height: 16px; accent-color: var(--c-primary); }
.payr-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payr-chip.is-off { background: #fff; color: var(--c-text-3); box-shadow: inset 0 0 0 1px var(--c-bg-cool); }
.payr-side__all .payr-chip { background: #fff; box-shadow: inset 0 0 0 1px var(--c-bg-cool); color: var(--c-text-2); font-weight: var(--fw-bold); }
/* 접기 핸들 */
.payr-sidetoggle { flex: none; width: 18px; align-self: stretch; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-text-3); background: none; }
.payr-sidetoggle .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.payr-main.is-collapsed .payr-side { display: none; }

/* ---- 그리드 박스 (데이터 스크롤 + 합계 하단 고정) ---- */
.payr-gridbox { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.payr-gridhost { flex: 1; min-height: 0; overflow: auto; }
.payr-grid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.payr-grid th { position: sticky; top: 0; z-index: 2; background: var(--c-bg-soft); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; box-sizing: border-box; }
.payr-grid td { font-size: var(--fs-14); color: #222; height: 30px; line-height: 18px; padding: 6px 10px; text-align: center; border-right: 1px solid var(--c-border-2); border-bottom: 1px solid var(--c-border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.payr-grid th.is-left, .payr-grid td.is-left { text-align: left; }
.payr-grid th.is-right, .payr-grid td.is-right { text-align: right; }
.payr-grid th:last-child, .payr-grid td:last-child { border-right: 0; }
.payr-grid td.payr-grid__code { color: var(--c-primary); }
.payr-grid tbody tr { cursor: pointer; }
.payr-grid tbody tr:hover { background: var(--c-bg-soft-2); }
.payr-grid tbody tr.is-focused { background: #edf6ff; }
.payr-grid tbody tr.is-focused td { color: var(--c-primary); }
.payr-grid tbody tr.is-focused td.payr-grid__code { font-weight: var(--fw-medium); }
/* 2단 그룹헤더 (연간 급여집계) */
.payr-grid thead tr.payr-grid__sub th { top: 30px; z-index: 1; }
.payr-grid th.payr-grid__grp { background: var(--c-bg-soft); }
.payr-grid__empty td { text-align: center; color: var(--c-text-3); height: 200px; border-right: 0; }

/* 합계 footer (박스 하단 고정 — 데이터 그리드와 동일 colgroup) */
.payr-gridfoot { flex: none; border-top: 2px solid var(--c-border-2); }
.payr-footgrid { table-layout: fixed; border-collapse: collapse; width: 100%; }
.payr-footgrid td { height: 30px; padding: 6px 10px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; background: var(--c-bg-soft); border-right: 1px solid var(--c-border-2); box-sizing: border-box; white-space: nowrap; text-align: center; }
.payr-footgrid td.is-right { text-align: right; }
.payr-footgrid td.is-left { text-align: left; }
.payr-footgrid td:last-child { border-right: 0; }

/* 좌측 기본정보 틀고정(freeze) — 가로 스크롤 시 고정컬럼 유지(연간 급여집계, left는 JS가 누적폭 지정) */
.payr-grid td.is-frozen, .payr-grid th.is-frozen { position: sticky; z-index: 3; background: #fff; }
.payr-grid th.is-frozen { background: var(--c-bg-soft); z-index: 6; }
.payr-grid tbody tr:hover td.is-frozen { background: var(--c-bg-soft-2); }
.payr-grid tbody tr.is-focused td.is-frozen { background: #edf6ff; }
.payr-grid .is-frozenlast { border-right: 2px solid var(--c-border-2); }
.payr-footgrid td.is-frozen { position: sticky; z-index: 3; background: var(--c-bg-soft); }
.payr-footgrid td.is-frozenlast { border-right: 2px solid var(--c-border-2); }

/* ============================================================
   장부/결산 > 장부 8종 (.bk-*) — .po-* 그리드 시스템 재사용
   분개장/총계정원장/일·월계표/계정별원장/거래처원장/계정별거래처원장/매입매출장/현금출납장
   ============================================================ */
.bk-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 좌우 분할(마스터-디테일) */
.bk-split { flex: 1; min-height: 0; display: flex; gap: 14px; padding-bottom: 16px; }
.bk-left { width: 400px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.bk-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* 상하 스택(상단 그리드 + 하단 분개/증빙) */
.bk-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.bk-stack .bk-grow { flex: 1; }
.bk-jrnl { flex: none; height: 190px; display: flex; flex-direction: column; min-height: 0; }
.bk-evid { flex: none; display: flex; flex-direction: column; min-height: 0; }
.bk-jrnl__box, .bk-evid__box { background: #fff; }
/* 분개장 증빙: 항상 1행 → 박스를 내용(헤더+1행)에 맞춰 여백 제거 */
.bk-evid .po-detail__box { flex: none; }
.bk-evid .po-detail__scroll { flex: none; overflow-x: auto; overflow-y: hidden; }
.bk-carry td { background: #e3fffd; color: #5b6470; font-weight: 600; }  /* 전월/전기이월 행 — 라이브 실측 민트 rgb(227,255,253) */
.bk-daily td { background: #eef3fb; color: #2f5396; font-weight: 600; }
.bk-month td { background: #e4ecf9; color: #2f5396; font-weight: 700; }
.bk-catbig td { background: #eaf0fb; color: #1c3d70; font-weight: 700; }
.bk-catmid td { background: #f3f6fc; color: #2f5396; font-weight: 600; }
.po-grid td.bk-acct.bk-subrow { color: #5b6470; }
/* 일/월계표 계정과목(계정명·◀대분류▶·＜중분류＞) 가운데정렬 */
.bk-acct { text-align: center !important; }
.bk-grow .po-detail__scroll .po-grid td.bk-acct { text-align: center; }
/* 소계/이월 라벨([일 계]·[월 계]·[누 계]·[전월이월] 등) 가운데정렬 — 숫자(.is-r)는 우측 유지 */
.bk-carry td:not(.is-r), .bk-daily td:not(.is-r), .bk-month td:not(.is-r) { text-align: center; }

/* 검색조건 바 컨트롤 */
.bk-filter { flex-wrap: nowrap; }
.bk-field { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.bk-field__lab { font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; }
.bk-sel { height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 8px; font-size: 13px; background: #fff; color: #333; }
.bk-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: hidden; }
.bk-seg__b { height: 30px; padding: 0 12px; border: 0; border-right: 1px solid var(--c-bg-cool); background: #fff; font-size: 13px; color: #555; cursor: pointer; }
.bk-seg__b:last-child { border-right: 0; }
.bk-seg__b.is-on { background: var(--c-primary); color: #fff; font-weight: 700; }
.bk-pick { display: inline-flex; align-items: center; }
.bk-pickinput { width: 150px; height: 32px; border: 1px solid var(--c-bg-cool); border-right: 0; border-radius: 6px 0 0 6px; padding: 0 8px; font-size: 13px; background: #fff; color: #333; }
.bk-pickbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-bg-cool); border-radius: 0 6px 6px 0; background: #fff; cursor: pointer; }
.bk-pickbtn .icon { width: 14px; height: 14px; fill: #8a93a0; }
.bk-pickbtn:hover { border-color: var(--c-primary); }
.bk-pickbtn:hover .icon { fill: var(--c-primary); }
.bk-spacer { flex: 1 1 auto; }
.bk-reset { height: 32px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: 13px; color: #444; cursor: pointer; }
.bk-reset:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bk-filter .po-search { margin-left: 8px; }
/* 검색바 우측 끝(조회+초기화) */
.bk-searchend { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.bk-searchend .po-search { margin-left: 0; }
/* 툴바 우측 액션(상세/수정/분개수정) */
.po-toolbar .bk-toolright { margin-left: auto; }
/* 검색조건 바 라디오 그룹(과목/세목) */
.bk-radios { display: inline-flex; align-items: center; gap: 12px; height: 32px; }
.bk-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #444; cursor: pointer; white-space: nowrap; }
.bk-radio input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); cursor: pointer; }
/* 정형화 컬럼(코드·날짜·구분·사업자번호·증빙유형·전자여부 등) 가운데정렬 */
.po-grid td.bk-c { text-align: center; }
/* 매입매출장 구분 색상: 매출=빨강 / 매입=네이비 (가운데정렬) */
.po-grid td.bk-sale, .po-grid td.bk-sale .po-cell__v { color: #ff2828; font-weight: 600; }
.po-grid td.bk-buy, .po-grid td.bk-buy .po-cell__v { color: #003879; font-weight: 600; }
.po-grid td.bk-sale, .po-grid td.bk-buy { text-align: center; }

/* 내부 탭 (검색조건 위) */
.bk-tabs { flex: none; display: flex; align-items: flex-end; height: 38px; border-bottom: 1px solid var(--c-bg-cool); padding: 0 2px; }
.bk-tab { height: 38px; padding: 0 18px; border: 0; background: none; font-size: 14px; font-weight: 600; color: #8a93a0; cursor: pointer; position: relative; }
.bk-tab:hover { color: var(--c-primary); }
.bk-tab.is-active { color: var(--c-brand); font-weight: 700; }
.bk-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-brand); }

/* 매입매출장 2단헤더 다운로드 등 — .poin-ghd 재사용. 합계행 라벨 */
.bk-psb .po-foot__lab, .bk-cash .po-foot__lab, .bk-journal .po-foot__lab { text-align: center; }

/* 급여대장 일반 — 3행 그룹헤더(rowspan)는 다단 sticky 시 겹침이 생겨 비고정 처리. 합계 footer는 박스하단 고정 유지 */
.plg thead th { position: static; }

/* ===== 부가가치세 신고서 (세금신고 > 부가세 신고) — 2단 마스터-디테일 .vat-* ===== */
.vat { background: #fff; }
.vat-filter { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 18px; min-height: 56px; flex: none; }
.vat-fitem { display: flex; align-items: center; gap: 8px; }
.vat-flab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #444; white-space: nowrap; }
.vat-tilde { color: #888; }
.vat-sel { height: 32px; min-width: 120px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); color: #333; background: #fff; }
.vat-datebox { position: relative; display: flex; align-items: center; }
.vat-datebox input { width: 124px; height: 32px; padding: 0 32px 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); color: #333; }
.vat-cal { position: absolute; right: 2px; width: 28px; height: 28px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.vat-cal .icon { width: 15px; height: 15px; fill: var(--c-primary); }
.vat-topright { margin-left: auto; display: flex; gap: 7px; }
.vat-btn { height: 32px; padding: 0 13px; border: 1px solid #aebfd6; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-13); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.vat-btn .icon { width: 14px; height: 14px; fill: currentColor; }
.vat-btn:hover { background: var(--c-primary-bg); }
.vat-btn.is-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.vat-btn.is-primary:hover { filter: brightness(.96); }
/* 2단 본문 */
.vat-main { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 14px 18px 18px; }
.vat-left { flex: 1.15; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.vat-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.vat-phead { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; flex: none; }
.vat-ptit { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.vat-pnote { font-size: var(--fs-12); color: #e0453f; }
.vat-pacts { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.vat-pbtn { height: 30px; padding: 0 12px; border: 1px solid #aebfd6; border-radius: var(--r-md); background: #fff; color: var(--c-brand); font-size: var(--fs-13); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.vat-pbtn .icon { width: 14px; height: 14px; fill: currentColor; }
.vat-pbtn:hover { background: var(--c-primary-bg); }
.vat-pbtn.is-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.vat-docout { margin-left: auto; }
/* 신고서 양식 */
.vat-formscroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-border-2); }
.vat-form { width: 100%; border-collapse: collapse; }
.vat-form th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; position: sticky; top: 0; z-index: 2; }
.vat-form td { height: 30px; border: 1px solid var(--c-border-2); font-size: var(--fs-14); color: #222; padding: 6px 8px; line-height: 18px; white-space: nowrap; }
.vat-mega { width: 30px; background: #eef3fb; color: var(--c-brand); font-weight: var(--fw-bold); text-align: center; padding: 4px 2px; word-break: break-all; line-height: 1.35; }
.vat-sub2 { background: #f6f8fc; color: #444; font-weight: var(--fw-semibold); text-align: center; padding: 0 6px; white-space: normal; word-break: keep-all; }
.vat-itm { text-align: left; }
.vat-link { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.vat-edit, .vat-info { display: inline-flex; vertical-align: middle; margin-left: 4px; cursor: pointer; }
.vat-edit .icon { width: 13px; height: 13px; fill: var(--c-primary); }
.vat-info .icon { width: 13px; height: 13px; fill: #9aa7bd; }
.vat-no { text-align: center; color: #777; font-size: 12px; }
.vat-amt { text-align: right; font-variant-numeric: tabular-nums; }
.vat-rate { text-align: center; color: #555; font-weight: var(--fw-semibold); }
.vat-cellhl { background: #eaf6fb; }
.vat-row, .vat-form tbody tr:hover td { }
.vat-form tbody tr.vat-tot td { background: #f7f9fc; font-weight: var(--fw-bold); color: #111; }
.vat-form tbody tr.vat-hl td { background: #eef5ff; font-weight: var(--fw-bold); color: var(--c-brand); }
.vat-form tbody tr.vat-hl2 td { background: #fff3e6; font-weight: var(--fw-bold); color: #c2410c; }
.vat-form tbody tr.vat-tot .vat-mega, .vat-form tbody tr.vat-tot .vat-sub2 { background: #eef3fb; }
/* 우측 그리드 공통 */
.vat-rtop { flex: 1.1; min-height: 0; display: flex; flex-direction: column; }
.vat-rbot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vat-jpscroll, .vat-docscroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-border-2); }
.vat-jpgrid, .vat-docgrid { width: 100%; border-collapse: collapse; }
.vat-jpgrid th, .vat-docgrid th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.vat-jpgrid td, .vat-docgrid td { height: 30px; border: 1px solid var(--c-border-2); font-size: var(--fs-14); color: #222; padding: 6px 8px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vat-jpgrid .vat-jpfoot td, .vat-jpgrid tfoot td { background: #f7f9fc; font-weight: var(--fw-bold); border-top: 1px solid var(--c-border-2); }
.vat-jpfoot__lab { text-align: center; }
.vat-empty-row td { text-align: center; color: #888; height: 120px; }
.vat-chk { width: 38px; overflow: visible; text-overflow: clip; }
.vat-docname { text-align: left; }
.vat-mada { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: var(--fw-bold); }
.vat-mada.is-o { background: #e7f7ee; color: #1a9d5a; }
.vat-mada.is-x { background: #fdecec; color: #e0453f; }
.vat-mada.is-n { color: #bbb; }
.vat-savedwrap .vat-savedrow { cursor: pointer; }
.vat-savedwrap .vat-savedrow:hover td { background: var(--c-primary-bg); }

/* 전표상세내역 — 합계바 박스 하단 고정 */
.vat-jpbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-border-2); }
.vat-jpbox .vat-jpscroll { flex: 1; min-height: 0; overflow: auto; border: 0; }
.vat-jpfootbar { flex: none; border-top: 1px solid var(--c-border-2); overflow: hidden; }
.vat-footgrid { width: 100%; border-collapse: collapse; }
.vat-footgrid td { background: #f7f9fc; font-weight: var(--fw-bold); border: 1px solid var(--c-border-2); border-top: 0; height: 30px; font-size: var(--fs-14); padding: 6px 8px; line-height: 18px; }
.vat-footgrid .vat-jpfoot__lab { text-align: center; }
.vat-footgrid .vat-amt { text-align: right; }

/* ============================================================
   급여명세서 (.pst-*) — 리스트 + 산출방법수정 팝업(마스터-디테일)
   ============================================================ */
.pst-grid { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.pst-grid .rpt-grid { table-layout: fixed; min-width: 100%; }
.pst-grid thead th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.pst-grid td { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst-grid td.rpt-left { text-align: left; }
.pst-grid td.rpt-num { text-align: right; }
.pst-grid th.pst-chk, .pst-grid td.pst-chk { width: 38px; overflow: visible; padding: 0; }
.pst-grid td.pst-chk input, .pst-grid th.pst-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.pst-sent { color: #1f9d57; font-weight: var(--fw-bold); }
/* 산출방법수정 팝업 */
.pst-calc { display: flex; gap: 16px; width: 1000px; max-width: 100%; }
.pst-calc__left { width: 380px; flex: none; height: 420px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.pst-calc__right { flex: 1; min-width: 0; height: 420px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); }
.pst-calctbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pst-calctbl th { position: sticky; top: 0; z-index: 1; height: 32px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-13); font-weight: var(--fw-bold); color: #444; text-align: center; }
.pst-calctbl th.rpt-left { text-align: left; }
.pst-calctbl th.rpt-num { text-align: right; }
.pst-calctbl td { height: 34px; border: 1px solid #eef0f3; font-size: var(--fs-13); color: #222; padding: 0 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst-calctbl td.rpt-left { text-align: left; }
.pst-calctbl td.rpt-num { text-align: right; }
.pst-calc__left tbody tr { cursor: pointer; }
.pst-calc__left tbody tr:hover { background: #f6f8fc; }
.pst-calc__left tbody tr.is-sel td { background: #eaf1fb; color: var(--c-brand); }
.pst-gb { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.pst-gb.is-pay { background: #e7eefc; color: var(--c-primary); }
.pst-gb.is-ded { background: #fdecec; color: #d65a5a; }
.pst-formula { padding: 0 4px !important; overflow: visible !important; }
.pst-formula input { width: 100%; height: 26px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 8px; font-size: var(--fs-12); color: #555; }
.pst-formula input::placeholder { color: #aab2bd; }

/* ============================================================
   부가가치세 신고서 — 4개 팝업 (저장목록/과세표준명세/사업장현황명세서/부가율)
   ============================================================ */
/* 공용 팝업 입력칸 */
.vat-pin { width: 100%; height: 30px; border: 1px solid var(--c-border-2); border-radius: 4px; padding: 0 8px; font-size: var(--fs-13); color: #222; text-align: right; background: #fff; }
.vat-pin.is-ro { background: var(--c-bg-soft); color: #666; }
.vat-pin.is-strong { font-weight: var(--fw-bold); }
.vat-pin.is-accent { font-weight: var(--fw-bold); color: var(--c-brand); }
.vat-psel { height: 30px; border: 1px solid var(--c-border-2); border-radius: 4px; padding: 0 8px; font-size: var(--fs-13); color: #222; background: #fff; }
.vat-pdate { position: relative; display: inline-flex; align-items: center; }
.vat-pdate input { width: 100%; height: 30px; border: 1px solid var(--c-border-2); border-radius: 4px; padding: 0 30px 0 8px; font-size: var(--fs-13); color: #222; }
.vat-pdate button { position: absolute; right: 4px; width: 22px; height: 22px; border: 0; background: transparent; color: #888; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vat-srchbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--c-border-2); border-radius: 4px; background: #fff; font-size: var(--fs-13); color: #444; cursor: pointer; }
.vat-srchbtn:hover { background: var(--c-bg-soft); }

/* ① 신고서 저장목록 */
.vat-sv { display: flex; flex-direction: column; }
.vat-sv-top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.vat-delbtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--c-border-2); border-radius: 6px; background: #fff; font-size: var(--fs-13); color: #d65a5a; cursor: pointer; }
.vat-delbtn:hover { background: #fdecec; border-color: #f0c4c4; }
.vat-sv-gridbox { max-height: 360px; overflow: auto; border: 1px solid var(--c-border-2); }
.vat-svgrid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vat-svgrid th { position: sticky; top: 0; z-index: 1; height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; }
.vat-svgrid td { height: 30px; border: 1px solid var(--c-border-2); font-size: var(--fs-14); color: #222; padding: 6px 8px; line-height: 18px; }
.vat-svgrid .vat-chk { width: 40px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.vat-svgrid .vat-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); vertical-align: middle; }
.vat-svrow { cursor: pointer; }
.vat-svrow:hover td { background: #f6f8fc; }
.vat-svrow.vat-svsel td { background: var(--c-primary-bg); color: var(--c-brand); }
.vat-sv-notes { margin-top: 12px; }
.vat-sv-notes p { margin: 2px 0; font-size: var(--fs-12); color: #888; }

/* ② 과세표준명세 */
.vat-tb { display: flex; flex-direction: column; gap: 16px; }
.vat-tb-form, .vat-tb-rep { display: flex; flex-direction: column; gap: 10px; }
.vat-tb-frow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vat-tb-f { display: flex; align-items: center; gap: 8px; }
.vat-tb-flab { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #222; white-space: nowrap; }
.vat-tb-f .vat-pin, .vat-tb-f .vat-psel { width: 150px; }
.vat-tb-f .vat-pin { text-align: left; }
.vat-tb-f .vat-pdate { width: 150px; }
.vat-tb-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: #222; }
.vat-tb-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.vat-addbtn { height: 30px; padding: 0 14px; border: 1px solid var(--c-brand); border-radius: 4px; background: #fff; font-size: var(--fs-13); color: var(--c-brand); cursor: pointer; }
.vat-addbtn:hover { background: var(--c-primary-bg); }
.vat-tb-gwrap { display: flex; flex-direction: column; gap: 6px; }
.vat-tb-glab { display: flex; align-items: center; gap: 5px; }
.vat-tb-gtit { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }
.vat-tbgrid { width: 100%; border-collapse: collapse; border: 1px solid var(--c-border-2); table-layout: fixed; }
.vat-tbgrid th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; }
.vat-tbgrid td { height: 30px; border: 1px solid var(--c-border-2); font-size: var(--fs-14); color: #222; padding: 6px 8px; line-height: 18px; }
.vat-tbgrid .vat-tbno { color: #555; }
.vat-tbgrid .vat-amt { text-align: right; }
.vat-tbgrid .vat-tblink { color: var(--c-primary); }
.vat-tbgrid .vat-tbtot td { background: #f7f9fc; font-weight: var(--fw-bold); }
.vat-codecell { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.vat-codemag { width: 20px; height: 20px; border: 0; background: transparent; color: #999; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vat-tb-rep { border-top: 1px solid var(--c-border-2); padding-top: 14px; }
.vat-tb-reptit { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; margin-bottom: 2px; }

/* ③ 사업장현황명세서 */
.vat-bp { display: flex; flex-direction: column; gap: 12px; }
.vat-bp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vat-bp-htit { display: flex; align-items: center; gap: 5px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; }
.vat-bp-radio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-13); color: #222; }
.vat-bp-radio input { accent-color: var(--c-primary); }
.vat-bp-note { font-size: var(--fs-13); color: var(--c-error); }
.vat-bp-out { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--c-border-2); border-radius: 6px; background: #fff; font-size: var(--fs-13); color: #444; cursor: pointer; }
.vat-bp-out:hover { background: var(--c-bg-soft); }
.vat-bp-gridscroll { overflow-x: auto; border: 1px solid var(--c-border-2); }
.vat-bpgrid { border-collapse: collapse; width: 100%; }
.vat-bpgrid th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-12); font-weight: var(--fw-bold); color: #444; padding: 0 4px; line-height: 1.25; }
.vat-bpgrid td { border: 1px solid var(--c-border-2); padding: 4px 5px; }
.vat-bpgrid td .vat-pin { text-align: right; height: 28px; }
.vat-bp-selcell { padding: 4px 5px; }
.vat-bp-selcell .vat-psel { width: 100%; height: 28px; }
.vat-bp-sect { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.vat-bp-stit { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }
.vat-bp-unit { margin-left: auto; font-size: var(--fs-12); color: #888; }

/* ④ 부가율 */
.vat-vr { display: flex; flex-direction: column; gap: 18px; }
.vat-vr-guide { background: var(--c-bg-soft); border: 1px solid var(--c-border-2); border-radius: 8px; padding: 14px 16px; }
.vat-vr-gtit { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; margin-bottom: 8px; }
.vat-vr-guide ul { margin: 0; padding-left: 16px; }
.vat-vr-guide li { font-size: var(--fs-13); color: #555; line-height: 1.7; }
.vat-vr-calc { display: flex; flex-direction: column; gap: 14px; padding: 6px 8px; }
.vat-vr-row { display: flex; align-items: center; gap: 10px; }
.vat-vr-lab { width: 96px; flex: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #222; }
.vat-vr-row .vat-pin { width: 150px; }
.vat-vr-eq, .vat-vr-op { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #555; }
.vat-vr-sub { font-size: var(--fs-13); color: #444; white-space: nowrap; }
.vat-vr-last .vat-pin { width: 150px; }

/* ============================================================
   부가세 주요서류 — 합계표 4화면 공용(.vsm-*) · 좌(전표)/우(홈택스) 2분할
   ============================================================ */
.vsm { padding: 0; display: flex; flex-direction: column; }
/* 조회조건 바(1행)=상단선+가운데 구분선으로 영역 닫음 / 액션 바(2행)=하단선 없이 패널로 이어짐 */
.vsm-filter { border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); padding: 0; margin-bottom: 12px; }
/* 검색조건 바 밖으로 분리한 액션 줄(작성일자 + 출력/저장/마감 등) — 라이브 정합 */
.vsm-fwrap { display: contents; }
.vsm-actbar { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 0 0 12px; }
.vsm-frow { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-height: 32px; padding: 12px 0; }
.vsm-frow2 { border-top: 1px solid var(--c-bg-cool); }
.vsm-fitem { display: flex; align-items: center; gap: 10px; }
.vsm-flab { font-size: var(--fs-14); font-weight: var(--fw-regular); color: #8a8f99; white-space: nowrap; }
.vsm-tilde { color: #aab0ba; }
.vsm-datebox { position: relative; display: inline-flex; align-items: center; }
/* 2026-08 폭 보정 — 100/124px는 "YYYY-MM"·"YYYY-MM-DD" 텍스트가 달력 아이콘과 겹쳐
   잘려 보였다(예: "2025-06"의 6이 아이콘에 가려짐). 아이콘 폭(34px)+여유를 감안해 넓힘. */
.vsm-datebox input { width: 140px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 34px 0 12px; font-size: var(--fs-14); color: #333; background: #fff; }
.vsm-monthbox input { width: 122px; }
.vsm-cal { position: absolute; right: 5px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--c-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vsm-sel { height: 34px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 12px; font-size: var(--fs-14); color: #333; background: #fff; }
.vsm-fmid { display: flex; gap: 8px; margin: 0 auto; }
.vsm-fright { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vsm-hxnote { font-size: var(--fs-13); color: #8a8f99; margin-right: 4px; }
.vsm-actbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: var(--fs-14); color: #555; cursor: pointer; }
.vsm-actbtn:hover { background: var(--c-bg-soft); }
/* 조회 = 파란 아웃라인(아이콘·텍스트 블루) */
.vsm-actbtn.is-primary { border-color: #bdcbf2; color: var(--c-primary); font-weight: var(--fw-semibold); padding: 0 18px; }
.vsm-actbtn.is-primary:hover { background: #f1f5ff; }
/* 중앙 액션그룹(출력/초기화/마감) = 파란 텍스트 */
.vsm-fmid .vsm-actbtn { color: var(--c-primary); }
.vsm-fmid .vsm-actbtn:hover { background: #f1f5ff; }
/* 2분할 패널 */
.vsm-main { flex: 1; min-height: 0; display: flex; gap: 16px; margin-top: 14px; }
.vsm-panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.vsm-ptit { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vsm-ptit strong { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-brand); }
.vsm-ptit .icon-sm { color: var(--c-brand); }
.vsm-ptit-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.vsm-ptit-right .vsm-flab { font-size: var(--fs-13); }
.vsm-hxsel { height: 30px; }
/* 공용 그리드 */
.vsm-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vsm-grid th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; padding: 6px 6px; line-height: 18px; white-space: nowrap; }
.vsm-grid td { height: 30px; border: 1px solid var(--c-border-2); font-size: var(--fs-14); color: #222; padding: 6px 6px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsm-grid td.is-center { text-align: center; }
.vsm-grid td.is-r { text-align: right; }
/* 집계(마스터) 그리드 */
.vsm-aggbox { border: 1px solid var(--c-border-2); margin-bottom: 10px; }
.vsm-agg td.vsm-agg-type { text-align: center; background: #fafbfc; font-weight: var(--fw-semibold); color: #333; white-space: normal; line-height: 1.3; }
.vsm-agg td.vsm-agg-gubun { text-align: center; color: #444; }
.vsm-agg td.vsm-agg-gubun.is-sub { font-weight: var(--fw-semibold); background: #fbfcfd; }
.vsm-agg .vsm-agg-subrow td { background: #fbfcfd; font-weight: var(--fw-semibold); }
.vsm-agg .vsm-agg-totrow td { background: #eef3fb; font-weight: var(--fw-bold); color: var(--c-brand); }
.vsm-agg td.vsm-agg-tot { text-align: center; }
.vsm-agg tbody tr.vsm-agg-sel { cursor: pointer; }
.vsm-agg tbody tr.vsm-agg-sel:hover td:not(.vsm-agg-type) { background: #f0f5ff; }
.vsm-agg tbody tr.vsm-aggrow-on td:not(.vsm-agg-type) { background: var(--c-primary-bg); }
.vsm-agg tbody tr.vsm-aggrow-on td.is-r { color: var(--c-primary); font-weight: var(--fw-semibold); }
/* 거래처별 명세(디테일) + 합계바 박스 하단 고정 */
.vsm-detbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-border-2); }
.vsm-detscroll { flex: 1; min-height: 0; overflow: auto; }
.vsm-detfootbar { flex: none; border-top: 1px solid var(--c-border-2); overflow: hidden; }
.vsm-footgrid td { background: #f7f9fc; font-weight: var(--fw-bold); border-top: 0; }
.vsm-footlab { text-align: center; }
.vsm-chk { width: 38px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.vsm-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); vertical-align: middle; }
.vsm-detgrid tbody tr { cursor: pointer; }
.vsm-detgrid tbody tr:hover td { background: #f6f8fc; }
.vsm-detgrid tbody tr.vsm-detsel td { background: var(--c-primary-bg); }
.vsm-detgrid td.vsm-link { color: var(--c-primary); }
.vsm-empty-row td { text-align: center; color: #888; height: 90px; }

/* ---- 2026-08 확장 — 부가세 나머지 22화면(주요서류 8 + 첨부서류 14) 공용
   (.vsm-* 재사용, 신고서류 특유의 "요약섹션 + 상세그리드" · 탭 · 키값정보블록만 추가) ---- */
.vsm-secbox { margin-bottom: 16px; }
.vsm-secbox:last-child { margin-bottom: 0; }
.vsm-sectitle { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-brand); }
.vsm-sectitle .icon-sm { color: var(--c-brand); }
.vsm-sectitle .vsm-info { color: #9aa0aa; }
.vsm-doctabs { display: flex; gap: 28px; border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 14px; }
.vsm-doctab { position: relative; background: none; border: 0; padding: 10px 2px 12px; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #9aa0aa; cursor: pointer; }
.vsm-doctab.is-on { color: var(--c-brand); font-weight: var(--fw-bold); }
.vsm-doctab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
/* 키-값 정보블록(신고인정보/인적사항 등) */
.vsm-kv { display: grid; grid-template-columns: 130px 1fr 130px 1fr; border: 1px solid var(--c-border-2); }
.vsm-kv dt { display: flex; align-items: center; padding: 8px 12px; background: var(--c-bg-soft); font-size: var(--fs-13); font-weight: var(--fw-medium); color: #666; border-top: 1px solid var(--c-border-2); border-right: 1px solid var(--c-border-2); }
.vsm-kv dd { display: flex; align-items: center; margin: 0; padding: 8px 12px; font-size: var(--fs-14); color: #222; border-top: 1px solid var(--c-border-2); border-right: 1px solid var(--c-border-2); }
.vsm-kv dt:nth-child(4n), .vsm-kv dd:nth-child(4n) { border-right: 0; }
.vsm-kv dt:nth-child(-n+4) { border-top: 0; }
.vsm-kv dd:nth-child(-n+4) { border-top: 0; }
.vsm-note { font-size: var(--fs-13); color: #8a8f99; margin: 6px 2px 0; }
/* 단순 리포트형(좌우 패널 없이 단일 컬럼) */
.vsm-single { flex: 1; min-height: 0; overflow: auto; }

/* ============================================================
   영수증수취명세서 (.rcs-*) · 3탭(명세/갑지요약/기타)
   ============================================================ */
.rcs { padding: 0; display: flex; flex-direction: column; }
.rcs-host { flex: 1; min-height: 0; }
/* 탭바 */
.rcs-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 2px; }
.rcs-tab { position: relative; background: none; border: 0; padding: 12px 2px 14px; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #9aa0aa; cursor: pointer; }
.rcs-tab.is-on { color: var(--c-brand); font-weight: var(--fw-bold); }
.rcs-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.rcs-tabpane { padding-top: 14px; }
/* 조회조건 바 */
.rcs-filter { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); padding: 12px 0; }
.rcs-fitem { display: flex; align-items: center; gap: 10px; }
.rcs-flab { font-size: var(--fs-14); color: #8a8f99; white-space: nowrap; }
.rcs-datebox { position: relative; display: inline-flex; align-items: center; }
.rcs-datebox input { height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 34px 0 12px; font-size: var(--fs-14); color: #333; background: #fff; }
.rcs-cal { position: absolute; right: 5px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--c-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rcs-ptinput { position: relative; display: inline-flex; align-items: center; }
.rcs-ptinput input { width: 220px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 34px 0 12px; font-size: var(--fs-14); }
.rcs-ptmag { position: absolute; right: 5px; width: 24px; height: 24px; border: 0; background: transparent; color: #888; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rcs-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: hidden; }
.rcs-seg__i { height: 30px; padding: 0 16px; border: 0; border-left: 1px solid var(--c-bg-cool); background: #fff; font-size: var(--fs-14); color: #555; cursor: pointer; }
.rcs-seg__i:first-child { border-left: 0; }
.rcs-seg__i.is-on { background: var(--c-brand); color: #fff; }
.rcs-fright { margin-left: auto; display: flex; gap: 8px; }
.rcs-sbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: var(--fs-14); color: #555; cursor: pointer; }
.rcs-sbtn.is-primary { border-color: #bdcbf2; color: var(--c-primary); font-weight: var(--fw-semibold); padding: 0 18px; }
.rcs-sbtn.is-primary:hover, .rcs-sbtn:hover { background: #f1f5ff; }
/* 액션 툴바 (검색조건과 분리) */
.rcs-toolbar { display: flex; align-items: center; margin-top: 14px; }
.rcs-tbleft { display: flex; gap: 8px; }
.rcs-tbright { margin-left: auto; display: flex; gap: 8px; }
.rcs-abtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: var(--fs-13); color: #444; cursor: pointer; }
.rcs-abtn:hover { background: var(--c-bg-soft); }
.rcs-abtn.is-danger { color: #d65a5a; }
.rcs-abtn.is-danger:hover { background: #fdecec; border-color: #f0c4c4; }
/* 공용 그리드 */
.rcs-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rcs-grid th { height: 30px; background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; padding: 0 6px; line-height: 18px; }
.rcs-grid td { height: 30px; border: 1px solid var(--c-border-2); font-size: var(--fs-14); color: #222; padding: 6px 8px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcs-grid td.is-center { text-align: center; }
.rcs-grid td.is-r { text-align: right; }
.rcs-grid td.rcs-code { color: var(--c-primary); }
.rcs-chk { width: 36px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.rcs-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); vertical-align: middle; }
.rcs-info { color: #b3b9c2; }
.rcs-info .icon-sm { width: 13px; height: 13px; }
.rcs-cellmag, .rcs-mini button { width: 22px; height: 22px; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; color: #999; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rcs-mini { display: flex; align-items: center; gap: 4px; }
.rcs-mini input { width: 100%; height: 24px; border: 1px solid var(--c-bg-cool); border-radius: 4px; padding: 0 6px; font-size: var(--fs-13); }
.rcs-addrow td { background: #fcfcfd; }
/* (2) 명세 — 그리드 박스 + 하단 합계바 */
.rcs-gridbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-border-2); margin-top: 14px; }
.rcs-gridscroll { flex: 1; min-height: 0; overflow: auto; }
.rcs-g2 tbody tr:hover td { background: #f6f8fc; }
.rcs-g2foot { flex: none; display: flex; border-top: 2px solid #d4dae3; background: #f7f9fc; }
.rcs-g2foot__c { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-left: 1px solid var(--c-border-2); }
.rcs-g2foot__c:first-child { border-left: 0; }
.rcs-g2foot__lab { font-size: var(--fs-13); font-weight: var(--fw-bold); color: #555; }
.rcs-g2foot__c.is-total .rcs-g2foot__lab { color: var(--c-brand); }
.rcs-g2foot__cnt { font-size: var(--fs-13); color: #444; margin-left: auto; }
.rcs-g2foot__amt { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; min-width: 96px; text-align: right; }
/* (1) 갑지 요약 */
.rcs-1top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
.rcs-sect { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-brand); margin: 18px 0 8px; }
.rcs-sumbox, .rcs-exclbox { border: 1px solid var(--c-border-2); }
.rcs-sumtbl td.rcs-sumlab { text-align: center; background: var(--c-bg-soft); font-weight: var(--fw-semibold); color: #444; }
.rcs-sumtbl td { height: 34px; }
.rcs-excltbl td.rcs-exlab { text-align: left; color: #333; }
.rcs-excltbl td.is-total, .rcs-excltbl td.rcs-exlab.is-total { background: #f7f9fc; font-weight: var(--fw-bold); color: var(--c-brand); }
/* 기타 — 마스터(전표목록, 확장)/디테일(분개 미리보기, 컴팩트 고정) */
.rcs-masterbox { flex: 1; min-height: 0; }
.rcs-mgrid tbody tr { cursor: pointer; }
.rcs-mgrid tbody tr:hover td { background: #f6f8fc; }
.rcs-mgrid tbody tr.rcs-msel td { background: var(--c-primary-bg); }
.rcs-footbar { flex: none; border-top: 1px solid var(--c-border-2); overflow: hidden; }
.rcs-footgrid td { background: #f7f9fc; font-weight: var(--fw-bold); border-top: 0; }
.rcs-footlab { text-align: center; }
.rcs-detailbox { flex: none; height: 168px; margin-top: 14px; }
.rcs-detailtit { flex: none; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #333; padding: 6px 10px; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border-2); }
.rcs-dgrid tbody tr:hover td { background: #f6f8fc; }

/* ============================================================
   원천징수이행상황신고서 (.wt-*) — 6탭 + 원천징수명세/환급세액조정 그리드
   ============================================================ */
.wt { padding: 0; display: flex; flex-direction: column; }
.wt-host { flex: 1; min-height: 0; }
/* 조회바 (상·하단 라인) */
.wt-filter { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-height: 56px; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); padding: 12px 4px; }
.wt-fitem { display: flex; align-items: center; gap: 10px; }
.wt-flab { font-size: var(--fs-14); color: #8a8f99; white-space: nowrap; }
.wt-tilde { color: #aab0ba; }
.wt-datebox { position: relative; display: inline-flex; align-items: center; }
.wt-datebox input { height: 34px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 34px 0 12px; font-size: var(--fs-14); color: #333; background: #fff; }
.wt-cal { position: absolute; right: 5px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--c-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wt-sel { height: 34px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 12px; font-size: var(--fs-14); color: #333; background: #fff; }
.wt-fright { margin-left: auto; }
.wt-qbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px; border: 1px solid #bdcbf2; border-radius: 6px; background: #fff; font-size: var(--fs-14); color: var(--c-primary); font-weight: var(--fw-semibold); cursor: pointer; }
.wt-qbtn:hover { background: #f1f5ff; }
/* 옵션 행 */
.wt-optrow { display: flex; align-items: stretch; flex-wrap: wrap; border: 1px solid var(--c-border-2); border-top: 0; background: #fafbfc; }
.wt-opt { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-left: 1px solid var(--c-border-2); }
.wt-opt:first-child { border-left: 0; }
.wt-olab { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #555; white-space: nowrap; }
.wt-radios { display: flex; gap: 12px; }
.wt-radio, .wt-optchk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); color: #333; white-space: nowrap; }
.wt-radio span, .wt-optchk span { white-space: nowrap; }
.wt-opt { flex: none; }
.wt-radio input, .wt-optchk input { accent-color: var(--c-primary); }
.wt-oin { width: 80px; height: 28px; border: 1px solid var(--c-bg-cool); border-radius: 4px; padding: 0 8px; font-size: var(--fs-13); color: #333; background: #fff; text-align: center; }
.wt-oval { font-size: var(--fs-13); color: #333; }
/* 안내 + 액션 */
.wt-actbar { display: flex; align-items: center; margin-top: 14px; }
.wt-note { font-size: var(--fs-13); color: var(--c-error); }
.wt-actright { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wt-abtn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: var(--fs-13); color: #444; cursor: pointer; }
.wt-abtn:hover { background: var(--c-bg-soft); }
.wt-abtn.is-primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.wt-abtn.is-primary:hover { background: var(--c-brand-dark); }
/* 탭바 */
.wt-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--c-bg-cool); margin-top: 16px; }
.wt-tab { position: relative; background: none; border: 0; padding: 11px 2px 13px; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #9aa0aa; cursor: pointer; }
.wt-tab.is-on { color: var(--c-brand); font-weight: var(--fw-bold); }
.wt-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
/* 메인 */
.wt-main { padding-top: 14px; }
.wt-detbox { flex: 1; min-height: 0; border: 1px solid var(--c-border-2); overflow: hidden; display: flex; flex-direction: column; }
.wt-detscroll { flex: 1; min-height: 0; overflow: auto; }
.wt-reftit { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-brand); margin: 16px 0 8px; }
.wt-refbox { border: 1px solid var(--c-border-2); overflow-x: auto; }
/* 공용 그리드 */
.wt-grid { border-collapse: collapse; width: 100%; table-layout: fixed; }
.wt-grid th { background: var(--c-bg-soft); border: 1px solid var(--c-border-2); font-size: var(--fs-12); font-weight: var(--fw-bold); color: #444; padding: 4px 6px; line-height: 1.3; }
.wt-grid td { height: 30px; border: 1px solid var(--c-border-2); font-size: var(--fs-13); color: #222; padding: 0 8px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-grid td.is-center { text-align: center; }
.wt-grid td.is-r { text-align: right; }
.wt-detgrid td.wt-gcell { text-align: center; background: #fafbfc; font-weight: var(--fw-semibold); color: #333; }
.wt-detgrid td.wt-dcell { text-align: left; color: #333; }
.wt-detgrid td.wt-code { color: #777; }
.wt-detgrid .wt-subrow td { background: #f6f9fd; font-weight: var(--fw-semibold); }
.wt-detgrid .wt-subrow td.wt-gcell { background: #eef3fb; }
.wt-detgrid .wt-totrow td { background: #eef3fb; font-weight: var(--fw-bold); color: var(--c-brand); }
.wt-refgrid td { height: 32px; }
/* 보조 탭 placeholder */
.wt-placeholder { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #99a0aa; }
.wt-placeholder .icon-lg { color: #c4cad3; }
.wt-placeholder p { margin: 0; font-size: var(--fs-14); color: #888; }
.wt-placeholder .wt-ph-sub { font-size: var(--fs-13); color: #aab0ba; }
/* 환급신청 — 전용 그리드 + 국세환급금계좌 바 */
.wt-rftools { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 8px; }
.wt-rfgridbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-border-2); }
.wt-rfgridscroll { flex: 1; min-height: 0; overflow: auto; }
.wt-rfgrid .wt-emptyrow td { text-align: center; color: #888; height: 200px; }
.wt-rfacct { display: flex; flex: none; margin-top: 12px; border: 1px solid var(--c-border-2); background: #f4f8ff; }
.wt-rfacct-c { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-left: 1px solid var(--c-border-2); }
.wt-rfacct-c:first-child { border-left: 0; }
.wt-rfacct-lab { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #333; white-space: nowrap; }
.wt-rfacct-mag { width: 26px; height: 26px; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; color: #888; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wt-rfacct-in { flex: 1; height: 28px; border: 1px solid var(--c-bg-cool); border-radius: 4px; padding: 0 8px; font-size: var(--fs-13); background: #fff; }
/* 보조 탭 공통 */
.wt-tabpane { padding-top: 14px; }
.wt-info { color: #b3b9c2; }
/* 섹션 헤더(추가/삭제) */
.wt-sec { display: flex; align-items: center; margin: 16px 0 8px; }
.wt-sec:first-child { margin-top: 4px; }
.wt-sectit { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-brand); }
.wt-secact { margin-left: auto; display: flex; gap: 8px; }
.wt-addbtn, .wt-delbtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: var(--fs-13); cursor: pointer; }
.wt-addbtn { color: var(--c-primary); }
.wt-addbtn:hover { background: #f1f5ff; }
.wt-delbtn { color: #d65a5a; }
.wt-delbtn:hover { background: #fdecec; border-color: #f0c4c4; }
/* 빈 입력 그리드 박스(스크롤 + 합계바 하단 고정) */
.wt-egridbox { border: 1px solid var(--c-border-2); display: flex; flex-direction: column; max-height: 300px; }
.wt-egridscroll { flex: 1; min-height: 120px; overflow: auto; }
.wt-egridfoot { flex: none; border-top: 1px solid var(--c-border-2); overflow: hidden; }
.wt-egridfoot .wt-footgrid td { background: #f7f9fc; font-weight: var(--fw-bold); border-top: 0; }
.wt-footlab { text-align: center; }
.wt-emptyrow td { text-align: center; color: #888; height: 120px; }
.wt-chk { width: 38px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.wt-chk input { width: 15px; height: 15px; accent-color: var(--c-primary); vertical-align: middle; }
/* 부표 — 소득자 세그먼트 + 그리드 */
.wt-segrow { display: flex; gap: 18px; padding: 4px 2px 12px; }
.wt-segradio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: #333; cursor: pointer; }
.wt-segradio input { accent-color: var(--c-primary); }
.wt-segradio.is-on { color: var(--c-brand); font-weight: var(--fw-semibold); }
.wt-subhost { flex: 1; min-height: 0; }
.wt-subgridbox { flex: 1; min-height: 0; height: 100%; border: 1px solid var(--c-border-2); overflow: auto; }
.wt-subgrid td.wt-gcell { text-align: center; background: #fafbfc; font-weight: var(--fw-semibold); color: #333; vertical-align: middle; }
.wt-subgrid td.wt-dcell { text-align: left; color: #333; }
.wt-subgrid td.wt-code { color: #777; }
.wt-subgrid .wt-emptyrow td { text-align: center; color: #888; height: 200px; }

/* 급여명세서 출력 미리보기(.pst-slip) */
.pst-slip { width: 700px; max-width: 100%; padding: 8px 6px; color: #222; }
.pst-slip__hd { text-align: center; margin-bottom: 14px; }
.pst-slip__title { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: 2px; color: var(--c-brand); }
.pst-slip__sub { font-size: var(--fs-13); color: #666; margin-top: 4px; }
.pst-slipinfo { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 14px; }
.pst-slipinfo th, .pst-slipinfo td { border: 1px solid var(--c-bg-cool); height: 32px; font-size: var(--fs-13); padding: 0 10px; }
.pst-slipinfo th { background: var(--c-bg-soft); color: #444; font-weight: var(--fw-semibold); text-align: center; }
.pst-slip__tables { display: flex; gap: 14px; }
.pst-sliptbl { flex: 1; border-collapse: collapse; table-layout: fixed; }
.pst-sliptbl th { height: 32px; background: #eef3fb; border: 1px solid var(--c-border-2); font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-brand); }
.pst-sliptbl th.rpt-left { text-align: left; padding: 0 10px; } .pst-sliptbl th.rpt-num { text-align: right; padding: 0 10px; }
.pst-sliptbl td { height: 30px; border: 1px solid #eef0f3; font-size: var(--fs-13); padding: 0 10px; }
.pst-sliptbl td.rpt-left { text-align: left; } .pst-sliptbl td.rpt-num { text-align: right; }
.pst-sliptbl tfoot td { height: 32px; background: var(--c-bg-soft); font-weight: var(--fw-bold); border: 1px solid var(--c-border-2); }
.pst-slip__net { margin: 16px 0 6px; padding: 12px 18px; background: #f5f8ff; border: 1px solid #d6e2fb; border-radius: var(--r-md); display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.pst-slip__net span { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #444; }
.pst-slip__net strong { font-size: 22px; font-weight: var(--fw-bold); color: var(--c-brand); }
.pst-slip__foot { margin-top: 18px; text-align: center; font-size: var(--fs-14); color: #333; }
.pst-slip__co { margin-top: 8px; font-size: var(--fs-16); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; gap: 10px; }
.pst-slip__seal { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 2px solid #c0392b; border-radius: 50%; color: #c0392b; font-size: var(--fs-12); font-weight: var(--fw-bold); }
/* 명세서발송(.pst-send) */
.pst-send { display: flex; gap: 16px; padding: 8px 4px 12px; }
.pst-sendcard { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 8px; border: 1px solid var(--c-bg-cool); border-radius: 10px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.pst-sendcard:hover { border-color: var(--c-primary); box-shadow: 0 2px 10px rgba(55, 108, 251, .12); }
.pst-sendcard__ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; }
.pst-sendcard__ic .icon { width: 26px; height: 26px; fill: #fff; }
.pst-sendcard__ic.is-kakao { background: #fee500; }
.pst-sendcard__ic.is-mail { background: #4f74c9; }
.pst-sendcard__ic.is-sms { background: #1f9d57; }
.pst-talk { font-size: 11px; font-weight: 800; color: #3c1e1e; }
.pst-sendcard__t { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #222; }
.pst-sendcard__p { font-size: var(--fs-12); color: #888; }

/* 부가가치세 신고서 — (1) 행 선택 강조 */
.vat-form tbody tr.vat-rowsel td { background: #eef5ff; }
.vat-form tbody tr.vat-rowsel .vat-link { font-weight: var(--fw-bold); }

/* ============================================================
   보조장부 — 업무용승용차 운행기록부(.bk-car) / 비용현황(.bk-carcost)
   ============================================================ */
.bk-car .bk-left { width: 360px; }
.car-inline { display: inline-flex; align-items: center; gap: 6px; }
.car-dhead { display: flex; align-items: center; justify-content: space-between; padding-right: 2px; }
.car-dhead .po-sec__head { padding-bottom: 8px; }
.car-addrhide { padding-bottom: 4px; }
/* 2단 그룹헤더 — 둘째 행은 첫 행(30px) 아래로 고정 */
.car-dgrid thead tr:first-child th { z-index: 3; }
.car-dgrid thead tr:nth-child(2) th { top: 30px; z-index: 2; }
.car-dgrid td.po-grid__chk, .car-dgrid th.po-grid__chk { width: 40px; overflow: visible; text-overflow: clip; }
/* 비용현황 */
.bk-cost-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bk-carcost .bk-left { width: 430px; }
.bk-carcost .bk-split { flex: 1 1 auto; min-height: 180px; }
.car-sumsec { flex: none; padding-bottom: 16px; }
.car-sumsec .po-detail__box { flex: none; }
.car-sumwrap { overflow-x: auto; }
.car-sub td { background: #eef3fb; font-weight: 600; color: #333; }
.car-sub td:first-child { text-align: center; color: #1c4f99; }
.car-sumtbl tbody td:first-child { text-align: center; background: var(--c-bg-soft); font-weight: 600; }

/* ============================================================
   제증명발급 > 홈택스(.hcert)
   ============================================================ */
.hcert {
  width: 1600px;
  min-width: 1600px;
  min-height: 742px;
  padding: 0 30px 28px;
  background: #fff;
  color: #222;
  font-size: 14px;
}
.hcert-head {
  width: 1142px;
  min-height: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.hcert-titleblock { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.hcert-title { font-size: 20px; line-height: 32px; font-weight: var(--fw-bold); color: var(--c-brand); }
.hcert-sub { color: #666; font-size: 14px; }
.hcert-actions { display: flex; align-items: center; gap: 8px; }
.hcert-btn {
  height: 32px;
  min-width: 80px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hcert-btn--line { border: 1px solid #376cfb; color: #376cfb; background: #fff; }
.hcert-btn--primary { border: 1px solid var(--c-brand); color: #fff; background: var(--c-brand); }
.hcert-desc {
  width: 1142px;
  margin-top: 25px;
  border: 1px solid #e1e5ea;
  border-radius: 7px;
  padding: 12px 24px;
  min-height: 93px;
}
.hcert-desc ul { margin: 0; padding: 0; list-style: none; }
.hcert-desc li { position: relative; min-height: 23px; line-height: 23px; padding-left: 12px; color: #222; }
.hcert-desc li::before { content: '·'; position: absolute; left: 0; top: 0; font-weight: var(--fw-bold); }
.hcert-main {
  width: 1142px;
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.hcert-menu { width: 300px; padding: 20px 10px; }
.hcert-menu__title {
  width: 280px;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: var(--fw-bold);
}
.hcert-bar { width: 3px; height: 14px; background: var(--c-brand); display: inline-block; }
.hcert-dots { flex: 1; border-top: 1px dashed #d8dde4; transform: translateY(1px); }
.hcert-menu__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hcert-menu__item { height: 32px; display: flex; align-items: center; gap: 10px; }
.hcert-check {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hcert-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-brand); }
.hcert-menu__btn {
  width: 254px;
  height: 32px;
  border: 1px solid #e1e5ea;
  border-radius: 5px;
  background: #fff;
  color: #888;
  font-weight: var(--fw-semibold);
  font-size: 14px;
  text-align: left;
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.hcert-menu__btn.is-active {
  border-color: #82a3ff;
  background: #82a3ff;
  color: #fff;
}
.hcert-form { width: 802px; }
.hcert-form__title {
  height: 40px;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #d5dbe3;
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: #222;
}
.hcert-fields {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hcert-field {
  width: 802px;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.hcert-field--notice { align-items: flex-start; color: #555; padding-left: 160px; min-height: 20px; }
.hcert-field__label {
  width: 160px;
  height: 30px;
  padding: 7px 0;
  flex: none;
  font-weight: var(--fw-semibold);
  color: #222;
}
.hcert-req::after { content: ' *'; color: #ff2828; }
.hcert-radio { display: flex; align-items: center; gap: 18px; min-height: 32px; }
.hcert-radio label { display: inline-flex; align-items: center; gap: 6px; color: #222; white-space: nowrap; }
.hcert-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-brand); }
.hcert-radio--line { flex-wrap: wrap; gap: 16px; }
.hcert-example { margin-left: 210px; color: #222; white-space: nowrap; }
.hcert-phone, .hcert-period, .hcert-year, .hcert-yearwrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hcert-section {
  width: 802px;
  height: 28px;
  display: flex;
  align-items: center;
  margin-top: 4px;
  border-bottom: 1px solid #d5dbe3;
  color: var(--c-brand);
  font-weight: var(--fw-bold);
}
.hcert-input, .hcert-select {
  height: 34px;
  border: 1px solid #d9dfe7;
  border-radius: 6px;
  background: #fff;
  color: #222;
  font-size: 14px;
}
.hcert-input { width: 254px; padding: 0 10px; text-align: center; }
.hcert-input--sm { width: 104px; }
.hcert-input--date { width: 130px; }
.hcert-input.is-disabled, .hcert-select.is-disabled { background: #f1f2f5; color: #555; }
.hcert-selectwrap {
  position: relative;
  display: inline-flex;
  width: 336px;
}
.hcert-select {
  width: 100%;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.hcert-select.is-disabled { cursor: default; }
.hcert-select .icon { width: 14px; height: 14px; fill: #9aa3b2; }
.hcert-period .hcert-selectwrap { width: 154px; }
.hcert-year .hcert-selectwrap { width: 120px; }
.hcert-select__menu {
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 1200;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #b7c3d3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 32, 48, 0.14);
  padding: 4px 0;
}
.hcert-select__opt {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  border: 0;
  background: #fff;
  color: #222;
  font-size: 14px;
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}
.hcert-select__opt:hover,
.hcert-select__opt.is-selected {
  background: #eef4ff;
  color: var(--c-brand);
  font-weight: var(--fw-semibold);
}
.hcert-note { color: #666; margin-left: 2px; }
.hcert-searchline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hcert-searchline .hcert-input { width: 184px; text-align: left; }
.hcert-smallbtn {
  height: 34px;
  min-width: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--c-brand);
  border-radius: 6px;
  background: #fff;
  color: var(--c-brand);
  font-size: 14px;
  font-weight: var(--fw-bold);
}
.hcert-smallbtn .icon { width: 16px; height: 16px; fill: var(--c-brand); }
.hcert-info { width: 16px; height: 16px; fill: var(--c-brand); }
.hcert-hint { flex-basis: 100%; margin-left: 0; color: #555; line-height: 20px; }
.hcert-result {
  width: 640px;
  margin-left: 160px;
  border: 1px solid #e1e5ea;
  border-radius: 4px;
  overflow: hidden;
}
.hcert-result__head {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #f1f2f5;
  border-bottom: 1px solid #e1e5ea;
  font-weight: var(--fw-semibold);
}
.hcert-result__head b { color: var(--c-brand); }
.hcert-result__empty {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
}
.hcert-addresssearch { display: flex; flex-direction: column; gap: 6px; }
.hcert-addresssearch__row { display: flex; align-items: center; gap: 6px; }
.hcert-addresssearch .hcert-input { width: 180px; text-align: left; }
.hcert-addresslines { display: flex; flex-direction: column; gap: 8px; }
.hcert-addresslines > div { display: flex; gap: 8px; }
.hcert-addresslines .hcert-input { width: 166px; text-align: left; }
.hcert-addresslines > .hcert-input { width: 336px; text-align: left; }
.hcert-person {
  display: grid;
  grid-template-columns: 84px 244px;
  gap: 10px 8px;
  align-items: center;
}
.hcert-person .hcert-input { width: 244px; text-align: left; }
.hcert-sublabel { color: #222; font-weight: var(--fw-semibold); }
.hcert-historywrap { max-height: 420px; overflow: auto; }
.hcert-history {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.hcert-history th {
  height: 34px;
  border: 1px solid #dce2e9;
  background: #eef3fb;
  color: #222;
  font-weight: var(--fw-bold);
  text-align: center;
}
.hcert-history td {
  height: 34px;
  border: 1px solid #e6eaef;
  padding: 0 10px;
  text-align: center;
}
.hcert-history td.is-fail { color: #d93025; font-weight: var(--fw-bold); }

/* ============================================================
   재무제표 5종 (장부/결산 > 재무제표) — .fs-*  (.po/.bk 시스템 재사용)
   합계잔액시산표 / 재무상태표 / 손익계산서 / 원가명세서(3탭) / 이익잉여금처분계산서
   실측 스펙: _refs/fin-stmt-spec.md  · 표시 데이터 전부 가상값
   ============================================================ */
.fs { color: var(--c-text); }
/* 검색조건: 기준년월 박스 + 구분 라디오 (.po-filterbar 라인 재사용) */
.fs-monthbox { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px; font-size: 13px; color: #333; }
.fs-radios { display: inline-flex; align-items: center; gap: 16px; }
.fs-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #444; cursor: pointer; }
.fs-radio input { width: 15px; height: 15px; accent-color: var(--c-primary); margin: 0; }
/* 비교식 표(.fs-grid): 계정과목 좌측+들여쓰기, 섹션행 굵게+옅은배경+외측소계 파란글씨 */
.fs-grid td.fs-name { text-align: left; }
.fs-grid tr.fs-lv0 td.fs-name { padding-left: 10px; font-weight: 700; }
.fs-grid tr.fs-lv1 td.fs-name { padding-left: 24px; font-weight: 600; }
.fs-grid tr.fs-lv2 td.fs-name { padding-left: 40px; }
.fs-grid tr.fs-lv3 td.fs-name { padding-left: 10px; font-weight: 700; }
.fs-grid tr.fs-sec td { background: #f3f7ff; font-weight: 700; }
.fs-grid tr.fs-sec td.is-r { color: var(--c-primary); }
/* 합계잔액시산표 그룹행(◀대분류▶ / <중분류>) */
.fs-grid td.fs-tname { text-align: center; }
.fs-grid tr.fs-big td { background: #eaf0f8; font-weight: 700; }
.fs-grid tr.fs-big td.fs-tname { text-align: center; color: #1a3e74; }
.fs-grid tr.fs-mid td { background: #f4f6fa; font-weight: 600; }
.fs-grid tr.fs-mid td.fs-tname { text-align: center; }
/* 이익잉여금 처분일 표기 */
.fs-renote { flex: none; display: flex; gap: 24px; justify-content: flex-end; padding: 2px 4px 10px; font-size: 13px; color: #555; }
/* 원가명세서 3탭 */
.fs-cost .bk-tabs { margin: 2px 0 0; }
.fs-costhost { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 재무제표 출력물(인쇄 미리보기 모달) — 표준 양식 A4 문서 */
.fs-printmodal .modal__body { background: #eef0f4; padding: 0; max-height: 74vh; overflow: auto; }
.fs-print { background: #fff; width: 794px; margin: 20px auto; padding: 30px 34px 40px; box-shadow: 0 1px 8px rgba(0, 0, 0, .14); box-sizing: border-box; }
.fs-print__title { text-align: center; font-size: 23px; font-weight: 800; letter-spacing: 1px; color: #111; margin-bottom: 12px; }
.fs-print__periods { text-align: center; font-size: 12.5px; color: #444; line-height: 1.8; }
.fs-print__periods div { white-space: pre; }
.fs-print__renote { display: flex; justify-content: center; gap: 22px; font-size: 12px; color: #555; margin-top: 4px; }
.fs-print__meta { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 5px; font-size: 12.5px; color: #444; }
.fs-print__meta strong { font-size: 14px; color: #111; }
.fs-print__biz { color: #777; }
.fs-print__unit { margin-left: auto; color: #555; }
.fs-ptbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.fs-ptbl th, .fs-ptbl td { border: 1px solid #3a3a3a; padding: 3px 8px; height: 22px; color: #222; box-sizing: border-box; }
.fs-ptbl thead th { background: #edf0f4; text-align: center; font-weight: 700; color: #333; }
.fs-ptbl td.is-r { text-align: right; font-variant-numeric: tabular-nums; }
.fs-ptbl td.fs-pname, .fs-ptbl td.fs-tname { text-align: left; }
.fs-ptbl--tri td.fs-tname { text-align: center; }   /* 합계잔액시산표 출력물 계정과목명도 가운데 */
.fs-ptbl tr.is-sec td { font-weight: 700; background: #f6f9fd; }
.fs-ptbl td.fs-pname.lv1 { padding-left: 22px; }
.fs-ptbl td.fs-pname.lv2 { padding-left: 38px; }
.fs-ptbl td.fs-pname.lv0, .fs-ptbl td.fs-pname.lv3 { font-weight: 700; }
.fs-ptbl--tri tr.is-big td { font-weight: 700; background: #eaf0f8; }
.fs-ptbl--tri tr.is-big td.fs-tname { text-align: center; color: #1a3e74; }
.fs-ptbl--tri tr.is-mid td { font-weight: 600; background: #f3f6fa; }
.fs-ptbl--tri tr.is-mid td.fs-tname { text-align: center; }
.fs-ptbl--tri tr.is-sum td { font-weight: 700; background: #edf0f4; }
.fs-ptbl--tri tr.is-sum td.fs-tname { text-align: center; }

/* 이익잉여금처분계산서 — 과목명·계정과목·계정코드 컬럼(라이브 양식) */
.fs-regrid td.fs-re__acct { text-align: center; color: #444; }
.fs-regrid td.fs-re__code { text-align: center; color: #777; }
.fs-regrid tr.fs-sec td.fs-re__acct, .fs-regrid tr.fs-sec td.fs-re__code { background: #f3f7ff; }
.fs-ptbl--re td.fs-re__acct { text-align: center; color: #444; }
.fs-ptbl--re td.fs-re__code { text-align: center; color: #777; }
/* readonly 날짜박스(전기 처분확정일) */
.fs-monthbox.is-ro { background: var(--c-bg-soft); color: #888; }
.fs-monthbox.is-ro .po-cal .icon { fill: #aaa; }
.fs-refilter .bk-field__lab { color: var(--c-text-3); }
/* 이익잉여금처분계산서: 그리드 박스를 내용 높이에 맞춤(하단 빈 여백 제거, 라이브 동일) */
.fs-re .bk-grow { flex: none; }
.fs-re .po-detail__box { flex: none; }
.fs-re .po-detail__scroll { flex: none; overflow: visible; }

/* 운행기록부 신규 입력행 (그리드 입력방식) */
.car-newrow td { background: #fbfcff; }
.po-grid__inputrow td .po-cellinp { flex: 1; width: 100%; min-width: 0; height: 26px; border: 1px solid #cdd6e2; border-radius: 5px; background: #fff; font-size: 13px; color: #222; padding: 0 6px; }
.po-grid__inputrow td .po-cellinp.is-r { text-align: right; }
.po-grid__inputrow td .po-cellinp:focus { border-color: var(--c-primary); outline: none; }
.po-grid__inputrow td .po-cellinp::placeholder { color: #b6bdc8; }
.po-grid__inputrow td .po-cellsel { flex: 1; width: 100%; min-width: 0; }
.car-auto { color: #aab2bd; font-size: 13px; }

/* ============================================================
   결산자료관리 (.bk-closing) + 감가상각/대손상각/결산이력 팝업 (.cl-*)
   ============================================================ */
.cl-grid td.cl-acct { text-align: left; }
.cl-grid tr.cl-grp td { background: #eef3fb; font-weight: 700; color: #1c3d6e; }
.cl-grid tr.cl-leaf td.cl-acct { padding-left: 24px; color: #333; }
.cl-grid td.cl-edit { background: #e4f7f3; padding: 2px 4px; }
.po-grid td.cl-edit .po-cell { height: 100%; }
/* 팝업 공통 */
.cl-modalwrap { display: flex; flex-direction: column; gap: 12px; }
.cl-note { font-size: 12px; color: #d06a2c; }
.cl-modalgrid { max-height: 420px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.cl-modalgrid .po-grid thead th { position: sticky; top: 0; z-index: 1; }
.cl-dep tr.cl-cat td, .cl-dep tr.cl-sum td { background: #eef3fb; }
.cl-dep tr.cl-cat td.cl-acct { text-align: left; color: #1c3d6e; }
.cl-dep td.cl-acct { text-align: left; }
.cl-dep td.cl-edit, .cl-bad td.cl-edit { background: #e4f7f3; padding: 2px 4px; }
/* 대손율 */
.cl-raterow { display: flex; align-items: center; gap: 8px; }
.cl-ratelab { font-size: 14px; font-weight: 600; color: #222; }
.cl-rate { width: 80px; height: 30px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; text-align: right; font-size: 13px; }
.cl-rateunit { font-size: 14px; color: #444; }
.cl-bad tr:nth-child(2) th { top: 30px; }
/* 결산이력 */
.cl-histsec { display: flex; flex-direction: column; gap: 6px; }
.cl-histtit { font-size: 14px; font-weight: 700; color: #003879; }
.cl-histbox { max-height: 200px; }
.cl-badge { display: inline-block; padding: 1px 10px; border-radius: 10px; background: #e7eefc; color: var(--c-primary); font-size: 12px; font-weight: 600; }

/* po-cellinp 전역 적용(인풋행 외 결산 편집셀에도) — 칸 넘침 방지 */
.po-grid td .po-cellinp { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; height: 26px; border: 1px solid #cdd6e2; border-radius: 5px; background: #fff; font-size: 13px; color: #222; padding: 0 6px; }
.po-grid td .po-cellinp.is-r { text-align: right; }
.po-grid td .po-cellinp:focus { border-color: var(--c-primary); outline: none; }
.po-grid td.cl-edit .po-cell { width: 100%; }

/* 결산이력보기 — 발행여부 매트릭스 + 발행이력 (라이브 1:1) */
.cl-issue th, .cl-issue td { text-align: center; }
.cl-issue td.cl-issuelab { font-weight: 600; color: #333; background: #fafbfc; }
.cl-issue .po-cell { justify-content: center; }
.cl-mark-o { color: #1c3d6e; font-weight: 700; font-size: 14px; }
.cl-mark-x { color: #e23b3b; font-weight: 700; font-size: 14px; }
.cl-issue td.cl-celldis { background: #f1f2f5; }
.cl-histbox2 { min-height: 360px; }
.cl-hist th, .cl-hist td { text-align: center; }
.cl-hist .po-grid__row.is-sel td { background: #eaf1fb; color: var(--c-primary); }
.cl-histfootwrap { flex: 1; display: flex; justify-content: center; }

/* 재무제표 2단 헤더 색상 통일 — 그룹헤더(poin-ghd #e9edf3)를 기본 헤더색(#f1f2f5)에 맞춤
   (합계잔액시산표 차변/대변 행과 잔액/금액 행 색상차 제거. BS/PL/원가/이익잉여금 공통) */
.fs-grid .poin-ghd { background: #f1f2f5 !important; }

/* ============================================================
   연말정산 자료입력 (yearendInput, YA-01-100) — .ye-* 스코프
   ============================================================ */
.ye.fillview { gap: 0; }
/* 검색바: .po-filterbar 라인 재사용 */
.ye-search { flex-wrap: nowrap; }
.ye-srch__item { display: inline-flex; align-items: center; gap: 10px; }
.ye-srch__lab { font-size: 14px; font-weight: 600; color: #222; white-space: nowrap; }
.ye-inp { height: 32px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; font-size: 13px; color: #222; background: #f1f2f5; }
.ye-inp--yr { width: 72px; text-align: center; }
.ye-inp--mon { width: 100px; text-align: center; }
.ye-daterange { display: inline-flex; align-items: center; gap: 6px; }
.ye-tilde { color: #888; }
.ye-radios { display: inline-flex; align-items: center; gap: 14px; }
.ye-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #333; cursor: pointer; }
.ye-radio input { width: 15px; height: 15px; }
.ye-searchend { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ye-searchend .po-search { margin-left: 0; }
/* 신고서마감 태그(complete-tag) — 기본 hidden, 마감 시 표시 */
.ye-complete { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 6px; background: #4a4f57; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ye-complete[hidden] { display: none; }
/* 상세 검색조건 토글 버튼 + 드로어 */
.ye-detailbtn { display: inline-flex; align-items: center; gap: 5px; }
.ye-detailbtn .icon { width: 12px; height: 12px; fill: #8a93a0; transition: transform .15s; }
.ye-detailbtn.is-on { border-color: var(--c-primary); color: var(--c-primary); }
.ye-detailbtn.is-on .icon { fill: var(--c-primary); transform: rotate(180deg); }
/* 라이브: 드로어는 검색조건 바 안쪽 한 줄 → 자체 하단선 없음 */
.ye-drawer { flex: 0 0 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0 0; }
.ye-drawer[hidden] { display: none; }
.ye-drawer__sel { height: 32px; min-width: 140px; border: 1px solid var(--c-bg-cool); border-radius: 6px; font-size: 13px; color: #222; padding: 0 8px; background: #fff; }
.ye-drawer__inp { height: 32px; width: 320px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; font-size: 13px; color: #222; }
.ye-drawer__inp::placeholder { color: #aab1bb; }
.ye-drawer__reset { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.ye-drawer__reset .icon { width: 13px; height: 13px; fill: #6b7785; }
/* 접기/펼치기 버튼 (전체 집계·급여 지급내역) */
.ye-fold { width: 22px; height: 22px; padding: 0; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none; }
.ye-fold:hover { border-color: var(--c-primary); }
.ye-fold .icon { width: 12px; height: 12px; fill: #6b7785; transition: transform .15s; }
.ye-fold:hover .icon { fill: var(--c-primary); }
.ye-fold.is-closed .icon { transform: rotate(180deg); }
.ye-fold--side { width: 20px; height: 20px; margin-left: 0; }

/* 본문: 좌(사원) / 우(탭) */
.ye-body { flex: 1; min-height: 0; display: flex; gap: 14px; padding-top: 16px; align-items: stretch; }
.ye-left { width: 380px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.ye-right { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--c-bg-cool); border-radius: 6px; }

/* 좌측: 버튼/카운트/사원그리드/집계 */
.ye-left__btns { display: flex; gap: 8px; margin-bottom: 10px; }
.ye-left__btns .po-tbtn { flex: 1; justify-content: center; }
.ye-btn-primary { border-color: var(--c-primary); color: var(--c-primary); }
.ye-btn-primary:hover { background: #f3f7ff; }
.ye-btn-red { border-color: #e2a7a7; color: #d6453c; }
.ye-btn-red:hover { background: #fdf3f3; border-color: #d6453c; color: #d6453c; }
.ye-left__counts { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0 2px 8px; }
.ye-cnt--right { margin-left: auto; }
.ye-cnt { font-size: 12.5px; color: #666; }
.ye-cnt b { color: var(--c-brand); font-weight: 700; }
.ye-empbox { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.ye-grid { width: 100%; table-layout: fixed; }
.ye-grid td.ye-c, .ye-grid th { text-align: center; }
.ye-grid td.ye-c { text-align: center; }
.ye-grid td.ye-grid__chk { width: 30px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.ye-grid td.ye-grid__chk input { vertical-align: middle; }
.ye-emprow { cursor: pointer; }
.ye-emprow:hover td { background: #f6f9ff; }
.ye-emprow.is-sel td { background: #e9f0ff; }
.ye-state { display: inline-block; min-width: 44px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.ye-state.is-ing { background: #eaf2ff; color: #2f6bd6; }
.ye-state.is-closed { background: #eef0f3; color: #6b7785; }

/* 전체 집계 */
.ye-summary { flex: none; margin-top: 10px; }
.ye-summary__head { display: flex; align-items: center; height: 30px; }
.ye-summary__head strong { font-size: 14px; font-weight: 700; color: var(--c-brand); }
.ye-summary__chk { margin: 4px 0 8px; }
.ye-sumtbl { width: 100%; border-collapse: collapse; }
.ye-sumtbl th, .ye-sumtbl td { border: 1px solid #e4e4e4; height: 28px; padding: 0 10px; font-size: 13px; }
.ye-sumtbl th { width: 44%; background: #f7f8fa; color: #444; font-weight: 600; text-align: center; }
.ye-sumtbl td { text-align: right; color: #222; }
.ye-won { color: #888; font-size: 12px; }
.ye-sumtbl__hl th { background: #eef4ff; color: var(--c-brand); font-weight: 700; }
.ye-sumtbl__hl td { color: var(--c-brand); font-weight: 700; }

/* 우측: 액션버튼/탭 */
/* 탭 바(좌) + 액션버튼(우) 한 줄 — 실서비스 동일 */
.ye-tabrow { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 12px 0; }
.ye-actbtns { display: flex; gap: 8px; align-items: center; padding-bottom: 5px; }
.ye-tabs { flex: none; display: flex; gap: 6px; padding: 0; }
.ye-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 122px; height: 34px; padding: 0 16px; border: 0; border-radius: 4px 4px 0 0; background: #eef0f4; font-size: 14px; font-weight: 600; color: #8a93a0; cursor: pointer; }
.ye-tab:hover { color: var(--c-primary); }
.ye-tab.is-active { background: var(--c-brand); color: #fff; font-weight: 700; }
.ye-pane { flex: 1; min-height: 0; overflow: auto; padding: 14px; border-top: 1px solid var(--c-bg-cool); margin-top: -1px; }

/* 탭 공용 */
.ye-secttl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ye-secttl strong { font-size: 14px; font-weight: 700; color: var(--c-brand); display: inline-flex; align-items: center; gap: 4px; }
.ye-secttl__form { display: inline-flex; align-items: center; gap: 10px; }
.ye-flab { font-size: 13px; font-weight: 600; color: #444; margin-left: 6px; }
.ye-secttl2 { font-size: 14px; font-weight: 700; color: var(--c-brand); margin: 16px 0 8px; }
.ye-gridbox { overflow-x: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.ye-gridbox + .ye-gridbox { margin-top: 10px; }
.ye-gridbox--fam { max-height: 220px; overflow-y: auto; }
.ye-btn-del { height: 28px; padding: 0 12px; }

/* 집계내역 2단표 / 세액명세표 */
.ye-aggtbl, .ye-taxtbl { width: 100%; }
.ye-aggtbl thead th, .ye-taxtbl thead th { position: static; }
.ye-aggtbl td, .ye-taxtbl td, .ye-taxtbl th { text-align: center; }
.ye-taxtbl td.is-r { text-align: right; }
.ye-taxtbl th { background: #f7f8fa; font-weight: 600; color: #444; text-align: center; }
.ye-taxtbl th.ye-tax-l { background: #f1f2f5; }
.ye-taxtbl__hl th { background: #eef4ff; color: var(--c-brand); font-weight: 700; }
.ye-taxtbl__hl td { color: var(--c-brand); font-weight: 700; }
.ye-minisel { height: 26px; border: 1px solid var(--c-bg-cool); border-radius: 4px; font-size: 12.5px; padding: 0 4px; background: #fff; }

/* 소득명세 탭 */
.ye-inctop { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.ye-incwrap { display: flex; gap: 12px; align-items: flex-start; }
.ye-incmain { flex: 1; min-width: 0; }
.ye-incside { width: 456px; flex: none; }
.ye-incside__ttl { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: #444; background: #f1f2f5; border: 1px solid var(--c-bg-cool); border-bottom: 0; padding: 6px 10px; border-radius: 4px 4px 0 0; }
/* 급여 지급내역 side 접기 */
.ye-incside.is-folded { width: auto; }
.ye-incside.is-folded .ye-pymtgrid { display: none; }
.ye-incside.is-folded .ye-incside__ttl { border-bottom: 1px solid var(--c-bg-cool); border-radius: 4px; }
.ye-pymtgrid { max-height: none; overflow-y: visible; }   /* 1~12월 전부 표시(세로 스크롤 없음) */
/* 소득명세 그리드 — 라이브 YA-01-120 구조(항목=행 / 근무지구분=열).
   구분 열만 좌측정렬, 값 열은 우측정렬. readonly 열은 회색(#f1f2f5), `추가` 열만 입력 가능. */
.ye-incgrid th, .ye-incgrid td { padding: 0 10px; }
.ye-incgrid td.ye-incname { text-align: left; }
.ye-incgrid td.ye-inc-ro { background: var(--c-bg-soft); }
.ye-incgrid td.ye-inc-extra { padding: 0 4px; }
.ye-incgrid .ye-incin { width: 100%; height: 24px; border: 0; background: transparent; text-align: right; font-size: 14px; color: #222; padding: 0 6px; }
.ye-incgrid .ye-incin:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--c-primary); border-radius: 3px; }
/* 소계행(16.급여계 · 20.제출비과세계 · 20-1.감면소득계) / 세액행(소득세·지방소득세·농특세) /
   첫 행 선택 강조(라이브도 진입 시 첫 행이 선택돼 파랗게 보인다) */
.ye-incrow.is-sum td, .ye-incrow.is-sel td { background: #eef3fd; }
.ye-incrow.is-tax td { background: #e9f7f4; }
.ye-pymtgrid .po-grid th, .ye-pymtgrid .po-grid td { padding: 0 6px; font-size: 13px; }
.ye-pymt thead th { position: static; white-space: nowrap; }

/* 공제자료입력 탭: 12 항목 버튼 + 상세 */
.ye-dedlist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.ye-dedbtn { border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 8px 10px; cursor: pointer; background: #fff; transition: .12s; }
.ye-dedbtn:hover { border-color: var(--c-primary); }
.ye-dedbtn.is-active { border-color: var(--c-primary); background: #eef3ff; box-shadow: none; }
.ye-dedbtn__lab { font-size: 12.5px; color: #555; margin: 0 0 4px; }
.ye-dedbtn.is-active .ye-dedbtn__lab { color: var(--c-brand); font-weight: 700; }
.ye-dedbtn__val { font-size: 14px; font-weight: 700; color: #222; text-align: right; margin: 0; }
.ye-deddetail__ttl { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ye-deddetail__ttl strong { font-size: 14px; font-weight: 700; color: var(--c-brand); }
.ye-deddetail__sum { font-size: 13px; color: #666; }

/* 툴팁 */
.ye-tip { position: relative; display: inline-flex; }
.ye-tip__btn { width: 15px; height: 15px; border: 1px solid #b8c0cc; border-radius: 50%; background: #fff; color: #6b7785; font-size: 10px; line-height: 1; cursor: help; padding: 0; }
.ye-tip__box { display: none; position: absolute; left: 50%; top: 20px; transform: translateX(-50%); z-index: 30; width: 260px; padding: 9px 11px; background: #2b3340; color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.5; border-radius: 6px; text-align: left; white-space: normal; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.ye-tip:hover .ye-tip__box { display: block; }
/* overflow 걸린 그리드 안에서 잘리지 않게 뷰포트 기준으로 띄우는 변형(좌표는 JS가 채운다) */
.ye-tip__box.is-fixed { position: fixed; left: 0; top: 0; transform: none; }

/* 연말정산 — 소득명세 선택행 */
.ye-pymtgrid .po-grid__row.is-sel td, .ye-pymtgrid td.is-sel { background: #e9f0ff; }

/* 연말정산 — 공제자료입력 항목별 상세 */
.ye-deddetail__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ye-deddetail__btns { display: flex; gap: 8px; }
.ye-ddgrid { width: 100%; }
.ye-ddgrid thead th { position: static; }
.ye-ddgrid td.ye-ddrrn { color: #c0392b; }

/* 연말정산 — 정산명세 신고서식 폼 */
.ye-settle__srch { display: flex; gap: 28px; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--c-bg-cool); }
.ye-fmwrap { display: flex; gap: 10px; align-items: flex-start; }
.ye-fmcol { flex: 1; min-width: 0; overflow-x: auto; }
.ye-fmtbl { width: 100%; border-collapse: collapse; }
.ye-fmtbl th, .ye-fmtbl td { border: 1px solid #dfe3e8; font-size: 11.5px; line-height: 1.35; padding: 3px 7px; color: #333; vertical-align: middle; }
.ye-fmtbl th { background: #f7f8fa; font-weight: 600; text-align: left; }
.ye-fm__iv { width: 22px; background: var(--c-brand); color: #fff; text-align: center; font-weight: 700; padding: 3px 2px; }
.ye-fm__iv span { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 3px; white-space: nowrap; display: inline-block; }
.ye-fm__grp { width: 24px; background: #eef2f8; text-align: center; color: #3a4a63; padding: 3px 2px; }
.ye-fm__grp span { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1px; white-space: nowrap; display: inline-block; }
.ye-fm__sub { background: #fbfcfd; font-weight: 400; color: #555; }
.ye-fm__pair { background: #fff; font-weight: 400; color: #777; white-space: nowrap; }
.ye-fm__v { text-align: right; background: #fff; min-width: 64px; color: #222; }
.ye-fm__v span { font-weight: 600; }
.ye-fm__lab { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ye-fm__no { font-style: normal; font-weight: 700; color: #5b6470; }
.ye-fm__edit { width: 13px; height: 13px; display: inline-block; position: relative; flex: none; }
.ye-fm__edit::before { content: '\270E'; position: absolute; left: 0; top: -1px; font-size: 11px; color: var(--c-primary); }

/* 정산명세 트리형 신고서식 — 셀 스타일 (formTable→renderTree 전환) */
.ye-fmtbl { table-layout: auto; }
.ye-fmtbl th, .ye-fmtbl td { font-size: 11px; padding: 3px 6px; }
.ye-fm__grp { width: 26px; text-align: center; background: #eef2f8; color: #36465f; padding: 4px 2px; font-weight: 600; }
.ye-fm__gwrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ye-fm__gwrap > span { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1px; white-space: nowrap; }
.ye-fm__node { text-align: left; background: #fafbfc; font-weight: 400; color: #444; }
.ye-fm__leaf { text-align: left; background: #f7f8fa; font-weight: 400; color: #555; }
.ye-fm__leaf .ye-fm__no, .ye-fm__node .ye-fm__no { color: #5b6470; font-weight: 700; }
.ye-fm__gwrap .ye-fm__edit { width: 12px; height: 12px; display: inline-block; position: relative; }
.ye-fm__gwrap .ye-fm__edit::before { content: '\270E'; position: absolute; left: 0; top: -2px; color: var(--c-primary); font-size: 11px; }

/* ============================================================
   거래수집 > 자료 수집 팝업 (.dc-*)  — 104-view-collect-gather.js
   ============================================================ */
/* 랜딩 */
.dc-landing { align-items: center; justify-content: center; }
.dc-landing__card { width: 460px; max-width: 90%; text-align: center; padding: 40px 28px; }
.dc-landing__ico { display: flex; justify-content: center; margin-bottom: 14px; }
.dc-landing__ico .dc-landico { width: 46px; height: 46px; fill: #c2cbdc; }
.dc-landing__t { font-size: 19px; font-weight: 700; color: #1f3b6e; margin: 0 0 10px; }
.dc-landing__d { font-size: 13.5px; color: #6b7785; line-height: 1.7; margin: 0 0 22px; }
.dc-landing__btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 22px; border: 0; border-radius: 7px; background: #2f5aa6; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.dc-landing__btn .icon { fill: #fff; }

/* 모달 골격 */
.dc-modal .modal__body { padding: 0; }
.dc-modal .modal__foot { justify-content: center; background: #fff; padding: 14px 20px 18px; border-top: 1px solid #eef0f4; }
.dc-modalbody { display: flex; flex-direction: column; }
.dc-tabs { display: flex; justify-content: center; gap: 56px; border-bottom: 1px solid #e1e5ea; padding-top: 4px; }
.dc-tab { appearance: none; background: none; border: 0; padding: 12px 4px; font-size: 15px; font-weight: 600; color: #9aa3ae; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dc-tab.is-on { color: #1f3b6e; font-weight: 700; border-bottom-color: #1f3b6e; }
.dc-tab--err.is-on { color: #c47d1a; border-bottom: 2px dashed #e08a1e; }
.dc-content { padding: 18px 24px 8px; }
.dc-foot { display: flex; gap: 10px; justify-content: center; width: 100%; }
.dc-fbtn { height: 38px; min-width: 92px; padding: 0 24px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.dc-fbtn--collect { background: #2f5aa6; color: #fff; }
.dc-fbtn--collect:disabled { background: #c4cad4; color: #fff; cursor: default; }
.dc-fbtn--recollect { background: #e58e1c; color: #fff; }
.dc-fbtn--cancel { background: #fff; color: #e1544a; border-color: #e3897f; }

/* 공통: 날짜박스 / 라벨 / 외부기관연동 */
.dc-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dc-dategrp { display: flex; align-items: center; gap: 10px; }
.dc-toplab { font-size: 13px; font-weight: 600; color: #444; }
.dc-datebox { display: inline-flex; align-items: center; gap: 6px; }
.dc-datebox input { height: 34px; border: 1px solid #d5dae1; border-radius: 6px; padding: 0 12px; width: 206px; font-size: 13px; color: #333; background: #fff; text-align: center; }
.dc-cal { width: 34px; height: 34px; border: 1px solid #b9cdf0; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.dc-cal .icon { fill: #3f6cc4; }
.dc-extlink { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; color: #6b7280; font-size: 13px; }
.dc-gear { width: 15px; height: 15px; fill: #8a93a0; }

/* 탭1: 자료 전체 선택 + 카드 */
.dc-allsel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #333; margin-bottom: 12px; cursor: pointer; }
.dc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dc-card { border: 1px solid #e1e5ea; border-radius: 10px; padding: 13px 16px 14px; min-height: 150px; display: flex; flex-direction: column; background: #fff; }
.dc-card.is-on { border-color: #3f6cc4; box-shadow: inset 0 0 0 1px #3f6cc4; }
.dc-card__top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.dc-card__top > input[type=checkbox] { width: 16px; height: 16px; }
.dc-basis { display: inline-flex; align-items: center; gap: 6px; }
.dc-basislab { font-size: 12px; color: #8a93a0; }
.dc-bsel { height: 27px; border: 1px solid #d5dae1; border-radius: 5px; font-size: 12px; padding: 0 6px; color: #333; background: #fff; }
.dc-card__body { display: flex; align-items: center; gap: 13px; margin-top: 6px; }
.dc-cardicon { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; }
.dc-cico--tax { width: 44px; height: 44px; border-radius: 9px; background: #1f3a6b; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; }
.dc-cardico { width: 42px; height: 42px; color: #33507d; }
.dc-card__tt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dc-badges { display: flex; gap: 4px; }
.dc-bdg { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.dc-bdg--sell { background: #ee5a52; }
.dc-bdg--buy { background: #4577e8; }
.dc-bdg--io { background: #28a05a; }
.dc-card__name { font-size: 15px; font-weight: 700; color: #222; }
.dc-card__note { font-size: 12px; color: #9aa3ae; margin: 0; }
.dc-card__last { margin-top: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 10px; }
.dc-card__last span { font-size: 12px; color: #9aa3ae; }
.dc-card__linkonly { margin-top: auto; display: flex; justify-content: center; padding-top: 12px; }
.dc-linkbtn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border: 1px solid #c9d2de; border-radius: 6px; background: #fff; color: #4a5568; font-size: 13px; font-weight: 600; cursor: pointer; }
.dc-plus { width: 15px; height: 15px; fill: #5b86d6; }

/* 탭1: 공통 안내 사항 */
.dc-info { margin-top: 16px; background: #f3f5fd; border: 1px solid #e4e8f7; border-radius: 8px; padding: 12px 16px 14px; position: relative; }
.dc-info__t { font-size: 13px; font-weight: 700; color: #3a4a63; margin: 0 0 6px; }
.dc-info ul { margin: 0; padding: 0; list-style: none; }
.dc-info li { font-size: 12.5px; color: #5a6573; line-height: 1.7; padding-left: 11px; position: relative; }
.dc-info li::before { content: '•'; position: absolute; left: 0; color: #8a93a0; }
.dc-info b { color: #3a4a63; font-weight: 700; }
.dc-info__btn { position: absolute; right: 14px; bottom: 13px; height: 28px; padding: 0 12px; border: 1px solid #9bb4e6; border-radius: 6px; background: #fff; color: #3a62a8; font-size: 12px; font-weight: 600; cursor: pointer; }

/* 탭2: 오류내역 재수집 */
.dc-errtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dc-srchtoggle { display: inline-flex; align-items: center; gap: 4px; background: #f1f3f6; border: 1px solid #e1e5ea; border-radius: 6px; height: 30px; padding: 0 12px; color: #7a828d; font-size: 12.5px; cursor: pointer; }
.dc-srchtoggle .icon { width: 13px; height: 13px; fill: #9aa3ae; }
.dc-chips { display: grid; grid-template-columns: repeat(5, max-content); gap: 11px 30px; padding: 13px 16px; border: 1px solid #e6e9ef; border-radius: 8px; margin-bottom: 14px; }
.dc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #333; cursor: pointer; white-space: nowrap; }
.dc-chip input[type=checkbox] { accent-color: #2f5aa6; }
.dc-chip .dc-bdg { height: 17px; font-size: 10.5px; padding: 0 6px; }
.dc-errmeta { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 7px; }
.dc-errcnt { font-size: 13px; color: #555; }
.dc-errcnt strong { color: #2f5aa6; }
.dc-errcnt__sep { margin: 0 9px; color: #cbd2db; }
.dc-errnote { font-size: 12px; color: #9aa3ae; }
.dc-egridbox { border: 1px solid #e1e5ea; border-radius: 6px; max-height: 304px; overflow: auto; }
.dc-egrid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.dc-egrid thead th { position: sticky; top: 0; z-index: 1; background: #f1f2f5; height: 34px; font-weight: 700; color: #444; border-bottom: 1px solid #e1e5ea; }
.dc-egrid tbody td { height: 32px; padding: 0 10px; border-bottom: 1px solid #eef0f3; color: #333; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-egrid td.is-c { text-align: center; }
.dc-egrid .dc-lk { color: #2f6ad0; }
.dc-egrid th.dc-egrid__chk, .dc-egrid td.dc-egrid__chk { width: 40px; text-align: center; overflow: visible; text-overflow: clip; padding: 0; }
.dc-egrid__chk input[type=checkbox] { accent-color: #e8911f; }
.dc-egrid tbody tr.is-sel { background: #eef4ff; }
.dc-egrid tbody tr.is-sel td { box-shadow: inset 0 -1px 0 #e8941c, inset 0 1px 0 #e8941c; }

/* ===== 조직도 팝업 (헤더 유틸 '조직도') — 검색 + 좌 부서트리 / 우 사원카드 ===== */
.org2 { padding: 4px 2px; }
.org2-srch { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.org2-srch__inp { flex: 1; height: 36px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 12px; font-size: 13px; color: #222; }
.org2-srch__inp::placeholder { color: #aab1bb; }
.org2-srch__btn { height: 36px; flex: none; }
.org2-main { display: flex; gap: 16px; align-items: stretch; height: 60vh; min-height: 380px; }
/* 좌측 부서 트리 */
.org2-tree { width: 340px; flex: none; border: 1px solid var(--c-bg-cool); border-radius: 8px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.org2-tree__head { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--c-bg-cool); font-size: 14px; font-weight: 700; color: var(--c-brand); }
.org2-co-ico { width: 17px; height: 17px; fill: var(--c-brand); }
.org2-treebody { flex: 1; min-height: 0; overflow: auto; padding: 6px 0; }
.org2-node { display: flex; align-items: center; gap: 6px; height: 30px; padding-right: 10px; cursor: pointer; font-size: 13px; color: #333; white-space: nowrap; }
.org2-node:hover { background: #f6f9ff; }
.org2-node.is-sel { background: #e9f0ff; }
.org2-node.is-sel .org2-node__name { color: var(--c-brand); font-weight: 700; }
.org2-node__arr { width: 14px; height: 14px; flex: none; fill: #8a93a0; }
.org2-node__ico { width: 16px; height: 16px; flex: none; fill: #6b7785; }
.org2-node__name { overflow: hidden; text-overflow: ellipsis; }
/* 우측 사원 카드 */
.org2-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.org2-detail__head { height: 38px; display: flex; align-items: center; padding: 0 16px; background: #f1f4f9; border: 1px solid var(--c-bg-cool); border-radius: 8px; font-size: 14px; font-weight: 700; color: #222; margin-bottom: 12px; }
.org2-detail__list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.org2-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--c-bg-cool); border-radius: 10px; padding: 14px 18px; background: #fff; }
.org2-card__av { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #eef1f6; display: flex; align-items: center; justify-content: center; }
.org2-av-ico { width: 28px; height: 28px; fill: #b8c0cc; }
.org2-card__info { flex: 1; min-width: 0; }
.org2-card__name { font-size: 15px; font-weight: 700; color: #222; }
.org2-card__path { font-size: 12px; color: #8a93a0; margin-top: 3px; }
.org2-card__no { flex: none; font-size: 12.5px; color: #666; }
.org2-empty { padding: 40px 0; text-align: center; color: #888; font-size: 13px; }

/* ============================================================
   필수 별표(*) 줄바꿈 방지 — 라벨+별표 한 줄 유지 (전수 적용, 2026-06-10)
   ::after 별표가 좁은 칸에서 다음 줄로 떨어지지 않도록 라벨 nowrap
   ============================================================ */
.cf-tit, .dm-tit, .itm-label, .rent-label, .psite-form-label,
.fa-acq-label, .fa-form-label, .bc-live-label, .bc-form-label,
.ev-lab, .rup-fld__lab, .si-lab, .pay-lab, .payreg-lab { white-space: nowrap; }

/* ============================================================
   나의업무 — 급여명세서(개인) .myp-* / 신용카드(기본) .myc-*  (2026-06-10 라이브 정합)
   ============================================================ */
/* 공통 섹션 타이틀 */
.myp-sec { padding: 4px 0 8px; }
.myp-sec strong { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-brand); }
/* 임직원 정보표 */
.myp-info { width: 100%; border-collapse: collapse; margin-bottom: 16px; table-layout: fixed; }
.myp-info th, .myp-info td { height: 34px; border: 1px solid var(--c-border-2); font-size: var(--fs-14); padding: 6px 12px; line-height: 18px; }
.myp-info__lab { width: 200px; background: var(--c-bg-soft); font-weight: var(--fw-bold); color: #444; text-align: center; }
.myp-info__val { color: #222; text-align: center; }
/* 툴바 */
.myp-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.myp-toolbar .myp-allchk { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: var(--c-text-2); cursor: pointer; }
.myp-grid td.rpt-num { text-align: right; }
.myp-detailcell { text-align: center; }
.myp-detail { height: 24px; padding: 0 12px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); font-size: var(--fs-13); cursor: pointer; }

/* 신용카드(기본) — 편집 그리드(po-grid 가로채움 원칙) */
.myc-toolbar { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; }
.myc-count { margin-left: auto; font-size: var(--fs-13); color: var(--c-text-2); }
.myc-gridbox { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.myc-gridscroll { flex: 1; min-height: 0; overflow: auto; }
.myc-gridfoot { flex: none; overflow: hidden; }
.myc-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.myc-grid th { height: 30px; background: #f1f2f5; border: 1px solid #e4e4e4; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; padding: 0 8px; text-align: center; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.myc-grid td { height: 30px; border: 1px solid #e4e4e4; font-size: var(--fs-14); color: #222; padding: 6px 8px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myc-grid td.rpt-num, .myc-grid th.rpt-num { text-align: right; }
.myc-grid .myc-chk { width: 36px; padding: 0; text-align: center; overflow: visible; text-overflow: clip; }
.myc-grid td.myc-incell { padding: 2px 4px; }
.myc-grid td.myc-incell--srch { position: relative; }
.myc-in { width: 100%; height: 26px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-sm); padding: 0 6px; font-size: var(--fs-13); color: #222; box-sizing: border-box; }
.myc-incell--srch .myc-in { padding-right: 24px; }
.myc-pick { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 0; background: none; cursor: pointer; padding: 0; }
.myc-pick .icon { width: 14px; height: 14px; fill: var(--c-text-3); }
.myc-footgrid td { height: 30px; background: var(--c-bg-soft); font-weight: var(--fw-bold); border: 1px solid #e4e4e4; border-top: 0; font-size: var(--fs-14); padding: 6px 8px; }

/* 나의업무 급여명세서 — 생년월일 팝업 + 첫행 선택 (추가) */
.myp-rrnbody { padding: 4px 2px; }
.myp-rrn__guide { font-size: var(--fs-14); color: #444; margin-bottom: 12px; }
.myp-rrn { width: 100%; height: 36px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 12px; font-size: var(--fs-14); box-sizing: border-box; }
.myp-rrn__msg { color: var(--c-required); font-size: var(--fs-12); min-height: 16px; margin-top: 6px; }
.myp-grid tbody tr.is-selected td { background: #edf6ff; }
.myp-grid tbody tr.is-selected td:nth-child(2), .myp-grid tbody tr.is-selected td:nth-child(3) { color: var(--c-primary); }
.myp-detail { height: 24px; min-width: 28px; padding: 0 6px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: #fff; color: var(--c-primary); cursor: pointer; }
.myp-detail .icon { width: 14px; height: 14px; fill: var(--c-primary); vertical-align: middle; }

/* 나의업무 신용카드(기본) — 결제상태 세그/필수/링크/음수/용도조회 (추가) */
.myc-filter .myc-srch { width: 32px; height: 32px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.myc-filter .myc-srch .icon { width: 15px; height: 15px; fill: var(--c-text-3); }
.myc-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.myc-seg__btn { height: 32px; padding: 0 14px; border: 0; background: #fff; color: var(--c-text-2); font-size: var(--fs-14); cursor: pointer; }
.myc-seg__btn + .myc-seg__btn { border-left: 1px solid var(--c-bg-cool); }
.myc-seg__btn.is-active { background: var(--c-brand); color: #fff; font-weight: var(--fw-medium); }
.myc-req { color: var(--c-required); margin-left: 2px; }
.myc-grid td.myc-link { color: var(--c-primary); text-decoration: underline; cursor: pointer; }
.myc-grid td.myc-partner { color: var(--c-primary); }
.myc-grid td.is-neg, .myc-grid td.is-neg.rpt-num { color: var(--c-error); }
.myc-req-in::placeholder { color: #f08a8a; }
/* 용도 조회 팝업 */
.myc-usebody { display: flex; flex-direction: column; gap: 10px; min-height: 360px; }
.myc-usebar { display: flex; gap: 8px; }
.myc-usebar .myc-usesrch { flex: 1; height: 34px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 12px; font-size: var(--fs-14); box-sizing: border-box; }
.myc-usescroll { flex: 1; min-height: 0; max-height: 420px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 6px; }
.myc-usegrid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.myc-usegrid th { height: 34px; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; position: sticky; top: 0; z-index: 1; }
.myc-usegrid th:nth-child(1) { width: 100px; } .myc-usegrid th:nth-child(2) { width: 200px; }
.myc-usegrid td { height: 34px; border-bottom: 1px solid #eef0f4; font-size: var(--fs-14); color: #222; padding: 0 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myc-usegrid td.myc-usename, .myc-usegrid td.myc-usenote { text-align: left; }
.myc-usegrid tbody tr { cursor: pointer; }
.myc-usegrid tbody tr:hover td { background: var(--c-bg-soft-2); }
.myc-usegrid tbody tr.is-selected td { background: #edf6ff; color: var(--c-primary); }

/* 신용카드(기본) — 2026-07-29 라이브 재실측 반영분(추가만, 기존 규칙 수정 없음)
   · 검색바 카드 값 박스 / 상세 검색조건 드로어(검색기준 용도 + 초기화)
   · 툴바 = 좌 카운트 + 우 [사용내역 불러오기][일괄적용][저장][작성완료]
   · 용도코드 헤더 ⓘ 툴팁 / 읽기전용 입력칸 / 취소(음수) 건 거래처 색 */
.myc-filter .myc-cardin { width: 150px; height: 32px; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13); color: #333; background: #fff; box-sizing: border-box; }
.myc-btn-detail.is-on { border-color: var(--c-primary); color: var(--c-primary); }
.myc-btn-detail.is-on .icon { fill: var(--c-primary); transform: rotate(180deg); }
/* 라이브: 드로어는 검색조건 바 안쪽 한 줄 → 자체 하단선·좌우 padding 없음 */
.myc-drawer { flex: 0 0 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0 0; }
.myc-drawer[hidden] { display: none; }
.myc-drawer .myc-drawer__sel { min-width: 140px; }
.myc-drawer__inp { height: 32px; width: 320px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13); color: #222; box-sizing: border-box; }
.myc-drawer__inp::placeholder { color: #aab1bb; }
.myc-drawer__reset { margin-left: auto; }
.myc-drawer__reset .icon { width: 13px; height: 13px; fill: #6b7785; }
/* 검색조건 영역 하단선과 다음 영역(툴바) 사이 간격 확보 */
.myc-drawer + .myc-toolbar { margin-top: 10px; }
.myc-toolbar .myc-count { margin-left: 0; }
.myc-tbtns { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.myc-grid th.myc-th--use .myc-th__info { display: inline-flex; align-items: center; vertical-align: middle; cursor: help; }
.myc-grid th.myc-th--use .myc-th__info .icon { width: 13px; height: 13px; fill: var(--c-text-3); }
.myc-grid .myc-in[readonly] { background: #fafbfc; }
.myc-grid .myc-in.is-neg { color: var(--c-error); }

/* ============================================================
   튜토리얼(가이드) — .gt-*(투어 오버레이) / .gr-*(레일) / .gh-*(가이드홈) / .gnav
   ============================================================ */

/* ---- 투어 오버레이 엔진 ----
   딤과 클릭 차단을 **마스크 4장이 함께** 담당한다(스포트라이트를 뺀 나머지를 정확히 타일링).
   원래는 .gt-spot 의 box-shadow 스프레드(0 0 0 9999px)로 딤을 칠했는데, 그건 화면 전체를
   무조건 덮어서 **왼쪽 레일까지 어둡게** 만든다. 레일은 남은 단계 목록이자 점프 컨트롤이라
   투어 내내 밝게 보이고 눌려야 한다(setMasks 의 x0 이 그 경계를 만든다).
   ⚠ #overlay-root > * { pointer-events:auto } 가 특정도 (1,0,0) 이라
      맨 .gt-layer(0,1,0)로는 못 이긴다 → 반드시 자식 결합자로 덮어쓴다. */
#overlay-root > .gt-layer { pointer-events: none; }
.gt-layer { position: fixed; inset: 0; z-index: 1100; }
.gt-mask  { position: fixed; background: rgba(15,23,42,.55); pointer-events: auto; }
/* 구멍 모서리 둥글림 — 각 조각은 R×R 이고 안쪽 1/4원만 투명(나머지는 마스크와 같은 딤).
   클릭은 통과시킨다(pointer-events:none) → interactive 스텝에서 대상 코너도 눌린다. */
.gt-corner    { position: fixed; pointer-events: none; }
.gt-corner.is-hidden { display: none; }
.gt-corner--tl { background: radial-gradient(circle farthest-side at bottom right, transparent calc(100% - .5px), rgba(15,23,42,.55) 100%); }
.gt-corner--tr { background: radial-gradient(circle farthest-side at bottom left,  transparent calc(100% - .5px), rgba(15,23,42,.55) 100%); }
.gt-corner--bl { background: radial-gradient(circle farthest-side at top right,    transparent calc(100% - .5px), rgba(15,23,42,.55) 100%); }
.gt-corner--br { background: radial-gradient(circle farthest-side at top left,     transparent calc(100% - .5px), rgba(15,23,42,.55) 100%); }
.gt-spot  { position: fixed; border-radius: var(--t-r-sm); pointer-events: auto;
            box-shadow: inset 0 0 0 2px var(--c-primary); }
/* interactive 스텝: 구멍을 열어 실제 컨트롤이 클릭을 받게 한다 */
.gt-layer--interactive .gt-spot { pointer-events: none; cursor: pointer; }
/* 하이라이트 외곽선 — 스팟(--t-r-sm 6px)에서 4px 밖이라 동심원이 되려면 6+4=10px */
.gt-layer--interactive .gt-spot::after { content: ''; position: absolute; inset: -4px; border-radius: 10px;
            border: 2px solid var(--c-primary); opacity: .6; animation: gt-pulse 1.4s ease-out infinite; }
@keyframes gt-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.06); opacity: 0; } }
/* 마스크 클릭 시 300ms 깜빡(오클릭 이탈 방지 안내) */
.gt-spot.is-nudge { animation: gt-nudge .3s ease-in-out 2; }
@keyframes gt-nudge { 50% { box-shadow: inset 0 0 0 3px var(--c-warn); } }
/* 대상이 스크롤러 밖으로 완전히 나간 경우(visible:false) */
.gt-spot.is-hidden { display: none; }

/* ---- 온보딩 툴팁(코치마크) — Claude Design 'Tooltip Redesign' 시안 반영 ----
   420px 폭·본문 15/1.75·스텝 라벨은 제목 위 파란 eyebrow·진행은 도트·[이전]은 고스트. */
.gt-tip { position: fixed; pointer-events: auto; width: 420px; max-width: calc(100vw - 32px);
          background: #fff; border-radius: var(--t-r-lg); padding: 26px 26px 20px;
          box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 18px 40px -12px rgba(16,24,40,.28);
          opacity: 0; transition: opacity .12s ease;
          /* 한글은 단어(어절) 단위로만 줄바꿈 — 글자 중간에서 안 끊기게 */
          word-break: keep-all; overflow-wrap: break-word; }
.gt-tip.is-in { opacity: 1; }
/* 스텝마다 스크립트로 포커스되는 박스라 base.css :focus-visible 의 각진 아웃라인이
   둥근 모서리·화살표 이음새를 깨서 억제한다(그림자·화살표로 이미 뚜렷하다). */
.gt-tip:focus, .gt-tip:focus-visible { outline: none; }
/* 화살표 — CSS 보더 삼각형. 카드 가장자리에 딱 붙는 흰 삼각형이라 뒷면이 없고,
   그림자를 주지 않아 딤(회색) 위에 겹친 그림자가 안 생긴다(마름모 대신). */
.gt-tip__arrow { position: absolute; width: 0; height: 0; border-style: solid; }
.gt-tip--bottom .gt-tip__arrow { top: -10px;    margin-left: -9px;
          border-width: 0 9px 10px 9px; border-color: transparent transparent #fff transparent; }
.gt-tip--top    .gt-tip__arrow { bottom: -10px; margin-left: -9px;
          border-width: 10px 9px 0 9px; border-color: #fff transparent transparent transparent; }
.gt-tip--right  .gt-tip__arrow { left: -10px;   margin-top: -9px;
          border-width: 9px 10px 9px 0; border-color: transparent #fff transparent transparent; }
.gt-tip--left   .gt-tip__arrow { right: -10px;  margin-top: -9px;
          border-width: 9px 0 9px 10px; border-color: transparent transparent transparent #fff; }
.gt-tip--center .gt-tip__arrow { display: none; }

.gt-tip__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gt-tip__headmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gt-tip__step { font-size: var(--t-fs-xs); font-weight: 800; letter-spacing: .1em; color: var(--t-blue); }
.gt-tip__title { font-size: var(--t-fs-heading); font-weight: var(--fw-bold); color: var(--t-text); line-height: 1.35; letter-spacing: -.01em; }
.gt-tip__x { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
          border: 0; background: none; cursor: pointer; color: #94a3b8; font-size: 16px;
          border-radius: var(--t-r-sm); }
.gt-tip__x:hover { background: #f1f5f9; color: #475569; }
.gt-tip__x .icon { width: 20px; height: 20px; }
.gt-tip__body { margin-top: 14px; }
.gt-tip__desc { font-size: var(--t-fs-body); line-height: var(--t-lh-body); color: var(--t-text-body); }
.gt-tip__desc + .gt-tip__desc { margin-top: 10px; }
.gt-tip__hint { margin-top: 12px; font-size: var(--t-fs); font-weight: var(--fw-bold); color: var(--t-blue); }
.gt-tip__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.gt-tip__dots { flex: none; display: flex; align-items: center; gap: 6px; }
.gt-tip__dot { width: 6px; height: 6px; border-radius: 3px; background: #cbd5e1; transition: width .2s ease, background .2s ease; }
.gt-tip__dot.is-on { width: 20px; background: #1e3a8a; }
.gt-tip__never { flex: 1; display: flex; align-items: center; gap: 6px;
          font-size: var(--fs-12); color: var(--c-text-3); cursor: pointer; }
.gt-tip__nav { flex: none; display: flex; gap: 8px; }
/* 툴팁 버튼 — 인트로/완료 카드의 버튼과 **같은 컴포넌트**여야 한다. 예전에는 여기만
   자체 값(곡선 9px · 남색 #1e3a8a · 굵기 700)이라 같은 튜토리얼 안에서 버튼이 두 벌로
   보였다. 클래스명은 JS(14-guidetour.js)가 쓰므로 두고, 값만 --t-btn-* 로 맞춘다. */
.gt-tip__btn { display: inline-flex; align-items: center; justify-content: center;
          font-family: inherit; height: var(--t-btn-h); padding: 0 var(--t-btn-pad-x);
          border: 1px solid transparent; border-radius: var(--t-btn-r);
          font-size: var(--t-btn-fs); font-weight: var(--t-btn-fw); letter-spacing: -.2px;
          white-space: nowrap; cursor: pointer; }
/* 보조 버튼(이전) = 카드의 [나중에]와 같은 line 스타일 */
.gt-tip__btn--ghost { background: #fff; border-color: var(--t-line); color: var(--t-text-2); }
.gt-tip__btn--ghost:hover { border-color: var(--t-blue); color: var(--t-blue); }
.gt-tip__btn--ghost:disabled { opacity: .4; cursor: default;
          background: #fff; border-color: var(--t-line); color: var(--t-text-2); }
/* 주버튼(다음) = 카드의 [안내 시작]과 같은 색 */
.gt-tip__btn--primary { background: var(--t-btn-primary-bg); color: #fff; }
.gt-tip__btn--primary:hover { background: var(--t-btn-primary-bg-hover); }

/* ---- [이 화면 튜토리얼 시작] 실행 버튼 — js/25-guide-fab.js 가 만들고 토글한다 ----
   자리는 경로줄(.breadcrumb) 의 우측 슬롯이다(2026-08-11: 우하단 플로팅에서 옮김).
   화면 이름 바로 옆이라 "이 화면의 튜토리얼"로 읽히고, 우하단을 비워 토스트와
   겹치지 않는다(예전의 body.gt-fab-on 토스트 밀어올리기 규칙도 그래서 없앴다).
   회색 경로줄에서 확실히 눈에 띄어야 하는 유일한 실행 지점이라, 테두리형이 아니라
   인터랙션 파랑(--c-primary) 채움 + 그림자로 강조한다(2026-08-11 요청). */
.gt-runbtn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 14px;
          border: 0; border-radius: var(--t-r-sm); cursor: pointer;
          background: var(--c-primary); color: #fff; font-size: var(--fs-12); font-weight: var(--fw-bold);
          line-height: 1; white-space: nowrap; letter-spacing: -.2px;
          box-shadow: 0 2px 8px rgba(55,108,251,.35);
          transition: background .12s, box-shadow .12s, transform .12s; }
.gt-runbtn .icon { width: 14px; height: 14px; fill: currentColor; }
.gt-runbtn:hover { background: var(--c-brand); box-shadow: 0 4px 12px rgba(0,56,121,.35); transform: translateY(-1px); }
.gt-runbtn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.gt-runbtn.is-hidden { display: none; }

/* 투어 중 토스트가 딤 아래로 묻히지 않게 —
   #overlay-root 는 스스로 z-index:var(--z-toast) 스택 컨텍스트다. 그 안에서 .toast 는
   z-index:auto 인데 .gt-layer 는 1100 이라, 형제 순서와 무관하게(양수 z-index 가 auto 보다
   늦게 칠해진다) 레이어가 토스트 위를 덮어 어둡게 보인다. 레이어보다 1 큰 값으로 올린다.
   (재현: employee.add 1번 스텝의 advance:'click' → .emp-addbtn → onAdd() 토스트)
   ※ components.css 의 .toast 규칙들은 z-index 를 다루지 않아 속성 충돌이 없고,
     `#overlay-root .toast`(1,1,0) 는 `.toast`(0,1,0) 를 순서와 무관하게 이긴다. */
#overlay-root .toast { z-index: 1101; }

/* ---- 레일(사이드바 탈취) ----
   폭은 커스텀 프로퍼티로만 넓힌다. .sidebar{width}를 직접 주면
   calc(100vw - var(--sidebar-w))로 폭을 잡는 ~20개 뷰 캔버스가 어긋난다.
   레일 폭 단일 소스는 --guide-rail-w 다 — 사이드바 폭과 아래 모달 오프셋이 같은 값을
   써야 하는데, .app.is-guide 에 두면 .app 바깥의 #overlay-root 가 읽지 못한다.
   그래서 둘의 공통 조상인 body 에 둔다(전역 tokens.css 는 건드리지 않는다). */
body { --guide-rail-w: 292px; }
.app.is-guide { --sidebar-w: var(--guide-rail-w); }
.app.is-guide .sidebar { transition: none; }  /* calc 캔버스는 스냅되므로 사이드바만 애니메이션하면 어긋나 보임 */
/* 레일이 떠 있는 동안에는 화면 모달(딤 포함)도 레일을 덮지 않는다 — 투어 딤의 clearLeft 와
   같은 기준이다. 가로가 좁아지면 가운데 정렬 때문에 모달이 레일 위로 넘어오던 문제를 막는다.
   #overlay-root 는 .app 바깥이라 .app.is-guide 로 못 잡아 body 표식(22-guide-core.js
   mountRail/clearRail)을 쓴다. */
body.is-guide-rail .modal__backdrop { left: var(--guide-rail-w); }
body.is-guide-rail .modal__card { max-width: calc(94vw - var(--guide-rail-w)); }
.gr { display: flex; flex-direction: column; height: 100%; min-height: 0; color: #fff; }
.gr__head { flex: none; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.gr__back { display: flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer;
          color: var(--c-primary-weak); font-size: var(--fs-12); padding: 0 0 6px; }
.gr__title { display: block; font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: 1.45; }
.gr__prog { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.gr__bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); overflow: hidden; }
.gr__fill { display: block; height: 100%; background: var(--c-primary); transition: width .2s ease; }
.gr__cnt { flex: none; font-size: var(--fs-12); color: var(--c-primary-weak); }
.gr__tree { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; }
/* 레일은 `--c-brand-darker`(#001f44) 위에 얹힌다. 어두운 바탕에서 흐린 회청색을 쓰면
   "비활성 목록"처럼 읽혀 실제로는 눌러서 이동할 수 있다는 걸 놓친다.
   → 본문은 거의 흰색까지 올리고, 호버·현재단계는 왼쪽 액센트 바로 확실히 구분한다. */
.gr-node__glabel { display: block; padding: 10px 8px 4px; font-size: var(--fs-12);
          font-weight: var(--fw-bold); color: #a9c3e6; letter-spacing: .2px; }
.gr-node__kids { padding-left: 2px; }
.gr-node--overview > .gr-node__row, .gr-node--action > .gr-node__row {
          position: relative; display: flex; align-items: flex-start; gap: 8px;
          padding: 8px 8px 8px 10px; border-radius: var(--t-r-sm);
          cursor: pointer; font-size: var(--fs-13); color: #e6eefb; line-height: 1.45;
          transition: background .12s ease, color .12s ease; }
/* 왼쪽 액센트 바 — 평소엔 투명, 호버/현재에서 드러난다(자리는 항상 차지해 글자가 안 밀린다) */
.gr-node__row::before { content: ''; position: absolute; left: 2px; top: 6px; bottom: 6px;
          width: 3px; border-radius: 2px; background: transparent; transition: background .12s ease; }
.gr-node__row:hover { background: rgba(255,255,255,.14); color: #fff; }
.gr-node__row:hover::before { background: var(--c-primary-weak); }
.gr-node__row:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.gr-node.is-current > .gr-node__row { background: rgba(55,108,251,.42); color: #fff; font-weight: var(--fw-bold); }
.gr-node.is-current > .gr-node__row::before { background: #82a3ff; }
/* 지나온 단계 — 흐리게가 아니라 "체크된 상태"로 읽히게 한다(다시 눌러 되돌아갈 수 있다) */
.gr-node.is-done > .gr-node__row { color: #c4d6ef; }
.gr-node.is-done > .gr-node__row .gr-node__dot .icon { fill: #5fd08a; }
.gr-node__dot { flex: none; width: 16px; height: 16px; margin-top: 1px; display: grid; place-items: center; }
.gr-node__dot .icon { width: 14px; height: 14px; }
/* 클릭 가능하다는 힌트 — 트리 맨 위에 한 줄 */
.gr__hint { flex: none; padding: 0 16px 8px; font-size: var(--fs-12); color: #a9c3e6; }
.gr__exit { flex: none; margin: 8px 12px 14px; height: 34px; border-radius: var(--t-r-sm); cursor: pointer;
          border: 1px solid rgba(255,255,255,.22); background: transparent; color: #cfdcf0; font-size: var(--fs-13); }
.gr__exit:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---- 튜토리얼 블록 말미 보강(Task 2 엔진) ----
   예전에는 .gt-spot.is-hidden(display:none) 동안 딤을 그리는 주체가 사라져
   '보이지 않는 클릭 차단'이 되므로 .gt-layer--nospot 이 대신 딤을 칠했다.
   이제 딤은 .gt-mask 가 칠하고, 스포트라이트가 숨는 경우에도 마스크가
   화면 전체를 덮도록(0×0 박스 기준) 배치되므로 그 보조 규칙은 필요 없다. */

/* ※ 개요 화면(.gst)·그 하단 원형 내비(.gnav) 규칙은 2026-08 구조개편(A안)에서 지웠다 —
   유일한 사용처였던 js/24-view-guide-stage.js 가 없어졌다. 개요는 이제 실제 화면 위에
   뜨는 인트로 카드(.gintro, 파일 하단)가 대신한다. */

/* ============================================================
   가이드홈 — js/23-guide-home.js (Task 4 + 2026-07 리스타일 시안 적용)
   셸 밖에서 뜨는 시작 화면. page = #app 직접 렌더, overlay = body 고정 레이어.
   좌 .gh-panel(축에 따라 교체) + 우 .gh-side(레일 — 축마다 내용이 다르다: journey=
   Act 미니맵 / menu=대메뉴 목록).
   2026-08 구조개편(A안): 소개 화면(.gh-steps/.gh-intro)은 없앴다 — 카드 클릭이 곧
   체험 시작이고, 그 자리는 투어 인트로 카드(.gintro)/완료 카드(.gdone)가 대신한다.

   스코프 토큰 — 전역 tokens.css 의 --c- · --fs- · --r- 계열은 건드리지 않는다(파로스 실제
   화면이 실서비스 1:1 재현에 쓰는 값이라 바꾸면 재현이 깨진다). 튜토리얼 셸의 색·곡선·
   글자 크기는 tokens.css 맨 아래 **--t-* 블록**에 모여 있고, 아래 --gh-* 는 그 별칭이다.
     · 값을 바꿀 일이 있으면 tokens.css 의 --t-* 만 고친다(여기는 손대지 않는다).
     · --gh-* 를 남겨 둔 이유는 이 파일의 기존 151개 규칙을 한꺼번에 치환하지 않기
       위해서다(점진 이관 — 새로 쓰는 규칙은 --t-* 를 직접 쓴다).
   ============================================================ */
.gh-host {
  --gh-navy: var(--t-text); --gh-blue: var(--t-blue);
  --gh-muted: var(--t-text-3); --gh-text-2: #445168;
  /* 안내문·카드 메타처럼 읽혀야 하는 보조 글자 — --gh-muted 보다 한 단계 진하다 */
  --gh-sub: var(--t-text-2);
  --gh-line: var(--t-line-strong); --gh-border: var(--t-line); --gh-bg: var(--t-bg);
  /* 업무 여정·업무별 메뉴의 박스 곡선은 전부 이 값 하나로 — 컬럼과 메뉴카드가 따로 놀아
     두 축을 나란히 두면 통일감이 없었다. hover 배경도 Act 색이 아니라 한 가지 파랑. */
  --gh-r: var(--t-r); --gh-hover: var(--t-hover);
  /* 컬럼 안 빈 영역(카드가 안 채운 아래쪽) — 페이지 배경과 같은 색이면 박스 안인지
     밖인지 구분이 안 돼 컬럼이 그냥 끝난 것처럼 보인다. 한 톤만 진하게. */
  --gh-fill: var(--t-fill);
  --gh-tag-blue-bg: var(--t-tag-blue-bg); --gh-tag-blue-fg: var(--t-tag-blue-fg);
  --gh-tag-green-bg: var(--t-tag-green-bg); --gh-tag-green-fg: var(--t-tag-green-fg);
  --gh-dim: var(--t-text-dim);   /* 비활성 탭 라벨 · 카드 화살표 등 흐린 회청색 */
  /* 상단 소개 밴드(.gh-band) — 밝은 파랑 그라디언트(Figma 3:415 시안, 2026-08-11) */
  --gh-band-1: var(--t-blue-light); --gh-band-2: var(--t-blue-strong);
  --gh-band-hi: var(--t-yellow);                       /* 헤드라인 '업무여정' 노랑 */
  /* 특장점 카드(.gh-feat) 아이콘 원형 그라디언트 */
  --gh-feat-ic-1: #4B7BFF; --gh-feat-ic-2: #2F63EA;
  /* 소개부 전용 축소 텍스트 — --fs-* 스케일(12/13/14…) 사이 값이라 토큰이 없다 */
  --gh-fs-sm: 13.5px; --gh-fs-xs: 12.5px;
  display: flex; flex-direction: column; min-height: 100vh;
  /* 페이지 바탕은 회색, 축 탭 줄(.gh-hero)만 흰색 — 흰 띠가 밴드와 콘텐츠 사이에서
     탭 줄을 도드라지게 한다(2026-08-12 반전 시안). */
  background: var(--gh-bg); color: var(--gh-navy);
}
.gh-host:focus { outline: none; }
/* z-index 는 .gt-layer 와 같은 1100 — 토스트(--z-toast:1200)는 그대로 위에 뜬다 */
.gh-host--overlay { position: fixed; inset: 0; z-index: 1100; overflow: auto; }

/* ---- 상단(네이비) — 브랜드 + 탭 스위처 + 액션 ---- */
.gh-top { flex: none; background: var(--gh-navy); }
.gh-top__inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-8); height: 50px;
          display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.gh-top__brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: none; }
.gh-top__logo { height: 20px; width: auto; }
.gh-top__name { font-size: var(--fs-14); font-weight: var(--fw-bold); color: #93B4F5;
          padding-left: var(--sp-3); border-left: 1px solid #3A4A66; letter-spacing: .5px; }
.gh-top__acts { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* ※ .gh-top__back([처음 화면으로]) 규칙은 2026-08-11 에 지웠다 — 버튼 자체를 없앴다
   (overlay 메인과 page 메인이 같은 화면이라 눌러도 안 움직인 것처럼 보였다). */
.gh-top__demo { height: 32px; padding: 0 var(--sp-4); border-radius: var(--t-r-sm);
          border: 1px solid #fff; background: transparent;
          font-size: var(--fs-13); font-weight: var(--fw-bold); color: #fff; letter-spacing: .3px; }
.gh-top__demo:hover { background: rgba(255,255,255,.12); }
/* [파로스 홈페이지] — 주 액션이 아니라 부가 이동이라 테두리 없는 고스트로 둔다 */
.gh-top__site { height: 32px; padding: 0 var(--sp-3); border-radius: var(--t-r-sm);
          display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
          font-size: var(--fs-13); font-weight: var(--fw-bold); color: rgba(255,255,255,.82); letter-spacing: .3px; }
.gh-top__site:hover { background: rgba(255,255,255,.12); color: #fff; }
.gh-top__site-ico { width: 16px; height: 16px; fill: currentColor; }
.gh-top__close { width: 32px; height: 32px; display: grid; place-items: center;
          border-radius: var(--t-r-sm); color: rgba(255,255,255,.72); }
.gh-top__close:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---- 히어로(축 탭만) ----
   헤드라인은 위 네이비 밴드가 맡고, 안내 문구는 두지 않는다 →
   탭이 이 구역의 시각적 기준선이 된다(실서비스 화면과 같은 밑줄형). */
/* 축 탭 줄 = 화면 폭 100% 흰 띠(페이지 바탕은 회색). 정렬은 __inner 가 1440 으로.
   밑줄(구분선)은 흰 띠와 같이 전폭이어야 한다 — .gh-switch 에 주면 1440 에서 끊겨
   1440 초과 화면에서 선이 가운데만 그어진 것처럼 보인다. */
.gh-hero { flex: none; width: 100%; background: #fff;
          border-bottom: 1px solid var(--gh-border); }
.gh-hero__inner { max-width: 1440px; margin: 0 auto; padding: var(--sp-2) var(--sp-8) 0; }

/* ---- 축 탭(밑줄형) ---- */
/* 구분선은 위 .gh-hero 가 전폭으로 긋는다. 여기선 활성 탭 밑줄(::after)만. */
.gh-switch { display: flex; align-items: center; gap: 28px; }
.gh-switch__btn { position: relative; height: 46px; padding: 0 2px; background: none; border: 0;
          font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--gh-dim);
          transition: color .12s; cursor: pointer; }
.gh-switch__btn:hover { color: var(--gh-navy); }
.gh-switch__btn.is-on { color: var(--gh-navy); font-weight: var(--fw-bold); }
.gh-switch__btn.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
          height: 2px; background: var(--gh-navy); }

/* ---- 본문 2단 ---- */
/* 위 여백 12px — 축 탭(1층)과 대메뉴 탭(2층) 사이가 24px 이면 층이 흩어져 보인다 */
.gh-main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto;
          padding: 12px var(--sp-8) var(--sp-10); display: flex; align-items: flex-start; gap: var(--sp-6); }
.gh-panel { flex: 1; min-width: 0; }

/* ※ 우측 모듈 레일(.gh-side*)은 대메뉴 한 줄 탭(.gh-mtabs)이 대신하므로 지웠다. */
/* ---- 업무 여정 = 칸반 보드(.gh-board) — js/23-guide-home.js panelJourney ----
   Act 5개를 가로 컬럼으로 세워 전체 흐름을 한눈에 본다. 예전 세로 타임라인(.gh-acts)과
   우측 Act 미니맵(.gh-mini)은 이 보드가 대신하므로 삭제했다. */
.gh-journey { display: flex; flex-direction: column; gap: var(--sp-4); }
/* 업무별 메뉴의 필터 띠(.gh-mfilter)와 같은 디자인 — 축을 오가도 같은 자리에 같은 띠 */
.gh-boardhead { display: flex; align-items: center; gap: var(--sp-4);
          padding: 8px 10px; background: var(--gh-fill); border-radius: var(--gh-r); }
.gh-boardhead__lead { flex: 1; min-width: 0; padding-left: 4px; font-size: var(--fs-13);
          font-weight: var(--fw-medium); color: var(--gh-sub); }
/* 검색창은 두 축이 같은 모양을 쓴다 — 업무 여정(.gh-search, 헤드 우측 고정폭)과
   업무별 메뉴(.gh-msearch, 필터 바 오른쪽 끝)는 붙는 자리만 다르다. 규칙을 한 벌로 두고
   자리 차이만 아래에서 덧쓴다(예전엔 같은 5개 규칙이 두 벌이라 한쪽만 고쳐지곤 했다).
   높이 32px 은 상태 필터 버튼과 맞춘 값. */
.gh-search, .gh-msearch { position: relative; }
.gh-search { flex: none; width: 240px; }
.gh-msearch { margin-left: auto; }
.gh-search__ic, .gh-msearch__ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
          width: 15px; height: 15px; fill: var(--gh-muted); pointer-events: none; }
.gh-search__input, .gh-msearch__input { height: 32px; padding: 0 12px 0 31px; border-radius: var(--t-r);
          border: 1px solid var(--gh-border); background: #fff; font-size: var(--fs-13); color: var(--gh-navy); }
.gh-search__input { width: 100%; }
.gh-msearch__input { width: 240px; }
.gh-search__input::placeholder, .gh-msearch__input::placeholder { color: #A9B4C5; }
.gh-search__input:focus, .gh-msearch__input:focus { outline: none; border-color: var(--gh-blue);
          box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* 컬럼마다 독립된 박스 — 사이는 16px 간격으로만 띄운다(전체를 감싸는 박스는 두지 않는다) */
.gh-board { display: flex; align-items: stretch; gap: 16px; }   /* 컬럼 높이를 가장 긴 칸에 맞춘다 */
.gh-col { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column;
          background: #fff; border: 1px solid var(--gh-border); border-radius: var(--gh-r); }
/* 컬럼 사이 단계 표시 — 원형 배경에 흰 화살표(다음 단계로 넘어가는 느낌) */
.gh-col + .gh-col::before {
          content: ''; position: absolute; left: -18px; top: 17px; z-index: 2;
          width: 17px; height: 17px; border-radius: 50%; background-color: var(--col, var(--gh-line));
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
          background-repeat: no-repeat; background-position: center; background-size: 15px 15px; }
.gh-col__head { display: flex; align-items: center; gap: 6px; padding: 13px 14px;
          background: var(--colbg, var(--gh-bg)); border-bottom: 1px solid var(--gh-border);
          border-radius: var(--gh-r) var(--gh-r) 0 0; }
/* 번호는 칩이 아니라 '1.' 같은 글자 — 색은 Act 색이 아니라 제목과 같은 검정으로 맞춘다 */
.gh-col__no { flex: none; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--gh-navy); }
/* Act 색 — 파랑 한 톤으로 창업(연함) → 결산(진함) 순서대로 짙어진다.
   단계가 뒤로 갈수록 무게가 실리는 흐름을 색으로만 표현하고, 컬럼 상단 띠는 두지 않는다.
   --col 은 컬럼 안에서 상속되어 카드 상태 점(.gh-bcard__tag::before)까지 같은 색을 쓴다. */
.gh-col--a1 { --col: #6796EE; --colbg: #F3F7FE; }
.gh-col--a2 { --col: #4179E5; --colbg: #EEF4FD; }
.gh-col--a3 { --col: #2A5FCC; --colbg: #E8F0FC; }
.gh-col--a4 { --col: #1C48A5; --colbg: #E2EBFA; }
.gh-col--a5 { --col: #123A7C; --colbg: #DCE6F8; }
.gh-col__title { flex: none; min-width: 0; font-size: var(--fs-16); font-weight: var(--fw-bold);
          color: var(--gh-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-col__cnt { flex: none; margin-right: auto; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--gh-blue); }
/* 카드는 테두리 없는 '행' — 컬럼 안에서 가로 구분선으로만 나눈다(시안). 카드마다
   테두리를 두르면 컬럼 테두리와 겹쳐 선이 두 겹으로 보이고 폭도 그만큼 줄어든다. */
/* 카드가 없는 아래쪽은 회색으로 남는다 — 카드(흰색)가 채운 만큼만 흰 영역이 된다 */
/* 아래 두 모서리는 컬럼 박스와 같은 곡선으로 깎고 그 밖으로 나가는 칠은 잘라낸다 —
   카드 배경·회색 여백(.gh-col__fill)이 둥근 테두리 밖으로 삐져나오던 문제.
   (자르기는 .gh-col 이 아니라 여기서 한다 — .gh-col 은 박스 밖에 단계 화살표를 그린다) */
.gh-col__list { flex: 1; display: flex; flex-direction: column; background: var(--gh-fill);
          border-radius: 0 0 var(--gh-r) var(--gh-r); overflow: hidden; }
.gh-col__empty, .gh-col__none { padding: 16px 14px; text-align: center; font-size: var(--fs-12); color: #A9B4C5; }
.gh-col__none { display: none; }
.gh-col__none.is-on { display: block; }

/* 구분선은 카드마다 아래쪽에 — 마지막 카드 밑에도 선이 남아 흰 영역과 회색 여백이
   깔끔하게 끊긴다(위쪽 border 로 그리면 마지막 카드 아래가 선 없이 끝난다). */
/* 구분선은 카드마다 위쪽에 두고, **보이는 첫 카드**에서만 뺀다(.is-firstvis 는 JS 가 붙인다).
   `+` 인접 선택자로 그리면 검색으로 숨긴 카드(display:none)도 인접 계산에 끼어,
   첫 카드가 숨을 때 두 번째 카드가 헤더 밑줄과 겹쳐 2px 이중선이 된다. */
.gh-bcard { padding: 14px; background: #fff; cursor: pointer; transition: background .12s;
          border-top: 1px solid var(--gh-border); }
.gh-bcard.is-firstvis { border-top: 0; }
/* 카드 아래 남는 회색 여백 — 높이가 있을 때만 위쪽에 1px 선을 그린다(높이가 0이면 아무것도
   칠하지 않아 박스 바닥선과 겹쳐 이중선이 되지 않는다). */
.gh-col__fill { flex: 1; background: linear-gradient(var(--gh-border) 0 1px, transparent 1px); }
/* 이 문구는 보이는 카드가 0일 때만 뜬다 = 항상 헤더 바로 밑 → 위 선을 그으면 헤더의
   밑줄과 겹쳐 이중선이 된다(그래서 선을 두지 않는다). */
/* hover = 배경색만. 파란 테두리(메뉴 카드 방식)도 해봤지만, 컬럼 안 카드는 맞붙은 행이라
   테두리가 위아래 카드와 겹쳐 지저분해 보였다. */
.gh-bcard:hover { background: var(--gh-hover); }
.gh-bcard:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: -2px; }
.gh-bcard.is-hidden { display: none; }
/* 제목은 3줄 자리를 항상 차지한다 — 카드 높이를 전부 같게 맞추기 위해서다.
   3줄을 넘기면 말줄임(줄 수를 늘리면 짧은 카드의 빈 공간이 그만큼 커진다). */
.gh-bcard__body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
          overflow: hidden; height: calc(1.5em * 3); margin-top: 7px;
          font-size: 15px; font-weight: var(--fw-medium); line-height: 1.5;
          color: #0D1B33; word-break: keep-all; }
/* 첫 줄 — 왼쪽 번호, 오른쪽 소요시간 */
.gh-bcard__top { display: flex; align-items: center; gap: 6px; }
/* 카드 번호는 배경 없이 글자만 — 색은 Act 색(--col)이 아니라 한 가지 파랑으로 고정한다.
   컬럼마다 번호 짙기가 달라지면 같은 카드가 축에 따라 다르게 보인다(업무별 메뉴와도 어긋남). */
.gh-bcard__no { flex: none; font-size: 15px; font-weight: var(--fw-bold); color: var(--gh-blue); }
.gh-bcard__meta { flex: none; margin-left: auto; display: flex; align-items: center; gap: 5px;
          font-size: var(--fs-12); }
.gh-bcard__tag { margin-right: 3px; color: var(--gh-muted); font-weight: var(--fw-medium); }
.gh-bcard__ic { flex: none; width: 13px; height: 13px; fill: none; color: var(--gh-blue); }
.gh-bcard__min { color: var(--gh-sub); font-weight: var(--fw-medium); }
.gh-bcard.is-soon { cursor: default; background: #FBFCFE; }
.gh-bcard.is-soon:hover { background: #FBFCFE; }
.gh-bcard.is-soon .gh-bcard__body { color: #9AA6B8; font-weight: var(--fw-medium); }
.gh-bcard.is-soon .gh-bcard__ic,
.gh-bcard.is-soon .gh-bcard__no { color: #C3CCDA; }

/* ※ 시나리오 카드 목록(.gh-cards/.gh-card*, 색상 변형 20여 종)은 칸반 보드(.gh-bcard)와
   메뉴 카드(.gh-mcard)로 대체되며 지웠다 — js 가 더 이상 만들지 않는다(실측 0회). */

/* ---- 업무별 메뉴 ----
   대메뉴는 실서비스 GNB 처럼 한 줄 탭(.gh-mtabs)으로, 중메뉴(묶음)는 제목줄+구분선으로
   크게 나누고, 리프는 여러 칸 그리드로 깐다(한 줄에 하나씩 길게 늘이면 라벨과 태그가
   멀어져 읽기 어렵다). 예전 우측 모듈 레일(.gh-side)은 이 탭이 대신한다. */
/* 16개(시작하기 + 대메뉴 15)가 1440 기준 한 줄에 들어가도록 여백을 좁게 잡았다.
   그보다 좁은 화면에서는 가로 스크롤로 넘긴다(스크롤바는 숨김). */
/* 2층 = 맨몸 텍스트 탭(박스 없음) + 활성 파란 밑줄. 컨테이너에 가두는 안(알약·폴더·카드)을
   거쳐 왔는데 전부 과했다 — 층 구분은 3층 회색 띠가 담당하고, 탭 줄은 비워 둔다.
   1층 밑줄탭과는 크기(18/14px)·바탕(구색 경계선 유무)으로 급이 갈린다. */
.gh-mtabs { display: flex; align-items: stretch; gap: 1px; margin-bottom: 10px;
          overflow-x: auto; scrollbar-width: none; }
.gh-mtabs::-webkit-scrollbar { display: none; }
/* 라벨 15px — 3층(13px)보다 커야 층이 읽힌다 */
.gh-mtab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
          height: 40px; padding: 0 8px; background: none; border: 0;
          font-size: 15px; font-weight: var(--fw-medium); color: var(--gh-sub);
          white-space: nowrap; cursor: pointer; transition: color .12s; }
.gh-mtab:hover { color: var(--gh-navy); }
.gh-mtab.is-on { color: var(--gh-blue); font-weight: var(--fw-bold); }   /* 밑줄과 같은 파랑 */
.gh-mtab.is-on::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 0;
          height: 2px; border-radius: 1px; background: var(--gh-blue); }
/* 체험할 시나리오가 0인 대메뉴 — 숫자를 안 싣는 대신 라벨을 흐리게 해 눌러도 빈 걸 알린다 */
.gh-mtab.is-empty { color: #C1CAD8; }

.gh-tree__empty { padding: var(--sp-10) 0; text-align: center; font-size: var(--fs-14); color: var(--gh-muted); }
/* 가상 모듈(시작하기) 안내 — 카드 목록 위 한 줄 */
.gh-tree__lead { padding: 12px 14px; font-size: var(--fs-13);
          font-weight: var(--fw-regular); line-height: 1.7; color: var(--gh-sub); }
/* 시작하기(대메뉴 없는 시나리오) — 업무 여정 보드와 같은 카드로 깐다 */
.gh-startlist { --col: var(--gh-blue); --colbg: var(--gh-tag-blue-bg);
          display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.gh-startlist .gh-bcard { border: 1px solid var(--gh-border); border-radius: var(--gh-r); }

/* ---- 업무별 메뉴 = 상태 필터 + 균일 카드(C안) ---- */
/* 3층 = 옅은 회색 띠(페이지 배경보다 한 톤 진한 --gh-fill). 맨몸 탭 줄과 카드 영역 사이를
   이 면 하나로 끊는다 — 선·박스 없이도 2/3층 경계가 생긴다.
   ※ 띠는 탭마다 하나 있어야 리듬이 유지된다 — 필터바가 없는 '시작하기' 탭에서는
     안내문(.gh-tree__lead)이 같은 띠가 된다. */
.gh-mfilter, .gh-tree__lead { margin-bottom: 16px;
          background: var(--gh-fill); border-radius: var(--gh-r); }
.gh-mfilter { display: flex; align-items: center; gap: 2px; padding: 8px 10px; }
.gh-mfilter__btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
          border-radius: var(--t-r-sm); border: 0; background: none;
          font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--gh-sub); cursor: pointer;
          transition: background .12s, color .12s; }
.gh-mfilter__btn:hover { background: #fff; color: var(--gh-navy); }   /* 회색 띠 위라 흰색이 대비가 산다 */
.gh-mfilter__btn.is-on { background: #fff; color: var(--gh-blue); font-weight: var(--fw-bold); }   /* hover 와 같은 흰색 */
.gh-mfilter__n { font-style: normal; font-weight: var(--fw-bold); }

.gh-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 10px; }
/* 묶음 헤더는 한 줄을 통째로 차지하고, 위에 가로선을 그어 앞 묶음과 끊는다 */
.gh-mgroup { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px;
          margin-top: 18px; padding-top: 16px; padding-bottom: 2px;
          border-top: 1px solid var(--gh-border); }
/* :first-child 는 'DOM 의 첫 자식'이라 필터로 앞 묶음을 숨기면 살아남은 헤더가
   위 여백(18+16px)과 구분선을 그대로 달고 나와 필터 바 밑에 선이 떠 있게 된다.
   JS 가 '보이는 첫 묶음'에 .is-firstvis 를 붙인다. */
.gh-mgroup.is-firstvis { margin-top: 0; padding-top: 0; border-top: 0; }
.gh-mgroup.is-hidden { display: none; }
.gh-mgroup__t { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--gh-navy); }
.gh-mgroup__n { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--gh-blue); }
.gh-mcard { padding: 14px; background: #fff; border: 1px solid var(--gh-border); border-radius: var(--gh-r);
          cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.gh-mcard:hover { border-color: var(--gh-blue); box-shadow: 0 4px 14px rgba(16,42,90,.07); }
.gh-mcard:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }
.gh-mcard.is-hidden { display: none; }
/* 묶음 라벨은 칩이 아니라 그냥 파란 글자 — 카드 안에 칩이 둘(묶음·상태)이면 산만하다 */
.gh-mcard__grp { display: block; font-size: var(--fs-13); font-weight: var(--fw-bold);
          color: var(--gh-tag-blue-fg); }
.gh-mcard__name { display: block; margin-top: 7px; font-size: 15px; font-weight: var(--fw-medium);
          line-height: 1.5; color: #0D1B33; word-break: keep-all; }
.gh-mcard__meta { display: flex; align-items: center; gap: 7px; margin-top: 10px;
          font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--gh-sub); }
.gh-mcard__tag { flex: none; height: 21px; padding: 0 9px; border-radius: var(--t-r-xs); display: inline-grid;
          place-items: center; font-size: 11px; font-weight: var(--fw-bold); }
.gh-mcard--guide .gh-mcard__tag { background: var(--gh-tag-blue-bg); color: var(--gh-tag-blue-fg); }
.gh-mcard--view  .gh-mcard__tag { background: var(--gh-tag-green-bg); color: var(--gh-tag-green-fg); }
.gh-mcard--soon  .gh-mcard__tag { background: var(--gh-bg); color: var(--gh-muted); }
.gh-mcard--na    .gh-mcard__tag { background: var(--gh-bg); color: #C1CAD8; }
.gh-mcard--na { background: #FBFCFE; cursor: default; }
.gh-mcard--na:hover { border-color: var(--gh-border); box-shadow: none; }
.gh-mcard--na .gh-mcard__name { color: #9AA6B8; font-weight: var(--fw-medium); }
.gh-mcard--na .gh-mcard__grp { color: #A9B4C5; }
.gh-mnone { display: none; padding: 40px 0; text-align: center; font-size: var(--fs-14); color: var(--gh-muted); }
.gh-mnone.is-on { display: block; }


/* ---- 하단 ---- */
.gh-foot { flex: none; width: 100%; background: #fff; }
.gh-foot__in { max-width: 1440px; margin: 0 auto;
          padding: 16px var(--sp-8) 22px; display: flex; align-items: center; gap: 16px;
          border-top: 1px solid var(--gh-border);
          font-size: var(--fs-12); color: var(--gh-muted); }
.gh-foot__note { margin-left: auto; }

/* ============================================================
   메인 상단 소개 밴드(.gh-band) · 하단 소개 섹션(.gh-more) — js/30-view-login.js
   2026-08 구조개편(A안): 별도 랜딩 페이지를 없애고 그 내용을 메인 1장에 접었다.
   page·overlay 두 모드 모두에 붙는다(어디서 열어도 같은 메인으로 읽히게).
   ============================================================ */
/* Figma 3:415 실측 — 높이 180, 좌→우 그라디언트. 일러스트가 위로 17px 삐져나가고
   아래로도 밴드보다 길어 위아래 모두 밴드에서 자른다(overflow hidden — 시안도 같은 방식).
   텍스트 세로 위치(36/75/130)는 padding-top + margin 으로 잰 값 그대로:
   배지 31h(6+19+6) → +8 → 제목 39h → +16 → 서브.
   높이는 fixed 가 아니라 min-height — 좁은 화면에서 제목이 두 줄이 되면 밴드가 늘어나야
   서브 문구가 overflow 에 잘리지 않는다(1300px 이상에선 어차피 한 줄이라 180 그대로). */
.gh-band { flex: none; position: relative; min-height: 180px; overflow: hidden;
          background: linear-gradient(90deg, var(--gh-band-1), var(--gh-band-2)); color: #fff; }
/* 폭은 메인의 다른 영역(.gh-main·.gh-banner·.gh-more__inner)과 같은 1440 */
.gh-band__inner { position: relative; max-width: 1440px; margin: 0 auto;
          padding: 38px var(--sp-8) 0; }
/* 일러스트가 absolute(흐름 밖)라 글줄은 일러스트를 만나도 줄바꿈되지 않는다 → 폭을 직접
   비워 둬야 한다. 410 = 일러스트 자리 417(right 37 + width 380) − 좌우 패딩 보정 32
   + 여백 25. 이게 없으면 1250px 밑에서 제목이 일러스트 뒤로 파고든다. */
.gh-band__txt { max-width: calc(100% - 410px); }
/* 배지 → 민글자(2026-08-12 사용자 튜닝) — 칩 배경·패딩 없이 20px 흰 글자 */
.gh-band__eyebrow { display: inline-flex; align-items: center;
          font-size: 20px; line-height: 1; font-weight: var(--fw-regular); color: #fff; }
.gh-band__title { margin-top: 8px; font-size: 32px; font-weight: var(--fw-bold);
          letter-spacing: -.6px; line-height: 39px; color: #fff;
          /* 좁은 화면에서 두 줄이 될 때 '만나/보세요' 처럼 어절 중간에서 끊기지 않게 */
          word-break: keep-all; }
.gh-band__title b { color: var(--gh-band-hi); font-weight: 800; }
.gh-band__sub { margin-top: 16px; font-size: 17px; font-weight: var(--fw-medium);
          line-height: 23.8px; color: #CEF1FF; }
/* 일러스트(원본 890×593, 3:2) — 우측 끝, 위로 17px 블리드. 시안(445px·-33px)보다
   한 뼘 작게·얕게 조정한 실사용 값(2026-08-12 사용자 튜닝). */
.gh-band__img { position: absolute; top: -17px; right: 37px; width: 380px; height: auto;
          pointer-events: none; }

/* 하단은 둘로 나뉜다 —
   ① 특장점 = 1440 폭 안의 둥근 파란 배너(.gh-banner)
   ② 바로가기·기능칩 + 고객센터 = 화면 폭 100% 흰 푸터(.gh-more, .gh-foot) */
.gh-banner { flex: none; width: 100%; max-width: 1440px; margin: 0 auto; padding: 26px var(--sp-8) 0; }
.gh-banner__inner { background: linear-gradient(135deg, #3B70DC 0%, #234F9F 100%);
          border-radius: var(--t-r-lg); padding: 20px 24px 22px; }
.gh-banner__head { font-size: var(--fs-16); font-weight: var(--fw-bold); color: #fff; margin-bottom: var(--sp-4); }
.gh-banner__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.gh-more { flex: none; width: 100%; margin-top: 26px; background: #fff; border-top: 1px solid var(--gh-line); }
/* 위·아래 여백은 같은 값으로 — 상단선 아래 22px, 칩 아래 22px */
.gh-more__inner { max-width: 1440px; margin: 0 auto; padding: 22px var(--sp-8); }
.gh-more__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
          margin-top: 0; padding-top: 0; }

.gh-feat { padding: 0 14px; }
.gh-feat + .gh-feat { border-left: 1px solid rgba(255,255,255,.2); }
.gh-feat__top { display: flex; align-items: center; gap: 10px; }
.gh-feat__ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex;
          align-items: center; justify-content: center; background: #fff; }
.gh-feat__icsvg { width: 16px; height: 16px; fill: #2A5FCC; color: #2A5FCC; }
.gh-feat__title { min-width: 0; display: block; font-size: 13.5px; font-weight: var(--fw-bold);
          line-height: 1.4; letter-spacing: -.2px; color: #fff; word-break: keep-all; }
.gh-feat__badge { display: inline-block; margin-top: 3px; font-style: normal; font-size: 10px;
          font-weight: var(--fw-bold); color: #234F9F; background: #fff;
          padding: 2px 7px; border-radius: var(--t-r-xs); }

.gh-quick__head { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--gh-muted); margin-bottom: 12px; }
.gh-quick__grid { display: flex; gap: 22px; }
.gh-qitem { display: inline-flex; align-items: center; gap: 8px; }
.gh-qitem:hover .gh-qitem__label { color: var(--gh-blue); }
.gh-qitem:hover .gh-qitem__arr { fill: var(--gh-blue); }
.gh-qitem__ic { flex: none; width: 30px; height: 30px; border-radius: var(--t-r); background: var(--gh-bg);
          display: inline-flex; align-items: center; justify-content: center; }
/* 아이콘만 파랑 — 라벨(네이비)·화살표(회색)는 그대로 둔다 */
.gh-qitem__svg { width: 16px; height: 16px; fill: var(--gh-blue); }
.gh-qitem__label { min-width: 0; font-size: var(--fs-13); font-weight: var(--fw-semibold);
          letter-spacing: -.2px; color: var(--gh-navy); white-space: nowrap; }
.gh-qitem__arr { flex: none; width: 13px; height: 13px; fill: var(--gh-muted); }
/* 칩은 5개 + 4개, 정확히 두 줄로 세운다 */
.gh-chips { display: grid; grid-template-columns: repeat(5, auto); gap: 8px; justify-content: start; }
.gh-chip { padding: 6px 12px; border-radius: 999px; background: var(--gh-bg); color: var(--gh-muted);
          font-size: 12.5px; line-height: 1; text-align: center; }
.gh-contact { display: flex; align-items: center; gap: 9px; }
.gh-contact__ic { flex: none; display: inline-flex; }
.gh-contact__svg { width: 22px; height: 22px; fill: var(--gh-muted); }
.gh-contact__txt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gh-muted); }
.gh-contact__txt span + span::before { content: '·'; margin-right: 8px; color: #C3CCDA; }
.gh-contact__txt b { color: var(--gh-navy); font-weight: var(--fw-bold); }

/* ============================================================
   투어 인트로 카드(.gintro) · 완료 카드(.gdone) — js/22-guide-core.js
   #overlay-root 의 모달이라 .gh-host 스코프 토큰을 못 쓴다 → 전역 토큰 사용.
   ============================================================ */
/* ---- 튜토리얼 버튼 (색·곡선·텍스트 한 곳에서) ----
   ※ 전역 .btn(components.css)은 **파로스 실제 화면이 쓰는 컴포넌트라 손대지 않는다.**
     아래는 튜토리얼 셸 안에서만 덮어쓰는 스코프 규칙이라 ERP 화면에 닿지 않는다.
     크기·곡선·글자는 --t-btn-* 토큰에서 오고, 값 변경은 tokens.css 한 곳에서 한다. */
.gh-host .btn, .gintro-card .btn, .gdone-card .btn, .gt-layer .btn {
  height: var(--t-btn-h); padding: 0 var(--t-btn-pad-x); border-radius: var(--t-btn-r);
  font-size: var(--t-btn-fs); font-weight: var(--t-btn-fw); letter-spacing: -.2px;
}
.gh-host .btn--sm, .gintro-card .btn--sm, .gdone-card .btn--sm, .gt-layer .btn--sm {
  height: var(--t-btn-h-sm); padding: 0 12px; font-size: var(--t-fs);
}
.gh-host .btn--primary, .gintro-card .btn--primary,
.gdone-card .btn--primary, .gt-layer .btn--primary { background: var(--t-btn-primary-bg); }
.gh-host .btn--primary:hover, .gintro-card .btn--primary:hover,
.gdone-card .btn--primary:hover, .gt-layer .btn--primary:hover { background: var(--t-btn-primary-bg-hover); }
.gh-host .btn--line, .gintro-card .btn--line, .gdone-card .btn--line, .gt-layer .btn--line {
  border-color: var(--t-line); color: var(--t-text-2); }
.gh-host .btn--line:hover, .gintro-card .btn--line:hover,
.gdone-card .btn--line:hover, .gt-layer .btn--line:hover { border-color: var(--t-blue); color: var(--t-blue); }

/* 카드 머리(두 카드 공통) — 메인 히어로 밴드와 같은 파랑 그라디언트 배너. 제목·메타가
   여기로 올라오고 Modal 기본 헤더는 흐름에서 떼어 X 만 배너 우상단에 흰색으로 띄운다.
   본문 스크롤은 배너 아래(__bd)에서만 일어나므로 X 는 항상 그라디언트 위에 있다. */
/* 한글은 어절(단어) 단위로만 줄바꿈 — 기본값은 글자 중간에서 끊어 '입력하/기 전에'처럼
   읽기 나쁘다. 투어 툴팁(.gt-tip)이 이미 쓰던 처방을 두 카드에도 똑같이 건다.
   overflow-wrap 은 끊을 데가 없는 긴 문자열(URL 등)의 탈출구다. */
.gintro-card, .gdone-card { position: relative; word-break: keep-all; overflow-wrap: break-word; }
.gintro-card .modal__head, .gdone-card .modal__head { position: absolute; top: 10px; right: 10px;
          z-index: 1; padding: 0; border-bottom: none; }
.gintro-card .modal__close .icon, .gdone-card .modal__close .icon { fill: rgba(255,255,255,.9); }
.gintro-card .modal__close:hover, .gdone-card .modal__close:hover { background: rgba(255,255,255,.18); }
.gintro-card .modal__body, .gdone-card .modal__body { padding: 0; }
/* 배너 색은 토큰에서 온다 — 예전엔 오버레이라 토큰이 안 닿아 값을 직접 박았다.
   메인 밴드는 그라디언트(--t-grad-hero), 좁은 팝업 카드는 단색(--t-card-hero)으로 나눴다. */
.gcard__hero { padding: 22px 24px 20px; background: var(--t-card-hero); }
/* 완료 카드 배너 — 튜토리얼 상단 바와 같은 남색. 시작=파랑 그라디언트 / 마침=남색 */
.gcard__hero--done { background: var(--t-navy); }
.gcard__eyebrow { font-size: var(--t-fs-sm); font-weight: var(--fw-bold); letter-spacing: .5px;
          color: rgba(255,255,255,.75); }
.gcard__headline { margin-top: 6px; padding-right: 28px; font-size: var(--t-fs-heading);
          font-weight: var(--fw-bold); line-height: 1.4; color: #fff; word-break: keep-all; }
.gcard__chips { display: flex; gap: 6px; margin-top: 12px; }
.gcard__chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
          border-radius: 999px; background: rgba(255,255,255,.16);
          font-size: var(--fs-12); font-weight: var(--fw-semibold); color: #fff; }
/* 배너 아래 본문 — 길어질 수 있어 여기만 스크롤(푸터 버튼·배너는 항상 보인다) */
.gintro__bd { padding: 18px 24px 20px; max-height: 52vh; overflow-y: auto; }
.gdone__bd { padding: 4px 24px 16px; max-height: 52vh; overflow-y: auto; }

.gintro__title { font-size: var(--t-fs-subhead); font-weight: var(--fw-bold); color: var(--t-text); line-height: 1.45; }
/* 제목 바로 아래 리드 문단 — 그 절의 요약이라 본문(--t-text-body)보다 한 단계 진하게.
   굵기는 400 그대로라 18px/700 제목과는 구분된다. 아래 불릿(.gintro__lead)은
   부연 설명이므로 --t-text-body 유지 — 리드와 부연의 위계를 색으로 나눈다. */
.gintro__desc { margin-top: 8px; font-size: var(--t-fs-body); line-height: var(--t-lh-body); color: var(--t-text); }
.gintro__title + .gintro__lead, .gintro__desc + .gintro__lead { margin-top: 14px; }
.gintro__lead { display: grid; gap: var(--sp-2); }
.gintro__lead li { position: relative; padding-left: 14px; font-size: var(--t-fs-body);
          line-height: var(--t-lh-body); color: var(--t-text-body); }
.gintro__lead li::before { content: ''; position: absolute; left: 3px; top: 11px; width: 4px; height: 4px;
          border-radius: 50%; background: var(--c-primary); }
.gintro__menu { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px;
          padding: 10px 14px; border-radius: var(--t-r); background: var(--c-bg-soft); }
.gintro__menulabel { font-size: var(--t-fs-sm); font-weight: var(--fw-bold); color: var(--t-text-3); }
.gintro__path { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.gintro__path .icon { width: 14px; height: 14px; fill: var(--t-text-3); }
.gintro__crumb { font-size: var(--t-fs); font-weight: var(--fw-medium); color: var(--t-text); }
/* 본문 안 소제목 — 라벨 크기(12px·연회색)로 두니 제목으로 안 읽혔다 → 15px 남색.
   아래 회색 선은 앞 문단과 이 절을 끊는 역할(선이 없으면 어디서 새 내용이 시작하는지
   안 보였다). 위 여백을 크게, 선 아래는 좁게 둬 선이 제목에 붙어 보이게 한다. */
.gintro__flowhead { margin-top: 24px; margin-bottom: 12px; padding-bottom: 8px;
          border-bottom: 1px solid var(--t-line);
          font-size: var(--t-fs-lg); font-weight: var(--fw-bold); color: var(--c-brand); }
.gintro__flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gintro__step { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
          border-radius: 999px; background: #eef3ff; }
/* line-height 1 필수 — 본문 행간(--t-lh-body 1.75)을 물려받으면 글자 상자 높이가
   19.25px 로 원(18px)보다 커져서 숫자가 아래로 밀린다(가운데 안 맞아 보이던 원인). */
.gintro__stepno { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
          background: var(--c-primary); color: #fff; font-size: var(--t-fs-xs);
          font-weight: var(--fw-bold); line-height: 1; }
.gintro__steplabel { font-size: var(--t-fs); color: var(--c-brand); font-weight: var(--fw-semibold); }
.gintro__arrow { display: inline-flex; }
.gintro__arrow .icon { width: 14px; height: 14px; fill: var(--t-text-3); }
/* 알아두기 — 구 개요 화면의 .gst__notes 를 카드 문맥으로 옮긴 것 */
.gintro__noteshead { margin-top: 24px; margin-bottom: 12px; padding-bottom: 8px;
          border-bottom: 1px solid var(--t-line);
          font-size: var(--t-fs-lg); font-weight: var(--fw-bold); color: var(--c-brand); }
.gintro__notes { display: grid; gap: var(--sp-2); }
.gintro__notes li { position: relative; padding-left: 14px; font-size: var(--t-fs);
          line-height: 1.7; color: var(--t-text-2); }
.gintro__notes li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 4px; height: 4px;
          border-radius: 50%; background: var(--c-primary-weak); }
.gintro-card .modal__foot { display: flex; align-items: center; }

/* 완료 카드 머리 안 내용 — 그라디언트 위라 체크는 흰 원, 글자는 흰색 계열 */
.gdone__top { display: flex; align-items: center; gap: 12px; }
.gdone__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center;
          border-radius: 50%; background: #fff; }
.gdone__icon .icon { width: 24px; height: 24px; fill: var(--t-blue-strong); }
.gdone__head { font-size: var(--t-fs-heading); font-weight: var(--fw-bold); color: #fff; }
.gdone__name { margin-top: 4px; font-size: var(--t-fs); color: rgba(255,255,255,.85); }
.gdone__faqhead { margin-top: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--c-bg-cool);
          font-size: var(--t-fs-sm); font-weight: var(--fw-bold); color: var(--t-text-3); }
/* 맺음말 — FAQ 뒤(FAQ 가 없으면 배너 바로 아래)에 한 줄. 마지막 FAQ 항목이 이미 아래
   구분선을 갖고 있어 여기엔 선을 두지 않는다(두 줄로 겹쳐 보인다). */
.gdone__next { margin-top: 14px; font-size: var(--t-fs); color: var(--t-text-2); }
.gdone__next:first-child { margin-top: 10px; }
.gdone__faq { display: grid; }
.gdone__faqitem { border-bottom: 1px solid var(--c-bg-cool); }
.gdone__faqq { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px;
          background: none; border: 0; text-align: left; font-size: var(--t-fs-md); color: var(--t-text); cursor: pointer; }
.gdone__faqq:hover { color: var(--c-primary); }
.gdone__faqq span { flex: 1; min-width: 0; line-height: 1.6; }
.gdone__faqq .icon { flex: none; width: 16px; height: 16px; fill: var(--t-text-3); transition: transform .18s ease; }
.gdone__faqitem.is-open .gdone__faqq { color: var(--c-primary); font-weight: var(--fw-bold); }
.gdone__faqitem.is-open .gdone__faqq .icon { transform: rotate(180deg); fill: var(--c-primary); }
.gdone__faqa { display: none; padding: 0 4px 14px; font-size: var(--t-fs-md); line-height: var(--t-lh-body); color: var(--t-text-body); }
.gdone__faqitem.is-open .gdone__faqa { display: block; }
.gdone__faqa p { margin: 0 0 8px; line-height: var(--t-lh-body); white-space: pre-wrap;
          word-break: keep-all; overflow-wrap: break-word; }
.gdone__faqa p:last-of-type { margin-bottom: 0; }
.gdone__faqlink { display: flex; align-items: center; gap: 6px; padding: 12px 4px; font-size: var(--t-fs-md); color: var(--t-text); }
.gdone__faqlink:hover { color: var(--c-primary); }
.gdone__faqlink .icon { width: 14px; height: 14px; fill: var(--t-text-3); }
.gdone__faqsrc { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px;
          font-size: var(--fs-12); color: var(--c-primary); }
.gdone__faqsrc:hover { text-decoration: underline; }
.gdone__faqsrc .icon { width: 14px; height: 14px; fill: var(--c-primary); }

/* ============================================================
   연말정산 신규 2화면 — 국세청 간소화자료입력(YA-01-510, .ye-510) /
   근로소득원천징수영수증(YA-01-200, .ye-200). 기존 .ye-* 스코프를 그대로 잇는다.
   ============================================================ */

/* ---- 좌/우 사이 접기핸들 ---- */
.ye-handlewrap { flex: none; display: flex; align-items: center; }
.ye-handle { width: 14px; height: 56px; padding: 0; border: 1px solid var(--c-bg-cool); border-radius: 4px;
             background: #f4f6f9; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ye-handle:hover { border-color: var(--c-primary); background: #eef4ff; }
.ye-handle .icon { width: 10px; height: 10px; fill: #6b7785; }
.ye-handle:hover .icon { fill: var(--c-primary); }

/* ---- 좌측 패널 변형 ---- */
.ye-left--510 { width: 372px; }
.ye-left--200 { width: 320px; }
.ye-yrrow { display: flex; align-items: center; margin-bottom: 10px; }
.ye-empgrid thead th { white-space: normal; line-height: 14px; }
.ye-tips { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; padding: 8px 10px;
           background: #f3f6fc; border: 1px solid #e0e8f5; border-radius: 6px;
           font-size: 12.5px; color: #3a4a63; line-height: 1.5; }
.ye-tips .icon { width: 14px; height: 14px; fill: #5b86d6; flex: none; margin-top: 2px; }

/* ---- 검색바 보조(영수증) ---- */
.ye-srch__pair { display: inline-flex; align-items: center; gap: 6px; }
.ye-inp--srch { width: 200px; }

/* ---- 합계바: 스크롤 영역과 분리해 그리드 박스 하단 고정 ---- */
.ye-sumbox { border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow-x: auto;
             display: flex; flex-direction: column; }
.ye-sumbox__scroll { overflow-y: auto; }
.ye-sumbox__foot { flex: none; border-top: 1px solid #d8dde5; }
.ye-sumfoot { width: 100%; table-layout: fixed; }
.ye-sumfoot th, .ye-sumfoot td { background: #f1f2f5; font-weight: 700; color: #333; }
.ye-sumfoot th { text-align: center; }

/* ---- 간소화: 항목 선택 칩 14개 ---- */
.ye-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 10px; }
.ye-chip { height: 30px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px;
           background: #fff; font-size: 12.5px; color: #555; cursor: pointer; }
.ye-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.ye-chip.is-active { border-color: var(--c-brand); background: #eef4ff; color: var(--c-brand); font-weight: 700; }
.ye-insgrid thead th { position: static; }   /* 주피보험자 2단 그룹헤더 */

/* ---- 영수증: 탭 9개 ---- */
.ye-tabs--many { flex-wrap: wrap; row-gap: 4px; }
.ye-tabs--many .ye-tab { height: 32px; padding: 0 12px; font-size: 13px; }

/* ---- 영수증: 신고서식 본문 ---- */
.ye-rchead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ye-rchead__lab { font-size: 12px; color: #666; }
.ye-rchead__val { font-size: 12.5px; color: #222; border: 1px solid var(--c-bg-cool); border-radius: 4px;
                  padding: 2px 10px; background: #f7f8fa; }
.ye-rctitle { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 4px; }
.ye-rctitle strong { font-size: 17px; font-weight: 700; color: #222; letter-spacing: 1px; }
.ye-rctitle strong.is-off { color: #9aa3ae; font-weight: 600; }
.ye-rctitle__sep { color: #c3cad4; }
.ye-rctitle__sub { text-align: center; font-size: 12px; color: #666; margin: 0 0 12px; }
.ye-rctitle--form { justify-content: flex-start; gap: 8px; padding: 0 0 8px;
                    border-bottom: 2px solid var(--c-brand); margin-bottom: 12px; }
.ye-rctitle--form strong { font-size: 15px; color: var(--c-brand); letter-spacing: 0; }
.ye-rctitle__sub2 { font-size: 12.5px; color: #666; }
.ye-rcsect__t { font-size: 13.5px; font-weight: 700; color: var(--c-brand); margin: 16px 0 6px; }
.ye-rcsect__t2 { font-size: 13px; font-weight: 700; color: #3a4a63; margin: 14px 0 6px; }
.ye-rcnote { font-size: 12px; color: #6b7785; line-height: 1.6; margin: 6px 0 0; }
.ye-rcinfo { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ye-rcinfo th, .ye-rcinfo td { border: 1px solid #dfe3e8; font-size: 12.5px; padding: 5px 10px;
                               line-height: 18px; color: #333; }
.ye-rcinfo th { width: 190px; background: #f7f8fa; font-weight: 600; color: #444; text-align: left; }
.ye-rcinfo td { background: #fff; }
.ye-rccalc th { width: 58%; }
.ye-rcgrid thead th, .ye-rctax thead th { position: static; }
.ye-rcgrid th.ye-rcrow, .ye-rctax th.ye-rcrow { text-align: left; background: #fafbfc; font-weight: 600; color: #444; }
.ye-rctax td.is-r { text-align: right; }

/* ---- 사원 그리드 체크박스 칼럼(라이브 실측: 헤더 전체선택 체크박스 포함) ----
   .po-grid 는 th/td 에 overflow:hidden + text-overflow:ellipsis 를 걸어 두므로
   체크박스 칼럼만 예외 처리한다(안 하면 좁은 칸에서 체크박스가 '...' 로 잘린다). */
.ye-empgrid th.ye-grid__chk, .ye-empgrid td.ye-grid__chk {
          width: 36px; min-width: 36px; padding: 0; text-align: center;
          overflow: visible; text-overflow: clip; white-space: nowrap; }
.ye-empgrid th.ye-grid__chk input, .ye-empgrid td.ye-grid__chk input { vertical-align: middle; margin: 0; cursor: pointer; }

/* ---- YA-01-200 탭바는 밑줄형 ----
   라이브 캡처 = 밑줄형(active: 파란 밑줄 + 굵은 글씨). 스펙 클래스도 `contents-tab.ya-01-200` 로
   square-tab 이 없다. 반면 간소화(YA-01-510)는 square-tab 이 있어 네모탭이 맞다 —
   두 화면의 탭 스타일은 실제로 다르므로 통일하지 않는다. */
.ye-tabs--line { gap: 4px; align-items: flex-end; }
.ye-tabs--line .ye-tab { height: 38px; padding: 0 14px; border: 0; border-radius: 0; background: none;
          font-size: 14px; font-weight: 600; color: #8a93a0; border-bottom: 2px solid transparent; }
.ye-tabs--line .ye-tab:hover { background: none; color: var(--c-primary); }
.ye-tabs--line .ye-tab.is-active { background: none; color: var(--c-brand); font-weight: 700;
          border: 0; border-bottom: 2px solid var(--c-brand); position: static; top: auto; }

/* 간소화 좌측 상단 한 줄(귀속연도 + 전체 사원 불러오기 + 삭제) — live-ya510b.jpg */
.ye-yrrow { gap: 8px; flex-wrap: nowrap; }
.ye-yrrow .ye-srch__item { gap: 6px; flex: none; }
.ye-yrrow .po-tbtn { flex: none; padding: 0 10px; white-space: nowrap; }

/* ============================================================
   세금신고 > 지방세 신고 > 지방소득세특별징수신고서 (.lit) — 실측 local-income-tax-live.jpg
   조회바(귀속/지급기간) + 납부정보행(납부시기·신고일자·당초납기·납부지연일수) +
   탭(납부서/명세서)+버튼 6종 한 줄 + 납부서 그리드(13행+합계, 과세표준 x 10% 자동계산) +
   환급조정 5단계 + 납부지연가산세/납부총금액. 그리드는 "운영 공통 그리드 표준"
   (행30px·헤더14px·700·#444·bg#f1f2f5·padding 6px 10px·보더 #e4e4e4) 정합.
   ============================================================ */
.lit { padding: 0; display: flex; flex-direction: column; }
.lit-host { flex: 1; min-height: 0; }

/* ── 조회바(귀속기간/지급기간) — 검색조건 상하선 규약 66px + 상하 16px ── */
.lit-filter { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-height: 56px; border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); padding: 12px 4px; margin-bottom: 12px; }
.lit-fitem { display: flex; align-items: center; gap: 10px; }
.lit-flab { font-size: var(--fs-14); color: #8a8f99; white-space: nowrap; }
.lit-tilde { color: #aab0ba; }
.lit-datebox { position: relative; display: inline-flex; align-items: center; }
.lit-datebox input { height: 34px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 34px 0 12px; font-size: var(--fs-14); color: #333; background: #fff; }
.lit-cal { position: absolute; right: 5px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--c-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lit-fright { margin-left: auto; }
.lit-qbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px; border: 1px solid #bdcbf2; border-radius: 6px; background: #fff; font-size: var(--fs-14); color: var(--c-primary); font-weight: var(--fw-semibold); cursor: pointer; }
.lit-qbtn:hover { background: #f1f5ff; }

/* ── 납부정보 행(납부시기 라디오 + 신고일자·당초납기·납부지연일수) ── */
.lit-payrow { display: flex; align-items: stretch; flex-wrap: wrap; border: 1px solid var(--c-border-2); background: #fafbfc; margin-bottom: 16px; }
.lit-payitem { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-left: 1px solid var(--c-border-2); flex: none; }
.lit-payitem:first-child { border-left: 0; }
.lit-plab { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #555; white-space: nowrap; }
.lit-radios { display: flex; gap: 12px; flex-wrap: wrap; }
.lit-radio { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); color: #333; white-space: nowrap; }
.lit-radio input { accent-color: var(--c-primary); }
.lit-delayval { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); white-space: nowrap; }

/* ── 탭(밑줄형) + 버튼 6종 — 라이브는 한 줄(좌:탭 우:버튼) ── */
.lit-tabbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 14px; }
.lit-tabs { display: flex; gap: 26px; }
.lit-tab { position: relative; background: none; border: 0; padding: 11px 2px 13px; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: #9aa0aa; cursor: pointer; }
.lit-tab.is-on { color: var(--c-brand); font-weight: var(--fw-bold); }
.lit-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.lit-actright { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.lit-abtn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: var(--fs-13); color: #444; cursor: pointer; white-space: nowrap; }
.lit-abtn:hover { background: var(--c-bg-soft); }
.lit-abtn.is-primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.lit-abtn.is-primary:hover { background: var(--c-brand-dark); }

/* 불러오기 팝오버 메뉴(급여정보/명세서 두 갈래) */
.lit-poplist { display: flex; flex-direction: column; min-width: 180px; padding: 6px; }
.lit-popitem { display: block; width: 100%; text-align: left; height: 34px; padding: 0 10px; border: 0; border-radius: 5px; background: none; font-size: var(--fs-13); color: #333; cursor: pointer; }
.lit-popitem:hover { background: var(--c-bg-soft); color: var(--c-primary); }

.lit-tabpane { padding-top: 2px; }

/* ── 그리드 공통(운영 표준: 행30·헤더14/700/#444/#f1f2f5·padding 6px 10px) ── */
.lit-gridbox { border: 1px solid var(--c-border-2); display: flex; flex-direction: column; max-height: 360px; }
.lit-gridscroll { flex: 1; min-height: 120px; overflow: auto; }
.lit-gridfoot { flex: none; border-top: 1px solid var(--c-border-2); overflow: hidden; }
.lit-grid { border-collapse: collapse; width: 100%; table-layout: fixed; }
.lit-grid th { height: 30px; padding: 6px 10px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: #444; background: #f1f2f5; text-align: center; border: 1px solid var(--c-border-2); line-height: 18px; box-sizing: border-box; white-space: nowrap; }
.lit-grid td { height: 30px; padding: 6px 10px; font-size: var(--fs-14); color: #222; border: 1px solid var(--c-border-2); line-height: 18px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lit-grid td.is-center { text-align: center; }
.lit-grid td.is-r { text-align: right; }
.lit-grid td.is-l { text-align: left; }
.lit-grid td.lit-labelcell { text-align: left; display: flex; align-items: center; gap: 6px; white-space: nowrap; height: 18px; }
.lit-grid td.lit-dim { color: #aab0ba; text-align: center; }
.lit-grid td.lit-dim.is-r { text-align: right; }
.lit-grid td.lit-editcell { padding: 4px 6px; }
.lit-grid tr.lit-adjrow td { background: #f7f9fc; }
.lit-gridfoot .lit-grid td { background: #f7f9fc; font-weight: var(--fw-bold); color: #222; border-top: 0; }
.lit-footlab { text-align: center; }

/* 담는 셀(.lit-labelcell)이 18px 라 22px 이면 위아래로 2~3px 씩 삐져나간다 → 셀에 맞춘다 */
.lit-editicon { flex: none; width: 18px; height: 18px; border: 0; background: transparent; color: var(--c-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lit-editicon:hover { color: var(--c-brand); }

/* 셀 편집 입력 — 30px 행 안에 들어가도록 22px 인풋 + td padding 4px 6px */
.lit-cellinp { width: 100%; height: 22px; border: 1px solid var(--c-bg-cool); border-radius: 4px; padding: 0 6px; font-size: var(--fs-13); color: #222; background: #fff; box-sizing: border-box; }
.lit-cellinp.is-r { text-align: right; }
.lit-cellinp.is-center { text-align: center; }

/* ── 환급 조정 5단계 표 ── */
.lit-refundtbl { border-collapse: collapse; width: 100%; table-layout: fixed; margin-bottom: 16px; }
.lit-refundtbl th, .lit-refundtbl td { border: 1px solid var(--c-border-2); height: 30px; padding: 6px 10px; font-size: var(--fs-14); line-height: 18px; box-sizing: border-box; }
.lit-refundtbl th { background: #f1f2f5; font-weight: var(--fw-bold); color: #444; text-align: center; white-space: normal; }
.lit-refundtbl td { text-align: right; }
.lit-refundtbl td.lit-editcell { padding: 4px 6px; }
.lit-refundtbl td.lit-dim { color: #555; background: #fafbfc; }
.lit-refundlabel { background: #eef3fb !important; color: var(--c-brand) !important; text-align: center; }
.lit-refundlabel-inner { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ── 납부지연가산세 + 납부총금액/차감후환급잔액 ── */
.lit-bottomrow { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.lit-delaytbl { flex: 2; min-width: 420px; border-collapse: collapse; table-layout: fixed; }
.lit-delaytbl th, .lit-delaytbl td { border: 1px solid var(--c-border-2); padding: 6px 10px; font-size: var(--fs-14); line-height: 18px; box-sizing: border-box; }
.lit-delaytbl th { background: #f1f2f5; font-weight: var(--fw-bold); color: #444; text-align: center; }
.lit-delaylabel { background: #eef3fb; color: var(--c-brand); text-align: center; white-space: normal; }
.lit-delaytbl td.lit-dcell { text-align: left; color: #333; }
.lit-delaytbl td.is-r { text-align: right; }
.lit-paytbl { flex: 1; min-width: 260px; border-collapse: collapse; table-layout: fixed; height: fit-content; }
.lit-paytbl th, .lit-paytbl td { border: 1px solid var(--c-border-2); height: 34px; padding: 6px 10px; font-size: var(--fs-14); line-height: 20px; box-sizing: border-box; }
.lit-paytbl th { background: #f1f2f5; font-weight: var(--fw-bold); color: #444; text-align: center; width: 44%; }
.lit-paytbl td { text-align: right; font-weight: var(--fw-bold); color: var(--c-brand); }

/* ── 명세서 탭 2단 그룹헤더 ── */
.lit-dgrid th.lit-ghd { background: #eef3fb; }

/* ── 가감조정액 팝업(모달) ── */
.lit-modalbody { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.lit-modalrow { display: flex; align-items: center; gap: 12px; }
.lit-modallab { width: 130px; flex: none; font-size: var(--fs-13); color: #555; font-weight: var(--fw-semibold); }
.lit-modalinp, .lit-modalsel { flex: 1; height: 34px; border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 0 10px; font-size: var(--fs-14); color: #222; background: #fff; }
.lit-modalinp.is-r { text-align: right; }
.lit-modalpreview { flex: 1; font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-brand); }

/* ============================================================
   근태관리 — 근태유형설정(.atyp) / 출퇴근등록관리(.atck) /
              근태요청관리(.areq) / 근태결과집계 및 마감(.aclo)
   전역 규칙 준수: 그리드 행 30px · 헤더 14px/700/#444/bg #f1f2f5 ·
     셀 padding 6px 10px · line-height 18px · 헤더 항상 가운데 ·
     코드 가운데 / 명칭 좌측 / 수치 우측 · 체크박스 칼럼은 ellipsis 예외 36px ·
     합계바는 데이터 tbody 밖의 별도 테이블(박스 하단 고정) ·
     검색조건 바는 상/하단 1px 라인 + 최소 66px, 다음 영역과 16px 간격
   ============================================================ */

/* ---- 공통 그리드 ---- */
.atyp-grid, .atck-grid, .atck-empgrid, .areq-grid, .aclo-grid, .aclo-empgrid {
  width: 100%; border-collapse: collapse; table-layout: fixed; }
.atyp-grid th, .atck-grid th, .atck-empgrid th,
.areq-grid th, .aclo-grid th, .aclo-empgrid th {
  height: 30px; background: #f1f2f5; border: 1px solid #e4e4e4;
  font-size: var(--fs-14); font-weight: 700; color: #444;
  padding: 0 10px; text-align: center; white-space: nowrap; }
.atyp-grid td, .atck-grid td, .atck-empgrid td,
.areq-grid td, .aclo-grid td, .aclo-empgrid td {
  height: 30px; border: 1px solid #e4e4e4; font-size: var(--fs-14); color: #222;
  padding: 6px 10px; line-height: 18px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atck-grid thead th, .atck-empgrid thead th,
.areq-grid thead th, .aclo-empgrid thead th { position: sticky; top: 0; z-index: 1; }
.aclo-grid thead th { position: static; }   /* 4단 그룹헤더 — sticky 겹침 방지 */
.atyp-grid tbody tr, .atck-empgrid tbody tr,
.areq-grid tbody tr, .aclo-grid tbody tr, .aclo-empgrid tbody tr { cursor: pointer; }
.atyp-grid tbody tr:hover td, .atck-empgrid tbody tr:hover td,
.areq-grid tbody tr:hover td, .aclo-grid tbody tr:hover td,
.aclo-empgrid tbody tr:hover td { background: var(--c-bg-soft-2); }
.atyp-grid tbody tr.is-sel td, .atck-empgrid tbody tr.is-sel td,
.areq-grid tbody tr.is-sel td, .aclo-grid tbody tr.is-sel td,
.aclo-empgrid tbody tr.is-sel td { background: #edf6ff; }
.atck-empty, .areq-empty, .aclo-empty {
  height: 60px; text-align: center; font-size: var(--fs-14); color: #999; }

/* 좌측 패널 공통(제목 · 카운트 · 패널 내 검색조건) */
.atyp-secthead, .atck-secthead, .aclo-secthead, .atck-rhead {
  display: flex; align-items: center; gap: 8px; padding: 0 0 8px; flex: none; }
.atyp-secthead strong, .atck-secthead strong,
.aclo-secthead strong, .atck-rhead strong {
  font-size: var(--fs-16); font-weight: 700; color: var(--c-brand); }
.atyp-cnt, .atck-cnt, .aclo-cnt { font-size: var(--fs-13); color: #888; }
.atck-srch, .aclo-srch {
  display: flex; align-items: center; gap: 8px; flex: none;
  min-height: 56px; padding: 12px 0; box-sizing: border-box;
  border-top: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool); }
.atck-srchin, .aclo-srchin {
  flex: 1; min-width: 0; height: 32px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13);
  color: #333; box-sizing: border-box; }
.atck-srchin::placeholder, .aclo-srchin::placeholder { color: #aab1bb; }
.atck-empbox, .aclo-empbox {
  flex: 1; min-height: 0; margin-top: 16px; overflow: auto;
  border: 1px solid var(--c-bg-cool); border-radius: 6px; }

/* ---- 근태유형설정 ---- */
.atyp-note {
  flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px;
  padding: 12px 14px; background: #eef4ff; border: 1px solid #d7e3fb;
  border-radius: 6px; font-size: var(--fs-14); color: #3a4a63; line-height: 20px; }
.atyp-note__ico {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.atyp-body { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
.atyp-left { flex: none; width: 420px; display: flex; flex-direction: column; min-height: 0; }
.atyp-listbox { flex: 1; min-height: 0; overflow: auto;
  border: 1px solid var(--c-bg-cool); border-radius: 6px; }
.atyp-grid td.atyp-name { text-align: left; }
.atyp-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 14px 16px; }
.atyp-detail__head { font-size: var(--fs-15); font-weight: 700; color: var(--c-brand);
  padding-bottom: 8px; border-bottom: 1px solid var(--c-bg-cool); }
.atyp-fld { display: flex; align-items: flex-start; gap: 10px; }
.atyp-fld__label { flex: none; width: 88px; padding-top: 7px;
  font-size: var(--fs-14); font-weight: 600; color: #444; }
.atyp-fld__label.is-req::after { content: ' *'; color: var(--c-required); }
.atyp-fld__ctrl { flex: 1; min-width: 0; }
.atyp-in { width: 100%; height: 32px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13);
  color: #333; background: #fafbfc; box-sizing: border-box; }
.atyp-memo { width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 8px 10px; font-size: var(--fs-13); color: #333; line-height: 20px;
  font-family: inherit; box-sizing: border-box; resize: vertical; }
.atyp-usesel { width: 100%; }
.atyp-detail__foot { display: flex; justify-content: flex-end; padding-top: 4px; }

/* ---- 출퇴근등록관리 ---- */
.atck-body { flex: 1; min-height: 0; display: flex; gap: 16px; padding-top: 16px; }
.atck-left { flex: none; width: 400px; display: flex; flex-direction: column; min-height: 0; }
.atck-right { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.atck-empgrid td.atck-name, .atck-empgrid td.atck-dept { text-align: left; }
.atck-allcell { text-align: center; font-weight: 600; color: var(--c-primary); }
.atck-rfilter { margin-left: auto; }
.atck-tools { flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 0; }
.atck-count { font-size: var(--fs-13); color: var(--c-text-2); }
.atck-count b { color: var(--c-brand); font-weight: 700; }
.atck-tbtns { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.atck-gridbox { flex: 1; min-height: 0; border: 1px solid var(--c-bg-cool);
  border-radius: 6px; overflow-x: auto; overflow-y: hidden; }
.atck-gridinner { height: 100%; display: flex; flex-direction: column; }
.atck-gridscroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.atck-gridfoot { flex: none; border-top: 2px solid #cfd8e6; }
.atck-grid .atck-chk { width: 36px; padding: 0; text-align: center;
  overflow: visible; text-overflow: clip; }
.atck-grid td.atck-name, .atck-grid td.atck-dept { text-align: left; }
.atck-grid th.atck-th--time { background: #dff0f1; }
.atck-grid td.atck-tm { background: #f2fbfb; }
.atck-grid td.atck-state.is-wait { color: #c07a00; font-weight: 600; }
.atck-footgrid td { background: #e7edf6; font-weight: 700; border-top: 0; }
.atck-footgrid td.atck-tm { background: #dcedee; }
.atck-footgrid td.atck-sumlab { text-align: center; }

/* ---- 근태요청관리 ---- */
.areq-tools { flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 16px; }
.areq-count { font-size: var(--fs-13); color: var(--c-text-2); }
.areq-count b { color: var(--c-brand); font-weight: 700; }
.areq-tbtns { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.areq-btn-batch:disabled { opacity: .45; cursor: default; }
.areq-btn-batch:disabled:hover { background: #fff; }
.areq-gridbox { flex: 1; min-height: 0; margin-top: 6px; border: 1px solid var(--c-bg-cool);
  border-radius: 6px; overflow-x: auto; overflow-y: hidden; }
.areq-gridinner { height: 100%; display: flex; flex-direction: column; }
.areq-gridscroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.areq-grid td.areq-who, .areq-grid td.areq-req, .areq-grid td.areq-reason { text-align: left; }
.areq-grid td.areq-actcell { padding: 2px 6px; overflow: visible; text-overflow: clip; }
.areq-act { height: 24px; padding: 0 12px; border-radius: var(--r-sm);
  background: #fff; font-size: var(--fs-13); cursor: pointer; }
.areq-approve { border: 1px solid var(--c-primary); color: var(--c-primary); }
.areq-approve:hover { background: var(--c-primary-bg); }
.areq-reject { border: 1px solid #d9a9a9; color: #c04b4b; margin-left: 6px; }
.areq-reject:hover { background: #fdf1f1; }

/* ---- 근태결과집계 및 마감 (운영 화면 기준: 좌 목록+요약표 / 우 집계 아코디언) ---- */
.aclo-filter .rpt-fitem { gap: 4px; }
.aclo-ymnav { width: 26px; height: 26px; border: 0; background: none; color: #6b7785;
  display: grid; place-items: center; cursor: pointer; }
.aclo-ymnav .icon { width: 14px; height: 14px; fill: currentColor; }
.aclo-ymnav:hover { color: var(--c-primary); }
.aclo-qtime { margin-left: 12px; font-size: var(--fs-12); color: #8a93a0; }
.aclo-body { flex: 1; min-height: 0; display: flex; gap: 16px; padding-top: 16px; }
.aclo-left { flex: none; width: 360px; display: flex; flex-direction: column; min-height: 0; }
.aclo-right { flex: 1; min-width: 0; display: flex; flex-direction: column;
  min-height: 0; gap: 10px; overflow-y: auto; }
.aclo-rhead { flex: none; font-size: var(--fs-15); font-weight: 700; color: var(--c-brand); }
/* 좌측 하단 요약표 — 예전 상단 카드 5장 자리 */
.aclo-summary { flex: none; width: 100%; margin-top: 10px;
  border-collapse: collapse; table-layout: fixed; }
.aclo-summary th, .aclo-summary td { height: 30px; border: 1px solid #e4e4e4;
  font-size: var(--fs-13); padding: 0 10px; }
.aclo-summary th { width: 150px; background: #f1f2f5; font-weight: 700;
  color: #444; text-align: center; }
.aclo-summary td { text-align: center; color: #222; font-weight: 600; }
/* 집계 아코디언 — 라이브는 박스가 아니라 제목 + 화살표(펼침 ^ / 접힘 v)다 */
.aclo-acc { flex: none; }
.aclo-acc__head { width: 100%; height: 32px; display: flex; align-items: center;
  justify-content: flex-start; gap: 6px; padding: 0; background: none;
  border: 0; border-bottom: 1px solid var(--c-bg-cool); cursor: pointer;
  font-size: var(--fs-14); font-weight: 700; color: #333; }
.aclo-acc__head:hover { color: var(--c-primary); }
.aclo-acc__ico { width: 14px; height: 14px; fill: #8a93a0; }
.aclo-acc.is-open .aclo-acc__ico { transform: rotate(180deg); }
.aclo-acc__body { display: none; padding-top: 8px; }
.aclo-acc.is-open .aclo-acc__body { display: block; }
.aclo-acc__empty { padding: 14px 10px; text-align: center; font-size: var(--fs-13); color: #999; }
.aclo-accscroll { overflow-x: auto; }
.aclo-totgrid { width: 100%; }
.aclo-grid th.aclo-grp { text-align: center; }
.aclo-grid th.aclo-th--weekday, .aclo-grid th.aclo-th--holiday,
.aclo-grid th.aclo-th--basic, .aclo-grid th.aclo-th--total,
.aclo-grid th.aclo-th--sum { background: #e6ecf6; }
.aclo-grid td.aclo-day, .aclo-grid td.aclo-min { text-align: center; }
.aclo-grid td.aclo-name, .aclo-grid td.aclo-dept { text-align: left; }
.aclo-empgrid td.aclo-name, .aclo-empgrid td.aclo-dept { text-align: left; }

/* ============================================================
   근태관리 2차 — 근로제관리(.awsy) / 근무지관리(.awpl) /
     근로제·근무지적용(.aapl) / 휴가설정(.alst) / 연차관리(.aann) /
     근태결과집계현황(.acst) / 출퇴근시간조회(.atml) / 근태신청조회(.arql) /
     휴가신청조회(.alql) / 근무시간조회(.awtm)
   10화면 공통 조각은 .attx- 접두로 묶었다(1차 .atck-/.aclo- 관례의 확장).
   전역 규칙 준수: 그리드 행 30px · 헤더 14px/700/#444/bg #f1f2f5 ·
     셀 padding 6px 10px · line-height 18px · 헤더 항상 가운데 ·
     코드 가운데 / 명칭 좌측 / 수치 우측 · 체크박스 칼럼 ellipsis 예외 38px ·
     합계행은 데이터 스크롤 영역 밖(그리드 박스 하단 고정) ·
     검색조건 바(.rpt-filter)는 상/하단 1px 라인 + 최소 66px, 다음 영역과 16px 간격
   ============================================================ */

/* ---- 공통 그리드 ---- */
.attx-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.attx-grid th {
  height: 30px; background: #f1f2f5; border: 1px solid #e4e4e4;
  font-size: var(--fs-14); font-weight: 700; color: #444;
  padding: 0 10px; text-align: center; white-space: nowrap; }
.attx-grid td {
  height: 30px; border: 1px solid #e4e4e4; font-size: var(--fs-14); color: #222;
  padding: 6px 10px; line-height: 18px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attx-grid thead th { position: sticky; top: 0; z-index: 1; }
.acst-grid thead th, .aann-grid thead th { position: static; }  /* 다단 그룹헤더 — sticky 겹침 방지 */
.attx-grid td.attx-l { text-align: left; }
.attx-grid td.attx-r { text-align: right; }
.attx-grid th.attx-chk, .attx-grid td.attx-chk {
  width: 38px; padding: 0; text-align: center; overflow: visible; text-overflow: clip; }
.attx-grid th.attx-grp { text-align: center; background: #e6ecf6; }
.attx-empty { height: 60px; text-align: center; font-size: var(--fs-14); color: #999; }
.awsy-grid tbody tr, .awpl-grid tbody tr, .aapl-grid tbody tr,
.arql-grid tbody tr, .alql-grid tbody tr { cursor: pointer; }
.awsy-grid tbody tr:hover td, .awpl-grid tbody tr:hover td, .aapl-grid tbody tr:hover td,
.aann-grid tbody tr:hover td, .acst-grid tbody tr:hover td, .atml-grid tbody tr:hover td,
.arql-grid tbody tr:hover td, .alql-grid tbody tr:hover td,
.awtm-grid tbody tr:hover td { background: var(--c-bg-soft-2); }

/* ---- 공통 레이아웃 ---- */
.attx-tools { flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 16px; }
.attx-count { font-size: var(--fs-13); color: var(--c-text-2); }
.attx-count b { color: var(--c-brand); font-weight: 700; }
.attx-tbtns { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.attx-tbtns .rpt-btn:disabled { opacity: .45; cursor: default; }
.attx-tbtns .rpt-btn:disabled:hover { background: #fff; }
.attx-tbtns .rpt-btn.is-primary:disabled:hover { background: var(--c-primary); }
.attx-gridbox { flex: 1; min-height: 0; margin-top: 6px;
  border: 1px solid var(--c-bg-cool); border-radius: 6px;
  overflow-x: auto; overflow-y: hidden; }
.attx-gridinner { height: 100%; display: flex; flex-direction: column; }
.attx-gridscroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.attx-gridfoot { flex: none; border-top: 2px solid #cfd8e6; }
.attx-footgrid td { background: #e7edf6; font-weight: 700; border-top: 0; }
.attx-footgrid td.attx-sumlab { text-align: center; }
.attx-body { flex: 1; min-height: 0; display: flex; gap: 16px; padding-top: 16px; }
.attx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.attx-tree.org2-tree { width: 264px; }
.attx-srchin { width: 240px; height: 32px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13);
  color: #333; box-sizing: border-box; }
.attx-srchin::placeholder { color: #aab1bb; }
.attx-note { flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px;
  padding: 12px 14px; background: #eef4ff; border: 1px solid #d7e3fb;
  border-radius: 6px; font-size: var(--fs-14); color: #3a4a63; line-height: 20px; }
.attx-note__ico { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.attx-badge { display: inline-block; margin-left: 6px; padding: 0 7px; height: 18px;
  line-height: 18px; border-radius: 9px; background: var(--c-primary); color: #fff;
  font-size: 11.5px; font-weight: 700; vertical-align: middle; }

/* ---- 근로제관리 / 근무지관리 ---- */
.awsy-grid td.awsy-off, .awpl-grid td.awpl-off { color: #98a0ab; }
.awsy-grid td.awsy-name, .awpl-grid td.awpl-name { overflow: visible; text-overflow: clip; }

/* ---- 근로제/근무지적용 ---- */
.aapl-grid td.aapl-who { font-weight: 600; }

/* ---- 휴가설정(설정 폼) ---- */
.alst-body { flex: 1; min-height: 0; display: flex; gap: 20px; align-items: stretch;
  margin-top: 12px; overflow: auto; }
.alst-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.alst-sec { border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 14px 16px; }
.alst-sec__t { font-size: var(--fs-15); font-weight: 700; color: var(--c-brand);
  padding-bottom: 10px; border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 12px; }
.alst-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.alst-row__lab { flex: none; width: 120px; font-size: var(--fs-14); font-weight: 600; color: #444; }
.alst-row__ctrl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.alst-radio { display: flex; align-items: center; gap: 18px; }
.alst-radio label { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-14); color: #333; cursor: pointer; }
.alst-num { width: 84px; height: 32px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13);
  color: #333; text-align: right; box-sizing: border-box; }
.alst-num:disabled { background: #f3f5f8; color: #98a0ab; }
.alst-unit { font-size: var(--fs-13); color: #666; }
.alst-hint { font-size: var(--fs-12); color: #8a93a0; }
.alst-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: #333; }
.alst-desc { margin-top: 12px; padding: 10px 12px; background: #f7faff;
  border: 1px solid #e2ebf8; border-radius: 6px; }
.alst-desc__l { margin: 0; font-size: var(--fs-13); color: #5a6a80; line-height: 20px; }
.alst-desc__l + .alst-desc__l { margin-top: 4px; }
.alst-tablewrap { flex: none; width: 100%; display: flex; flex-direction: column; }
.alst-tablewrap .alst-sec__t { border-bottom: 0; padding-bottom: 6px; margin-bottom: 4px; }
.alst-gridbox { flex: none; margin-top: 0; }
.alst-gridbox .attx-gridinner { height: auto; }
.alst-gridbox .attx-gridscroll { flex: none; overflow-y: visible; }

/* ---- 연차관리 ---- */
.aann-grid th.aann-th--sojin { background: #dfe8f6; }
.aann-grid th.aann-th--month { background: #e6ecf6; }
.aann-grid td.aann-pending { color: #c07a00; }
.aann-grid td.aann-m { background: #fbfcfe; }

/* ---- 근태결과집계현황 ---- */
.acst-grid th.acst-th--weekday { background: #e6ecf6; }
.acst-grid th.acst-th--holiday { background: #eaf1e8; }
.acst-grid th.acst-th--weekly { background: #f4eceb; }
.acst-grid th.acst-th--item { background: #eef2f8; }
.acst-grid th.acst-th--sub { background: #f5f8fc; }   /* 3단 하위 칸(연장근무·야간근무 아래) */

/* ---- 출퇴근시간조회 ---- */
.atml-grid td.atml-tm { background: #f2fbfb; }
.atml-grid td.atml-warn { color: #c04b4b; font-weight: 600; }
.atml-grid td.atml-wait { color: #c07a00; font-weight: 600; }

/* ---- 근태신청조회 / 휴가신청조회 ---- */
.arql-grid td.arql-st.is-wait, .alql-grid td.alql-st.is-wait { color: #c07a00; font-weight: 600; }
.arql-grid td.arql-st.is-no, .alql-grid td.alql-st.is-no { color: #c04b4b; font-weight: 600; }
/* 3차 실측 보정 — 승인 완료 텍스트 + 결재진행 행 전용 [승인]/[거절] 인라인 버튼
   (근태요청관리 .areq-act 패턴 재사용) */
.arql-grid td.arql-st.is-done, .alql-grid td.alql-st.is-done { color: #1f9d57; font-weight: 600; }
.attx-actcell { padding: 2px 6px; overflow: visible; text-overflow: clip; }
.attx-act { height: 24px; padding: 0 12px; border-radius: var(--r-sm);
  background: #fff; font-size: var(--fs-13); cursor: pointer; }
.attx-approve { border: 1px solid var(--c-primary); color: var(--c-primary); }
.attx-approve:hover { background: var(--c-primary-bg); }
.attx-reject { border: 1px solid #d9a9a9; color: #c04b4b; margin-left: 6px; }
.attx-reject:hover { background: #fdf1f1; }

/* ---- 근무시간조회 ---- */
.awtm-grid td.awtm-who { font-weight: 600; }

/* ============================================================
   근태관리 4차(탭 구조 + 근로제 등록 팝업)
     · 화면 탭 바 .attx-tabs / 서브탭 .attx-subtabs — 근태유형설정(.atyp) ·
       휴가설정(.alst) 이 공유한다(라이브에서 탭 바가 화면 루트 바깥에 있던 그 자리).
     · 근로제 등록/수정 팝업 .wsp — size-xxl 급 폭 + 탭 2개.
   전역 규칙 준수: 그리드 행 30px · 헤더 14px/700/#444 · 셀 padding 6px 10px ·
     합계바는 데이터 스크롤 영역 밖(박스 하단 고정) ·
     검색조건 바(.rpt-filter)는 상/하단 1px 라인 + 최소 66px, 다음 영역과 16px 간격
   ============================================================ */

/* ---- 화면 탭 바 ---- */
.attx-tabs { flex: none; display: flex; align-items: flex-end; gap: 2px;
  border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 16px; }
.attx-tab { padding: 9px 22px; background: none; border: 0; cursor: pointer;
  font-size: var(--fs-14); font-weight: 600; color: #7b8492;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.attx-tab:hover { color: var(--c-primary); }
.attx-tab.is-active { color: var(--c-primary); font-weight: 700; border-bottom-color: var(--c-primary); }

/* ---- 서브탭(휴가부여/조정: 연차 · 보상/대체 · 경조) ---- */
.attx-subtabs { flex: none; display: flex; gap: 6px; margin-top: 12px; }
.attx-subtab { height: 30px; padding: 0 18px; border: 1px solid var(--c-border);
  border-radius: 15px; background: #fff; font-size: var(--fs-13); color: #61697a; cursor: pointer; }
.attx-subtab:hover { background: var(--c-primary-bg); }
.attx-subtab.is-active { background: var(--c-primary); border-color: var(--c-primary);
  color: #fff; font-weight: 700; }

/* ---- 근태유형설정 탭 본문 ---- */
.atyp-tabbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.atyp-left--wide { width: 560px; }
.atyp-subgrid td.atyp-name { text-align: left; }
.atyp-subgrid td.atyp-off { color: #98a0ab; }
.atyp-fld__label.is-wide { width: 138px; }
.atyp-hm { display: flex; align-items: center; gap: 6px; }
.atyp-num { width: 64px; height: 32px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 8px; font-size: var(--fs-13);
  color: #333; text-align: right; box-sizing: border-box; }
.atyp-unit { font-size: var(--fs-13); color: #666; }
.atyp-subdetail { max-width: 520px; }
/* 탭 바 바로 아래에 붙는 툴바는 탭 바의 16px 여백을 그대로 쓴다(이중 여백 방지).
   검색조건 바 뒤에 오는 툴바(.alst-gtools/.alst-htools/.alst-stools)는 16px 규약 유지 */
.atyp-tools, .alst-tools, .alst-ttools { margin-top: 0; }

/* ---- 휴가설정 탭 본문 ---- */
.alst-tabbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.alst-off { color: #98a0ab; }
.alst-in { width: 100%; height: 32px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13);
  color: #333; box-sizing: border-box; }
.alst-hm { display: flex; align-items: center; gap: 6px; }

/* 휴가유형설정(좌 목록 + 우 상세) */
.alst-typebody { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch; padding-top: 6px; }
.alst-typeleft { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.alst-typebox { margin-top: 0; }
.alst-typegrid tbody tr { cursor: pointer; }
.alst-typegrid tbody tr:hover td { background: var(--c-bg-soft-2); }
.alst-typegrid tbody tr.is-sel td { background: #edf6ff; }
.alst-detail { flex: none; width: 460px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 14px 16px; overflow: auto; }
.alst-detail__head { font-size: var(--fs-15); font-weight: 700; color: var(--c-brand);
  padding-bottom: 8px; border-bottom: 1px solid var(--c-bg-cool); }
.alst-fld { display: flex; align-items: center; gap: 10px; }
.alst-fld__label { flex: none; width: 132px; font-size: var(--fs-14); font-weight: 600; color: #444; }
.alst-fld__label.is-req::after { content: ' *'; color: var(--c-required); }
.alst-fld__ctrl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.alst-fld__ctrl .rpt-sel { flex: 1; min-width: 0; }

/* 휴가부여/조정 */
.alst-ggrid th.alst-th--grant { background: #dfe8f6; }
.alst-ggrid th.alst-th--use { background: #f1e9df; }
.alst-ggrid td.alst-gname { font-weight: 600; }
.alst-ggrid td.alst-gpend { color: #c07a00; }
.alst-ggrid td.alst-grest { font-weight: 700; color: var(--c-brand); }
.alst-ggrid thead th { position: static; }   /* 다단 그룹헤더 — sticky 겹침 방지 */
.alst-gbox { margin-top: 12px; }

/* 휴가적용이력 */
.alst-hgrid td.alst-huse { color: #c04b4b; }

/* 휴가정산 — 라이브 화면 기준(검색조건 5칸 + 액션 5버튼 + 2단 헤더 21컬럼) */
.alst-ssrchin { width: 168px; height: 32px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-13);
  color: #333; box-sizing: border-box; }
.alst-sgrid thead th { position: static; }   /* 다단 그룹헤더 — sticky 겹침 방지 */
/* 라이브: 사원정보 6칸과 상태는 파란 링크색, 나머지 값은 기본 검정·가운데 정렬 */
.alst-sgrid td.alst-slink { color: var(--c-primary); }
/* 합계바 — 라이브는 흰 배경에 상단 구분선만 있고 값은 가운데 정렬 */
.alst-sfoot td { background: #fff; font-weight: 600; }
.alst-sfoot td.attx-sumlab { font-weight: 700; }
.alst-sgrid td.alst-sdone { color: var(--c-primary); }
.alst-sgrid tbody tr { cursor: pointer; }
.alst-sgrid tbody tr:hover td { background: var(--c-bg-soft-2); }
.alst-sbox { margin-top: 12px; }
.alst-btn-sdel .icon { fill: #e35d5d; }
.alst-btn-sfix { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.alst-btn-sfix:hover { background: var(--c-primary); filter: brightness(.96); }
.attx-tbtns .alst-btn-sfix:disabled { background: #eceef1; color: #98a0ab;
  border-color: #e1e5ea; opacity: 1; }
.attx-tbtns .alst-btn-sfix:disabled:hover { background: #eceef1; }
.alst-btn-scancel { background: #e35d5d; color: #fff; border-color: #e35d5d; }
.alst-btn-scancel:hover { background: #e35d5d; filter: brightness(.96); }
.alst-btn-sload { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.alst-btn-sload:hover { background: var(--c-brand); filter: brightness(1.12); }

/* ============================================================
   근로제 등록/수정 팝업 (.wsp) — HR-01-110-P
   ============================================================ */
.modal__card.wsp-card { width: 1180px; max-width: 96vw; }
.modal__card.wsp-card .modal__body { padding: 0; }
.wsp { display: flex; flex-direction: column; }
.wsp-tabs { flex: none; display: flex; border-bottom: 1px solid var(--c-bg-cool); }
.wsp-tab { flex: 1; padding: 12px 0; background: none; border: 0; cursor: pointer;
  font-size: var(--fs-15); font-weight: 600; color: #7b8492;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wsp-tab:hover { color: var(--c-primary); }
.wsp-tab.is-active { color: var(--c-brand); font-weight: 700; border-bottom-color: var(--c-primary); }
.wsp-tabbody { padding: 18px 24px 24px; }
.wsp-pane { display: flex; flex-direction: column; }
.wsp-sec__t { display: flex; align-items: center; gap: 6px; font-size: var(--fs-16);
  font-weight: 700; color: var(--c-brand); padding-bottom: 10px;
  border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 14px; }
.wsp-sec__r { margin-left: auto; }
.wsp-fields { display: flex; flex-direction: column; gap: 12px; }
.wsp-row { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.wsp-lab { flex: none; width: 150px; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-14); font-weight: 600; color: #444; }
.wsp-lab.is-req > span:first-child::after { content: ' *'; color: var(--c-required); }
.wsp-ctrl .wsp-lab { width: auto; margin-left: 16px; }   /* 휴게 시간 행의 `휴게 인정 시간` 처럼 한 행에 라벨이 둘일 때 */
.wsp-ctrl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wsp-tip { display: inline-flex; align-items: center; cursor: help; }
.wsp-tip__ico { width: 14px; height: 14px; fill: #a7b0be; }
.wsp-tip:hover .wsp-tip__ico { fill: var(--c-primary); }
.wsp-in { flex: 1; min-width: 260px; height: 34px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-14); color: #222; box-sizing: border-box; }
.wsp-in::placeholder { color: #aab1bb; }
.wsp-num { width: 72px; height: 34px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 0 10px; font-size: var(--fs-14);
  color: #222; text-align: right; box-sizing: border-box; }
.wsp-num.is-wide { width: 110px; }
.wsp-radio, .wsp-chk { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-14); color: #333; cursor: pointer; }
.wsp-repbox { margin-left: 6px; white-space: nowrap; }
/* 월~금 일괄 선택 체크박스(라이브: 요약 문구가 아니라 체크박스다) */
.wsp-weekbox { margin-left: 10px; }
.wsp-weekbox span { font-weight: 600; color: var(--c-brand); }
.wsp-unit, .wsp-time { font-size: var(--fs-14); color: #444; }
.wsp-tilde { color: #98a0ab; }
.wsp-strong { font-size: var(--fs-14); font-weight: 700; color: #222; }
.wsp-val { font-size: var(--fs-14); color: #222; }
.wsp-gap { width: 8px; }
.wsp-badge { display: inline-block; padding: 0 9px; height: 20px; line-height: 20px;
  border-radius: 10px; background: #eaf1ff; color: var(--c-brand);
  font-size: 12px; font-weight: 700; }
.wsp-inline-note { font-size: var(--fs-13); color: #8a93a0; }
.wsp-addbox { margin-top: 12px; padding: 18px; text-align: center;
  border: 1px dashed var(--c-border); border-radius: 6px;
  font-size: var(--fs-13); color: #98a0ab; }
.wsp-pane--info .wsp-sec__t + .wsp-fields { margin-bottom: 20px; }
.wsp-policy { margin-bottom: 22px; }
.wsp-policy:last-child { margin-bottom: 0; }
.wsp-note { margin-top: 12px; padding: 10px 12px; background: #f7faff;
  border: 1px solid #e2ebf8; border-radius: 6px; }
.wsp-note__l { margin: 0; font-size: var(--fs-13); color: #5a6a80; line-height: 20px; }
.wsp-note__l + .wsp-note__l { margin-top: 4px; }
.rpt-btn.is-cancel { border-color: #d9a9a9; color: #c04b4b; }
.rpt-btn.is-cancel:hover { background: #fdf1f1; }

/* ============================================================
   전자계약 (.ec-* 그리드 공용 + .eca-* 전용앱) — 나의계약 / 전자계약 별도앱
   130-view-econtract.js(나의계약) · 134-view-econtract-app.js(홈/계약관리/서식자료실).
   그리드 실측값(행 30px · 셀 14px/#222 · 헤더 14px/700/#444 bg #f1f2f5 · padding 6px 10px)을 따른다.
   ============================================================ */
.ec { color: var(--c-text); }

/* ---- 검색조건 바 (상·하단 라인은 공용 라인블록) ---- */
.ec-filter { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 56px; padding: 12px 2px; }
.ec-filter__lab { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-3); white-space: nowrap; }
.ec-daterange { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #222; }
.ec-cal { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; padding: 0; }
.ec-cal .icon { fill: var(--c-text-3); }
.ec-srchbtn { height: 32px; padding: 0 18px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand);
  color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.ec-srchbtn .icon { fill: #fff; }
.ec-in { flex: 1; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool);
  border-radius: var(--r-md); font-size: var(--fs-14); color: #222; }

/* ---- 액션 툴바 (검색조건 하단선과 16px 간격) ---- */
.ec-toolbar { flex: none; display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.ec-tbtn { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff;
  color: var(--c-text-2); font-size: var(--fs-14); white-space: nowrap; }
.ec-tbtn:hover:not(:disabled) { background: var(--c-bg-soft); }
.ec-tbtn:disabled { color: var(--c-text-disabled); background: #fff; cursor: not-allowed; }
.ec-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }
.ec-tbtn:disabled .icon { fill: var(--c-text-disabled); }

/* ---- 카운트 ---- */
.ec-count { flex: none; display: flex; gap: 14px; margin: 10px 0 6px; font-size: var(--fs-13); color: var(--c-text-3); }
.ec-count b { color: var(--c-text); font-weight: var(--fw-semibold); }

/* ---- 그리드 박스 (콘텐츠 높이 100% 채움) ---- */
.ec-gridbox { flex: 1; min-height: 160px; display: flex; flex-direction: column;
  border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.ec-gridhost { flex: 1; min-height: 0; overflow: auto; }
.ec-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ec-grid th, .ec-grid td { height: 30px; padding: 6px 10px; line-height: 18px;
  border: 1px solid #e4e4e4; font-size: var(--fs-14); text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ec-grid thead th { position: sticky; top: 0; z-index: 1;
  background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); }
.ec-grid tbody td { color: #222; font-weight: 400; background: #fff; }
.ec-grid td.is-left { text-align: left; }
/* 체크박스 칸 — ellipsis 예외 + 고정폭(CLAUDE.md 그리드 규칙) */
.ec-grid th.ec-grid__chk, .ec-grid td.ec-grid__chk { width: 40px; overflow: visible; text-overflow: clip; padding: 6px 0; }
.ec-grid__chk input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.ec-grid__row:hover td { background: #f7faff; }
.ec-grid__row.is-sel td { background: #eef4ff; }
.ec-grid__empty td { color: var(--c-text-3); background: #fff; }

/* ---- 진행상태 배지 (나의계약) ---- */
.ec-badge { display: inline-block; min-width: 56px; height: 20px; line-height: 20px; padding: 0 8px;
  border-radius: 10px; font-size: 12px; font-weight: var(--fw-bold); }
.ec-badge--draft { background: #f1f2f5; color: #6b7280; }
.ec-badge--wait { background: #fff4e5; color: #b26a00; }
.ec-badge--done { background: #eaf1ff; color: var(--c-brand); }
.ec-badge--expire { background: #f6f6f6; color: #9aa1ac; }

/* ---- 나의계약 안내바 ---- */
.ec-mynotice { flex: none; display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  padding: 12px 14px; border: 1px solid #e2ebf8; border-radius: 6px; background: #f7faff;
  font-size: var(--fs-13); color: #5a6a80; }
.ec-mynotice__ic { width: 16px; height: 16px; flex: none; fill: var(--c-primary); }

/* ============================================================
   전자계약 별도앱 (.eca-*) — 라이브 실측(_refs/econtract-page-spec.md).
   GNB[전자계약] → 사이드바 CTA(.sidebar__ecbtn) → 전용 헤더(.eca-header)의
   홈/계약관리/서식자료실. 새 탭 대신 같은 화면 안에서 전용 헤더로 "별도 페이지"
   느낌만 재현한다(사용자 확정 2026-08-12). 이용약관 동의 단계는 데모에서 뺐다.
   ============================================================ */
.sidebar__ecbtn { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--r-md); background: var(--c-primary); color: #fff;
  font-size: var(--fs-14); font-weight: var(--fw-medium); }
.sidebar__ecbtn:hover { background: #2a5be0; }
.sidebar__ecbtn .icon { fill: #fff; }
.sidebar__ecdesc { margin-top: 10px; padding: 0 var(--sp-1); font-size: 12px; line-height: 17px; color: #9fb6d6; text-align: center; }

/* ---- 전용 헤더 (실측 #1e293b · 높이 50px) ---- */
.eca-header { flex: none; height: 50px; background: #1e293b; }
.eca-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.eca-header__logo { display: flex; align-items: center; gap: 8px; color: #fff; font-size: var(--fs-16); font-weight: var(--fw-bold); }
.eca-header__logo .icon { fill: #fff; }
.eca-header__nav { display: flex; gap: 28px; }
.eca-header__navbtn { border: 0; background: none; padding: 4px 0; color: #cbd5e1; font-size: var(--fs-16); font-weight: var(--fw-bold); }
.eca-header__navbtn:hover { color: #fff; }
.eca-header__navbtn.is-active { color: #fff; box-shadow: inset 0 -2px 0 #fff; }

/* ---- 본문 래퍼(스크롤) ---- */
.eca-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; background: #f8fafb; }
.eca-listdesc { margin: 0; font-size: var(--fs-13); color: var(--c-text-3); }

/* ---- 홈 히어로 ---- */
.eca-hero { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 28px; background: #fff; border: 1px solid var(--c-bg-cool); border-radius: 10px; }
.eca-hero__title { font-size: 20px; font-weight: var(--fw-bold); color: #222; }
.eca-hero__desc { margin-top: 6px; font-size: var(--fs-14); color: var(--c-text-3); }

/* ---- 홈 상태 카드 4개 ---- */
.eca-cardboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.eca-card { background: #f8fafb; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.eca-card__head { padding: 16px; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.eca-card__head:hover { background: #f1f5f9; }
.eca-card__title2 { margin: 0 0 6px; font-size: var(--fs-16); font-weight: var(--fw-bold); color: #475569; }
.eca-card__desc { display: flex; flex-direction: column; font-size: 12px; line-height: 17px; color: #8a93a0; }
.eca-card__count { margin-left: auto; font-size: 32px; font-weight: var(--fw-medium); }
.eca-card__arrow { width: 16px; height: 16px; flex: none; margin-top: 4px; fill: #9aa5b3; }
.eca-c-green .eca-card__count { color: #16a34a; }
.eca-c-slate .eca-card__count { color: #475569; }
.eca-c-orange .eca-card__count { color: #ea580c; }
.eca-c-blue .eca-card__count { color: #2563eb; }
.eca-card__list { border-top: 1px solid var(--c-bg-cool); }
.eca-card__item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-top: 1px solid #edf0f3; }
.eca-card__item:first-child { border-top: 0; }
.eca-card__date { display: block; font-size: 11px; color: #9aa5b3; }
.eca-card__title { margin: 2px 0 0; font-size: var(--fs-13); color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eca-card__tag { flex: none; font-size: 11px; font-weight: var(--fw-medium); color: var(--c-text-3); }
.eca-card__empty { padding: 24px 16px; text-align: center; font-size: var(--fs-13); color: #9aa5b3; }

/* ---- FAQ ---- */
.eca-faq { display: flex; gap: 24px; padding: 20px 24px; background: #fff; border: 1px solid var(--c-bg-cool); border-radius: 10px; }
.eca-faq__side { flex: none; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--c-text-3); }
.eca-faq__ic { width: 28px; height: 28px; fill: #c3cad4; }
.eca-faq__board { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; align-content: start; }
.eca-faq__item summary { list-style: none; display: flex; gap: 8px; padding: 10px 0; font-size: var(--fs-14); color: #222; cursor: pointer; }
.eca-faq__item summary::-webkit-details-marker { display: none; }
.eca-faq__q { flex: none; width: 18px; color: var(--c-primary); font-weight: var(--fw-bold); }
.eca-faq__a { padding: 0 0 12px 26px; font-size: var(--fs-13); line-height: 20px; color: var(--c-text-3); }

/* ---- 계약관리: 진행상태 셀(4단계 점) ---- */
.eca-statuscell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.eca-statuscell__dots { display: flex; gap: 3px; }
.eca-dot { width: 7px; height: 7px; border-radius: 50%; background: #e1e5ea; }
.eca-dot.is-on { background: var(--c-primary); }
.eca-statuscell__label { font-size: 12px; color: var(--c-text-2); }
.eca-toolbar__spacer { flex: 1; }
.eca-searchtxt { min-width: 220px; }

/* ---- 서식자료실 ---- */
.eca-formlink { color: var(--c-primary); text-decoration: none; }
.eca-formlink:hover { text-decoration: underline; }
.eca-dl { display: flex; justify-content: center; gap: 6px; }
.eca-dl__btn { height: 22px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: 4px;
  background: #fff; font-size: 11px; font-weight: var(--fw-medium); color: var(--c-text-2); }
.eca-dl__btn:hover { background: var(--c-bg-soft); }

/* ---- 계약서 작성 3단계 마법사 ---- */
.eca-wiz { display: flex; flex-direction: column; gap: 18px; }
.eca-wiz__head { display: flex; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--c-bg-cool); }
.eca-wiz__headit { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: #9aa5b3; }
.eca-wiz__headit b { padding: 2px 8px; border-radius: 10px; background: #f1f2f5; color: #9aa5b3; font-size: 11px; }
.eca-wiz__headit.is-active { color: #222; font-weight: var(--fw-bold); }
.eca-wiz__headit.is-active b { background: var(--c-primary); color: #fff; }
.eca-wiz__step.is-hidden { display: none; }
.eca-wiz__row { display: flex; align-items: center; gap: 12px; }
.eca-wiz__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eca-wiz__row2 > div { display: flex; align-items: center; gap: 12px; }
.eca-wiz__lab { flex: none; width: 120px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.eca-wiz__upfield { flex: 1; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft); }
.eca-wiz__upplaceholder { flex: 1; font-size: var(--fs-14); color: #9aa5b3; }
.eca-wiz__filename { display: block; margin-top: -8px; font-size: var(--fs-13); color: var(--c-text-3); }
.eca-wiz__filename.is-on { color: #222; font-weight: var(--fw-medium); }
.eca-wiz__notice { margin-top: 6px; padding: 12px 14px; border: 1px dashed var(--c-border); border-radius: 6px; }
.eca-wiz__notice strong { display: block; margin-bottom: 6px; font-size: var(--fs-13); color: #222; }
.eca-wiz__notice p { margin: 2px 0; font-size: 12px; color: #8a93a0; }
.eca-wiz__done { align-items: center; text-align: center; padding: 30px 10px; gap: 8px; }
.eca-wiz__doneicon { width: 32px; height: 32px; fill: var(--c-primary); }
.eca-wiz__done strong { font-size: var(--fs-16); color: #222; }
.eca-wiz__done p { margin: 0; font-size: var(--fs-13); color: var(--c-text-3); }
.eca-wiz .hidden { display: none; }

/* ============================================================
   B2B 수발주 (.b2b-*) — 견적관리 / 수주관리 / 대금청구서 / 결제내역 조회
   131-view-b2b-order.js. 마스터-디테일 + 합계바 하단 고정.
   ============================================================ */
.b2b { color: var(--c-text); }

/* ---- 검색조건 바 (상·하단 라인은 공용 라인블록) ---- */
.b2b-filter { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 56px; padding: 12px 2px; }
.b2b-filter__lab { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-3); white-space: nowrap; }
.b2b-daterange { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #222; }
.b2b-cal { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; padding: 0; }
.b2b-cal .icon { fill: var(--c-text-3); }
.b2b-pickbox { display: inline-flex; align-items: center; width: 200px; height: 32px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; }
.b2b-in { flex: 1; min-width: 0; height: 30px; border: 0; padding: 0 10px; background: transparent;
  font-size: var(--fs-14); color: #222; }
.b2b-in::placeholder { color: var(--c-text-3); }
.b2b-pick { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 0; background: none; padding: 0; }
.b2b-pick .icon { fill: var(--c-text-3); }
.b2b-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.b2b-seg button { height: 30px; padding: 0 14px; border: 0; border-left: 1px solid var(--c-bg-cool);
  background: #fff; font-size: var(--fs-14); color: var(--c-text-3); }
.b2b-seg button:first-child { border-left: 0; }
.b2b-seg button.is-active { background: var(--c-brand); color: #fff; font-weight: var(--fw-medium); }
.b2b-srchbtn { height: 32px; padding: 0 18px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-brand);
  color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.b2b-srchbtn .icon { fill: #fff; }
.b2b-detailbtn { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid var(--c-bg-cool);
  border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ---- 액션 툴바 (검색조건 하단선과 16px 간격) ---- */
.b2b-toolbar { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.b2b-tbtn { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff;
  color: var(--c-text-2); font-size: var(--fs-14); white-space: nowrap; }
.b2b-tbtn:hover { background: var(--c-bg-soft); }
.b2b-tbtn .icon { width: 16px; height: 16px; fill: currentColor; }

/* ---- 섹션(마스터/디테일) ---- */
.b2b-sec { display: flex; flex-direction: column; min-height: 0; }
.b2b-master { flex: none; margin-top: 14px; }
.b2b-master .b2b-gridbox { height: 214px; }
.b2b-detail { flex: 1; min-height: 180px; margin-top: 18px; padding-bottom: 2px; }
.b2b-sec__head { flex: none; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.b2b-sec__title { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-brand); }
.b2b-sec__count { font-size: var(--fs-13); color: var(--c-text-3); }
.b2b-sec__count b { color: var(--c-text); font-weight: var(--fw-semibold); }
.b2b-count { flex: none; display: flex; gap: 14px; margin: 10px 0 6px; font-size: var(--fs-13); color: var(--c-text-3); }
.b2b-count b { color: var(--c-text); font-weight: var(--fw-semibold); }

/* ---- 그리드 박스 (데이터 스크롤 + 합계바 하단 고정) ---- */
.b2b-gridbox { flex: 1; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.b2b-gridbox.fillgrow { flex: 1; min-height: 160px; }
.b2b-gridhost { flex: 1; min-height: 0; overflow: auto; }
.b2b-gridfoot { flex: none; overflow: hidden; border-top: 1px solid var(--c-bg-cool); }
.b2b-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.b2b-grid th, .b2b-grid td { height: 30px; padding: 6px 10px; line-height: 18px;
  border: 1px solid #e4e4e4; font-size: var(--fs-14); text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b2b-grid thead th { position: sticky; top: 0; z-index: 1;
  background: var(--c-bg-soft); color: #444; font-weight: var(--fw-bold); }
.b2b-grid tbody td { color: #222; font-weight: 400; background: #fff; }
.b2b-grid td.is-r { text-align: right; }
.b2b-grid td.is-left { text-align: left; }
/* 체크박스 칸 — ellipsis 예외 + 고정폭(CLAUDE.md 그리드 규칙) */
.b2b-grid th.b2b-grid__chk, .b2b-grid td.b2b-grid__chk { width: 40px; overflow: visible; text-overflow: clip; padding: 6px 0; }
.b2b-grid__chk input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.b2b-grid__row { cursor: pointer; }
.b2b-grid__row:hover td { background: #f7faff; }
.b2b-grid__row.is-sel td { background: #eef4ff; }
.b2b-grid__empty td { color: var(--c-text-3); background: #fff; }
/* 합계바 — thead 없음, 배경으로 구분 */
.b2b-footgrid td { background: var(--c-bg-soft); font-weight: var(--fw-semibold); border-top: 0; }
.b2b-foot__lab { color: var(--c-brand); font-weight: var(--fw-bold); }

/* ---- 상태 배지 ---- */
.b2b-badge { display: inline-block; min-width: 62px; height: 20px; line-height: 20px; padding: 0 8px;
  border-radius: 10px; font-size: 12px; font-weight: var(--fw-bold); }
.b2b-badge--draft { background: #f1f2f5; color: #6b7280; }
.b2b-badge--req { background: #fff4e5; color: #b26a00; }
.b2b-badge--reqok { background: #fef6e0; color: #8a6d1f; }
.b2b-badge--ok { background: #eaf1ff; color: var(--c-brand); }
.b2b-badge--part { background: #e9f4ec; color: #2f7d4f; }
.b2b-badge--done { background: #e6f2ea; color: #1f7a45; }
.b2b-badge--no { background: #fdecec; color: #c04b4b; }

/* ---- 2026-08 라이브 재검증 확장분 — 품목관리/거래처관리/거래처 전용품목/출고관리/가상계좌 입금내역조회
   + 결제내역조회 탭(수주서/대금청구서) + 견적·수주 상세 섹션 우측 도구모음 ---- */
.b2b-sec__tools { margin-left: auto; display: flex; gap: 6px; }
/* 결제내역조회 상단 탭 — 실측: 수주서 / 대금청구서 */
.b2b-tabs { flex: none; display: flex; border-bottom: 2px solid var(--c-bg-cool); margin: 4px 0 14px; }
.b2b-tabs button { height: 38px; padding: 0 2px; margin-right: 28px; border: 0; background: none;
  font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--c-text-3);
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; }
.b2b-tabs button.is-active { color: var(--c-brand); font-weight: var(--fw-bold); border-bottom-color: var(--c-brand); }
/* 거래처 전용품목 — 좌(거래처 목록)·우(전용품목) 분할 */
.b2b-split { flex: 1; min-height: 0; display: flex; gap: 16px; margin-top: 14px; }
.b2b-split > .b2b-gridbox { flex: 1; min-width: 0; }
.b2b-split > .b2b-gridbox:first-child { flex: 0 0 500px; }
/* 온/오프 토글 스위치 — 품목 상품노출여부 / 거래처 접속가능여부(저장 액션이라 클릭해도 토스트만, 상태 불변) */
.b2b-sw { display: inline-flex; align-items: center; width: 36px; height: 20px; border-radius: 10px;
  background: var(--c-bg-cool); position: relative; cursor: pointer; border: 0; padding: 0; flex: none; }
.b2b-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.b2b-sw.is-on { background: var(--c-primary); }
.b2b-sw.is-on::after { left: 18px; }
.b2b-grid td.b2b-grid__sw { overflow: visible; text-overflow: clip; }
/* 거래처 비밀번호 초기화 미니버튼 / 품목 상세 미니버튼 */
.b2b-minibtn { height: 24px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-sm);
  background: #fff; color: var(--c-text-2); font-size: 12px; }
.b2b-minibtn:hover { background: var(--c-bg-soft); }
/* 등록 팝업 — 상단 선택피커 + 하단 선택목록(2단, 품목/거래처 등록 공용) */
.b2b-pkmodal { display: flex; flex-direction: column; gap: 14px; width: 1040px; max-width: 92vw; }
.b2b-pkmodal__bar { display: flex; align-items: center; gap: 10px; }
.b2b-pkmodal__bar strong { font-size: var(--fs-15); font-weight: var(--fw-bold); color: #222; }
.b2b-pkmodal__bar .b2b-sec__count { font-size: var(--fs-13); }
.b2b-pkmodal__bar input.b2b-in { flex: 1; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); padding: 0 12px; }
.b2b-pkmodal__box { border: 1px solid var(--c-bg-cool); border-radius: 8px; max-height: 220px; overflow: auto; }
.b2b-pkmodal__sel { min-height: 140px; max-height: 220px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 8px; }
.b2b-pkmodal__empty { display: flex; align-items: center; justify-content: center; height: 140px; color: var(--c-text-3); font-size: var(--fs-14); }
.b2b-pkmodal__foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   나의업무 > 인사급여관리 > 근로소득원천징수영수증·원천징수부 (개인, .ye-my)
   관리자쪽 .ye-* 스코프(원천징수영수증 YA-01-200)를 그대로 재사용하고,
   좌측 사원 리스트가 없는 단일 컬럼 레이아웃만 추가한다.
   ============================================================ */
.ye-body--my { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 16px;
  border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: hidden; }
.ye-lockpane { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 60px 20px; text-align: center; }
.ye-lockpane__ic { width: 40px; height: 40px; fill: none; stroke: #c3cad4; stroke-width: 1.3; }
.ye-lockpane__t { font-size: 15px; font-weight: 700; color: #444; margin: 4px 0 0; }
.ye-lockpane__d { font-size: 13px; color: #8a93a0; margin: 0 0 8px; }

/* ============================================================
   나의업무 > 근태관리(개인) 4종 — 나의근태·근태일정·근태신청·근태이력 (.myatt)
   실측: _refs/attendance-spec.md "5차 실측 — 나의업무 개인 근태관리 4종"
   ============================================================ */
.myatt.fillview { padding: 16px 20px 20px; overflow-y: auto; }
.myatt-sec__t { font-size: 15px; font-weight: 700; color: var(--c-brand); margin: 22px 0 10px; }
.myatt-sec__t:first-of-type { margin-top: 0; }

/* ---- 1) 나의근태(대시보드) ---- */
.myatt-head { display: flex; gap: 14px; align-items: stretch; }
.myatt-head__card { flex: none; width: 460px; border-radius: 10px; padding: 18px 20px;
  background: linear-gradient(101.11deg, #3B82F6 9.66%, #2158E1 78.61%); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.myatt-head__cardleft { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.myatt-head__who { font-size: 16px; font-weight: 700; }
.myatt-head__who span { font-weight: 500; opacity: .92; }
/* 운영 화면: 이름 아래에 출근·퇴근 라벨이 세로로 붙는다 */
.myatt-head__punch { display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: rgba(255, 255, 255, .92); }
.myatt-head__clock { flex: none; display: flex; gap: 12px; }
.myatt-clockbtn { width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .18); color: #fff; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; font-size: 12.5px; font-weight: 700; }
.myatt-clockbtn:hover { background: rgba(255, 255, 255, .28); }
.myatt-clockbtn.is-done { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .68); }
.myatt-clockbtn__ic { width: 20px; height: 20px; fill: none; }
/* 운영 화면: 근로제/근무지 · 출결확인/결재진행 · 휴가요약이 각각 별도 박스다 */
.myatt-head__info, .myatt-head__todo { flex: 1; min-width: 0;
  border: 1px solid var(--c-bg-cool); border-radius: 10px; display: flex; flex-direction: column; }
.myatt-info__row { flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 18px; }
.myatt-info__row + .myatt-info__row,
.myatt-head__todo .myatt-info__link + .myatt-info__link { border-top: 1px solid var(--c-bg-cool); }
.myatt-info__lab { font-size: 13px; color: #666; }
.myatt-info__row b { font-size: 14px; color: #222; }
.myatt-head__todo .myatt-info__link { flex: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 0 18px;
  border: 0; background: none; cursor: pointer; font-size: 13px; color: #444; }
.myatt-head__todo .myatt-info__link b { display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--c-brand); }
.myatt-info__link .icon { width: 14px; height: 14px; fill: #aab1bb; }
.myatt-head__leave { flex: none; width: 210px; border: 1px solid var(--c-bg-cool); border-radius: 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 18px; }
.myatt-leave__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #666; }
.myatt-leave__row b { font-size: 14px; color: var(--c-brand); }

.myatt-toggle { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: hidden; }
.myatt-toggle__btn { height: 30px; padding: 0 14px; border: 0; background: #fff; font-size: 13px; color: #666; cursor: pointer; }
.myatt-toggle__btn + .myatt-toggle__btn { border-left: 1px solid var(--c-bg-cool); }
.myatt-toggle__btn.is-active { background: var(--c-primary); color: #fff; font-weight: 700; }

/* 운영 화면: 섹션 타이틀 우측에 [주간][월간] · 기준일자 · [조회] */
.myatt-sechead { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 22px 0 10px; }
.myatt-sechead .myatt-sec__t { margin: 0; }
.myatt-sechead__ctrl { display: flex; align-items: center; gap: 8px; }
.myatt-daybox.is-month input { width: 136px; }
.myatt-wkbox { border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 16px 18px; }
.myatt-wkbox__head { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; }
.myatt-wkbox__range { font-size: 14px; font-weight: 700; color: #222; }
.myatt-wkbox__body { display: flex; gap: 24px; align-items: center; }
.myatt-wktl { flex: 1; min-width: 0; }
/* 막대 위 시간축 눈금(운영 화면) — 막대 영역과 좌우를 맞춘다 */
.myatt-wktl__axis { display: flex; justify-content: space-between; margin: 0 92px 6px 78px;
  font-size: 11.5px; color: #98a0ab; }
.myatt-wktl__legend { display: flex; gap: 16px; }
.myatt-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #666; }
.myatt-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.myatt-wktl__row { display: flex; align-items: center; gap: 12px; height: 28px; }
.myatt-wktl__row.is-today .myatt-wktl__d { color: var(--c-brand); font-weight: 700; }
.myatt-wktl__d { width: 66px; flex: none; font-size: 12.5px; color: #666; }
.myatt-wktl__bar { flex: 1; height: 10px; border-radius: 5px; background: #f1f2f5; overflow: hidden; }
.myatt-wktl__bar i { display: block; height: 100%; background: #003879; border-radius: 5px; }
.myatt-wktl__v { width: 92px; flex: none; text-align: right; font-size: 12.5px; color: #444; }
.myatt-gauge { flex: none; width: 132px; height: 132px; position: relative; display: flex; align-items: center; justify-content: center; }
.myatt-gauge__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#003879 0 30%, #f1f2f5 0); }
.myatt-gauge__ring::after { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.myatt-gauge__lab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.myatt-gauge__lab span { font-size: 11.5px; color: #888; }
.myatt-gauge__lab b { font-size: 14px; color: #222; }

.myatt-gridbox { border: 1px solid var(--c-bg-cool); border-radius: 6px; overflow: auto; }
.myatt-grid td.is-c, .myatt-grid th.is-c { text-align: center; }
.myatt-grid td.is-left { text-align: left; }
.myatt-grid td.is-r { text-align: right; }
.myatt-grid__empty td { color: var(--c-text-3); background: #fff; }
.myatt-grid__chk { width: 40px; overflow: visible; text-overflow: clip; }
.myatt-grid__chk input { width: 16px; height: 16px; accent-color: var(--c-primary); }

.myatt-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px;
  font-size: 12px; font-weight: 700; }
.myatt-badge--ok { background: #eaf1ff; color: var(--c-brand); }
.myatt-badge--wait { background: #fff4e5; color: #b26a00; }
.myatt-badge--bad { background: #fdecec; color: #c04b4b; }

/* ---- 2) 근태일정(월 캘린더 + 신청유형 팝오버) ---- */
.myatt-plan__top { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--c-bg-cool); }
.myatt-plan__nav { display: flex; align-items: center; gap: 8px; }
.myatt-plan__arrow { width: 26px; height: 26px; border: 1px solid var(--c-bg-cool); border-radius: 4px;
  background: #fff; display: grid; place-items: center; cursor: pointer; }
.myatt-plan__arrow .icon { width: 13px; height: 13px; fill: #6b7785; }
.myatt-plan__ym { font-size: 18px; font-weight: 700; color: #222; min-width: 76px; text-align: center; }
.myatt-plan__cal { width: 18px; height: 18px; fill: #6b7785; }
.myatt-plan__today { height: 30px; padding: 0 14px; border: 1px solid var(--c-bg-cool); border-radius: 6px;
  background: #fff; font-size: 13px; color: #444; cursor: pointer; }
.myatt-cal__head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--c-bg-cool); }
.myatt-cal__hd { text-align: center; padding: 10px 0; font-size: 13px; font-weight: 700; color: #666; }
.myatt-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.myatt-cal__cell { min-height: 92px; border-right: 1px solid var(--c-bg-cool); border-bottom: 1px solid var(--c-bg-cool);
  padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.myatt-cal__cell:hover { background: #f7faff; }
.myatt-cal__cell.is-out { color: #c3cad4; cursor: default; }
.myatt-cal__cell.is-out:hover { background: none; }
.myatt-cal__cell.is-today .myatt-cal__num { background: var(--c-brand); color: #fff; }
.myatt-cal__num { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 13px; color: #222; }
.myatt-cal__num.is-holi { color: #ff2828; }
.myatt-cal__cell.is-today .myatt-cal__num.is-holi { color: #fff; }
.myatt-cal__holi { font-size: 11px; color: #ff2828; }
.myatt-cal__evwrap { display: flex; flex-direction: column; gap: 2px; }
.myatt-cal__ev { font-size: 11px; padding: 2px 6px 2px 7px; border-left: 3px solid; font-weight: 600; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; margin-bottom: 2px; }
.myatt-cal__ev:hover { filter: brightness(.97); }
.myatt-plan__menu { display: flex; flex-direction: column; padding: 6px; background: #fff; border: 1px solid var(--c-bg-cool);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); min-width: 200px; }
.calendar-application-menu__button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border: 0; background: none; border-radius: 6px; font-size: 13px; color: #222; cursor: pointer; text-align: left; }
.calendar-application-menu__button:hover { background: #f7faff; }
.calendar-application-menu__marker { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ---- 3) 근태신청(좌 유형 리스트 + 우 동적 폼) ---- */
.myatt-req.fillview { padding: 0; overflow: hidden; }
.myatt-req__body { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 16px 20px 20px; }
.myatt-req__side { flex: none; width: 280px; display: flex; flex-direction: column; min-height: 0; }
.myatt-req__main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.myatt-req__title { font-size: 15px; font-weight: 700; color: #222; margin: 0 0 10px; }
.myatt-req__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 8px; }
.myatt-typebtn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid transparent;
  border-radius: 6px; background: #fff; font-size: 13.5px; color: #444; cursor: pointer; text-align: left; }
.myatt-typebtn:hover { background: #f7faff; }
.myatt-typebtn.is-active { background: #eaf1ff; border-color: var(--c-primary); color: var(--c-brand); font-weight: 700; }
.myatt-req__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.myatt-frow { display: flex; gap: 16px; margin-bottom: 14px; }
.myatt-fld { flex: 1; min-width: 0; }
.myatt-fld--full { flex: 0 0 100%; }
.myatt-fld__lab { display: block; font-size: 13px; font-weight: 600; color: #222; margin-bottom: 6px; }
.myatt-fld__lab.req::after { content: ' *'; color: #ff2828; }
.myatt-inp { height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: 6px; font-size: 13px;
  color: #222; width: 100%; box-sizing: border-box; }
.myatt-inp[readonly] { background: var(--c-bg-soft); color: #666; }
.myatt-inp--t { width: 66px; flex: none; text-align: center; }
.myatt-inp--d { flex: 1; text-align: center; }
.myatt-inp--n { width: 52px; flex: none; text-align: center; }
.myatt-daterange, .myatt-timerange { display: flex; align-items: center; gap: 8px; }
.myatt-timerange span { font-size: 13px; color: #888; white-space: nowrap; }
.myatt-inp__suf { font-size: 13px !important; color: #444 !important; font-weight: 600; }
.myatt-person { position: relative; display: flex; align-items: center; }
.myatt-person input { padding-right: 32px; }
.myatt-person__ic { position: absolute; right: 10px; width: 14px; height: 14px; fill: #aab1bb; }
.myatt-hint { font-size: 12.5px; color: #666; line-height: 32px; }
.myatt-req__btns { display: flex; gap: 8px; margin-top: 4px; }
.myatt-btn { height: 34px; padding: 0 18px; border-radius: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.myatt-btn--line { background: #fff; border-color: var(--c-bg-cool); color: #444; }
.myatt-btn--primary { background: var(--c-primary); color: #fff; }
.myatt-btn--icon { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary); border-color: var(--c-primary); }
.myatt-btn--icon .icon { fill: #fff; }
.myatt-fixmodal__sub { font-size: 13px; font-weight: 700; color: #222; margin: 4px 0 8px; }

/* ---- 4) 근태이력(탭 4개) ---- */
.myatt-hist.fillview { gap: 0; }
.myatt-hist__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-bg-cool); margin-bottom: 16px; }
.myatt-hist__tab { height: 38px; padding: 0 4px; margin-right: 22px; border: 0; background: none; font-size: 14px;
  font-weight: 600; color: #8a93a0; cursor: pointer; position: relative; }
.myatt-hist__tab.is-active { color: var(--c-brand); font-weight: 700; }
.myatt-hist__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.myatt-hist__srch { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.myatt-hist__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.myatt-cnt { display: flex; gap: 16px; font-size: 13px; color: #666; }
.myatt-cnt b { color: var(--c-brand); font-weight: 700; }
.myatt-cnt--wide { font-size: 12.5px; color: #666; }

/* ---- 근태신청: 문서번호/결재상태 링크, 취소신청서 문서선택 모달 (dev1 실측 보완) ---- */
.myatt-doclink { color: var(--c-primary); text-decoration: underline; cursor: pointer; background: none; border: 0;
  font-size: inherit; padding: 0; }
.myatt-person__btn { position: absolute; right: 6px; width: 22px; height: 22px; border: 0; background: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.myatt-person__btn .icon { width: 14px; height: 14px; fill: #aab1bb; }
.myatt-docpicker__cnt { font-size: 13px; color: #666; margin: 0 0 8px; }
.myatt-docpicker__cnt b { color: var(--c-brand); font-weight: 700; }
.myatt-docpicker .myatt-gridbox + .myatt-fixmodal__sub { margin-top: 16px; }

/* ============================================================
   연말정산 자료입력(사업소득) — .bzi-* (js/133b-view-yearend-admin.js)
   라이브 YA-02-100 구조: 좌 소득자 마스터 / 우 4탭.
   컬럼은 비율 colgroup + table-layout:fixed 라 좁으면 가로 스크롤, 넓으면 고르게 늘어난다
   (예전엔 마지막 컬럼이 남는 폭을 전부 먹어 표가 깨져 보였다).
   ============================================================ */
.bzi-body { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
.bzi-left { width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.bzi-leftbtns { display: flex; gap: 6px; margin-bottom: 10px; }
.bzi-leftbtns .vsm-actbtn:last-child { margin-left: auto; color: #d64545; border-color: #f0c4c4; }
.bzi-counts { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0 2px 8px; font-size: 13px; color: #666; }
.bzi-cnt b { color: var(--c-brand); font-weight: 700; }
.bzi-cnt.is-right { margin-left: auto; }
.bzi-masterbox { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.bzi-right { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.bzi-tabrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bzi-actbtns { display: flex; gap: 6px; flex: none; }
.bzi-pane { flex: 1; min-height: 0; overflow: auto; }

/* 섹션 타이틀(+ 우측 액션) */
.bzi-secttl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.bzi-secttl:not(:first-child) { margin-top: 18px; }
.bzi-secttl strong { font-size: 15px; font-weight: 700; color: var(--c-brand); }
.bzi-delbtn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid #f0c4c4;
  border-radius: 4px; background: #fff; color: #d64545; font-size: 13px; cursor: pointer; }
.bzi-delbtn .icon { fill: #d64545; }

/* 공통 박스 */
.bzi-box { border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.bzi-box.is-scroll { overflow-x: auto; }
.bzi-grid { table-layout: fixed; }
.bzi-grid td.bzi-chk, .bzi-grid th.bzi-chk { width: 34px; overflow: visible; text-overflow: clip; text-align: center; }
.bzi-grid thead th { white-space: normal; line-height: 15px; }
.bzi-req { color: #ff2828; margin-left: 2px; }
.bzi-in { width: 100%; height: 24px; border: 0; background: transparent; font-size: 14px; color: #222; padding: 0 6px; }
.bzi-in.is-r { text-align: right; }
.bzi-in:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--c-primary); border-radius: 3px; }
.bzi-newrow td { background: #fff; }
.bzi-mastergrid tr.is-sel td { background: #e9f0ff; }
.bzi-mastergrid tr { cursor: pointer; }
.bzi-state { color: var(--c-primary); }
.bzi-state.is-closed { color: #666; }
.bzi-jobgrid tr.is-sel td { background: #eef3fd; }

/* 사업별 소득금액 — 합계바를 박스 하단에 고정(데이터 영역만 스크롤) */
.bzi-gridbox { display: flex; flex-direction: column; max-height: 260px; }
.bzi-scroll { flex: 1; min-height: 0; overflow: auto; }
.bzi-foot { flex: none; border-top: 1px solid #d8dde5; overflow: hidden; }
.bzi-jobfoot td { background: #f7f9fc; font-weight: 700; }
.bzi-footlab { text-align: center; }

/* 공제자료입력 — 항목 카드 4종 */
.bzi-dedlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; margin: 0 0 14px; padding: 0; }
.bzi-dedbtn { border: 1px solid var(--c-bg-cool); border-radius: 6px; padding: 10px 12px; cursor: pointer; background: #fff; transition: .12s; }
.bzi-dedbtn:hover { border-color: var(--c-primary); }
.bzi-dedbtn.is-active { border-color: var(--c-brand); background: #f3f7ff; box-shadow: inset 0 -2px 0 var(--c-brand); }
.bzi-dedbtn__lab { font-size: 13px; color: #555; margin: 0 0 6px; }
.bzi-dedbtn.is-active .bzi-dedbtn__lab { color: var(--c-brand); font-weight: 700; }
.bzi-dedbtn__val { font-size: 15px; font-weight: 700; color: #222; text-align: right; margin: 0; }
.bzi-dedtop { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.bzi-detailbtn { height: 28px; padding: 0 12px; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff;
  color: #444; font-size: 13px; cursor: pointer; }
.bzi-detailbtn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bzi-dedamt { padding: 0 4px; }
.bzi-note { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fafbfd; }
.bzi-note ul { margin: 0; padding-left: 16px; }
.bzi-note li { font-size: 13px; color: #555; line-height: 1.6; list-style: disc; }

/* 정산명세 — 좌우 2단 서식 + 납부세액 표 */
.bzi-settle { display: flex; gap: 12px; align-items: flex-start; }
.bzi-settle > .bzi-box { flex: 1; min-width: 0; }
.bzi-fgrid { table-layout: fixed; }
.bzi-fgrid td { border: 1px solid #e4e4e4; padding: 6px 10px; font-size: 14px; }
.bzi-fgrp { text-align: center; background: #f1f2f5; font-weight: 700; color: #444; line-height: 15px; padding: 6px 2px; }
.bzi-flab { background: #fafbfd; color: #222; }
.bzi-flab.is-sub { padding-left: 22px; }
.bzi-fval { width: 34%; }
.bzi-pen { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.bzi-pen .icon { width: 13px; height: 13px; fill: #6b7785; }
.bzi-paybox { margin-top: 16px; }
.bzi-paygrid { table-layout: fixed; }
.bzi-paygrid th, .bzi-paygrid td { border: 1px solid #e4e4e4; padding: 6px 10px; font-size: 14px; }
.bzi-paygrid th { background: #f1f2f5; font-weight: 700; color: #444; text-align: center; }
.bzi-payside { width: 4%; background: #eef3fd !important; line-height: 18px; }

/* 간소화자료입력 > 간편제출(공제신고서) 탭 — 라이브 YA-01-512 (js/107) */
.ye-secttl--easy { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ye-hh { display: flex; align-items: center; gap: 10px; }
.ye-hh__lab { font-size: 13px; font-weight: 700; color: #444; }
.ye-easysumbox { margin-top: 16px; }
.ye-easysum thead th { position: static; }
.ye-easysum td { text-align: center; }
.ye-easydoc td.ye-docname { text-align: left; }
.ye-gridbox + .ye-secttl { margin-top: 18px; }


/* ══════════════════════════════════════════════════════════════
   연말정산 자료입력 — 공제자료입력 상세 (라이브 실측 2026-08-18)
   항목마다 전용 폼/그리드. 공통 3열 표(구버전) 대체.
   ══════════════════════════════════════════════════════════════ */
/* 검색바 — 정산년월 달력 아이콘 · 조회(outline) */
.ye-monwrap { position: relative; display: inline-flex; align-items: center; }
.ye-monwrap .ye-inp--mon { padding-right: 30px; }
.ye-calbtn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; }
.ye-calbtn .icon { width: 15px; height: 15px; fill: #8a93a0; }
.ye-search .po-search.ye-go { background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); }
.ye-search .po-search.ye-go .icon { fill: var(--c-primary); }
/* 사원 그리드 — 사원번호·부서 링크색 */
.ye-empgrid td.ye-lnk .po-cell__v { color: var(--c-primary); }
.ye-grid th.ye-grid__chk { width: 30px; overflow: visible; text-overflow: clip; text-align: center; padding: 0; }
.ye-grid th.ye-grid__chk input { vertical-align: middle; margin: 0; cursor: pointer; }
/* ⓘ 툴팁 */
.ye-tip--i .ye-tip__btn { width: 16px; height: 16px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }
.ye-tip--i .ye-tip__btn .icon { width: 14px; height: 14px; fill: #8a93a0; }

/* 섹션 헤더 / 소제목 */
.ye-dd { display: block; }
.ye-dsec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 8px; }
.ye-dd > .ye-dsec__head:first-child { margin-top: 0; }
.ye-dsec__head.is-btnonly { justify-content: flex-end; margin: 8px 0 6px; }
.ye-dsec__ttl { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--c-brand); }
.ye-dsec__btns { display: flex; align-items: center; gap: 6px; }
.ye-dbtn { height: 28px; }
.ye-dbtn-del { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; font-size: 13px; color: #8a93a0; cursor: pointer; }
.ye-dbtn-del .icon { width: 15px; height: 15px; fill: #ff6b6b; }
.ye-dsub { margin: 16px 0 6px; font-weight: 700; }
.ye-dsub--1 { font-size: 14px; color: var(--c-brand); }
.ye-dsub--2 { font-size: 13px; color: #333; padding-left: 2px; }
.ye-dsub--3 { font-size: 13px; color: #444; padding-left: 10px; font-weight: 600; }

/* 상세 그리드 */
.ye-ddgrid thead th { padding: 5px 8px; line-height: 15px; white-space: normal; }
.ye-ddgrid thead th .ye-th__t { white-space: pre-line; }
.ye-req { margin-left: 2px; color: #ff2828; font-style: normal; font-weight: 700; }
.ye-ddgrid td.ye-ro { background: var(--c-bg-soft); }
.ye-ddgrid tbody tr.is-sel > td { background: #eef3ff; }
.ye-ddgrid tbody tr.is-sel > td.ye-ro { background: #e3ebfa; }
.ye-ddgrid td.ye-rrn, .ye-ddgrid tbody tr.is-sel > td.ye-rrn { background: #ffdcdc; }
.ye-ddgrid tfoot td, .ye-ddgrid tbody tr.ye-mcode > td { background: #f7f8fa; font-weight: 700; color: #444; }
.ye-ddgrid td.ye-findcell { position: relative; overflow: visible; padding-right: 26px; }
.ye-find { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--c-bg-cool); border-radius: 3px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ye-find .icon { width: 11px; height: 11px; fill: #8a93a0; }
.ye-gridbox--auto { overflow-x: auto; }

/* 신용카드 등 — 합계바 박스 하단 고정(데이터영역과 분리) */
.ye-ddbox { display: flex; flex-direction: column; overflow: hidden; }
.ye-ddbox__body { flex: 1; min-height: 0; max-height: 420px; overflow: auto; }
.ye-ddbox__foot { flex: none; overflow: hidden; border-top: 1px solid #e1e5ea; }
.ye-ddfoot td { background: #f7f8fa; font-weight: 700; color: #444; }
.ye-ddfoot td.ye-ddfoot__lab { text-align: center; }

/* 2열 라벨/값 폼 */
.ye-dform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; padding: 6px 2px 4px; }
.ye-dform--1col { grid-template-columns: minmax(0, 1fr); }
.ye-dfrow { display: flex; align-items: center; gap: 12px; }
.ye-dflab { flex: none; width: 168px; font-size: 13px; font-weight: 600; color: #333; white-space: pre-line; line-height: 1.4; }
.ye-dform--1col .ye-dflab { width: 340px; }
.ye-dfval { flex: 1; min-width: 0; }
.ye-dinp { width: 190px; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: 13px; color: #222; }
.ye-dinp.is-ro { background: var(--c-bg-soft); }
.ye-dinp.is-r { text-align: right; }
.ye-dinpwrap { position: relative; display: inline-flex; align-items: center; }
.ye-dinpwrap .ye-dinp { padding-right: 32px; }
.ye-drow1 { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.ye-dflab--box { width: auto; height: 32px; display: inline-flex; align-items: center; padding: 0 14px;
  background: var(--c-bg-soft); border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.ye-dflab--gap { margin-left: 28px; width: auto; }

/* 하단 안내 블록 */
.ye-dnote { margin-top: 16px; padding: 12px 4px 4px; border-top: 1px solid var(--c-bg-cool); display: flex; flex-direction: column; gap: 10px; }
.ye-dnote__grp { display: flex; flex-direction: column; gap: 2px; }
.ye-dnote__h { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #333; }
.ye-dnote__li { position: relative; margin: 0; padding-left: 12px; font-size: 12.5px; color: #666; line-height: 1.65; }
.ye-dnote__li::before { content: '\00B7'; position: absolute; left: 3px; font-weight: 700; }

/* 기부금 하단 탭 */
.ye-dtabs { display: flex; margin: 20px 0 0; border-bottom: 1px solid var(--c-bg-cool); }
.ye-dtab { height: 36px; padding: 0 18px; border: 0; background: none; font-size: 13.5px; font-weight: 600; color: #8a93a0; cursor: pointer; }
.ye-dtab:hover { color: var(--c-primary); }
.ye-dtab.is-active { color: var(--c-brand); font-weight: 700; box-shadow: inset 0 -2px 0 var(--c-brand); }
.ye-dtabs + .ye-gridbox { margin-top: 10px; }
.ye-dsubrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ye-dsubrow .ye-dsub { margin-bottom: 6px; }
/* 공제자료입력 탭 — 신용카드 합계바를 박스 하단에 고정하려면 pane 이 flex 칼럼이어야 한다 */
.ye-pane--ded { display: flex; flex-direction: column; }
.ye-pane--ded > .ye-dedlist { flex: none; }
.ye-pane--ded > .ye-dd { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ye-pane--ded > .ye-dd > * { flex: none; }
.ye-pane--ded > .ye-dd > .ye-ddbox { flex: 1; min-height: 180px; }
.ye-ddbox__body { max-height: none; }

/* ══════════════════════════════════════════════════════════════
   조회 버튼 = outline (라이브 실측 2026-08-18)
   upharos 전역 `.btn.btn-search` = 흰 배경 / 1px solid #738aa5 /
   글자·아이콘 #003879 / 32px / radius 6px / weight 500.
   데모는 채움(네이비)으로 잘못 구현돼 있어 전 화면 일괄 교정한다.
   ══════════════════════════════════════════════════════════════ */
:root { --c-srch-line: #738aa5; }
.b2b-srchbtn { border: 1px solid var(--c-srch-line); background: #fff; color: var(--c-brand); font-weight: 500; }
.b2b-srchbtn .icon { fill: var(--c-brand); }
/* 근태·나의업무 계열은 조회 버튼도 공용 .rpt-btn.is-primary 를 쓴다(저장·발행 등과 공유).
   돋보기 아이콘을 품은 것만 골라 조회 버튼으로 판별 — JS 수정 없이 스코프한다. */
.rpt-btn.is-primary:has(use[href="#icon-search"]) {
  background: #fff; border-color: var(--c-srch-line); color: var(--c-brand); font-weight: 500;
}
.rpt-btn.is-primary:has(use[href="#icon-search"]):hover { background: #f4f7fd; filter: none; }
.rpt-btn.is-primary:has(use[href="#icon-search"]) .icon { fill: var(--c-brand); }
/* 연말정산 전용 override 제거 — 이제 .po-search 자체가 outline 이라 불필요 */
.ye-search .po-search.ye-go { background: #fff; border-color: var(--c-srch-line); color: var(--c-brand); }
.ye-search .po-search.ye-go .icon { fill: var(--c-brand); }
/* 아이콘 없는 조회 버튼(리포트·나의업무 계열)도 라이브와 동일하게 outline + 돋보기 */
.rpt-btn.is-primary.is-search { background: #fff; border-color: var(--c-srch-line); color: var(--c-brand); font-weight: 500; }
.rpt-btn.is-primary.is-search:hover { background: #f4f7fd; filter: none; }
.rpt-btn.is-primary.is-search .icon { fill: var(--c-brand); }
/* 2026-08-20 라이브 재실측: [상세 검색]/[초기화]는 .rpt-btn 기본(남색 강조)이 아니라 회색 보조버튼 */
.rpt-btn.nt-detailbtn, .rpt-btn.ev-detailbtn { border-color: #e1e5ea; color: #888; font-weight: var(--fw-medium); }
/* 화면 전용 조회버튼(계정과목·직원관리) */
.acctm-search__btn, .emp-search__btn { border: 1px solid var(--c-srch-line); background: #fff; color: var(--c-brand); font-weight: 500; }
.acctm-search__btn .icon, .emp-search__btn .icon { fill: var(--c-brand); }
.eled-srchbtn, .cert-srchbtn, .ec-srchbtn,
.vat-btn.is-primary.is-search { border: 1px solid var(--c-srch-line); background: #fff; color: var(--c-brand); font-weight: 500; }
.eled-srchbtn .icon, .cert-srchbtn .icon, .ec-srchbtn .icon,
.vat-btn.is-primary.is-search .icon { fill: var(--c-brand); }
.vat-btn.is-primary.is-search:hover { background: #f4f7fd; filter: none; }

/* ══════════════════════════════════════════════════════════════
   매입매출전표 검색조건 — 라이브 실측(2026-08-18) 1:1
   .search-default(기본 1행, 32px) + .search-detail(상세 3행, 122px)
   세그먼트: radius 0 / 선택 #003879 채움+흰글씨 / 비선택 #fff+#888 테두리·글자 / h30
   ══════════════════════════════════════════════════════════════ */
.ps-drange { display: inline-flex; align-items: center; gap: 6px; }
.ps-calbtn { width: 40px; height: 32px; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; cursor: pointer; }
.ps-calbtn .icon { width: 16px; height: 16px; fill: var(--c-text-3); }
.ps-fld { display: inline-flex; align-items: center; gap: 8px; }
.ps-fld__lab { font-size: var(--fs-14); color: #888; font-weight: 500; white-space: nowrap; }
.ps-amtin, .ps-basisin { height: 32px; min-width: 210px; padding: 0 10px; border: 1px solid var(--c-bg-cool);
  border-radius: var(--r-md); font-size: var(--fs-13); color: #333; background: #fff; }
.ps-sel { height: 32px; min-width: 130px; padding: 0 10px; border: 1px solid var(--c-bg-cool);
  border-radius: var(--r-md); font-size: var(--fs-13); color: #333; background: #fff; }
.ps-sel--wide { min-width: 200px; }
.ps-sel:disabled { background: var(--c-bg-soft); color: var(--c-text-3); }
.ps-findbox { display: inline-flex; align-items: center; gap: 4px; }
.ps-findbox input { height: 32px; width: 190px; padding: 0 10px; border: 1px solid var(--c-bg-cool);
  border-radius: var(--r-md); font-size: var(--fs-13); color: #333; background: var(--c-bg-soft); }
.ps-find { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid var(--c-srch-line); border-radius: var(--r-md); background: #fff; cursor: pointer; }
.ps-find .icon { width: 14px; height: 14px; fill: var(--c-brand); }
.ps-fright { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.ps-detail.is-on .icon { transform: rotate(180deg); }
/* 세그먼트 — 라이브는 붙어 있는 사각형(radius 0) */
.ps-seg { display: inline-flex; }
.ps-seg button { height: 30px; padding: 0 14px; white-space: nowrap; border: 1px solid #888; background: #fff; color: #888;
  font-size: var(--fs-13); font-weight: 400; cursor: pointer; margin-left: -1px; }
.ps-seg button:first-child { margin-left: 0; }
.ps-seg button.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; position: relative; z-index: 1; }
/* 상세 드로어 — 검색조건 바 안에서 아래로 펼쳐진다(별도 박스 아님) */
.ps-filter { flex-direction: column; align-items: stretch !important; gap: 0 !important; }
.ps-frow { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; min-height: 32px; }
.ps-sdetail { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.ps-sdetail.hidden { display: none; }
/* 상세 드로어 4열 정렬 — 라이브 실측: 라벨 폭 80px 고정, 열 피치 368px(0/368/736/1104).
   왼쪽 패킹이 아니라 열이 맞아 마지막 열 우측이 조회 버튼과 정렬된다. */
/* 1fr = minmax(auto,1fr) — 콘텐츠 최소폭을 존중해 세그먼트가 줄바꿈되지 않는다.
   minmax(0,1fr) 로 하면 세그 텍스트가 2~3줄로 눌린다. */
.ps-drow { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 12px 16px; }
.ps-fld__lab { width: 80px; flex: none; }
.ps-drow .ps-findbox { flex: 1; min-width: 0; }
.ps-drow .ps-findbox input { flex: 1; min-width: 0; width: auto; }
.ps-drow .ps-basisin { flex: 1; min-width: 0; }
.ps-reset { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2);
  font-size: var(--fs-13); cursor: pointer; }
.ps-reset .icon { width: 14px; height: 14px; fill: var(--c-text-3); }

/* ================================================================
   월간결산보고서 (.mrpt) — 회계관리 > 보고서
   라이브 `.main-dashboard.monthly-report` 실측 1:1 (_refs/monthly-closing-report-spec.md)
   ================================================================ */
.mrpt { width: 100%; max-width: 1620px; min-width: 1280px; margin: 0 auto; padding-bottom: 28px; color: #222; line-height: normal; display: flex; flex-direction: column; gap: 16px; }
.mrpt-body { display: flex; flex-direction: column; gap: 16px; }
.mrpt i { font-style: normal; }

/* 상단 타이틀 / 월 피커 / 새로고침 */
.mrpt-top { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mrpt-title { display: flex; align-items: center; gap: 12px; height: 24px; font-size: 20px; font-weight: 700; color: #003879; }
.mrpt-top--pick { justify-content: center; }
.mrpt-picker { display: flex; align-items: center; justify-content: center; gap: 12px; height: 32px; }
.mrpt-arrow { width: 16px; height: 16px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.mrpt-arrow .icon { width: 16px; height: 16px; fill: #888; }
.mrpt-arrow:hover .icon { fill: #555; }
.mrpt-monthbox { display: flex; align-items: center; height: 32px; border-radius: 4px; background: #fff; overflow: hidden; }
.mrpt-monthinput { width: 112px; min-height: 32px; padding: 4px 8px; border: 0; text-align: center; font-size: 18px; font-weight: 700; color: #222; background: transparent; cursor: default; }
.mrpt-calbtn { width: 20px; height: 20px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.mrpt-calbtn .icon { width: 18px; height: 18px; fill: #555; }
.mrpt-refresh { position: absolute; right: 0; top: 4px; display: flex; align-items: center; gap: 4px; }
.mrpt-refreshbtn { width: 22px; height: 22px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.mrpt-refreshbtn .icon { width: 16px; height: 16px; fill: #888; }
.mrpt-refreshbtn:hover .icon { fill: #555; }
.mrpt-refreshdate { font-size: 12px; color: #666; }

/* 섹션 타이틀 */
.mrpt-rowtitle { margin-top: 4px; padding-left: 12px; border-left: 4px solid #003879; font-size: 16px; font-weight: 700; color: #003879; }
.mrpt-rowdesc { margin-left: 8px; font-size: 12px; font-weight: 400; color: #888; }

/* 행/박스 공통 */
.mrpt-row { display: flex; width: 100%; gap: 30px; }
.mrpt-box { flex: 1 1 50%; min-width: calc(50% - 15px); }
.mrpt-item { display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; }
.mrpt-cont { height: 100%; padding: 20px; border-radius: 10px; overflow: hidden; }
.mrpt-boxtitle { display: flex; align-items: center; justify-content: space-between; line-height: 32px; }
.mrpt-boxtitle strong { font-size: 16px; font-weight: 700; color: #003879; }
.mrpt-boxtitle .mrpt-desc { font-size: 12px; color: #777; }

/* 증감 표기(부호는 ::before) */
.mrpt-fluct { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.mrpt-fluct::before { margin-right: 2px; }
.mrpt-fluct.increase { color: #376cfb; }
.mrpt-fluct.increase::before { content: '+'; }
.mrpt-fluct.decrease { color: #ff2828; }
.mrpt-fluct.decrease::before { content: '-'; }
.mrpt-compare { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border: 1px solid #ccc; border-radius: 99px; background: #fff; font-size: 12px; font-weight: 700; line-height: 24px; color: #222; white-space: nowrap; }

/* row1 — 핵심 재무 지표 */
.mrpt-row--1 .mrpt-box { flex: 1 1 25%; min-width: calc(25% - 30px); background: #f7f9ff; }
.mrpt-cont--card { display: flex; align-items: center; gap: 44px; }
.mrpt-summary { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mrpt-cardtitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; line-height: 24px; font-size: 16px; font-weight: 700; color: #003879; }
.mrpt-price { display: flex; align-items: center; justify-content: flex-end; height: 40px; padding: 0 8px; font-size: 24px; font-weight: 700; color: #222; border-radius: 4px; }

/* row2 — 자금 흐름 분석 */
.mrpt-row--2 .mrpt-cont { height: 316px; }
.mrpt-cont--flow { display: flex; flex-direction: column; gap: 8px; }
.mrpt-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; margin-bottom: 8px; }
.mrpt-listitem { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; font-size: 13px; border-bottom: 1px solid #e1e5ea; }
.mrpt-list .mrpt-listitem:last-child { border-bottom: 0; }
.mrpt-listlabel { font-size: 13px; font-weight: 500; }
.mrpt-listvalue { display: flex; align-items: center; gap: 4px; }
.mrpt-listvalue.has-gauge { flex-direction: row-reverse; gap: 12px; }
.mrpt-listvalue .mrpt-fluct { justify-content: flex-end; min-width: 120px; font-size: 14px; }
.mrpt-gauge { position: relative; width: 100px; height: 6px; border-radius: 99px; background: #e0e0e0; overflow: hidden; }
.mrpt-gaugebar { position: absolute; top: 0; left: 0; height: 6px; border-radius: 99px; }
.mrpt-gaugebar.increase { background: #376cfb; }
.mrpt-gaugebar.decrease { background: #ff2828; }
.mrpt-listitem.is-total { min-height: 52px; padding: 0 20px; border-top: 1px solid #ccc; border-bottom: 0; }
.mrpt-listitem.is-total .mrpt-listlabel { font-size: 16px; }
.mrpt-listitem.is-total .mrpt-fluct { font-size: 24px; font-weight: 700; }
.mrpt-empty { padding: 40px 0; text-align: center; font-size: 13px; color: #888; border-bottom: 0; }

/* 차트 */
.mrpt-cont--chart { display: flex; flex-direction: column; gap: 4px; }
.mrpt-chart { width: 100%; overflow: hidden; }
.mrpt-chartsvg { display: block; }
.mrpt-chartsvg .mrpt-axislabel { font-size: 12px; font-weight: 500; fill: #666; }
.mrpt-chartsvg .mrpt-datalabel { font-size: 12px; fill: #666; }
.mrpt-chartsvg .mrpt-datalabel.is-neg { fill: #ff2828; }

/* row3 — 매출 및 영업 현황 */
.mrpt-row--3 .mrpt-cont { height: 360px; }
.mrpt-cont--sales { display: flex; flex-direction: column; gap: 6px; }
.mrpt-status { display: flex; align-items: center; gap: 8px; }
.mrpt-statusbox { flex: 1 1 0; padding: 20px; border: 1px solid #e1e5ea; border-radius: 16px; background: linear-gradient(to right, #fdfdfd, #f6f6f6); }
.mrpt-statusbox.is-point { border-color: #376cfb; background: linear-gradient(to right, #f0f7ff, #eef0fa); }
.mrpt-statusbox.is-point .mrpt-statusprice { color: #376cfb; }
.mrpt-statuscont { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mrpt-statustitle { line-height: 32px; font-size: 15px; font-weight: 600; color: #666; }
.mrpt-statusprice { text-align: right; font-size: 24px; font-weight: 700; white-space: nowrap; }
.mrpt-listvalue.is-col { flex-direction: column; align-items: flex-end; gap: 4px; }
.mrpt-streamprice { font-size: 16px; font-weight: 700; color: #376cfb; }
.mrpt-streamratio { font-size: 13px; color: #444; }
.mrpt-per { display: flex; align-items: center; padding-left: 104px; padding-right: 8px; }
.mrpt-per li { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.mrpt-tag { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 56px; height: 24px; padding: 0 8px; border-radius: 99px; background: #f1f2f5; font-size: 12px; font-weight: 700; }
.mrpt-tag.increase { color: #376cfb; background: #e6ecff; }
.mrpt-tag.decrease { color: #b91c1c; background: #fee2e2; }
.mrpt-tag.is-hidden { visibility: hidden; }

/* 월 선택 팝오버(데모 — 라이브 Wijmo 달력 대체) */
.mrpt-monthpop { width: 232px; padding: 12px; }
.mrpt-monthpop__head { padding: 0 4px 8px; font-size: 13px; font-weight: 700; color: #003879; }
.mrpt-monthpop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mrpt-monthpop__cell { height: 30px; border: 1px solid var(--c-bg-cool); border-radius: 6px; background: #fff; font-size: 13px; color: #333; cursor: pointer; }
.mrpt-monthpop__cell:hover { background: #f4f7ff; }
.mrpt-monthpop__cell.is-sel { border-color: #376cfb; background: #e6ecff; color: #376cfb; font-weight: 700; }

/* 일반(대체)전표 — 라이브 실측(2026-08-18 그리드 입력방식):
   툴바 한 줄(좌 액션 + 전표구분 안내 / 우 전표묶기·전표라인추가·삭제) + 그 아래 카운트 줄.
   신규 입력 라인은 그리드 맨 아랫줄. */
.gv-toolwrap { flex: none; }
.gv-toolwrap > .pt-toolbar { margin-bottom: 6px; }
.gv-count { margin-left: 0; }
.pt-tbtn.pt-tbtn--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pt-tbtn.pt-tbtn--primary .icon { fill: #fff; }
.pt-tbtn.pt-tbtn--primary:hover { background: var(--c-primary); filter: brightness(.96); }
/* 일반(대체)전표 등록 팝업(팝업 입력 방식) */
.gvf { display: flex; flex-direction: column; gap: 14px; }
.gvf-row, .gvf-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gvf-fld { display: flex; align-items: center; gap: 8px; }
.gvf-lab { flex: none; width: 74px; font-size: var(--fs-13); font-weight: 600; color: #333; }
.gvf-in, .gvf-sel { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool);
  border-radius: var(--r-md); font-size: var(--fs-13); color: #222; background: #fff; }
.gvf-in[readonly] { background: var(--c-bg-soft); color: var(--c-text-3); }
.gvf-sect { margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--c-brand); }
.gvf-lines { display: flex; flex-direction: column; gap: 8px; }
.gvf-line { padding: 8px 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: var(--c-bg-soft-2); }
.gvf-del { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.gvf-del .icon { width: 16px; height: 16px; fill: #ff6b6b; }
.gvf-addrow { display: flex; }
/* 일반(대체)전표 — 브레드크럼 우측 입력방식 전환(데모 편의) */
.gv-modesw { display: inline-flex; align-items: center; gap: 14px; margin-left: 20px;
  padding: 0 14px; height: 28px; border-left: 1px solid var(--c-bg-cool); }
.gv-modesw__lab { font-size: var(--fs-13); font-weight: 700; color: var(--c-brand); }
.gv-modesw__radios { display: inline-flex; align-items: center; gap: 12px; }
.gv-modesw__r { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-13); color: #333; cursor: pointer; }
.gv-modesw__r input { accent-color: var(--c-primary); cursor: pointer; }
.gv-modesw__desc { margin-left: 4px; font-size: var(--fs-12); color: var(--c-text-3); white-space: nowrap; }

/* 일반(대체)전표 등록 팝업 — 라이브 실측(1302x782) */
.gvf { display: flex; flex-direction: column; gap: 0; }
.gvf-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 40px; padding: 4px 0 14px; }
.gvf-sub { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--c-bg-cool); }
.gvf-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gvf-lab { flex: none; width: 74px; font-size: var(--fs-13); font-weight: 600; color: #333; }
.gvf-sub .gvf-lab { width: auto; min-width: 48px; }
.gvf-in { height: 32px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md);
  font-size: var(--fs-13); color: #222; background: #fff; min-width: 0; }
.gvf-in[readonly] { background: var(--c-bg-soft); }
.gvf-in--sm { width: 96px; }
.gvf-in--wide, .gvf-in--amt { flex: 1; }
.gvf-date { display: inline-flex; align-items: center; gap: 4px; }
.gvf-date .gvf-in { width: 194px; }
.gvf-find { display: inline-flex; align-items: center; gap: 4px; }
.gvf-find .gvf-in { flex: 1; min-width: 0; }
.gvf-findbtn { width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid var(--c-srch-line); border-radius: var(--r-md); background: #fff; cursor: pointer; }
.gvf-findbtn .icon { width: 14px; height: 14px; fill: var(--c-brand); }
.gvf-chkbox, .gvf-radio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-13); color: #333; cursor: pointer; }
.gvf-chkbox input, .gvf-radio input { accent-color: var(--c-primary); cursor: pointer; }
.gvf-radios { display: inline-flex; align-items: center; gap: 18px; }
.gvf-attach { margin-left: auto; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-text-2); font-size: var(--fs-13); cursor: pointer; }
.gvf-attach .icon { width: 14px; height: 14px; fill: var(--c-text-3); }
.gvf-jhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 8px; border-top: 1px solid var(--c-bg-cool); }
.gvf-jtit { font-size: var(--fs-14); font-weight: 700; color: var(--c-brand); }
.gvf-jright { display: inline-flex; align-items: center; gap: 12px; }
.gvf-jbox { display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 4px; overflow: hidden; }
.gvf-jscroll { max-height: 300px; min-height: 220px; overflow: auto; }
.gvf-jfootbar { flex: none; border-top: 1px solid var(--c-bg-cool); background: #f7f8fa; }
.gvf-jgrid { width: 100%; table-layout: fixed; }
.gvf-jgrid th, .gvf-jgrid td { height: 30px; padding: 0 8px; font-size: var(--fs-13); border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
.gvf-jgrid th { background: #f1f2f5; font-weight: 700; color: #444; text-align: center; }
.gvf-jgrid td.gvf-chk, .gvf-jgrid th.gvf-chk { width: 36px; text-align: center; overflow: visible; text-overflow: clip; padding: 0; }
.gvf-jfoot td { font-weight: 700; color: #444; }
.gvf-cellin { width: 100%; height: 26px; border: 0; background: none; font-size: var(--fs-13); color: #222; padding: 0 2px; }
.gvf-cellin.is-r { text-align: right; }
.gvf-cellsel { width: 100%; height: 26px; border: 0; background: none; font-size: var(--fs-13); color: #222; }
.pt-tbtn.pt-tbtn--cancel { color: #ff2828; border-color: #ffc9c9; }
/* 일반(대체)전표 — 팝업 입력 방식의 마스터/디테일 (라이브: 마스터 아래 분개 상세) */
.gv-gridwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gv-gridwrap > .gv-gridhost { flex: 1; min-height: 0; }
.gv-dethost { flex: none; display: flex; flex-direction: column; margin-top: 12px; }
.gv-dethost[hidden] { display: none; }
.gv-dettit { margin: 0 0 6px; font-size: var(--fs-14); font-weight: 700; color: var(--c-brand); }
.gv-detbox { max-height: 240px; overflow: auto; border: 1px solid var(--c-bg-cool); border-radius: 4px; }
.gv-detgrid { width: 100%; table-layout: fixed; }
.gv-grid tbody tr.is-sel > td { background: #eef3ff; }

/* ══════════════════════════════════════════════════════════════
   그리드 데이터 행 높이 — 라이브 실측 정합 (2026-08-18)
   라이브(Wijmo)는 .wj-cell { min-height:30px; padding:6px 10px } 이고
   체크박스류에는 min-height:auto 를 걸어 행이 밀리지 않게 한다.
   데모는 HTML table + border-collapse 라 공유 보더 1px 이 더해져
   **31px 가 구조적 하한**이다(= 6+18+6+1). 31px 를 목표로 잡는다.
   33px 이상으로 커지는 원인은 셀 안 인라인 요소가 baseline 정렬로
   라인박스를 밀어올리기 때문 — 체크박스(+2) · 상태배지(+2) · 스위치(+6).
   ══════════════════════════════════════════════════════════════ */
.content table tbody td > input[type=checkbox],
.content table tbody td > input[type=radio] { display: block; margin: 0 auto; }
.content table tbody td > .badge,
.content table tbody td > .ev-st,
.content table tbody td > [class*='-badge'],
.content table tbody td > [class*='-st'][class*='is-'] {
  height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; vertical-align: middle; }
/* line-height 가 normal 로 남아 있던 그리드들 → 18px */
.itm-grid td, .itm-grid th, .auth-permgrid td, .auth-permgrid th,
.auth-usergrid td, .auth-usergrid th, .aa-grid td, .aa-grid th,
.payr-footgrid td, .payr-footgrid th { line-height: 18px; }

/* ══════════════════════════════════════════════════════════════
   툴바 버튼 규격 통일 — 라이브 실측(2026-08-18 기초정보 전 화면)
   라이브: min-width 80 / padding 0 12px → 다운로드 94 · 업로드 82 · 2글자 80
           글자 #003879 · 비활성 #888 · 삭제는 비활성에서도 #ff2828
   데모는 클래스마다 min-width 70~82 / color #666 / 비활성 #9b959f 로 흩어져 있었다.
   (.pt-tbtn 은 앞서 같은 규격으로 맞춰 라이브와 폭이 정확히 일치함 — 그 기준을 따른다)
   ══════════════════════════════════════════════════════════════ */
.itm-tbtn, .pitem-tbtn, .psite-tbtn, .fa-tbtn, .bc-tbtn, .ds-tbtn, .acctm-tbtn {
  min-width: 80px; padding: 0 12px; color: var(--c-brand);
  display: inline-flex; align-items: center; justify-content: center; }
.itm-tbtn:disabled, .pitem-tbtn:disabled, .psite-tbtn:disabled, .fa-tbtn:disabled,
.bc-tbtn:disabled, .ds-tbtn:disabled, .acctm-tbtn:disabled { color: #888; }
.itm-tbtn .icon, .pitem-tbtn .icon, .psite-tbtn .icon, .fa-tbtn .icon,
.bc-tbtn .icon, .ds-tbtn .icon, .acctm-tbtn .icon { width: 15px; height: 15px; }
/* 삭제 계열은 비활성에서도 빨강 유지(라이브 #ff2828) */
.itm-tbtn--del, .pitem-tbtn--del, .psite-tbtn--del, .fa-tbtn--del, .bc-tbtn--del,
.ds-tbtn--del, .acctm-tbtn--del,
.itm-tbtn--del:disabled, .pitem-tbtn--del:disabled, .psite-tbtn--del:disabled,
.fa-tbtn--del:disabled, .bc-tbtn--del:disabled, .ds-tbtn--del:disabled, .acctm-tbtn--del:disabled {
  color: #ff2828; }
/* 툴바 좌/우 그룹 (라이브: 좌측 액션 → 카운트 → 우측 등록·수정·삭제) */
.pitem-tools--left, .pt-tools--left { margin-left: 0; }
.pitem-tools--right { margin-left: auto; }
.pitem-toolbar { display: flex; align-items: center; gap: 12px; }
/* 고정자산 전기자료불러오기 — 라이브 #376cfb */
.fa-tbtn.fa-tbtn--prior { color: var(--c-primary); border-color: var(--c-primary); padding: 0 8px; }
/* 툴바 버튼 간격 — 라이브 8px (데모 6px 이라 x좌표가 2px 씩 밀렸다) */
.pt-tools, .itm-tools, .pitem-tools, .psite-tools, .fa-tools, .bc-tools, .ds-tools, .acctm-tools { gap: 8px; }
/* 설정 화면 그리드 — 라이브 셀 padding 6px 10px (데모는 6px 14px 이었음) */
.acs-grid th, .acs-grid td { padding: 6px 10px; }
/* 설정 그리드 셀 안 컨트롤 — 라이브 30px 행에 맞춰 18px (데모는 20~28px 라 행이 37~41px) */
.acs-grid td > .acs-sw { height: 18px; vertical-align: middle; }
.acs-grid td > .psset-cellin, .acs-grid td > .psset-pick { height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.acs-grid td > .psset-pick input { height: 18px; }

/* 계정과목 — 라이브 실측(2026-08-18): 분류탭·별도 검색조건 바가 없고,
   그리드 폭 안 한 줄에 [분류명] … [사용중만][검색][초기화][다운로드][세목계정추가][수정][삭제].
   좌측 트리 300px, 트리↔그리드 gap 40px. */
.acctm-gridhead { flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; }
.acctm-gridhead__r { display: flex; align-items: center; gap: 8px; }
.acctm-clstit { font-size: var(--fs-15); font-weight: 700; color: var(--c-brand); }
.acctm-body { gap: 40px; }
/* ★ 2026-08-20 실측 버그 수정: 이 규칙(icon-only 40px 정사각 버튼)이 2360행 기본 규칙을
   덮으면서 justify-content 가 어디에도 안 남아, 아이콘이 세로만 중앙이고 가로는 왼쪽에
   붙어 보였다(가로 중앙정렬 누락). */
.acctm-search__btn { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
.acctm-tbtn.acctm-tbtn--sub { color: var(--c-primary); }
.acctm-tbtn.acctm-tbtn--sub:disabled { color: #888; }

/* ══════════════════════════════════════════════════════════════
   툴바 버튼 규격 — 전 모듈 통일 (라이브 실측 2026-08-18)
   min-width 80 / padding 0 12px / height 32 / gap 5 / 글자 #003879
   비활성 #888, 삭제류 #ff2828, 컨테이너 gap 8px
   → 다운로드 94 · 업로드 82 · 2글자 80 이 라이브와 정확히 일치한다.
   (기초정보에서 itm/pitem/psite/fa/bc/ds/acctm/pt 로 검증한 규격을 나머지로 확대)
   ══════════════════════════════════════════════════════════════ */
.po-tbtn, .b2b-tbtn, .stx-tbtn, .pd-tbtn, .ec-tbtn, .rent-tbtn, .ci-actbtn,
.eled-tbtn, .cert-tbtn, .svl-tbtn, .sve-tbtn, .payr-tbtn, .rpt-btn, .attx-tbtn, .areq-tbtn {
  min-width: 80px; height: 32px; padding: 0 12px; gap: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-brand); white-space: nowrap; }
.po-tbtn:disabled, .b2b-tbtn:disabled, .stx-tbtn:disabled, .pd-tbtn:disabled,
.ec-tbtn:disabled, .rent-tbtn:disabled, .ci-actbtn:disabled, .eled-tbtn:disabled,
.cert-tbtn:disabled, .svl-tbtn:disabled, .sve-tbtn:disabled, .payr-tbtn:disabled,
.attx-tbtn:disabled, .areq-tbtn:disabled { color: #888; }
.po-tbtn .icon, .b2b-tbtn .icon, .stx-tbtn .icon, .pd-tbtn .icon, .ec-tbtn .icon,
.rent-tbtn .icon, .ci-actbtn .icon, .payr-tbtn .icon { width: 15px; height: 15px; }
/* 툴바 컨테이너 간격 — 라이브 8px */
.po-toolbar, .b2b-toolbar, .stx-toolbar, .pd-toolbar, .ec-toolbar, .rent-toolbar,
.acctm-tools, .bc-tools, .fa-tools, .itm-tools, .pitem-tools, .psite-tools, .ds-tools,
.po-tools, .b2b-tools, .stx-tools, .pd-tools, .ec-tools, .rent-tools { gap: 8px; }
/* 툴바 버튼 — 폰트/폭 보정 및 누락 클래스 포함 (라이브: 다운로드 94px) */
.po-tbtn, .rpt-btn, .b2b-tbtn, .stx-tbtn, .pd-tbtn, .ec-tbtn, .rent-tbtn, .ci-actbtn,
.payr-tool, .eled-tool, .svl-tool, .sve-tool {
  min-width: 80px; height: 32px; padding: 0 12px; gap: 5px; font-size: var(--fs-14);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-brand); white-space: nowrap; }
.payr-tool:disabled, .eled-tool:disabled, .svl-tool:disabled, .sve-tool:disabled { color: #888; }
.payr-tool .icon, .eled-tool .icon, .svl-tool .icon, .sve-tool .icon { width: 15px; height: 15px; }
/* 툴바 컨테이너 간격 8px 통일 */
.rpt-filter, .pt-toolbar, .pitem-toolbar, .acctm-gridhead, .pay-ledtool, .ev-toolbar,
.payr-toolbar, .eled-toolbar, .svl-toolbar, .sve-toolbar, .pr-controls, .rpt-toolbar { gap: 8px; }

/* 상세 검색조건 버튼 — 라이브는 검색조건 바 우측 끝(툴바 아님) */
/* 2026-08-20 라이브 재실측(견적서/매입세금계산서): [상세 검색]은 강조색이 아니라 회색 톤 보조버튼 */
.po-detailbtn { margin-left: auto; height: 32px; min-width: 102px; padding: 0 12px; border: 1px solid #e1e5ea; border-radius: 6px; background: #fff; color: #888; font-size: 14px; font-weight: 500; cursor: pointer; }
.po-detailbtn:hover { background: #f6f8fb; }
/* [상세 검색] 뒤에 바로 [조회]가 오면 필터바 우측 끝 그룹으로 붙어야 한다(auto margin은 상세검색 하나만) */
.po-detailbtn + .po-search { margin-left: 8px; }
/* 장부 툴바 우측 ⓘ 도움말 (라이브 16px 아이콘) */
.bk-tooltip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: #222; font-size: 14px; line-height: 1; cursor: help; }
.bk-tooltip.bk-toolright { margin-left: auto; margin-right: 8px; }

/* ── 툴바 등록/작성 버튼은 라이브에서 outline(#003879) — 채워진 파란 버튼 없음 ──
   (라이브 실측 2026-08-18: 등록·작성 11건 모두 배경 흰색 + 글자 #003879) */
.ev-toolbar .rpt-btn.is-primary, .awpl-btn-add.is-primary, .awsy-btn-add.is-primary {
  background: #fff; color: var(--c-brand); border-color: var(--c-bg-cool); }
.ev-toolbar .rpt-btn.is-primary:hover, .awpl-btn-add.is-primary:hover, .awsy-btn-add.is-primary:hover {
  background: var(--c-bg-soft); color: var(--c-brand); filter: none; }
/* 지출결의서·영수증수취명세서 툴바 규격(min-width 80 / padding 0 12px / 32h) */
.es-toolbar .pt-act, .rcs-abtn {
  min-width: 80px; height: 32px; padding: 0 12px; gap: 5px; font-size: var(--fs-14);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-brand); white-space: nowrap; }
.es-toolbar .pt-act:disabled, .rcs-abtn:disabled { color: #888; opacity: 1; }
.es-toolbar .pt-act .icon, .rcs-abtn .icon { width: 15px; height: 15px; }
.es-delbtn, .es-delbtn:disabled, .rcs-abtn.is-danger, .rcs-abtn.is-danger:disabled { color: #ff2828; }
.es-toolbar, .rcs-toolbar { gap: 8px; }
/* 보고서 툴바 — 라이브는 검색조건 바 아래 별도 줄, 다운로드는 좌측 정렬 */
.rpt-toolbar--l { justify-content: flex-start; }
.rpt-toolbar--l .rpt-actions { margin-left: auto; }
.rpt-toolbar .rpt-btn { min-width: 80px; height: 32px; padding: 0 12px; gap: 5px; font-size: var(--fs-14); }

/* ══════════════════════════════════════════════════════════════
   그리드 행높이 정합 — 라이브 데이터행 30px(데모 하한 31px).
   셀 안 인라인 컨트롤(배지·스위치·미니버튼·셀입력)이 20~28px 이라
   행이 33~41px 로 부풀어 있었다. 전부 18px 로 낮춘다.
   (라이브 실측 2026-08-18: 전 모듈 셀 30|6px 10px)
   ══════════════════════════════════════════════════════════════ */
.stx-grid td .stx-cellwrap, .stx-grid td .stx-cinp, .stx-grid td .stx-typesel,
.stx-grid td .rup-clip,
.attx-grid td .attx-act,
.b2b-grid td .b2b-minibtn, .b2b-grid td .b2b-sw,
.ps-grid td .ps-gubun, .gv-grid td .es-route, .gv-grid td .es-tlink,
.ec-grid td .eca-statuscell, .ec-grid td .eca-dl {
  height: 18px; min-height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;
  box-sizing: border-box; vertical-align: middle; }
.stx-grid td .stx-cellwrap, .ec-grid td .eca-statuscell, .ec-grid td .eca-dl,
.b2b-grid td .b2b-sw { display: inline-flex; align-items: center; }
.gv-grid td .es-route, .gv-grid td .es-tlink, .ps-grid td .ps-gubun,
.attx-grid td .attx-act, .b2b-grid td .b2b-minibtn { display: inline-block; }
.stx-grid td .stx-cinp, .stx-grid td .stx-typesel { padding-left: 6px; padding-right: 6px; }
.b2b-grid td .b2b-sw { width: 32px; }
.b2b-grid td .b2b-sw::after, .b2b-grid td .b2b-sw span { top: 2px; }
/* 급여명세서 그리드 — 라이브 30|6px 10px (데모 40px: 상세 버튼 24px) */
.myp-grid th, .myp-grid td { padding: 6px 10px; }
.myp-grid td .myp-detail { height: 18px; min-height: 18px; line-height: 18px; padding: 0 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
/* 그리드 셀 안 돋보기(pick) 버튼 — 22px 라 셀 padding 6px 적용 후 행이 35px 이 됐다 */
.po-grid td .po-pick { height: 18px; width: 18px; min-height: 18px; }
.po-grid td .po-pick .icon { width: 13px; height: 13px; }
/* 그리드 셀 좌우 padding 라이브 10px 통일(데모 6/8px) + 분개 그리드 셀 컨트롤 18px */
.vsm-grid th, .vsm-grid td { padding-left: 10px; padding-right: 10px; }
.stx-jrnl th, .stx-jrnl td, .ps-jrnl th, .ps-jrnl td { padding-left: 10px; padding-right: 10px; }
.stx-jrnl td > *, .ps-jrnl td > * { max-height: 18px; }
.stx-jrnl td input, .stx-jrnl td select, .ps-jrnl td input, .ps-jrnl td select {
  height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
/* 툴바 우측 정렬 버튼(라이브: 삭제·불러오기류가 맨 우측) */
.po-tbtn--right { margin-left: auto; }
.po-tbtn--right ~ .po-tbtn { margin-left: 0; }
/* 집금이체 그리드 셀 내 미니버튼(예금주 조회) — 행 31px 유지 */
.nt-mini { height: 18px; line-height: 18px; padding: 0 8px; border: 1px solid var(--c-bg-cool); border-radius: 4px; background: #fff; color: var(--c-brand); font-size: var(--fs-12); cursor: pointer; }
.nt-mini:hover { background: var(--c-bg-soft); }
/* 그리드 헤더 필수표시 — 라이브 <label class="require"> 재현 */
.vsm-req { color: #ff2828; font-style: normal; margin-left: 2px; }

/* ══════════════════════════════════════════════════════════════
   일반(대체)전표 — 라이브 실측(2026-08-19) 마스터+분개 2단 구조
   입력방식과 무관하게 목록은 전표 1건 1행 마스터(14컬럼),
   그 아래 합계바 → 분개 상세(13컬럼, 하단 차/대 합계행).
   ══════════════════════════════════════════════════════════════ */
.gv-mgrid td.gv-in, .gv-mgrid td.gv-in span { color: #ff2828; }
.gv-mgrid td.gv-cell--ro { color: #888; background: var(--c-bg-soft); }
.gv-clip { width: 14px; height: 14px; fill: #6b7785; vertical-align: middle; }
.gv-detbox { display: flex; flex-direction: column; border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; }
.gv-detscroll { max-height: 220px; overflow: auto; }
.gv-detfootbar { flex: none; border-top: 1px solid var(--c-bg-cool); background: var(--c-bg-soft); }
.gv-detfoot td { font-weight: 700; color: #222; background: var(--c-bg-soft); border-color: #e4e4e4; }
.gv-detgrid td, .gv-detgrid th { white-space: nowrap; }
/* 일반전표 입력행 — 셀 컨트롤 18px 로 낮춰 데이터 행(31px)과 높이를 맞춘다 */
.gv-mgrid .gv-grid__new .gv-cell-inp, .gv-detgrid .gv-grid__new .gv-cell-inp {
  height: 18px; min-height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.gv-mgrid .gv-grid__new .gv-cellsrch__b, .gv-detgrid .gv-grid__new .gv-cellsrch__b { height: 18px; width: 18px; }

/* ══════════════════════════════════════════════════════════════
   세금신고 2분할 화면 — 라이브 실측(2026-08-19)
   콘텐츠 캔버스 1600px 를 좌/우 두 판으로 나누고 사이 24px.
   전자화폐결제명세서(440/1136) · 신용카드매출전표 발행금액집계표(788/788)
   ══════════════════════════════════════════════════════════════ */
.vsm-panes { display: grid; gap: 24px; align-items: start; }
.vsm-pane { min-width: 0; display: flex; flex-direction: column; }
.vsm-panehead { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-bottom: 8px; }
.vsm-panetit { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
.vsm-panehead__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* 라이브 신용카드매출전표 발행금액집계표 — 출력/저장이 제목 바로 옆에 붙는다(우측 정렬 아님) */
.vsm-panehead__r.is-inline { margin-left: 0; }
/* 명세 그리드 섹션 제목줄 우측 [추가][삭제] — 라이브 동일 */
.vsm-sectools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vsm-panebtn.is-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.vsm-panebtn.is-primary:hover { background: #2f60e0; border-color: #2f60e0; }
/* 발급내역 값은 회색 박스가 아니라 입력칸(흰 배경·테두리·우측정렬) */
.vsm-kv--input dd { background: none; padding: 0 10px; }
.vsm-ibox { display: block; height: 32px; line-height: 30px; padding: 0 10px; text-align: right;
  background: #fff; border: 1px solid var(--c-bg-cool); border-radius: 6px; }
/* 첫 행(합계) 선택 강조 — 라이브 동일 */
.vsm-secbox .vsm-grid tbody tr.is-sel td { background: #eef4ff; color: var(--c-primary); }
.vsm-panebtn { min-width: 80px; height: 32px; padding: 0 12px; gap: 5px; font-size: var(--fs-14);
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-brand); cursor: pointer; }
.vsm-panebtn:hover { background: var(--c-bg-soft); }
.vsm-panebtn.is-danger { color: #ff2828; }
.vsm-panebtn .icon { width: 15px; height: 15px; fill: currentColor; }
.vsm-panebody { border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 300px; }
.vsm-shopgrid, .vsm-emgrid { width: 100%; }
.vsm-shopgrid tbody tr { cursor: pointer; }
.vsm-shopgrid tbody tr.is-sel { background: #eef3ff; }
.vsm-emscroll { flex: 1; min-height: 0; overflow: auto; }
.vsm-emfoot { flex: none; border-top: 1px solid var(--c-bg-cool); }
.vsm-emfoot .vsm-grid td { background: var(--c-bg-soft); font-weight: 700; }
/* 홈택스 자료 판(신용카드매출전표 발행금액집계표 우측) — 라이브 실측 */
.vsm-hxpane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vsm-hxtabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-bg-cool); }
.vsm-hxtab { height: 30px; border: 0; background: none; font-size: var(--fs-15); font-weight: var(--fw-semibold);
  color: #a8afb8; cursor: pointer; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsm-hxtab.is-on { color: var(--c-brand); font-weight: var(--fw-bold); }
.vsm-hxtab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); }
.vsm-hxbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vsm-hxbar__lab { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #444; white-space: nowrap; }
.vsm-hxsel { min-width: 96px; }
.vsm-hxsearch { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-primary); cursor: pointer; }
.vsm-hxsearch .icon { width: 15px; height: 15px; fill: currentColor; }
.vsm-hxbar__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vsm-hxbody { display: flex; flex-direction: column; gap: 18px; }
.vsm-hxsec__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.vsm-hxsec__head strong { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-brand); }
.vsm-hxsec__head .vsm-hxnote { margin-left: auto; }
.vsm-hxnote { font-size: var(--fs-12); color: var(--c-text-3); white-space: nowrap; }
.vsm-hxbox { border: 1px solid var(--c-bg-cool); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.vsm-hxscroll { height: 190px; overflow: auto; }
.vsm-hxfoot { flex: none; border-top: 1px solid var(--c-bg-cool); }
.vsm-hxfoot .vsm-grid td { background: var(--c-bg-soft); font-weight: 700; }
.vsm-kv--2 { grid-template-columns: 200px 1fr 200px 1fr; }

/* ══════════════════════════════════════════════════════════════
   전계좌 현황 — 계좌구분(마스터) 선택에 따라 우측 패널이 통째로 바뀐다
   라이브 실측(2026-08-19): 입출금/예·적금/대출/펀드/외화 5종 패널
   ══════════════════════════════════════════════════════════════ */
.aa-head__r { margin-left: auto; display: flex; gap: 8px; }
.aa-hbtn { min-width: 80px; height: 32px; padding: 0 12px; font-size: var(--fs-14);
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; color: var(--c-brand); cursor: pointer; }
.aa-hbtn:hover { background: var(--c-bg-soft); }
/* 좌측 표 — 선택 구분만 파랑 점 */
.aa-krow.is-sel .aa-dot { background: #1f6fc4; }
.aa-dot { background: #9aa6b2; }
/* 우측 헤더 */
.aa-rhead__r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.aa-rsync { font-size: var(--fs-12); color: var(--c-text-3); white-space: nowrap; }
.aa-legend { display: flex; align-items: center; gap: 12px; }
.aa-leg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); color: #666; white-space: nowrap; }
.aa-legdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.aa-unitnote { text-align: left; font-size: var(--fs-12); color: var(--c-text-3); margin: 6px 0 4px; }
.aa-chart { margin-bottom: 8px; }
/* 계좌 리스트 */
.aa-alist { display: flex; flex-direction: column; }
.aa-arow { display: flex; align-items: flex-start; gap: 14px; padding: 14px 4px; border-bottom: 1px solid #eef0f4; }
.aa-arow:last-child { border-bottom: 0; }
.aa-arow__mark { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aa-bankmark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.aa-bankname { font-size: 11px; color: #777; white-space: nowrap; }
.aa-arow__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aa-arow__right { flex: none; text-align: right; display: flex; flex-direction: column; gap: 3px; }
.aa-aname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #222; }
.aa-aacc { display: flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: #555; }
.aa-asub { font-size: var(--fs-12); color: #888; }
.aa-aval { font-size: var(--fs-15); font-weight: var(--fw-bold); color: #222; font-variant-numeric: tabular-nums; }
.aa-adiff { font-size: var(--fs-12); color: #888; }
.aa-adiff .is-up { color: #e0352b; }
.aa-adiff .is-down { color: #2f6bd6; }
.aa-again { font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.aa-again.is-up { color: #e0352b; }
.aa-again.is-down { color: #2f6bd6; }
.aa-obadge { font-size: 11px; font-weight: var(--fw-medium); border-radius: 4px; padding: 2px 7px; background: #eef2f8; color: #5a6a80; }
.aa-kbadge { font-size: 11px; font-weight: var(--fw-medium); border-radius: 4px; padding: 2px 7px; background: #f1f2f5; color: #666; }
/* 대출 이자 달력 */
.aa-calbox { border: 1px solid var(--c-bg-cool); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
.aa-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.aa-cal th { height: 30px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #666; }
.aa-cal th.is-sun { color: #e0352b; }
.aa-calcell { height: 44px; text-align: center; vertical-align: middle; position: relative; }
.aa-calcell.is-sun .aa-calday { color: #e0352b; }
.aa-calcell.is-out .aa-calday { color: #c3c9d2; }
.aa-calday { font-size: var(--fs-13); color: #333; display: inline-block; min-width: 24px; height: 24px; line-height: 24px; border-radius: 6px; }
.aa-calcell.is-today .aa-calday { background: #eef2f8; font-weight: var(--fw-bold); }
.aa-caldot { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; }
/* 외화 환율 기준일 */
.aa-fxnote { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: var(--fs-12); color: var(--c-text-3); margin-bottom: 6px; }
.aa-fxlink { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--c-text-3); font-size: var(--fs-12); cursor: pointer; padding: 0; }
.aa-fxlink .icon { width: 12px; height: 12px; fill: currentColor; }
.aa-sumbar { width: 3px; height: 15px; border-radius: 2px; background: var(--c-primary); display: inline-block; flex: none; }
/* 2분할 화면 중 그리드 박스를 콘텐츠 하단까지 채우는 화면(전자화폐결제명세서) — 라이브 동일 */
.vsm--fill { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.vsm-single--fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vsm-single--fill .vsm-panes { flex: 1; min-height: 0; }
.vsm-single--fill .vsm-pane { height: 100%; }
.vsm-single--fill .vsm-panebody { flex: 1; min-height: 0; }

/* ══════════════════════════════════════════════════════════════
   상세 검색조건 펼침 드로어 (공용) — js/13-search-detail.js
   라이브 실측(2026-08-19 · 33화면): 검색조건 바 **안쪽**에서 `.search-detail`
   한 행이 펼쳐지고 폭이 넘치면 wrap(1줄 34px / 2줄 78px).
   [초기화]는 항상 마지막 줄 오른쪽 끝(margin-left:auto).
   실측 폭 — 검색기준 pick 90 + 검색어 178 · 코드도움 198 · 유형 pick 162 ·
            거래금액 174 · 기간 210 · 초기화 82
   ══════════════════════════════════════════════════════════════ */
.sdt { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; width: 100%; }
.sdt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 40px; }
.sdt.hidden { display: none; }
.sdt-fld { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sdt-lab { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: #444; white-space: nowrap; }
.sdt-in { height: 32px; width: 178px; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; font-size: var(--fs-14); color: #333; }
.sdt-in--kw { margin-left: 0; }
/* 코드도움형 드롭다운 (읽기전용 값 + 펼침 버튼) */
.sdt-pick { display: inline-flex; align-items: center; height: 32px; width: 122px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.sdt-pick input { flex: 1; min-width: 0; height: 30px; border: 0; padding: 0 8px; font-size: var(--fs-14); color: #333; background: transparent; cursor: default; }
.sdt-pick__b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.sdt-pick__b .icon { width: 14px; height: 14px; fill: #8a93a0; }
/* 코드도움 입력 (돋보기) */
.sdt-find { display: inline-flex; align-items: center; height: 32px; width: 198px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.sdt-find input { flex: 1; min-width: 0; height: 30px; border: 0; padding: 0 8px; font-size: var(--fs-14); color: #333; background: transparent; }
.sdt-find__b { flex: none; width: 32px; height: 30px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.sdt-find__b .icon { width: 15px; height: 15px; fill: #8a93a0; }
.sdt-seg { display: inline-flex; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); overflow: hidden; }
.sdt-seg__b { height: 30px; padding: 0 14px; border: 0; border-right: 1px solid var(--c-bg-cool); background: #fff; font-size: var(--fs-14); color: #555; cursor: pointer; white-space: nowrap; }
.sdt-seg__b:last-child { border-right: 0; }
.sdt-seg__b.is-on { background: var(--c-primary); color: #fff; font-weight: var(--fw-bold); }
.sdt-radios { display: inline-flex; align-items: center; gap: 14px; }
.sdt-radio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-14); color: #333; cursor: pointer; }
.sdt-range { display: inline-flex; align-items: center; gap: 6px; height: 32px; width: 210px; padding: 0 4px 0 12px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-md); font-size: var(--fs-14); color: #333; background: #fff; }
.sdt-range span { flex: 1; min-width: 0; white-space: nowrap; }
.sdt-cal { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 5px; }
.sdt-cal .icon { width: 15px; height: 15px; fill: #6b7785; }
.sdt-cal:hover { background: var(--c-bg-soft); }
/* 토글 버튼 — 펼침 상태에서 화살표 뒤집기 */
.sdt-chev { width: 14px; height: 14px; fill: currentColor; transition: transform .15s; }
.is-on > .sdt-chev { transform: rotate(180deg); }
/* 상세 검색조건 드로어를 품는 검색조건 바 — 드로어가 다음 줄로 내려가게 wrap 허용.
   드로어 위 간격은 .sdt 의 padding-top 12px 로만 만든다(라이브 실측) → 바의 row-gap 은 0. */
.pt-filter, .itm-filter, .pitem-filter, .rent-filter, .psite-filter, .fa-filter, .bc-filter,
.ds-filter, .stx-filter, .rpt-filter, .eled-filter, .cert-filter, .svl-filter,
.sve-filter, .payr-filter, .vat-filter, .ec-filter, .b2b-filter, .po-filterbar, .rcs-filter,
.myc-filter, .bk-filter { flex-wrap: wrap; }
.stx-filter:has(> .sdt), .po-filterbar:has(> .sdt), .b2b-filter:has(> .sdt),
.rcs-filter:has(> .sdt), .myc-filter:has(> .sdt), .bk-filter:has(> .sdt),
.fa-filter:has(> .sdt), .bc-filter:has(> .sdt), .rpt-filter:has(> .sdt),
.fa-filter:has(> .fa-detail-filter), .bc-filter:has(> .bc-detail-filter),
.myc-filter:has(> .myc-drawer), .ye-search:has(> .ye-drawer) { row-gap: 0; }

/* 장부 화면 섹션 헤드 — 라이브엔 제목+건수 밴드가 없다. 액션만 남길 때 쓰는 줄 */
.po-sec__head--actonly { justify-content: flex-end; }