/* =====================================================================
   MDSAFETEC 인증(로그인) 페이지 전용 스타일 - 미도 CI 색감
   - 좌측 브랜드 패널(그라데이션) + 우측 로그인 카드 2단 구성
   - 폼 기능(Vuexy form-validation/password-toggle)은 유지, 색/레이아웃만 커스텀
   - 정적 파일이라 색감/간격 조정 시 재빌드 없이 교체 가능
   ===================================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    --md-ginger: #0f4c81;
    --md-ginger-600: #0b3a64;
    --md-ginger-300: #3d6fa0;
    --md-black: #333333;
    --md-brown: #663333;
    --md-ink: #2a2320;
    --md-line: #e6ddd9;
}

/* 포커스 시 브라우저가 입력창을 보이려 스크롤하며 세로 스크롤바가 생겼다 사라졌다 하면
   좌우 폭이 바뀌어 중앙정렬 레이아웃이 밀림(=포커스 인/아웃 시 움직임).
   스크롤바 공간을 항상 예약하고 가로 스크롤은 막아 밀림을 제거한다. */
html { scrollbar-gutter: stable; overflow-x: hidden; }

body.md-auth-body {
    margin: 0;
    font-family: "Pretendard", "Pretendard Variable", -apple-system, "Apple SD Gothic Neo",
        "Malgun Gothic", "Public Sans", sans-serif;
    color: var(--md-black);
    background: #fff;
}

/* 전체 2단 레이아웃 */
.md-auth {
    display: flex;
    min-height: 100vh;
}

/* ── 좌측 브랜드 패널 ── */
.md-auth-brand {
    flex: 1 1 50%;
    position: relative;
    color: #fff;
    padding: 56px;
    background: radial-gradient(900px 500px at 85% -10%, rgba(15, 76, 129, .35), transparent 60%),
        linear-gradient(160deg, var(--md-ink) 0%, var(--md-brown) 100%);
    overflow: hidden;
    isolation: isolate;
}
.md-auth-brand .glow {
    position: absolute; width: 360px; height: 360px; border-radius: 50%;
    filter: blur(90px); opacity: .5; z-index: -1;
}
.md-auth-brand .glow.one { background: var(--md-ginger); top: 8%; right: 4%; }
.md-auth-brand .glow.two { background: var(--md-brown); bottom: -6%; left: -6%; opacity: .7; }

.md-auth-brand .brand-logo {
    font-size: 30px; font-weight: 900; letter-spacing: -.02em;
}
.md-auth-brand .brand-logo .hl {
    background: linear-gradient(120deg, var(--md-ginger), var(--md-ginger-300));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 로고는 위, 헤드라인 블록은 남은 공간 세로 중앙 */
.md-auth-brand .brand-body { margin: auto 0; }
.md-auth-brand .brand-headline {
    font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em;
}
.md-auth-brand .brand-headline .hl { color: var(--md-ginger-300); }
.md-auth-brand .brand-sub { color: rgba(255, 255, 255, .8); margin-top: 14px; line-height: 1.7; max-width: 440px; }
.md-auth-brand .brand-list { list-style: none; padding: 0; margin: 28px 0 0; }
.md-auth-brand .brand-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 500; }
.md-auth-brand .brand-list i {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: rgba(255, 255, 255, .14); color: var(--md-ginger-300); font-size: 16px;
}
.md-auth-brand .brand-inner { display: flex; flex-direction: column; height: 100%; }

