/* ============================================================
   쪽지 팝업
   ============================================================ */
.memo-popup-overlay{
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.45); z-index:100000; 
    justify-content:center; align-items:center;
}
.memo-popup-overlay.active{display:flex;}

.memo-popup{
    background:#ffffff; border-radius:14px; width:520px; max-width:100%; max-height:85vh;
    box-shadow:0 8px 32px rgba(0,0,0,0.18); display:flex; flex-direction:column;
    overflow:hidden; position:relative;
}

/* 헤더 */
.memo-popup-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px; border-bottom:1px solid #eee; flex-shrink:0;
}
.memo-popup-title{font-size:17px; font-weight:700; color:#222;}
.memo-popup-title span{color:#5837ff; margin-left:6px; font-size:14px; font-weight:500;}
.memo-popup-close{
    width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-size:22px; color:#999; cursor:pointer; transition:all 0.15s; background:none; border:none;
}
.memo-popup-close:hover{background:#f2f2f2; color:#333;}

/* 액션바 */
.memo-popup-actions{
    display:flex; align-items:center; justify-content:flex-end;
    padding:10px 22px 0; flex-shrink:0;
}
.memo-delete-read-btn{
    font-size:12px; color:#ff5252; border:1px solid #ff5252; background:#fff;
    padding:5px 12px; border-radius:6px; cursor:pointer; transition:all 0.15s; font-weight:500;
}
.memo-delete-read-btn:hover{background:#ff5252; color:#fff;}

/* 목록 영역 */
.memo-popup-body{
    flex:1; overflow-y:auto; padding:10px 22px 18px;
}
.memo-popup-body::-webkit-scrollbar{width:4px;}
.memo-popup-body::-webkit-scrollbar-thumb{background:#ddd; border-radius:4px;}

/* 빈 상태 */
.memo-empty{text-align:center; padding:50px 0; color:#aaa; font-size:14px;}

/* 테이블 */
.memo-table{width:100%; border-collapse:collapse;}
.memo-table th{
    font-size:12px; color:#999; font-weight:500; text-align:left;
    padding:8px 6px; border-bottom:2px solid #eee;
}
.memo-table th.col-status{width:50px; text-align:center;}
.memo-table th.col-title{width:auto;}
.memo-table th.col-date{width:90px; text-align:center;}
.memo-table th.col-action{width:50px; text-align:center;}

/* 행 */
.memo-row{}
.memo-row td{
    padding:10px 6px; border-bottom:1px solid #f4f4f4; font-size:13px; color:#444;
    vertical-align:middle;
}
.memo-row:hover td{background:#fafafa;}
.memo-row.unread td{font-weight:600; color:#222;}

/* 읽음 뱃지 */
.memo-badge{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:#5837ff;
}
.memo-badge.read{background:#ddd;}
.memo-status{text-align:center;}

/* 제목 클릭 */
.memo-title-cell{cursor:pointer; transition:color 0.15s;}
.memo-title-cell:hover{color:#5837ff;}
.memo-title-text{display:inline;}

/* 날짜 */
.memo-date{text-align:center; font-size:12px; color:#aaa; white-space:nowrap;}

/* 삭제 버튼 */
.memo-del-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:6px; border:1px solid #e0e0e0;
    background:#fff; color:#ccc; font-size:14px; cursor:pointer; transition:all 0.15s;
}
.memo-del-btn:hover{border-color:#ff5252; color:#ff5252; background:#fff5f5;}
.memo-del-btn.disabled{opacity:0.3; cursor:not-allowed; pointer-events:none;}

/* 펼쳐진 내용 */
.memo-content-row{display:none;}
.memo-content-row.open{display:table-row;}
.memo-content-cell{
    padding:14px 16px !important; background:#f8f8fc; border-bottom:1px solid #eee;
    font-size:13px; color:#444; line-height:1.65;
}
.memo-content-cell p{margin:0 0 8px;}
.memo-content-cell img{max-width:100%; height:auto;}

/* 페이징 */
.memo-paging{
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:14px 0 4px; flex-shrink:0;
}
.memo-page-btn{
    width:30px; height:30px; border-radius:6px; border:1px solid #e8e8e8;
    background:#fff; color:#666; font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all 0.15s;
}
.memo-page-btn:hover{border-color:#5837ff; color:#5837ff;}
.memo-page-btn.active{background:#5837ff; color:#fff; border-color:#5837ff;}
.memo-page-btn:disabled{opacity:0.3; cursor:not-allowed;}

/* 로딩 */
.memo-loading{text-align:center; padding:40px 0; color:#aaa; font-size:13px;}

/* ─── 모바일 ─── */
@media screen and (max-width:600px){
    .memo-popup{
        width:100%; height:100vh; max-height:100vh;
        border-radius:0;
    }
    .memo-popup-header{padding:14px 16px;}
    .memo-popup-actions{padding:8px 16px 0;}
    .memo-popup-body{padding:8px 16px 16px;}
    .memo-table th.col-date{display:none;}
    .memo-table td.memo-date{display:none;}
}

/* ============================================================
   쪽지 토스트 알림
   ============================================================ */
.memo-toast{
    position:fixed; bottom:24px; right:24px; z-index:100001;
    background:#fff; border-radius:12px; box-shadow:0 6px 28px rgba(0,0,0,0.18);
    padding:18px 20px; display:flex; align-items:center; gap:14px;
    max-width:380px; width:calc(100% - 32px);
    transform:translateY(20px); opacity:0;
    transition:transform 0.3s ease, opacity 0.3s ease;
    border-left:4px solid #5837ff;
}
.memo-toast.show{transform:translateY(0); opacity:1;}

.memo-toast-icon{flex-shrink:0; width:36px; height:36px; background:#f0ecff; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.memo-toast-icon img{width:20px; height:20px; object-fit:contain;}

.memo-toast-text{flex:1; font-size:13px; color:#444; line-height:1.55;}
.memo-toast-text strong{color:#5837ff; font-weight:700;}

.memo-toast-btns{display:flex; flex-direction:column; gap:6px; flex-shrink:0;}
.memo-toast-btn{
    padding:6px 14px; border-radius:6px; font-size:12px; font-weight:600;
    cursor:pointer; border:none; transition:all 0.15s; white-space:nowrap;
}
.memo-toast-read{background:#5837ff; color:#fff;}
.memo-toast-read:hover{background:#4528d9;}
.memo-toast-close{background:#f2f2f2; color:#888;}
.memo-toast-close:hover{background:#e6e6e6; color:#555;}

@media screen and (max-width:600px){
    .memo-toast{
        bottom:16px; right:16px; left:16px; width:auto; max-width:none;
    }
}