/* =============================================================================
   공용 전자서명 (내 정보 '내 전자서명' 카드 · 서명 선택 창 · 등록 모달) — 2026-10-09
   접두사 .esg-* . 색은 앱 토큰(--line, --mint 등)을 그대로 쓴다. 모달은 공통 .modal-wrap/.modal-tall 을 그대로 쓴다(별도 z-index 없음 →
   서명 선택 창 위에 열리는 확인창(dialog)이 항상 위에 보인다).
   ========================================================================== */
.esg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 12px; }
.esg-card-h { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.esg-small { font-size: 12.5px; }
.esg-help { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 8px 0; }
.esg-btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.esg-mysign { margin: 6px 0; min-height: 40px; font-size: 13px; color: var(--ink-2); }
.esg-mysign img { display: block; max-width: 100%; max-height: 120px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* 모달 본문은 공통 규칙이 white-space: pre-wrap 이므로 이 안은 보통 줄바꿈으로 되돌린다 */
.esg-body { white-space: normal; }
.esg-modal { max-width: 460px; }
.esg-modal .modal-btns { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.esg-modal .modal-btns .btn { width: auto; flex: 1 1 100px; min-height: 44px; }
.esg-doc { background: var(--surface-2); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 10px; }
.esg-doc-who { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.esg-doc-who span { flex: 0 0 48px; color: var(--ink-2); }
.esg-doc-who b { min-width: 0; overflow-wrap: anywhere; }
.esg-doc-st { margin: 6px 0 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.esg-consent { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; cursor: pointer; font-size: 14px; line-height: 1.45; }
.esg-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; }
.esg-sec-h { font-weight: 800; font-size: 14px; margin: 4px 0 6px; }
.esg-saved { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 6px; }
.esg-saved .btn-block { width: 100%; min-height: 44px; margin-top: 6px; }
.esg-or { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; margin: 10px 0; }
.esg-or::before, .esg-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.esg-padbox { position: relative; width: 100%; aspect-ratio: 2 / 1; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: #fff; margin: 6px 0 8px; }
.esg-pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; border-radius: inherit; }
.esg-padhint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b7b7bd; font-size: 18px; pointer-events: none; }
.esg-padhint[hidden] { display: none; }
.esg-err { margin: 6px 0 0; }
/* 휴대폰: 내 정보 카드의 버튼도 40px 이상(R3UI-2) */
@media (max-width: 768px) { .esg-btnrow .btn { min-height: 40px; } }

/* 2026-10-14: 등록 창 — [직접 서명] / [서명 이미지 업로드] 전환 · 이미지 선택·미리보기 */
.esg-seg { display: flex; gap: 0; margin: 8px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.esg-seg-b { flex: 1 1 0; min-height: 44px; padding: 8px 6px; border: 0; background: #fff; color: var(--ink-2); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.esg-seg-b + .esg-seg-b { border-left: 1px solid var(--line-strong); }
.esg-seg-b.on { background: var(--ink, #1d1d1f); color: #fff; }
.esg-pane[hidden], .esg-prev[hidden], .esg-busy[hidden] { display: none; }
.esg-uphelp { margin: 0 0 8px; }
.esg-file { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer; }
.esg-fileinp { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.esg-prev { margin: 10px 0 0; }
.esg-prev-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: flex; align-items: center; justify-content: center; min-height: 90px;
  background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.esg-prev-box img { display: block; max-width: 100%; max-height: 150px; }
.esg-opt { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.esg-opt input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; }
.esg-prev-m { margin-top: 4px; overflow-wrap: anywhere; }
.esg-busy { margin: 10px 0; font-size: 13.5px; }
.esg-modal .modal-btns .btn[hidden] { display: none; }