/*
디자인 기반 ② 부품 — 메시지·쪽 이동·검색·빈 상태·버튼·링크·폼 칸·표·카드·배지·페이지 헤더·출처 (계획 26 S7)
- pm25-base.css 와 같은 규칙: .pm25- 클래스와 그 자손만, 전역 선택자 없음
- 글꼴·크기·줄높이·여백·색을 직접 적는다 (홈의 ress + mana.css 아래에서도 같은 모양)
- 치수·색은 스펙 §3.10 표, 색은 pm25-tokens.css 토큰만
- 좁은 화면 기준 768px 은 쪽 이동·검색 폼·페이지 헤더의 미디어 질의에만
스펙: requirements/26-7_SLICE7_디자인기반_부품_spec.md §3.3~3.10
================================================ */

/* 보이지 않는 글자 (스크린리더용) */
.pm25-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
MESSAGES (§3.3)
================================================ */
.pm25-messages {
  box-sizing: border-box;
  max-width: 64rem;
  margin: var(--pm25-space-4) auto 0;
  padding-inline: var(--pm25-space-4);
  font-family: var(--pm25-font-sans);
}
.pm25-messages--narrow {
  max-width: 28rem;
}
.pm25-message {
  box-sizing: border-box;
  display: block;
  margin: 0 0 var(--pm25-space-2);
  padding: var(--pm25-space-3) var(--pm25-space-4);
  border: 1px solid var(--pm25-color-info-text);
  border-radius: var(--pm25-radius-sm);
  background: var(--pm25-color-info-bg);
  color: var(--pm25-color-text);
  font-family: var(--pm25-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  scroll-margin-top: calc(var(--pm25-header-h) + var(--pm25-space-2));
}
.pm25-message:last-child {
  margin-bottom: 0;
}
.pm25-message:focus {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}
.pm25-message__kind {
  margin: 0 var(--pm25-space-3) 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pm25-color-info-text);
}
.pm25-message__text {
  margin: 0;
  font-size: 16px;
  color: var(--pm25-color-text);
}
.pm25-message--success { border-color: var(--pm25-color-success-text); background: var(--pm25-color-success-bg); }
.pm25-message--success .pm25-message__kind { color: var(--pm25-color-success-text); }
.pm25-message--danger { border-color: var(--pm25-color-danger-text); background: var(--pm25-color-danger-bg); }
.pm25-message--danger .pm25-message__kind { color: var(--pm25-color-danger-text); }
.pm25-message--warning { border-color: var(--pm25-color-warning-text); background: var(--pm25-color-warning-bg); }
.pm25-message--warning .pm25-message__kind { color: var(--pm25-color-warning-text); }
.pm25-message--info { border-color: var(--pm25-color-info-text); background: var(--pm25-color-info-bg); }
.pm25-message--info .pm25-message__kind { color: var(--pm25-color-info-text); }

