* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/************ 공통 **************/
body,
html {
    height: 100%;
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.container {
    display: flex;
    height: 100vh;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.logo {
    position: absolute;
    top: 2.5%;
    left: 1.5%;
}

.logo img {
    width: 150px;
    /* 원하는 너비 */
    height: auto;
    /* 자동으로 비율을 유지하며 높이 조정 */
}


/************ 좌측 **************/
.left {
    width: 50%;
    display: flex;
}

.tab {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.active {
    background-color: #007bff;
    color: white;
}



/************ 우측 **************/
.right {
    position: relative;
    width: 50%;
}

.right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-group-lg>.btn,
.btn-lg {
    --bs-btn-padding-y: 1rem;
}

/* ✅ 텍스트 위치 조정 */
.image-overlay-text {
    position: absolute;
    top: 50%;
    left: 40px; /* 🔧 필요 시 여백 조절 */
    transform: translateY(-50%);
    color: #000;
    font-size: 2.5rem;
    font-weight: 600;
    z-index: 10;
    text-align: left; /* ✅ 왼쪽 정렬 */
    line-height: 1.4;
    white-space: normal;
    max-width: 90%; /* 긴 문장 대응 */
    margin-left: 5rem;
}

/* 강조 색상 */
.image-overlay-text .highlight {
    color: #EB5648;
}


/******************** 로그인 폼 ***************/

.login-form {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* 중요: 이 요소가 기준점이 됩니다 */
}

.login-form form {
    width: 500px;
}

.login-form .title {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.login-form .form-label {
    font-weight: 600;
    margin-bottom: .5rem;
}

.login-form label {
    display: inline-block;
}

.login-form .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #F2F2F2;
    background-clip: padding-box;
    border: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-form .form-control-lg {
    min-height: calc(1.5em + 2rem + 2px);
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .5rem;
}

.login-form .form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}

.login-form .form-check-input[type=checkbox] {
    border-radius: .25em;
}

.login-form .form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}

.login-form .form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .1em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}

.login-form .form-check-input:checked[type=checkbox] {
    background-image: url("data: image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' ><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6' /></svg>");
}

.login-form .form-check-input:checked {
    background-color: #EB5648;
    border-color: #EB5648;
}

.login-form .form-check-input[type=checkbox] {
    border-radius: .1em;
}

.login-form .btn {
    background-color: #EB5648;
    color: #fff;
}

.login-form button,
.login-form input,
.login-form optgroup,
.login-form select,
.login-form textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}



/******************** 로그인 버튼 ***************/

.login-form .d-grid {
    display: grid !important;
}

.login-form .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: #212529;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    min-width: 100px;
}

.login-form .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #EB5648;
    --bs-btn-border-color: #EB5648;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #D64B3E;
    --bs-btn-hover-border-color: #D64B3E;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #D64B3E;
    --bs-btn-active-border-color: #D64B3E;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #EB5648;
    --bs-btn-disabled-border-color: #EB5648;
}

.login-form .btn-group-lg>.btn,
.login-form .btn-lg {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: 0.5rem;
}

.login-form .btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/************ 라디오 버튼 ************/
.login-form .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.login-form .btn-outline-primary {
    --bs-btn-color: #EB5648;
    --bs-btn-border-color: #EB5648;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #EB5648;
    --bs-btn-hover-border-color: #EB5648;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #EB5648;
    --bs-btn-active-border-color: #EB5648;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #EB5648;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #EB5648;
    --bs-gradient: none;
}

.login-form .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.login-form .bd-example>.btn, .bd-example>.btn-group {
    margin: .25rem .125rem;
}