/*
 * 계약서 서명 페이지 (template-parts/pages/page-contract.php).
 * 기존 Jotform 서명 양식(230876978893077 등)과 같은 모양으로 맞춘다:
 * 연보라 배경 위 로고, 흰 카드(제목 + 구분선), 본문, 동의 체크, 입력 칸, 서명 칸, 구분선 아래 노란 버튼.
 * CRM 계약서 편집 화면의 미리보기(ContractPreview.tsx)도 같은 값을 쓴다 — 바꾸면 함께 바꾼다.
 */

.contract-sign-page {
  --cs-ink: #2c3345;
  --cs-sub-ink: #464d5f;
  --cs-line: #b8bdc9;
  --cs-divider: #d7d8e1;
  --cs-page-bg: #f3f3fe;
  --cs-button: #ffc42c;
  --cs-button-hover: #f5b70f;
  --cs-pad-x: 52px;
  --cs-pad-y: 40px;

  background: var(--cs-page-bg);
  color: var(--cs-ink);
  font-family: Inter, var(--font-korean, 'Noto Sans KR'), sans-serif;
  /* 머리글·바닥글 없이 화면을 채운다 */
  min-height: 100vh;
}

/* 머리글·바닥글 없는 단독 화면(page-contract.php): 위아래 여백을 바탕색으로 */
body.contract-sign-standalone {
  margin: 0;
  background: var(--cs-page-bg, #f3f3fe);
}
@media (max-width: 640px) {
  .contract-sign-page {
    --cs-pad-x: 20px;
    --cs-pad-y: 28px;
  }
}

.contract-sign-page .content-wrapper {
  max-width: 752px;
  margin-left: auto;
  margin-right: auto;
}

.contract-sign-logo {
  display: block;
  width: 328px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 32px;
}

.contract-sign-card {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 4px rgba(87, 100, 126, 0.21);
}

.contract-sign-header {
  padding: var(--cs-pad-y) var(--cs-pad-x);
  border-bottom: 1px solid var(--cs-divider);
}
.contract-sign-header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cs-ink);
  text-align: center;
  word-break: keep-all;
}
@media (max-width: 640px) {
  .contract-sign-header h1 { font-size: 24px; }
}
/* 제목 아래 문서 정보 줄(계약서 번호 · 버전 · 발행일) */
.contract-sign-meta {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--cs-sub-ink);
  text-align: center;
  letter-spacing: 0.01em;
}

.contract-sign-content {
  padding: 24px var(--cs-pad-x) var(--cs-pad-y);
}

/* 본문: CRM 편집기(CKEditor)로 쓴 HTML. Jotform 처럼 카드 안에 펼쳐 둔다.
   테마의 p(16px · Light 300)가 본문 크기를 덮지 않게 문단·목록 글자는 본문을 따른다 */
