/* 세부장 FO 공용 스타일 (docs/06 레이아웃, docs/07 생김새).
   이 파일에는 색 값을 직접 쓰지 않는다 — tokens.css 의 var(--…) 만. 간격은 4·8·12·16·24 의 배수. */

/* ------------------------------------------------------------------ 바탕 */
html, body { font-family: var(--font); }
body { margin: 0; }
h1:focus { outline: none; }

.sbj {
    min-height: 100vh;
    background: var(--ground);
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
.sbj a { color: var(--accent); text-decoration: none; }
.sbj a:hover { text-decoration: underline; }
.sbj :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-ring); border-radius: var(--r-chip); }
/* 화면이 바뀌면 Blazor 가 h1 에 포커스를 준다(낭독기용). 눈에 보이는 테두리는 그리지 않는다. */
.sbj h1:focus, .sbj h1:focus-visible { outline: 0; box-shadow: none; }
.sbj h1, .sbj .sbj-title { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.sbj h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.sbj h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 8px; }
.sbj p { margin: 0 0 12px; }
.sbj hr { border: 0; border-top: 1px solid var(--line); opacity: 1; margin: 16px 0; }
.sbj code { font-family: var(--mono); color: var(--text); font-size: 0.92em; }
.sbj-muted { color: var(--muted); }
.sbj-small { font-size: 12.5px; }
.sbj-mono { font-family: var(--mono); }
.sbj-num { text-align: right; font-variant-numeric: tabular-nums; }
.sbj-nowrap { white-space: nowrap; }
.sbj-keep { word-break: keep-all; overflow-wrap: normal; }   /* 한글은 글자 단위로 끊기니 단어 단위로 */
/* 여백 도우미는 .sbj h1 / .sbj p 같은 바탕 규칙을 이겨야 하므로 .sbj 아래에 둔다 */
.sbj .sbj-mb { margin-bottom: 16px; }
.sbj .sbj-mt { margin-top: 16px; }
.sbj-narrow { max-width: 760px; }
.sbj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ 틀: 레일 + 문맥 패널 + 상단 바 */
.sbj-shell { display: grid; grid-template-columns: var(--rail-w) var(--panel-w) minmax(0, 1fr); min-height: 100vh; }
.sbj-shell--nopanel { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

.sbj-rail {
    position: sticky; top: var(--env-h, 0px); height: calc(100vh - var(--env-h, 0px));
    background: var(--rail); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; box-sizing: border-box; z-index: 30;
}
.sbj-rail__logo {
    width: 40px; height: 40px; border-radius: var(--r-card); background: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; margin-bottom: 12px;
}
.sbj .sbj-rail__logo, .sbj .sbj-rail__logo:hover { color: var(--on-solid); text-decoration: none; }
/* 작업 선반 띠 (docs/28 §5): 글자 · 밑줄만, 지금 화면은 굵게 */
.sbj-shelf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 24px; border-bottom: 1px solid var(--line); background: var(--bar); font-size: 12.5px; }
.sbj-shelf__label { color: var(--muted); font-weight: 600; margin-right: 2px; }
.sbj-shelf__item { display: inline-flex; align-items: center; gap: 2px; }
.sbj-shelf__item a, .sbj-shelf__go { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; }
.sbj-shelf__item.is-here a, .sbj-shelf__item.is-here .sbj-shelf__go { font-weight: 700; text-decoration: none; }
.sbj-shelf__co { color: var(--muted); }
.sbj-shelf__x { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 13px; line-height: 1; }
.sbj .sbj-shelf__x:hover { color: var(--bad); }
/* 허브 · 공개 랜딩의 모양은 site.css 에 있다 (docs/30) */
/* 모드 칸 (docs/28 §1): 로고 자리에 지금 어디(사무실 · 수임처 · 회사) + 짧은 이름. 사무실 직원은 details 로 전환 메뉴 */
.sbj-rail__mode { width: 56px; min-height: 40px; border-radius: var(--r-card); background: var(--accent); color: var(--on-solid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 2px; margin-bottom: 4px; cursor: pointer; list-style: none; text-decoration: none; }
.sbj-rail__mode::-webkit-details-marker { display: none; }
.sbj a.sbj-rail__mode, .sbj .sbj-rail__mode:hover, .sbj a.sbj-rail__mode:hover { color: var(--on-solid); text-decoration: none; }
.sbj .sbj-rail__mode:hover { background: var(--accent-press); }
.sbj-rail__mode-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
.sbj-rail__mode-name { font-size: 10.5px; line-height: 1.2; opacity: 0.88; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbj-rail__switch { position: relative; margin-bottom: 8px; }
.sbj-rail__switch > .sbj-menu__list { left: calc(100% + 8px); right: auto; top: 0; }
/* 사무실 층만 남색 — 수임처 문맥 · 회사 · 포털은 청록 그대로 (색이 바뀌었다 = 사무실 밖, 어느 회사 안) */
.sbj-shell.sbj-mode--firm { --accent: var(--accent-firm); --accent-press: var(--accent-firm-press); --focus-ring: var(--focus-ring-firm); }
.sbj-rail__item {
    position: relative; width: 56px; height: 54px; border-radius: var(--r-card);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 11px; font-weight: 500;
}
.sbj .sbj-rail__item { color: var(--rail-text); text-decoration: none; }
.sbj .sbj-rail__item:hover { background: var(--rail-on); color: var(--on-solid); text-decoration: none; }
.sbj .sbj-rail__item.is-on { background: var(--rail-on); color: var(--on-solid); font-weight: 700; }
.sbj-rail__item.is-on::before { content: ""; position: absolute; left: -8px; top: 14px; width: 4px; height: 26px; border-radius: 4px; background: var(--rail-mark); }
.sbj-rail__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }

.sbj-panel {
    position: sticky; top: var(--env-h, 0px); height: calc(100vh - var(--env-h, 0px)); overflow-y: auto;
    background: var(--panel); border-right: 1px solid var(--line); padding: 16px 8px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 2px;
}
.sbj-panel__title { font-size: 17px; font-weight: 700; padding: 4px 12px 12px; }
.sbj-panel__group { margin: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.sbj-panel__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: var(--r-input); font-size: 14px; }
.sbj .sbj-panel__item { color: var(--text); text-decoration: none; }
.sbj .sbj-panel__item:hover { background: var(--hover); text-decoration: none; }
.sbj .sbj-panel__item.is-on { background: var(--card); font-weight: 700; box-shadow: 0 0 0 1px var(--line); }
.sbj-panel__count { font-size: 12px; font-weight: 700; color: var(--muted); }
.sbj-panel__empty { padding: 4px 12px; font-size: 12.5px; color: var(--muted); }
.sbj-panel__recent { display: flex; flex-direction: column; gap: 2px; }

.sbj-main { min-width: 0; display: flex; flex-direction: column; }
.sbj-topbar {
    position: sticky; top: var(--env-h, 0px); z-index: 20; height: var(--topbar-h); flex-shrink: 0; box-sizing: border-box;
    display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--bar); border-bottom: 1px solid var(--line);
}
.sbj-topbar__company { font-size: 14px; font-weight: 700; white-space: nowrap; }
.sbj-topbar__search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.sbj-search {
    width: 100%; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; box-sizing: border-box;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-input); color: var(--muted);
}
.sbj-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.sbj-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); }
.sbj .sbj-search input:focus-visible { outline: 0; box-shadow: none; }
.sbj-search input::placeholder { color: var(--muted); }

