@charset "UTF-8";
/* message-standard.css — 메시지 아이콘 첫 줄 정렬 기준의 페이지 CSS 담당분. [손수 작성 — 생성물 아님]
 *
 * 기준(2026-09-11 사용자 확정, OP·PP 공통): 아이콘이 문구 옆에 붙는 오류 박스·안내 문구는 문구가
 * 몇 줄이든 아이콘을 **첫 줄 옆**에 둔다. 퍼블 페이지 CSS 는 `align-items: center` 라 한 줄일 때만
 * 맞고, 서버 문구를 문장 단위로 줄바꿈하는 화면(비밀번호 확인 불일치·재설정·로그인 실패)에서는
 * 느낌표가 줄 사이 가운데에 떠서 어느 줄의 메시지인지 흐려진다.
 *
 * 처방은 이미 두 곳이 쓰는 것과 같다 — PP pp-fixes.css 의 `.error-msg`(2026-09-08), OP 마이페이지의
 * `#pw-change .pw-error`(퍼블이 직접 만든 pages/myinfo/myinfo.css). 컨테이너를 flex-start 로 두고
 * 아이콘에 margin-top 을 준다. 값은 16px 아이콘을 첫 줄 line-height 의 세로 중앙에 두는 (line-height − 16) / 2:
 * 20px 줄이면 2px, 22px 줄이면 3px.
 *
 * ── 왜 이 파일이 따로 필요한가 ──────────────────────────────────
 * 규칙이 퍼블 원본 페이지 CSS(pages/**, 수정 금지)에 있고, 그 CSS 는 op-bridge.css 보다 뒤에
 * 로드된다(layout-dialect 가 화면 head 를 레이아웃 head 뒤에 붙인다). 같은 명시도면 뒤에 오는 쪽이
 * 이기므로 op-bridge.css 로는 못 되돌린다 — table-standard.css 와 같은 이유·같은 방식이다.
 * 그래서 이 파일은 **각 화면 <head> 에서 벤더 페이지 CSS 뒤에** 링크한다. 셀렉터는 전부 원본과 같다.
 *
 * ── 링크가 필요한 화면(2026-09-11 조사 기준 8개, message-icon-alignment.test.js 가 고정) ───────
 *   auth/{login,password-expired,simple-login}     .login-error · .pw-error   (pages/login.css)
 *   auth/{account-find,password-reset}             .find-error                (pages/find-id.css)
 *   user/partner-company-form                      .trid-guide                (pages/user-partner.css)
 *   contents/problem-action-form                   .trouble-guide             (pages/content/trouble-manage.css)
 *   masterkey/injection                            .kg-guide · .kg-kcv-guide  (pages/kms/keygen.css)
 *   (mypage 는 myinfo.css 가 이미 flex-start 라 싣지 않는다)
 *
 * ★철거 조건: 퍼블 원본이 해당 규칙을 flex-start 로 바꾸면 여기 짝과 화면의 링크를 함께 지운다.
 *   같은 테스트가 "원본이 아직 center 인가" 를 보고 있어 그 시점을 알려 준다.
 * ★알림 모달(.modal-alert 등)은 아이콘이 문구 **위**에 세로로 놓이는 구조라 대상이 아니다.
 */

/* ── 오류 박스 (빨간 배경, 16px 아이콘 / 20px 줄) ── */
.login-error {
  align-items: flex-start;
}
.login-error .ico {
  margin-top: 2px;
}
.pw-error {
  align-items: flex-start;
}
.pw-error .ico {
  margin-top: 2px;
}
.find-error {
  align-items: flex-start;
}
.find-error .ico {
  margin-top: 2px;
}

/* ── 안내 문구 (보라 ⓘ, 16px 아이콘 / 20px 줄) ── */
.trid-guide {
  align-items: flex-start;
}
.trid-guide .ico {
  margin-top: 2px;
}
.kg-guide {
  align-items: flex-start;
}
.kg-guide .ico {
  margin-top: 2px;
}
.kg-kcv-guide {
  align-items: flex-start;
}
.kg-kcv-guide .ico {
  margin-top: 2px;
}

/* ── 장애조치 첨부 안내 (16px 아이콘 / 22px 줄 → 3px) ── */
.trouble-form-card .trouble-guide {
  align-items: flex-start;
}
.trouble-form-card .trouble-guide .ico {
  margin-top: 3px;
}