/* ===== MagicCar 수기개통 포털 - 고객 신청 흐름 ===== */
:root {
  --mc-primary: #1a73e8;
  --mc-primary-d: #1559c0;
  --mc-bg: #eef1f6;
  --mc-line: #dfe4ec;
}

.apply-body {
  background: var(--mc-bg);
  margin: 0;
  -webkit-text-size-adjust: 100%;
}
.apply-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}

/* 브랜드 (현행 CI 로고 — 투명 배경, 원래 밝은 헤더) */
.apply-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 14px;
}
.apply-brand .logo-img {
  height: 34px;
  width: auto;
  display: block;
}
.apply-brand .slogan {
  font-size: 16px;
  font-weight: 800;
  color: var(--mc-primary);
  letter-spacing: -.3px;
}

/* 단말기 라벨 참조 (접이식) */
.ref-help { font-size: 13px; color: #445; }
.ref-help > summary {
  cursor: pointer; list-style: none;
  padding: 8px 12px; background: #eef4ff; border: 1px solid #cfe0ff;
  border-radius: 8px; color: #1a4f9c; font-weight: 600;
}
.ref-help > summary::-webkit-details-marker { display: none; }
.ref-help > summary::before { content: "▸ "; }
.ref-help[open] > summary::before { content: "▾ "; }
/* 2026-09-29: 예시 기본 펼침 — 제목 옆 접기/펼치기 힌트가 상태에 따라 바뀜 */
.ref-help .ref-toggle-hint { float: right; font-size: 12px; font-weight: 500; color: #5b7bb5; }
.ref-help .ref-toggle-hint::before { content: "예시 보기 ▸"; }
.ref-help[open] .ref-toggle-hint::before { content: "접기 ▴"; }
.ref-label-img {
  display: block; width: 100%; max-width: 300px; margin: 10px auto 0;
  border: 1px solid #dbe4f0; border-radius: 6px;
}
.ref-usim-img { max-width: 380px; }

/* 단계바 */
.step-bar {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  counter-reset: step;
}
.step-bar li {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 12px;
  color: #9aa3b2;
}
.step-bar li .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--mc-line);
  font-weight: 700;
  margin-bottom: 4px;
}
.step-bar li .lab { display: block; }
.step-bar li::before {
  content: '';
  position: absolute;
  top: 14px; left: -50%;
  width: 100%; height: 2px;
  background: var(--mc-line);
  z-index: 0;
}
.step-bar li:first-child::before { display: none; }
.step-bar li .num { position: relative; z-index: 1; }
.step-bar li.active { color: var(--mc-primary); font-weight: 700; }
.step-bar li.active .num { border-color: var(--mc-primary); color: var(--mc-primary); }
.step-bar li.done { color: var(--mc-primary); }
.step-bar li.done .num { background: var(--mc-primary); border-color: var(--mc-primary); color: #fff; }
.step-bar li.done::before { background: var(--mc-primary); }

/* 카드 */
.apply-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 18px;
  box-shadow: 0 2px 12px rgba(20, 40, 80, .06);
}
.apply-title { font-size: 19px; font-weight: 800; margin: 0 0 16px; }
.apply-foot { text-align: center; font-size: 12px; color: #9aa3b2; margin-top: 18px; position: relative; }
/* 2026-09-29: 하단 우측 버전 표기 (배포본 식별) */
.apply-foot .app-ver { position: absolute; right: 2px; top: 0; font-size: 11px; color: #b3bcc9;
  font-family: Consolas, "Malgun Gothic", monospace; letter-spacing: .3px; }
@media (max-width: 480px) { .apply-foot { padding-bottom: 16px; } .apply-foot .app-ver { top: auto; bottom: 0; } }
.lead-sub { font-size: 14px; color: #455; line-height: 1.6; margin-bottom: 16px; }

/* 약관 */
.agree-all {
  background: #f4f8ff;
  border: 1px solid #d6e4ff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.agree-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.agree-row.big { font-size: 15px; }
.agree-row input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; }
.terms-block { border-bottom: 1px solid var(--mc-line); padding: 12px 2px; }
.terms-text {
  font-size: 12px; color: #6a7484; line-height: 1.6;
  margin: 8px 0 0 30px;
  background: #f8f9fb; border-radius: 8px; padding: 10px 12px;
}

/* 폼 */
.form-sec {
  font-size: 14px; font-weight: 700; color: #334;
  margin: 22px 0 10px; padding-left: 9px;
  border-left: 4px solid var(--mc-primary);
}
.form-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-label.req::after { content: ' *'; color: #e23; }
.btn-row { margin-top: 24px; }

/* 서명 패드 */
.sign-pad-wrap {
  border: 1px solid var(--mc-line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  background: #fff;
}
.sign-pad-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.req-dot { color: #e23; }
/* ═══ 서류 첨부 단계 (신분증·통장) 2026-08-25 ═══
   docs.php(PC) · mdoc.php(휴대폰 QR) 공용. 슬롯 = 가로형 카드:
   [견본 일러스트 + 촬영 팁] | [파일 선택/진행율/등록 확인]           */
.doc-slot2 { display: grid; grid-template-columns: 1fr; gap: 14px;
  border: 1px solid #e2e8f2; border-radius: 12px; padding: 16px; background: #fff;
  margin-bottom: 14px; }
@media (min-width: 680px) { .doc-slot2 { grid-template-columns: 1fr 1fr; } }
.doc-slot2.has-file { border-color: #1a73e8; box-shadow: 0 0 0 1px #1a73e8 inset; }
.doc-slot2-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
/* 견본(사진 느낌 SVG) + 팁 */
.doc-guide2 { display: flex; gap: 12px; align-items: flex-start; }
.doc-guide2-img { flex: 0 0 168px; }
.doc-guide2-img svg { width: 168px; height: auto; display: block;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(20, 40, 90, .12); }
.doc-guide2-tips { margin: 0; padding-left: 16px; font-size: 12.5px; color: #445;
  line-height: 1.7; }
/* 선택/촬영 버튼 */
.doc-pick { width: 100%; border: 1px dashed #9db2e0; background: #eef3fd; color: #1a56c4;
  border-radius: 8px; padding: 13px 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.doc-pick:hover { background: #e3edfc; }
.doc-pick:disabled, .doc-remove:disabled { opacity: .4; cursor: not-allowed; }
/* 슬롯별 업로드 진행율 (선택 즉시 업로드) */
.doc-prog { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.doc-prog-bar { flex: 1; height: 10px; background: #e6ecf7; border-radius: 6px; overflow: hidden; }
.doc-prog-bar > i { display: block; height: 100%; width: 0; background: #1a73e8; transition: width .15s ease; }
.doc-prog-pct { font-size: 12px; color: #33415c; min-width: 34px; text-align: right; }
/* 등록 사진 확인 */
.doc-done { text-align: center; }
.doc-thumb-wrap { background: #0e1524; border-radius: 8px; padding: 6px; min-height: 100px;
  display: flex; align-items: center; justify-content: center; }
.doc-thumb { max-width: 100%; max-height: 220px; border-radius: 4px; }
.doc-thumb-file { color: #cdd8ee; font-size: 14px; font-weight: 600; padding: 36px 0; }
.doc-thumb-embed { width: 100%; height: 230px; border: 0; border-radius: 4px; background: #fff; }
.doc-badge { display: inline-block; background: #e7f5ec; color: #147a3d; font-weight: 700;
  font-size: 12px; border-radius: 20px; padding: 2px 10px; }
.doc-meta { font-size: 12px; color: #66738c; margin: 8px 0 4px; word-break: break-all; }
.doc-remove { border: 0; background: none; color: #e23; font-size: 13px; text-decoration: underline; cursor: pointer; }
/* 휴대폰(QR) 페이지: 견본을 조금 작게 */
.doc-slot2-m .doc-guide2-img { flex-basis: 140px; }
.doc-slot2-m .doc-guide2-img svg { width: 140px; }
/* QR 패널 */
.qr-panel { border: 1px solid #e2e8f2; border-radius: 12px; background: #fafbfe;
  padding: 12px 16px; margin: 6px 0 14px; }
.qr-panel > summary { font-size: 14px; font-weight: 700; color: #1a56c4; cursor: pointer; }
.qr-body { display: flex; gap: 16px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.qr-box img { width: 148px; height: 148px; image-rendering: pixelated;
  border: 1px solid #e2e8f2; border-radius: 8px; background: #fff; padding: 6px; }
.qr-desc { flex: 1; min-width: 220px; font-size: 13px; color: #33415c; line-height: 1.7; }
.qr-url { word-break: break-all; font-size: 11px; color: #93a1b8; }
/* 서명 단계: 등록 서류 요약 */
.doc-summary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: #f2f8f4; border: 1px solid #cfe7d8; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 16px; font-size: 13px; }
.doc-summary-item { color: #147a3d; font-weight: 600; }
.doc-summary-edit { margin-left: auto; font-size: 12.5px; }
.sign-canvas {
  width: 100%;
  height: 200px;
  border: 1px dashed #b9c4d4;
  border-radius: 8px;
  background: #fbfcfe;
  touch-action: none;
  display: block;
}

/* 완료 */
.done-box { text-align: center; padding: 10px 4px; }
.done-icon {
  width: 64px; height: 64px; line-height: 64px;
  margin: 0 auto 14px;
  background: #e7f6ec; color: #1faf55;
  border-radius: 50%; font-size: 34px; font-weight: 800;
}
.done-title { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.done-sub { font-size: 14px; color: #556; }
.receipt-no {
  background: #f4f8ff; border: 1px solid #d6e4ff;
  border-radius: 10px; padding: 14px; margin: 18px 0;
}
.receipt-no .lbl { display: block; font-size: 12px; color: #789; }
.receipt-no .val { font-size: 22px; font-weight: 800; color: var(--mc-primary); letter-spacing: .5px; }
.done-guide { text-align: left; font-size: 13px; color: #556; line-height: 1.7; padding-left: 18px; }