.sbj-content { padding: 24px; max-width: 1240px; width: 100%; box-sizing: border-box; }

/* 내 계정 메뉴 (details — 스크립트 없이도 열린다) */
.sbj-menu { position: relative; }
.sbj-menu > summary { list-style: none; cursor: pointer; border-radius: 999px; }
.sbj-menu > summary::-webkit-details-marker { display: none; }
.sbj-avatar {
    width: 36px; height: 36px; border-radius: 999px; background: var(--card); color: var(--text); border: 1px solid var(--line-strong);
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.sbj-menu__list {
    position: absolute; right: 0; top: 44px; min-width: 220px; padding: 8px; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 2px; z-index: 40;
}
.sbj-menu__who { padding: 8px 12px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.sbj-menu__name { font-weight: 700; }
.sbj-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--r-input); font: inherit; font-size: 14px; text-align: left; cursor: pointer; box-sizing: border-box; }
.sbj .sbj-menu__item { color: var(--text); text-decoration: none; }
.sbj .sbj-menu__item:hover { background: var(--hover); text-decoration: none; }
.sbj-menu form { margin: 0; }

/* 검증계 띠 */
.sbj-env { position: sticky; top: 0; z-index: 2000; height: 28px; box-sizing: border-box; background: var(--warn); color: var(--on-solid); text-align: center; font-size: 12.5px; font-weight: 700; line-height: 28px; letter-spacing: 0.02em; }

/* 로그인 전 화면 */
/* (docs/30 §4) 왼쪽 어두운 면 + 오른쪽 폼. 폼은 카드 없이 바탕 위에 — 위계는 글자와 선으로 */
.sbj-auth { min-height: calc(100vh - var(--env-h, 0px)); display: flex; flex-wrap: wrap; }
.sbj-auth__side { flex: 1 1 480px; min-width: 0; box-sizing: border-box; background: var(--rail); color: var(--rail-mark); padding: 36px 56px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.sbj-auth__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; align-self: flex-start; }
.sbj .sbj-auth__brand, .sbj .sbj-auth__brand:hover { color: var(--rail-mark); text-decoration: none; }
.sbj-auth__mark { width: 32px; height: 32px; border-radius: var(--r-input); background: var(--rail-mark); color: var(--rail); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.sbj .sbj-auth__say { margin: 0; font-size: 42px; line-height: 1.24; font-weight: 700; letter-spacing: -0.03em; word-break: keep-all; }
.sbj-auth__points { list-style: none; margin: 32px 0 0; padding: 0; max-width: 460px; }
.sbj-auth__points li { border-top: 1px solid var(--rail-line); padding: 14px 0; font-size: 16px; line-height: 1.6; color: var(--rail-text); word-break: keep-all; }
.sbj-auth__copy { font-size: 13px; color: var(--rail-text); }
.sbj-auth__main { flex: 1 1 480px; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 56px 32px; }
.sbj-auth__card { width: 100%; max-width: 420px; font-size: 15px; word-break: keep-all; overflow-wrap: break-word; }
.sbj .sbj-auth__card h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.03em; }
.sbj-auth__card .sbj-label { font-size: 14px; }
.sbj-auth__card .sbj-input { min-height: 48px; font-size: 16px; border-color: var(--line-strong); }
.sbj-auth__card .sbj-btn--block { min-height: 52px; font-size: 16px; }
.sbj-auth__card .sbj-check { align-items: center; min-height: 44px; font-size: 15px; }
.sbj-auth__card .sbj-check input { width: 18px; height: 18px; margin-top: 0; }
.sbj-auth__card .sbj-hint { font-size: 14px; line-height: 1.7; }
@media (max-width: 1007px) {
    .sbj-auth { flex-direction: column; flex-wrap: nowrap; }
    .sbj-auth__side { flex: 0 0 auto; padding: 12px 20px; gap: 0; }
    .sbj-auth__pitch, .sbj-auth__copy { display: none; }
    .sbj-auth__main { flex: 1 1 auto; align-items: flex-start; padding: 32px 20px 48px; }
}

/* ------------------------------------------------------------------ 화면 머리 + 액션 바 */
.sbj-head { margin-bottom: 16px; }
.sbj-crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.sbj .sbj-crumbs a { color: var(--muted); }
.sbj-crumbs__sep { margin: 0 6px; }
.sbj-head__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sbj-head__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.sbj-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.sbj-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbj-actions form { margin: 0; }

