/**
 * Shared styles across portal + member/shop (and future pages).
 * Login / OpenID / member card live here — edit once, used by layouts.portal + layouts.member.
 */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.member-slot { width: 167px; margin: 0 auto; }

.login-card {
    position: relative;
    box-sizing: border-box;
    width: 171px;
    margin: 0 auto 8px;
    padding: 50px 8px 8px;
    background: url("../images/comm/bg_login_new2.png") no-repeat left top;
    color: #686868;
    font-size: 12px;
    letter-spacing: -1px;
    text-align: left;
}

.login-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.login-fields { display: inline-block; vertical-align: middle; }

.login-fields label {
    display: block;
    margin: 2px 0;
    text-align: right;
    white-space: nowrap;
    font-size: 12px;
}

.login-fields input {
    box-sizing: border-box;
    width: 64px;
    height: 18px;
    margin-left: 2px;
    padding: 1px 3px;
    border: 1px solid #d1b697;
    background: #fff;
    color: #666;
    font-family: inherit;
    font-size: 11px;
}

.go {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.member-panel {
    width: 167px;
    height: 355px;
    margin: 0 auto 10px;
    background: url("../images/comm/bg_login3_new.png") no-repeat left top;
    color: #000;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -1px;
    text-align: left;
}

.member-photo {
    height: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-photo img { width: 119px; height: 168px; }

.member-meta { padding: 0 10px 0 8px; }

.member-ok {
    box-sizing: border-box;
    width: 148px;
    height: 76px;
    padding: 7px;
    overflow: hidden;
    background: url("../images/comm/login_ok_bg.gif") no-repeat left top;
}

.member-nick { color: #de4204; font-weight: bold; }
.member-ruby { color: #fe5e39; font-weight: bold; }
.member-ok img { vertical-align: middle; }

.member-actions { margin-top: 8px; }
.member-actions a,
.member-actions button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}
.member-actions form { margin: 3px 0 0; }

.save {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 6px 2px 4px;
    font-size: 11px;
    line-height: 15px;
}

.save input { margin: 0; }

.find { display: block; margin: 2px 0 0; line-height: 0; }
.find img { width: 150px; height: 20px; }

.openid {
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    width: 150px;
    height: 63px;
    margin-top: 4px;
    padding: 0 4px 12px;
    background: url("../images/comm/bg_openid_new.png") no-repeat left top;
}

.openid a { line-height: 0; }
.openid img { width: 18px; height: 18px; }