@charset "utf-8";


/* 자사몰 포인트 컬러 */
:root {
  --color-primary: #74b600;           /* 메인 포인트 컬러 */
  --color-primary-dark: #5a8e00;      /* 호버/눌렸을 때 등 어두운 버전 */
  --color-primary-light: #a0d400;     /* 연한 버전 (배경 등에 활용) */
  --color-primary-bg: #f4fce3;        /* 아주 연한 배경색 (예: 뱃지 배경) */
}


/* ================================================
   login.css  ·  모바일 앱 스타일 로그인
   ================================================ */

/* ── 공통 리셋 ── */
#mb_login h1 { margin: 0; }
#mb_login.mbskin {
  text-align: initial;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
 }
#login_fs.login-skin { border: 0; padding: 0; margin: 0; }
#flogin { margin: 0; }

/* ── 전체 래퍼 ── */
#mb_login {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 40px;
    box-sizing: border-box;
}

.mbskin_box {
    padding: 24px 20px 0;
}

/* ================================================
   카카오 로그인 영역
   ================================================ */
.login-kakao-wrap {
    margin-bottom: 20px;
}

/* "3초만에 빠른 로그인" 말풍선 + 둥둥 애니메이션 */

/* 둥둥 떠오르는 키프레임 */
@keyframes balloon-float {
    0%   { transform: translateX(-50%) translateY(0px); }
    50%  { transform: translateX(-50%) translateY(-6px); }
    100% { transform: translateX(-50%) translateY(0px); }
}

.login-kakao-desc {
    text-align: center;
    font-size: 13px;
    color: #3d3d3d;
    margin: 0 0 14px;
    font-weight: 700;

    /* 말풍선 모양 */
    background: #fff;
    border-radius: 20px;
    padding: 6px 16px !important;
    display: inline-block;
    position: relative;
    left: 50%;

    /* 말풍선 꼬리 (아래쪽 삼각형) */
    /* ::after 로 꼬리 추가 - 아래 카카오 버튼을 가리키도록 */

    /* 둥둥 애니메이션 */
    animation: balloon-float 2s ease-in-out infinite;

    /* 그림자로 입체감 */
    box-shadow: 0 4px 12px rgb(132 132 132 / 50%);
}

/* 말풍선 꼬리 - 아래 삼각형 */
.login-kakao-desc::after {
    content: '';
    position: absolute;
    bottom: -8px;           /* 말풍선 아래에 붙임 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 7px 0 7px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* 카카오 버튼 */
.btn-kakao-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    background-color: #FEE500;
    color: #000000;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.btn-kakao-login:hover,
.btn-kakao-login:active {
    background-color: #f0d900;
    transform: translateY(-1px);
    color: #000;
    text-decoration: none;
}

.kakao-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ================================================
   구분선 "또는"
   ================================================ */
.login-divider {
    display: flex;
    align-items: center;
    /* gap: 12px; */
    margin: 20px 0;
    color: #9ca3af;
    font-size: 13px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ================================================
   아이디로 시작하기 토글 버튼
   ================================================ */
.btn-id-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-id-toggle:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* 화살표 아이콘 */
.toggle-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.toggle-arrow.is-open {
    transform: rotate(180deg);
}

/* ================================================
   아이디 로그인 접힘/펼침 영역
   ================================================ */
   .id-login-area {
       /* 토글 기능 제거 - 항상 펼쳐진 상태 */
       overflow: visible;
       max-height: none;
       margin-top: 16px;
   }

   /* .id-login-area.is-open 은 더 이상 필요 없으므로 삭제 */

/* ── 폼 내부 레이아웃 ── */
.login-skin {
    width: 100%;
}

.login-grid {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── 입력 필드 ── */
.login-input-wrap {
    position: relative;
}

.login-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 15px;
    color: #111;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.login-input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 5px var(--color-primary-bg);
    border: 1px solid var(--color-primary) !important;
}

/* ── 자동로그인 ── */
.login-meta {
    display: flex;
    align-items: center;
}

.login-meta .chk_box label {
    font-size: 14px;
    color: #6b7280;
    margin-left: 5px;
}

/* ── 로그인 버튼 ── */
.login-actions {
    margin-top: 4px;
}

.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background-color: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-login:hover,
.btn-login:active {
    /* background-color: #111; */
    transform: translateY(-1px);
}

/* ── 아이디/비밀번호 찾기 링크 ── */
.login-find-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
}

.login-find-links a {
    color: #6b7280;
    text-decoration: none;
}

.login-find-links a:hover {
    color: #111;
    text-decoration: none;
}

.divider-dot {
    color: #d1d5db;
    font-size: 12px;
}

/* ================================================
   하단 버튼 (회원가입 / 소셜로그인)
   ================================================ */
.login-bottom-btns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
}

/* 회원가입 버튼 */
.btn-bottom-join {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s ease;
}

.btn-bottom-join:hover {
    background: #f9fafb;
    color: #111;
    text-decoration: none;
}

/* ================================================
   PC (768px 초과) - 카드 스타일 유지
   ================================================ */
