/*
 * 로그인 정보창 — 알림 · 쪽지 · 작성글 · 스크랩 · 공지 탭 (central-member-panel.js).
 * 기존 .qz-user-card 를 바탕으로 카드 안쪽 여백을 걷고, 머리·탭·목록에 각자 여백을 준다.
 * 목록 칸은 높이를 고정한다 — 탭을 바꿀 때마다 오른쪽 칸 아래 위젯이 오르내리지 않게.
 */

.qz-site .qz-user-card.qz-mc {
    padding: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------ 머리 */

.qz-mc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 15px;
}

.qz-site .qz-mc .qz-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    background: linear-gradient(140deg, #ffb43c, #ff6a00);
    color: #272727;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qz-mc-who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qz-mc-who > b {
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qz-mc-meta {
    min-width: 0;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--qz-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qz-mc-meta > [data-qz-mc-points] {
    color: var(--qz-dim);
}

.qz-mc-meta > [data-qz-mc-points]::before {
    content: "·";
    margin: 0 5px;
    color: var(--qz-muted);
}

.qz-mc-meta > [hidden] {
    display: none;
}

.qz-mc-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qz-site .qz-mc-button {
    min-width: 78px;
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #8d8d8d;
    border-radius: 6px;
    font-size: 12.5px;
    color: #eee;
    white-space: nowrap;
}

.qz-site .qz-mc-button:hover {
    border-color: var(--qz-accent);
    color: #fff;
}

.qz-site .qz-mc-button.is-muted {
    border-color: #3f3f3f;
    background: #3f3f3f;
    color: #d0d0d0;
}

.qz-site .qz-mc-button.is-muted:hover {
    border-color: #4c4c4c;
    background: #4c4c4c;
    color: #fff;
}

.qz-site .qz-mc-button:disabled {
    opacity: .5;
    cursor: default;
}

/* ------------------------------------------------------------ 탭 */

.qz-mc-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--qz-line);
}

.qz-site .qz-mc-tabs > [role="tab"] {
    height: 46px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-left: 1px solid var(--qz-line);
    border-bottom: 1px solid var(--qz-line);
    font-size: 13.5px;
    color: var(--qz-text);
    white-space: nowrap;
}

.qz-site .qz-mc-tabs > [role="tab"]:first-child {
    border-left: 0;
}

.qz-site .qz-mc-tabs > [role="tab"]:hover {
    background: rgba(255, 255, 255, .03);
    color: #fff;
}

/* 접혀 있을 때(처음 상태) 탭 줄이 카드의 끝이다. 펼친 탭에만 위·아래 방향 표시를 단다. */
.qz-site .qz-mc-tabs > [role="tab"]::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .45;
    transition: transform .15s;
}

.qz-site .qz-mc-tabs > [role="tab"][aria-expanded="true"]::after {
    transform: rotate(180deg);
    opacity: .9;
}

.qz-mc-panel[hidden] {
    display: none !important;
}

/* 고른 탭은 아래 목록과 이어져 보이게 밑줄을 걷는다. */
.qz-site .qz-mc-tabs > [role="tab"][aria-selected="true"] {
    border-bottom-color: transparent;
    color: var(--qz-accent);
    font-weight: 700;
}

.qz-site .qz-mc-tabs > [role="tab"]:focus-visible {
    outline: 2px solid var(--qz-accent);
    outline-offset: -2px;
}

.qz-mc-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--qz-accent);
}

.qz-mc-dot[hidden] {
    display: none;
}

/* ------------------------------------------------------------ 목록 칸 */

.qz-mc-panel {
    height: 300px;
    display: flex;
    flex-direction: column;
    transition: opacity .15s;
}

.qz-mc-panel.is-busy {
    opacity: .55;
}

.qz-mc-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 12px 9px 14px;
}

.qz-site .qz-mc-bar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    color: var(--qz-dim);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qz-mc-bar-title b {
    font-weight: 700;
    color: #fff;
}

