@charset "utf-8";
/* ============================================================ */
/* 작마클 회원 페이지 (로그인·회원가입) — RPG 다크 테마          */
/*   _rpg_journey.php 의 --rpg-* 색 토큰과 동일 톤으로 통일      */
/* ============================================================ */

/* 색 토큰 (RPG 홈과 동일) */
.klon-mb {
    --mb-bg:        #0f0f0d;   /* 페이지 배경 (가장 어두움) */
    --mb-surface:   #22251c;   /* 카드 표면 */
    --mb-input:     #1a1a18;   /* 입력칸 배경 */
    --mb-border:    #33332b;   /* 기본 테두리 */
    --mb-border-2:  #44443d;   /* 약한 강조 테두리 */
    --mb-text:      #f2f1ec;   /* 본문 밝은 글자 */
    --mb-text-2:    #c9c8c0;
    --mb-text-3:    #9b9a92;   /* 라벨·보조 */
    --mb-text-4:    #7a7972;   /* 가장 흐린 글자 */
    --mb-green:     #8fc45a;   /* 초록 포인트 */
    --mb-green-deep:#2b4d12;
    --mb-green-bd:  #3a4a28;
    --mb-orange:    #ff8a3d;   /* 주황 = 주요 액션 */
    --mb-orange-on: #3a1c00;   /* 주황 버튼 위 글자 */

    /* 페이지 전체를 다크 배경으로 (회원 페이지 한정) */
    background: var(--mb-bg);
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 16px 64px;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- 공통 카드 ---- */
.klon-mb-card {
    width: 100%;
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: 18px;
    box-sizing: border-box;
}
.klon-mb-login    { max-width: 380px; padding: 34px 32px; }   /* 로그인: 좁게 */
.klon-mb-register { max-width: 520px; padding: 30px; }        /* 회원가입: 넓게 */

/* ---- 헤더 (로고 + 제목) ---- */
.klon-mb-head { text-align: center; margin-bottom: 24px; }
.klon-mb-logo { display: inline-block; margin-bottom: 14px; }
.klon-mb-logo img { display: block; }
.klon-mb-title { font-size: 20px; font-weight: 600; color: var(--mb-text); margin: 0; }
.klon-mb-sub   { font-size: 13px; color: var(--mb-text-3); margin: 6px 0 0; }

/* ---- 폼 필드 ---- */
.klon-mb-form { margin: 0; }
.klon-mb-field { margin-bottom: 12px; text-align: left; }
.klon-mb-label { display: block; font-size: 12px; color: var(--mb-text-3); margin-bottom: 6px; }
.klon-mb-input,
.klon-mb-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--mb-input);
    border: 1px solid var(--mb-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}
.klon-mb-input::placeholder { color: var(--mb-text-4); }
.klon-mb-input:focus,
.klon-mb-select:focus {
    outline: none;
    border-color: var(--mb-green);
}
.klon-mb-select { color: var(--mb-text-3); }
/* 셀렉트 화살표 (다크 배경용) */
.klon-mb-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239b9a92' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}

/* 두 칸 가로 배치 */
.klon-mb-row { display: flex; gap: 10px; }
.klon-mb-row > * { flex: 1; min-width: 0; }

/* 필드 보조 안내문 */
.klon-mb-hint { font-size: 11px; color: var(--mb-text-4); margin: 5px 0 0; line-height: 1.5; }

/* ---- 버튼 ---- */
.klon-mb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    line-height: 1.35;
    word-break: keep-all;
}
.klon-mb-btn-main {                      /* 주요 액션 — 주황 */
    background: var(--mb-orange);
    color: var(--mb-orange-on);
}
.klon-mb-btn-main:hover { filter: brightness(1.05); color: var(--mb-orange-on); }
.klon-mb-btn-line {                      /* 보조 — 밝은 회색 배경 (다크 위에서 확실히 보이게) */
    background: #d8d7cf;
    color: #2a2a24;
    border: 1px solid #d8d7cf;
}
.klon-mb-btn-line:hover { background: #e6e5dd; color: #1a1a16; }

/* ---- 체크박스(자동로그인) ---- */
.klon-mb-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--mb-text-3);
    cursor: pointer;
}
.klon-mb-check input { accent-color: var(--mb-green); width: 15px; height: 15px; }

/* ---- 구분선 ---- */
.klon-mb-divider { height: 1px; background: var(--mb-border); margin: 22px 0; }