/* ------------------------------------------------------------------ 버튼 */
.sbj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; box-sizing: border-box;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-input);
    font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.sbj .sbj-btn { color: var(--text); text-decoration: none; }
.sbj .sbj-btn:hover { background: var(--hover); text-decoration: none; }
.sbj .sbj-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
.sbj .sbj-btn--primary:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-solid); }
.sbj .sbj-btn--danger { color: var(--bad); border-color: var(--bad); }
.sbj .sbj-btn--danger-solid, .sbj .sbj-btn--danger-solid:hover { background: var(--bad); border-color: var(--bad); color: var(--on-solid); }
.sbj-btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.sbj-btn--icon { width: 32px; min-height: 32px; padding: 0; }
.sbj-btn--block { width: 100%; min-height: 44px; font-size: 15px; }
.sbj .sbj-btn:disabled, .sbj .sbj-btn[aria-disabled="true"] { background: var(--track); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.sbj-btn-link { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; }
.sbj-btn-link:hover { text-decoration: underline; }
.sbj-inline-form { display: inline; margin: 0; }

/* ------------------------------------------------------------------ 입력 */
.sbj-form { display: flex; flex-direction: column; gap: 16px; }
.sbj-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sbj-form-grid .span-2 { grid-column: span 2; }
.sbj-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sbj-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.sbj-fields > .sbj-field { flex: 1 1 140px; }
.sbj-fields > .sbj-field--auto { flex: 0 0 auto; }
.sbj-label { font-size: 12.5px; font-weight: 600; color: var(--text); margin: 0; }
.sbj-label__opt { font-weight: 400; color: var(--muted); margin-left: 4px; }
.sbj-input, .sbj-select, .sbj-textarea {
    width: 100%; min-height: 40px; padding: 0 12px; box-sizing: border-box; background: var(--card); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-input); font: inherit; font-size: 14px;
}
.sbj-textarea { padding: 8px 12px; min-height: 80px; resize: vertical; }
.sbj-input--sm, .sbj-select--sm { min-height: 32px; font-size: 13px; }
.sbj .sbj-input:focus, .sbj .sbj-select:focus, .sbj .sbj-textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--focus-ring); border-radius: var(--r-input); }
.sbj .sbj-input.invalid, .sbj .sbj-select.invalid, .sbj .sbj-textarea.invalid { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.sbj-input[readonly], .sbj-input:disabled, .sbj-select:disabled { background: var(--ground); color: var(--muted); }
.sbj-hint { font-size: 12.5px; color: var(--muted); }
.sbj-strike { text-decoration: line-through; color: var(--muted); }
.sbj-hint-list { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.sbj-error, .sbj .validation-message { font-size: 12px; font-weight: 600; color: var(--bad); }
.sbj ul.validation-errors { list-style: none; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--bad); }
.sbj-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin: 0; }
.sbj-check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); }
.sbj-choice { display: flex; flex-direction: column; gap: 8px; }
.sbj-choice__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--card); margin: 0; }
.sbj-choice__item > input[type=radio] { margin-top: 4px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.sbj-choice__item > div { flex: 1 1 auto; min-width: 0; }
.sbj-choice__title { font-weight: 700; display: block; margin: 0; cursor: pointer; }
.sbj fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sbj legend { float: none; width: auto; padding: 0; margin: 0 0 4px; }
.sbj-form__foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.sbj-filter { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.sbj-filter .sbj-field { flex: 0 1 200px; }
.sbj-filter .sbj-field--grow { flex: 1 1 240px; }
/* 좁은 카드 안의 한 줄 (칸 + 버튼): 줄바꿈하지 않는다 */
.sbj-filter--tight { flex-wrap: nowrap; }
.sbj-filter--tight .sbj-field--grow { flex: 1 1 0; min-width: 0; }

/* ------------------------------------------------------------------ 카드 · 벤토 */
.sbj-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; box-sizing: border-box; min-width: 0; }
.sbj-card--flush { padding: 0; overflow: hidden; }
.sbj-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sbj .sbj-card__head h2 { margin: 0; }
.sbj-card--flush > .sbj-card__head { padding: 16px 16px 0; }
.sbj-card__pad { padding: 16px; }
.sbj-stack { display: flex; flex-direction: column; gap: 16px; }
.sbj-stack--tight { gap: 8px; }
.sbj-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sbj-cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbj-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sbj-bento .span-2 { grid-column: span 2; }
.sbj-bento .span-4 { grid-column: span 4; }

.sbj-stat__label { font-size: 13px; color: var(--muted); }
.sbj-stat__value { font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* 숫자가 아닌 값(무기한, 요금제 이름)은 한 단계 작게 */
.sbj-stat__value--text { font-size: 28px; line-height: 1.6; }
.sbj-stat__value--warn { color: var(--warn); }
.sbj-stat__value--bad { color: var(--bad); }
.sbj-stat__unit { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.sbj-stat__note { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.sbj-progress { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.sbj-progress__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.sbj-progress__fill--warn { background: var(--warn); }
.sbj-progress__fill--bad { background: var(--bad); }

/* 정의 목록 (상세 화면의 읽기 전용 값) */
.sbj-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.sbj-dl dt { font-size: 12.5px; font-weight: 600; color: var(--muted); padding-top: 1px; }
.sbj-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 상태 · 주의 · 분류 (docs/07 §4) */
.sbj-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.sbj-state--off { color: var(--muted); }
.sbj-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: var(--off); flex-shrink: 0; }
.sbj-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-chip); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--on-solid); background: var(--off); white-space: nowrap; }
.sbj-tag { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 12px; font-weight: 500; color: var(--muted); background: var(--card); white-space: nowrap; }
.sbj-tag--strong { border-color: var(--line-strong); font-weight: 700; color: var(--text); }
.sbj-bg-ok { background: var(--ok); }
.sbj-bg-warn { background: var(--warn); }
.sbj-bg-bad { background: var(--bad); }
.sbj-bg-info { background: var(--accent); }
.sbj-bg-ai { background: var(--ai); }
.sbj-bg-off { background: var(--off); }

.sbj-kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); background: var(--bar); white-space: nowrap; }
.sbj-btn--primary .sbj-kbd { background: transparent; border-color: var(--on-solid); color: var(--on-solid); opacity: 0.85; }

