/* =============================================
   /members/login — 회원 로그인 (20260916 디자인시스템 시안)
   카드 없는 화이트 레이아웃 + 하단 교재 콜라주
   색상은 members.css의 --m-* 토큰값 사용
   ============================================= */

.memb-login {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
}

/* 푸터 포함 전체 높이 배분: main을 flex로 만들어 .memb-login이 남은 높이를 채움.
   shrink를 허용해야 콘텐츠가 뷰포트보다 클 때 푸터가 잘리지 않고 콜라주가 줄어듦 */
body:has(.memb-login) #main-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* 이 페이지만 스크롤 완전 차단 — height 고정이어야 자식 flex shrink가
   걸려서 콘텐츠가 뷰포트보다 클 때 콜라주가 줄고 푸터가 안 잘림
   (layout의 body min-height:100vh 보정 포함) */
body:has(.memb-login) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* 스크롤 없는 단일 화면 — layout의 맨 위로 버튼 숨김
   (members.css 미로드라 스타일 없이 노출됨) */
body:has(.memb-login) #memb-to-top { display: none; }
html:has(.memb-login) { overflow: hidden; }

/* ===== 폼 영역 (시안처럼 정중앙보다 약간 아래 배치) ===== */
.memb-login-body {
    flex: 1 0 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(48px, 10vh, 120px) 20px 32px;
}

.memb-login-form {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}

.memb-login-logo {
    display: block;
    width: 116px;
    margin: 0 auto 36px;
}

/* ===== 플래시 메시지 ===== */
.memb-login-flash {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #FEF1F1;
    border: 1px solid #FBD5D5;
}
.memb-login-flash-item {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #E53935;
    line-height: 1.5;
}
.memb-login-flash-item + .memb-login-flash-item { margin-top: 4px; }

/* ===== 입력 필드 ===== */
.memb-login-field { margin-bottom: 12px; }

.memb-login-input {
    width: 100%;
    height: 50px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #F4F4F5;
    padding: 0 16px;
    font-size: 15px;
    font-family: inherit;
    color: #171717;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.memb-login-input::placeholder { color: #9B9B9B; }
.memb-login-input:focus {
    outline: none;
    background: #fff;
    border-color: #FF9500;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, .16);
}

/* 스크린리더 전용 라벨 */
.memb-login-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== 로그인 상태 유지 ===== */
.memb-login-keep {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 6px 0 20px;
    font-size: 13px;
    color: #474747;
    cursor: pointer;
    user-select: none;
}
.memb-login-keep input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #FF9500;
    cursor: pointer;
}
.memb-login-keep input:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 2px;
}

/* ===== 로그인 버튼 (btnPush 3D 컨벤션: 어두운 하단면 + 눌림) ===== */
.memb-login-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: #FF9500;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -.2px;
    cursor: pointer;
    box-shadow: 0 4px 0 0 #E64D03;
    transition: background .15s, transform .1s, box-shadow .1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.memb-login-btn:hover { background: #EF6902; }
.memb-login-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 0 #E64D03;
    background: #E64D03;
}
.memb-login-btn:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 2px;
}

/* ===== 회원가입 / 교사가입 ===== */
.memb-login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700;
}
.memb-login-links a {
    color: #171717;
    text-decoration: none;
    transition: color .15s;
}
.memb-login-links a:hover { color: #EF6902; }
.memb-login-links a:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 2px;
    border-radius: 4px;
}
.memb-login-links-sep {
    width: 1px;
    height: 12px;
    background: #D9DCE1;
}

/* ===== 도움말 링크 ===== */
.memb-login-help {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}
.memb-login-help a {
    font-size: 13px;
    color: #9B9B9B;
    text-decoration: none;
    transition: color .15s;
}
.memb-login-help a:hover { color: #EF6902; }
.memb-login-help a:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== 하단 교재 콜라주 ===== */
.memb-login-covers {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 34vh;
    overflow: hidden;
    line-height: 0;
}
.memb-login-covers-img {
    display: block;
    width: 100%;
    height: auto;
}
.memb-login-covers-pc { display: none; }

/* 상단 화이트 페이드 */
.memb-login-covers::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .memb-login-covers-m { display: none; }
    .memb-login-covers-pc { display: block; }
}

/* ===== 푸터 보정: 모바일 세로 스택 시 중앙 정렬 + 높이 축소 ===== */
/* 공용 .idx-footer가 ≤600px에서 column으로 쌓이는데, 이 페이지는 스크롤 없는
   한 화면이라 푸터 높이가 콜라주 영역을 잡아먹어 좌측정렬 대신 컴팩트하게 */
@media (max-width: 600px) {
    body:has(.memb-login) .idx-footer { padding: 14px 0; }
    body:has(.memb-login) .idx-footer-inner { align-items: center; gap: 8px; }
    body:has(.memb-login) .idx-footer-brand { justify-content: center; }
    body:has(.memb-login) .idx-footer-nav { justify-content: center; flex-wrap: wrap; }
}

/* ===== 모바일 ===== */
@media (max-width: 767px) {
    .memb-login-body { padding: clamp(36px, 8vh, 90px) 20px 28px; }
    .memb-login-logo { width: 104px; margin-bottom: 30px; }
}

/* ===== 낮은 화면 (가로 모드 등): 스크롤 허용 + 콜라주 축소 ===== */
/* 폼이 뷰포트보다 길어지는 환경 — 스크롤 잠금을 풀고 폼을 위부터 배치.
   (flex 중앙정렬 상태로 넘치면 위쪽 로고가 잘리고 스크롤도 불가) */
