/* /_css/contract_docs_modal.css */

/* =========================
   모달(스크롤 가능한 구조)
   - body 스크롤 잠겨도 모달 내부는 스크롤 가능
   - header/footer 고정, 내용(.wl-modal__body)만 스크롤
========================= */
.wl-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}
.wl-modal.is-open{ display:block; }

.wl-modal__backdrop{
  position:fixed; /* absolute → fixed (안전) */
  inset:0;
  background:rgba(0,0,0,0.45);
}

/* dialog 자체 높이 제한 + column 레이아웃 */
.wl-modal__dialog{
  position:relative;
  width:min(760px, calc(100% - 32px));
  margin: 60px auto 0;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 120px); /* 화면 밖으로 안 나가게 */
  overflow:hidden;         /* 내부(body)만 스크롤 */
}

.wl-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #eef1f5;
  flex:0 0 auto;
}

.wl-modal__title{
  font-size:16px;
  font-weight:800;
  color:#222;
}

.wl-modal__close{
  width:36px;
  height:36px;
  border:none;
  background:#f3f5f8;
  border-radius:10px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

/* 내용만 스크롤 */
.wl-modal__body{
  padding:14px 16px;
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.wl-modal__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid #eef1f5;
  flex:0 0 auto;
  background:#fff;
}

.wl-footer-right{
  display:flex;
  gap:10px;
}

/* =========================
   버튼
========================= */
.wl-btn{
  height:44px;
  padding:0 16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:800;
}
.wl-btn--cancel{ background:#f3f5f8; color:#333; }
.wl-btn--ok{ background:#2f6fe7; color:#fff; }
.wl-btn--ok:hover{ background:#1f57c5; }

/* =========================
   입력 폼 영역
========================= */
.wl-form-area{
  border:1px solid #e0e4ea;
  border-radius:10px;
  padding:12px;
  background:#fafbfc;
}
.wl-form-area .row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.wl-form-area label{
  width:140px;
  font-size:13px;
  font-weight:800;
  color:#222;
  text-align:right;
  white-space:nowrap;
}
.wl-form-area input,
.wl-form-area select{
  flex:1;
  height:42px;
  border:1px solid #e0e4ea;
  border-radius:10px;
  padding:0 12px;
  font-size:14px;
  background:#fff;
}
.wl-form-area .hint{
  font-size:12px;
  color:#666;
  margin-left:150px;
  margin-top:-6px;
  margin-bottom:10px;
}

/* =========================
   미리보기 영역
   - 높이를 고정하지 않고 "최대 높이"로 (모달 내부 스크롤과 충돌 방지)
========================= */
.wl-preview{
  max-height:360px;   /* height:360px → max-height */
  overflow:auto;
  border:1px solid #e0e4ea;
  border-radius:10px;
  padding:12px;
  font-size:14px;
  color:#333;
  line-height:1.6;
  margin-top:12px;
  background:#fff;
}

.wl-loading{
  color:#666;
  font-size:14px;
}

/* =========================
   문서 미리보기 규격 고정
   ========================= */

/* 미리보기 영역: 가운데 정렬 + 스크롤 */
.wl-preview{
  overflow: auto;
  padding: 16px;              /* 기존 12px이면 16으로 */
}

/* 문서 한 장(고정폭) */
.wl-preview .wl-doc-page{
  width: 700px;               /* ★ 고정 규격 (모달 760폭 기준 안전) */
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  padding: 24px;
  box-sizing: border-box;
}

/* 문서 내부 요소들이 밖으로 튀지 않게 */
.wl-preview .wl-doc-page *{
  box-sizing: border-box;
  max-width: 100%;
}

/* 테이블은 무조건 고정 레이아웃(칸폭 흔들림 방지) */
.wl-preview .wl-doc-page table{
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed;        /* 핵심: 내용 길이로 칸폭 바뀌는 거 방지 */
}

/* 셀 기본: 중앙정렬/줄바꿈 규칙 통일 */
.wl-preview .wl-doc-page th,
.wl-preview .wl-doc-page td{
  vertical-align: middle;
  word-break: break-word;     /* 너무 길면 줄바꿈 */
  overflow-wrap: anywhere;    /* 공백 없는 문자열도 줄바꿈 */
  line-height: 1.4;
}

/* 혹시 텍스트가 세로로 찢어져 보이면(좁은 셀) */
.wl-preview .wl-doc-page th,
.wl-preview .wl-doc-page td{
  white-space: normal;
}

/* 이미지가 있으면 문서 폭에 맞춤 */
.wl-preview .wl-doc-page img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* 이미지 크기 튀는 거 방지용 */
.wl-doc-sign{max-height:70px; width:auto; display:inline-block; vertical-align:middle;}

/* 서명 캔버스 */
.wl-sign-wrap{ width:100%; }
.wl-sign-canvas{
  display:block;
  width:100%;
  height:180px;
  border:1px solid #e0e4ea;
  border-radius:10px;
  background:#fff;
}
.wl-sign-actions{ margin-top:8px; display:flex; justify-content:flex-end; }

/* 미리보기 안 서명 이미지 */
.wl-doc-sign{
  max-width: 140px;
  height:auto;
  display:inline-block;
  vertical-align:middle;
}

.wl-sign-canvas{
  touch-action: none;     /* 드래그가 스크롤로 처리되는 것 방지 */
  pointer-events: auto;
  cursor: crosshair;
}

.wl-contract-frame{
  width: 100%;
  height: 70vh;     /* 필요에 맞게 */
  border: 0;
  background: #fff;
}

#wlContractPreview{
  overflow: auto;          /* 가로/세로 스크롤 허용 */
}

#wlContractPreview .signup_doc{
  min-width: 760px;        /* 너무 좁아지면 깨져 보이는 문제 방지 */
}
/* row가 flex면 라벨이 2줄일 때 위쪽 정렬되게 */
.row{
  display:flex;
  align-items:flex-start; /* 기존 center면 바꾸는게 보기 좋음 */
  gap: 12px;
}
/* 라벨 줄바꿈 허용(기존 nowrap 있으면 이걸로 덮기) */
.label-2line{
  white-space: normal !important;
  line-height: 1.2;
}
/* "(또는 사업자등록번호)"를 무조건 다음 줄로 */
.label-2line .sub{
  display:block;
  font-size:12px;
  font-weight:400;
  color:#666;
  margin-top:2px;
}