/* 会員ステータスバー（ヘッダー直下）— _memberStatusBar.jsp */
.member-status-bar {
	--msb-primary: #2f57ef;
	--msb-primary2: #b966e7;
	--msb-ink: #192335;
	--msb-muted: #6b7385;
	--msb-line: #e6e9f0;
	--msb-warn: #f5a524;
	--msb-off: #9aa3b2;
	--msb-ok: #1db97a;
	background: linear-gradient(90deg, #f5f7ff, #faf5ff);
	border-bottom: 1px solid var(--msb-line);
	padding: 14px 0 12px;
}
.member-status-bar .msb-inner { display: flex; align-items: center; gap: 24px; }
.member-status-bar .msb-label { flex: 0 0 auto; font-size: 12px; line-height: 1.35; color: var(--msb-muted); }
.member-status-bar .msb-label .msb-title { display: block; }
.member-status-bar .msb-label .msb-summary { display: block; font-size: 14px; color: var(--msb-ink); }

.member-status-bar .msb-steps { flex: 1; display: flex; list-style: none; margin: 0; padding: 0; }
.member-status-bar .msb-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; margin: 0; padding: 0; }
.member-status-bar .msb-step::marker { content: none; }
.member-status-bar .msb-step:not(:last-child)::after {
	content: ""; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px);
	height: 3px; border-radius: 3px; background: var(--msb-line);
}
.member-status-bar .msb-step.is-done:not(:last-child)::after { background: linear-gradient(90deg, var(--msb-primary), var(--msb-primary2)); }

.member-status-bar .msb-dot {
	width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; line-height: 1; background: #fff; border: 2px solid var(--msb-line);
	color: var(--msb-off); position: relative; z-index: 1;
}
.member-status-bar .msb-step.is-done .msb-dot { background: var(--msb-primary); border-color: var(--msb-primary); color: #fff; }
.member-status-bar .msb-step.is-current .msb-dot { border-color: var(--msb-primary); color: var(--msb-primary); box-shadow: 0 0 0 5px rgba(47, 87, 239, .15); }

.member-status-bar .msb-name { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--msb-off); white-space: nowrap; }
.member-status-bar .msb-step.is-done .msb-name { color: var(--msb-ink); }
.member-status-bar .msb-step.is-current .msb-name { color: var(--msb-primary); }
.member-status-bar .msb-sub {
	margin-top: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px;
	background: #eef1fe; color: var(--msb-primary); white-space: nowrap;
}

/* 保留（status_code 3） */
.member-status-bar.msb-hold .msb-step.is-current .msb-dot { border-color: var(--msb-warn); color: var(--msb-warn); box-shadow: 0 0 0 5px rgba(245, 165, 36, .18); }
.member-status-bar.msb-hold .msb-step.is-current .msb-name { color: #b97806; }
.member-status-bar.msb-hold .msb-sub { background: #fff4dd; color: #b97806; }

/* 途中終了（status_code 11） */
.member-status-bar.msb-stopped { background: #f4f5f7; }
.member-status-bar.msb-stopped .msb-step.is-done .msb-dot { opacity: .55; }
.member-status-bar.msb-stopped .msb-step.is-current .msb-dot { border-color: var(--msb-off); color: var(--msb-off); box-shadow: none; }
.member-status-bar.msb-stopped .msb-step.is-current .msb-name { color: #5d6574; }
.member-status-bar.msb-stopped .msb-sub { background: #eceef2; color: #5d6574; }

/* 完了（status_code 12） */
.member-status-bar.msb-complete .msb-step .msb-dot { background: var(--msb-ok); border-color: var(--msb-ok); color: #fff; }
.member-status-bar.msb-complete .msb-step:not(:last-child)::after { background: var(--msb-ok); }
.member-status-bar.msb-complete .msb-sub { background: #dff7ec; color: #0f8a57; }

.member-status-bar .msb-cta {
	flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--msb-primary); text-decoration: none;
	border: 1px solid #cfd8fd; padding: 7px 12px; border-radius: 8px; background: #fff; white-space: nowrap;
}
.member-status-bar .msb-cta:hover { background: var(--msb-primary); color: #fff; border-color: var(--msb-primary); }

/* モバイル要約（既定は非表示） */
.member-status-bar .msb-compact { display: none; flex: 1; min-width: 0; }
.member-status-bar .msb-compact-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.member-status-bar .msb-compact-top strong { color: var(--msb-primary); white-space: nowrap; }
.member-status-bar .msb-compact-top span { color: var(--msb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-status-bar .msb-seg { display: flex; gap: 4px; margin-top: 8px; }
.member-status-bar .msb-seg i { flex: 1; height: 5px; border-radius: 5px; background: var(--msb-line); }
.member-status-bar .msb-seg i.is-done { background: linear-gradient(90deg, var(--msb-primary), var(--msb-primary2)); }
.member-status-bar .msb-seg i.is-current { background: var(--msb-primary); opacity: .45; }
.member-status-bar.msb-complete .msb-seg i { background: var(--msb-ok); opacity: 1; }
.member-status-bar.msb-hold .msb-seg i.is-current { background: var(--msb-warn); opacity: 1; }

/* ヘッダーのメインメニューが非表示となる幅（d-xl-none）と合わせて切替いたします */
@media (max-width: 1199.98px) {
	.member-status-bar { padding: 10px 0; }
	.member-status-bar .msb-label,
	.member-status-bar .msb-steps { display: none; }
	.member-status-bar .msb-compact { display: block; }
	.member-status-bar .msb-inner { gap: 12px; }
	.member-status-bar .msb-cta { padding: 6px 10px; font-size: 12px; }
}