@charset "utf-8";

/*
 * responsive_member for Gnuboard 5
 * Clean, responsive member/login skin
 * Accent color can be changed with --rm-accent.
 */
:root {
    --rm-accent: #2f6473;
    --rm-accent-dark: #244f5b;
    --rm-accent-soft: #edf5f6;
    --rm-text: #202a2d;
    --rm-muted: #738084;
    --rm-line: #e2e8e9;
    --rm-bg: #f7f9f9;
    --rm-card: #ffffff;
    --rm-danger: #d65353;
    --rm-radius: 18px;
    --rm-shadow: 0 16px 42px rgba(38, 62, 67, .08);
}

/* Keep the skin predictable even when a theme contains old member CSS. */
.mbskin,
#fregister,
#fregisterform,
#reg_result,
#mb_confirm,
#find_info,
#pw_reset,
#point,
#memo_list,
#memo_write,
#memo_view,
#profile,
#scrap,
#formmail {
    box-sizing: border-box;
    width: min(100% - 32px, 860px);
    margin: 62px auto;
    color: var(--rm-text);
    font-family: inherit;
    line-height: 1.65;
    word-break: keep-all;
}

.mbskin *,
#fregister *,
#fregisterform *,
#reg_result *,
#mb_confirm *,
#find_info *,
#pw_reset *,
#point *,
#memo_list *,
#memo_write *,
#memo_view *,
#profile *,
#scrap *,
#formmail * { box-sizing: border-box; }

.mbskin_box,
#fregister > form,
#fregisterform,
#reg_result,
#mb_confirm,
#find_info,
#pw_reset,
#profile,
#formmail {
    overflow: hidden;
    border: 1px solid var(--rm-line);
    border-radius: var(--rm-radius);
    background: var(--rm-card);
    box-shadow: var(--rm-shadow);
}

#mb_login { max-width: 470px; }
#mb_login .mbskin_box { padding: 42px 38px 36px; }
#mb_login h1,
.mbskin h1,
#fregister h1,
#fregisterform h1,
#reg_result h1,
#mb_confirm h1,
#find_info h1,
#pw_reset h1 {
    margin: 0 0 26px;
    color: var(--rm-text);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.25;
}

.mb_log_cate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.mb_log_cate h2 { margin: 0; color: var(--rm-text); font-size: 19px; letter-spacing: -.04em; }
.mb_log_cate .join,
#mb_login .join {
    color: var(--rm-accent);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* Form controls */
.mbskin input[type="text"],
.mbskin input[type="password"],
.mbskin input[type="email"],
.mbskin input[type="tel"],
.mbskin input[type="url"],
.mbskin select,
.mbskin textarea,
#fregisterform input[type="text"],
#fregisterform input[type="password"],
#fregisterform input[type="email"],
#fregisterform input[type="tel"],
#fregisterform input[type="url"],
#fregisterform select,
#fregisterform textarea,
#formmail input[type="text"],
#formmail textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--rm-line);
    border-radius: 10px;
    background: #fff;
    color: var(--rm-text);
    font: inherit;
    font-size: 15px;
    outline: none;
    padding: 11px 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.mbskin textarea,
#fregisterform textarea,
#formmail textarea { min-height: 120px; resize: vertical; }
.mbskin input:focus,
.mbskin select:focus,
.mbskin textarea:focus,
#fregisterform input:focus,
#fregisterform select:focus,
#fregisterform textarea:focus,
#formmail input:focus,
#formmail textarea:focus {
    border-color: var(--rm-accent);
    box-shadow: 0 0 0 4px rgba(47, 100, 115, .12);
}
#login_fs { border: 0; margin: 0; padding: 0; }
#login_fs legend,
.sound_only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; margin: -1px !important; padding: 0 !important; border: 0 !important; }
#login_fs .frm_input { margin-top: 10px; }
#login_fs .btn_submit { width: 100%; margin-top: 16px; }

/* Buttons */
.btn_submit,
a.btn_submit,
.btn_confirm .btn_submit,
.btn_confirm button,
.btn_confirm input[type="submit"],
#fregisterform .btn_submit,
#fregister .btn_submit {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rm-accent);
    border-radius: 10px;
    background: var(--rm-accent);
    color: #fff !important;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    padding: 0 22px;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn_submit:hover,
a.btn_submit:hover { border-color: var(--rm-accent-dark); background: var(--rm-accent-dark); }
.btn_cancel,
a.btn_cancel,
.btn_b01,
a.btn_b01,
.btn_b02,
a.btn_b02,
.btn_close,
a.btn_close {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rm-line);
    border-radius: 10px;
    background: #fff;
    color: var(--rm-text) !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 0 18px;
    text-decoration: none !important;
}
.btn_confirm { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 28px; text-align: center; }

