/** 도움말 팝업 css */

.help-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.help-wrap > .help-menu {
    flex-shrink: 0;
}

/** ===== 제목 영역 ===== */
/** 섹션 별 title*/
.help-wrap .help-title > h3{
    width: 100%;
    border-bottom: 1px solid var(--slate-300);
    margin-bottom: 4px;
}


/** ===== 설명 영역 ===== */
/** contents-wrap 밑의 마지막을 제외한 모든 섹션에 mb-10 */
.help-wrap .contents-wrap > div:not(:last-child) {
    margin-bottom: 10px;
}
/** 여러 줄일 경우 list로 감싼 내부의 모든 자식들 간격에 mt-5 적용 */
.help-wrap .help-desc .list > * + * {
    margin-top: 8px;
}
/* ------------------------------------------------------------------
   화면 도움말 팝업(사장님 07-24) — PageHelpPopup 이 쓰는 조각들.
   기존 .help-wrap 구조 위에 얹는다(새 파일을 만들지 않는다).
   ------------------------------------------------------------------ */

.help-wrap .help-desc > p {
    color: var(--slate-600);
    font-size: var(--font-size);
    line-height: 1.6;
    word-break: keep-all;      /* 한글은 단어 중간에서 끊지 않는다 */
}
.help-wrap .help-desc > * + * {
    margin-top: 10px;
}

/* 번호 매긴 절차 — 동그란 번호 + 설명 */
.help-wrap .help-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.help-wrap .help-steps > li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--font-size);
    line-height: 1.6;
    color: var(--slate-600);
    word-break: keep-all;
}
.help-wrap .help-steps .help-step-no {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--primary-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* 라벨 붙은 설명 줄 — [KPI 카드] 총 지급액 … */
.help-wrap .help-defs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.help-wrap .help-def {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--font-size);
    line-height: 1.6;
    color: var(--slate-600);
    word-break: keep-all;
}
.help-wrap .help-badge {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.help-wrap .help-badge.tone-primary {
    background: var(--primary-50);
    color: var(--primary-600);
}
.help-wrap .help-badge.tone-amber {
    background: rgba(245, 158, 11, 0.12);
    color: rgb(180, 83, 9);
}
.help-wrap .help-badge.tone-green {
    background: rgba(16, 185, 129, 0.12);
    color: rgb(4, 120, 87);
}

/* 참고·TIP 한 줄 — 테두리 박스로 눈에 띄게 */
.help-wrap .help-note {
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    word-break: keep-all;
}
.help-wrap .help-note.tone-info {
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    color: var(--primary-700);
}
.help-wrap .help-note.tone-tip {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: rgb(4, 120, 87);
}