/**************************************** 로그인 방식 탭 (감리) */
/* 시안 pm-login.zip 의 [탭] 부분이다. 탭(.login-tab)은 start.mjs 가 감리에서만 만든다 — 탭이 없는 화면(산하)에는 아무 규칙도 걸리지 않는다. */
/* 산하는 이메일·비번 한 모양이라 탭을 두지 않는다 (docs/기능/sanha-사용자관리.md 4-5) */

/* 카드·폼이 안내문구 길이를 따라 늘어난다 */
body .login:has(.login-tab) {
    height: auto;
    min-height: 15rem;
}

body .login>section>form:has(>.login-tab) {
    padding: 1rem 2rem;
    height: auto;
    min-height: 15rem;
}

body .login>section:has(.login-tab)>#power {
    padding-top: 1rem;
    font-size: 0.75rem;
    color: #fff;
}

/* 세그먼트 탭 */
body .login>section>form .login-tab {
    position: relative;
    flex: none;
    width: fit-content;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 1.5rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.10);
    background: rgba(17, 17, 17, 0.20);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(1rem);
}

/* 선택된 탭 자리를 표시하는 인디케이터 */
body .login>section>form .login-tab>span {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: calc(50% - 0.375rem);
    height: calc(100% - 0.5rem);
    border-radius: 1.25rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.20);
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body .login>section>form .login-tab>label {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    width: auto;
    text-align: center;
    padding: 0.25rem 0.75rem;
    border-radius: 1.25rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.12s ease;
}

body .login>section>form .login-tab>label:hover {
    color: #fff;
}

body .login>section>form .login-tab>label:active {
    transform: scale(0.96);
}

/* 탭은 맨 위, 로그인 단추는 맨 아래. 그 사이 칸 · 문구는 남은 영역의 가운데로 — 위아래 auto 여백이 남은 높이를 반씩 나눈다 */
body .login>section>form .login-tab+div {
    margin-top: auto;
}

body .login>section>form:has(>.login-tab) #submitButton {
    margin-top: auto;
}

/* 단추 아래 빈 안내문(#hint)이 간격만 차지해 단추가 바닥에서 뜨지 않게 한다 */
body .login>section>form:has(>.login-tab) #hint:empty {
    display: none;
}

body .login>section>form .login-tab~h5 {
    margin-bottom: 0;
}

/* 상태를 들고 있는 라디오. 화면에서만 숨기고 클릭·키보드는 살려 둔다 */
#headlessSection>input[name="login-tab"] {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: 0;
    padding: 0;
    opacity: 0;
    clip-path: inset(50%);
    pointer-events: none;
}

/* 선택된 탭 강조 */
#headlessSection:has(#login-tab-tel:checked) .login-tab>label[for="login-tab-tel"],
#headlessSection:has(#login-tab-pw:checked) .login-tab>label[for="login-tab-pw"] {
    font-weight: 500;
    color: #fff;
    cursor: default;
}

/* 인디케이터 이동 */
#headlessSection:has(#login-tab-pw:checked) .login-tab>span {
    transform: translateX(calc(100% + 0.25rem));
}

/* 키보드 포커스. 라디오가 숨겨져 있으므로 탭에 표시한다 */
#headlessSection:has(#login-tab-tel:focus-visible) .login-tab>label[for="login-tab-tel"],
#headlessSection:has(#login-tab-pw:focus-visible) .login-tab>label[for="login-tab-pw"] {
    outline: 0.0625rem solid rgba(255, 255, 255, 0.60);
    outline-offset: -0.0625rem;
}

/* 비밀번호 칸. 탭 선택이 login.js 의 .hidden 토글보다 우선한다 */
#headlessSection:has(#login-tab-tel:checked) #passwordField {
    display: none !important;
}

#headlessSection:has(#login-tab-pw:checked) #passwordField {
    display: flex !important;
    animation: login-field-in-pw 0.28s ease-out both;
}

/* 탭 아래 줄은 전부 같이 나타난다. 두 탭이 공유하는 줄은 새로 그려지지 않아 탭마다 animation-name 을 바꿔야 다시 재생된다 */
#headlessSection:has(#login-tab-tel:checked) .login-tab~* {
    animation: login-field-in-tel 0.28s ease-out both;
}

#headlessSection:has(#login-tab-pw:checked) .login-tab~* {
    animation: login-field-in-pw 0.28s ease-out both;
}

@keyframes login-field-in-tel {
    from { opacity: 0; transform: translateY(0.375rem); }
    to { opacity: 1; transform: none; }
}

@keyframes login-field-in-pw {
    from { opacity: 0; transform: translateY(0.375rem); }
    to { opacity: 1; transform: none; }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .login-tab>span,
    .login-tab>label {
        transition: none;
    }

    #headlessSection:has(#login-tab-tel:checked) .login-tab~*,
    #headlessSection:has(#login-tab-pw:checked) .login-tab~*,
    #headlessSection:has(#login-tab-pw:checked) #passwordField {
        animation: none;
    }
}

/* 시안의 공통 규칙. 산하 버튼 모양이 바뀌지 않게 탭이 있을 때만 건다 */
#headlessSection:has(.login-tab) #statusBox { color: #fff; }
#headlessSection:has(.login-tab) #statusBox.error { color: var(--color-dahong); }

#headlessSection:has(.login-tab) #hint {
    color: #aaa;
    font-size: 0.75rem;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
    text-decoration: none;
    cursor: default;
}

#headlessSection:has(.login-tab) #submitButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#headlessSection:has(.login-tab) #submitButton:disabled:hover {
    background: rgba(17, 17, 17, 0.20);
    scale: 1;
}

/* 전화번호 탭의 아이디 칸. '번호' 글자 대신 칸 안에 휴대폰 그림을 넣고, 칸이 줄을 꽉 채운다 */
#headlessSection:has(#login-tab-tel:checked) label[for="identifier"] {
    display: none;
}

#headlessSection:has(#login-tab-tel:checked) #identifier {
    width: 100%;
    padding-left: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 1.125rem 1.125rem;
}

/* 전화번호 탭의 안내문구 (start.mjs 가 로그인 단추 바로 위에 넣는다). 비밀번호 탭에서는 숨긴다 */
#headlessSection .login-tel-notice {
    display: none;
}

#headlessSection:has(#login-tab-tel:checked) .login-tel-notice {
    display: block;
    width: 100%;
    text-align: left;
    color: #aaa;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.375rem;
    letter-spacing: -0.0175rem;
}

/* 안내문구와 상태문구(#statusBox)는 한 자리를 같이 쓴다. 상태문구가 뜨면 안내문구는 비키고, 글자 모양은 같게 둔다 */
#headlessSection:has(#login-tab-tel:checked):has(#statusBox:not(.hidden)) .login-tel-notice {
    display: none;
}

#headlessSection:has(.login-tab) #statusBox {
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: -0.0175rem;
    margin-bottom: 0;
}

#headlessSection .login-tel-notice b {
    color: #ddd;
    font-weight: 600;
}

/* 전화번호 탭의 로그인 단추는 열한 자리를 다 쳐야 켜진다 (start.mjs 가 aria-disabled 를 쓴다). 모양은 :disabled 와 같다 */
#headlessSection:has(.login-tab) #submitButton[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

#headlessSection:has(.login-tab) #submitButton[aria-disabled="true"]:hover {
    background: rgba(17, 17, 17, 0.20);
    scale: 1;
}