/* ==============================================================================
 * 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;
}

/* 🔴 color-scheme 을 선언하지 않으면 브라우저는 이 페이지가 어두운지 모른다.
   크롬 UA 는 자동완성 글자를 `color: fieldtext !important` 로 칠하는데, UA 오리진이라
   작성자 !important 로도 못 이긴다. fieldtext 는 선언이 없으면 검정으로 해석되어
   (실측: ttk-707.com → rgb(0,0,0)) 어두운 스킨 위에서 글자가 사라져 보인다.
   자동완성이 확정된 뒤에는 아래 :-webkit-autofill 블록의 -webkit-text-fill-color 가
   (UA 가 건드리지 않는 다른 속성이라) 우회해 주지만, 목록에서 항목만 하이라이트된
   "미리보기" 상태에는 그 규칙이 안 걸려 fieldtext 가 그대로 드러난다.
   🔴 어두움·밝음을 둘 다 명시할 것 — 한쪽만 선언하면 나머지가 같은 함정에 빠진다
   (BackOffice <select> 선례).
   🔴 전역(html/:root)으로 넓히지 말 것 — 스크롤바·날짜선택기·셀렉트까지 19개 스킨에서
   한꺼번에 바뀐다. data-theme 이 없는 st02a/99casino 는 의도적으로 제외(현행 유지). */
html[data-theme="dark"] ul.intro-list > li input,
html[data-theme="dark"] ul.intro-list > li select { color-scheme: dark; }

html[data-theme="light"] ul.intro-list > li input,
html[data-theme="light"] ul.intro-list > li select { color-scheme: light; }

/* 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 역할을 함. */

/* 자동완성 floating — 브라우저가 로드 시점에 저장값을 채우면 :placeholder-shown 이
   재평가되지 않아 라벨이 가운데 머문 채 값과 겹친다(크롬 계열 전용 증상 —
   iOS Safari 는 로드 자동채움을 하지 않아 재현되지 않는다).
   🔴 위 :not(:placeholder-shown) 리스트에 합치지 말 것 — 브라우저가 모르는 셀렉터가
   하나라도 섞이면 리스트 전체가 무효화되어 타이핑 경로까지 같이 죽는다.
   같은 이유로 -webkit- 접두형과 표준형도 블록을 나눈다. */
ul.intro-list > li.floating-field > input:-webkit-autofill + label,
ul.intro-list > li.floating-field > .floating-input-wrap > input:-webkit-autofill + label {
    top: 7px;
    transform: none;
    font-size: 11px;
    color: var(--secondary);
}
ul.intro-list > li.floating-field > input:autofill + label,
ul.intro-list > li.floating-field > .floating-input-wrap > input:autofill + label {
    top: 7px;
    transform: none;
    font-size: 11px;
    color: var(--secondary);
}

/* 자동완성 배경·글자색 복구 — 크롬 기본값(연보라)이 스킨의 어두운 입력칸을 덮어쓴다.
   배경은 직접 지정이 불가능해 inset box-shadow 로 덮는 것이 유일한 수단이고,
   🔴 --bg-layer1 이 반투명인 스킨(ST10 = 0.85)은 한 겹으로 다 못 가려 3겹으로 쌓는다. */
ul.intro-list > li.floating-field > input:-webkit-autofill,
ul.intro-list > li.floating-field > .floating-input-wrap > input:-webkit-autofill {
    -webkit-text-fill-color: var(--color);
    caret-color: var(--color);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-layer1) inset,
                        0 0 0 1000px var(--bg-layer1) inset,
                        0 0 0 1000px var(--bg-layer1) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* 필드 아래 보조 안내 (예: 비밀번호 입력 조건) — 항상 노출.
   .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;
    }
    /* 자동완성 floating — 데스크톱 블록과 같은 이유로 셀렉터를 분리해 둔다.
       빠뜨리면 안드로이드 크롬에서만 라벨 크기·위치가 어긋난다. */
    ul.intro-list > li.floating-field > input:-webkit-autofill + label,
    ul.intro-list > li.floating-field > .floating-input-wrap > input:-webkit-autofill + label {
        font-size: 10px;
        top: 5px;
    }
    ul.intro-list > li.floating-field > input:autofill + label,
    ul.intro-list > li.floating-field > .floating-input-wrap > input:autofill + 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; }
    /* 캡차 상자 접힘/펼침도 즉시 전환 (표시 여부 자체는 동일) */
    .turnstile-inline,
    .turnstile-inline.is-verified { transition: none; }
}

/* Turnstile 인라인 배치 — 위젯은 폼 안 제출 버튼 위에 둔다.
   (게이트형으로 폼을 가리면 CF 연결 실패 시 사용자가 팝업에서 못 빠져나온다) */