/* Login lower row */
#login_info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--rm-muted); font-size: 13px; }
#login_info a { color: var(--rm-muted); text-decoration: none; }
#login_info a:hover { color: var(--rm-accent); }
.chk_box { display: inline-flex; align-items: center; gap: 7px; }
.chk_box input[type="checkbox"],
.chk_box input[type="radio"],
input[type="checkbox"].selec_chk,
input[type="radio"].selec_chk { width: 17px; height: 17px; accent-color: var(--rm-accent); }
.chk_box label { cursor: pointer; }
.chk_box label span { display: none; }

/* Login: optional shop sections */
#mb_login_notmb,
#mb_login_od_wr { margin-top: 26px; border: 1px solid var(--rm-line); border-radius: 16px; background: var(--rm-card); padding: 26px; box-shadow: var(--rm-shadow); }
#mb_login_notmb h2,
#mb_login_od_wr h2 { margin: 0 0 12px; font-size: 19px; }
#guest_privacy { overflow: auto; max-height: 180px; margin: 15px 0; border: 1px solid var(--rm-line); border-radius: 10px; background: var(--rm-bg); padding: 15px; font-size: 13px; }

/* Agreement page */
#fregister { max-width: 900px; }
#fregister > form { padding: 36px; }
#fregister p { color: var(--rm-muted); }
#fregister section { margin-top: 24px; }
#fregister h2,
#fregisterform h2,
.mbskin h2 {
    margin: 0 0 13px;
    color: var(--rm-text);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.04em;
}
#fregister textarea,
#fregister .register_agree,
#fregister .register_agree_box {
    width: 100%;
    min-height: 180px;
    border: 1px solid var(--rm-line);
    border-radius: 12px;
    background: var(--rm-bg);
    color: #566165;
    font-size: 13px;
    line-height: 1.75;
    padding: 16px;
}
#fregister .fregister_agree,
#fregister .chk_all { margin-top: 12px; color: var(--rm-text); font-size: 14px; }
#fregister_private { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
#fregister_private th,
#fregister_private td { border: 1px solid var(--rm-line); padding: 13px 11px; text-align: left; vertical-align: middle; }
#fregister_private th { background: var(--rm-bg); color: #4d5b5e; font-weight: 700; }

/* Register form */
#fregisterform { max-width: 940px; padding: 0 34px 36px; }
#fregisterform h1 { margin: 0 -34px 30px; border-bottom: 1px solid var(--rm-line); background: var(--rm-bg); padding: 30px 34px 22px; }
#fregisterform section { margin-top: 30px; }
#fregisterform .tbl_frm01,
#fregisterform .tbl_frm01 table { width: 100%; border-collapse: collapse; }
#fregisterform .tbl_frm01 th,
#fregisterform .tbl_frm01 td { border-bottom: 1px solid var(--rm-line); padding: 15px 8px; text-align: left; vertical-align: top; }
#fregisterform .tbl_frm01 th { width: 166px; color: #445256; font-size: 14px; font-weight: 700; padding-top: 26px; }
#fregisterform .tbl_frm01 td { color: var(--rm-muted); font-size: 13px; }
#fregisterform .frm_info { display: block; margin-top: 7px; color: var(--rm-muted); font-size: 12px; line-height: 1.55; }
#fregisterform .frm_info:before { content: "• "; color: var(--rm-accent); }
#fregisterform .required { background-image: none; }
#fregisterform .required:focus { background-image: none; }
#fregisterform .full_input { max-width: 100%; }
#fregisterform .half_input { max-width: 390px; }
#fregisterform .frm_address { margin-top: 7px; }
#fregisterform input[type="file"] { max-width: 100%; border: 1px dashed var(--rm-line); border-radius: 10px; background: var(--rm-bg); padding: 12px; }
#fregisterform .btn_frmline,
#fregisterform button.btn_frmline,
#fregisterform input.btn_frmline {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rm-line);
    border-radius: 9px;
    background: var(--rm-bg);
    color: var(--rm-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 0 14px;
}
#fregisterform .cert_btn { margin: 4px 4px 4px 0; }
#fregisterform .reg_mb_img { display: inline-block; margin-top: 8px; }
#fregisterform .reg_mb_img img { max-width: 90px; height: auto; border-radius: 10px; }

/* Consent / optional marketing blocks added in recent versions */
#fregisterform .consent-item,
#fregisterform .consent_box,
#fregisterform .marketing-consent,
#fregisterform .marketing-box,
#fregisterform [class*="consent"] {
    border-radius: 12px;
}
#fregisterform .marketing-sync,
#fregisterform .child-promo { accent-color: var(--rm-accent); }

