/* ============================================================
stella-views.css — 스텔라 전용/차이 화면 스코프 CSS
화면 차이 흡수 3단 규칙의 2단계 자리다.
1단 토큰(brand-stella.css) → 2단 여기 → 3단 뷰 포크(st* 키 + 새 파일)
모든 룰은 html[data-brand="stella"] 로 시작한다.
============================================================ */
/* ============================================================
설정류 4화면 (회계·급여·재고·조직설정 — 전부 .acs 스코프 공유)
라이브 스텔라는 이 화면들을 `.stella .setting` 으로 다르게 그린다(실측):
· 탭·본문 1400px 가운데 정렬 (파로스는 좌측정렬 전폭)
· 섹션이 2단 — 좌측 260px 회색(#f1f2f5) 타이틀 컬럼 + 우측 1140px 본문
· 섹션 사이 구분은 border-top, 마지막 섹션만 border-bottom
데모 마크업(section.acs-sec > strong.acs-sec__t + p.acs-sec__desc + div.acs-sec__body)은
그대로 두고 grid 로만 재배치한다 — 뷰 파일을 포크하지 않는다(화면 차이 흡수 3단 규칙의 2단계).
타이틀은 1열 전체 행을 차지하고, 설명·본문은 2열로 간다.
============================================================ */
html[data-brand="stella"] .acs-tabs,
html[data-brand="stella"] .acs-head,
html[data-brand="stella"] .acs-body {
width: 1400px; max-width: 1400px; margin-left: auto; margin-right: auto;
}
html[data-brand="stella"] .acs-body { padding-left: 0; padding-right: 0; }
html[data-brand="stella"] .acs-sec {
display: grid; grid-template-columns: 260px 1fr;
margin-top: 0; padding-top: 0;
border-top: 1px solid var(--c-bg-cool);
}
html[data-brand="stella"] .acs-sec:last-child { border-bottom: 1px solid var(--c-bg-cool); }
/* 타이틀 = 좌측 회색 컬럼.
grid-row: 1 / -1 은 여기서 안 통한다 — 행이 전부 암시적(implicit)이라 -1 이 첫 줄을
가리켜 1행짜리로 접힌다(실제로 회색 배경이 중간에서 끊겼다). 넉넉히 span 해서
남는 암시 행(높이 0)까지 덮게 한다. */
html[data-brand="stella"] .acs-sec__t {
grid-column: 1; grid-row: 1 / span 99;
align-items: flex-start; align-content: flex-start;
margin-bottom: 0; padding: 20px;
background: var(--c-bg-soft); color: var(--c-text);
}
html[data-brand="stella"] .acs-sec__desc { grid-column: 2; margin: 0; padding: 24px 32px 0; }
html[data-brand="stella"] .acs-sec__body { grid-column: 2; padding: 24px 32px; }
/* 설명이 있으면 본문 위쪽 여백은 설명이 이미 만든다 */
html[data-brand="stella"] .acs-sec__desc + .acs-sec__body { padding-top: 12px; }
/* 설명(desc) 자리에 대신
를 넣는 화면
(재고설정 js/54, 조직설정 js/55 — sec(title, descNode, body) 의 descNode)은 위 규칙에
안 걸려 그리드 2열에 자동배치만 되고 패딩이 0 이었다. 그래서 설명 문단이 섹션 맨
위·왼쪽에 딱 붙어 아래 본문(32px 들여쓰기)과 어긋나 보였다(2026-08-24 사용자 QA:
"조직도 부서원 정렬 설정 — 설명 위치 수정 필요(위 패딩 값)"). desc 와 같은 취급을 준다.
ul 자체의 padding-left:18px(views.css)는 여기서 32px 로 덮여 본문과 좌측이 맞는다. */
html[data-brand="stella"] .acs-sec > .stk-bullets { grid-column: 2; margin: 0; padding: 24px 32px 0; }
html[data-brand="stella"] .acs-sec > .stk-bullets + .acs-sec__body { padding-top: 12px; }
/* [수정] 버튼은 마크업상 타이틀 안에 있어 260px 좌측 컬럼에서 줄바꿈된다.
라이브처럼 본문 영역 우상단으로 띄운다(마크업은 그대로). */
html[data-brand="stella"] .acs-sec { position: relative; }
html[data-brand="stella"] .acs-secbtn { position: absolute; right: 32px; top: 20px; margin: 0; }
/* 재고설정 "입출고조정 유형 등록 ‖ 창고등록"처럼 .acs-sec 두 개가 .acs-2sec(grid, 좌우 2단)
안에 나란히 들어가는 자리 — 2026-08-24 사용자 스크린샷 제보로 발견한 버그를 고친다.
.acs-2sec 는 grid 라 기본 align-items:stretch 로 두 .acs-sec 를 "더 긴 쪽"(입출고조정
유형 7행) 높이로 강제로 늘린다. 그러면 짧은 쪽(창고등록 2행)의 .acs-sec 내부에서
grid-row:1/span 99 로 전체 높이를 먹는 좌측 회색 타이틀 컬럼만 그 늘어난 높이를
그대로 따라가고(같은 이유로 위 §에서 문제였던 것과 정반대로, 이번엔 span 99 가 "남는
공간을 전부 흡수"), 본문(.acs-sec__body)은 원래 콘텐츠 높이(표 2행)만큼만 차지해
짧은 쪽 섹션 아래에 회색 타이틀만 덩그러니 남는 빈 칸이 생겼다(테두리가 서로 다른
높이에서 끊겨 마치 두 박스가 어긋나 겹친 것처럼 보임). 각 .acs-sec 가 자기 콘텐츠
높이만큼만 차지하게 스트레치를 끈다 — 좌우 섹션 높이가 다른 게 정상(라이브도 표 행
수만큼만 채운다). */
html[data-brand="stella"] .acs-2sec { align-items: start; }
/* ============================================================
전자결재 (js/200-view-stella-approval.js)
공용 .rpt-* 위에 얹는 전용 조각만. 라이브 실측 기준.
============================================================ */
/* 제목/문서양식 셀 — 한 줄에 제목 + 회색 양식명.
★ 2줄(제목 위 / 양식명 아래)로 그리면 행이 51px 이 되어 프로젝트 그리드 기준(31px,
34px 초과는 결함)을 어긴다. 라이브는 문서가 0건이라 데이터 행 높이를 못 쟀으므로,
기준을 지키는 한 줄 구성을 택했다. 라이브에 문서가 생기면 재확인할 것. */
html[data-brand="stella"] .stap-title { color: var(--c-text); }
html[data-brand="stella"] .stap-form { margin-left: 8px; font-size: var(--fs-12); color: var(--c-text-3); }
/* 첨부 클립 아이콘 — display 를 inline-block 으로 고정해야 한다.
base.css 의 .icon 이 블록으로 잡혀 있어 그대로 두면 셀 안에서 줄을 하나 더 만들고
행 높이가 31 -> 44px 로 뛴다(프로젝트 기준 34px 초과 = 결함). */
html[data-brand="stella"] .stap-clip {
display: inline-block; width: 13px; height: 13px;
fill: var(--c-text-3); vertical-align: middle; margin-right: 2px;
}
/* 결재상태 배지 */
html[data-brand="stella"] .stap-st {
display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 10px;
font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: 18px;
}
html[data-brand="stella"] .stap-st.is-wait { background: var(--c-bg-soft); color: var(--c-text-2); }
html[data-brand="stella"] .stap-st.is-ing { background: var(--c-primary-bg); color: var(--c-primary); }
html[data-brand="stella"] .stap-st.is-done { background: #e4f6ee; color: #0aa66e; }
html[data-brand="stella"] .stap-st.is-rej { background: #ffeaea; color: #ff2828; }
html[data-brand="stella"] .stap-st.is-hold { background: #fff2e0; color: #d9821a; }
/* 카운트 줄의 보조 표기·버튼 */
html[data-brand="stella"] .stap-selcount { margin-left: 12px; color: var(--c-text-3); font-size: var(--fs-13); }
html[data-brand="stella"] .rpt-count .rpt-btn { margin-left: 8px; }
html[data-brand="stella"] .stap-note { margin: 0; color: var(--c-text-3); font-size: var(--fs-13); line-height: 1.6; }
/* 카운트 줄(.stac-head) 버튼 우측 정렬 — 2026-08-24 사용자 QA: 제목·카운트는 왼쪽에 남기고
버튼 묶음만 오른쪽 끝으로 붙인다. .rpt-count 는 원래 flex 가 아니라(views.css, 공용) 버튼이
텍스트 바로 뒤에 붙어 있었다 — 여기서만 flex 로 바꾸고 첫 버튼에 auto 마진을 줘서(버튼끼리는
기존 8px 유지) 이후 버튼은 그대로 뒤따르게 한다(js/230/js/240 의 stac-head 공용). */
html[data-brand="stella"] .rpt-count.stac-head { display: flex; align-items: center; flex-wrap: nowrap; }
html[data-brand="stella"] .rpt-count.stac-head .rpt-btn:first-of-type { margin-left: auto; }
/* [조회] 는 좌측 인라인 — .rpt-actions 의 우측 정렬을 쓰지 않는다 */
html[data-brand="stella"] .stap-go { margin-left: 4px; }
/* 그리드 셀 안 세그먼트 — 기본 30px 는 행 높이 기준(31px)을 넘긴다. 20px 로 줄인다. */
html[data-brand="stella"] .stap-segsm .hist-seg__btn {
height: 18px; padding: 0 10px; font-size: var(--fs-12); line-height: 16px;
}
/* ============================================================
경영보고서 (js/220-view-stella-mgmtreport.js)
차트는 대시보드의 .chart 관용구를 그대로 쓰고, 색·범례·카드 배치만 여기서.
============================================================ */
html[data-brand="stella"] .stmr-chartbox { margin: 12px 0 16px; }
html[data-brand="stella"] .stmr-chart__t,
html[data-brand="stella"] .stmr-card__t {
display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand);
}
html[data-brand="stella"] .stmr-chart__ic { width: 15px; height: 15px; fill: var(--c-primary); }
html[data-brand="stella"] .stmr-chart__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
html[data-brand="stella"] .stmr-unit { font-size: var(--fs-12); color: var(--c-text-3); }
html[data-brand="stella"] .stmr-legend { display: flex; align-items: center; gap: 14px; }
html[data-brand="stella"] .stmr-leg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); color: var(--c-text-2); }
html[data-brand="stella"] .stmr-dot { width: 9px; height: 9px; border-radius: 2px; }
/* 시리즈 색 — 라이브 실측 계열(진파랑 / 연파랑 / 남색 / 하늘) */
html[data-brand="stella"] .stmr-bar0 { background: #1a5fd4; }
html[data-brand="stella"] .stmr-bar1 { background: #8fc0ff; }
html[data-brand="stella"] .stmr-bar2 { background: #10233f; }
html[data-brand="stella"] .stmr-bar3 { background: #47a6ff; }
html[data-brand="stella"] .stmr-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
html[data-brand="stella"] .stmr-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
html[data-brand="stella"] .stmr-card,
html[data-brand="stella"] .stmr-kpi {
padding: 16px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-lg); background: #fff;
}
html[data-brand="stella"] .stmr-sec { display: block; margin: 22px 0 10px; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-brand); }
html[data-brand="stella"] .stmr-note { margin: 0 0 10px; font-size: var(--fs-13); color: var(--c-text-3); }
html[data-brand="stella"] .stmr-minus { color: var(--c-error); }
html[data-brand="stella"] .stmr-info { width: 13px; height: 13px; fill: var(--c-text-3); margin-left: 4px; vertical-align: middle; }
/* 주요지표 총괄 상단 — 기준월 pill + 우측 설정 버튼 */
html[data-brand="stella"] .stmr-kpitop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
html[data-brand="stella"] .stmr-pill {
display: inline-block; padding: 5px 14px; border-radius: var(--r-pill);
background: var(--c-primary); color: #fff; font-size: var(--fs-13); font-weight: var(--fw-semibold);
}
/* 매출/비용 보고서만 검색조건 바가 있다(라이브 h32 — 다른 화면보다 낮다) */
html[data-brand="stella"] .stmr-filter .stmr-go { margin-left: 8px; display: inline-flex; gap: 6px; }
/* 차트 높이 — views.css 의 .chart__plot/.chart__col/.chart__bars 는 전부 height:100% 라
조상이 높이를 주지 않으면 막대가 0px 로 접힌다(대시보드는 카드가 높이를 준다).
경영보고서는 카드 안이라 여기서 명시해야 한다. */
html[data-brand="stella"] .stmr-chartbox .chart { display: flex; height: 180px; }
html[data-brand="stella"] .stmr-kpi .stmr-chartbox .chart { height: 150px; }
html[data-brand="stella"] .stmr-card .stmr-chartbox .chart { height: 160px; }
/* 상단 새로고침+조회일시(매출/매입/이익 현황·외상 매출/매입 보고서) */
html[data-brand="stella"] .stmr-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
html[data-brand="stella"] .stmr-refresh {
display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
border: 0; background: transparent; padding: 0; cursor: pointer; fill: var(--c-text-3);
}
html[data-brand="stella"] .stmr-date { font-size: var(--fs-13); color: var(--c-text-3); }
/* 월 이동(◀ 2026년 8월 ▶) — 재무상태/손익지표/현금흐름 요약 상단 */
html[data-brand="stella"] .stmr-monthnav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
html[data-brand="stella"] .stmr-navbtn {
display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
border: 1px solid var(--c-bg-cool); border-radius: 50%; background: #fff; padding: 0; cursor: pointer; fill: var(--c-text-2);
}
html[data-brand="stella"] .stmr-navlabel { min-width: 90px; text-align: center; font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-text); }
/* 도넛차트 — 매출/비용 보고서 "연간 비용 현황"(라이브 wijmo FlexPie) */
html[data-brand="stella"] .stmr-pie { display: flex; align-items: center; justify-content: center; height: 130px; }
html[data-brand="stella"] .stmr-pie__ring { position: relative; width: 128px; height: 128px; border-radius: 50%; }
html[data-brand="stella"] .stmr-pie__ring::after { content: ''; position: absolute; inset: 32%; background: #fff; border-radius: 50%; }
html[data-brand="stella"] .stmr-legend--wrap { flex-wrap: wrap; row-gap: 4px; }
/* 매출/비용 보고서 검색조건 — 1~12월 퀵버튼은 한 줄로(검색바가 여러 줄로 쪼개지면 안 된다) */
html[data-brand="stella"] .stmr-monthbtns { display: flex; flex-wrap: nowrap; gap: 4px; }
/* 외상 매출/매입 거래처 TOP10 순위 리스트 */
html[data-brand="stella"] .stmr-badge {
display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill);
background: var(--c-primary-bg); color: var(--c-primary); font-size: var(--fs-12); font-weight: var(--fw-semibold);
}
html[data-brand="stella"] .stmr-clientlist { margin: 10px 0 0; padding: 0; list-style: none; }
html[data-brand="stella"] .stmr-client { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-13); }
html[data-brand="stella"] .stmr-client__rank { width: 16px; color: var(--c-text-3); }
html[data-brand="stella"] .stmr-client__name { width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
html[data-brand="stella"] .stmr-client__bar { flex: 1; height: 8px; background: var(--c-bg-soft); border-radius: 4px; overflow: hidden; }
html[data-brand="stella"] .stmr-client__bar i { display: block; height: 100%; background: var(--c-primary); border-radius: 4px; }
html[data-brand="stella"] .stmr-client__amt { width: 76px; text-align: right; color: var(--c-text-2); }
html[data-brand="stella"] .stmr-clienttotal {
display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px;
border-top: 1px solid var(--c-bg-cool); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--c-text);
}
/* ============================================================
회계 신규 5화면 (js/230-view-stella-acct.js)
============================================================ */
html[data-brand="stella"] .stac-2col { display: grid; grid-template-columns: 430px 1fr; gap: 16px; align-items: start; }
html[data-brand="stella"] .stac-left, html[data-brand="stella"] .stac-right { min-width: 0; }
html[data-brand="stella"] .stac-head { margin-top: 14px; }
html[data-brand="stella"] .stac-head strong { font-size: var(--fs-14); color: var(--c-brand); }
html[data-brand="stella"] .rpt-search.stac-sm { width: 160px; }
/* 반제 대상 계정과목 선택 팝업 — 도움말 실측(반제처리현황 진입 시 자동 노출) */
html[data-brand="stella"] .stac-acctpick__desc { margin: 0 0 12px; font-size: var(--fs-13); color: var(--c-text-3); }
html[data-brand="stella"] .stac-acctpick__list { display: flex; flex-direction: column; gap: 6px; }
html[data-brand="stella"] .stac-acctpick__row {
padding: 10px 12px; border: 1px solid var(--c-border-2); border-radius: 6px; font-size: 14px; color: var(--c-text); cursor: pointer;
}
html[data-brand="stella"] .stac-acctpick__row:hover { background: var(--c-bg-soft); }
html[data-brand="stella"] .stac-acctpick__row.is-active { border-color: var(--c-primary); background: var(--c-primary-bg); color: var(--c-primary); font-weight: 600; }
/* 채권연령보고서 — 만기일 기준 모드 안내문(설정 의존성) */
html[data-brand="stella"] .stac-agingnote { margin: 0 0 10px; padding: 10px 12px; background: var(--c-bg-soft); border-radius: 6px; font-size: 13px; color: var(--c-text-2); }
/* 통장반제처리 — 반제처리 확인 팝업 */
html[data-brand="stella"] .stac-reconcile { display: flex; flex-direction: column; gap: 10px; }
html[data-brand="stella"] .stac-reconcile__row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--c-border-2); font-size: 14px; }
html[data-brand="stella"] .stac-reconcile__row:last-child { border-bottom: none; padding-bottom: 0; font-weight: 700; color: var(--c-brand); }
html[data-brand="stella"] .stac-reconcile__k { color: var(--c-text-3); }
html[data-brand="stella"] .stac-reconcile__v { color: var(--c-text); }
/* 잔여 4화면 (js/240-view-stella-rest.js) */
html[data-brand="stella"] .rpt-sel.stac-wide { min-width: 210px; }
html[data-brand="stella"] .stac-guide { margin: 0 0 6px; }
/* 라이브 SC-06-110 [삭제]는 "btn btn-delete border"(붉은 톤) — 공용 .rpt-btn 은 강조/기본 2톤뿐이라 추가 */
html[data-brand="stella"] .rpt-btn.is-danger { border-color: #f0c4c4; color: #ff2828; }
html[data-brand="stella"] .rpt-btn.is-danger:hover { background: #fdecec; }
/* ============================================================
회사정보 — 스텔라 2단 레이아웃
라이브 실측(styles-stella.min.css 의 .stella .bs-02-210 규칙 6개 + 화면 소스):
.contents-page.bs-02-210 1200px 가운데 정렬
.contents-group display:flex + border-top 1px #e1e5ea
.title-wrap 260px · padding 20px · background #f1f2f5 · column 정렬
.contents-box flex column
.sticky-button 상단 sticky · 우측 정렬 · 흰 배경([저장])
데모는 제목과 본문이 형제였는데, 라이브 구조에 맞춰 뷰에 .cf-sec/.cf-secbody 래퍼를
넣었다. 공용 CSS 에서 display:contents 라 파로스는 1px 도 안 바뀐다(검증 완료).
여기서만 실제 박스로 살려 2단을 만든다.
============================================================ */
html[data-brand="stella"] .companyform {
position: relative;
width: 1200px; min-width: 1200px; margin: 0 auto; padding-top: 44px;
}
html[data-brand="stella"] .cf-sec {
display: flex; align-items: stretch;
border-top: 1px solid var(--c-bg-cool);
}
html[data-brand="stella"] .companyform > .cf-sec:last-child { border-bottom: 1px solid var(--c-bg-cool); }
html[data-brand="stella"] .cf-sec > .cf-title {
flex: none; flex-direction: column; align-items: flex-start; gap: 6px;
width: 260px; padding: 20px; background: var(--c-bg-soft);
}
html[data-brand="stella"] .cf-secbody { display: flex; flex-direction: column; flex: 1; min-width: 0; }
html[data-brand="stella"] .cf-secbody > .cf-group { width: auto; }
/* 섹션 사이 divider 는 border-top 이 대신한다 */
html[data-brand="stella"] .companyform > .cf-divider { display: none; }
/* [저장] 은 라이브에서 상단 sticky 바에 우측 정렬로 뜬다 — 260px 타이틀 칸에 두면 눌린다 */
html[data-brand="stella"] .cf-title .cf-save {
position: absolute; top: 0; right: 0; margin-left: 0;
}
/* 제증명발급 — 라이브 .stella .dm-01 [class^=dm-01-] { max-width:1142px; margin:0 auto } */
html[data-brand="stella"] .hcert { width: 1142px; min-width: 1142px; margin: 0 auto; }
/* 탭 영역 좌측 선 — 라이브 .stella .tab-wrap { border-left: 1px solid #e4e4e4 }
(LNB 가 밝은 톤이라 콘텐츠와의 경계선이 필요하다. 파로스는 네이비라 선이 없다.) */
html[data-brand="stella"] .workspace,
html[data-brand="stella"] .header { border-left: 1px solid var(--c-border-2); }
/* 전자결재설정 마스터-디테일(양식함관리·결재절차관리) — 라이브 BS-09-110/-210 실측: 행 더블클릭 시
그리드 아래 상세 패널이 열린다. 선택행 강조는 stella 전용 스코프(.rpt-grid 공용 스타일은 그대로 둔다). */
html[data-brand="stella"] .stap-selgrid tbody tr { cursor: pointer; }
html[data-brand="stella"] .stap-selgrid tbody tr.is-selected { background: #edf6ff; }
html[data-brand="stella"] .stap-selgrid tbody tr.is-selected td { color: var(--c-brand); }
html[data-brand="stella"] .stap-detail { margin-top: 16px; padding: 0; }
html[data-brand="stella"] .stap-detail__head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid var(--c-border-2);
}
html[data-brand="stella"] .stap-detail__t { font-size: 15px; font-weight: 700; color: var(--c-text); }
html[data-brand="stella"] .stap-detail__btns { display: flex; gap: 8px; }
html[data-brand="stella"] .stap-df { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
html[data-brand="stella"] .stap-df__row { display: flex; align-items: flex-start; gap: 16px; }
html[data-brand="stella"] .stap-df__tit {
flex: none; width: 100px; padding-top: 7px; font-size: 14px; font-weight: 600; color: var(--c-text);
}
html[data-brand="stella"] .stap-df__tit.require::after { content: ' *'; color: #ff2828; }
html[data-brand="stella"] .stap-df__box { flex: 1; min-width: 0; max-width: 460px; }
html[data-brand="stella"] .stap-df__box input[type="text"],
html[data-brand="stella"] .stap-df__box input[type="date"],
html[data-brand="stella"] .stap-df__box select,
html[data-brand="stella"] .stap-df__box textarea {
width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--c-border-2); border-radius: 6px;
font-size: 14px; color: var(--c-text); box-sizing: border-box; font-family: inherit;
}
html[data-brand="stella"] .stap-df__box input[disabled] { background: var(--c-bg-soft); color: var(--c-text-3); }
html[data-brand="stella"] .stap-df__box textarea { height: 72px; padding: 8px 10px; resize: none; }
/* 기간비용/수익관리 등록·수정 팝업(stac-period-modal) 안의 거래처 픽박스는 폭이 218px
고정이라(공용 .rpt-datebox) 460px 박스 안에서 남는 여백을 그대로 둔다 — 다른 필드처럼
width:100% 로 늘리면 검색 버튼이 라이브와 다르게 오른쪽 끝까지 밀려 보인다. */
html[data-brand="stella"] .stac-period-modal .stap-df__box .rpt-datebox { width: 218px; }
html[data-brand="stella"] .stap-df__box .form-desc { margin: 6px 0 0; font-size: 12px; color: var(--c-text-3); }
html[data-brand="stella"] .stap-radiogroup { display: flex; gap: 18px; height: 32px; align-items: center; }
html[data-brand="stella"] .stap-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-text); cursor: pointer; }
html[data-brand="stella"] .stap-iconpick {
display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; width: fit-content;
border: 1px solid var(--c-border-2); border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--c-text-3);
}
html[data-brand="stella"] .stap-iconpick__ic {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 6px; background: var(--c-bg-soft); color: var(--c-primary);
}
html[data-brand="stella"] .stap-df__sub { margin: 6px 0 -4px; font-size: 14px; font-weight: 700; color: var(--c-text); }
/* 옵션설정 — 라이브 로그인 실측(2026-08-22, claudebot2): 탭마다 "왼쪽 제목 + 오른쪽 콘텐츠"
섹션이 여러 개 이어지는 구조(공통설정 5섹션, 역할별 탭 1~2섹션). 섹션 사이는 상단 보더로 구분. */
/* 옵션설정 섹션은 .acs-sec(설정류 공용 2단 그리드)로 그린다 — 전용 .stap-optsec/
.stap-opttitle/.stap-optbody 는 2026-08-24 사용자 QA("회계설정과 동일한 UI")로 걷어냈다.
본문 안 항목 간 간격만 여기서 준다(.acs-sec__body 는 gap 이 없는 블록이라). */
html[data-brand="stella"] .acs-sec__body > .stap-optrow:first-child { border-top: none; }
/* 위치(그리드 2열·패딩)는 위 `.acs-sec > .stk-bullets` 공용 규칙이 잡는다 —
여기서 margin/padding 을 0 으로 덮으면 설명이 다시 섹션 위쪽에 붙는다(넣지 말 것). */
html[data-brand="stella"] .stap-optnotes { list-style: none; display: flex; flex-direction: column; gap: 2px; }
html[data-brand="stella"] .stap-optnotes li { font-size: 13px; color: var(--c-text-3); line-height: 1.6; }
html[data-brand="stella"] .stap-optnotes li::before { content: '• '; }
/* 업무 연동 설정의 라디오형 토글 목록(라벨+라디오+설명 한 줄씩) */
html[data-brand="stella"] .stap-optrow { display: flex; align-items: center; gap: 20px; padding: 10px 0; border-top: 1px solid var(--c-border-2); }
html[data-brand="stella"] .stap-optrow:first-child { border-top: none; }
html[data-brand="stella"] .stap-optrow__lab { flex: none; width: 170px; font-size: 14px; font-weight: 600; color: var(--c-text); }
html[data-brand="stella"] .stap-optrow__desc { flex: 1; min-width: 0; font-size: 13px; color: var(--c-text-3); }
/* 그리드 사용여부 칸의 실제 스위치형 토글(라이브는 라디오가 아니라 스위치다) */
html[data-brand="stella"] .stap-toggle { position: relative; display: inline-block; vertical-align: middle; width: 32px; height: 18px; line-height: 1; flex: none; }
html[data-brand="stella"] .stap-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
html[data-brand="stella"] .stap-toggle span { position: absolute; inset: 0; background: var(--c-bg-soft); border-radius: 18px; transition: background .15s; pointer-events: none; }
html[data-brand="stella"] .stap-toggle span::before {
content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s;
}
html[data-brand="stella"] .stap-toggle input:checked + span { background: var(--c-primary); }
html[data-brand="stella"] .stap-toggle input:checked + span::before { transform: translateX(14px); }
/* 그리드 셀 안(td.is-c)에서만 행높이 기준(31px)에 맞춰 세로정렬 강제 — .stap-df 등 폼에서는 영향 없음 */
html[data-brand="stella"] td.is-c > .stap-toggle { vertical-align: middle; }
html[data-brand="stella"] .stap-optlocked { font-size: 13px; color: var(--c-text-3); }
html[data-brand="stella"] .stap-optnum { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-text); }
html[data-brand="stella"] .stap-optnum input { width: 80px; height: 32px; padding: 0 10px; border: 1px solid var(--c-border-2); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
html[data-brand="stella"] .stap-optemail { display: flex; align-items: center; gap: 12px; }
html[data-brand="stella"] .stap-optemail input { width: 280px; height: 32px; padding: 0 10px; border: 1px solid var(--c-border-2); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
/* ============================================================
가이드 레일(사이드바 탈취, js/22-guide-core.js renderRail) — 2026-08-23 발견·수정.
views.css 의 .gr 계열은 "레일은 --c-brand-darker(#001f44) 위에 얹힌다"고 명시적으로
전제하고 흰 글자·연한 파랑 액센트를 하드코딩했다(파로스 사이드바는 항상 네이비).
스텔라 사이드바는 밝은 톤(--sb-bg #f8f9ff)이라 그대로 두면 흰 글자·연파랑 액센트가
거의 안 보인다(사용자 스크린샷으로 확인 — "시나리오 좌측색이 스텔라는 아예 안보임").
views.css 는 건드리지 않는다(공유 파일) — 대신 사이드바 자체(.tree__item 등, layout.css)가
이미 쓰는 --sb-* 토큰과 같은 어휘로 여기서 다시 칠한다. 값을 1:1 치환하지 않은 이유는
.gr-node.is-current 의 배경이 반투명(rgba(55,108,251,.42), 네이비 바탕에 섞이는 효과)
이라 --sb-item-active-bg(불투명)로 그대로 바꾸면 파로스 쪽 톤이 달라지기 때문 — 그래서
views.css 는 그대로 두고 스텔라만 이 블록으로 덮어써 파로스 화면은 무변화다. */
html[data-brand="stella"] .gr { color: var(--sb-fg); }
html[data-brand="stella"] .gr__head { border-bottom-color: var(--sb-border); }
html[data-brand="stella"] .gr__back { color: var(--sb-item-active-fg); }
html[data-brand="stella"] .gr__bar { background: var(--sb-ctl-bg-hover); }
html[data-brand="stella"] .gr__cnt { color: var(--sb-fg-2); }
html[data-brand="stella"] .gr-node__glabel { color: var(--sb-fg-2); }
html[data-brand="stella"] .gr-node--overview > .gr-node__row,
html[data-brand="stella"] .gr-node--action > .gr-node__row { color: var(--sb-fg); }
html[data-brand="stella"] .gr-node__row:hover { background: var(--sb-item-hover); color: var(--sb-fg); }
html[data-brand="stella"] .gr-node__row:hover::before { background: var(--sb-item-active-fg); }
html[data-brand="stella"] .gr-node__row:focus-visible { outline-color: var(--sb-item-active-fg); }
html[data-brand="stella"] .gr-node.is-current > .gr-node__row { background: var(--sb-item-active-bg); color: var(--sb-item-active-fg); }
html[data-brand="stella"] .gr-node.is-current > .gr-node__row::before { background: var(--sb-item-active-fg); }
html[data-brand="stella"] .gr-node.is-done > .gr-node__row { color: var(--sb-fg-dim); }
html[data-brand="stella"] .gr__hint { color: var(--sb-fg-dim); }
html[data-brand="stella"] .gr__exit { border-color: var(--sb-ctl-border); color: var(--sb-fg-2); }
html[data-brand="stella"] .gr__exit:hover { background: var(--sb-ctl-bg-hover); color: var(--sb-fg); }
/* 전자결재 문서함 카운트줄(임시저장·시행·관리자문서관리·전체문서)의 우측 정렬은 위
.rpt-count.stac-head + 공용 .rpt-actions 를 그대로 쓴다 — js/200 docBox() 참고. */
/* 결재 작성 — 양식함/양식 선택 화면(라이브 EP-01-110: content1 widthP410 좌측 + content2 우측).
두 패널은 flex 기본값(stretch)으로 행 높이를 채우고 각자 스크롤한다(height:100% 불필요). */
html[data-brand="stella"] .stap-write { display: flex; gap: 16px; padding: 16px; height: 100%; }
html[data-brand="stella"] .stap-write__left {
flex: none; width: 410px; min-height: 0; overflow-y: auto;
border: 1px solid var(--c-border-2); border-radius: 8px; padding: 16px;
}
html[data-brand="stella"] .stap-write__lefttit { font-size: 15px; font-weight: 700; color: var(--c-text); margin-bottom: 12px; }
/* 검색칸은 공용 .rpt-search(views.css) — 폭만 패널에 맞게 늘린다 */
html[data-brand="stella"] .stap-write__search { display: flex; gap: 6px; margin-bottom: 14px; }
html[data-brand="stella"] .stap-write__search .rpt-search { flex: 1; width: auto; }
html[data-brand="stella"] .stap-write__searchbtn {
flex: none; width: 32px; height: 32px; border: 1px solid var(--c-border-2); border-radius: 6px; background: #fff; color: var(--c-text-3); cursor: pointer;
}
html[data-brand="stella"] .stap-write__boxlist { display: flex; flex-direction: column; gap: 8px; }
html[data-brand="stella"] .stap-write__boxbtn {
display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px; text-align: left;
border: 1px solid var(--c-border-2); border-radius: 8px; background: #fff; cursor: pointer;
}
html[data-brand="stella"] .stap-write__boxbtn.is-active { border-color: var(--c-primary); background: var(--c-primary-bg); }
html[data-brand="stella"] .stap-write__boxic {
flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--c-bg-soft); color: var(--c-primary);
display: flex; align-items: center; justify-content: center;
}
html[data-brand="stella"] .stap-write__boxtxt strong { display: block; font-size: 14px; font-weight: 700; color: var(--c-text); }
html[data-brand="stella"] .stap-write__boxtxt p { margin: 2px 0 0; font-size: 12px; color: var(--c-text-3); line-height: 1.5; }
html[data-brand="stella"] .stap-write__right { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
html[data-brand="stella"] .stap-write__empty { padding: 40px 0; text-align: center; font-size: 13px; color: var(--c-text-3); }
html[data-brand="stella"] .stap-write__righttit { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--c-border-2); }
html[data-brand="stella"] .stap-write__righttit strong { font-size: 16px; font-weight: 700; color: var(--c-text); }
html[data-brand="stella"] .stap-write__righttit p { margin: 4px 0 0; font-size: 13px; color: var(--c-text-3); }
html[data-brand="stella"] .stap-write__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
html[data-brand="stella"] .stap-write__card {
display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px;
border: 1px solid var(--c-border-2); border-radius: 8px; cursor: pointer; position: relative; text-align: center;
}
html[data-brand="stella"] .stap-write__card:hover { border-color: var(--c-primary); }
html[data-brand="stella"] .stap-write__card.is-soon { color: var(--c-text-3); }
html[data-brand="stella"] .stap-write__cardic {
width: 36px; height: 36px; border-radius: 10px; background: var(--c-bg-soft); color: var(--c-primary);
display: flex; align-items: center; justify-content: center;
}
html[data-brand="stella"] .stap-write__card strong { font-size: 14px; font-weight: 600; color: var(--c-text); }
html[data-brand="stella"] .stap-write__card.is-soon strong { color: var(--c-text-3); }
/* '미제공' 표시는 공용 P.ui.StatusBadge('미제공','off') — 카드 모서리에 얹는 위치만 여기서 */
html[data-brand="stella"] .stap-write__card .badge { position: absolute; top: 8px; right: 8px; }
/* 결재 작성 팝업 — 라이브 EP-01-110-P: 헤더 + 상단버튼줄([미리보기] … [임시저장][상신]) + 본문.
본문 스크롤·높이 제한은 공용 .modal__card(flex column, max-height 90vh)·.modal__body
(overflow-y:auto)가 이미 해 준다 — 헤더 높이를 상수로 빼는 식의 재계산은 두지 않는다. */
html[data-brand="stella"] .stap-write__topbtns { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
html[data-brand="stella"] .stap-write__subtext { margin: 0 0 14px; padding: 10px 12px; background: var(--c-bg-soft); border-radius: 6px; font-size: 13px; color: var(--c-text-2); }
html[data-brand="stella"] .stap-write__doc { border-top: 1px solid var(--c-border-2); padding-top: 16px; }
html[data-brand="stella"] .stap-write__doc textarea { height: 84px; }
/* 날짜는 다른 곳과 같은 dateBox(.rpt-datebox + 달력 버튼). 폼 박스의 input 100% 규칙이
datebox 안까지 내려오므로 datebox 자체에 폭을 준다 — 기간(두 칸 + '~' + 일수)은 460px
박스 안에 한 줄로 들어가게 칸을 좁힌다. */
html[data-brand="stella"] .stap-write__doc .stap-df__box .rpt-datebox { width: 218px; flex: none; }
html[data-brand="stella"] .stap-write__range { display: flex; align-items: center; gap: 6px; }
html[data-brand="stella"] .stap-write__range .rpt-datebox { width: 160px; }
html[data-brand="stella"] .stap-write__daycnt { margin-left: 2px; font-size: 13px; color: var(--c-text-3); white-space: nowrap; }
/* 결재선 지정 — 역할 5행(기안자 고정 + 결재자·합의자·참조자·시행자 칩 추가/제거). */
html[data-brand="stella"] .stap-aprline { display: flex; flex-direction: column; gap: 8px; }
html[data-brand="stella"] .stap-aprline__row { display: flex; align-items: center; gap: 12px; }
html[data-brand="stella"] .stap-aprline__role {
flex: none; width: 56px; height: 26px; display: flex; align-items: center; justify-content: center;
border-radius: var(--r-pill); background: var(--c-bg-soft); color: var(--c-text-2); font-size: 12px; font-weight: 600;
}
html[data-brand="stella"] .stap-aprline__role.is-fixed { background: var(--c-primary-bg); color: var(--c-primary); }
html[data-brand="stella"] .stap-aprline__chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-brand="stella"] .stap-aprline__chip {
display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 10px;
border: 1px solid var(--c-border-2); border-radius: var(--r-pill); font-size: 13px; color: var(--c-text);
}
html[data-brand="stella"] .stap-aprline__x { display: flex; width: 16px; height: 16px; border: none; background: none; color: var(--c-text-3); cursor: pointer; padding: 0; }
html[data-brand="stella"] .stap-aprline__x svg { width: 12px; height: 12px; }
html[data-brand="stella"] .stap-aprline__add {
display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px;
border: 1px dashed var(--c-border-2); border-radius: var(--r-pill); background: none; color: var(--c-primary); font-size: 13px; cursor: pointer;
}
html[data-brand="stella"] .stap-aprline__add svg { width: 12px; height: 12px; }
/* 결재선 직원 검색 팝업 — 검색칸은 공용 .rpt-search, 목록은 다른 표와 같은 simpleGrid
(.rpt-grid). 여기서는 폭·행 클릭 느낌만 준다. */
html[data-brand="stella"] .stap-empsearch__bar { margin-bottom: 12px; }
html[data-brand="stella"] .stap-empsearch__bar .rpt-search { width: 100%; }
html[data-brand="stella"] .stap-empsearch__list { max-height: 320px; overflow-y: auto; }
html[data-brand="stella"] .stap-empsearch .rpt-grid tbody tr:not(.rpt-empty) { cursor: pointer; }
html[data-brand="stella"] .stap-empsearch .rpt-grid tbody tr:not(.rpt-empty):hover td { background: var(--c-bg-soft); }