.turnstile-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    /* 🔴 max-height 를 길이로 미리 잡아둔다(실제 높이 65~95px 이라 렌더에는 영향 없음) —
       none → 0 은 보간이 불가능해 전환이 아예 걸리지 않는다.
       🔴 이 값을 실제 높이에 가깝게 줄이지 말 것: 오류 문구가 길어지면 펼친 상태에서도 잘린다. */
    max-height: 200px;
    transition: opacity .18s ease, max-height .18s ease, margin .18s ease,
                visibility .18s ease;
}
/* 위젯이 뜰 자리를 미리 잡아 로딩 중 레이아웃이 밀리는 것을 막는다.
   🔴 width:100% 가 있어야 data-size="flexible" 이 실제로 먹는다 — 이게 없으면
   .cf-turnstile 이 자기 콘텐츠 폭(300px)에 머물러 폼이 넓어도 그만큼만 쓴다
   (st88bet 실측: 컨테이너 358px / 위젯 300px → width:100% 부여 시 358px).
   컨테이너보다 커지지 않으므로 좁은 화면에서 넘치지도 않는다. */
/* 🔴 min-width 는 CF 위젯이 300px 밑으로 줄지 않기 때문에 필요하다 — 없으면 좁은 스킨에서
   위젯 본체가 상자를 뚫고 로그인창 밖으로 넘친다(안드로이드 실기기 제보, ST10 실측 270px).
   min-width 는 원래 폭이 더 넓으면 무시되므로 조건 분기 없이 좁은 스킨에만 걸린다 —
   라이브 실측: ST10/99casino/gd01 은 300px 로 복원(팝업 안에 들어감), Default·W16(356px)은 불변. */
/* 🔴 상한이 없으면 폼이 넓은 스킨에서 위젯이 그만큼 늘어난다 — W16 제보("위젯이 너무 큼").
   flexible 은 살리되 보기 좋은 선에서 끊는다 — .turnstile-inline 의 align-items:center 가
   남는 자리를 가운데로 맞춰준다.
   🔴 폭은 화면 크기에 따라 달라지므로 좁은 창에서만 재면 안 된다(위 주석의 "W16 356px"은
   좁은 화면 값이다). st88bet 데스크톱(1600) 실측:
     W16 600 → 400 / Default 600 → 400 / ST10 358 → 358(불변) / W16 모바일 356 → 356(불변).
   400px 인 이유: 정상 범위 스킨의 최대가 358px 이라 그보다 위여야 나머지가 안 바뀐다. */
.turnstile-inline > .cf-turnstile { min-height: 65px; width: 100%; min-width: 300px; max-width: 400px; }

/* 인증 통과 후 캡차 박스만 감춘다(업체 요청). 🔴 게이트 부활이 아니다 —
   로그인폼·닫기(X)버튼은 그대로 두므로 CF 장애 시에도 갇히지 않는다.
   실패·만료·재발급 때는 resetTurnstile/showTurnstileBox 가 이 클래스를 걷어낸다.

   display:none 대신 높이만 접는 이유: 폼 폭이 내용물로 정해지는 스킨(st88-cheongung)에서는
   위젯이 레이아웃에서 통째로 빠지면 그만큼 폼이 좁아진다. 높이만 접으면 위젯이 아직
   살아있는 동안(iframe 존재) 폭 기여가 남아 전환이 매끄럽다.
   🔴 다만 이것이 그 스킨의 좁은 버튼을 고쳐주지는 않는다 — 라이브 실측 결과 캡차 요소를
   통째로 제거해도(=캡차 OFF 테넌트의 원래 모습) 입력칸 179px·버튼 45px 로 동일했다.
   즉 좁은 폼은 캡차와 무관한 그 스킨 고유 문제이고, 캡차가 보이는 동안만 가려져 있었다. */
.turnstile-inline.is-verified {
    max-height: 0;
    min-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    /* 🔴 전부 duration 만 쓴다 — delay(`0s linear .18s`) 방식은 토큰 만료 후 재통과처럼
       토글이 반복될 때 최종값에 도달하지 못해 "투명해지기만 하고 자리는 남는" 버그를 냈다
       (라이브 실측: 2회차부터 max-height 가 200px 에 머물고 visibility 도 visible).
       visibility 는 discrete 속성이라 duration 만 줘도 사라지는 방향에서는 전환이 끝날 때까지
       visible 을 유지한 뒤 숨는다 — 지연 없이도 "페이드를 다 보여준 뒤 숨기기"가 성립하고,
       나타나는 방향은 즉시 visible 이라 복원이 늦지 않는다. */
    transition: opacity .18s ease, max-height .18s ease, margin .18s ease,
                visibility .18s ease;
}

/* 캡차 실패 안내 — CF error-callback 이 채운다. 비었을 때는 자리를 차지하지 않는다. */
.turnstile-msg { font-size: 12px; line-height: 1.5; text-align: center; color: #e35d6a; word-break: keep-all; }
.turnstile-msg:empty { display: none; }