/* 세부장 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 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; }
.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; }

/* 로그인 전 화면 */
.sbj-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 64px 16px 24px; box-sizing: border-box; }
.sbj-auth__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 20px; font-weight: 700; }
.sbj-auth__brand .sbj-rail__logo { margin-bottom: 0; }
.sbj .sbj-auth__brand, .sbj .sbj-auth__brand:hover { color: var(--text); text-decoration: none; }
.sbj-auth__card { width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-sizing: border-box; }
.sbj-auth__foot { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ 화면 머리 + 액션 바 */
.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-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; }
.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--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; }
.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; }
}