@charset "utf-8";
/* ===== sub04 (문의하기) page styles ===== */

/* FONT:AUTO econ01 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.econ01__inner {
    font-family: var(--font-pretendard);
}

.econ01__title {
    font-size: var(--titleXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
}

.econ01__title-lead {
    color: #000000;
}

.econ01__title-point {
    color: #3b02f8;
}

.econ01__desc {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}

.econ01__desc-text {
    font-weight: 300;
}

.econ01__desc-strong {
    font-weight: 700;
}

.econ01__desc-tail {
    font-weight: 300;
}

.econ01__cards {
    color: #000000;
}

.econ01__card-title {
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
}

.econ01__card-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
}
/* /FONT:AUTO econ01 */

/* IMG:AUTO econ01 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.econ01__float.econ01__float--heart {
    width: calc(var(--px)*89);
    aspect-ratio: 89 / 96;
}

.econ01__float.econ01__float--smile {
    width: calc(var(--px)*78);
    aspect-ratio: 78 / 78;
}
/* /IMG:AUTO econ01 */

.econ01 {
    position: relative;
    padding-bottom: calc(var(--px)*95);
    background: #d4dfff url(/images/econ01_bg.webp) no-repeat center center / cover;
}

.econ01__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: calc(var(--px)*874);
    margin: calc(var(--px)*126) auto 0;
}

.econ01__title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.econ01__desc {
    margin-top: calc(var(--px)*20);
    text-align: center;
}

.econ01__cards {
    display: flex;
    flex-direction: column;
    gap: calc(var(--px)*23);
    margin-top: calc(var(--px)*54);
    width: 100%;
}

.econ01__card-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: calc(var(--px)*22);
}

.econ01__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--px)*13);
    width: calc(var(--px)*426);
    height: calc(var(--px)*201);
    border-radius: calc(var(--px)*30);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #ffffff;
    text-align: center;
    box-sizing: border-box;
}

.econ01__float {
    position: absolute;
    pointer-events: none;

    & img {
        display: block;
    }
}

.econ01__float[data-float="heart"] {
    left: calc(var(--px)*1361);
    top: calc(var(--px)*392);
}

.econ01__float[data-float="smile"] {
    left: calc(var(--px)*457);
    top: calc(var(--px)*681);
}

/* FONT:AUTO econ02 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.econ02__head {
    font-family: var(--font-pretendard);
}

.econ02__title {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
    text-align: center;
}

.econ02__title-lead {
    color: #ffffff;
}

.econ02__title-point {
    color: #18ebd4;
}

.econ02__title-tail {
    color: #ffffff;
}

.econ02__desc {
    font-weight: 300;
    color: #ffffff;
}

.econ02__desc-lead {
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 1.27;
}

.econ02__desc-sub {
    font-size: var(--bodyM);
    letter-spacing: -0.05em;
    line-height: 1.75;
}

.econ02__form-notice {
    line-height: 1.5;
}

.econ02__notice-mark {
    font-family: var(--font-suit);
    font-size: var(--bodyL);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #0d9c8c;
}

.econ02__notice-text {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.05em;
    color: #000000;
}

.econ02__required-mark {
    font-family: var(--font-suit);
    font-size: var(--bodyL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #0d9c8c;
}

.econ02__field-name {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}

.econ02__course-label {
    font-family: var(--font-suit);
    font-size: var(--bodyL);
    font-weight: 600;
    letter-spacing: -0.07em;
    line-height: 1.2;
    color: #000000;
}

.econ02__field {
    font-family: var(--font-pretendard);
    line-height: 1.5;
}

.econ02__purpose-label {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #000000;
}

.econ02__purpose-note {
    font-size: var(--bodyS);
    font-weight: 300;
    letter-spacing: -0.05em;
    color: #818181;
}

.econ02__purpose-chips {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
}

.econ02__purpose-chip.econ02__purpose-chip--active {
    color: #0d9c8c;
}

.econ02__purpose-chip {
    color: #818181;
}

.econ02__purpose-chip-row {
    color: #818181;
}

.econ02__agree-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}

.econ02__submit {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO econ02 */

/* IMG:AUTO econ02 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.econ02__cursor {
    width: calc(var(--px)*125);
    aspect-ratio: 125 / 140;
}
/* /IMG:AUTO econ02 */

.econ02 {
    position: relative;
    background: #000000 url(/images/econ02_bg.webp) no-repeat center center / cover;
}

.econ02__inner {
    max-width: calc(var(--px)*891);
    margin: calc(var(--px)*145) auto calc(var(--px)*120);
}

.econ02__head {
    gap: calc(var(--px)*15);
}

.econ02__desc {
    gap: calc(var(--px)*4);
}

.econ02__form-group {
    display: contents;
}

.econ02__form {
    margin-top: calc(var(--px)*29);
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: calc(var(--px)*30);
    box-sizing: border-box;
}

