/* =====================================================================
   사전예약 유저 신청서 — 디자인 토큰 스타일시트 (관리 미리보기 + 실제 폼 공유)
   컨테이너 .uf 에 CSS 변수(--uf-*)와 수정자 클래스(uf-input-*, uf-label-* 등)를
   세팅하면 구조/느낌이 바뀐다. 값 세팅은 JS(미리보기)·PHP(실제 폼)가 동일하게 한다.
   ===================================================================== */
.uf{
  --uf-primary:#E11D48; --uf-accent:#111827; --uf-bg:#F7F8FA;
  --uf-radius:10px; --uf-btn-radius:12px;
  --uf-shadow:0 2px 10px rgba(0,0,0,.06);
  --uf-gap:14px; --uf-pad:16px; --uf-fgap:13px; --uf-input-h:46px;
  --uf-font:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  --uf-fs:15.5px;
  --uf-card-bg:#ffffff; --uf-card-border:#edeef1;
  background:var(--uf-bg); color:var(--uf-accent);
  font-family:var(--uf-font); font-size:var(--uf-fs); line-height:1.5;
}
.uf *{box-sizing:border-box}

/* 헤더 */
.uf-hd{margin:0 0 calc(var(--uf-gap) + 4px)}
.uf.uf-head-center .uf-hd{text-align:center}
.uf.uf-head-left .uf-hd{text-align:left}
.uf-logo{max-height:38px;margin-bottom:12px}
.uf.uf-head-center .uf-logo{display:block;margin-left:auto;margin-right:auto}
.uf-title{font-size:calc(var(--uf-fs) + 6px);font-weight:800;margin:0 0 6px;color:var(--uf-accent)}
.uf-sub{font-size:calc(var(--uf-fs) - 3px);opacity:.7;margin:0}
.uf-intro{font-size:calc(var(--uf-fs) - 2.5px);line-height:1.6;margin:0 0 var(--uf-gap);padding:12px 14px;background:rgba(0,0,0,.03);border-radius:var(--uf-radius)}

/* 섹션(항목 묶음) */
.uf-box{margin-bottom:var(--uf-gap)}
.uf.uf-sec-card .uf-box{background:var(--uf-card-bg);border:1px solid var(--uf-card-border);border-radius:var(--uf-radius);padding:var(--uf-pad);box-shadow:var(--uf-shadow)}
.uf.uf-sec-plain .uf-box{padding:0}
.uf.uf-sec-divider .uf-box{border-top:2px solid var(--uf-primary);padding-top:var(--uf-pad)}