@media (max-height: 640px) {
    body:has(.memb-login) { height: auto; min-height: 100vh; min-height: 100dvh; }
    body:has(.memb-login), html:has(.memb-login) { overflow-y: auto; }
    .memb-login-body { display: block; padding-top: 32px; }
    .memb-login-form { margin: 0 auto; }
    .memb-login-covers { max-height: 22vh; }
    .memb-login-logo { margin-bottom: 24px; }
}

/* =============================================
   /members/member_signup — 회원 가입 (로그인 시안 톤)
   로그인과 달리 폼이 길어 스크롤 허용
   ============================================= */

.memb-signup {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
    background: #fff;
}
/* 로그인과 같은 콜라주가 하단에 붙도록 — main을 flex로 확장 */
body:has(.memb-signup) #main-content { display: flex; flex-direction: column; }

.memb-signup-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 8vh, 90px) 20px 48px;
}

/* 로고 — 폼 위, 중앙 */
.memb-signup-logo {
    display: block; width: 116px;
    margin: 0 auto 32px;
}

@media (min-width: 900px) {
    /* 데스크톱: 로고 좌측 / 폼 우측 */
    .memb-signup-body {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(48px, 8vw, 140px);
    }
    .memb-signup-logo { margin: 0; width: 150px; align-self: flex-start; padding-top: 60px; }
}

.memb-signup-form {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}

.memb-signup-title {
    margin: 0 0 6px;
    font-size: 22px; font-weight: 800; color: var(--m-ink);
    text-align: center; letter-spacing: -.3px;
}

.memb-signup-desc {
    margin: 0 0 24px;
    font-size: 13px; color: var(--m-muted); text-align: center;
    line-height: 1.5;
}

/* 조회 버튼 — 로그인 버튼보다 작고 옅은 톤 */
.memb-signup-lookup {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    align-self: flex-end;
    padding: 10px 18px; margin-top: 2px;
    border: 1px solid var(--m-line); border-radius: 10px;
    background: var(--m-surface); color: var(--m-ink);
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.memb-signup-lookup:hover { border-color: #F5D8B5; background: var(--m-orange-95); color: var(--m-orange-deep); }
.memb-signup-lookup .material-icons { font-size: 18px; }
.memb-signup-lookup:disabled { opacity: .55; cursor: default; }

/* 조회 성공 상태 */
.memb-signup-status {
    margin-top: 10px; font-size: 13px; font-weight: 600; color: #2e7d32;
}
.memb-signup-status .material-icons { font-size: 17px; vertical-align: -3px; }

/* 채널 배지 */
.memb-signup-channels {
    margin-top: 12px; padding: 12px 14px;
    background: #FFFCF7; border: 1px solid var(--m-line); border-radius: 12px;
}
.memb-signup-channels-title {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 800; color: var(--m-muted); margin-bottom: 8px;
}
.memb-signup-channels-title .material-icons { font-size: 16px; color: var(--m-orange); }
.memb-signup-channel-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-channel-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    background: #fff; border: 1px solid var(--m-line);
    font-size: 12px; font-weight: 600; color: var(--m-ink);
}
.ms-channel-badge .material-icons { font-size: 13px; color: var(--m-muted); }
.ms-channel-badge code { font-family: inherit; font-size: 11px; color: var(--m-muted); background: none; padding: 0; }
.ms-channel-badge-primary { border-color: #F5D8B5; background: var(--m-orange-soft); color: var(--m-orange-deep); }
.ms-channel-badge-primary .material-icons { color: var(--m-orange); }
.ms-channel-badge-primary code { color: var(--m-orange-deep); }

/* 힌트/에러 텍스트 */
.memb-signup-hint {
    display: block; margin-top: 5px;
    font-size: 12px; color: var(--m-muted); line-height: 1.5;
}
.memb-signup-hint.is-ok { color: #2e7d32; }
.memb-signup-hint.is-bad { color: #E53935; }
.memb-signup-alert {
    display: block; margin: 10px 0 4px; min-height: 0;
    font-size: 13px; font-weight: 600; color: #E53935;
}

/* 비밀번호 눈 아이콘 — 입력 안 우측 */
.memb-signup .ms-pw-field { position: relative; }
.memb-signup .ms-pw-eye {
    position: absolute; right: 4px; top: 16px;
    padding: 6px; border: 0; background: none; cursor: pointer;
    color: var(--m-muted); border-radius: 8px; line-height: 0;
}
.memb-signup .ms-pw-eye:hover { color: var(--m-orange-deep); background: var(--m-orange-95); }
.memb-signup .ms-pw-eye .material-icons { font-size: 19px; }
.memb-signup .ms-pw-field .memb-login-input { padding-right: 44px; }

/* 약관 링크 */
.memb-signup-term {
    margin: -6px 0 10px; font-size: 12px; color: var(--m-muted);
    text-decoration: underline; align-self: flex-start;
}
.memb-signup-term:hover { color: var(--m-orange-deep); }

/* 가입 좌측 히어로 — 모바일: 로고만, 데스크톱: 로고+문구+일러스트 */
.memb-signup-hero { display: flex; flex-direction: column; align-items: center; }
.memb-signup-hero-copy { display: none; }
.memb-signup-hero-img { display: none; }

@media (min-width: 900px) {
    .memb-signup-hero { align-items: flex-start; }
    .memb-signup-logo { margin: 0 0 22px; width: 140px; padding-top: 0; }
    .memb-signup-hero-copy { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
    .memb-signup-hero-title {
        font-size: 26px; font-weight: 800; color: var(--m-ink);
        line-height: 1.35; letter-spacing: -.4px;
    }
    .memb-signup-hero-sub { font-size: 14px; color: var(--m-muted); line-height: 1.5; }
    .memb-signup-hero-img { display: block; width: 100%; max-width: 220px; align-self: flex-start; margin-left: -20px; }
}