/*
LINKS (§3.6)
================================================ */
.pm25-link {
  color: var(--pm25-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pm25-link:visited {
  color: var(--pm25-color-brand);
}
.pm25-link--quiet,
.pm25-link--quiet:visited {
  color: var(--pm25-color-text);
  font-weight: 600;
  text-decoration: none;
}
.pm25-link--quiet:hover,
.pm25-link--quiet:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pm25-link:focus-visible {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}

/*
BUTTONS (§3.6 · §3.10)
================================================ */
.pm25-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: var(--pm25-space-3) var(--pm25-space-5);
  border: 1px solid var(--pm25-color-primary);
  border-radius: var(--pm25-radius-sm);
  background: var(--pm25-color-primary);
  color: #FFFFFF;
  font-family: var(--pm25-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pm25-motion);
}
.pm25-button:hover {
  background: var(--pm25-color-brand);
  border-color: var(--pm25-color-brand);
}
.pm25-button:active {
  transform: translateY(1px);
}
.pm25-button:focus-visible {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}
.pm25-button--secondary {
  background: #FFFFFF;
  border-color: var(--pm25-color-border-strong);
  color: var(--pm25-color-text);
}
.pm25-button--secondary:hover {
  background: var(--pm25-color-primary-soft);
  border-color: var(--pm25-color-border-strong);
}
.pm25-button--danger {
  background: #FFFFFF;
  border-color: var(--pm25-color-danger-text);
  color: var(--pm25-color-danger-text);
}
.pm25-button--danger:hover {
  background: var(--pm25-color-danger-bg);
  border-color: var(--pm25-color-danger-text);
}

/*
FORM FIELD (§3.6 · §3.10)
================================================ */
.pm25-field {
  margin: 0 0 var(--pm25-space-4);
  padding: 0;
  font-family: var(--pm25-font-sans);
  text-align: left;
}
.pm25-field__label {
  display: block;
  margin: 0 0 var(--pm25-space-1);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pm25-color-text);
}
.pm25-field__hint {
  margin: 0 0 var(--pm25-space-1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--pm25-color-text-3);
}
.pm25-field__error {
  margin: 0 0 var(--pm25-space-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pm25-color-danger-text);
}
.pm25-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--pm25-space-2) var(--pm25-space-3);
  border: 1px solid var(--pm25-color-border-strong);
  border-radius: var(--pm25-radius-sm);
  background: #FFFFFF;
  color: var(--pm25-color-text);
  font-family: var(--pm25-font-sans);
  font-size: 16px;
  line-height: 1.5;
}
.pm25-input--multiline {
  resize: vertical;
}
.pm25-input:focus-visible {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}
.pm25-field--error .pm25-input {
  border: 2px solid var(--pm25-color-danger-text);
}

/*
SEARCH FORM · STATUS (§3.5 · §3.10)
================================================ */
.pm25-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "label input button" ". hint .";
  align-items: center;
  column-gap: var(--pm25-space-3);
  row-gap: var(--pm25-space-1);
  margin: 0;
  padding: 0;
  font-family: var(--pm25-font-sans);
}
.pm25-search__label {
  grid-area: label;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pm25-color-text);
}
.pm25-search__input {
  grid-area: input;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: var(--pm25-space-2) var(--pm25-space-3);
  border: 1px solid var(--pm25-color-border-strong);
  border-radius: var(--pm25-radius-sm);
  background: #FFFFFF;
  color: var(--pm25-color-text);
  font-family: var(--pm25-font-sans);
  font-size: 16px;
  line-height: 1.5;
}
.pm25-search__input:focus-visible {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}
.pm25-search__hint {
  grid-area: hint;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pm25-color-text-3);
}
.pm25-search .pm25-button {
  grid-area: button;
}
@media (max-width: 767.98px) {
  .pm25-search {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "input button" "hint hint";
  }
}
.pm25-search-status {
  margin: 0 0 var(--pm25-space-3);
  font-family: var(--pm25-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pm25-color-text-2);
}
.pm25-search-status__term,
.pm25-empty__term {
  overflow-wrap: anywhere;
}

/*
EMPTY STATE (§3.5 · §3.10)
================================================ */
.pm25-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  margin: 0;
  padding: var(--pm25-space-6) var(--pm25-space-4);
  border: 1px dashed var(--pm25-color-border-strong);
  border-radius: var(--pm25-radius-sm);
  background: #FFFFFF;
  font-family: var(--pm25-font-sans);
  text-align: center;
}
.pm25-empty__text {
  max-width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pm25-color-text);
  overflow-wrap: anywhere;
}
.pm25-empty .pm25-link {
  margin-top: var(--pm25-space-2);
  font-size: 16px;
}

