:root {
    --stock-primary: #2458c6;
    --stock-primary-dark: var(--pundit-primary-strong, #163f9f);
    --stock-surface: #ffffff;
    --stock-surface-soft: var(--pundit-surface-soft, #f8fafc);
    --stock-border: var(--pundit-border, #dce3ee);
    --stock-text: #172033;
    --stock-muted: var(--pundit-muted, #69778D);
}

.stock-workspace {
    display: grid;
    gap: 20px;
}

.stock-workspace > .card {
    margin-bottom: 0;
    border: 1px solid var(--stock-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    overflow-x: auto;
}

.stock-workspace > .card > h2,
.stock-workspace > .card > h3 {
    margin-top: 0;
    color: var(--stock-text);
    line-height: 1.35;
}

.stock-workspace > .card > h2 {
    margin-bottom: 8px;
    font-size: 1.125rem;
    font-weight: 800;
}

.stock-workspace > .card > h3 {
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 700;
}

.stock-workspace .form-group label {
    margin-bottom: 7px;
    color: #172033;
    font-size: 0.875rem;
    font-weight: 700;
}

.stock-workspace .form-group input[type="text"],
.stock-workspace .form-group input[type="number"],
.stock-workspace .form-group input[type="date"],
.stock-workspace .form-group select,
.stock-workspace .form-group textarea {
    min-height: 42px;
    /* 2.1: 값을 넣는 칸은 컨트롤 테두리 (흰 배경 3.49:1) */
    border-color: var(--pundit-border-control, #7e8a9f);
    border-radius: 6px;
    font-family: inherit;
}

.stock-project-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px;
    padding: 20px 24px;
}

.stock-project-header__copy {
    flex: 1 1 440px;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.stock-project-header__eyebrow {
    margin: 0;
    color: var(--stock-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.stock-project-header__title {
    margin: 0;
    color: var(--stock-text);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.25;
}

.stock-project-header__description,
.stock-project-header__meta {
    margin: 0;
    color: var(--stock-muted);
}

.stock-project-header__description {
    font-size: 1rem;
    line-height: 1.6;
}

.stock-project-header__meta {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.stock-project-header__actions,
.stock-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.stock-project-header__actions {
    justify-content: flex-end;
}

/* 이 시트는 워크스페이스 버튼의 **간격과 글자**만 정한다.  색을 나르는 속성
   (background, color, border / border-color)은 한 줄도 두지 않는다 — 그 색은
   base.html 의 `.btn` / `.btn-*` 한 곳이 소유한다.

   여기 있던 `border: 1px solid transparent` 가 배경 덮어쓰기와 똑같은 결함의
   나머지 반쪽이었다.  base.html 의 `.btn` 이 이미 같은 값을 주므로 기본
   상태에는 보탬이 없는데, 특이도가 (0,2,0) 이라 (0,1,0) 인
   `.btn-danger { border-color: var(--pundit-danger) }` 를 이겼다.  그래서
   `.stock-workspace` 안에서만 삭제 버튼 테두리가 rgba(0,0,0,0) 이 되어
   흰 카드 위 흰 버튼 — 상자 대비 1.00:1 — 로 그려졌고, 가이드 §4.5 의
   Danger(흰 배경 + 빨간 테두리 + 빨간 글자)가 글자만 남았다.

   테두리 굵기(1px)는 base.html 이 주므로 상자 크기도 그대로다.  아래 남은
   선언은 base.html 의 `.btn` 과 값이 다른 것들뿐이다 — 값이 같던
   min-height / display / align-items / justify-content / border-radius /
   text-align 도 함께 지웠다.  같은 값을 두 시트에 두면 언젠가 한쪽만
   바뀐다. */
.stock-workspace .btn {
    white-space: nowrap;
}

/* 여기에 있던 `.stock-workspace .btn-sm { min-height: 36px; padding: 0 12px; }`
   도 지웠다. buttons.css 의 정본 `.btn-sm`(38px, 패딩 6px 12px, 134-138행)을
   이 화면 안에서만 36px·패딩 0 12px 로 다시 그리는 덮어쓰기였다 — 옮김 표
   B-5 는 "굵기·높이·색 덮어쓰기 삭제, 화면이 가져도 되는 것은 배치뿐"이라
   한다. 36px 덮어쓰기를 지웠으므로 이 화면의 조밀 단추(「사용 가이드」
   「환율 DB」 등 `.btn-sm`)는 이제 정본 38px·패딩 6px 12px 로 그려진다. */

/* 여기에 있던 `.stock-workspace .btn:disabled` / `[aria-disabled="true"]`
   { cursor: not-allowed; opacity: 0.58; } 도 지웠다. cursor 는 buttons.css 의
   `.btn:disabled`(153-162행)와 값이 같아 덧칠일 뿐이었고, opacity 는 그 위에
   얹혀 `.btn:disabled` 가 이미 칠하는 --pundit-surface-soft/--pundit-border/
   --pundit-muted 를 한 번 더 흐리게 만들었다 — 가이드 §4.5 의 "불투명도만
   낮추지 않는다"(색·테두리·글자·커서로 비활성을 말한다)를 이 화면 안에서만
   어기고 있었다. */

/* 여기에 있던 `.stock-workspace .btn:not(.btn-secondary):not(.btn-success):not(.btn-danger)`
   와 그 :hover 짝도 지웠다.  둘 다 base.html 의 `.btn` / `.btn:hover` 가 이미
   칠하는 값(`--pundit-primary` / `--pundit-primary-strong`)을 !important 로 한 번 더
   칠할 뿐이라 지워도 그려지는 색이 달라지지 않는다.  대신 남겨 두면 위험하다 —
   `:not()` 목록은 "여기 적히지 않은 버튼은 전부 파랑" 이라는 뜻이어서, 앞으로
   추가되는 버튼 종류는 자기 글자색을 어디에 선언하든 배경만 파랑으로 끌려간다.
   실제로 review_project.html 의 삭제 아이콘(`.btn-icon--danger`, 빨간 글자)이
   `.stock-workspace` 안으로 들어가는 순간 파랑 위 빨강 1.28:1 이 된다. */

/* 여기에 있던 `.stock-workspace .btn-secondary` { border-color / color /
   background !important } 와 그 :hover 짝도 지웠다. 기본 상태의 값은
   buttons.css 의 `.btn-secondary`(background --pundit-surface, border-color
   --pundit-border-control, color --pundit-text)와 글자 그대로 같았지만,
   buttons.css 보다 뒤에 실리는 특이도 (0,2,0) 규칙이라 같은 (0,2,0) 인 정본
   상태 규칙을 이기고 있었다. 그래서 이 화면에서만 (1) Secondary 호버 테두리가
   정본 `.btn-secondary:hover` 의 --pundit-muted-strong(#526277)으로 진해지지
   않고 컨트롤 테두리(#7E8A9F)에 머물렀고(§4.5「호버는 한 단계 진하게」
   위반), (2) 비활성 Secondary 가 정본 `.btn:disabled`(--pundit-surface-soft
   배경·--pundit-border 테두리·--pundit-muted 글자) 대신 흰 배경(!important)·
   컨트롤 테두리·기본 글자로 그려졌다. 호버 짝은 글자색만 손으로 적은
   #1d2939 였다. 지운 뒤로는 호버 테두리·비활성 모양이 정본대로 바뀐다 —
   눈에 보이는 변화이고, 정본에 맞춘 것이다. */

/* 검토 화면의 단일 복귀 동작은 선택한 1번 시안의 테두리형 Secondary로 고정한다. */
.btn.btn-secondary.review-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--stock-primary);
    border-radius: 8px;
    color: var(--stock-primary);
    background: #ffffff !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.btn.btn-secondary.review-back-btn:hover {
    /* 호버가 테두리를 #87a5df 로 '연하게' 만들어 2.48:1 로 떨어뜨리고 있었다.
       §4.5 대로 호버는 한 단계 진한 값이다 — 글자가 이미 쓰는 -strong 을
       테두리에도 쓴다 (#f5f8ff 위 8.80:1). */
    border-color: var(--stock-primary-dark);
    color: var(--stock-primary-dark);
    background: #f5f8ff !important;
}

.btn.btn-secondary.review-back-btn:focus-visible {
    outline: 3px solid var(--stock-primary);
    outline-offset: 2px;
}

.review-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.review-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

/* 검토 화면 머리 행의 단추(「뒤로가기」·「다운로드」)는 머리 행동이라 정본 기본 42px 이다
   (shared/buttons.css, 가이드 §4.5 — `.btn-sm` 38px 은 조밀한 표 안 행 동작의 층).  여기에 있던
   `min-height: 44px` 두 벌과 뒤로가기의 패딩 · 글자 크기 덮어쓰기는 2단계에서 걷었다 — 머리 행의
   `btn-sm` 을 44px 로 되부풀리던 받침이었다.  남는 것은 배치(줄바꿈 금지 · 최소 폭)뿐이다. */
.review-header-actions .btn {
    white-space: nowrap;
}

.review-header-row .review-back-btn {
    min-width: 144px;
}

/* 편집값 바로 아래에는 가져온 원문 값만 둔다. 위치가 의미를 전달하므로
   같은 문구를 모든 칸에서 되풀이하지 않는다. */
.original-value {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    color: var(--stock-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: normal;
    white-space: nowrap;
}

.original-value--numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.original-value--wrap,
.original-value--raw {
    font-weight: 400;
    overflow-wrap: anywhere;
    white-space: normal;
}

.original-value--empty {
    color: var(--pundit-muted-strong, #526277);
    font-style: italic;
}

/* 원문값이 현재 값과 다른 칸 (대표 결정 2026-09-28: 원문 줄은 늘 보이고,
   사람이 봐야 할 다른 칸만 짚는다).  새 색 없이 이미 쓰는 한 단계 진한
   보조색과 굵기로 — 화면낭독기에는 숨긴 라벨 「원문값(현재 값과 다름)」. */
.original-value--differs {
    color: var(--pundit-muted-strong, #526277);
    font-weight: 700;
}

.original-value__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.needs-review .original-value {
    color: var(--pundit-muted-strong, #526277);
}

.editable-table input[data-field="quantity"],
.editable-table input[data-field="price"],
.editable-table input[data-field="amount"],
.editable-table input[data-field="fee"],
.editable-table input[data-field="buy_amount"],
.editable-table input[data-field="sell_amount"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.review-table-scroll {
    overflow-x: auto;
    border-radius: 6px;
}

.review-table-scroll:focus-visible {
    outline: 3px solid var(--pundit-focus);
    outline-offset: -3px;
}

.review-table--full {
    min-width: 1320px;
}

.review-table--fx {
    min-width: 1180px;
}

.review-table--compact {
    min-width: 980px;
}

.review-table__memo {
    min-width: 200px;
}

@media (max-width: 640px) {
    .review-header-row {
        flex-wrap: wrap;
    }

    .review-header-row > .review-back-btn,
    .review-header-actions {
        margin-left: auto;
    }

    .review-header-actions {
        width: 100%;
    }
}

/* 여기에 있던 `.stock-workspace .btn-success` / `.btn-danger` 배경 덮어쓰기는
   지웠다.  두 규칙은 배경만 !important 로 다시 정하고 글자색은 base.html 의
   `.btn-*` 규칙에 남겨 둬서, 한쪽 시트가 배경을, 다른 시트가 글자색을
   따로 소유하는 상태를 만들었다.  main 이 가이드 §4.5 대로 `.btn-danger` 를
   윤곽선형(흰 배경·빨간 테두리·빨간 글자)으로 바꾸자 이 덮어쓰기가 배경만
   빨강으로 되돌려 빨강 위 빨강 1.00:1 이 됐고, 삭제 버튼의 글자가 사라졌다.
   `.btn-success` 도 같은 함정이었다 — `--pundit-success-strong`(흰 글자 6.00:1)
   으로 칠해야 할 자리를 `--pundit-success`(4.35:1, AA 미달)로 되돌리고 있었다.
   버튼 색은 base.html 의 `.btn-*` 한 곳에서만 정한다. */

.stock-workspace .stock-project-header__title {
    margin: 0;
    color: var(--stock-text);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.25;
}

.stock-section-title,
.stock-subsection-title,
.stock-section-description {
    margin-top: 0;
}

.stock-section-title {
    margin-bottom: 8px;
    color: var(--stock-text);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.35;
}

.stock-subsection-title {
    margin-bottom: 8px;
    color: var(--stock-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.stock-section-description {
    margin-bottom: 16px;
    color: var(--stock-muted);
    font-size: 0.875rem;
    line-height: 1.55;
}

/* 값의 출처는 상태가 아니므로 pill로 강조하지 않는다. 모든 화면에서
   유형과 제공처를 같은 2행 key/value 구조로 표시한다. */
.source-provenance {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 8px 0 0;
    color: var(--stock-text);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.source-provenance > div {
    display: contents;
}

.source-provenance dt,
.source-provenance dd {
    margin: 0;
}

.source-provenance dt {
    color: var(--stock-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.source-provenance dd {
    min-width: 0;
    color: var(--stock-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.stock-form-label {
    display: block;
    margin: 0 0 7px;
    color: #172033;
    font-size: 0.875rem;
    font-weight: 700;
}

.stock-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.stock-action-push {
    margin-left: auto;
}

.stock-upload-panel {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--stock-border);
    border-radius: 12px;
    background: var(--stock-surface-soft);
}

.stock-upload-panel__heading,
.stock-upload-panel__copy {
    display: grid;
    gap: 5px;
}

.stock-upload-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.stock-upload-panel__title {
    margin: 0;
    color: var(--stock-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
}

.stock-upload-panel__description {
    margin: 0;
    color: var(--stock-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.stock-upload-panel__dropzone,
.stock-upload-dropzone {
    min-height: 118px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 2px dashed var(--pundit-border-control, #7E8A9F);
    border-radius: 12px;
    background: #fff;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.stock-upload-panel__dropzone.is-dragover,
.stock-upload-panel__dropzone:focus-within,
.stock-upload-dropzone.is-dragover,
.stock-upload-dropzone:focus-within {
    border-color: var(--stock-primary);
    background: #EDF4FF;
    box-shadow: 0 0 0 3px rgba(36, 88, 198, 0.1);
}

.stock-upload-panel__selection,
.stock-upload-dropzone__copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.stock-upload-panel__filename {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #172033;
    font-size: 0.875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.stock-upload-panel__hint,
.stock-upload-panel__status,
.stock-upload-dropzone__hint,
.stock-upload-status {
    margin: 0;
    color: var(--stock-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.stock-upload-panel__status:not(:empty),
.stock-upload-status:not(:empty) {
    color: #172033;
}

.stock-upload-panel__controls,
.stock-upload-dropzone__control,
.stock-upload-selection {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.stock-upload-panel__input,
.stock-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.stock-upload-panel__input:focus-visible + .btn,
.stock-upload-input:focus-visible + .btn {
    outline: 3px solid var(--pundit-primary, #2458c6);
    outline-offset: 2px;
}

.stock-upload-panel__template-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.stock-upload-dropzone__title {
    margin: 0;
    color: #172033;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.45;
}

.stock-upload-selection {
    justify-content: space-between;
    min-height: 36px;
}

.stock-upload-selection [data-stock-upload-clear] {
    flex: 0 0 auto;
}

.stock-upload-selection [data-stock-upload-clear][hidden] {
    display: none !important;
}

.stock-upload-panel__actions {
    display: flex;
    justify-content: flex-end;
}

.stock-workspace :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--pundit-primary, #2458c6);
    outline-offset: 2px;
}

.stock-route-map {
    display: grid;
    justify-content: stretch;
    align-items: stretch;
    gap: 0;
    padding: 20px 24px;
    border: 1px solid var(--stock-border);
    border-radius: 12px;
    background: var(--stock-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.stock-route-map__heading {
    display: grid;
    gap: 4px;
    padding-bottom: 8px;
}

.stock-route-map__heading h2 {
    margin: 0;
    color: var(--stock-text);
    font-size: 1rem;
}

.stock-route-map__heading p {
    margin: 0;
    color: var(--stock-muted);
    font-size: 0.82rem;
}

.stock-route-map__group {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 8px 0;
}

.stock-route-map__group + .stock-route-map__group {
    border-top: 1px solid var(--stock-border);
}

.stock-route-map__label {
    color: var(--stock-primary);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.stock-route-map__steps {
    display: flex;
    align-items: center;
    gap: 8px;
    row-gap: 24px;
    flex-wrap: wrap;
}

.stock-route-step {
    position: relative;
    /* 카드는 이름만큼만 넓어진다.  고정 basis 나 flex-grow 를 주면 짧은
       이름 뒤에 빈 칸이 남아 줄마다 카드 폭이 제각각으로 보인다. */
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid var(--stock-border);
    border-radius: 8px;
    color: var(--stock-text);
    background: var(--stock-surface-soft);
    text-decoration: none;
}

.stock-route-step:hover {
    border-color: var(--stock-primary);
    background: var(--pundit-primary-soft, #edf4ff);
}

.stock-route-step[aria-current="step"] {
    border-color: var(--stock-primary);
    background: var(--pundit-primary-soft, #edf4ff);
}

.stock-workspace .stock-route-step:focus-visible {
    outline: 3px solid var(--stock-primary);
    outline-offset: 2px;
}

.stock-route-step__number {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--stock-border);
    color: var(--stock-text);
    background: var(--stock-surface);
    font-size: 0.72rem;
    font-weight: 800;
}

.stock-route-step[aria-current="step"] .stock-route-step__number {
    border-color: var(--stock-primary);
    color: #fff;
    background: var(--stock-primary);
}

.stock-route-step[aria-current="step"] .stock-route-step__label {
    color: var(--stock-primary);
}

.stock-route-step__label {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.stock-route-step__status {
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 1;
    padding: 2px 6px;
    transform: translateY(-55%);
    border-radius: 999px;
    color: #fff;
    background: var(--stock-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* 줄에 남는 폭은 카드가 아니라 **연결선**이 먹는다.
   카드를 늘리면 짧은 이름 뒤에 빈 칸이 생기고(소유자가 지적한 그 공백),
   줄을 가운데로 모으면 장수가 다른 줄끼리 시작점이 달라져 계단의 축이
   흔들린다(`.stock-route-map__group` 이 `88px minmax(0,1fr)` 격자라 지금은
   모든 줄이 라벨에서 같은 x 로 시작한다).  화살표만 늘리면 셋 다 지켜진다.
   상한을 두는 이유: 아주 넓은 화면에서 연결선이 600px 을 넘으면 단계
   사이가 아니라 빈 줄로 읽힌다. */
.stock-route-connector {
    position: relative;
    flex: 1 1 24px;
    min-width: 24px;
    max-width: 160px;
    height: 1px;
    background: var(--stock-border);
}

.stock-route-connector--decision::after {
    position: absolute;
    top: 50%;
    right: -1px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--stock-muted);
    content: "";
    transform: translateY(-50%);
}

.stock-route-map__note {
    align-self: center;
    color: var(--stock-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.stock-task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.stock-task-card {
    min-height: 174px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--stock-border);
    border-radius: 12px;
    color: var(--stock-text);
    background: var(--stock-surface);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.stock-task-card:hover {
    transform: translateY(-2px);
    border-color: #9bb6ee;
    box-shadow: 0 8px 20px rgba(36, 88, 198, 0.1);
}

.stock-task-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stock-task-card__number {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: var(--stock-primary);
    font-weight: 800;
}

.stock-task-card h3,
.stock-task-card p {
    margin: 0;
}

.stock-task-card h3 {
    font-size: 1rem;
}

.stock-task-card p {
    color: var(--stock-muted);
    font-size: 0.82rem;
}

.stock-task-card__route {
    margin-top: auto !important;
    color: #52627a !important;
    font-size: 0.76rem !important;
}

.stock-workspace table {
    min-width: 720px;
}

.stock-workspace table th {
    color: #172033;
    background: #f7f9fc;
}

.stock-workspace table tr:hover {
    background: #f9fbff;
}

.stock-workspace .progress-bar-container,
.stock-workspace .progress {
    border-radius: 999px !important;
}

.stock-workspace [id="processingPanel"] {
    border-color: #b8cbf3;
    background: #fbfcff;
}

.stock-workspace .help-modal-backdrop[data-stock-help-dialog] {
    padding: 18px;
}

.stock-workspace .help-modal-backdrop[data-stock-help-dialog][aria-hidden="false"] {
    display: flex;
}

.stock-workspace .help-modal {
    border: 1px solid var(--stock-border);
    border-radius: 14px;
}

/* 여기에 있던 `.stock-workspace .help-section-title { color: var(--stock-primary)
   !important; }` 도 지웠다. help_modal.css 의 정본 `.help-section-title` 은
   기본 글자색(--pundit-text)인데, 이 화면 안에서만 !important 로 파랑으로
   덧칠해 같은 컴포넌트가 화면마다 다시 갈라지고 있었다 — 도움말 모달은
   help_modal.css 하나가 소유한다(§4.11). */

@media (max-width: 760px) {
    .stock-project-header__actions,
    .stock-actions {
        width: 100%;
    }

    .stock-project-header__actions {
        margin-left: 0;
        justify-content: flex-start;
    }

    .stock-project-header {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    /* 헤더 행동 단추(`.btn-secondary.btn-sm`)는 데스크톱에서 buttons.css 의
       `.btn-sm` 38px(134-138행)를 그대로 쓴다. 760px 이하에서는 §6 최소
       클릭 영역 40px 를 지키려고 기본 `.btn` 높이 42px(buttons.css
       28-50행)로 올린다. */
    .stock-project-header__actions .btn,
    .stock-actions .btn {
        min-height: 42px;
    }

    .stock-form-actions {
        width: 100%;
    }

    .stock-form-actions .btn {
        width: 100%;
    }

    .stock-upload-panel {
        padding: 15px;
    }

    .stock-upload-panel__dropzone,
    .stock-upload-dropzone {
        align-items: stretch;
        flex-direction: column;
    }

    .stock-upload-panel__controls,
    .stock-upload-panel__controls .btn,
    .stock-upload-dropzone__control,
    .stock-upload-dropzone__control .btn,
    .stock-upload-panel__actions,
    .stock-upload-panel__actions .btn {
        width: 100%;
    }

    .stock-route-map {
        padding: 16px;
    }

    .stock-route-map__group {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .stock-route-map__label {
        padding-top: 0;
    }

    .stock-route-map__steps {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        row-gap: 12px;
    }

    .stock-route-step {
        /* 좁은 화면에서도 카드는 이름만큼만 넓어진다.  한 줄에 하나씩
           `width: 100%` 로 늘리면 짧은 이름 뒤에 화면 폭만큼 빈 칸이 남는다 —
           소유자가 지적한 그 공백이 데스크톱에서만 사라지고 여기 그대로
           있었다.  손가락 표적은 min-height 로 지킨다. */
        width: auto;
        min-height: 52px;
    }

    .stock-route-connector {
        display: none;
    }

    .stock-task-grid {
        grid-template-columns: 1fr;
    }

    .stock-workspace > .card {
        padding: 18px;
    }

    .stock-workspace table {
        min-width: 680px;
    }
}

/* 정렬 가능한 표 머리글.  누를 수 있다는 것과 지금 어느 방향으로 정렬돼
   있는지를 색이 아니라 기호로도 알린다. */
th.is-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.is-sortable::after {
    content: "↕";
    margin-left: 6px;
    opacity: 0.35;
    font-size: 11px;
}

th.is-sortable:hover::after {
    opacity: 0.7;
}

th.is-sortable.is-sorted-asc::after {
    content: "↑";
    opacity: 1;
    color: var(--pundit-primary, #2458c6);
}

th.is-sortable.is-sorted-desc::after {
    content: "↓";
    opacity: 1;
    color: var(--pundit-primary, #2458c6);
}

/* 접근성 기준 6: 키보드 focus ring */
th.is-sortable:focus-visible {
    outline: 3px solid var(--pundit-primary, #2458c6);
    outline-offset: 2px;
}

/* 고른 파일 카드.  파일명 끝이 잘리면 안 된다: '(정기신고) (1)' 처럼 그 파일을
   다른 파일과 구별해 주는 부분이 대체로 이름 끝에 있어서, 말줄임은 정확히
   확인해야 할 곳을 가린다. */
.stock-upload-files {
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid #cddcf5;
    border-left: 4px solid var(--stock-primary, #2458C6);
    border-radius: 10px;
    background: #f4f8ff;
}

.stock-upload-files[hidden] {
    display: none;
}

.stock-upload-files__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stock-upload-files__count {
    color: #34455c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.stock-upload-files__list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stock-upload-file {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #dde6f6;
    border-radius: 8px;
    background: #fff;
}

.stock-upload-file.is-invalid {
    border-color: #e4bd57;
    background: #fff9e8;
}

.stock-upload-file__kind {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--stock-primary, #2458C6);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.stock-upload-file.is-invalid .stock-upload-file__kind {
    background: #8a6100;
}

.stock-upload-file__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.stock-upload-file__name {
    color: #172033;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.stock-upload-file__meta {
    color: var(--stock-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.stock-upload-file.is-invalid .stock-upload-file__meta {
    color: #8a6100;
    font-weight: 700;
}

/* 상태 문구와 실행 버튼을 한 줄에 둔다.  문구가 설명하는 대상이 바로 옆에
   있어야 읽고 누르는 흐름이 끊기지 않는다. */
.stock-upload-panel__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.stock-upload-panel__actions .stock-upload-status {
    flex: 1 1 240px;
    min-width: 0;
}

.stock-upload-panel__actions .btn {
    flex: 0 0 auto;
}

@media (max-width: 650px) {
    .stock-upload-panel__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .stock-upload-panel__actions .btn {
        width: 100%;
    }
}

/* 검토 화면의 탭은 이제 그 탭만 서버에서 그려 온다.  버튼이 아니라
   링크이므로 밑줄과 배치만 기존 버튼 탭과 같게 맞춘다 (모양은 그대로). */
.tabs a.tab {
    display: inline-block;
    text-decoration: none;
}

/* 사람 탭 — 카드로 연 작업창에서 본인 · 배우자 · 자녀를 넘긴다(대표 결정 21, 2026-09-17).
   모양은 FBAR 작업 공간의 탭 띠와 같게 맞추되(밑줄 하나로 지금 사람을 가리킨다) 색은 이 앱의
   토큰에서 온다 — 다른 서비스의 색 값을 베껴 오면 토큰을 고쳐도 여기만 옛 색으로 남는다. */
.case-person-nav {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--pundit-border, #dce3ee);
}

.case-person-tabs {
    display: flex;
    min-width: 0;
    overflow-x: auto;
}

.case-person-tab {
    min-height: 52px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid transparent;
    color: var(--stock-muted);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.case-person-tab[aria-current="page"] {
    color: var(--pundit-primary, #2458C6);
    border-bottom-color: var(--pundit-primary, #2458C6);
    background: var(--pundit-primary-soft, #EDF4FF);
}

.case-person-tab:focus-visible {
    outline: 3px solid var(--pundit-primary, #2458C6);
    outline-offset: 2px;
}
/* 작업 흐름 제목 줄 오른쪽의 사용 가이드 단추(대표 코멘트 86b71ffc) */
.stock-route-map__heading--with-guide { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* 삭제된 작업 -- 410 「삭제된 작업입니다」 화면의 단추 줄과 목록의 「삭제된 작업 보기」
   (대표 결정 2026-09-28 "관리자용 복원 단추를 별도로 만들어줘").  새 색 · 기하 없음:
   주 동작(복원)은 오른쪽 끝(§4.11), 접힌 칸의 머리는 `.wf-details` 와 같은 40px 이상 클릭 영역. */
.deleted-record__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.deleted-record__actions form,
.deleted-records__restore {
    margin: 0;
}

.deleted-records {
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--pundit-border);
}

.deleted-records summary {
    display: list-item;
    min-height: 40px;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 700;
    color: var(--pundit-text);
}

.deleted-records summary:focus-visible {
    outline: 3px solid var(--pundit-primary);
    outline-offset: 2px;
}

.deleted-records__note {
    margin: 4px 0 12px;
    color: var(--pundit-muted-strong);
    font-size: 13px;
}