/* ----------------- input custom -----------------
   스코프: content.php 페이지(<article id="ctt">) 안에서만 적용
   → 게시판/관리자 등 다른 영역의 input 스타일을 오염시키지 않음
   ---------------------------------------------- */

/* select */
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* input general text */
input,
textarea {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    margin: 0;
    padding: 0;
    border: none;

    &:focus {
        outline: none;
    }

    &::placeholder {
        /* color: transparent; */
        opacity: .5;
    }
    &[type="text"] {
        padding: 0.8rem;
        box-sizing: border-box;
    }

    &[type="tel"] {
        padding: 0.8rem;
        box-sizing: border-box;
    }
    &[type="email"] {
        padding: 0.8rem;
        box-sizing: border-box;
    }

    &[type="text"]:focus {
        outline: none;
    }

    &[type="tel"]:focus {
        outline: none;
    }
}

select:focus {
    border: none;
    outline: none;
}

/* radio */
input[type="radio"] {
    appearance: none;
    border-radius: 9rem;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid var(--input-border);
    cursor: pointer;

    &:checked {
        border: 1px solid var(--input-border);
        outline: 1px solid var(--input-stroke);
        outline-offset: -4px;
        background-color: var(--checked-bg);
    }
}
/* checkbox */
input[type="checkbox"] {
    --border-width: 1px;
    --stroke-width: 2px;
    --border-radius: 0.4rem;

    appearance: none;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    border: var(--border-width) solid var(--input-border);
    cursor: pointer;
    background-color: var(--input-bg-color);

    &[type="checkbox"]:checked {
        appearance: none;
        background-color: var(--checked-bg);
        border: var(--border-width) solid var(--input-border);
        outline: var(--stroke-width) solid var(--input-stroke);
        outline-offset: calc(calc(var(--border-width) + var(--stroke-width)) * -1);
        cursor: pointer;
        box-sizing: border-box;
        border-radius: var(--border-radius);
    }
}
@media (max-width: 599px) {
    input {
        font-size: 4.8309vw;
    }
    input[type="text"] {
        /* min-width: 35rem;
        min-height: 8rem; */
        padding: 0.8rem;
        box-sizing: border-box;
    }

    input[type="checkbox"] {
        width: 4.8309vw;
        height: 4.8309vw;
    }

    input[type="radio"] {
        appearance: none;
        border-radius: 9rem;
        width: 4.8309vw;
        height: 4.8309vw;
        border: 1px solid var(--input-border);
    }
    input[type="radio"]:checked {
        border: 1px solid var(--input-border);
        outline: 2px solid var(--input-stroke);
        outline-offset: -3px;
    }
    input[type="checkbox"]:checked {
        border: 1px solid var(--input-border);
        outline: 2px solid var(--input-stroke);
        outline-offset: -3px;
    }
}