/* ========================================
 * 온보딩 스텝 가이드 컴포넌트
 * 계층: components (공통 컴포넌트 — head.jsp 전역 로드)
 * 용도: 페이지 안내 모달 등에서 단계별 절차를 표시하는 스텝 UI
 * 사용: tasks.jsp, sign.jsp, sfndashboard.jsp, orginfo.jsp 등 20+ JSP
 * @added 2026-03-10
 * ======================================== */

/* --- 스텝 컨테이너 (각 단계 행) --- */
.sfn-onboard-step {
  display: flex;
  align-items: flex-start;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.sfn-onboard-step.bordered,
.sfn-onboard-step-bordered {
  border-bottom: 1px solid #e9ecef;
  border-bottom: 1px solid oklch(93% 0.003 250);
}

.sfn-onboard-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* --- 아이콘 래퍼 (position-relative 역할) --- */
.sfn-onboard-icon-wrap {
  position: relative;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* --- 아이콘 박스 (60x60 컬러 박스) --- */
.sfn-onboard-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
}

.sfn-onboard-icon i {
  font-size: 28px;
  color: #fff;
}

/* 컬러 변형 */
.sfn-onboard-icon.purple {
  background-color: #696cff;
  background-color: oklch(56% 0.23 285);
}

.sfn-onboard-icon.green {
  background-color: #71dd37;
  background-color: oklch(80% 0.22 140);
}

.sfn-onboard-icon.cyan {
  background-color: #03c3ec;
  background-color: oklch(74% 0.14 220);
}

.sfn-onboard-icon.orange {
  background-color: #ffab00;
  background-color: oklch(78% 0.17 80);
}

/* --- 넘버 뱃지 (좌상단 원형 숫자) --- */
.sfn-onboard-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  font-size: 12px;
  font-weight: bold;
}

/* 뱃지 컬러 (텍스트 색상 = 아이콘 배경색) */
.sfn-onboard-badge.purple {
  color: #696cff;
  color: oklch(56% 0.23 285);
}

.sfn-onboard-badge.green {
  color: #71dd37;
  color: oklch(80% 0.22 140);
}

.sfn-onboard-badge.cyan {
  color: #03c3ec;
  color: oklch(74% 0.14 220);
}

.sfn-onboard-badge.orange {
  color: #ffab00;
  color: oklch(78% 0.17 80);
}

/* --- 텍스트 영역 --- */
.sfn-onboard-body {
  flex: 1;
  min-width: 0;
}

.sfn-onboard-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.sfn-onboard-desc {
  font-size: 15px;
  color: var(--bs-text-muted, #6c757d);
  margin-bottom: 0;
}

/* --- gray 변형 (비활성/보조 스텝) --- */
.sfn-onboard-icon.gray {
  background-color: #8592a3;
  background-color: oklch(62% 0.03 250);
}

.sfn-onboard-badge.gray {
  color: #8592a3;
  color: oklch(62% 0.03 250);
}

/* --- 가이드 모달 보조 컴포넌트 --- */
.sfn-guide-icon-desc {
  font-size: 20px;
  color: #6c757d;
  color: oklch(55% 0.01 250);
}

.sfn-feature-box {
  background-color: #f8f9fc;
  background-color: oklch(98% 0.005 260);
  border-radius: 8px;
  padding: 20px 24px;
}

.sfn-feature-icon {
  width: 28px;
  height: 28px;
  background-color: #E8E8FF;
  background-color: oklch(93% 0.06 285);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}