/* ── 우측 폼 패널 ── */
.md-auth-panel {
    flex: 1 1 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.md-auth-card { width: 100%; max-width: 400px; }
.md-auth-card .form-logo {
    font-size: 24px; font-weight: 900; letter-spacing: -.02em; text-align: center; margin-bottom: 28px;
}
.md-auth-card .form-logo .hl { color: var(--md-ginger); }
.md-auth-card h3 { font-weight: 800; font-size: 24px; margin: 0 0 6px; }
.md-auth-card .sub { color: #8a817c; font-size: 14.5px; margin: 0 0 26px; }

/* 폼 요소 색감 보정 (Vuexy form-control 위에 덮어쓰기) */
.md-auth .form-label { font-weight: 600; font-size: 14px; color: var(--md-black); }

/* 비밀번호 인풋: 사용자 계정과 동일한 일반 .form-control 을 쓰고,
   눈 아이콘은 입력창 위에 겹치는 오버레이 버튼으로 배치(구조 변화 없음 → 테두리 문제 없음). */
.md-pw-wrap { position: relative; }
.md-pw-wrap .form-control { padding-right: 2.6rem; }   /* 아이콘 자리 확보(텍스트 안 가림) */
.md-pw-toggle {
    position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: #8a817c; font-size: 1.15rem;
}
.md-pw-toggle:hover { color: var(--md-ginger); }
.md-auth .form-control {
    border-radius: 10px; padding: .7rem .9rem;
    border: 1px solid var(--md-line); background: #fafafa;
}
/* focus 시 박스 크기 변화 없이 강조만.
   - 테마는 border 를 2px 로 키우므로 1px 로 고정(크기 유지).
   - 기존 box-shadow 0 0 0 3px 링이 입력창 바깥으로 퍼져 '살짝 커졌다' 처럼 보이던 문제 →
     box-shadow 제거. 강조는 테두리 색(파랑)+배경(흰색)만으로 처리해 크기 변화가 전혀 없게 함. */
.md-auth .form-control:focus {
    border: 1px solid var(--md-ginger);
    box-shadow: none;
    background: #fff;
    /* 비밀번호 칸(.input-group) focus 시 테마가 padding 을 calc(0.543rem-1px)로 줄여
       입력창 높이가 45→38px 로 축소 → 카드 재정렬로 전체가 흔들림.
       focus 에서도 padding 을 기본값으로 고정해 높이 변화를 제거. */
    padding: .7rem .9rem;
}
.md-auth .input-group-merge .input-group-text {
    background: #fafafa; border-color: var(--md-line); color: #8a817c;
    border-radius: 0 10px 10px 0;   /* 입력창(10px)과 모서리 반경 맞춤 */
}
/* input-group(비밀번호) focus 시 테마가 그룹 전체에 box-shadow 링(0 0 0 1px)을 추가하는데,
   입력창 자체 테두리와 반경(10px vs 6px)이 달라 왼쪽 모서리에 이중선처럼 보임.
   → 그룹 box-shadow 링 제거(입력창+아이콘 테두리만으로 충분). */
.md-auth .input-group:focus-within { box-shadow: none !important; }
/* focus 시 입력창 배경은 흰색으로 바뀌는데 아이콘(눈) 배경이 회색(#fafafa) 그대로면
   그 경계가 세로 구분선처럼 보임 → 아이콘 배경도 흰색으로 맞춰 이음매 제거 */
.md-auth .input-group-merge .form-control:focus + .input-group-text,
.md-auth .input-group:focus-within .input-group-text {
    border-color: var(--md-ginger);
    background: #fff;
}

/* 검증(FormValidation/Bootstrap) 시 입력창이 흔들리는 문제 방지
   - Bootstrap .is-invalid/.is-valid 는 padding-right 를 늘리고 우측 아이콘(background-image)을 넣어
     텍스트가 좌우로 밀림(=흔들림). padding 을 기본값(.9rem)으로 고정하고 배경 아이콘 제거.
   - FormValidation 이 붙이는 우측 체크/엑스 아이콘(.fv-plugins-icon)도 숨김(에러 메시지로 충분). */
.md-auth .form-control.is-valid,
.md-auth .form-control.is-invalid {
    border-width: 1px !important;   /* 검증 상태에서도 테두리 2px 로 커지지 않게 고정 */
    padding-right: .9rem !important;
    background-image: none !important;
}
.md-auth .fv-plugins-icon { display: none !important; }
.md-auth a { color: var(--md-ginger); text-decoration: none; font-weight: 600; }
.md-auth a:hover { color: var(--md-ginger-600); }
.md-auth .form-check-input:checked { background-color: var(--md-ginger); border-color: var(--md-ginger); }
.md-auth .form-check-input:focus { border-color: var(--md-ginger); box-shadow: 0 0 0 .2rem rgba(15, 76, 129, .2); }

.md-auth .btn-primary {
    background: var(--md-ginger); border-color: var(--md-ginger);
    font-weight: 700; padding: .7rem 1rem; border-radius: 10px;
    box-shadow: 0 12px 24px -12px rgba(15, 76, 129, .7);
}
.md-auth .btn-primary:hover,
.md-auth .btn-primary:focus { background: var(--md-ginger-600); border-color: var(--md-ginger-600); }

/* 에러 알림 */
.md-auth .alert-error {
    background-color: #fdeceb; color: #d63a30; border: 1px solid #f6cfcb;
    padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: 14px;
}

/* 모바일: 브랜드 패널 숨기고 폼만 중앙 */
@media (max-width: 991.98px) {
    .md-auth-brand { display: none; }
    .md-auth-panel { flex: 1 1 100%; }
}