/* 비밀번호 실시간 유효성 체크리스트 — www/js/pw-check.js 가 생성하는 마크업용 */

.join_input2 .pwc-list,
.join_input2 .dup-email-list { 
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    /* 부모가 flex 행일 때 인풋 옆이 아니라 다음 줄 전체를 차지하게 한다 */
    flex-basis: 100%;
    width: 100%;
    border: 0;
    background: none;
}

.pwc-list .pwc-item { 
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    transition: color 0.15s ease;
    /* 사이트 기존 .join_box li 규칙(테두리·여백·세로배치) 차단 */
    list-style: none;
    border: 0;
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
    background: none;
}
 
.pwc-list .pwc-icon { 
    width: 12px;
    text-align: center;
    font-size: 11px;
}

/* 색상만으로 구분하지 않도록 아이콘을 함께 쓴다 */
.pwc-list .pwc-item.is-idle { color: #666666; }
.pwc-list .pwc-item.is-pass { color: #157a3f; }
.pwc-list .pwc-item.is-fail { color: #d0342c; }

/* 스크린리더 전용 — 시각적으로만 숨긴다 */
.pwc-list .pwc-sr {
    position: absolute; 
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .pwc-list { gap: 2px 10px; }
    .pwc-list .pwc-item { font-size: 11px; }
}

/* =========================================================================
 * 회원가입 페이지(layout/login/inc/join2.php) 전용 보정
 *
 * 이 페이지의 구조는 login2.css 기준:
 *   .join_box2 .mid2 li .input_box2  → display:flex; align-items:center
 *   .input_box2 p                    → min-width:140px  (라벨)
 *   .input_box2 input[password]      → width:100%       (인풋)
 * 스크립트가 인풋 뒤에 넣는 ul.pwc-list 는 인라인 flexWrap:wrap 으로
 * 다음 줄로 내려간다. 아래 규칙으로 두 가지 깨짐을 잡는다.
 *   1) 사이트의 '.join_box2 .mid2 li { margin-bottom:40px }' 가
 *      체크리스트 항목(li.pwc-item)마다 먹어 40px 간격이 생기는 문제
 *   2) wrap 상태에서 width:100% 인풋이 라벨 아래로 떨어지는 문제
 * ========================================================================= */

/* (1) 체크리스트 항목 리셋 — 선택자 특이도(0,3,0)를 사이트 규칙
 *     '.join_box2 .mid2 li'(0,2,1) 보다 높여서 확실히 이긴다. */
.input_box2 .pwc-list .pwc-item {
    margin: 0;
    padding: 0;
    border: 0;
    float: none;
    list-style: none;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    line-height: 1.5;
    background: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
}

/* 체크리스트 컨테이너 — 인풋 아래 한 줄 전체, 왼쪽 정렬 */
.join_box2 .mid2 .input_box2 .pwc-list {
    order: 99;
    flex-basis: 100%;
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    text-align: left;
    box-sizing: border-box;
}

/* (2) PC: 비밀번호/비밀번호확인 인풋이 라벨 옆 자리를 유지하게 한다.
 *     (기본 width:100% 를 flex 로 대체해야 wrap 시 라벨 아래로 안 떨어짐)
 *     라벨 폭(140px)만큼 체크리스트를 들여써서 인풋 시작선에 맞춘다. */
@media (min-width: 769px) {
    .join_box2 .mid2 li .input_box2 input[type="password"][data-pw-check],
    .join_box2 .mid2 li .input_box2 input[type="password"][data-pw-match],
    .join_box2 .mid2 li .input_box2 input[type="text"], .join_box2 .mid2 li .input_box2 input[type="password"]
     {
        /* width:100%(=basis 100%) 를 지워야 wrap 상태에서 라벨 옆에 붙는다.
         * 무단위 0 은 일부 브라우저가 무시하므로 0% 로, 확실히 이기도록 !important. */
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .join_box2 .mid2 .input_box2 .pwc-list {
        padding-left: 140px;
    }
}

/* 비밀번호 규칙 미충족/불일치일 때 회원가입 버튼 비활성 상태 표시 */
.join_box2 .bottom > ul li input[type="submit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}