@charset "utf-8";
/* ============================================================
   login.css — 회원 화면 (member/*)

   로그인 · 아이디/비밀번호 찾기가 함께 쓴다.
   둘 다 헤더와 푸터 사이에 카드만 놓이는 단독 화면이라
   서브 페이지의 타이틀 밴드(.sub-visual)·2차 메뉴(.lnb)를 쓰지 않는다.
   그래서 sub.css 를 부르지 않고 이 파일만 얹는다. base → common → login 순서.

     [0] 공용 — 입력창 · 안내 밴드 · 소제목
     [1] 로그인                member/login.html  ·  .login-*
     [2] 아이디/비밀번호 찾기   member/find.html   ·  .find-*
     [3] 회원가입              member/join.html   ·  .join-*
   ============================================================ */

/* ############################################################
   [0] 공용
   ############################################################ */

/* ---------- 입력창 ----------
   수강신청의 키워드 입력(.lec-filter__search)과 같은 어법.
   높이만 화면마다 달라서 아래 각 절에서 따로 준다. */
.login__input,
.find__input,
.join__input,
.join__select {
    width: 100%;
    padding: 0 18px;
    border: 1px solid var(--hair);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
.login__input::placeholder,
.find__input::placeholder,
.join__input::placeholder {
    color: var(--placeholder);
}
.login__input:focus,
.find__input:focus,
.join__input:focus,
.join__select:focus {
    outline: none;
    border-color: var(--acc);
}

/* ---------- 안내 밴드 — 서피스 배경 한 겹 ---------- */
.find__notice,
.join__notice {
    margin-top: 28px;
    padding: 18px 24px;
    border-radius: var(--r-card);
    background: var(--surf);
    font-size: 15px;
    line-height: 24px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    text-align: center;
}

/* ---------- 칸 소제목 ---------- */
.find__subject,
.join__subject {
    margin-bottom: 18px;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.04em;
}

/* ############################################################
   [1] 로그인  ·  member/login.html  ·  .login-*
   ############################################################ */
.login {
    padding: 100px 0 140px;
}
/* .inner 의 1200 그리드를 이 화면에서만 카드 폭으로 좁힌다.
   좌우 20 은 .inner 의 padding 이라 실제 내용 폭은 400 이다. */
.login__inner {
    max-width: 440px;
}

/* ---------- 제목 ---------- */
.login__title {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 32px;
    color: var(--ink);
    letter-spacing: -.04em;
    text-align: center;
}
.login__desc {
    margin-top: 12px;
    font-size: 15px;
    color: var(--body);
    text-align: center;
}

/* ---------- 입력 ---------- */
.login__form {
    margin-top: 36px;
}
.login__field + .login__field {
    margin-top: 10px;
}
.login__input {
    height: 52px;
}

/* 로그인 실패 안내 — 입력칸 바로 아래에 둔다.
   화면 맨 위나 알림창으로 띄우면 어느 칸이 틀렸는지와 멀어진다. */
.login__error {
    margin-top: 10px;
    font-size: 14px;
    color: var(--step1);
    letter-spacing: var(--ls-base);
}
.login__error[hidden] {
    display: none;
}

/* 아이디 저장 — 체크박스는 공용 .chk (24px 원형) 를 그대로 쓴다 */
.login__save {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}

.login__submit {
    width: 100%;
    height: 56px;
    margin-top: 20px;
    font-size: 17px;
}

/* ---------- 아이디 / 비밀번호 찾기 ---------- */
.login__help {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
}
.login__help a {
    transition: color .15s;
}
.login__help a:hover {
    color: var(--ink);
    text-decoration: underline;
}
/* 푸터의 가운뎃점 대신 세로선 — 두 항목뿐이라 구분이 더 또렷해야 한다 */
.login__help li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 14px;
    background: var(--hair);
    vertical-align: -1px;
}