/* 알림: 중립 바탕 + 진한 아이콘 블록. 색을 채운 알림 띠는 없다. */
.sbj-notice { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-input); padding: 8px 16px 8px 8px; }
.sbj-notice__icon { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--on-solid); }
.sbj-notice__body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.sbj-notice__title { font-size: 14px; font-weight: 700; color: var(--text); }
.sbj-notice__text { font-size: 13.5px; color: var(--muted); min-width: 0; }
.sbj .sbj-notice__action, .sbj-notice__action { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; text-decoration: none; }

/* 한 번만 보여 주는 값 (임시 비밀번호) */
.sbj-secret { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; user-select: all; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--card); display: inline-block; }

/* ------------------------------------------------------------------ 표 */
.sbj-table-wrap { overflow-x: auto; }
.sbj-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sbj-table th { height: 36px; padding: 0 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--card); }
.sbj-table td { height: 40px; padding: 4px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.sbj-table tbody tr:last-child td { border-bottom: 0; }
.sbj-table th.sbj-num, .sbj-table td.sbj-num { text-align: right; }
.sbj-dl dd .sbj-tag, .sbj-dl dd .sbj-chip { margin-left: 8px; }
/* 표 안에서 이름 뒤에 붙는 태그 (이름은 span · a 로 감싼다) */
.sbj-table td * + .sbj-tag { margin-left: 6px; }
.sbj-table tbody tr:hover td { background: var(--hover); }
.sbj-table tr.is-muted td { color: var(--muted); }
.sbj-table tr.is-selected td { background: var(--selected); font-weight: 700; }
.sbj-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.sbj-table tr.is-off td { color: var(--muted); }
.sbj-table tr.is-alert td:first-child { color: var(--bad); font-weight: 600; }   /* 기한 넘긴 작업: 날짜만 진하게 (색은 작은 신호로만) */
.sbj-table--dense { font-size: 13px; }
.sbj-table--dense td { height: 32px; padding: 2px 12px; }
.sbj .sbj-table .sbj-rowlink { color: var(--text); font-weight: 600; white-space: nowrap; }
.sbj .sbj-table .sbj-rowlink:hover { color: var(--accent); }
.sbj-table tfoot th, .sbj-table tfoot td { height: 40px; padding: 4px 12px; border-top: 1px solid var(--line); font-weight: 700; text-align: left; color: var(--text); font-size: 13.5px; background: var(--card); }
.sbj-table tfoot td.sbj-num { text-align: right; font-size: 15px; }
/* 입력용 표: 칸 안의 입력이 칸을 채운다 */
.sbj-table--input td { padding: 4px; }
.sbj-table--input tbody tr:hover td { background: transparent; }
.sbj-table--input .sbj-input, .sbj-table--input .sbj-select { min-width: 96px; }
/* 장부의 줄 입력: 계정과목 칸이 이름을 다 보여 줄 만큼 넓어야 한다 ("813 기업업무추진비(접대비)") */
.sbj-table--input th.sbj-col-main { width: 34%; }
.sbj-table--input th.sbj-col-amount { width: 16%; }
.sbj-table--input th.sbj-col-src { width: 24%; }
.sbj-table__foot { padding: 8px 12px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-soft); }

.sbj-empty { padding: 32px 16px; text-align: center; color: var(--muted); }
.sbj-empty__title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sbj-empty__action { margin-top: 12px; }