@media (min-width: 769px) {
    #mb_login {
        padding-top: 40px;
    }

    .mbskin_box {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 32px 32px 28px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    }
}

/* ================================================
   모바일 (768px 이하)
   ================================================ */
@media (max-width: 768px) {
    #mb_login {
        max-width: 100%;
        padding: 0 0 32px;
    }

    .mbskin_box {
        padding: 20px 16px 0;
    }

    .login-input {
        height: 48px;
        font-size: 16px; /* iOS 줌 방지 - 반드시 16px 이상 */
    }

    .btn-login {
        height: 48px;
    }

    .btn-kakao-login {
        height: 50px;
        font-size: 15px;
    }

    .login-bottom-btns {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   아이디 찾기
   ================================================ */

#find_id_wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
}

/* 상단 안내 문구 */
.find-hero {
    margin: 32px 0 28px;
}

.find-hero-text {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    margin: 0;
}



/* 폼 필드 */
.find-form-wrap {
    display: grid;
    gap: 14px;
}

.find-field {
    /* 각 필드 간격은 grid gap으로 제어 */
}

/* 결과 박스 */
.find-result-box {
    text-align: center;
    padding: 48px 0 32px;
}

.find-result-icon {
    margin-bottom: 24px;
}

.find-result-desc {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 8px;
}

/* 마스킹된 아이디 */
.find-result-id {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 4px;
    letter-spacing: 1px;
}

.find-result-sub {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 32px;
}

/* 하단 버튼 그룹 */
.find-bottom-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 3개일 땐 첫 번째가 전체 폭 차지 */
.find-bottom-btns .btn-login:first-child:nth-last-child(3) {
    grid-column: 1 / -1;
}

/* 모바일 */
@media (max-width: 768px) {
    #find_id_wrap {
        padding: 0 16px 32px;
    }

    .find-hero {
        margin: 24px 0 20px;
    }

    .find-hero-text {
        font-size: 19px;
    }

    .find-result-box {
        padding: 36px 0 24px;
    }

    .find-result-id {
        font-size: 20px;
    }
}

/* ================================================
   기존 호환 - 회원정보찾기 / 비회원구매 등
   ================================================ */
.login-label {
    display: block;
    font-weight: 600;
    margin: 0 0 .5rem;
    font-size: 14px;
    color: #374151;
}

.req-red {
    color: #ef4444;
    margin-left: .25rem;
    font-weight: 700;
}

.login-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.login-help {
    margin: 0 0 14px;
    color: #6b7280;
    line-height: 1.5;
    font-size: 14px;
}

.btn-login.btn-ghost {
    background: #fff;
    color: #111;
    border: 1px solid #d1d5db;
}

.btn-green {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid #d1d5db;
}



/* 회원정보 찾기 */
.login-find-hp-row,
.login-find-auth-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-find-hp-row .login-input-wrap,
.login-find-auth-row .login-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.login-find-hp-row .btn-login,
.login-find-auth-row .btn-login {
    flex: 0 0 auto;
    min-width: 96px;
    height: 56px;
    white-space: nowrap;
}

.oyev-input-wrap { position: relative; }

.oyev-input-wrap input.frm_input,
.oyev-input-wrap input.full_input {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    font-size: 16px;
    box-sizing: border-box;
}

.oyev-input-wrap input.frm_input:focus,
.oyev-input-wrap input.full_input:focus{
    outline: none;
    background: #fff;
    box-shadow: 0 0 5px var(--color-primary-bg);
    border: 1px solid var(--color-primary) !important;
}

.oyev-join-hp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 90px;
    gap: 10px;
    align-items: center;
}

.oyev-append-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 40px;
    min-width: 100px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    padding: 0 12px;
    font-weight: 700;
}

input.frm_input:focus,
textarea:focus {
    outline: 0;
    box-shadow: 0 0 5px var(--color-primary-bg);
    border: 1px solid var(--color-primary) !important;
}

@media (max-width: 768px) {
    .oyev-input-wrap input.frm_input,
    .oyev-input-wrap input.full_input {
        height: 48px;
        font-size: 16px;
        padding: 0 14px;
    }

    .login-find-hp-row .btn-login,
    .login-find-auth-row .btn-login {
        min-width: 88px;
        height: 48px;
        padding: 0 14px;
        font-size: 14px;
    }
}


/* ================================================
   이벤트 카드
   ================================================ */

/* 카드 제목 */
.event-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

/* 카드 부제목 */
.event-card-sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 4px;
}

/* 구분선 */
.event-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 14px 0;
}

/* 혜택 한 줄 */
.event-benefit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 라벨 */
.event-benefit-label {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

/* 금액 - 노란색 강조 */
.event-benefit-value {
    font-size: 18px;
    font-weight: 800;
    color: #d4a017;
}

/* 카카오 가입 버튼 */
.btn-event-kakao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 20px;
    background-color: #FEE500;
    color: #000;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-event-kakao:hover {
    background-color: #f0d900;
    transform: translateY(-1px);
    color: #000;
    text-decoration: none;
}