/* ---------- 회원가입 ---------- */
.login__join {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.login__join-text {
    font-size: 15px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}
.login__join-btn {
    width: 100%;
    height: 52px;
    margin-top: 14px;
    font-size: 16px;
}

/* ---------- 좁은 화면 ----------
   카드 폭이 이미 440 이라 태블릿에서는 손댈 것이 없다.
   모바일에서 위아래 여백과 글자만 한 단계 줄인다. */
@media (max-width: 767px) {
    .login {
        padding: 56px 0 72px;
    }
    .login__title {
        font-size: 26px;
    }
    .login__desc {
        margin-top: 10px;
        font-size: 14px;
    }
    .login__form {
        margin-top: 28px;
    }
    .login__input,
    .login__join-btn {
        height: 48px;
    }
    .login__submit {
        height: 52px;
        font-size: 16px;
    }
    .login__join {
        margin-top: 32px;
        padding-top: 26px;
    }
}

/* ############################################################
   [2] 아이디/비밀번호 찾기  ·  member/find.html  ·  .find-*
   ############################################################ */
.find {
    padding: 100px 0 140px;
}
/* 두 칸을 나란히 두는 화면이라 로그인(440)보다 넓게 쓴다 */
.find__inner {
    max-width: 1040px;
}

/* ---------- 제목 ---------- */
.find__title {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 32px;
    color: var(--ink);
    letter-spacing: -.04em;
    text-align: center;
}

/* ---------- 두 칸 ----------
   칸 높이는 그리드가 알아서 맞춘다(stretch) —
   입력이 두 줄인 아이디 찾기 쪽은 아래가 비지만 시안과 같은 모습이다. */
.find__cols {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
    margin-top: 44px;
}
.find__col {
    display: flex;
    flex-direction: column;
}
.find__box {
    flex: 1;
    padding: 36px 32px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}

/* ---------- 입력 줄 ---------- */
.find__row {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 12px;
}
.find__row + .find__row {
    margin-top: 12px;
}
.find__label {
    font-size: 15px;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}
/* 줄 단위라 로그인 입력보다 한 단계 낮다 */
.find__input {
    height: 48px;
}
.find__submit {
    width: 100%;
    height: 52px;
    margin-top: 28px;
    font-size: 16px;
}

/* ---------- 좁은 화면 ---------- */
/* 두 칸이 붙기 시작하는 지점 — 간격만 줄여 버틴다 */
@media (max-width: 1023px) {
    .find__cols {
        gap: 28px;
    }
    .find__box {
        padding: 28px 24px;
    }
    .find__row {
        grid-template-columns: 84px 1fr;
    }
}
/* 모바일은 한 칸씩 쌓고, 줄 안에서도 라벨을 입력 위로 올린다 */
@media (max-width: 767px) {
    .find {
        padding: 56px 0 72px;
    }
    .find__title {
        font-size: 26px;
    }
    .find__notice {
        margin-top: 20px;
        padding: 16px 18px;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }
    .find__cols {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 32px;
    }
    .find__subject {
        margin-bottom: 14px;
        font-size: 18px;
    }
    .find__box {
        padding: 24px 20px;
    }
    .find__row {
        display: block;
    }
    .find__row + .find__row {
        margin-top: 14px;
    }
    .find__label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
    }
    .find__submit {
        height: 48px;
        margin-top: 22px;
    }
}

/* ############################################################
   [3] 회원가입  ·  member/join.html  ·  .join-*
   ############################################################ */
.join {
    padding: 100px 0 140px;
}
.join__inner {
    max-width: 1040px;
}
.join__title {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 32px;
    color: var(--ink);
    letter-spacing: -.04em;
    text-align: center;
}
/* 필수 표시 — 시안의 빨강. 사이트가 가진 유일한 빨강이 1단계 배지색이라
   그 토큰을 그대로 쓴다 (색을 새로 늘리지 않는다) */
.join__req {
    color: var(--step1);
}

.join__sec {
    margin-top: 56px;
}
/* 입력 묶음 — 줄마다 실선으로 나눈다 */
.join__box {
    padding: 0 32px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--white);
}
.join__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
}
.join__row + .join__row {
    border-top: 1px solid var(--line-soft);
}
/* 항목이 여러 줄로 늘어나는 칸은 라벨을 위쪽에 붙인다 */
.join__row--top {
    align-items: start;
}
.join__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-base);
}

/* 입력 자리 — 입력칸 · 버튼 · 안내가 한 줄에 서고, 좁아지면 접힌다 */
.join__field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}
/* 휴대폰번호처럼 여러 줄을 쌓는 자리 */
.join__field--col {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.join__input {
    flex: none;
    width: 260px;
    height: 48px;
}
/* 눈 단추를 덮어쓴 비밀번호 칸 — 폭은 감싼 쪽이 갖는다 */
.join__field > .pw {
    flex: none;
    width: 260px;
}
.join__field > .pw .join__input {
    width: 100%;
}
.join__dup {
    flex: none;
    height: 48px;
    padding: 0 18px;
    font-size: 15px;
}
.join__hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--mute);
    letter-spacing: var(--ls-base);
}