.econ02__form-inner {
    /* 좌 115 는 카드 border-box(507) 기준값 — form-inner 는 이미 카드 border 1px 안쪽(508)에서 시작하므로 114 로 -1 보정해야 내용 블록이 622 에서 시작한다(우측 127 은 border 반대편이라 보정 불필요, 508+889-127=1270 로 이미 일치). */
    padding: 0 calc(var(--px)*127) 0 calc(var(--px)*114);
    box-sizing: border-box;
}

/* 행 높이는 FONT:AUTO 의 line-height(1.5) 위 padding + border-bottom 1px 를 합쳐 정본과 맞춘다(구분선 y 470/529/589/648/708/826/890 검산). border 는 auto 높이 박스에 항상 추가되므로 padding 합에서 1px 를 미리 뺐다. */
.econ02__form-notice {
    gap: calc(var(--px)*4);
    padding: calc(var(--px)*56) 0 calc(var(--px)*5);
    border-bottom: 1px solid #dadada;
}

.econ02__field {
    /* 행 높이 합 31 은 유지, 위/아래 배분만 -2/+2 로 옮겨 내용(label+input)을 2px 위로 올린다 */
    padding: calc(var(--px)*14) 0 calc(var(--px)*17) calc(var(--px)*20);
    border-bottom: 1px solid #dadada;
    box-sizing: border-box;
}

.econ02__form-inner > div.econ02__field:nth-of-type(2),
.econ02__form-inner > div.econ02__field:nth-of-type(4) {
    padding-top: calc(var(--px)*14.5);
    padding-bottom: calc(var(--px)*17.5);
}

.econ02__form-inner > div.econ02__field:nth-of-type(6) {
    padding-top: calc(var(--px)*16.5);
    padding-bottom: calc(var(--px)*19.5);
}

.econ02__field--top {
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: calc(var(--px)*17);
}

/* mark 는 flow 자식(hanging marker) 유지 — 점유 폭을 12px 로 고정해 글리프 실폭(9.22px, 8px 아님)에 뒤 형제(field-label/input) 위치가 좌우되지 않게 한다. margin-left:-12 로 630 에서 시작, width:12 로 642 에서 끝나 다음 형제가 항상 642 에서 시작. */
.econ02__field > .econ02__required-mark {
    display: inline-block;
    width: calc(var(--px)*12);
    margin-left: calc(var(--px)*-12);
    margin-right: 0;
}

.econ02__field-label {
    width: calc(var(--px)*179);
    flex-shrink: 0;
    gap: calc(var(--px)*9);
}

.econ02__field--top .econ02__field-label {
    justify-content: flex-start;
    padding-top: calc(var(--px)*22);
}

.econ02__field-input {
    flex: 1;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    outline: none;
    resize: none;
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.05em;
    color: #000000;
}

.econ02__field-input::placeholder {
    color: #818181;
}

.econ02__course-options {
    flex: 1;
    gap: calc(var(--px)*40);
}

.econ02__course-option {
    gap: calc(var(--px)*9);
    cursor: pointer;
}