/*
PAGINATION (§3.4 · §3.10) — 768px 미만은 좁은 목록, 두 줄
================================================ */
.pm25-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pm25-space-1);
  margin: var(--pm25-space-5) 0 0;
  padding: 0;
  font-family: var(--pm25-font-sans);
}
.pm25-pagination__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--pm25-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm25-pagination__item {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm25-pagination__item--ellipsis {
  justify-content: center;
  width: 24px;
  font-size: 16px;
  color: var(--pm25-color-text-3);
}
.pm25-pagination__link,
.pm25-pagination__prev,
.pm25-pagination__next {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--pm25-space-3);
  border: 1px solid var(--pm25-color-border-strong);
  border-radius: var(--pm25-radius-sm);
  background: #FFFFFF;
  color: var(--pm25-color-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
}
.pm25-pagination__link:hover,
.pm25-pagination__prev:hover,
.pm25-pagination__next:hover {
  background: var(--pm25-color-primary-soft);
}
.pm25-pagination__link[aria-current="page"] {
  background: var(--pm25-color-brand);
  border-color: var(--pm25-color-brand);
  color: #FFFFFF;
  font-weight: 700;
}
.pm25-pagination__link:focus-visible,
.pm25-pagination__prev:focus-visible,
.pm25-pagination__next:focus-visible {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .pm25-pagination__item--narrow-only { display: none; }
}
@media (max-width: 767.98px) {
  .pm25-pagination__item--wide-only { display: none; }
  .pm25-pagination {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "list list list" "prev . next";
    row-gap: var(--pm25-space-2);
  }
  .pm25-pagination__list { grid-area: list; justify-content: center; }
  .pm25-pagination__prev { grid-area: prev; }
  .pm25-pagination__next { grid-area: next; }
}

/*
TABLE (§3.6 · §3.10)
================================================ */
.pm25-table-wrap {
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
.pm25-table-wrap:focus-visible {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}
.pm25-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--pm25-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--pm25-color-text);
  word-break: keep-all;   /* 한글을 낱말 단위로 줄바꿈 (S7 decision 구현-1) */
}
.pm25-table thead th {
  white-space: nowrap;
}
.pm25-table__caption {
  margin: 0 0 var(--pm25-space-2);
  font-size: 14px;
  color: var(--pm25-color-text-3);
  text-align: left;
}
.pm25-table th,
.pm25-table td {
  padding: var(--pm25-space-3) var(--pm25-space-4);
  border-bottom: 1px solid var(--pm25-color-border);
  text-align: left;
  vertical-align: top;
}
.pm25-table thead th {
  background: var(--pm25-color-bg-soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--pm25-color-text);
}
.pm25-table .pm25-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
CARD · BADGE · PAGE HEADER · SOURCE NOTE (§3.7 · §3.10)
================================================ */
.pm25-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--pm25-space-3);
  margin: 0;
  padding: var(--pm25-space-5);
  border: 1px solid var(--pm25-color-border);
  border-radius: var(--pm25-radius);
  background: #FFFFFF;
  font-family: var(--pm25-font-sans);
}
.pm25-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pm25-color-text);
}
.pm25-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm25-color-text-2);
}
.pm25-badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: var(--pm25-space-1) var(--pm25-space-2);
  border-radius: var(--pm25-radius-sm);
  font-family: var(--pm25-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--pm25-color-bg-soft);
  color: var(--pm25-color-text-2);
}
.pm25-badge--info { background: var(--pm25-color-info-bg); color: var(--pm25-color-info-text); }
.pm25-badge--success { background: var(--pm25-color-success-bg); color: var(--pm25-color-success-text); }
.pm25-badge--warning { background: var(--pm25-color-warning-bg); color: var(--pm25-color-warning-text); }
.pm25-badge--danger { background: var(--pm25-color-danger-bg); color: var(--pm25-color-danger-text); }
.pm25-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pm25-space-4);
  margin: 0 0 var(--pm25-space-5);
  padding: 0;
  font-family: var(--pm25-font-sans);
}
.pm25-page-header__title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--pm25-color-text);
}
.pm25-page-header__desc {
  margin: var(--pm25-space-2) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm25-color-text-2);
}
.pm25-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm25-space-2);
  margin: 0;
}
@media (max-width: 767.98px) {
  .pm25-page-header { flex-direction: column; align-items: flex-start; }
}
.pm25-source-note {
  margin: 0;
  font-family: var(--pm25-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pm25-color-text-3);
}