/* ==============================================================================
 * auth-floating.css — 로그인/추천인/회원가입 폼 floating-label 공통 룰
 * ST02 popup.css 의 .floating-field 패턴을 이관 (8개 스킨 공통 사용).
 * 스킨별 색상은 CSS 변수로 자동 적용 (--bg-layer1, --color, --secondary,
 * --border2-color, --border2-font).
 *
 * 셀렉터 specificity: ul.intro-list > li.floating-field > ... (0,1,3)
 * — 스킨별 popup.css 의 기존 룰 (ul.intro-list > li > input 등) 과 동일 수준이라
 * 로드 순서 (popup.css → auth-floating.css) 로 후자가 적용됨.
 * ============================================================================ */

ul.intro-list > li.floating-field {
    position: relative;
    padding: 0;
    margin-bottom: 8px;
}

ul.intro-list > li.floating-field > input,
ul.intro-list > li.floating-field > select,
ul.intro-list > li.floating-field > .floating-input-wrap > input {
    padding: 18px 15px 6px;
    width: 100%;
    height: 50px;
    line-height: normal;
    background: var(--bg-layer1);
    border: 1px var(--border2-color) solid;
    color: var(--color);
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
}

ul.intro-list > li.floating-field > input:focus,
ul.intro-list > li.floating-field > select:focus,
ul.intro-list > li.floating-field > .floating-input-wrap > input:focus {
    outline: none;
}

/* 라벨 absolute 배치 + transition */
ul.intro-list > li.floating-field > label,
ul.intro-list > li.floating-field > .floating-input-wrap > label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    color: var(--border2-font);
    font-size: 15px;
    font-weight: 400;
    pointer-events: none;
    transition: top 0.15s ease-out, transform 0.15s ease-out,
                font-size 0.15s ease-out, color 0.15s ease-out;
}

/* 필수 필드 라벨의 빨간 별표 (Site:Register:CellNo = Required 등). 전 스킨 공통.
   중복확인(check-list) 레이아웃에서는 label 이 .floating-input-wrap 안에 있으므로 두 중첩 모두 매칭
   (라벨 위치 규칙과 동일 패턴). */
ul.intro-list > li.floating-field > label > .req-mark,
ul.intro-list > li.floating-field > .floating-input-wrap > label > .req-mark {
    color: #e11d48;
    margin-left: 2px;
    font-weight: 700;
}

/* placeholder 표시 중에는 placeholder 글자 숨김 (라벨이 가운데 큰 글씨) */
ul.intro-list > li.floating-field > input::placeholder,
ul.intro-list > li.floating-field > .floating-input-wrap > input::placeholder {
    color: transparent;
}

/* 라이트 테마 동일 보장 — default/layout.css 의
   html[data-theme="light"] ul.intro-list > li > input::placeholder 색 규칙이
   위 규칙보다 specificity 가 높아 placeholder 가 다시 보이며 라벨과 겹침 (W04 증상) */
html[data-theme="light"] ul.intro-list > li.floating-field > input::placeholder,
html[data-theme="light"] ul.intro-list > li.floating-field > .floating-input-wrap > input::placeholder {
    color: transparent;
}

/* select 빈 상태 처리 */
ul.intro-list > li.floating-field > select:invalid {
    color: transparent;
}
ul.intro-list > li.floating-field > select:focus,
ul.intro-list > li.floating-field > select:valid {
    color: var(--color);
}

/* floating 트리거 — focus / 값 있음 / select 선택됨 */
ul.intro-list > li.floating-field > input:focus + label,
ul.intro-list > li.floating-field > input:not(:placeholder-shown) + label,
ul.intro-list > li.floating-field > select:focus + label,
ul.intro-list > li.floating-field > select:valid + label,
ul.intro-list > li.floating-field > .floating-input-wrap > input:focus + label,
ul.intro-list > li.floating-field > .floating-input-wrap > input:not(:placeholder-shown) + label {
    top: 7px;
    transform: none;
    font-size: 11px;
    color: var(--secondary);
}

/* placeholder 는 항상 transparent — focus 시도 복원하지 않음.
   라벨이 floating 으로 위치 변경하면서 input 안 가독성 유지 (라벨/placeholder 동시 표시 시각 충돌 회피).
   placeholder 텍스트는 라벨 자체가 hint 역할을 함. */

/* 필드 아래 보조 안내 (예: 비밀번호 입력 조건) — 항상 노출.
   .intro-txt 와 동일한 --color (primary text) 사용해 가독성 확보 (WCAG AAA).
   11px / normal weight 라 같은 색이라도 16px / 600 weight 인 intro-txt 와 hierarchy 자연스럽게 유지. */
