/* 비밀번호 보기/숨기기 버튼 — 배선은 js/password-toggle.js
 *
 * 버튼을 입력란 오른쪽 안쪽에 겹쳐 놓는다. input-group 으로 감싸지 않는 이유: 검증 안내
 * (add_error_feedback)가 입력란 **바로 뒤**에 .invalid-feedback 을 끼우는데, input-group 안이면
 * 그 안내가 입력란과 버튼 사이에서 줄을 갈라 버튼이 안내 아래로 밀린다.
 * 그래서 버튼 높이는 상자(안내까지 포함)가 아니라 .form-control 한 줄 높이로 고정한다
 * — tabler 의 line-height·padding·border 에서 나온 값이다.
 */
.password-toggle-wrap {
    position: relative;
}

.password-toggle-wrap > .form-control {
    padding-right: 2.5rem;
}

/* 검증 실패 X 표시가 버튼 밑에 깔리지 않게 버튼 왼쪽으로 옮긴다. */
.password-toggle-wrap > .form-control.is-invalid {
    padding-right: calc(2.25rem + 1.4285714286em + .875rem);
    background-position: right calc(2.25rem + .3571428572em + .21875rem) center;
}

/* Edge 는 password 칸에 자체 보기 버튼을 그린다 — 이 버튼과 겹쳐 눈이 둘이 된다. */
.password-toggle-wrap > .form-control::-ms-reveal {
    display: none;
}

.password-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.25rem;
    height: calc(1.25rem + .875rem + 2 * var(--tblr-border-width));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tblr-secondary);
    border-radius: var(--tblr-border-radius);
    cursor: pointer;
}

.password-toggle-btn:hover {
    color: var(--tblr-body-color);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: -2px;
}

.password-toggle-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Caps Lock 안내 — 배선은 js/password-toggle.js. 상자는 늘 있고 글자만 바뀌므로(aria-live)
 * 비어 있을 때는 자리를 차지하지 않게 여백을 글자가 있을 때만 준다. */
.caps-lock-notice:not(:empty) {
    margin-top: .25rem;
    font-size: .875em;
    color: var(--tblr-warning-text-emphasis);
}

/* 안내가 행 높이를 바꾸면 안 되는 자리 — 같은 행의 버튼 열이 아래 끝 정렬이라 안내만큼 행이 자라면
 * 버튼이 내려간다(제공자 콘솔 「내 비밀번호」). 칸을 담은 열에 .caps-lock-float 를 달면 안내를
 * 입력칸 아래에 띄운다. 띄운 안내는 아래 요소를 가릴 수 있으니 그 자리 여백은 화면이 둔다 — 다른
 * 비밀번호 화면은 안내 아래에 바로 다음 칸·버튼이 붙어 있어 흐름 배치(위)를 그대로 쓴다. */
.caps-lock-float {
    position: relative;
}

.caps-lock-float > .caps-lock-notice {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-inline: inherit;
    /* 좁은 열(휴대폰)에서 두 줄로 접히면 아래 문단까지 내려가 가린다 — 한 줄로 두고 옆 열 아래로 넘긴다. */
    white-space: nowrap;
}