.contract-sign-body {
  margin-bottom: 28px;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  color: var(--cs-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.contract-sign-body p,
.contract-sign-body li,
.contract-sign-body td,
.contract-sign-body th {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
/* 제목 계층: 부록(가운데 정렬한 h2 → .appendix, contract-sign.js) > 조 제목(h1~h4, 위에 옅은 구분선) > 본문 */
.contract-sign-body h1,
.contract-sign-body h2,
.contract-sign-body h3,
.contract-sign-body h4 {
  margin: 28px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--cs-divider);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.contract-sign-body h2.appendix {
  margin: 48px 0 16px;
  padding-top: 28px;
  border-top: 2px solid var(--cs-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 28px;
}
.contract-sign-body > h1:first-child,
.contract-sign-body > h2:first-child,
.contract-sign-body > h3:first-child,
.contract-sign-body > h4:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.contract-sign-body p { margin: 8px 0; }
.contract-sign-body strong { font-weight: 600; }
/* 번호 문단 내어쓰기(contract-sign.js 가 번호를 span.cn 으로 감싼다): 글자는 번호 폭만큼 들이고,
   번호는 그 여백으로 띄워 내서 두 줄째부터 번호 뒤 글자에 맞춘다.
   (음수 text-indent 는 서명본 PDF 엔진이 지원하지 않아 float 로 한다 — PDF·CRM 미리보기와 같은 방식) */
.contract-sign-body .cn { float: left; }
.contract-sign-body p.cn-a { padding-left: 1.6em; } .contract-sign-body p.cn-a .cn { width: 1.6em; margin-left: -1.6em; }
.contract-sign-body p.cn-b { padding-left: 2.5em; } .contract-sign-body p.cn-b .cn { width: 2.5em; margin-left: -2.5em; }
.contract-sign-body p.cn-c { padding-left: 3.3em; } .contract-sign-body p.cn-c .cn { width: 3.3em; margin-left: -3.3em; }
.contract-sign-body p.cn-r { padding-left: 1.7em; } .contract-sign-body p.cn-r .cn { width: 1.7em; margin-left: -1.7em; }
/* 조항에 딸린 표(contract-sign.js 가 감싼다): 그 조항의 글자 줄에 맞춰 들인다 */
.contract-sign-body .clause-table.cn-a { padding-left: 1.6em; }
.contract-sign-body .clause-table.cn-b { padding-left: 2.5em; }
.contract-sign-body .clause-table.cn-c { padding-left: 3.3em; }
.contract-sign-body .clause-table.cn-r { padding-left: 1.7em; }
.contract-sign-body ul,
.contract-sign-body ol {
  margin: 0 0 8px;
  padding-left: 24px;
}
.contract-sign-body ul { list-style: disc; }
.contract-sign-body ol { list-style: decimal; }
.contract-sign-body a { text-decoration: underline; }
.contract-sign-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
}
.contract-sign-body td,
.contract-sign-body th {
  border: 1px solid var(--cs-divider);
  padding: 9px 12px;
  text-align: left; /* CRM 편집기·서명본 PDF 와 같게 */
  vertical-align: top;
}
.contract-sign-body th {
  background: #f5f6fa;
  font-weight: 600;
}
/* 표 칸은 단어 단위로 줄바꿈한다(본문의 overflow-wrap:anywhere 가 칸을 글자 폭까지 줄여 'St/ag/e' 처럼 끊긴다) */
.contract-sign-body td,
.contract-sign-body th {
  overflow-wrap: break-word;
}
/* 좁은 화면: 편집기 들여쓰기(문단 margin-left 40px 단위)를 단계당 16px 로 줄여 글자 폭을 남긴다 */
@media (max-width: 640px) {
  .contract-sign-body p[style*="margin-left:40px"],
  .contract-sign-body .clause-table[style*="margin-left: 40px"] { margin-left: 16px !important; }
  .contract-sign-body p[style*="margin-left:80px"],
  .contract-sign-body .clause-table[style*="margin-left: 80px"] { margin-left: 32px !important; }
  .contract-sign-body p[style*="margin-left:120px"],
  .contract-sign-body .clause-table[style*="margin-left: 120px"] { margin-left: 48px !important; }
  .contract-sign-body p[style*="margin-left:160px"],
  .contract-sign-body .clause-table[style*="margin-left: 160px"] { margin-left: 64px !important; }
}

/* 계좌 안내: Jotform 정착 계약서의 노란 계좌 카드 이미지 */
.contract-sign-bank {
  margin: 0;
}

/* 대표 서명·계좌 안내: 고객 서명 아래, 제출 버튼 위 */
.contract-sign-extras {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--cs-divider);
}
.contract-sign-extras > * + * {
  margin-top: 24px;
}
.contract-sign-bank img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 6px;
}

/* 회사 대표 서명: 본문 끝, Jotform 처럼 '대표 김준성' 아래 서명 이미지 */
.contract-sign-company {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--cs-ink);
}
.contract-sign-company p { margin: 0 0 4px; }
.contract-sign-company img {
  display: block;
  width: 180px;
  height: auto;
}

/* 질문 제목(동의 항목 · 서명자 정보 · 입력 칸 이름 · 서명) */
.contract-sign-page fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 28px;
}
.contract-sign-page legend,
.contract-sign-page label {
  font-size: 16px;
  font-weight: 500;
  color: var(--cs-ink);
}
.contract-sign-page legend { margin-bottom: 12px; }
.contract-sign-page label { margin-bottom: 8px; }
.contract-sign-page .required {
  color: #f23a3c;
  margin-left: 2px;
}

.contract-sign-checks {
  padding-top: 24px !important;
  border-top: 1px solid var(--cs-divider) !important;
}
/* legend 는 기본으로 fieldset 테두리 위에 걸쳐 그려져 구분선이 제목을 가로지른다 → 일반 블록처럼 흐르게 */
.contract-sign-checks legend {
  float: left;
  width: 100%;
  padding: 0;
}
.contract-sign-checks legend + * {
  clear: both;
}
.contract-sign-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 20px;
  cursor: pointer;
}
.contract-sign-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--cs-ink);
}

.contract-sign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
@media (max-width: 640px) {
  .contract-sign-grid { grid-template-columns: 1fr; }
}

