/* 신분증 진위확인 체험 화면(2026-11-11 QA).
 * 1) 기본형 소형 "파일 선택"(약 10px 글자)을 끌어다 놓기·눌러서 선택 업로드 영역으로 바꾼다. 허용 형식·크기 안내를 영역 안에 둔다.
 * 2) 예시 신분증 이미지는 크기를 줄이고 "예시 이미지" 표시를 얹어 실제 문서로 오해하지 않게 한다. */
.identi-drop { position: relative; width: 100%; margin: 0 auto; }
/* 파일 입력은 화면에서 숨기되 키보드·보조기술에는 남긴다. 포커스가 오면 영역 전체에 포커스 링을 그린다. */
.identi-drop__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.identi-drop__zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 148px; padding: var(--ui-sp-20) var(--ui-sp-16); border: 2px dashed var(--ui-color-border-strong); border-radius: 12px;
  background: var(--ui-color-background); color: var(--ui-color-text); text-align: center; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.identi-drop__zone:hover, .identi-drop.is-dragover .identi-drop__zone { border-color: var(--ui-color-primary); background: var(--ui-color-primary-soft); }
.identi-drop__input:focus-visible + .identi-drop__zone { outline: 3px solid var(--ui-color-primary); outline-offset: 3px; }
.identi-drop.has-file .identi-drop__zone { border-style: solid; border-color: var(--ui-btn-success-fg); background: var(--ui-btn-success-bg); }
.identi-drop__icon {
  display: block; width: 36px; height: 36px; background: var(--ui-color-primary);
  -webkit-mask: var(--ui-ico-upload) center / contain no-repeat; mask: var(--ui-ico-upload) center / contain no-repeat;
}
.identi-drop.has-file .identi-drop__icon { background: var(--ui-btn-success-fg); -webkit-mask-image: var(--ui-ico-check); mask-image: var(--ui-ico-check); }
.identi-drop__title { font-size: 16px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.identi-drop__help { color: var(--ui-btn-neutral-fg); font-size: 14px; line-height: 1.5; word-break: keep-all; }
.identi-drop__name { max-width: 100%; color: var(--ui-color-label); font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.identi-drop.has-file .identi-drop__name { color: var(--ui-btn-success-fg); }
.identi-drop__clear { margin: 10px auto 0; min-height: 44px; padding: var(--ui-sp-8) var(--ui-sp-16); border-radius: 8px; font-size: 14px; font-weight: 700; }
.identi-drop__clear:not([hidden]) { display: flex; }

/* 예시 신분증: 최대 320px, 오른쪽 위 "예시 이미지" 배지. */
/* 위치는 styles.css 의 가운데 겹침(absolute·50%·translate)을 그대로 쓰고 폭만 줄인다. absolute 라 배지의 기준 상자도 된다. */
.sub-area .sub-body .api_experience-renewal .content-user-body .img-under { width: min(320px, 90%); }
.sub-area .sub-body .api_experience-renewal .content-user-body .img-under img { width: 100%; max-width: 320px; height: auto; }
.identi-sample-badge {
  position: absolute; top: 8px; right: 8px; z-index: 1; padding: var(--ui-sp-4) 10px; border-radius: 999px;
  background: var(--ui-color-text); color: var(--ui-color-on-primary); font-size: 12px; font-weight: 700; line-height: 1.4;
}
@media (max-width: 480px) {
  .identi-drop__zone { min-height: 128px; padding: var(--ui-sp-16) var(--ui-sp-12); }
  .identi-drop__title { font-size: 15px; }
}