/* ---------- 휴대폰번호 ---------- */
.join__phone {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 기본 화살표를 지우고 같은 모양의 꺾쇠를 직접 그린다 —
   브라우저마다 화살표 크기가 달라 입력칸과 높이가 안 맞는다 */
.join__select {
    flex: none;
    width: 96px;
    height: 48px;
    padding: 0 32px 0 14px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23757575' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    cursor: pointer;
}
.join__tel {
    width: 110px;
    text-align: center;
}
.join__dash {
    flex: none;
    color: var(--hair-hover);
}
/* 안내 문구 안의 강조 — 시안이 빨강으로 집어 준 부분 */
.join__hint em {
    color: var(--step1);
}

/* ---------- 라디오 ----------
   동그란 공용 체크박스(.chk)를 그대로 쓴다. 라디오도 모양이 같아
   따로 만들 이유가 없다 (고르면 검게 차고 체크가 뜬다) */
/* 항목이 다섯 개까지 늘어나 한 줄에 안 들어갈 수 있다 — 넘치면 아랫줄로 */
.join__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

/* 여러 개를 고르는 항목 — 라디오와 같은 어법이고 체크박스만 다르다.
   학과처럼 항목이 많으면 --grid 로 열을 맞춘다. 한 줄로 흘리면
   글자 길이가 제각각이라 어디까지가 한 항목인지 눈이 헷갈린다. */
.join__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.join__checks--grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 14px 16px;
}
.join__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
.join__radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}

/* ---------- 약관 동의 · 가입 ---------- */
.join__agree {
    margin-top: 44px;
    text-align: center;
}
.join__agree-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--body);
    letter-spacing: var(--ls-base);
    cursor: pointer;
}
.join__link {
    color: var(--ink);
    text-decoration: underline;
    transition: color .15s;
}
.join__link:hover {
    color: var(--acc);
}
.join__foot {
    margin-top: 24px;
    text-align: center;
}
.join__submit {
    width: 100%;
    max-width: 400px;
    height: 60px;
    font-size: 17px;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1023px) {
    .join__box {
        padding: 0 24px;
    }
    .join__row {
        grid-template-columns: 140px 1fr;
    }
    /* 안내가 입력칸 옆에 끼면 두 글자씩 끊긴다 — 아랫줄로 내린다 */
    .join__hint {
        flex-basis: 100%;
    }
    /* 라벨 칸이 좁아진 만큼 열도 하나 줄인다 */
    .join__checks--grid {
        grid-template-columns: repeat(4,1fr);
    }
}
@media (max-width: 767px) {
    .join {
        padding: 56px 0 72px;
    }
    .join__title {
        font-size: 26px;
    }
    .join__notice {
        margin-top: 20px;
        padding: 16px 18px;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }
    .join__sec {
        margin-top: 36px;
    }
    .join__subject {
        margin-bottom: 14px;
        font-size: 18px;
    }
    .join__box {
        padding: 0 20px;
    }
    /* 라벨을 입력 위로 올린다 */
    .join__row {
        display: block;
        padding: 18px 0;
    }
    .join__label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
    }
    .join__input {
        width: 100%;
    }
    .join__field > .pw {
        width: 100%;
    }
    /* 아이디 줄 — 입력칸과 중복확인이 한 줄을 나눠 쓴다 */
    /* 학과 아홉 개를 세 줄로 두면 글자가 끊긴다 — 두 줄로 줄인다 */
    .join__checks--grid {
        grid-template-columns: repeat(2,1fr);
    }
    .join__checks {
        gap: 12px 18px;
    }
    .join__check {
        font-size: 14px;
    }
    .join__field--dup .join__input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .join__phone {
        width: 100%;
        gap: 6px;
    }
    .join__select {
        width: 84px;
        padding: 0 26px 0 12px;
        background-position: right 10px center;
    }
    .join__tel {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .join__agree {
        margin-top: 32px;
    }
    .join__agree-label {
        line-height: 24px;
        text-align: left;
    }
    .join__submit {
        height: 54px;
        font-size: 16px;
    }
}