.econ02__course-radio,
.econ02__agree-check {
    appearance: none;
    width: calc(var(--px)*23);
    height: calc(var(--px)*23);
    margin: 0;
    border: 1px solid #000000;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

/* 안쪽 점을 별도 박스(::after)로 띄우면 부모와 점이 각각 서브픽셀 반올림돼 점이 한쪽으로 쏠린다(실측 좌3/우4px).
   부모 자신을 칠하고 흰 링을 inset 으로 파면 같은 박스라 편향이 생길 수 없다. 링 두께 = (23−15)/2 −border1 */
.econ02__course-radio:checked,
.econ02__agree-check:checked {
    background: #0d9c8c;
    box-shadow: inset 0 0 0 calc(var(--px)*4 - 1px) #ffffff;
}

.econ02__purpose-chips {
    gap: calc(var(--px)*11);
    margin-top: calc(var(--px)*19);
}

.econ02__purpose-chip-row:nth-of-type(1) > .econ02__purpose-chip:nth-child(2) {
    margin-left: calc(var(--px)*10);
}

.econ02__purpose-chip-row:nth-of-type(1) > .econ02__purpose-chip:nth-child(3) {
    margin-left: calc(var(--px)*9);
}

.econ02__purpose-chip-row:nth-of-type(1) > .econ02__purpose-chip:nth-child(4) {
    margin-left: calc(var(--px)*11);
}

.econ02__purpose-chip-row:nth-of-type(2) > .econ02__purpose-chip:nth-child(2) {
    margin-left: calc(var(--px)*13);
}

.econ02__purpose-chip {
    min-width: calc(var(--px)*80);
    height: calc(var(--px)*35);
    padding: 0 calc(var(--px)*21);
    border: 1px solid #dddddd;
    border-radius: calc(var(--px)*8);
    box-sizing: border-box;
    line-height: 1;
    cursor: pointer;
}

.econ02__purpose-chip--active {
    border-color: #0d9c8c;
}

.econ02__agree {
    gap: calc(var(--px)*9);
    padding: calc(var(--px)*8) 0 calc(var(--px)*53);
}

.econ02__agree-label {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
}

.aura:has(> .econ02__submit) {
    margin-top: calc(var(--px)*26);
    --aura: 24 235 212;
}

.econ02__submit {
    width: calc(var(--px)*264);
    height: calc(var(--px)*71);
    border: none;
    border-radius: calc(var(--px)*36);
    background: #18ebd4;
    box-sizing: border-box;
    cursor: pointer;
}

.econ02__cursor {
    position: absolute;
    left: calc(var(--px)*1361);
    top: calc(var(--px)*745);
    pointer-events: none;

    & img {
        display: block;
    }
}

@media (max-width: 599px) {
    .econ01 {
        padding-bottom: 14vw;
    }

    .econ01__inner {
        max-width: 100%;
        padding: 0 5vw;
        margin: 14vw auto 0;
        box-sizing: border-box;
    }

    .econ01__desc {
        width: 100%;
        margin-top: 4vw;
        word-break: keep-all;
    }

    .econ01__cards {
        gap: 4vw;
        margin-top: 9vw;
    }

    .econ01__card-row {
        flex-direction: column;
        gap: 4vw;
    }

    .econ01__card {
        width: 100%;
        height: auto;
        gap: 3vw;
        padding: 7vw 5vw;
        border-radius: 6vw;
    }

    .econ01__float.econ01__float--heart {
        width: 14vw;
    }

    .econ01__float.econ01__float--smile {
        width: 12vw;
    }

    .econ01__float[data-float="heart"] {
        left: auto;
        right: 2vw;
        top: 58vw;
    }

    .econ01__float[data-float="smile"] {
        left: 2vw;
        top: 138vw;
    }

    .econ02__inner {
        max-width: 100%;
        padding: 0 5vw;
        margin: 16vw auto 14vw;
        box-sizing: border-box;
    }

    .econ02__head {
        gap: 3vw;
    }

    .econ02__desc {
        gap: 1vw;
    }

    .econ02__form {
        margin-top: 6vw;
        border-radius: 6vw;
    }

    .econ02__form-inner {
        padding: 0 5vw;
    }

    .econ02__form-notice {
        gap: 0.8vw;
        padding: 5vw 0 1.5vw;
    }

    .econ02__field {
        padding: 3vw 0 3vw 4vw;
    }

    /* PC 의 행별 ±0.5px 미세 배분은 모바일 행 높이에서 의미 없음 — 구체성이 높아 명시 통일 */
    .econ02__form-inner > div.econ02__field:nth-of-type(2),
    .econ02__form-inner > div.econ02__field:nth-of-type(4),
    .econ02__form-inner > div.econ02__field:nth-of-type(6) {
        padding-top: 3vw;
        padding-bottom: 3vw;
    }

    .econ02__field--top {
        padding-top: 0;
        padding-bottom: 3vw;
    }

    .econ02__field > .econ02__required-mark {
        width: 3vw;
        margin-left: -3vw;
    }

    .econ02__field-label {
        width: 28vw;
        gap: 1.5vw;
    }

    .econ02__field--top .econ02__field-label {
        padding-top: 4vw;
    }

    .econ02__course-options {
        gap: 6vw;
    }

    .econ02__course-option {
        gap: 2vw;
    }

    .econ02__course-radio,
    .econ02__agree-check {
        width: 5vw;
        height: 5vw;
    }

    .econ02__course-radio:checked,
    .econ02__agree-check:checked {
        box-shadow: inset 0 0 0 calc(0.9vw - 1px) #ffffff;
    }

    /* PC 2행 고정 → 모바일은 남은 폭에서 자연 wrap. row 를 contents 로 풀어 chip 6개가 한 flex 컨텍스트에 들어간다 */
    .econ02__purpose-chip-row {
        display: contents;
    }

    .econ02__purpose-chips {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2vw;
        margin-top: 3vw;
    }

    .econ02__purpose-chip-row:nth-of-type(1) > .econ02__purpose-chip:nth-child(2),
    .econ02__purpose-chip-row:nth-of-type(1) > .econ02__purpose-chip:nth-child(3),
    .econ02__purpose-chip-row:nth-of-type(1) > .econ02__purpose-chip:nth-child(4),
    .econ02__purpose-chip-row:nth-of-type(2) > .econ02__purpose-chip:nth-child(2) {
        margin-left: 0;
    }

    .econ02__purpose-chip {
        min-width: 16vw;
        height: 8vw;
        padding: 0 3vw;
        border-radius: 2vw;
    }

    .econ02__agree {
        gap: 2vw;
        padding: 2vw 0 5vw;
    }

    .aura:has(> .econ02__submit) {
        margin-top: 5vw;
    }

    .econ02__submit {
        width: 50vw;
        height: 13vw;
        border-radius: 7vw;
    }

    .econ02__cursor {
        left: auto;
        top: auto;
        right: 2vw;
        bottom: 10vw;
        width: 22vw;
    }
}