@charset "utf-8";

body.modujang-agree-page {
    background: #2e90d1;
}

.modujang-v2-agree {
    --agree-header-height: clamp(52px, 14.36vw, 70px);
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 0;
}

.modujang-agree-header {
    height: var(--agree-header-height);
}

.modujang-agree-header .btn-back {
    width: var(--agree-header-height);
    height: var(--agree-header-height);
}

.modujang-agree-header .btn-back img {
    width: clamp(8px, 2.05vw, 11px);
}

.modujang-agree-header .btn-back,
.modujang-v2-agree .btn-arrow {
    cursor: pointer;
}

.agree-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#agreeForm {
    display: block;
}

.modujang-v2-agree .page__agree {
    min-height: calc(100vh - var(--agree-header-height));
    min-height: calc(100dvh - var(--agree-header-height));
    padding-right: clamp(10px, 3.08vw, 18px);
    padding-bottom: clamp(16px, 5.13vw, 28px);
    padding-left: clamp(10px, 3.08vw, 18px);
}

.modujang-v2-agree .page__agree > .page__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - var(--agree-header-height) - clamp(16px, 5.13vw, 28px));
    min-height: calc(100dvh - var(--agree-header-height) - clamp(16px, 5.13vw, 28px));
    padding: clamp(28px, 8.2vw, 42px) clamp(20px, 6.15vw, 34px);
    border-radius: clamp(18px, 5.13vw, 26px);
}

.modujang-v2-agree .page__agree > .page__inner::after {
    border-radius: clamp(18px, 5.13vw, 26px);
}

.modujang-v2-agree .img-title-wrap {
    flex: 0 0 auto;
    top: clamp(-28px, -5.9vw, -21px);
    margin-bottom: clamp(-24px, -5.13vw, -18px);
}

.modujang-v2-agree .img-title {
    width: clamp(250px, 69.75vw, 340px);
    height: auto;
    max-height: none;
}

.modujang-v2-agree .page__agree h2 {
    flex: 0 0 auto;
    padding-bottom: clamp(18px, 5.13vw, 28px);
    font-size: clamp(16.5px, 4.62vw, 22px);
}

.modujang-v2-agree .page__agree .pinkbox {
    padding: clamp(14px, 4.1vw, 20px) clamp(14px, 4.62vw, 22px);
    border-radius: clamp(14px, 4.1vw, 20px);
}

.modujang-v2-agree .page__agree .flexline {
    min-width: 0;
    gap: clamp(7px, 2.05vw, 10px);
    padding-right: clamp(23px, 6.67vw, 34px);
    cursor: pointer;
}

.modujang-v2-agree .page__agree .flexline.all {
    align-items: center;
    padding-right: clamp(14px, 4.62vw, 22px);
}

.modujang-v2-agree .page__agree .flexline.all b {
    font-size: clamp(15px, 4.1vw, 19px);
}

.modujang-v2-agree .page__agree .flexline > span:not(.checkbox),
.modujang-v2-agree .page__agree .flexline-textbox > span:first-child {
    font-size: clamp(13px, 3.59vw, 17px);
}

.modujang-v2-agree .page__agree .checkbox i,
.modujang-v2-agree .page__agree .flexline.all i {
    width: clamp(16px, 4.62vw, 22px);
    height: clamp(16px, 4.62vw, 22px);
}

.modujang-v2-agree .page__agree .flexline-wrap {
    margin-bottom: clamp(10px, 3.08vw, 16px);
}

.modujang-v2-agree .page__agree .flexline > span:last-child,
.modujang-v2-agree .page__agree .flexline-textbox {
    min-width: 0;
    white-space: normal;
}

.modujang-v2-agree .page__agree .flexline > span:not(.checkbox):not(.flexline-textbox) {
    white-space: normal;
    text-align: left;
}

.modujang-v2-agree .page__agree .btn-arrow {
    padding: 0;
    border: 0;
    background: transparent;
}