/* ---- 하단 링크 ---- */
.klon-mb-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
}
.klon-mb-links a { color: var(--mb-text-3); text-decoration: none; }
.klon-mb-links a:hover { color: var(--mb-text); }
.klon-mb-link-accent { color: var(--mb-green) !important; }

/* ---- 섹션 라벨 (회원가입 입력폼: 계정정보/개인정보) ---- */
.klon-mb-section { font-size: 12px; color: var(--mb-green); margin: 0 0 12px; font-weight: 500; }
.klon-mb-section:not(:first-of-type) { margin-top: 22px; }

/* ---- 약관 박스 (회원가입 1단계) ---- */
.klon-mb-terms {
    background: var(--mb-input);
    border: 1px solid var(--mb-border);
    border-radius: 10px;
    padding: 14px;
    font-size: 12px;
    color: var(--mb-text-3);
    line-height: 1.7;
}
.klon-mb-terms-scroll { height: 120px; overflow-y: auto; }
.klon-mb-terms-scroll::-webkit-scrollbar { width: 6px; }
.klon-mb-terms-scroll::-webkit-scrollbar-thumb { background: var(--mb-border-2); border-radius: 3px; }
/* 동의 체크 줄 */
.klon-mb-agree {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--mb-text-2);
    cursor: pointer;
}
.klon-mb-agree input { accent-color: var(--mb-green); width: 15px; height: 15px; }

/* 모바일 */
@media (max-width: 575px) {
    .klon-mb { padding: 28px 12px 48px; }
    .klon-mb-login, .klon-mb-register { padding: 26px 20px; }
    .klon-mb-row { flex-direction: column; gap: 0; }
    .klon-mb-row > * { margin-bottom: 12px; }
}

/* ============================================================ */
/* 회원가입 입력폼 (register_form) — 부트스트랩 구조 위에 다크 오버라이드 */
/*   기능·구조는 그대로 두고 .klon-mb 스코프 안에서 겉모습만 변경     */
/* ============================================================ */

/* 폼 카드: 좌우 정렬·여백 (회원가입은 항목이 많아 좀 더 넓게) */
.klon-mb-form-wrap { text-align: left; }
.klon-mb-form-wrap .klon-mb-head { text-align: center; }

/* 내부 부트스트랩 카드/배경 무력화 (원본 인라인 스타일 대체) */
.klon-mb .card,
.klon-mb .card-body,
.klon-mb .card-footer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

/* 섹션 헤더 ("사이트 이용정보 입력", "개인정보 입력" 등) */
.klon-mb .card-header,
.klon-mb .card-header-sub {
    background: transparent !important;
    border: none !important;
    color: var(--mb-green) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 0 4px !important;
    margin: 18px 0 10px !important;
}

/* 라벨 */
.klon-mb .col-form-label,
.klon-mb label {
    color: var(--mb-text-3) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding-top: 8px;
}

/* 입력 필드 (텍스트/비밀번호/이메일/번호/textarea/select) */
.klon-mb .form-control,
.klon-mb input[type="text"],
.klon-mb input[type="password"],
.klon-mb input[type="email"],
.klon-mb input[type="tel"],
.klon-mb input[type="number"],
.klon-mb textarea,
.klon-mb select {
    background: var(--mb-input) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: 10px !important;
    color: var(--mb-text) !important;
    font-size: 14px !important;
    padding: 10px 13px !important;
    height: auto !important;
    box-shadow: none !important;
}
.klon-mb .form-control:focus,
.klon-mb input:focus,
.klon-mb textarea:focus,
.klon-mb select:focus {
    border-color: var(--mb-green) !important;
    box-shadow: none !important;
    background: var(--mb-input) !important;
    color: var(--mb-text) !important;
}
.klon-mb .form-control::placeholder { color: var(--mb-text-4) !important; }

/* 보조 안내문 (small.form-text) */
.klon-mb .form-text,
.klon-mb small {
    color: var(--mb-text-4) !important;
    font-size: 11px !important;
}

/* 행 간격 */
.klon-mb .form-group { margin-bottom: 14px; }

/* readonly 필드는 살짝 어둡게 (수정불가 표시) */
.klon-mb .form-control[readonly],
.klon-mb input[readonly] {
    background: #14140f !important;
    color: var(--mb-text-3) !important;
}