/* Result, password and confirm pages */
#reg_result,
#mb_confirm,
#find_info,
#pw_reset { max-width: 570px; padding: 38px; }
#reg_result p,
#mb_confirm p,
#find_info p,
#pw_reset p { color: var(--rm-muted); font-size: 14px; }
#reg_result .reg_result_p { border: 1px solid var(--rm-line); border-radius: 12px; background: var(--rm-bg); padding: 18px; }
#mb_confirm fieldset,
#find_info fieldset,
#pw_reset fieldset { border: 0; margin: 0; padding: 0; }
#mb_confirm .frm_input,
#find_info .frm_input,
#pw_reset .frm_input { margin-top: 9px; }

/* Popup/list style member utilities */
#point,
#memo_list,
#memo_write,
#memo_view,
#scrap { max-width: 900px; }
#point h1,
#memo_list h1,
#memo_write h1,
#memo_view h1,
#scrap h1,
#profile h1,
#formmail h1 { margin: 0 0 20px; font-size: 24px; letter-spacing: -.04em; }
.rm-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rm-table-scroll table { min-width: 600px; }
#point table,
#memo_list table,
#scrap table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--rm-accent); background: #fff; }
#point th,
#point td,
#memo_list th,
#memo_list td,
#scrap th,
#scrap td { border-bottom: 1px solid var(--rm-line); padding: 13px 10px; font-size: 13px; text-align: center; }
#point th,
#memo_list th,
#scrap th { background: var(--rm-bg); color: #4d5b5e; font-weight: 700; }
#memo_write,
#memo_view,
#profile,
#formmail { border: 1px solid var(--rm-line); border-radius: var(--rm-radius); background: #fff; padding: 30px; box-shadow: var(--rm-shadow); }

/* General links and notices */
.mbskin a,
#fregister a,
#fregisterform a,
#point a,
#memo_list a,
#memo_write a,
#memo_view a,
#profile a,
#scrap a,
#formmail a { color: var(--rm-accent); }
.required_mark,
.required { color: inherit; }
.msg_sound_only,
#captcha_info { color: var(--rm-muted); font-size: 12px; }
.rm-install-error { max-width: 760px; margin: 50px auto; border: 1px solid #efcaca; border-radius: 12px; background: #fff7f7; color: #7d3939; padding: 20px; font-size: 14px; line-height: 1.7; }

/* Captcha */
#captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#captcha img { max-width: 100%; height: auto; }
#captcha #captcha_key { width: 150px; }

/* Mobile */
@media (max-width: 720px) {
    .mbskin,
    #fregister,
    #fregisterform,
    #reg_result,
    #mb_confirm,
    #find_info,
    #pw_reset,
    #point,
    #memo_list,
    #memo_write,
    #memo_view,
    #profile,
    #scrap,
    #formmail { width: min(100% - 22px, 100%); margin: 30px auto; }

    #mb_login .mbskin_box { padding: 30px 20px 24px; }
    #mb_login h1,
    .mbskin h1,
    #fregister h1,
    #fregisterform h1,
    #reg_result h1,
    #mb_confirm h1,
    #find_info h1,
    #pw_reset h1 { font-size: 23px; }

    #fregister > form { padding: 22px 16px; }
    #fregisterform { padding: 0 16px 24px; }
    #fregisterform h1 { margin: 0 -16px 22px; padding: 23px 16px 17px; }
    #fregisterform .tbl_frm01 th,
    #fregisterform .tbl_frm01 td { display: block; width: 100%; border-bottom: 0; padding: 0; }
    #fregisterform .tbl_frm01 th { padding-top: 18px; padding-bottom: 7px; }
    #fregisterform .tbl_frm01 td { border-bottom: 1px solid var(--rm-line); padding-bottom: 16px; }
    #fregisterform .btn_frmline { margin-top: 7px; }
    #fregisterform .half_input { max-width: 100%; }

    #reg_result,
    #mb_confirm,
    #find_info,
    #pw_reset,
    #memo_write,
    #memo_view,
    #profile,
    #formmail { padding: 23px 18px; }
    #login_info { align-items: flex-start; flex-direction: column; gap: 8px; }
    .btn_confirm .btn_submit,
    .btn_confirm .btn_cancel,
    .btn_confirm a { flex: 1 1 120px; }
    #fregister_private { min-width: 620px; }
}

@media (max-width: 390px) {
    #mb_login .mbskin_box { padding-right: 16px; padding-left: 16px; }
    .mb_log_cate { align-items: flex-start; flex-direction: column; gap: 5px; }
    .btn_confirm { gap: 7px; }
}