/* ------------------------------------------------------------------ 탭 (같은 주제의 다른 보기) */
.sbj-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.sbj-tabs__item { padding: 8px 12px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sbj .sbj-tabs__item { color: var(--muted); text-decoration: none; }
.sbj .sbj-tabs__item:hover { color: var(--text); text-decoration: none; }
.sbj .sbj-tabs__item.is-on { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ 할 일 행 */
.sbj-todo { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); }
.sbj-todo:last-child { border-bottom: 0; }
.sbj-todo__kind { width: 96px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sbj-todo__body { flex: 1 1 auto; min-width: 0; }
.sbj-todo__title { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbj-todo__meta { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* ------------------------------------------------------------------ 조직도 */
.sbj-tree__row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 calc(12px + var(--depth, 0) * 24px); border-bottom: 1px solid var(--line-soft); }
.sbj-tree__row:last-child { border-bottom: 0; }
.sbj-tree__row:hover { background: var(--hover); }
.sbj-tree__row.is-selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; }
.sbj-tree__row.is-off { color: var(--muted); }
.sbj-tree__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbj .sbj-tree__name a { color: inherit; }
.sbj-tree__count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sbj-tree__branch { color: var(--line-strong); display: inline-flex; }

/* ------------------------------------------------------------------ 결재 (docs/09 §6) */
.sbj-formcard { display: flex; flex-direction: column; gap: 4px; }
.sbj .sbj-formcard { color: var(--text); text-decoration: none; }
.sbj .sbj-formcard:hover { border-color: var(--line-strong); text-decoration: none; }
.sbj-formcard__title { font-size: 15px; font-weight: 700; }
.sbj-textarea--tall { min-height: 320px; line-height: 1.6; }
.sbj-prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }

/* 결재선: 기안 → 1번 → 2번 … 가로로. 지금 차례인 칸은 선택된 행과 같은 표시(중립 바탕 + 강조색 막대) */
.sbj-line { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sbj-line__step { flex: 1 1 160px; max-width: 240px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-input); display: flex; flex-direction: column; gap: 2px; }
.sbj-line__step.is-current { background: var(--selected); box-shadow: inset 0 3px 0 var(--accent); }
.sbj-line__role { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.sbj-line__name { font-weight: 700; }
.sbj-line__post, .sbj-line__when { font-size: 12.5px; color: var(--muted); }
.sbj-line__comment { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }

.sbj-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sbj-files li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.sbj-files li:last-child { border-bottom: 0; }
.sbj-input--file { padding: 8px 12px; height: auto; }
.sbj-comment { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.sbj-comment:last-of-type { border-bottom: 0; }
.sbj-comment__head { margin-bottom: 2px; }
.sbj-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.sbj-timeline li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: baseline; }

/* ------------------------------------------------------------------ 오류 화면 띠 (Blazor) */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; padding: 12px 24px; background: var(--bad); color: var(--on-solid); font-weight: 600; }
#blazor-error-ui a { color: var(--on-solid); text-decoration: underline; margin-left: 12px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }
.blazor-error-boundary { background: var(--bad); color: var(--on-solid); padding: 16px; border-radius: var(--r-input); }
.blazor-error-boundary::after { content: "처리 중 오류가 발생했습니다."; }

/* ------------------------------------------------------------------ 기존 계정 화면(Bootstrap 마크업)을 같은 생김새로 */
.sbj .btn { border-radius: var(--r-input); font-weight: 600; }
.sbj .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
.sbj .btn-primary:hover, .sbj .btn-primary:active, .sbj .btn-primary:focus { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-solid); }
.sbj .btn-outline-secondary, .sbj .btn-secondary { background: var(--card); border-color: var(--line); color: var(--text); }
.sbj .btn-outline-secondary:hover, .sbj .btn-secondary:hover { background: var(--hover); border-color: var(--line); color: var(--text); }
.sbj .btn-outline-danger, .sbj .btn-danger { background: var(--card); border-color: var(--bad); color: var(--bad); }
.sbj .btn-outline-danger:hover, .sbj .btn-danger:hover { background: var(--bad); border-color: var(--bad); color: var(--on-solid); }
.sbj .form-control, .sbj .form-select { border-color: var(--line); border-radius: var(--r-input); color: var(--text); background-color: var(--card); }
.sbj .form-control:focus, .sbj .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--focus-ring); }
.sbj .form-control.invalid { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); outline: 0; }
.sbj .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.sbj .form-label, .sbj .form-floating > label { color: var(--muted); }
.sbj .text-muted { color: var(--muted) !important; }

/* ------------------------------------------------------------------ 좁은 화면: 레일 → 하단 탭바, 패널 → 가로 줄 */
@media (max-width: 860px) {
    .sbj-shell, .sbj-shell--nopanel { display: block; padding-bottom: 64px; }
    .sbj-rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 60px; flex-direction: row; justify-content: space-around; padding: 0 8px; }
    .sbj-rail__logo { display: none; }
    .sbj-rail__bottom { margin-top: 0; flex-direction: row; }
    .sbj-rail__item { height: 52px; }
    .sbj-rail__item.is-on::before { left: 15px; top: -4px; width: 26px; height: 4px; }
    .sbj-panel { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
    .sbj-panel__title, .sbj-panel__group, .sbj-panel__recent, .sbj-panel__empty { display: none; }
    .sbj-panel__item { white-space: nowrap; flex-shrink: 0; }
    .sbj-topbar { padding: 0 16px; }
    .sbj-topbar__company { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
    .sbj-content { padding: 16px; }
    .sbj-form-grid, .sbj-cols, .sbj-cols--even { grid-template-columns: minmax(0, 1fr); }
    .sbj-form-grid .span-2 { grid-column: auto; }
    .sbj-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbj-bento .span-4 { grid-column: span 2; }
    .sbj-dl { grid-template-columns: 96px minmax(0, 1fr); }
    .sbj-notice { align-items: flex-start; }
    .sbj-kbd { display: none; }   /* 손가락으로 쓰는 화면에는 단축키 안내를 보이지 않는다 */
    .sbj-head__row { align-items: flex-start; }
}

@media (prefers-reduced-motion: no-preference) {
    .sbj-btn, .sbj-rail__item, .sbj-panel__item, .sbj-input, .sbj-select { transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
}

@media print {
    .sbj-rail, .sbj-panel, .sbj-topbar, .sbj-env, .sbj-actions { display: none; }
    .sbj-shell { display: block; }
}

/* ------------------------------------------------------------------ 업무 지도 (docs/13): 가로 단계 칸 · 점선 = 자동 전이 */
.sbj-flow { list-style: none; margin: 0; padding: 4px 0 6px; display: flex; align-items: flex-start; gap: 0; overflow-x: auto; }
.sbj-flow__step { display: flex; align-items: flex-start; flex-shrink: 0; }
.sbj .sbj-flow__card { width: 132px; display: flex; flex-direction: column; gap: 5px; padding: 10px 10px 9px; border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--text); text-decoration: none; }
.sbj .sbj-flow__card:hover { border-color: var(--line-strong); text-decoration: none; }
.sbj-flow__step.is-done .sbj-flow__card { border-color: var(--line); }
.sbj-flow__step.is-current .sbj-flow__card { border-color: var(--accent); }
.sbj-flow__step.is-selected .sbj-flow__card { box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--accent); background: var(--selected); }
.sbj-flow__head { display: flex; align-items: center; gap: 6px; }
.sbj-flow__num { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sbj-flow__step.is-done .sbj-flow__num, .sbj-flow__step.is-current .sbj-flow__num { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
.sbj-flow__who { font-size: 11px; color: var(--muted); }
.sbj-flow__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.sbj-flow__status { font-size: 11.5px; color: var(--muted); line-height: 1.3; min-height: 15px; }
.sbj-flow__step.is-current .sbj-flow__status { color: var(--accent); font-weight: 600; }
.sbj-flow__arrow { width: 26px; height: 46px; flex-shrink: 0; position: relative; }
.sbj-flow__arrow::before { content: ""; position: absolute; left: 2px; right: 6px; top: 22px; border-top: 1.6px solid var(--line-strong); }
.sbj-flow__arrow::after { content: ""; position: absolute; right: 5px; top: 18px; width: 7px; height: 7px; border-top: 1.6px solid var(--line-strong); border-right: 1.6px solid var(--line-strong); transform: rotate(45deg); }
.sbj-flow__arrow.is-auto::before { border-top-style: dashed; }
.sbj-flow--dense .sbj-flow__card { width: 104px; padding: 8px 8px 7px; }   /* 작업 단계 8칸이 한 줄에 들어가게 (사무실 작업 상세) */
.sbj-flow--dense .sbj-flow__arrow { width: 16px; }
.sbj-flow--dense .sbj-flow__arrow::before { right: 4px; }

/* 의견 남기기 (docs/15 §5-1): 상단 바의 작은 폼 · 패널의 준비 중 표시 */
.sbj-feedback-menu > summary { list-style: none; cursor: pointer; }
.sbj-feedback-menu > summary::-webkit-details-marker { display: none; }
.sbj-feedback__list { min-width: 380px; padding: 12px; gap: 0; }
.sbj-feedback__body { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.sbj-feedback__body .sbj-actions { justify-content: flex-end; }
.sbj-panel__soon { margin-left: auto; font-size: 11px; color: var(--muted); }

/* 영수증함 (docs/17 M10-02): 사진 · 썸네일 · AI 가 채운 칸(점선 + 배지, docs/06 §4) */
.sbj-receipt__img { max-width: 100%; max-height: 760px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.sbj-receipt__thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); vertical-align: middle; }
.sbj-ai { border: 1.5px dashed var(--accent); border-radius: var(--r-card); padding: 10px 12px; }
.sbj-ai dl { margin: 6px 0 0; }
.sbj-flow__legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line-soft); }
.sbj-flow__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sbj-flow__dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.sbj-flow__dot.is-done { background: var(--accent); border-color: var(--accent); }
.sbj-flow__dot.is-current { border: 2px solid var(--accent); }
.sbj-flow__dash { width: 22px; border-top: 1.6px dashed var(--muted); }
.sbj-flow__desc { margin: 8px 0 0; font-size: 14px; line-height: 1.65; }

