/* =============================================================================
   협력업체(ct) 공용 화면 스타일 (2026-10-10) — 화면 전용. 출력물(인쇄) 스타일은 각 업무 css 의 '#hsPrintHost …' 로 따로 둔다.
   색·글꼴은 theme-apple 의 토큰(var(--mint), var(--line), var(--ink-2) …)을 따른다. 클래스는 모두 ct- 접두.
   ========================================================================== */
body.hs-mod-ct-dash #app, body.hs-mod-ct-eval #app { max-width: 1240px; }   /* 현황·평가 Dashboard 는 표가 넓다(hs 기본 960px 보다) */
body.hs-mod-ct-admin #app, body.hs-mod-ct-plan #app, body.hs-mod-ct-council #app, body.hs-mod-ct-inspect #app { max-width: 1120px; }
body.hs-mod-ct-cost #app { max-width: 1120px; }

/* 결재 단계 */
.ct-appr h3 { margin: 0 0 10px; font-size: 16px; }
.ct-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ct-step { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line, #d2d2d7); border-radius: 12px; background: var(--surface, #fff); }
.ct-step.is-cur { border-color: var(--mint, #0071e3); box-shadow: 0 0 0 2px rgba(0, 113, 227, .12); }
.ct-step-no { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2, #f5f5f7); color: var(--ink-2, #6e6e73); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.ct-step-approved .ct-step-no { background: #1baf7a; color: #fff; }
.ct-step-rejected .ct-step-no { background: #d4467e; color: #fff; }
.ct-step-main { display: flex; flex-direction: column; min-width: 0; }
.ct-step-main small { color: var(--ink-2, #6e6e73); }
.ct-step-st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--ink-2, #6e6e73); }
.ct-step-cmt { grid-column: 2 / -1; font-size: 13px; color: #b3334f; }
.ct-appr-act { margin-top: 12px; }
.ct-appr-hist { margin-top: 10px; font-size: 13px; color: var(--ink-2, #6e6e73); }
.ct-appr-hist ul { margin: 6px 0 0; padding-left: 18px; }

/* 차트 */
.ct-bars { display: grid; gap: 8px; }
.ct-bar-row { display: grid; grid-template-columns: minmax(84px, 22%) 1fr 64px; gap: 10px; align-items: center; min-height: 32px; }
.ct-bar-row.is-click { cursor: pointer; border-radius: 8px; }
.ct-bar-row.is-click:hover, .ct-bar-row.is-click:focus-visible { background: var(--surface-2, #f5f5f7); outline: none; }
.ct-bar-lb { display: flex; flex-direction: column; font-size: 14px; overflow-wrap: anywhere; }
.ct-bar-lb small { color: var(--ink-2, #6e6e73); font-size: 12px; }
.ct-bar-tr { height: 12px; border-radius: 6px; background: var(--surface-2, #f0f0f2); overflow: hidden; }
.ct-bar-tr i { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.ct-bar-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ct-bar-v em { font-style: normal; font-weight: 400; color: var(--ink-2, #6e6e73); font-size: 12px; }
.ct-hist { display: flex; gap: 12px; align-items: flex-end; justify-content: space-around; min-height: calc(var(--ct-hh, 120px) + 44px); padding-top: 8px; }
.ct-hist-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 120px; }
.ct-hist-bar { display: flex; align-items: flex-end; width: 100%; height: var(--ct-hh, 120px); background: var(--surface-2, #f0f0f2); border-radius: 8px; overflow: hidden; }
.ct-hist-bar i { display: block; width: 100%; min-height: 2px; border-radius: 8px 8px 0 0; }
.ct-hist-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-hist-lb { font-size: 13px; color: var(--ink-2, #6e6e73); }
.ct-ln { display: block; }
.ct-ln-grid { stroke: var(--line, #e1e1e6); stroke-width: 1; }
.ct-ln-ax { fill: var(--ink-2, #6e6e73); font-size: 11px; }
.ct-ln-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.ct-ln-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ct-ch-table { margin-top: 8px; font-size: 13px; }
.ct-ch-table summary { cursor: pointer; color: var(--ink-2, #6e6e73); }

/* 서명 이미지(화면 미리보기) */
img.ct-sig { height: 34px; max-width: 120px; object-fit: contain; vertical-align: middle; }

@media (max-width: 640px) {
  .ct-bar-row { grid-template-columns: minmax(70px, 30%) 1fr 54px; gap: 8px; }
  .ct-step { padding: 10px; }
}