@charset "utf-8";
@import url("common.css");

.wrapper { width: 100%; height: auto; z-index: 1; }

.account-wrap { width: 400px; min-height: 280px; margin: 50px auto 20px; }
.account-header { display: flex; justify-content: center; }
.account-header img { width: auto; height: 70px; object-fit: contain }

.account-box { width: auto; height: auto; margin-top: 30px; }
.account-box .input-txt { width: 100%; height: 50px; border-radius: 3px; }
.account-box .input-txt + .input-txt { margin-top: 10px; }

.account-option { height: 20px; margin-top: 10px; }
.account-message { height: 20px; margin-top: 10px; color: var(--font-color-red); line-height: 20px; display: none; }
.account-button { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 10px; }
.account-button button { width: 100%; height: 50px; border: 1px solid #be2b30; border-radius: 3px; background: #be2b30; color: #fff; }
.account-button button:hover { border: 1px solid #b2272c; background: #b2272c; }
.account-button button + button { margin-left: 0; }
.account-button .btn-submit { flex: 1 0 0; width: unset; }
.account-button .btn-cancel { flex: 1 0 0; width: unset; border: 1px solid #A6B0B7; background: #fff; color: #333; }
.account-button .btn-cancel:hover { border: 1px solid #A6B0B7; background: #DDDDDD; }
.account-link { margin-top: 10px; display: flex; justify-content: space-between; align-items: center }
.account-link a { font-size: 1.5rem; }

.account-ocl { margin-top: 40px; display: flex; justify-content: space-around; }
.account-ocl button { width: 64px; height: 64px; border-radius: 50%; text-indent: -9999px; overflow:hidden; }
.account-ocl button.google { background: url(../images/ic_google.png) no-repeat center; }
.account-ocl button.naver { background: url(../images/ic_naver.png) no-repeat center; }
.account-ocl button.kakao { background: url(../images/ic_kakao.png) no-repeat center; }
.account-ocl button+button { margin-left: 0; }

.account-footer { margin-top: 30px; }
.account-footer .copyright { font-size: var(--font-size-sm); font-weight: 500; color: var(--font-color-tertiary); text-align: center; }

/** shortcut **/
.shortcut {
    position: fixed; left: 50%; bottom: -250px;
    width: 350px;
    padding: 30px 30px;
    border: 1px solid #B0B0B0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
	overflow: hidden;
    display: none;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateX(-50%) translateZ(0);
    transition: bottom 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
    z-index: 10;
}
.shortcut.on { bottom: 20px;   }
.shortcut .message { display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.shortcut .message .icon { flex: none; width: 48px; height: 48px; border: 0px solid #B0B0B0; border-radius: 10px; background: #fff url(../images/favicon-48x48.png) no-repeat center; }
.shortcut .message span { font-size: 1.8rem; font-weight: 500; line-height: 2.5rem; word-break: keep-all; }
.shortcut .message span b { font-weight: bold; }

/** media **/
@media screen and (max-width: 767px) {
    /* tablet */
    .account-wrap { width: 90% !important; min-width: 300px; margin: 20px auto 20px; }
    .account-box .input-txt { height: 40px; }
    .account-button button { height: 40px; }
    .account-footer .copyright { font-size: var(--font-size-xs); }
}

@media screen and (max-width: 360px) {
    .shortcut { width: 95%; padding: 20px 10px; }
}