/* ------------------------------------------------------------------ 업무 지도 도크 B (docs/13): 본문 옆 320px, 접으면 사라진다 */
.sbj-body { display: flex; align-items: flex-start; min-width: 0; }
.sbj-body > .sbj-content { flex: 1 1 auto; min-width: 0; }
.sbj-dock {
    width: 320px; flex-shrink: 0; position: sticky; top: calc(var(--env-h, 0px) + var(--topbar-h)); height: calc(100vh - var(--env-h, 0px) - var(--topbar-h)); overflow-y: auto;
    box-sizing: border-box; background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column;
}
.sbj-dock[hidden] { display: none; }
.sbj-dock__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line-soft); color: var(--accent); }
.sbj .sbj-dock__flow { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px; color: var(--text); }
.sbj-dock__close { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--card); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sbj-dock__close:hover { background: var(--hover); color: var(--text); }
.sbj-dock__steps { list-style: none; margin: 0; padding: 12px 16px 4px; }
.sbj-dock__step { display: flex; gap: 12px; position: relative; padding-bottom: 12px; }
.sbj-dock__step:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; border-left: 1.5px solid var(--line); }
.sbj-dock__step.is-auto:not(:last-child)::before { border-left-style: dashed; }
.sbj-dock__num { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--card); z-index: 1; }
.sbj-dock__step.is-done .sbj-dock__num, .sbj-dock__step.is-current .sbj-dock__num { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
.sbj-dock__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; }
.sbj-dock__step.is-here .sbj-dock__name, .sbj-dock__step.is-here a { font-weight: 700; color: var(--accent); }
.sbj-dock__sub { font-size: 12px; color: var(--muted); }
.sbj-dock__now { margin: 6px 12px 12px; padding: 14px 16px; border: 1.5px solid var(--accent); border-radius: var(--r-card); background: var(--selected); display: flex; flex-direction: column; gap: 6px; }
.sbj-dock__label { font-size: 12px; font-weight: 700; color: var(--accent); }
.sbj-dock__title { font-size: 14px; font-weight: 700; }
.sbj-dock__desc { margin: 0; font-size: 13px; line-height: 1.6; }
.sbj-dock__next { font-size: 12.5px; line-height: 1.5; }
.sbj-dock__next .sbj-muted { margin-right: 6px; }
.sbj .sbj-dock__more { font-size: 13px; font-weight: 600; }
.sbj-dock__foot { margin-top: auto; padding: 10px 16px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-soft); }
.sbj-topbar__dock { white-space: nowrap; }
.sbj .sbj-topbar__dock[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* 홈의 진행 중인 업무 C */
.sbj-strip { display: flex; flex-direction: column; }
.sbj-strip__row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.sbj-strip__name { width: 168px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.sbj .sbj-strip__name > a { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sbj-strip__steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.sbj-strip__steps > li { display: flex; align-items: center; }
.sbj-strip__steps > li:not(:last-child)::after { content: ""; width: 14px; border-top: 1.5px solid var(--line); margin: 0 3px; }
.sbj-strip__pill { display: inline-block; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--muted); background: var(--card); }
.sbj .sbj-strip__pill { text-decoration: none; }
.sbj .sbj-strip__pill.is-done { color: var(--text); border-color: var(--line); }
.sbj .sbj-strip__pill.is-current { color: var(--accent); border-color: var(--accent); background: var(--selected); font-weight: 700; }
a.sbj-strip__pill:hover { border-color: var(--line-strong); }
@media (max-width: 900px) {
    .sbj-dock, .sbj-topbar__dock { display: none; }
    .sbj-strip__name { width: 120px; }
}

/* ---------------------------------------------------------------- 설정 › 업무 흐름 (docs/13 §5) */
.sbj-wf th.sbj-wf__col-desc, .sbj-wf td.sbj-wf__col-desc { width: 40%; min-width: 240px; }
.sbj-wf__desc { min-height: 48px; font-size: 13px; line-height: 1.45; }
.sbj-wf td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.sbj-wf .sbj-btn--sm + .sbj-btn--sm { margin-left: 4px; }
.sbj-list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text); }
.sbj-list li + li { margin-top: 6px; }
.sbj-wf td:nth-child(3) { min-width: 210px; }
.sbj-wf__preview .sbj-strip__steps { flex-wrap: wrap; row-gap: 6px; overflow: visible; }

