/* 로그인·회원가입·출생 연도 입력 화면 전용 스타일 (소개 화면 톤, .au 아래와 비로그인 화면 레이아웃 조정, views/user/authStyle.html 조각으로 로드) */

/* ---- 비로그인 화면 레이아웃 조정 (빈 사이드바·햄버거 숨김, 소개 화면과 같은 방식) ---- */
.main-sidebar,
#sidebar-overlay,
.main-header [data-widget="pushmenu"] {
    display: none !important;
}

/* 본문 영역: 소개 톤 배경, 화면(.au)이 남은 높이를 채우도록 세로 플렉스 */
body .content-wrapper {
    display: flex;
    flex-direction: column;
    background: linear-gradient(140deg, #eef1ff 0%, #f4efff 48%, #e8faf6 100%);
}

/* ---- 공통 ---- */
.au {
    --au-radius: 20px;
    --au-shadow: 0 10px 30px rgba(42, 52, 120, .08);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 본문 영역(.content-wrapper) 남은 높이 채움 : 고정 높이 계산 대신 AdminLTE가 실제 상단 바·푸터 높이로 잡는 본문 최소 높이 기준 (푸터 줄바꿈 시 세로 넘침 방지) */
    flex: 1 0 auto;
    /* 최소 위아래 여백 (세로 가운데 배치라 높이가 남는 화면에서는 보이는 차이 없음, 375px 이상에서 제목·카드가 커지는 로그인 화면도 740 높이에 스크롤 없이 들어가는 값) */
    padding: 16px 0 20px;
    color: var(--c-text);
    font-family: var(--c-font);
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.au *,
.au *::before,
.au *::after {
    box-sizing: border-box;
}

/* 장식용 부드러운 원 (화면 안에서 잘림) */
.au::before,
.au::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.au::before {
    width: 320px;
    height: 320px;
    top: -140px;
    right: -120px;
    background: radial-gradient(circle, rgba(139, 92, 246, .2) 0%, rgba(139, 92, 246, 0) 70%);
}

.au::after {
    width: 280px;
    height: 280px;
    bottom: -140px;
    left: -110px;
    background: radial-gradient(circle, rgba(20, 184, 166, .18) 0%, rgba(20, 184, 166, 0) 70%);
}

.au_inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- 로고·배지 ---- */
.au_brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    text-align: center;
}

.au_logo {
    line-height: 0;
}

/* 로고 이미지: 로고 박스 높이 44px, 비율 유지 */
.au_logo_image {
    display: block;
    width: auto;
    height: 44px;
}

.au_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(79, 99, 255, .1);
    /* 연한 인디고 바탕 위 작은 글자 대비 확보용 진한 인디고 (5.8:1) */
    color: var(--c-primary-dark);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- 제목·보조 문구 ---- */
.au_head {
    margin-bottom: 20px;
    text-align: center;
}

.au_title {
    margin: 0 0 6px;
    color: var(--c-title);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.35;
}

.au_desc {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
}

/* 보조 문구 안 문장 단위 줄 (문장 중간 줄바꿈 방지용 블록) */
.au_desc_line {
    display: block;
}

/* ---- 카드 ---- */
.au_card {
    padding: 24px 20px;
    border-radius: var(--au-radius);
    background: var(--c-card);
    box-shadow: var(--au-shadow);
}

.au_required_note {
    margin: 0 0 16px;
    color: var(--c-muted);
    font-size: .82rem;
    text-align: right;
}

.au_group_title {
    margin: 0 0 12px;
    color: var(--c-primary);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.au_group + .au_group {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--c-line);
}

/* ---- 입력칸 ---- */
.au .au_field,
.au .form-group {
    margin-bottom: 16px;
}

.au_label,
.au .form-group > label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-title);
    font-size: .85rem;
    font-weight: 700;
}

.au_input_wrap {
    position: relative;
}

.au .form-control.au_input {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--c-input-border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--c-title);
    font-size: 1rem;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.au .form-control.au_input::placeholder {
    color: var(--c-placeholder);
}