/* 필드 */
.uf-f{margin-bottom:var(--uf-fgap)}
.uf-f:last-child{margin-bottom:0}
.uf-f>label{display:block;font-size:calc(var(--uf-fs) - 3px);font-weight:600;opacity:.8;margin-bottom:5px}
.rq{color:var(--uf-primary)}
.uf-in{width:100%;height:var(--uf-input-h);border:1px solid #d7dde7;border-radius:var(--uf-radius);padding:0 12px;font-size:var(--uf-fs);font-family:inherit;color:#1d2939;background:#fff;transition:border-color .12s,box-shadow .12s}
textarea.uf-in{height:auto;min-height:calc(var(--uf-input-h) * 1.6);padding:11px 12px;line-height:1.5}
.uf-in:focus{outline:none;border-color:var(--uf-primary);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
select.uf-in{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6C72' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}

/* 입력칸 모양 변형 */
.uf.uf-input-underline .uf-in{border:none;border-bottom:1.5px solid #d7dde7;border-radius:0;padding-left:2px;padding-right:2px;background:transparent}
.uf.uf-input-underline .uf-in:focus{box-shadow:none;border-bottom-color:var(--uf-primary)}
.uf.uf-input-filled .uf-in{border:1px solid transparent;background:#f1f3f7}
.uf.uf-input-filled .uf-in:focus{background:#fff;border-color:var(--uf-primary)}

/* 라벨 위치 변형 */
.uf.uf-label-left .uf-f{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px}
.uf.uf-label-left .uf-f>label{margin-bottom:0}
.uf.uf-label-float .uf-f>label{font-size:calc(var(--uf-fs) - 4px);opacity:.6}

/* 라디오/체크 */
.uf-radio{display:flex;flex-wrap:wrap;gap:8px 16px;padding:4px 0}
.uf-radio label{display:inline-flex;align-items:center;gap:6px;font-size:calc(var(--uf-fs) - 1.5px);cursor:pointer}

/* 약관 — 목업(kt_event_apply) 아코디언 카드: 헤더 클릭(쉐브론)하면 아래로 펼쳐짐 */
.uf-terms{margin-bottom:var(--uf-gap)}
.uf-term{border:1.5px solid #e5e7eb;border-radius:var(--uf-radius);overflow:hidden;background:#fff;margin-bottom:10px;transition:border-color .15s}
.uf-term:last-child{margin-bottom:0}
.uf-term-row{display:flex;align-items:center;gap:10px;padding:13px 14px}
.uf-term-chk{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;margin:0}
.uf-term-chk input{position:absolute;opacity:0;width:0;height:0}
.uf-term-box{flex:0 0 auto;width:22px;height:22px;border-radius:calc(var(--uf-radius) - 4px);border:1.5px solid #cbd2dc;background:#fff;display:flex;align-items:center;justify-content:center;transition:.14s}
.uf-term-box svg{width:13px;height:13px;color:#fff;opacity:0;transition:.14s}
.uf-term-chk input:checked + .uf-term-box{background:var(--uf-primary);border-color:var(--uf-primary)}
.uf-term-chk input:checked + .uf-term-box svg{opacity:1}
.uf-term-ttl{font-size:calc(var(--uf-fs) - 2px);font-weight:600;color:var(--uf-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uf-term-ttl .rq2{font-weight:700;font-size:11px;color:var(--uf-primary);margin-right:2px}
.uf-term-ttl .rq2.opt{color:#98a2b3}
.uf-term-chev{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#9aa3af;background:none;border:none;cursor:pointer;transition:background .15s}
.uf-term-chev:hover{background:rgba(0,0,0,.04)}
.uf-term-chev svg{width:16px;height:16px;transition:transform .2s}
.uf-term.open .uf-term-chev svg{transform:rotate(180deg)}
.uf-term .tb{display:none;padding:0 14px 14px}
.uf-term.open .tb{display:block}
.uf-term .tb-in{background:#f7f8fa;border-radius:calc(var(--uf-radius) - 2px);padding:12px 14px;font-size:calc(var(--uf-fs) - 3px);color:#667085;line-height:1.65;max-height:240px;overflow:auto;white-space:pre-wrap}

/* 제출 버튼 */
.uf-submit{width:100%;height:calc(var(--uf-input-h) + 6px);border:2px solid var(--uf-primary);border-radius:var(--uf-btn-radius);background:var(--uf-primary);color:#fff;font-weight:800;font-size:calc(var(--uf-fs) + .5px);cursor:pointer;box-shadow:var(--uf-shadow);transition:filter .12s}
.uf-submit:hover{filter:brightness(.96)}
.uf.uf-btn-outline .uf-submit{background:transparent;color:var(--uf-primary)}
.uf.uf-btn-soft .uf-submit{background:color-mix(in srgb,var(--uf-primary) 14%,#fff);color:var(--uf-primary);border-color:transparent}
.uf-submit:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.uf-err{color:#dc2626;font-size:calc(var(--uf-fs) - 3px);margin:10px 2px 0;min-height:16px;text-align:center}

/* =====================================================================
   단계형(step) 레이아웃 — flow='step' 일 때만. (kt_event_apply 목업 기준)
   .uf.uf-flow-step 안에서 .uf-step 화면이 하나씩 전환된다.
   ===================================================================== */
.uf-stepnav{display:none;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.uf.uf-flow-step .uf-stepnav{display:flex}
.uf-stepbadge{flex:0 0 auto;font-size:11px;font-weight:700;color:#fff;background:var(--uf-accent);padding:4px 9px;border-radius:8px}
.uf-crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;flex-wrap:wrap}
.uf-crumb{color:#9aa3af;font-weight:500;transition:color .15s}
.uf-crumb.on{color:var(--uf-accent);font-weight:700}
.uf-crumb-sep{color:#d1d5db;font-size:11px}
.uf-prog{display:none;height:3px;border-radius:99px;background:#eef0f3;overflow:hidden;margin:0 0 16px}
.uf.uf-flow-step .uf-prog{display:block}
.uf-prog-bar{height:100%;background:var(--uf-primary);width:50%;border-radius:99px;transition:width .3s cubic-bezier(.32,.72,0,1)}
.uf.uf-flow-step .uf-step{display:none}
.uf.uf-flow-step .uf-step.on{display:block;animation:ufStepIn .28s cubic-bezier(.32,.72,0,1)}
.uf.uf-flow-step .uf-step.on.rev{animation:ufStepBack .28s cubic-bezier(.32,.72,0,1)}
@keyframes ufStepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes ufStepBack{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.uf-steptitle{font-size:calc(var(--uf-fs) + 3px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;line-height:1.4;color:var(--uf-accent)}
.uf-next{width:100%;height:calc(var(--uf-input-h) + 6px);border:none;border-radius:var(--uf-btn-radius);background:var(--uf-primary);color:#fff;font-weight:800;font-size:calc(var(--uf-fs) + .5px);cursor:pointer;box-shadow:var(--uf-shadow);margin-top:6px;transition:filter .12s}
.uf-next:hover{filter:brightness(.96)}

/* =====================================================================
   커스텀 셀렉트 드롭다운 — 네이티브 select 위에 목업(kt_event_apply) 스타일 옵션 리스트.
   네이티브 select 는 값/폼전송/연동용으로 숨겨 유지. 색상은 템플릿 테마색(--uf-primary) 따름.
   ===================================================================== */
.uf-dd{position:relative}
.uf-dd > select.uf-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.uf-dd-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;position:relative;z-index:1;background-image:none}
.uf-dd-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uf-dd-text.ph{color:#9aa3af;font-weight:400}
.uf-dd-arrow{flex:0 0 auto;width:18px;height:18px;color:#9aa3af;transition:transform .18s}
.uf-dd.open .uf-dd-arrow{transform:rotate(180deg)}
.uf-dd.open .uf-dd-trigger{border-color:var(--uf-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--uf-primary) 18%,transparent)}
.uf-dd-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;background:#fff;border:1.5px solid #e5e7eb;border-radius:var(--uf-radius);box-shadow:0 8px 28px rgba(15,23,42,.14);max-height:264px;overflow-y:auto}
.uf-dd-list[hidden]{display:none}
.uf-dd-opt{padding:12px 14px;border-radius:calc(var(--uf-radius) - 2px);font-size:calc(var(--uf-fs) - .5px);font-weight:500;color:#374151;cursor:pointer;transition:background .12s,color .12s}
.uf-dd-opt:hover{background:color-mix(in srgb,var(--uf-primary) 10%,#fff);color:var(--uf-primary)}
.uf-dd-opt.on{background:var(--uf-primary);color:#fff;font-weight:700}

/* 완료 화면 — 목업(kt_event_apply) done-screen 디자인. 문구/요약은 고정(관리자 설정 불필요) */
.uf-done{display:none;text-align:center;padding:44px 16px}
.uf-done.on{display:block}
.uf-done-ic{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--uf-primary) 14%,#fff);color:var(--uf-primary);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:ufDonePop .3s cubic-bezier(.34,1.56,.64,1)}
.uf-done-ic svg{width:36px;height:36px}
@keyframes ufDonePop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.uf-done-title{font-size:calc(var(--uf-fs) + 4px);font-weight:800;margin:0 0 8px;color:var(--uf-accent)}
.uf-done-msg{font-size:calc(var(--uf-fs) - 2px);color:#6b7280;line-height:1.6;margin:0 0 24px}
.uf-done-summary{text-align:left;background:#f7f8fa;border-radius:var(--uf-radius);padding:16px 18px;margin:0 auto}
.uf-done-summary:empty{display:none}
.uf-drow{display:flex;justify-content:space-between;gap:10px;font-size:calc(var(--uf-fs) - 2.5px);padding:6px 0}
.uf-drow .uf-dl{color:#6b7280;font-weight:500}
.uf-drow .uf-dv{color:var(--uf-accent);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}