@charset "utf-8";

/*
 * 24TK X compatibility layer for GnuBoard's standard member/authentication
 * skins. It is intentionally body-scoped and loaded after the selected skin,
 * so core and shared skin files remain untouched.
 */

.tkx-auth-page {
    min-width: 20rem;
    background: var(--tkx-canvas);
    color: var(--tkx-text);
}

.tkx-auth-header {
    border-bottom: 0.0625rem solid var(--tkx-border-subtle);
    background: var(--tkx-canvas);
    box-shadow: 0 0.25rem 1.25rem var(--tkx-shadow);
}

.tkx-auth-header-inner {
    display: flex;
    width: calc(100% - 2rem);
    max-width: 64rem;
    min-height: 4.25rem;
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--tkx-space-4);
}

.tkx-auth-main {
    width: calc(100% - 2rem);
    max-width: 64rem;
    min-height: calc(100vh - 4.3125rem);
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 5rem);
}

.tkx-auth-page :where(.mbskin, .register, #register_form, #reg_result, #find_info, #pw_reset, #member_cert_refresh) {
    max-width: 100%;
    color: var(--tkx-text);
}

.tkx-auth-page .mbskin {
    width: min(100%, 28rem);
    margin: 0 auto;
    text-align: left;
}

.tkx-auth-page .register,
.tkx-auth-page #register_form,
.tkx-auth-page #reg_result,
.tkx-auth-page #member_cert_refresh {
    width: min(100%, 58rem);
    margin-inline: auto;
}

.tkx-auth-page :where(
    .mbskin_box,
    #register_form,
    .register_form_inner,
    #fregister section,
    #fregister_chkall,
    .fregister_terms > div,
    #reg_result,
    #reg_result #result_email,
    #find_info .new_win_con,
    #member_cert_refresh section,
    #member_cert_refresh_chkall,
    #member_cert_refresh_private > div,
    #mb_login_notmb,
    #mb_login_od_wr,
    #mb_login_odinfo,
    #flogin
) {
    border-color: var(--tkx-border) !important;
    background: var(--tkx-surface) !important;
    color: var(--tkx-text) !important;
}

.tkx-auth-page :where(
    #fregister h2,
    #register_form h2,
    #member_cert_refresh h2,
    #fregister_terms h2,
    #mb_login_notmb h2,
    #mb_login_od_wr h2
) {
    border-color: var(--tkx-border-subtle) !important;
    background: var(--tkx-surface-raised) !important;
    color: var(--tkx-text) !important;
}

.tkx-auth-page :where(
    .mbskin,
    .register,
    #register_form,
    #reg_result,
    #find_info,
    #pw_reset,
    #member_cert_refresh
) :where(h1, h2, h3, h4, p, label, legend, li, dt, dd, th, td, strong, span) {
    color: inherit;
}

.tkx-auth-page :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
    select,
    textarea,
    .frm_input,
    .fileName
) {
    min-height: var(--tkx-target);
    border: 0.125rem solid var(--tkx-border) !important;
    border-radius: var(--tkx-radius-sm) !important;
    background-color: var(--tkx-surface) !important;
    color: var(--tkx-text) !important;
    box-shadow: none !important;
}

.tkx-auth-page :where(input, textarea)::placeholder {
    color: var(--tkx-text-muted) !important;
    opacity: 1;
}

.tkx-auth-page :where(.btn_submit, .reg_btn_submit, .btn_frmline) {
    min-height: var(--tkx-target) !important;
    border: 0.125rem solid var(--tkx-accent-fill) !important;
    border-radius: var(--tkx-radius-sm) !important;
    background: var(--tkx-accent-fill) !important;
    color: var(--tkx-on-accent) !important;
    font-weight: 800;
}

.tkx-auth-page :where(.btn_cancel, .btn_close, .btn_b01, .btn_01) {
    min-height: var(--tkx-target) !important;
    border: 0.125rem solid var(--tkx-border) !important;
    border-radius: var(--tkx-radius-sm) !important;
    background: var(--tkx-surface-raised) !important;
    color: var(--tkx-text) !important;
}

.tkx-auth-page :where(a, button, input, select, textarea):focus-visible,
.tkx-auth-page input[type="checkbox"]:focus-visible + label,
.tkx-auth-page input[type="radio"]:focus-visible + label {
    outline: 0.1875rem solid var(--tkx-focus) !important;
    outline-offset: 0.1875rem !important;
}

