/**************************************** 로그인 방식 탭 (감리) */
/* 시안 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);
}

/* 탭을 뺀 나머지는 남은 영역의 가운데로 */
body .login>section>form .login-tab+div {
    margin-top: auto;
}

body .login>section>form .login-tab~:last-child {
    margin-bottom: auto;
}

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 가 .ready 를 붙인다). 아래 '휴대폰 인증' 단추 자리를 대신한다 */
#headlessSection .login-check {
    display: none;
}

#headlessSection:has(#login-tab-tel:checked) .login-check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: 0.5rem;
    padding: 0;
    border-radius: 50%;
    border: 0.0625rem solid rgba(255, 255, 255, 0.10);
    background: rgba(17, 17, 17, 0.25);
    color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.20);
    cursor: not-allowed;
    transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

#headlessSection:has(#login-tab-tel:checked) .login-check.ready {
    background: #f2c230;
    border-color: rgba(255, 255, 255, 0.30);
    color: #1f1f1f;
    cursor: pointer;
}

#headlessSection:has(#login-tab-tel:checked) .login-check.ready:hover {
    background: #f7cf4a;
}

#headlessSection:has(#login-tab-tel:checked) .login-check.ready:active {
    transform: scale(0.94);
}

/* 체크 단추가 들어갈 자리를 두고 칸이 남은 너비를 채운다 */
#headlessSection:has(#login-tab-tel:checked) #identifier {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

/* 전화번호 탭에서는 체크 단추가 보내기를 맡는다 */
#headlessSection:has(#login-tab-tel:checked) #submitButton {
    display: none;
}