/**
 * form input text 스타일 정의
 */
.form-input:has(input[type="text"]) {
    position: relative;
}

.form-input:has(input[type="text"]) > input[type="text"],
.form-input:has(input[type="text"]) > label {
    top: 0; left: 0;
    padding: 1px 5px;
    border-radius: 4px;
}
.form-input:has(input[type="text"]) > input[type="text"] {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 1px solid #ccc;
}
.form-input:has(input[type="text"]) > label {
    position: absolute;
    z-index: 2;
    font-size: 1rem;
    color: gray;
    transition: all 0.2s ease;
}

.form-input:has(input[type="text"]:focus) > label,
.form-input:has(input[type="text"]:not(:placeholder-shown)) > label {
    transform: translate(10%, -100%);
    left: 3px;
    
    padding: 0px 2px;
    font-size: 0.75rem;

    background-color: white;
    color: #007bff;
}
.form-input:has(input[type="text"]:focus) > input[type="text"],
.form-input:has(input[type="text"]:not(:placeholder-shown)) > input[type="text"] {
    border-color: #007bff;
}