/* 도움말 모달 — 디자인 가이드 §4.11 (v2.9.0).
 *
 * 여덟 화면이 각자 같은 CSS 를 베껴 들고 있었고, 베끼면서 단계 강조선 색만
 * 제각각으로 갈라졌다: 보라(#9C27B0)·청회색(#607D8B)·초록(#4CAF50)·
 * 빨강(#f5576c)·노랑(#ffc107)·파랑 두 종류.  같아 보이던 것이 결정이 아니라
 * 우연이었다는 뜻이다.  여기서만 정한다.
 *
 * 설명은 번호 단계로 적는다.  이 도움말들은 실제로 "1단계 → 2단계" 를
 * 설명하고 있어 번호가 내용과 맞는다.  좌측 강조선은 쓰지 않는다 — 색을
 * 고르는 순간 또 갈라진다.
 */

.help-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.help-modal-backdrop.is-open {
    display: flex;
}

/* 제목/닫기 → 본문 → 고정된 하단 행동 (§4.11).
   본문만 스크롤한다 — 예전에는 모달 전체가 스크롤해 긴 도움말에서 닫기
   버튼이 화면 밖으로 사라졌다. */
.help-modal {
    background: var(--pundit-surface, #ffffff);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.30);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pundit-border, #dce3ee);
    flex-shrink: 0;
}

.help-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--pundit-text, #172033);
}

.help-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.help-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--pundit-border, #dce3ee);
    background: var(--pundit-surface-soft, #f8fafc);
    flex-shrink: 0;
}

/* 여기에 있던 `.help-modal-footer .btn { min-height: 40px; min-width: 40px; }` 은 지웠다(2단계, 가이드
   §4.5 「화면 CSS 는 단추의 모양을 덮어쓰지 않는다」).  옛 `.btn-sm` 이 36px 이던 때의 받침이었고,
   정본 `.btn-sm` 은 이제 shared/buttons.css 에서 38px 층이다.  「닫기」의 높이는 그 파일만 정한다. */

.help-section {
    margin-bottom: 22px;
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pundit-text, #172033);
    margin-bottom: 12px;
}

/* 번호 배지 + 단계 제목 + 설명.  번호만 색을 쓴다. */
.help-step {
    display: flex;
    gap: 11px;
    margin-bottom: 14px;
}

.help-step:last-child {
    margin-bottom: 0;
}

.help-step-number {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pundit-primary, #2458c6);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.help-step-body {
    flex: 1 1 auto;
    min-width: 0;
}

.help-step-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pundit-text, #172033);
    margin-bottom: 3px;
}

.help-step-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--pundit-muted, #69778d);
}

/* 팁 콜아웃 — 부트스트랩 기본 노랑이 아니라 승인된 주의 토큰. */
.help-tip {
    background: var(--pundit-warning-bg, #fff7e8);
    border-left: 3px solid var(--pundit-warning, #c46a08);
    border-radius: 0 6px 6px 0;
    padding: 12px 14px;
    margin-top: 16px;
}

.help-tip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pundit-warning, #c46a08);
    margin-bottom: 4px;
}

.help-tip-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--pundit-text, #172033);
}

/* ── 경로 안내 배너 — §4.16 (v2.9.0) ──────────────────────────────
 * 같은 단계처럼 보이지만 자료의 흐름이 다른 화면에만 둔다.  닫을 수 없다 —
 * 잘못된 화면에 파일을 올리는 것을 막는 안전장치라, 한 번 닫으면 다음
 * 사람이 같은 실수를 한다. */
.route-note {
    border-left: 4px solid var(--pundit-primary, #2458c6);
    background: var(--pundit-primary-soft, #edf4ff);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--pundit-text, #172033);
}

.route-note strong {
    font-weight: 700;
}

@media (max-width: 650px) {
    .help-modal-backdrop { padding: 12px; }
    .help-modal { max-height: 94vh; }
    .help-modal-body { padding: 14px 16px; }
    .help-modal-header,
    .help-modal-footer { padding: 12px 16px; }
}