/* 센터 방문 예약 신청 폼 — 공용 스타일 (접두사 .vf-)
   브랜드 색은 변수로 바꾼다. 페이지의 :root 또는 dialog 에 아래 변수를 덮어쓰면 된다.
     --vf-primary  (기본 #2b55ed, data-site="modu" 일 때 #1457d9)   --vf-ink #17223b   --vf-muted #627089
     --vf-line #dfe5ef   --vf-kakao #fee500   --vf-soft #f3f6fd
   변수를 지정하지 않으면 위 기본값을 쓴다.

   워드프레스 테마는 input·label·a 에 전역 스타일(배경·테두리·여백)을 입힌다. 그걸 이기려고
   모든 규칙을 .vf-dialog 아래에 두고, 입력칸(.vf-control)의 모양만 !important 로 고정했다. */

.vf-dialog.vf-dialog{
  --_p:var(--vf-primary,#2b55ed);
  --_ink:var(--vf-ink,#17223b);
  --_muted:var(--vf-muted,#627089);
  --_line:var(--vf-line,#dfe5ef);
  --_kakao:var(--vf-kakao,#fee500);
  --_soft:var(--vf-soft,#f3f6fd);
  --_err:#c62828;
  border:0;border-radius:20px;padding:0;
  width:min(560px,calc(100% - 24px));max-width:none;
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  color:var(--_ink);background:#fff;box-shadow:0 30px 80px #17223b33;
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:15px;line-height:1.6;letter-spacing:0;word-break:keep-all;
}
.vf-dialog.vf-dialog[data-site="modu"]{--_p:var(--vf-primary,#1457d9)}
/* 워드프레스 페이지의 .modu-cf{width:auto!important;margin-left/right:0!important} 가 dialog 에도 걸리므로 폭과 가운데 정렬을 되찾는다 */
dialog.vf-dialog.vf-dialog{width:min(560px,calc(100% - 24px))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
.vf-dialog::backdrop{background:#17223b8c}
.vf-dialog *,.vf-dialog *::before,.vf-dialog *::after{box-sizing:border-box}
.vf-dialog [hidden]{display:none!important}
html.vf-lock{overflow:hidden}

/* 머리 */
.vf-dialog .vf-head{position:relative;padding:26px 56px 4px 24px}
.vf-dialog .vf-head h2{margin:0 0 6px;padding:0;font-size:23px;line-height:1.35;letter-spacing:-.6px;font-weight:800;color:var(--_ink)}
.vf-dialog .vf-head h2:focus{outline:none}
.vf-dialog .vf-lead{margin:0;color:var(--_muted);font-size:14px;line-height:1.65}
.vf-dialog .vf-lead strong{color:var(--_ink)}
.vf-dialog .vf-x{position:absolute;top:14px;right:14px;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--_muted);font-size:28px;line-height:1;cursor:pointer}
.vf-dialog .vf-x:hover{background:var(--_soft)}

/* 폼 */
.vf-dialog .vf-form{margin:0;padding:18px 24px 24px;display:grid;gap:18px}
.vf-dialog .vf-field{margin:0;padding:0;border:0;min-width:0}
.vf-dialog .vf-field>label,.vf-dialog .vf-field>legend,.vf-dialog .vf-sublabel{display:block;float:none;width:auto;padding:0;margin:0 0 7px;font-size:14px;font-weight:700;line-height:1.5;color:var(--_ink)}
.vf-dialog .vf-sublabel{font-weight:600;color:var(--_muted);font-size:13px}
.vf-dialog .vf-opt{font-weight:500;color:var(--_muted);font-size:13px}
.vf-dialog .vf-help{margin:6px 0 0;color:var(--_muted);font-size:13px}
.vf-dialog .vf-region-top{padding:14px 16px;background:var(--_soft);border-radius:14px}

/* 입력칸 — 테마의 input 전역 스타일을 이기도록 !important */
.vf-dialog.vf-dialog .vf-control{
  display:block;width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 14px!important;
  border:1px solid var(--_line)!important;border-radius:12px!important;background-color:#fff!important;box-shadow:none!important;color:var(--_ink)!important;
  font-family:inherit;font-size:16px!important;font-weight:400!important;line-height:1.4!important;
  appearance:none;-webkit-appearance:none;
}
.vf-dialog.vf-dialog select.vf-control{padding-right:38px!important;background-image:linear-gradient(45deg,transparent 50%,#627089 50%),linear-gradient(135deg,#627089 50%,transparent 50%)!important;background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
.vf-dialog.vf-dialog select.vf-control:disabled{background-color:var(--_soft)!important;color:var(--_muted)!important}
.vf-dialog.vf-dialog textarea.vf-control{height:auto!important;min-height:88px!important;padding:12px 14px!important;resize:vertical}
.vf-dialog.vf-dialog .vf-control::placeholder{color:#9aa6bb;opacity:1}
.vf-dialog.vf-dialog #vf-plan-custom{margin-top:8px!important}
.vf-dialog.vf-dialog .vf-control:focus-visible{outline:2px solid var(--_p)!important;outline-offset:1px!important;border-color:var(--_p)!important}
.vf-dialog.vf-dialog .vf-control[aria-invalid="true"]{border-color:var(--_err)!important}
.vf-dialog.vf-dialog .vf-control[aria-invalid="true"]:focus-visible{outline-color:var(--_err)!important}

/* 세그먼트 (라디오) */
.vf-dialog .vf-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.vf-dialog .vf-seg label{position:relative;display:block;margin:0;padding:0}
.vf-dialog .vf-seg input{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.vf-dialog .vf-seg span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 8px;border:1px solid var(--_line);border-radius:12px;background:#fff;color:var(--_muted);font-weight:700;text-align:center;transition:background-color .12s,border-color .12s,color .12s}
.vf-dialog .vf-seg input:checked+span{border-color:var(--_p);background:var(--_soft);color:var(--_p);box-shadow:inset 0 0 0 1px var(--_p)}
.vf-dialog .vf-seg input:focus-visible+span{outline:2px solid var(--_p);outline-offset:2px}
.vf-dialog .vf-seg[aria-invalid="true"] span{border-color:var(--_err)}
.vf-dialog .vf-move{display:grid;gap:18px;padding:16px;background:var(--_soft);border-radius:14px}

/* 방문 일시 */
.vf-dialog .vf-row{display:grid;grid-template-columns:1.15fr 1fr;gap:10px}
.vf-dialog .vf-sub{min-width:0}

/* 글자 수 · 오류 */
.vf-dialog .vf-count{margin:5px 0 0;text-align:right;color:var(--_muted);font-size:12px}
.vf-dialog .vf-count-low{color:#b45309;font-weight:700}
.vf-dialog .vf-err{margin:6px 0 0;color:var(--_err);font-size:13px;font-weight:600;line-height:1.5}
.vf-dialog .vf-err:empty,.vf-dialog .vf-alert:empty{display:none}
.vf-dialog .vf-alert{margin:0;padding:12px 14px;border-radius:12px;background:#fdecea;color:#8a1c1c;font-size:14px;font-weight:600;line-height:1.6}
.vf-dialog .vf-alert a{color:inherit;text-decoration:underline;font-weight:800}

/* 동의 */
.vf-dialog .vf-field>label.vf-check{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:15px;font-weight:600;cursor:pointer}
.vf-dialog .vf-check input{flex:none;width:22px;height:22px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--_p)}
.vf-dialog .vf-details{margin:8px 0 0;padding:0;border:0;font-size:13px;color:var(--_muted)}
.vf-dialog .vf-details summary{display:block;margin:0;padding:4px 0;cursor:pointer;font-size:13px;font-weight:600;color:var(--_muted)}
.vf-dialog .vf-details summary::after{content:'\25BE';display:inline-block;margin-left:6px;font-size:12px}
.vf-dialog .vf-details[open] summary::after{transform:rotate(180deg)}
.vf-dialog .vf-details p{margin:6px 0 0;padding:12px 14px;background:var(--_soft);border-radius:10px;font-size:13px;line-height:1.75;color:var(--_muted)}
.vf-dialog .vf-details b{color:var(--_ink)}

/* 봇 함정 — 화면 밖 */
.vf-dialog .vf-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* 버튼 */
.vf-dialog .vf-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:2px 0 0}
.vf-dialog .vf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:0 20px;border:1px solid var(--_line);border-radius:14px;background:#fff;color:var(--_ink);font-family:inherit;font-size:16px;font-weight:700;line-height:1.3;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vf-dialog .vf-btn:hover{background:var(--_soft);color:var(--_ink)}
.vf-dialog .vf-btn:focus-visible{outline:3px solid var(--_p);outline-offset:2px}
.vf-dialog .vf-btn-primary{min-height:52px;border-color:var(--_p);background:var(--_p);color:#fff}
.vf-dialog .vf-btn-primary:hover{background:var(--_p);color:#fff;filter:brightness(.92)}
.vf-dialog .vf-btn-kakao{border-color:var(--_kakao);background:var(--_kakao);color:#3c1e1e}
.vf-dialog .vf-btn-kakao:hover{background:var(--_kakao);color:#3c1e1e;filter:brightness(.96)}
.vf-dialog .vf-btn:disabled{opacity:.6;cursor:not-allowed}

/* 접수 완료 화면 */
.vf-dialog .vf-done{padding-bottom:0}
.vf-dialog .vf-badge{display:inline-block;margin:0 0 8px;padding:3px 10px;border-radius:999px;background:var(--_soft);color:var(--_p);font-size:12px;font-weight:800}
.vf-dialog .vf-rno{margin:6px 0 10px;line-height:1.3}
.vf-dialog .vf-rno-label{display:block;color:var(--_muted);font-size:13px;font-weight:600}
.vf-dialog .vf-rno strong{display:block;color:var(--_p);font-size:30px;font-weight:900;letter-spacing:.5px;word-break:break-all}
.vf-dialog .vf-body{padding:16px 24px 24px}
.vf-dialog .vf-receipt{margin:0;padding:0}
.vf-dialog .vf-receipt img{display:block;width:100%;height:auto;margin:0;border:1px solid var(--_line);border-radius:14px;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.vf-dialog .vf-wait{padding:44px 16px;text-align:center;color:var(--_muted);font-size:14px;background:var(--_soft);border-radius:14px}
.vf-dialog .vf-body .vf-help{margin:10px 0 0;text-align:center}
.vf-dialog .vf-actions-col{margin-top:16px}

@media (max-width:520px){
  .vf-dialog .vf-head{padding:22px 52px 2px 18px}
  .vf-dialog .vf-head h2{font-size:21px}
  .vf-dialog .vf-form{padding:16px 18px 20px;gap:16px}
  .vf-dialog .vf-body{padding:14px 18px 20px}
  .vf-dialog .vf-seg{gap:6px}
  .vf-dialog .vf-seg span{padding:6px 4px;font-size:14px}
  .vf-dialog .vf-row{grid-template-columns:1fr 1fr;gap:8px}
  .vf-dialog.vf-dialog input[type=date].vf-control{padding:0 8px!important;font-size:15px!important}
  .vf-dialog .vf-move,.vf-dialog .vf-region-top{padding:14px 12px}
}
@media (prefers-reduced-motion:reduce){
  .vf-dialog *,.vf-dialog *::before,.vf-dialog *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}