/* html, body {
    overscroll-behavior: none;
} */
/* body {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    height: 100%;
    overflow: auto;
} */
body {
  height: auto;
  background: #d1dff8;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
}
.card {
    background-color: #fff;
    max-width: 768px;
    margin: 80px auto;
    padding: 80px 40px;
    border-radius: 24px;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
    /* max-height: 100dvh; */
}
.card .title {
    color: #1a1a1a;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.5px;
    padding: 0 0 8px;
}
.card .subtxt {
  font-size: 0.875rem;
  color: #666;
  font-weight: 400;
  letter-spacing: -0.35px;
  padding-bottom: 8px;
}
.card form {
    /* height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 16px;
    scrollbar-gutter: stable;
}
/* scrollbar */
/* Chrome, Edge, Safari */
.card form::-webkit-scrollbar {
  width: 4px;                   /* 스크롤바 전체 너비 */
}

.card form::-webkit-scrollbar-thumb {
  background-color: #8EA6FF;  /* 스크롤바 색 */
  border-radius: 4px;                       /* 모서리 둥글게 */
  transition: background-color 0.2s ease;
}

.card form::-webkit-scrollbar-thumb:hover {
  background-color: #072FBE;  /* hover 시 진해짐 */
}

.card form::-webkit-scrollbar-track {
  background-color: transparent;            /* 트랙 배경 투명 */
}

/* Firefox 전용 */
.card form {
  scrollbar-width: thin;                    /* 얇은 스크롤바 */
  scrollbar-color: #8EA6FF transparent;
}

.card .note {
    color: #072FBE;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: -0.3px;
    padding-bottom: 24px;
}
.card .field {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
    gap: 4px;
}
.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-bottom: 4px;
}
.card .field .label:not(.cs-label)::after {
    content: "";
    width:4px;
    height: 4px;
    border-radius: 100%;
    background-color: #072FBE;
    position: absolute;
    top: 0;
    right: -8px;
}
.card .field input, select.input, .txtbox {
    height: 40px;
    border: 0;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    padding-left: 8px;
}
.card .field input::placeholder, .txtbox::placeholder {
  color: #CCCCCC;
}
select.input {
  font-size: 0.875rem;
  color: #aaa;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("../images/icons/chevron_down_gray.svg"); /* ✅ 아이콘 경로 */
  background-repeat: no-repeat;
  background-position: right 8px center; /* 오른쪽 정렬 */
  background-size: 16px;
  padding-right: 24px; /* 텍스트가 아이콘과 겹치지 않게 */
  cursor: pointer;
}

/* ✅ 실제 선택 시 색상 변경 */
select.input:valid {
  color: #1a1a1a;
}
.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, .cs-field, .agree-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
}
.chk-group {
  padding-bottom: 32px;
}
.chk-group .chk {
  margin: 0;
}
.chk-agree {
    margin:0;
}
.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;
}
.card .cs-field .txtbox {
  height: 200px;
  padding: 8px;
  resize: none;
}
/* 제출 btn */
button.submit {
    padding: 16px 0;
    cursor: pointer;
    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;
    padding: 16px 0;
    cursor: pointer;
    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;
}
input.submit:hover {
    background-color: #072FBE;
}

/* 보안문자_251203 추가 */
.securityimg {
  display: flex;
  gap: 8px;
}
.securityimg > img {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.btn--reload {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background-color: #fff;
}
@media (max-width:767px) {
    .card form {
      display: unset;
    }
    .card {
    width: 100%;
    max-width: unset;
    /* height: 100vh; */
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    margin: unset;
    justify-content: center;
    }
    .securityimg > img {
      height: 40px;
    }
    .btn--reload {
      width: 40px;
      height: 40px;
    }
}