@charset "utf-8";

/* =========================================================
   NSCARE MEMBER DOCK
   - 콘텐츠와 안 겹치게 오른쪽 바깥 여백
   - 스크롤하면 부드럽게 위/아래 따라옴
   - 메뉴 한 줄 유지
========================================================= */


/* =========================================================
   기존 그누보드 로그인 박스 숨김
========================================================= */

#aside #ol_after,
#aside .ol_after,
#ol_after {
    display: none !important;
}


/* =========================================================
   회원카드 위치
========================================================= */

#nscareMemberDock {
    /*
     * PHP의 JS에서 absolute + top 값을 계속 변경함.
     * 여기에서 fixed를 사용하면 움직이는 느낌이 없어지므로
     * absolute를 기본값으로 사용.
     */

    position: absolute !important;

    top: 140px;

    right: max(
        12px,
        calc((100vw - 1280px) / 2 - 216px)
    );

    z-index: 9999;

    width: 204px;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box;

    transform: none !important;

    will-change: top;
}


#nscareMemberDock,
#nscareMemberDock * {
    box-sizing: border-box;
}


/* =========================================================
   카드
========================================================= */

.nscare-member-dock-card {
    width: 100%;

    padding: 13px;

    overflow: hidden;

    border: 1px solid #dfe8e3;

    border-radius: 20px;

    background: rgba(
        255,
        255,
        255,
        0.97
    );

    box-shadow:
        0 14px 36px rgba(25, 50, 35, 0.10),
        0 2px 8px rgba(25, 50, 35, 0.05);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   회원정보
========================================================= */

.nscare-member-dock-head {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    padding-bottom: 12px;

    border-bottom: 1px solid #edf2ef;
}


.nscare-member-avatar {
    position: relative;

    display: flex;

    flex: 0 0 42px;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #18a861 0%,
            #0d874f 100%
        );

    color: #fff;

    box-shadow:
        0 6px 16px rgba(24, 168, 97, 0.18);
}


.nscare-member-initial {
    color: #fff;

    font-size: 16px;
    font-weight: 900;

    line-height: 1;
}


.nscare-member-profile-image {
    width: 42px;
    height: 42px;

    overflow: hidden;

    border-radius: 14px;

    background: #edf3ef;
}


.nscare-member-profile-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover;

    border-radius: inherit;
}


.nscare-member-status {
    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 12px;
    height: 12px;

    border: 2px solid #fff;

    border-radius: 50%;

    background: #18a861;
}


.nscare-member-welcome {
    display: flex;

    min-width: 0;

    flex: 1;

    flex-direction: column;

    align-items: flex-start;
}


.nscare-member-welcome-label {
    margin-bottom: 2px;

    color: #9aa39d;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.2;
}


.nscare-member-welcome-name {
    display: block;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    color: #1e2a22;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;

    letter-spacing: -0.2px;
}


.nscare-member-welcome-name em {
    color: #18a861;

    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}


.nscare-member-welcome-desc {
    display: inline-flex;

    align-items: center;

    max-width: 100%;

    min-height: 18px;

    margin-top: 4px;

    padding: 0 7px;

    border-radius: 999px;

    background: #edf8f2;

    color: #258258;

    font-size: 8px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   포인트
========================================================= */

.nscare-member-point {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    min-height: 44px;

    margin-top: 12px;

    padding: 0 10px;

    border: 1px solid #dcefe4;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f1faf5 0%,
            #f8fcfa 100%
        );

    color: #26342c !important;

    text-decoration: none !important;

    transition:
        border-color .15s ease,
        background .15s ease;
}


.nscare-member-point:hover {
    border-color: #b8dfc8;

    background: #eef9f3;
}


.nscare-member-point-left {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #556159;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}


.nscare-member-point-icon {
    display: inline-flex;

    flex: 0 0 25px;

    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 8px;

    background: #fff;

    color: #18a861;
}


.nscare-member-point-icon svg {
    width: 14px;
    height: 14px;

    overflow: visible;
}


.nscare-member-point-icon svg circle {
    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}


.nscare-member-point-icon svg path {
    fill: currentColor;
}


.nscare-member-point strong {
    flex: 0 0 auto;

    color: #18a861;

    font-size: 13px;
    font-weight: 900;

    white-space: nowrap;
}


.nscare-member-point strong small {
    font-size: 8px;
    font-weight: 800;
}


/* =========================================================
   메뉴
========================================================= */

.nscare-member-menu {
    display: flex;

    flex-direction: column;

    gap: 2px;

    margin-top: 10px;
}


.nscare-member-menu-item {
    display: flex;

    align-items: center;

    gap: 7px;

    width: 100%;

    min-width: 0;
    min-height: 44px;

    padding: 5px;

    border-radius: 12px;

    color: #28352d !important;

    text-decoration: none !important;

    transition:
        background .15s ease,
        color .15s ease;
}


.nscare-member-menu-item:hover {
    background: #f3f9f5;

    color: #118b51 !important;
}


.nscare-member-menu-icon {
    display: inline-flex;

    flex: 0 0 29px;

    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border: 1px solid #e0eee6;

    border-radius: 10px;

    background: #f1f9f5;

    color: #159a59;
}


.nscare-member-menu-icon svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.nscare-member-menu-copy {
    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    overflow: hidden;
}


.nscare-member-menu-copy strong {
    display: block;

    width: 100%;

    overflow: hidden;

    color: inherit;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.2px;

    white-space: nowrap;

    text-overflow: ellipsis;

    word-break: keep-all;
}


.nscare-member-menu-copy small {
    display: block;

    width: 100%;

    margin-top: 2px;

    overflow: hidden;

    color: #9aa29e;

    font-size: 8px;
    font-weight: 500;

    line-height: 1.2;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.nscare-member-menu-arrow {
    display: inline-flex;

    flex: 0 0 10px;

    align-items: center;
    justify-content: center;

    width: 10px;

    color: #bbc4be;

    font-size: 13px;

    line-height: 1;
}


/* =========================================================
   하단 버튼
========================================================= */

.nscare-member-dock-actions {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 6px;

    margin-top: 12px;

    padding-top: 12px;

    border-top: 1px solid #edf2ef;
}


.nscare-member-dock-actions
.nscare-member-action:only-child {
    grid-column: 1 / -1;
}


.nscare-member-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    height: 34px;

    padding: 0 7px;

    border-radius: 10px;

    font-size: 9px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none !important;
}


.nscare-member-action svg {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.nscare-member-action-admin {
    border: 1px solid #cde6d8;

    background: #f0f9f4;

    color: #168451 !important;
}


.nscare-member-action-admin:hover {
    background: #e7f6ed;
}


.nscare-member-action-logout {
    border: 1px solid #e0e5e2;

    background: #fff;

    color: #68736c !important;
}


.nscare-member-action-logout:hover {
    background: #f7f9f8;

    color: #313c35 !important;
}


/* =========================================================
   넓은 PC
========================================================= */

@media (min-width: 1800px) {

    #nscareMemberDock {
        right:
            calc(
                (100vw - 1280px) / 2 - 222px
            );
    }

}


/* =========================================================
   좁은 화면에서는 콘텐츠 겹침 방지
========================================================= */

@media (max-width: 1660px) {

    #nscareMemberDock {
        display: none !important;
    }

}


/* =========================================================
   인쇄 제외
========================================================= */

@media print {

    #nscareMemberDock {
        display: none !important;
    }

}