html, body {
    overscroll-behavior: none;
}
body {
    background-color: #EBEFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    height: 100%;
    overflow: auto;
}
input:focus,
select:focus {
  outline: none;
  box-shadow: none;
}
.card {
    position: relative;
    background-color: #fff;
    padding: 40px;
    border-radius: 24px;
    width: 100%;                 /* 💡 width 추가 */
    max-width: 375px;
    min-width: 320px;
    margin: 0 auto;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
    max-height: 100dvh;
}
.card .cp-close {
  position: absolute;
  top: 24px;
  right: 24px;
}
.card .title {
    color: #1a1a1a;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.5px;
    padding: 16px 0;
}
.card form {
    height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.card .note {
    color: #072FBE;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: -0.3px;
    padding-bottom: 40px;
}
.card .field:not(.group-field) {
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
}
.card .group-field {
    padding-bottom: 16px;
}
.card .field .label,
.chk-legend {
    position: relative;
    width: fit-content;
    font-size: 0.875rem;
    color: #666;
    font-weight: 400;
    letter-spacing: -0.35px;
}
.chk-legend {
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid #ddd;
}
.card .field .label::after {
    content: "";
    width:4px;
    height: 4px;
    border-radius: 100%;
    background-color: #072FBE;
    position: absolute;
    top: 0;
    right: -8px;
}
.card .field input {
    height: 32px;
    border: 0;
    border-bottom: 1px solid #ddd;
}
.card .field input::placeholder {
  color: #CCCCCC;
}
.card .field .radio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
}
.card .field .radio-list .radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.card .field .radio-list .radio-item span {
    color: #888;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.325px;
}

/* radio btn custom */
:root{ --brand:#072FBE; --line:#ddd; --text:#111827; }

/* 네이티브 라디오는 화면에서만 숨기고 접근성은 유지 */
.radio__input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* 겉원 */
.radio__control{
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid var(--line);
  display:inline-block;
  position:relative;
  transition:all .15s ease;
}

/* 안쪽 점 */
.radio__control::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--brand);
  transform:scale(0);
  transition:transform .12s ease;
}

/* 상태 */
.radio:hover .radio__control{ border-color:#9aa7b7; }
.radio__input:focus-visible + .radio__control{
  box-shadow:0 0 0 3px rgba(23,78,178,.25);
  border-color:var(--brand);
}
.radio__input:checked + .radio__control{
  border-color:var(--brand);
}
.radio__input:checked + .radio__control::after{
  transform:scale(1);    /* 내부 점 등장 */
}

/* 비활성 */
.radio__input:disabled + .radio__control{
  border-color:#e5e7eb;
  background:#f8fafc;
  cursor:not-allowed;
}
.radio__input:disabled ~ .radio__label{
  color:#9ca3af;
  cursor:not-allowed;
}

/* check box */
/* checkbox 전용 (기존 클래스 수정 없음) */

.chk{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    margin: 8px 0;
    }
.chk-group .chk:nth-of-type(1) {
    margin-top: 16px;
}
.chk-agree {
    margin:24px 0 16px;
}
.chk__input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
}
.chk__box{
  width:16px;
  height:16px;
  border:1px solid var(--line);
  border-radius:2px; position:relative;
  display:inline-block;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  background:#fff;
}
/* 체크 표시 (V) */
.chk__box::after{
  content:"";
  position:absolute;
  width:8px;
  height:4px;
  left:2px;
  top:3px;
  border-left:1px solid #fff;
  border-bottom:1px solid #fff;
  transform:rotate(-45deg) scale(0.6); opacity:0;
  transition:opacity .12s ease, transform .12s ease;
}

/* 상호작용 상태 */
.chk__input:focus-visible + .chk__box{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(23,78,178,.25);
}
.chk__input:checked + .chk__box{
  background:var(--brand); border-color:var(--brand);
}
.chk__input:checked + .chk__box::after{
  opacity:1; transform:rotate(-45deg) scale(1);
}

/* 텍스트 */
.chk__label{
    color: #888;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.325px;
}

/* 제출 btn */
button.submit {
    padding: 16px 0;
    display: block;
    width: 100%;
    border-radius: 8px;
    background-color: #0059ab;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.4px;
    transition: all 0.2s ease-in-out;
}
button.submit:hover {
    background-color: #072FBE;
}

/* 제출 btn-  input으로 마크업 변경_260114 */
input.submit {
  grid-column: 1 / -1;
  border: none;
  cursor: pointer;
  padding: 16px 0;
  display: block;
  width: 100%;
  border-radius: 8px;
  background-color: #0059ab;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.4px;
  transition: all 0.2s ease-in-out;
}
button.submit:hover {
  background-color: #072FBE;
}

@media (max-width:767px) {
    .card {
    width: 100%;
    max-width: unset;
    height: 100vh;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    margin: unset;
    justify-content: center;
    }
}