/* Form 관련 element 공통 style */
/* Main Container */
.app-container:has(.form-container) {padding: 10rem 0; background-color: var(--grey-background);}

/* Form Container */
.form-container {
    width: 100%;
    max-width: 50rem;
    margin: 0 auto;
    padding: 6rem 4rem;
    background-color: #fff;
    border-radius: 2rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0.4rem 1.2rem;
}

/* Form Head */
.form-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.form-head.center {
    justify-content: center;
}

/* Form title */
.form-title {
    color: var(--grey-dark);
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
}

/* Form */
.form {
    display: flex;
    flex-direction: column;
}

/* Form Input */
.form-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.form-input-row:last-of-type {
    margin-bottom: 0px;
}

.form-input-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-input-title {
    color: var(--grey);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.25;
}

.form-input-title.optional::after {
    content: " (선택)";
}

.form-input-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.form-input-divider {
    font-size: 1.6rem;
}

.form-input-wrapper {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    height: 5rem;
    border: 0.1rem solid var(--grey-light);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.3s ease-out;
}

.form-input-wrapper.flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

.form-input-wrapper:has(select)::before {
    content: "\f078";
    position: absolute;
    top: 50%;
    right: 0.6rem;
    font-family: "Font Awesome 5 Pro";
    font-size: 1.2rem;
    transform: translateY(-50%);
    z-index: -1;
}

.form-input-wrapper:not(:has(input:read-only)):not(:has(.readonly)):not(:has(.error)):focus-within {
    border-color: var(--main);
}

.form-input-wrapper:has(.error) {
    border-color: var(--negative);
}

.form-input {
    height: 100%;
    width: 100%;
    padding: 0 1rem;
    font-size: 1.6rem;
    border: none;
    outline: none;
}

.form-input-wrapper.flex .form-input {
    flex-grow: 1;
    width: fit-content;
    padding: 0;
}

.form-input.center {
    text-align: center;
}

.form-input.end {
    text-align: end;
}

.form-input.semi-bold {
    font-weight: 500;
}

.form-input.bold {
    font-weight: bold;
}

.form-input::placeholder {
    color: var(--grey-placeholder);
}

.form-input-wrapper input:read-only {
    background-color: var(--grey-background);
}

.form-input-wrapper select {
    padding-right: 2.4rem;
    background-image: url(/resources/img/common/select_chevron.svg);
    background-size: auto 30%;
    background-position: center right 0.8rem;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-input-wrapper select.readonly {
    background-color: var(--grey-background);
    pointer-events: none;
}

.form-input-description {
    color: var(--grey);
    font-size: 1.2rem;
}

.form-input-suffix {
    font-size: 1.4rem;
    font-weight: 500;
}

/* Radio / Checkbox / File */
input[type="radio"],
input[type="checkbox"],
input[type="file"] {
    /* display: none; */
    position: absolute;
    height: 0px;
    width: 0px;
    opacity: 0;
    z-index: -1000;
}

/* Label */
label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    color: var(--grey-dark);
    font-size: 1.6rem;
    font-weight: 300;
}

/* Radio */
input[type="radio"]+label .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.6rem;
    width: 1.6rem;
    background-color: transparent;
    border: 0.1rem solid var(--grey-light);
    border-radius: 50%;
    transition: all 0.3s ease-out;
}

input[type="radio"]:checked+label .icon {
    background-color: var(--main);
    border-color: var(--main);
}

input[type="radio"]+label .icon::before {
    content: "";
    height: 0.6rem;
    width: 0.6rem;
    background-color: transparent;
    border-radius: 50%;
    transition: all 0.3s ease-out;
}

input[type="radio"]:checked+label .icon::before {
    background-color: #fff;
}

/* Checkbox */
input[type="checkbox"]+label .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8rem;
    width: 1.8rem;
    background-color: transparent;
    border: 0.1rem solid var(--grey-light);
    border-radius: 0.4rem;
    transition: all 0.3s ease-out;
}

input[type="checkbox"]:checked+label .icon {
    background-color: var(--main);
    border-color: var(--main);
}

input[type="checkbox"]+label .icon::before {
    content: "\f00c";
    color: transparent;
    font-family: "Font Awesome 5 Pro";
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.3s ease-out;
}

input[type="checkbox"]:checked+label .icon::before {
    color: #fff;
}

input[type="checkbox"].error+label .icon {
    border-color: var(--negative);
}

/* Form Btn */
.form-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    padding: 0px 1.5rem;
    color: #fff;
    background-color: var(--main);
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 1rem;
    transition: color 0.3s ease-out, background-color 0.3s ease-out, filter 0.3s ease-out;
}

.form-btn:disabled {
    color: var(--grey-placeholder);
    background-color: var(--grey-btn-background);
    cursor: default;
}

.form-btn.submit {
    margin-top: 4rem;
}

.form-btn.loading {
    font-size: 0px;
    pointer-events: none;
}

.form-btn.loading::before {
    content: url("/resources/img/common/loading.svg");
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    height: 2.4rem;
    width: 2.4rem;
    translate: -50% -50%;
    animation: loadingAnimation 0.75s infinite linear;
}

/* 이전 / 다음 버튼 */
.signup-cop-btn-box {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: var(--gap-join-form-btn-box, 8px);
    width: 100%;
    padding-top: 4rem;
}

.prev-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    color: var(--grey);
    background-color: var(--grey-btn-background);
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 1rem;
    transition: filter 0.3s ease-out;
}

.prev-btn.submit {
    margin-top: 4rem;
}

.next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    color: #fff;
    background-color: var(--main);
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 1rem;
    transition: filter 0.3s ease-out;

}

/* Hover */
@media (hover: hover) {
    /* Form Input */
    .form-input-wrapper:not(:has(input:read-only)):not(:has(.readonly)):not(:has(.error)):not(:focus-within):hover {
        border-color: var(--grey);
    }
    
    /* Form Btn */
    .form-btn:not(:disabled):hover {
        filter: brightness(0.9);
    }
}

/* Mobile breakpoint (768px) */
@media screen and (max-width: 768px) {
    /* Main Container */
    .app-container:has(.form-container) {padding: 0; background-color: #fff;}

    /* Form Container */
    .form-container {padding: 6rem 2rem; border-radius: 0; box-shadow: none;}
}