/* 成立した案件の「流れ」と「次にやること」。タレント側・企業側で共通（x-projects.contract-steps / contract-next） */
.ct-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 0 18px; padding: 16px 12px; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(24,35,58,.05); }
.ct-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--pc-mute,#8A94A6); font-size: 12px; font-weight: 700; }
.ct-steps li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 3px; border-radius: 2px; background: #E2E8F0; }
.ct-steps li.is-done:not(:last-child)::after { background: #16A34A; }
.ct-steps__dot { width: 32px; height: 32px; border-radius: 50%; background: #E2E8F0; color: var(--pc-sub,#5B667A); display: flex; align-items: center; justify-content: center; font-size: 13px; position: relative; z-index: 1; }
.ct-steps li.is-done .ct-steps__dot { background: #16A34A; color: #fff; }
.ct-steps li.is-current .ct-steps__dot { background: var(--pc-blue,#2563EB); color: #fff; box-shadow: 0 0 0 5px #DCE8FF; }
.ct-steps li.is-warn .ct-steps__dot { background: var(--pc-warn,#DC2626); color: #fff; box-shadow: 0 0 0 5px #FBD5D5; }
.ct-steps li.is-done, .ct-steps li.is-current { color: var(--pc-ink,#18233A); }
.ct-steps li.is-warn { color: var(--pc-warn,#DC2626); }
.ct-next { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding: 18px 20px; border: 2px solid; border-radius: 14px; }
.ct-next--go { border-color: var(--pc-blue,#2563EB); background: #F3F7FF; }
.ct-next--info { border-color: #BFD3FF; background: #F8FAFF; }
.ct-next--ok { border-color: #A7DDBB; background: #F1FAF4; }
.ct-next--warn { border-color: var(--pc-warn,#DC2626); background: #FEF4F4; }
.ct-next--muted { border-color: #D3DAE4; background: #F6F8FB; }
.ct-next__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: var(--pc-blue,#2563EB); }
.ct-next--info .ct-next__icon { background: #6B8CD8; }
.ct-next--ok .ct-next__icon { background: #16A34A; }
.ct-next--warn .ct-next__icon { background: var(--pc-warn,#DC2626); }
.ct-next--muted .ct-next__icon { background: #94A3B8; }
.ct-next__body { flex: 1; min-width: 0; }
.ct-next__label { margin: 0 0 2px; font-size: 11px; font-weight: 700; color: var(--pc-sub,#5B667A); }
.ct-next__title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.5; }
.ct-next__text { margin: 4px 0 0; font-size: 13px; line-height: 1.8; color: var(--pc-sub,#5B667A); }
.ct-next__go { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--pc-blue,#2563EB); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pc .ct-next__go { color: #fff; }
.ct-next--ok .ct-next__go { background: #16A34A; }
.ct-next--warn .ct-next__go { background: var(--pc-warn,#DC2626); }
@media (max-width: 900px) {
    .ct-steps { padding: 12px 4px; }
    .ct-steps li { font-size: 10px; }
    .ct-steps li:not(:last-child)::after { left: calc(50% + 16px); right: calc(-50% + 16px); }
    .ct-next { flex-wrap: wrap; padding: 14px; }
    .ct-next__go { width: 100%; text-align: center; box-sizing: border-box; }
}

/* いまのSTEPの小さなチップ（projects.partials.step-chip） */
.pm-step-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:#eaf1fe; color:#2563eb; font-size:12px; font-weight:700; white-space:nowrap; }
.pm-step-chip b { padding:1px 7px; border-radius:999px; background:#2563eb; color:#fff; font-size:11px; letter-spacing:.04em; }
.pm-step-chip--done { background:#e3f6ed; color:#138153; }

.ct-next.ct-next--completed { background:linear-gradient(120deg,#ecfaf1,#f8fcfa); border:1px solid #a7d7b9; border-radius:14px; padding:24px; }
.ct-next--completed .ct-next__icon { background:#269b67; color:#fff; border-radius:50%; font-size:25px; font-weight:700; }
.ct-next--completed .ct-next__label { color:#258052; font-weight:700; }
.ct-next--completed .ct-next__title { color:#173e30; font-size:21px; }
@media(max-width:600px){.ct-next.ct-next--completed{padding:18px}.ct-next--completed .ct-next__title{font-size:18px}}