ul.intro-list > li.floating-field > .field-hint {
    display: block;
    margin: 6px 4px 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color);
}

/* 중복확인 버튼 동반 row */
ul.intro-list > li.floating-field.check-list {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
ul.intro-list > li.floating-field.check-list > .floating-input-wrap {
    flex: 1;
    position: relative;
}

/* ============================================================================
 * 회원가입 폼 상단 — 일반회원/USDT 회원 유형 선택 라디오 라벨
 * (3개 LoginPopup 의 인라인 <style> 블록을 공통으로 이관)
 * ============================================================================ */
.member-type-label {
    padding: 0.4rem 0.9rem;
    border: 1px solid transparent;   /* 미선택 시에도 동일 공간 점유 — layout shift 방지 */
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.member-type-label.is-selected {
    background-color: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    border-color: #60a5fa;           /* 선택 시 강조 테두리 */
}

/* 선택된 라디오 라벨만 헤더(.intro-tit) 사이즈(18px) + bold — 미선택은 기본 폰트 유지 */
.member-type-label input[type="radio"]:checked + span {
    font-weight: 600;
    font-size: 18px;
}

/* 모바일 (≤ 470px) */
@media (max-width: 470px) {
    .member-type-label input[type="radio"]:checked + span { font-size: 17px; }

    ul.intro-list > li.floating-field > input,
    ul.intro-list > li.floating-field > select,
    ul.intro-list > li.floating-field > .floating-input-wrap > input {
        padding: 16px 12px 4px;
        height: 42px;
        font-size: 14px;
    }
    ul.intro-list > li.floating-field > label,
    ul.intro-list > li.floating-field > .floating-input-wrap > label {
        left: 12px;
        font-size: 13px;
    }
    ul.intro-list > li.floating-field > input:focus + label,
    ul.intro-list > li.floating-field > input:not(:placeholder-shown) + label,
    ul.intro-list > li.floating-field > select:focus + label,
    ul.intro-list > li.floating-field > select:valid + label,
    ul.intro-list > li.floating-field > .floating-input-wrap > input:focus + label,
    ul.intro-list > li.floating-field > .floating-input-wrap > input:not(:placeholder-shown) + label {
        font-size: 10px;
        top: 5px;
    }
    ul.intro-list > li.floating-field > .field-hint {
        margin: 4px 3px 0;
        font-size: 10px;
    }
}

/* ============================================================================
 * 로그인/가입 팝업 언어 선택기 — close 버튼 대칭 위치(top-left).
 * ST02 auth-st02.css 의 .intro-lang-strip 패턴 이관 (8개 스킨 공통, _Shared/_LoginPopup).
 * ============================================================================ */
.intro-lang-strip {
    position: fixed;
    top: 15px; left: 15px;
    z-index: 50001;   /* .intro-popup 오버레이(50000) 위 */
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-layer1);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.intro-lang-strip > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, transform 0.15s;
}
.intro-lang-strip > a > .flags {
    display: inline-block;
    line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
    .intro-lang-strip > a:hover {
        opacity: 1;
        transform: scale(1.15);
    }
}
/* 터치기기(hover 없음)는 위 :hover 로 국기를 밝힐 수 없어 0.55 로 영구히 흐림 → 또렷하게(전 스킨 모바일). */
@media (hover: none) {
    .intro-lang-strip > a { opacity: 1; }
}

/* ============================================================================
 * 보안확인(Turnstile) 토큰 대기 중 로그인/회원가입 버튼 — 잠금 + 작동 스피너 (자동 재시도).
 * 전 스킨 공용. 색은 currentColor(버튼 글자색)라 스킨별 버튼색에 자동 적응.
 * .is-busy 토글은 auth-ui.js(setLoginBusy/setRegisterBusy) / w15 skin-common.js 가 담당.
 * (.ok-join 은 intro-login 클래스가 없어 별도 셀렉터 필요)
 * ============================================================================ */
.intro-login.is-busy,
.ok-join.is-busy {
    opacity: 0.85;
    cursor: progress;
}
.intro-login.is-busy::before,
.ok-join.is-busy::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.5em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;   /* 회전하는 'C' 호(arc) */
    border-radius: 50%;
    animation: stx-auth-spin 0.6s linear infinite;
}
@keyframes stx-auth-spin {
    to { transform: rotate(360deg); }
}

/* 모션 최소화 선호 사용자 — 회전만 정지(잠금 표시는 유지) */
@media (prefers-reduced-motion: reduce) {
    .intro-login.is-busy::before,
    .ok-join.is-busy::before { animation: none; }
}