/* =========================================================
   본인인증 화면 (모바일)
   - 기준: 375px 뷰포트, 시안 2x 캡처 기준 실측 추정값
   - 폰트: Pretendard (없을 경우 시스템 고딕 폴백)
   ========================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --vf-primary: #ff5a2c;          /* 인증번호 발송 버튼 */
  --vf-primary-pressed: #e94c20;
  --vf-dark: #222222;             /* 하단 메인 버튼 */
  --vf-dark-pressed: #000000;
  --vf-text: #333333;
  --vf-text-sub: #555555;         /* 라벨, 안내문 */
  --vf-placeholder: #b5b5b5;
  --vf-border: #dddddd;
  --vf-border-focus: #333333;
  --vf-error: #f03e3e;
  --vf-bg-info: #f5f5f5;
  --vf-disabled-bg: #e5e5e5;
  --vf-disabled-text: #aaaaaa;

  --vf-radius: 8px;               /* 입력창·버튼 */
  --vf-radius-box: 12px;          /* 안내 박스 */
  --vf-control-h: 56px;
  --vf-main: #1a1a1a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", sans-serif;
  color: var(--vf-text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 레이아웃 ---------- */
.vf {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

.vf__label {
  display: block;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--vf-text-sub);
  letter-spacing: -0.02em;
}

.vf__title{
    display: block;
  margin: 18px 0 24px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--vf-text-sub);
  letter-spacing: -0.02em;
  text-align:center;
}

.vf__disc{    
    display: block;
  margin: 24px 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--vf-text);
  letter-spacing: -0.02em;
  line-height:1.7
  
}

.vf__row {
  display: flex;
  gap: 8px;
}

.vf__row + .vf__field,
.vf__field + .vf__field {
  margin-top: 12px;
}

/* ---------- 입력창 ---------- */
.vf__input {
  flex: 1 1 auto;
  min-width: 0;                    /* flex 안에서 줄어들 수 있도록 */
  width: 100%;
  height: var(--vf-control-h);
  padding: 0 18px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: #fff;
  font: inherit;
  font-size: 16px;                 /* iOS 포커스 자동 확대 방지 (16px 미만이면 확대됨) */
  color: var(--vf-text);
  letter-spacing: -0.02em;
  text-overflow: ellipsis;         /* 긴 placeholder 말줄임 */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}

.vf__input::placeholder {
  color: var(--vf-placeholder);
  opacity: 1;                      /* Firefox 기본 투명도 제거 */
}

.vf__input:focus { border-color: var(--vf-border-focus); }

.vf__input.is-error { border-color: var(--vf-error); }

.vf__input:disabled {
  background: #fafafa;
  color: var(--vf-disabled-text);
}

/* ---------- 버튼 공통 ---------- */
.vf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--vf-control-h);
  border: 0;
  border-radius: var(--vf-radius);
  font: inherit;
  letter-spacing: -0.02em;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}

.vf__btn:focus-visible {
  outline: 2px solid var(--vf-border-focus);
  outline-offset: 2px;
}

.vf__btn:disabled {
  background: var(--vf-disabled-bg);
  color: var(--vf-disabled-text);
  cursor: default;
}

/* 인증번호 발송 */
.vf__btn--send {
  flex: 0 0 auto;
  width: 116px;
  font-size: 15px;
  font-weight: 500;
  background: var(--vf-primary);
  white-space: nowrap;
}
.vf__btn--send:not(:disabled):active { background: var(--vf-primary-pressed); }

/* 하단 메인 버튼 */
.vf__btn--submit {
  width: 100%;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  background: var(--vf-dark);
}
.vf__btn--submit:not(:disabled):active { background: var(--vf-dark-pressed); }

/* ---------- 에러/타이머 메시지 (선택) ---------- */
.vf__msg {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--vf-error);
}

.vf__timer {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--vf-error);
  pointer-events: none;
}
.vf__field--timer { position: relative; }
.vf__field--timer .vf__input { padding-right: 64px; }

/* ---------- 안내 박스 ---------- */
.vf__info { 
  padding: 20px 20px 20px 18px;
  border-radius: var(--vf-radius-box);
  background: var(--vf-bg-info);
  list-style: none;
}

.vf__info li {
  position: relative;
  padding-left: 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--vf-text-sub);
  letter-spacing: -0.03em;
  word-break: keep-all;            /* 한글 어절 단위 줄바꿈 */
}

.vf__info li + li { margin-top: 4px; }

.vf__info li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.9em;                      /* line-height 1.8의 절반 = 첫 줄 중앙 */
  width: 3px;
  height: 3px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--vf-text-sub);
}

.logo {
        font-size: 26px;
        font-weight: 800;
        font-style: italic;         
        letter-spacing: -0.5px;
        margin: 8px 0 6px;
    }

.page-title {
        font-size: 18px;
        font-weight: 800;
        color: var(--vf-main);
        margin: 0 0 20px;
        letter-spacing: -0.3px;
    }


    /* 체크박스 */
.cu-checkbox {display: inline;text-align: left;position: relative;padding-left: 25px;cursor: pointer;transition: all .3s ease;font-size: 16px;}
.cu-checkbox > input {position: absolute;z-index: -1;opacity: 0;}
.cu-checkbox > span {background: 0 0;border: 1px solid #8895A2 !important;border-radius: 3px;position: absolute;top: 0px;left: 0;height: 18px;width: 18px;}
.cu-checkbox > input[type="checkbox"]:checked + span:after {content: '';position: absolute;top: 50%;left: 50%;margin-left: -3px;margin-top: -8px;width: 5px;height: 10px;border-width: 0 2px 2px 0 !important;transform: rotate(45deg);border: solid #FFF;background-color:#7361fc}
.cu-checkbox > input[type="checkbox"]:checked + span {border: 1px solid #7361fc !important;background-color:#7361fc}

/* ---------- 작은 화면 (320px 대응) ---------- */
@media (max-width: 340px) {
  .vf { padding-left: 12px; padding-right: 12px; }
  .vf__btn--send { width: 100px; font-size: 14px; }
  .vf__input { padding: 0 14px; }
}