@charset "utf-8";

/* =========================================================
   MEMBER SKIN DARK THEME (Bootstrap 5 Compatible)
   Description: 로그인, 회원가입, 쪽지, 포인트, 스크랩 등 회원 스킨 통합 스타일
   ========================================================= */

/* ---------------------------------------------------------
   1. 공통 레이아웃 및 리셋 (Common)
   --------------------------------------------------------- */
/* 팝업창 및 일반 페이지 공통 폰트/컬러 */
#mb_login, #mb_confirm, #pw_confirm, #pw_reset, #find_info, 
#mb_register, #mb_register_form, #mb_register_result,
#memo_list, #memo_view, #memo_write, #point, #scrap, #profile, #cert_refresh {
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    color: #e0e0e0;
    line-height: 1.6;
}

/* 중앙 정렬이 필요한 페이지들 (로그인, 비번찾기 등) */
#mb_login, #mb_confirm, #pw_confirm, #pw_reset, #find_info {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
}

/* 다크 카드 박스 (공통 컨테이너) */
.member-card {
    width: 100%;
    max-width: 450px; /* 기본 폭 */
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 40px;
    color: #e0e0e0;
    margin: 0 auto;
}

/* 타이틀 스타일 */
.member-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}
.member-title i { color: #d4af37; /* 골드 아이콘 */ }

/* ---------------------------------------------------------
   2. 폼 요소 스타일 (Inputs & Buttons)
   --------------------------------------------------------- */
/* 다크 입력창 */
.form-control-dark, .frm_input {
    background-color: #2c2c2c !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    height: 50px;
    padding: 0 15px;
    font-size: 1rem;
    border-radius: 5px;
    transition: 0.3s;
    width: 100%;
    box-sizing: border-box;
}
.form-control-dark:focus, .frm_input:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25) !important;
    outline: none;
}
.form-control-dark::placeholder { color: #888; }

/* 텍스트 에어리어 (쪽지 등) */
textarea.form-control-dark {
    height: auto;
    padding: 15px;
    line-height: 1.6;
}

/* 메인 버튼 (골드) */
.btn-gold, .btn_submit {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0;
    background-color: #d4af37;
    border: 1px solid #d4af37;
    color: #000;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-gold:hover, .btn_submit:hover { 
    background-color: #b4942b; 
    border-color: #b4942b; 
    color: #000; 
}

/* 서브 버튼 (다크 아웃라인) */
.btn-dark-outline, .btn_close, .btn_cancel {
    width: 100%;
    height: 45px;
    line-height: 43px;
    background-color: transparent;
    border: 1px solid #555;
    color: #ccc;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.btn-dark-outline:hover, .btn_close:hover, .btn_cancel:hover { 
    background-color: #333; 
    color: #fff; 
    border-color: #777; 
}

/* 체크박스 커스텀 (Bootstrap 기반) */
.form-check-input {
    background-color: #333;
    border-color: #555;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: #d4af37;
    border-color: #d4af37;
}
.form-check-label { cursor: pointer; }

/* ---------------------------------------------------------
   3. 페이지별 세부 스타일 (Specific Pages)
   --------------------------------------------------------- */

/* [로그인] 링크 영역 */
.member-links {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
    text-align: center;
    font-size: 0.9rem;
    color: #888;
}
.member-links a { color: #fff; text-decoration: none; font-weight: bold; margin-left: 5px; }
.member-links a:hover { color: #d4af37; text-decoration: underline; }

/* [회원가입] 약관 박스 */
#fregister_term textarea, 
.fregister_term textarea {
    width: 100%;
    height: 150px;
    background-color: #222;
    color: #ccc;
    border: 1px solid #444;
    padding: 15px;
    font-size: 0.9rem;
    border-radius: 5px;
    resize: none;
    margin-bottom: 10px;
}

/* [쪽지] 리스트 */
#memo_list .list-group-item {
    background-color: transparent;
    border-bottom: 1px solid #333;
}
#memo_list .list-group-item:hover {
    background-color: #252525;
}
#memo_list .read a { color: #888; } /* 읽은 쪽지 */
#memo_list .no_read { color: #d4af37; font-size: 0.8em; margin-left: 5px; }

/* [포인트] 테이블 */
.point_list { margin-top: 20px; border-top: 1px solid #333; }
.point_list li {
    padding: 15px 10px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.point_num { font-weight: bold; color: #fff; }
.point_use { color: #ff6b6b; } /* 사용 포인트 */
.point_status { 
    background-color: #252525; 
    font-weight: bold; 
    color: #d4af37; 
    padding: 15px; 
    border-radius: 5px; 
    margin-top: 20px; 
    text-align: right;
}

/* [스크랩] */
#scrap ul { list-style: none; padding: 0; margin: 0; }
#scrap li {
    padding: 15px 0;
    border-bottom: 1px solid #333;
    position: relative;
}
#scrap .scrap_tit { font-weight: bold; font-size: 1.1em; color: #fff; display: block; margin-bottom: 5px; text-decoration: none; }
#scrap .scrap_cate { font-size: 0.9em; color: #888; background: #333; padding: 2px 6px; border-radius: 3px; margin-right: 5px; text-decoration: none; }
#scrap .scrap_datetime { font-size: 0.9em; color: #666; }
#scrap .scrap_del { position: absolute; right: 0; top: 15px; color: #ff6b6b; }

/* [프로필] */
.my_profile_img img {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px solid #d4af37;
    object-fit: cover;
}
.profile_name {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin: 20px 0;
}

/* [비회원 주문조회] */
.guest-order-box {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px dashed #444;
}
.guest-order-box h2 { font-size: 1.2rem; color: #fff; text-align: center; margin-bottom: 15px; }

/* ---------------------------------------------------------
   4. 레거시(Legacy) 호환성 유지
   (기존 클래스를 사용하는 플러그인이나 스크립트 오작동 방지)
   --------------------------------------------------------- */
.mbskin { width: 100%; }
.mbskin_box { background: transparent; border: 0; }
.win_desc { color: #888; font-size: 0.9em; margin-top: 10px; text-align: center; }
.btn_confirm { margin-top: 20px; text-align: center; }
.empty_table, .empty_li { text-align: center; padding: 50px 0; color: #666; }

/* 자동완성 배경색 제거 (크롬 등) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #2c2c2c inset !important;
    -webkit-text-fill-color: white !important;
}