/* 입력 칸: form.css 의 둥근 칸 대신 Jotform 의 각진 칸 */
.contract-sign-page input[type="text"],
.contract-sign-page input[type="email"],
.contract-sign-page input[type="date"] {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--cs-line);
  border-radius: 4px;
  font-size: 16px;
  color: var(--cs-ink);
  background: #fff;
}
.contract-sign-page input[type="text"]:focus,
.contract-sign-page input[type="email"]:focus,
.contract-sign-page input[type="date"]:focus {
  outline: none;
  border-color: #2e69ff;
  box-shadow: 0 0 0 3px rgba(46, 105, 255, 0.15);
}

/* 서명 칸: 내부 해상도 600x200 고정, 화면에서는 폭에 맞춘다 (form-signature.js 가 배율을 맞춘다) */
.contract-sign-canvas {
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--cs-line);
  border-radius: 4px;
  background: #fff;
}
.contract-sign-canvas canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}
/* 지우기는 서명 칸 안 아래 오른쪽(Jotform 과 같게) */
.contract-sign-canvas-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 16px;
  padding: 6px 0 8px;
  border-top: 1px solid #e3e5f0;
}
.contract-sign-canvas-bar button {
  padding: 2px 4px;
  font-size: 13px;
  color: #57647e;
  background: none;
  border: 0;
  cursor: pointer;
}
.contract-sign-note {
  display: block;
  margin-top: 6px;
  color: var(--cs-sub-ink);
  font-size: 12px;
}
/* 서명 아래 날짜(계약일 = 제출한 날) */
.contract-sign-date {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--cs-ink);
}
.contract-sign-date strong { font-weight: 600; margin-right: 6px; }

/* 카드 아래 회사 연락처(서명본 PDF 바닥글과 같은 문구) */
.contract-sign-org {
  margin: 20px auto 40px;
  padding: 0 16px;
  font-size: 12px;
  line-height: 18px;
  color: var(--cs-sub-ink);
  text-align: center;
}

/* 긴 계약서: 화면 위 읽은 정도 · 서명 칸으로 가는 버튼 */
.contract-sign-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.contract-sign-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cs-button);
}
.contract-sign-jump {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cs-ink);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(44, 51, 69, 0.25);
}
.contract-sign-jump[hidden] { display: none; }
@media (max-width: 640px) {
  .contract-sign-jump { right: 16px; bottom: 16px; }
}

/* 제출: 카드 폭 전체 구분선 아래 가운데 노란 버튼 */
.contract-sign-footer {
  margin: 32px calc(-1 * var(--cs-pad-x)) calc(-1 * var(--cs-pad-y));
  padding: 28px var(--cs-pad-x);
  border-top: 1px solid var(--cs-divider);
  text-align: center;
}
.contract-sign-page .submit-btn {
  width: auto;
  min-width: 180px;
  height: 48px;
  margin: 0;
  padding: 0 24px;
  border-radius: 4px;
  background-color: var(--cs-button);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.contract-sign-page .submit-btn:hover {
  background-color: var(--cs-button-hover);
}

.contract-sign-page .is-invalid {
  border-color: #f23a3c !important;
}

/* 봇 차단 칸: 화면 밖으로 (display:none 은 일부 봇이 건너뛴다) */
.contract-sign-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contract-sign-notice,
.contract-sign-done {
  font-size: 15px;
  line-height: 24px;
  color: var(--cs-ink);
}
.contract-sign-done h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

/*
 * 홈페이지 폼(회원가입·상담 신청)의 이용약관·개인정보처리방침·광고 수신 동의 팝업
 * (agreement-checkbox.php renderAgreementDocumentPopup). 위의 서명 화면 카드를 그대로 쓰고 창 틀만 더한다.
 * 사이트 머리글(z-index 60)보다 위에 띄운다
 */
.agreement-doc-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.8);
}
.agreement-doc-popup.hidden { display: none; }
.agreement-doc-dialog {
  position: relative;
  width: 100%;
  max-width: 840px;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 40px 24px 8px;
  border-radius: 6px;
}
@media (max-width: 640px) {
  .agreement-doc-dialog { padding: 48px 8px 4px; }
}
.agreement-doc-dialog .contract-sign-org { margin-bottom: 24px; }
/* 긴 문서를 내려 읽어도 닫기 버튼은 오른쪽 위에 남는다 */
.agreement-doc-close {
  position: sticky;
  top: -28px;
  float: right;
  z-index: 1;
  width: 36px;
  height: 36px;
  margin: -28px -12px 0 0;
  border-radius: 999px;
  background: #fff;
  color: var(--cs-ink);
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(44, 51, 69, 0.2);
  cursor: pointer;
}
.agreement-doc-close:hover { background: var(--cs-divider); }
@media (max-width: 640px) {
  .agreement-doc-close { margin-right: 0; }
}