.modujang-v2-agree .agreement-marketing-row {
    align-items: flex-start;
}

.modujang-v2-agree .agreement-marketing-row .btn-arrow {
    top: clamp(17px, 4.87vw, 24px);
}

.modujang-v2-agree .agreement-description {
    display: block;
    padding-top: clamp(4px, 1.28vw, 7px);
    padding-right: clamp(4px, 1.28vw, 7px);
    color: var(--main-800);
    font-size: clamp(11px, 3.08vw, 14px);
    font-weight: 400;
    line-height: 1.4;
}

.agree-actions-spacer {
    flex: 1 1 clamp(70px, 20.51vw, 82px);
    min-height: clamp(70px, 20.51vw, 82px);
}

.modujang-v2-agree #agreeBtn {
    flex: 0 0 auto;
    height: clamp(44px, 11.54vw, 56px);
    margin-top: clamp(17px, 5.13vw, 26px);
    border-radius: clamp(14px, 4.1vw, 20px);
    font-size: clamp(17px, 4.62vw, 22px);
}

.modujang-v2-agree #agreeBtn:disabled {
    border-color: #b8c2cb;
    background: #d6dde3;
    box-shadow: none;
    color: #7b858e;
    cursor: not-allowed;
}

.modujang-v2-agree #agreeBtn[aria-busy="true"] {
    cursor: wait;
    opacity: 0.78;
}

.modujang-v2-agree .agreement-detail {
    background: url(../img/bg_login.jpg) center / cover no-repeat;
}

body.agreement-detail-open > .modujang-v2-agree > #agreeForm {
    visibility: hidden;
}

.modujang-v2-agree .agreement-detail__page {
    min-height: 100%;
}

.modujang-v2-agree .agreement-detail__page > .page__inner {
    min-height: 0;
}

.modujang-v2-agree .agreement-detail__body {
    padding: clamp(16px, 5.13vw, 26px);
    border-radius: clamp(14px, 4.1vw, 20px);
}

.modujang-v2-agree .agreement-terms h3,
.modujang-v2-agree .agreement-terms p,
.modujang-v2-agree .agreement-terms li {
    font-size: clamp(13px, 3.59vw, 17px);
}

.modujang-v2-agree .agreement-detail__page .btn-common01 {
    height: clamp(44px, 11.54vw, 56px);
    margin-top: clamp(17px, 5.64vw, 29px);
    border-radius: clamp(14px, 4.1vw, 20px);
    font-size: clamp(17px, 4.62vw, 22px);
}

.modujang-v2-agree .agreement-terms p + p {
    margin-top: 14px;
}

.modujang-v2-agree .agreement-empty,
.modujang-v2-agree .agreement-optional-note {
    color: var(--gray-700);
}

@media (max-width: 374px) {
    .modujang-v2-agree .page__agree > .page__inner {
        padding-right: 20px;
        padding-left: 20px;
    }

}

@media (max-height: 740px) {
    .modujang-v2-agree .page__agree > .page__inner {
        padding-top: 28px;
        padding-bottom: 26px;
    }

    .agree-actions-spacer {
        min-height: 30px;
    }
}

/* 동의 상세 본문 안의 표·목록 (개인정보 수집·이용 동의 고지문 등, QA #118) */
.modujang-v2-agree .agreement-terms ul { margin: 4px 0 10px; padding-left: 18px; list-style: disc; }
.modujang-v2-agree .agreement-terms .md-table { width: 100%; margin: 8px 0 12px; border-collapse: collapse; font-size: clamp(11px, 3.08vw, 14px); line-height: 1.5; }
.modujang-v2-agree .agreement-terms .md-table th,
.modujang-v2-agree .agreement-terms .md-table td { padding: 6px 8px; border: 1px solid #d5e3f0; text-align: left; vertical-align: top; word-break: keep-all; }
.modujang-v2-agree .agreement-terms .md-table th { background: #eef4fa; font-weight: 700; white-space: nowrap; }