/* =========================================================
    Scrollbar Gutter
========================================================= */

/*
 * 수직 스크롤바 등장/소멸 시 콘텐츠 영역이 우측으로 이동하는 레이아웃 이동(CLS) 방지.
 * 스크롤바가 없을 때도 해당 너비(~15px)를 항상 예약하여 콘텐츠 폭을 일정하게 유지함.
 * macOS overlay 스크롤바 환경에서는 gutter 폭이 0이므로 영향 없음.
 *
 * html: 뷰포트 스크롤바(스크롤 컨테이너가 html인 경우)를 위한 여백 예약
 * body: app.min.css의 overflow-x:hidden 으로 인해 overflow-y가 auto로 승격되어
 *       body가 스크롤 컨테이너로 동작하는 경우를 대비한 여백 예약 (belt-and-suspenders)
 */
html, body {
    scrollbar-gutter: stable;
}

/* =========================================================
    Icon Alignment Utilities
========================================================= */

/* 인라인 아이콘의 수직 위치를 텍스트 기준선에 맞춤 */
.icon-align-position {
    position: relative;
    top: 1px;
}

/* =========================================================
    Project Select Attention
========================================================= */

/*
 * 세션에 selectedProjectId 가 없을 때(최초 로그인 등) 상단 프로젝트 셀렉트박스를 강조.
 * 부트스트랩 focus ring 과 동일한 방식(box-shadow 링)이되, 링이 하늘색에서 파랑으로
 * 번지며 퍼졌다 사라지는 것을 반복해 "선택이 필요하다"는 신호를 준다.
 * 프로젝트를 선택하면 topbar 의 hx-on--after-request 가 클래스를 제거해 즉시 원복된다.
 */
.project-select-empty {
    position: relative;
    z-index: 3;                 /* input-group 형제 요소 위로 링이 보이도록 */
    border-color: #3b9ff5;
    animation: projectSelectPulse 1.8s ease-in-out infinite;
}

/* 사용자가 직접 열어본 순간부터는 안내가 끝난 것이므로 애니메이션 정지 */
.project-select-empty:focus {
    animation: none;
    border-color: #3b9ff5;
    box-shadow: 0 0 0 0.2rem rgba(59, 159, 245, 0.25);
}

@keyframes projectSelectPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.7);   /* 하늘색 */
    }
    70% {
        box-shadow: 0 0 0 0.4rem rgba(13, 110, 253, 0); /* 파랑으로 번지며 소멸 */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

/* 접근성: 모션 최소화 설정 시 깜빡임 대신 고정 링 */
@media (prefers-reduced-motion: reduce) {
    .project-select-empty {
        animation: none;
        box-shadow: 0 0 0 0.2rem rgba(59, 159, 245, 0.45);
    }
}

/* =========================================================
    Auth Page Cover Background
========================================================= */

/*
 * 로그인/아이디찾기/비밀번호찾기 등 인증 페이지 공통 배경 커버.
 * auth-box 를 가진 최상위 래퍼에 함께 부여해서 사용한다.
 * (사용처: auth/login.html, auth/find-id.html, auth/find-password.html)
 */
.auth-cover-bg {
    min-height: 100vh;
    width: 100%;
    /* bg-login.png는 반투명 PNG - 흰 배경을 깔아야 예시화면과 같은 톤이 된다 */
    background-color: #FFFFFF;
    background-image: url("/images/bg-login.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

/* 배경만 투명 - 각 요소가 가진 색은 유지 */
.auth-cover-bg .card,
.auth-cover-bg .card-body {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}