@charset "UTF-8";


input[type="checkbox"] + label { position: relative; margin: 0; padding-left: 24px; width: 100%; height: 32px; line-height: 32px; display: block; font-size: 15px}
input[type="checkbox"] + label::before{position: absolute; left: 0; top: 50%; content:""; width: 20px; height: 20px; display: block; border: 1px solid #e7e7e9; border-radius: 5px; transform: translateY(-50%)}
input[type="checkbox"]:checked + label::before{position: absolute; left:0; top: 50%; content: '✔'; line-height: 18px; width: 20px; height: 20px; display: block; font-size: 14px; border: 1px solid #587ec7; color: #587ec7; text-align: center; transform: translateY(-50%);}


.main { min-height: 100%; display: flex; justify-content: center; align-items: center; }

.charge { border-radius: 24px; background: #fff; }
.charge section { padding: 30px; }
.charge section h2 { text-align: center; }
.charge section .item { padding: 5px 0; min-height: 48px; display: flex; justify-content: flex-start; align-items: center; }

.charge dl { margin-top: 24px; }
.charge dl .item { gap : 10px; border-bottom: 1px solid #e3e3e3; }
.charge dl .item .label { font-weight: 500; }
.charge dl dd{ flex: 1; text-align: right; }

.charge ul .label { flex: 1; }
.charge ul button { padding: 0 12px; height: 28px; border-radius: 8px; font-size: 0.9rem; }

.charge .notice { margin-top: 8px; font-size: 0.92rem; color: var(--gray);  }

.charge section .submit-group { margin-top: 20px; }
.charge section .submit-group button { width: 100%; height: 48px; font-size: 1rem; }

.charge input[name="buyer"] { width: 300px; height: 48px;}

.charge-terms { display: flex; flex-direction: column; gap: 10px; word-break: keep-all; }
.charge-terms ul { padding-left: 16px; margin-top: 8px; }
.charge-terms ul li { position: relative; padding-left: 14px; line-height: 1.4; }
.charge-terms ul li::before { position: absolute; left: 0; content: "-"; }

.charge-terms .caption { margin-top: 8px; }
.charge-terms .caption p { position: relative; padding-left: 14px; color: var(--gray); font-size: 0.9em; }
.charge-terms .caption p::before { position: absolute; left: 0; content: "※"; }

.guide { margin-top: 30px; color: #666; }
.guide .list { margin-top: 8px; }
.guide .list li{ position: relative; padding-left: 14px; }
.guide .list li::before { position: absolute; left: 0; content : "•"; }


/* 모바일 */
@media screen and (max-width: 1024px) {


}

/* PC */
@media screen and (min-width: 1025px) {
    .charge-terms { width: 400px; }
}