.au .form-control.au_input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px var(--c-primary-ring);
}

/* 입력칸 안 왼쪽 아이콘 */
.au_input_wrap .au_input_icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--c-muted);
    font-size: .95rem;
    pointer-events: none;
}

/* 아이콘·눈 버튼 자리 여백 (공통 .content-wrapper .form-control 여백 규칙보다 우선순위를 높인 선택자) */
.au .au_input_wrap .au_input_icon ~ .form-control.au_input {
    padding-left: 42px;
}

.au .au_input_wrap .form-control.au_input.au_input_pw {
    padding-right: 48px;
}

/* 비밀번호 보기/숨기기 버튼 */
.au_pw_toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
}

/* 마우스 올림·포커스 색 (키보드 포커스 외곽선은 common.css :focus-visible) */
.au_pw_toggle:hover,
.au_pw_toggle:focus {
    color: var(--c-primary);
}

.au_help {
    margin: 6px 0 0;
    color: var(--c-muted);
    font-size: .8rem;
    line-height: 1.5;
}

/* 아이디 저장 체크박스 (행 전체 높이 44px로 터치 영역 확보) */
.au_save_id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: -6px 0 4px;
}

.au_save_id_check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
}

.au_save_id_check:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.au_save_id_label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 44px;
    margin: 0;
    color: var(--c-text);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

/* 검증 오류 문구 (입력칸이 묶음 안에 있어도 표시) */
.au .form-group .invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
}

.au .form-control.au_input.is-invalid {
    border-color: #e5484d;
    background-image: none;
}

.au .form-control.au_input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .16);
}

/* 로그인 실패 메시지 */
.au_error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff1f1;
    color: #c4282d;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
}

.au_error i {
    margin-top: 3px;
}

/* ---- 버튼 ---- */
.au_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.au_btn:active {
    transform: scale(.97);
}

/* 주 버튼: 흰 글자 대비 4.5:1 이상 그라데이션 끝색 (common.css --c-button-gradient-end) */
.au_btn_primary {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-button-gradient-end) 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(79, 99, 255, .32);
}

/* 마우스 올림·포커스 그림자 (키보드 포커스 외곽선은 common.css :focus-visible) */
.au_btn_primary:hover,
.au_btn_primary:focus {
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(79, 99, 255, .42);
}

/* 주 버튼 아래 글자 링크 줄 (가입 '취소'·출생 연도 '로그아웃' 공통, 링크 누름 영역 위쪽 12px 확장을 빼고도 버튼과 누름 영역 사이 약 10px) */
.au_cancel {
    margin: 20px 0 0;
    text-align: center;
}

/* 가입 화면 '취소'·출생 연도 화면 '로그아웃' 글자 링크 (누름 영역 높이 44px 이상 : 음수 바깥 여백으로 보이는 위치·줄 높이 유지, 버튼 요소도 같은 모양) */
.au_text_link {
    display: inline-block;
    border: 0;
    background: none;
    margin: -12px -8px;
    padding: 12px 8px;
    color: var(--c-muted);
    font-size: .9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.au_text_link:hover,
.au_text_link:focus {
    color: var(--c-text);
}

/* ---- 카드 아래 안내 ---- */
.au_switch {
    margin: 20px 0 0;
    font-size: .95rem;
    text-align: center;
    white-space: nowrap;
}

.au_switch a {
    margin-left: 4px;
    color: var(--c-primary);
    font-weight: 800;
}

.au_sub {
    margin: 10px 0 0;
    text-align: center;
}

.au_sub_link {
    color: var(--c-muted);
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.au_sub_link:hover,
.au_sub_link:focus {
    color: var(--c-text);
}

/* ---- 좁은 화면 (360px 등) ---- */
@media (max-width: 374.98px) {
    .au_inner {
        padding: 0 14px;
    }

    .au_card {
        padding: 20px 16px;
    }

    .au_title {
        font-size: 1.35rem;
    }
}