/* AC-08-36 — 오류확인 다이얼로그 (mypage 배송현황)
 *
 * `packing-error-response.css` 와 **같은 시각언어**를 쓴다(배너 + pill chip). 두 다이얼로그는
 * 같은 일을 한다 — 오류 사실을 알리고 고객의 다음 행동을 받는다. 여기서 다른 스타일을 만들면
 * 고객이 두 화면을 다른 기능으로 읽는다.
 *
 * 클래스를 `pe-` 로 재사용하지 않고 `ei-` 로 뜬 이유: 그쪽 CSS 는
 * `.modal-box[data-name='packing_error_response']` 스코프라 이 다이얼로그에 닿지 않는다.
 * 스코프를 넓히면 한쪽 조정이 다른 쪽을 조용히 바꾼다.
 *
 * 디자인 토큰(grid.css :root)만 사용:
 *   --color-active   (#FD213E) 브랜드 레드 · 위험·강조
 *   --color-redright (#FFF6F8) 레드 배경 · 배너
 *   --color-gray-*   텍스트/보더 계조
 */

/* ─────────── Banner (주문·처리시각 + 알림) ─────────── */
.modal-box[data-name="error_inbound_response"] .ei-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--color-redright);
  border: 1px solid #fecdd3;
  border-radius: 14px;
}

.modal-box[data-name="error_inbound_response"] .ei-banner__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--color-active);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-box[data-name="error_inbound_response"] .ei-banner__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.modal-box[data-name="error_inbound_response"] .ei-banner__body {
  flex: 1;
  min-width: 0;
}

.modal-box[data-name="error_inbound_response"] .ei-banner__title {
  font-size: 15px;
  font-weight: 700;
  color: #b91c1c;
  line-height: 1.4;
}

.modal-box[data-name="error_inbound_response"] .ei-banner__meta {
  margin-top: 4px;
  font-size: 12px;
  color: #be123c;
}

/* ─────────── Reason chips ─────────── */
.modal-box[data-name="error_inbound_response"] .ei-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-box[data-name="error_inbound_response"] .ei-section__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-box[data-name="error_inbound_response"] .ei-section__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-700);
}

/* 사유 건수 — 사유가 여러 개일 때 "몇 건인지" 가 목록보다 먼저 읽힌다. */
.modal-box[data-name="error_inbound_response"] .ei-section__count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-active);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.modal-box[data-name="error_inbound_response"] .ei-reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.modal-box[data-name="error_inbound_response"] .ei-reason-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-white);
  border: 1px solid #fecdd3;
  border-radius: 999px;
  color: #be123c;
  font-size: 13px;
  font-weight: 600;
  /* 사유는 운영자가 자유 입력한 문장이라 길 수 있다 — 칩 안에서 줄바꿈시킨다.
       `nowrap` 이면 좁은 화면에서 칩이 모달을 밀어낸다(포장오류 쪽은 짧은 코드 라벨이었다). */
  white-space: normal;
  word-break: break-word;
  text-align: left;
}

.modal-box[data-name="error_inbound_response"] .ei-reason-list li::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-active);
}

.modal-box[data-name="error_inbound_response"]
  .ei-reason-list
  li.ei-reason-empty {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-gray-600);
  font-weight: 500;
}

.modal-box[data-name="error_inbound_response"]
  .ei-reason-list
  li.ei-reason-empty::before {
  background: var(--color-gray-400);
}

/* ─────────── Memo (선택) ───────────
 * `packing-error-response.css` 의 `.pe-note__*` 와 같은 규격이다. 그쪽은 메모가 **필수**라
 * 라벨에 `*` 를 달지만 여기서는 선택이므로 달지 않는다 — 필수 표시를 흉내내면 고객이
 * 안 써도 되는 값을 쓰려고 멈춘다.
 */
.modal-box[data-name="error_inbound_response"] .ei-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-box[data-name="error_inbound_response"] .ei-note__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-700);
}

.modal-box[data-name="error_inbound_response"] .ei-note__optional {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
}

.modal-box[data-name="error_inbound_response"] .ei-note__counter {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-600);
  font-weight: 500;
}

.modal-box[data-name="error_inbound_response"] .ei-note__counter.is-max {
  color: var(--color-active);
  font-weight: 700;
}

.modal-box[data-name="error_inbound_response"] .ei-note__input {
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: 12px;
  background: var(--color-white);
  color: #1f2937;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.modal-box[data-name="error_inbound_response"] .ei-note__input::placeholder {
  color: var(--color-gray-600);
}

.modal-box[data-name="error_inbound_response"] .ei-note__input:hover {
  border-color: var(--color-gray-400);
}

.modal-box[data-name="error_inbound_response"] .ei-note__input:focus,
.modal-box[data-name="error_inbound_response"] .ei-note__input:focus-visible {
  outline: none;
  border-color: var(--color-active);
  box-shadow: 0 0 0 3px rgba(253, 33, 62, 0.12);
}