/* ---------------------------------------------------------------- 세무사 사무실: 상단 바 수임처 전환 · 인라인 폼 (docs/15 §3) */
.sbj-switch { position: relative; }
.sbj-switch__summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.sbj-switch__summary::-webkit-details-marker { display: none; }
.sbj-switch__list { left: 0; right: auto; min-width: 280px; max-height: 60vh; overflow-y: auto; }
.sbj-switch__list form { margin: 0; }
.sbj-switch__list .sbj-menu__item { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; cursor: pointer; }
.sbj-switch__list .sbj-menu__item.is-on { font-weight: 700; color: var(--accent); }
.sbj-inline { display: inline; margin: 0; }

/* AI 도크 대화 (docs/20 §9) — 말풍선은 선 · 정렬로만, 색은 AI 표시선 하나 */
.sbj-chat { display: flex; flex-direction: column; gap: 10px; }
.sbj-chat__q { align-self: flex-end; max-width: 80%; background: var(--selected); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
.sbj-chat__a { align-self: flex-start; max-width: 92%; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ai); border-radius: var(--r-card); padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
.sbj-chat__meta { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: normal; }

/* ---------------- 새 소식 (docs/32): 글자 · 선 · 정렬, 색은 상태 점 하나만 ---------------- */
.sbj-topbar__news { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.sbj-news__dot { width: 8px; height: 8px; }
.sbj-news__dot--unseen, .sbj-news__dot--done { background: var(--ok); }
.sbj-news__dot--in-progress { background: var(--warn); }
.sbj-news__dot--planned { background: var(--off); }
.sbj-news-asks { max-width: 860px; margin: 0 0 18px; padding: 18px 20px; }
.sbj-news-asks__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.sbj-news-ask { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.sbj-news-ask__no { flex-shrink: 0; width: 26px; height: 26px; border: 1.5px solid var(--text); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.sbj-news-ask__body { flex: 1 1 auto; min-width: 0; }
.sbj-news-ask__title { margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.sbj-news-ask__why, .sbj-news-ask__how, .sbj-news-ask__where { margin: 0; line-height: 1.65; }
.sbj-news-ask__how, .sbj-news-ask__where { margin-top: 6px; font-size: 13.5px; }
.sbj-news-ask__label { display: inline-block; margin-right: 8px; color: var(--muted); font-size: 12.5px; }
.sbj-news-ask__where a { margin-left: 8px; font-size: 13px; }
.sbj-news-ask__reply { margin-top: 10px; }
.sbj-news-ask__reply > summary { list-style: none; cursor: pointer; display: inline-flex; }
.sbj-news-ask__reply > summary::-webkit-details-marker { display: none; }
.sbj-news-ask__form { max-width: 520px; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-input); }
.sbj-home-asks .sbj-notice__text { white-space: pre-wrap; }
.sbj-news-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px; font-size: 13px; }
.sbj-news-filter__gap { margin-left: 10px; }
.sbj-news-filter__item { color: var(--muted); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.sbj-news-filter__item:hover { color: var(--text); }
.sbj-news-filter__item.is-on { color: var(--text); font-weight: 700; border-bottom-color: var(--text); }
.sbj-news-list { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.sbj-news { padding: 18px 20px; }
.sbj-news__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.sbj-news__status { font-weight: 700; color: var(--text); }
.sbj-news__title { margin: 8px 0 6px; font-size: 18px; line-height: 1.35; }
.sbj-news__title a { color: inherit; text-decoration: none; }
.sbj-news__title a:hover { text-decoration: underline; }
.sbj-news__summary { margin: 0; line-height: 1.65; }
.sbj-news__details { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
.sbj-news__details li + li { margin-top: 4px; }
.sbj-news__heard { margin: 12px 0 0; padding: 8px 0 8px 14px; border-left: 3px solid var(--line-strong); color: var(--text); }
.sbj-news__heard p { margin: 0; line-height: 1.6; }
.sbj-news__heard cite { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.sbj-news__figure { margin: 14px 0 0; }
.sbj-news__figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.sbj-news__figure figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sbj-news__where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }

/* 민원증명 요청 (docs/34 §2) — 줄마다 사실 목록 + 동작 */
.sbj-cert-list { gap: 0; }
.sbj-cert { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.sbj-cert__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.sbj-cert__facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 13.5px; }
.sbj-cert__facts > div { display: contents; }
.sbj-cert__facts dt { color: var(--muted); font-size: 12.5px; }
.sbj-cert__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sbj-cert__actions { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; align-items: center; }
.sbj-cert__actions .sbj-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sbj-cert__actions .sbj-input { width: auto; max-width: 240px; }

/* 등기 · 임원 · 기한 업무 (docs/34 §3) — 한 줄 입력 · 표는 가로 스크롤 */
.sbj-registry-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sbj-registry-form .sbj-input, .sbj-registry-form .sbj-select { width: auto; }
.sbj-registry-form input[type="number"] { width: 72px; }
.sbj-registry-form input[type="date"] { width: 150px; }
.sbj-registry-form input[name$=".Name"] { width: 140px; }
.sbj-registry-form input[name$=".Note"] { flex: 1 1 200px; }
.sbj-registry-table { overflow-x: auto; }
.sbj-registry-table .sbj-inline { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.sbj-registry-table .sbj-inline .sbj-input { width: 140px; }

/* 세법 근거 보기 (docs/34 §4) — 조문 링크는 글자와 점선 밑줄만 */
.sbj-lawrefs { font-size: 12.5px; white-space: nowrap; }
.sbj .sbj-lawref, .sbj-lawref { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 2px; }
.sbj .sbj-lawref:hover, .sbj-lawref:hover { color: var(--accent); }

/* 세무 소식 (docs/34 §5) — 글자와 선만 */
.sbj-news-feed { list-style: none; margin: 0; padding: 0; }
.sbj-news-feed__item { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.sbj-news-feed--compact .sbj-news-feed__item { padding: 9px 16px; }
.sbj-news-feed__meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.sbj-news-feed--compact .sbj-news-feed__meta { margin: 2px 0 0; }
.sbj-news-feed__source { font-weight: 600; color: var(--text); }
.sbj .sbj-news-feed__title, .sbj-news-feed__title { color: var(--text); font-weight: 600; text-decoration: none; line-height: 1.45; }
.sbj .sbj-news-feed__title:hover, .sbj-news-feed__title:hover { text-decoration: underline; }
.sbj-news-feed__summary { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.sbj-news-feed__digest { border-bottom: 1px solid var(--line-soft); }
.sbj-news-feed__digest p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; }

/* 손 일 띠 (수집 현황, docs/36 §2) — 글자 · 점 · 선으로, 색 채움 없음 */
.sbj-handjobs { padding: 10px 14px; margin: 0 0 12px; }
.sbj-handjobs__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sbj-handjobs__counts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.sbj-handjobs__form { display: flex; align-items: center; gap: 12px; margin: 0; }
.sbj-handjobs .sbj-hint { margin: 8px 0 0; }

/* 검수 모드 (docs/40): IA 화면 · 검수 도크 · 케이스 폼. 상태는 왼쪽 선 색 하나와 글자로만 */
.sbj-qa__bar { display: flex; flex-direction: column; gap: 10px; }
.sbj-qa__round { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sbj-qa__round .sbj-label { margin-right: 6px; }
.sbj-qa__totals { font-size: 13px; }
.sbj-qa__newround { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.sbj-qa__targets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.sbj-qa__targets label { display: inline-flex; align-items: center; gap: 4px; }
.sbj-qa__nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.sbj-qa__ctx h2 { font-size: 17px; margin: 0 0 6px; }
.sbj-qa__ctx h2 small { font-size: 12.5px; font-weight: 400; margin-left: 8px; }
.sbj-qa__module { font-size: 14px; margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.sbj-qa__module small { font-weight: 400; font-size: 12px; margin-left: 6px; }
.sbj-qa__screens { display: flex; flex-direction: column; gap: 4px; }
.sbj-qa-screen { border-left: 3px solid var(--line); padding-left: 10px; }
.sbj-qa-screen.is-pass { border-left-color: var(--ok); }
.sbj-qa-screen.is-fail { border-left-color: var(--bad); }
.sbj-qa-screen.is-stale, .sbj-qa-screen.is-part { border-left-color: var(--warn); }
.sbj-qa-screen > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; padding: 4px 0; list-style: none; }
.sbj-qa-screen > summary::-webkit-details-marker { display: none; }
.sbj-qa-screen__title { font-weight: 600; }
.sbj-qa-screen__mark { font-size: 11.5px; color: var(--muted); }
.sbj-qa-screen__path { font-size: 12px; color: var(--muted); }
.sbj-qa-screen__prog { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.sbj .sbj-qa-screen__go { font-size: 12.5px; font-weight: 600; }
.sbj-qa-screen__body { padding: 4px 0 12px; font-size: 13.5px; line-height: 1.6; }
.sbj-qa-screen__body p { margin: 0 0 4px; }
.sbj-qa-screen__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.sbj-qa-screen__news { font-size: 12.5px; margin-bottom: 8px; }
.sbj-qa-cases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sbj-qa-case { border: 1px solid var(--line-soft); border-left: 3px solid var(--line); padding: 8px 10px 10px; font-size: 13px; line-height: 1.55; }
.sbj-qa-case.is-pass { border-left-color: var(--ok); }
.sbj-qa-case.is-fail { border-left-color: var(--bad); }
.sbj-qa-case.is-stale, .sbj-qa-case.is-blocked { border-left-color: var(--warn); }
.sbj-qa-case.is-skip { border-left-style: dashed; }
.sbj-qa-case__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.sbj-qa-case__title { font-weight: 600; }
.sbj-qa-case__state { font-size: 12px; color: var(--muted); }
.sbj-qa-case.is-fail .sbj-qa-case__state { color: var(--bad); }
.sbj-qa-case__steps { margin: 4px 0; padding-left: 20px; }
.sbj-qa-case__line { margin: 1px 0; }
.sbj-qa-case__line .sbj-muted { margin-right: 6px; }
.sbj-qa-case__src, .sbj-qa-case__auto, .sbj-qa-case__agent { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sbj-qa-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sbj-qa-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sbj-qa-form__fb { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.sbj-qa-dock__body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.sbj-qa-dock__meta, .sbj-qa-dock__doc, .sbj-qa-dock__progress { font-size: 12px; color: var(--muted); }
.sbj-qa-dock__progress { font-weight: 600; color: var(--text); }
.sbj-qa-dock__news { font-size: 12.5px; }
.sbj-qa-dock .sbj-dock__now { margin: 6px 0 0; }
.sbj-qa-form__ai { display: flex; align-items: center; gap: 8px; }