.tkx-auth-page :where(
    #login_password_lost,
    .mb_login_join a,
    .mb_log_cate a,
    .js-open-consent,
    #reg_result a
) {
    display: inline-flex;
    min-height: var(--tkx-target);
    align-items: center;
    border-color: var(--tkx-border) !important;
    color: var(--tkx-accent-text) !important;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
}

.tkx-auth-page .mb_log_cate .join {
    background: var(--tkx-surface-raised) !important;
    color: var(--tkx-text-secondary) !important;
}

.tkx-auth-page :where(#guest_privacy, #mb_login_od_wr p, .tooltip, .new_win_con) {
    border-color: var(--tkx-border) !important;
    background: var(--tkx-surface-raised) !important;
    color: var(--tkx-text-secondary) !important;
}

.tkx-auth-page :where(#fregister p, #member_cert_refresh p) {
    height: auto;
    min-height: 3.125rem;
    border: 0.125rem solid var(--tkx-danger) !important;
    background: var(--tkx-surface-raised) !important;
    color: var(--tkx-danger) !important;
    line-height: 1.5;
}

.tkx-auth-page :where(#fregister p, #member_cert_refresh p)::before {
    background: var(--tkx-danger) !important;
}

.tkx-auth-page :where(
    #fregister textarea,
    #member_cert_refresh textarea,
    .fregister_terms table th,
    .fregister_terms table td,
    #member_cert_refresh_private table th,
    #member_cert_refresh_private table td
) {
    border-color: var(--tkx-border) !important;
    background: var(--tkx-surface) !important;
    color: var(--tkx-text) !important;
}

.tkx-auth-page :where(.fregister_terms table th, #member_cert_refresh_private table th) {
    background: var(--tkx-surface-raised) !important;
}

.tkx-auth-page :where(
    .fregister_agree,
    .member_cert_refresh_agree,
    .chk_box
) input[type="checkbox"] + label {
    color: var(--tkx-text-secondary) !important;
}

.tkx-auth-page :where(
    .fregister_agree,
    .member_cert_refresh_agree,
    .chk_box
) input[type="checkbox"] + label span {
    border: 0.125rem solid var(--tkx-border) !important;
    background-color: var(--tkx-surface) !important;
}

.tkx-auth-page :where(
    .fregister_agree,
    .member_cert_refresh_agree,
    .chk_box
) input[type="checkbox"]:checked + label {
    color: var(--tkx-text) !important;
}

.tkx-auth-page :where(
    .fregister_agree,
    .member_cert_refresh_agree,
    .chk_box
) input[type="checkbox"]:checked + label span {
    border-color: var(--tkx-accent-fill) !important;
    background-color: var(--tkx-accent-fill) !important;
}

.tkx-auth-page :where(#msg_certify, .cert_desc, #find_info #info_fs p, .reg_result_p) {
    border-color: var(--tkx-info) !important;
    background: var(--tkx-surface-raised) !important;
    color: var(--tkx-info) !important;
}

.tkx-auth-page :where(.tooltip_icon, .memo_datetime, .memo_view_date) {
    color: var(--tkx-text-muted) !important;
}

@media (max-width: 40rem) {
    .tkx-auth-header-inner {
        display: grid;
        width: calc(100% - 1.5rem);
        padding-block: var(--tkx-space-3);
    }

    .tkx-auth-header-inner .tkx-theme-control {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .tkx-auth-main {
        width: calc(100% - 1.5rem);
        padding-block: var(--tkx-space-5);
    }

    .tkx-auth-page :where(.register, #register_form, #reg_result, #member_cert_refresh) {
        padding-inline: 0 !important;
    }

    .tkx-auth-page :where(.btn_confirm, .find_btn) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tkx-space-3);
    }

    .tkx-auth-page :where(.btn_confirm, .find_btn) > :where(a, button, input) {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
}

@media (forced-colors: active) {
    .tkx-auth-page,
    .tkx-auth-header,
    .tkx-auth-page :where(.mbskin_box, section, .register_form_inner, #register_form, #reg_result, #find_info, #pw_reset) {
        border-color: CanvasText !important;
        background: Canvas !important;
        color: CanvasText !important;
        box-shadow: none !important;
    }

    .tkx-auth-page :where(input, select, textarea, button, a) {
        forced-color-adjust: auto;
    }

    .tkx-auth-page :where(a, button, input, select, textarea):focus-visible {
        outline-color: Highlight !important;
    }
}