.qz-mc-bar-title em {
    font-style: normal;
    font-weight: 700;
    color: var(--qz-accent);
}

.qz-mc-bar-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.qz-site .qz-mc-bar-btn {
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    background: #3f3f3f;
    color: #d6d6d6;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.qz-site .qz-mc-bar-btn:hover {
    background: #4c4c4c;
    color: #fff;
}

.qz-site .qz-mc-bar-btn:disabled {
    opacity: .45;
    cursor: default;
}

.qz-mc-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid var(--qz-line-soft);
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

.qz-site .qz-mc-empty {
    margin: 0;
    padding: 44px 16px 14px;
    text-align: center;
    font-size: 12.5px;
    line-height: 19px;
    color: var(--qz-muted);
}

.qz-mc-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 글·스크랩·공지 한 줄 */
.qz-site .qz-mc-post,
.qz-site .qz-mc-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--qz-line-soft);
    font-size: 13px;
    color: var(--qz-text);
}

.qz-site .qz-mc-post:hover,
.qz-site .qz-mc-notice:hover {
    background: rgba(255, 255, 255, .03);
    color: #fff;
}

.qz-mc-chip {
    flex: 0 0 auto;
    max-width: 86px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--qz-chip);
    color: var(--qz-dim);
    font-size: 11px;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qz-mc-post-title,
.qz-mc-notice-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qz-mc-reply {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--qz-accent);
}

.qz-mc-time {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--qz-muted);
}

/* 공지: 고정은 압정, 나머지는 점. */
.qz-mc-notice-mark {
    flex: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #ff6f4f;
}

.qz-mc-notice:not(.is-pinned) .qz-mc-notice-mark::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--qz-accent);
}

.qz-mc-notice.is-pinned .qz-mc-notice-title {
    font-weight: 600;
}

/* 공지사항 게시판 글의 카테고리 이름표(관리자가 정한 카테고리가 있을 때만 붙는다). */
.qz-mc-notice-tag {
    flex: 0 0 auto;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(133, 193, 255, .14);
    color: var(--qz-blue);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
}

.qz-mc-new {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--qz-accent-strong);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* 쪽지 한 통 */
.qz-mc-msg {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--qz-line-soft);
}

.qz-mc-msg:hover {
    background: rgba(255, 255, 255, .03);
}

.qz-site .qz-mc-msg-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 10px 14px;
}

.qz-mc-msg-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: #3a3a3a;
    color: #eee;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qz-mc-msg-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.qz-mc-msg-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--qz-muted);
    white-space: nowrap;
}

.qz-mc-msg-meta b {
    min-width: 0;
    font-weight: 600;
    color: var(--qz-dim);
    overflow: hidden;
    text-overflow: ellipsis;
}

.qz-mc-msg.is-unread .qz-mc-msg-meta b::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 4px 2px 0;
    border-radius: 50%;
    background: var(--qz-accent);
    vertical-align: middle;
}

.qz-mc-msg-text {
    font-size: 13px;
    color: #c9c9c9;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qz-mc-msg.is-unread .qz-mc-msg-text {
    font-weight: 600;
    color: #fff;
}

.qz-site .qz-mc-x {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--qz-muted);
}

.qz-site .qz-mc-x:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.qz-site .qz-mc-x:disabled {
    opacity: .4;
    cursor: default;
}

/* 알림은 헤더 팝업과 같은 줄을 쓴다. 칸 안에 맞게 여백을 줄이고, 시각은 카드 바탕에서 읽히게 밝힌다. */
.qz-site .qz-mc-list .qz-noti-item {
    align-items: flex-start;
    padding: 10px 14px;
}

.qz-mc-list .qz-noti-copy small {
    color: var(--qz-muted);
}

.qz-site .qz-mc-list .qz-noti-appeal {
    align-self: center;
}

.qz-mc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 사이트관리 단추는 카드 아래쪽에 여백을 두고 붙는다(관리 권한이 있을 때만 보인다). */
.qz-site .qz-mc > .qz-site-admin-link {
    margin: 10px 12px 12px;
}