/* 가입/수정 버튼 영역 */
.klon-mb-submit-wrap {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.klon-mb-submit-wrap .klon-mb-btn-main { flex: 1; }
.klon-mb-submit-wrap .klon-mb-btn-line { flex: 0 0 100px; }

/* 우편번호 찾기·인증 등 폼 내 작은 버튼들 — 다크 톤 맞춤 */
.klon-mb .btn:not(.klon-mb-btn) {
    background: var(--mb-border) !important;
    border: 1px solid var(--mb-border-2) !important;
    color: var(--mb-text-2) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}
.klon-mb .btn-outline-warning:not(.klon-mb-btn) {
    background: transparent !important;
    border-color: var(--mb-orange) !important;
    color: var(--mb-orange) !important;
}

/* ---- 약관 동의 화면(register) — fieldset 정렬 ---- */
.klon-mb .fregister_agree {
    border: none;
    margin: 0;
    padding: 0;
}
.klon-mb .fregister_agree .klon-mb-agree { justify-content: flex-end; }
/* 약관 section 간 간격 */
.klon-mb section.card { margin-bottom: 8px; }
.klon-mb section.card .card-body { padding-top: 0 !important; }

/* ---- 약관 동의 화면(register) — 원본 구조에 다크 입히기 ---- */
/* 약관 본문 textarea */
.klon-mb .klon-mb-terms-ta,
.klon-mb #fregister_term textarea {
    width: 100%;
    box-sizing: border-box;
    height: 120px;
    background: var(--mb-input) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: 10px !important;
    color: var(--mb-text-3) !important;
    font-size: 12px;
    line-height: 1.7;
    padding: 14px;
    resize: none;
}
/* section.card 헤더 안 h2 도 초록 섹션 라벨로 */
.klon-mb section.card .card-header h2,
.klon-mb section.card h2.card-header {
    color: var(--mb-green) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.klon-mb section.card { margin-bottom: 10px; }

/* 동의 체크 줄 (원본 fieldset.fregister_agree) */
.klon-mb .fregister_agree {
    border: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.klon-mb .fregister_agree label {
    color: var(--mb-text-2) !important;
    font-size: 13px !important;
    margin: 0 !important;
    order: 1;
}
.klon-mb .fregister_agree input[type="checkbox"] {
    accent-color: var(--mb-green);
    width: 15px; height: 15px;
    order: 2;
}
/* float-right 무력화 (flex로 정렬하므로) */
.klon-mb .fregister_agree.float-right { float: none !important; }

/* 개인정보 테이블 다크 */
.klon-mb .tbl_head01 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--mb-text-3);
}
.klon-mb .tbl_head01 caption { display: none; }
.klon-mb .tbl_head01 th,
.klon-mb .tbl_head01 td {
    border: 1px solid var(--mb-border);
    padding: 8px 10px;
    text-align: left;
}
.klon-mb .tbl_head01 th {
    background: var(--mb-input);
    color: var(--mb-text-2);
    font-weight: 500;
}

/* ---- 회원가입 완료 화면(register_result) ---- */
.klon-mb-result-lead {
    text-align: center;
    font-size: 15px;
    color: var(--mb-text);
    margin: 0 0 22px;
    line-height: 1.6;
}
.klon-mb-result-lead strong { color: var(--mb-green); }
/* 아이디/이메일 표시 박스 */
.klon-mb-result-info {
    background: var(--mb-input);
    border: 1px solid var(--mb-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--mb-text);
}
.klon-mb-result-label {
    display: inline-block;
    min-width: 80px;
    color: var(--mb-text-3);
    font-size: 12px;
}
/* 하단 안내 문구 */
.klon-mb-result-notice {
    border-top: 1px solid var(--mb-border);
    padding-top: 16px;
    margin-bottom: 6px;
}
.klon-mb-result-notice p {
    font-size: 12px;
    color: var(--mb-text-3);
    line-height: 1.7;
    margin: 0 0 8px;
}

/* ---- 주황 경고 박스 (가입완료: 이메일 인증 필수 강조) ---- */
.klon-mb-alert {
    background: rgba(255, 138, 61, 0.12);
    border: 1px solid var(--mb-orange);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 13px;
    color: var(--mb-text-2);
    line-height: 1.75;
}
.klon-mb-alert-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mb-orange);
    margin-bottom: 8px;
}
.klon-mb-alert strong { color: var(--mb-text); }