@charset "utf-8";

/* ============================================================
   쪽지함 모달 (우측 사이드바 쪽지 아이콘 클릭 시 표시)
   - 기존 .sbc-admin-modal-overlay / .sbc-admin-modal 컨테이너 재사용 (custom-sidebar.css)
   - 본문은 /mypage/memo?bare=1 iframe — **내부 디자인은 mypage.css 가 소유한다**.
     여기에 쪽지함 목록 스타일(행·아바타·배지·필터칩)을 절대 다시 쓰지 말 것:
     같은 화면이 두 벌이 되고 마이페이지 탭과 규격이 갈린다(구 memo.skin.php 전례).
     이 파일이 정하는 건 **모달 껍데기(크기·헤더·여백)** 뿐이다.
   ------------------------------------------------------------
   ⚠ 스코프 규약 (DESIGN_SYSTEM.md §7-5)
   tail.php 가 body 직속으로 출력하므로 #nt_body 밖 → tokens.css 의 var(--*) 가 닿지 않는다.
   로컬 별칭을 .sbc-memo-root 에 두고 var(--토큰, 리터럴) 폴백으로 받는다.
   (:root 선언 금지 — 전역 크롬으로 토큰이 새어든다)
============================================================ */
.sbc-memo-root {
    --memo-card: var(--card, #fff);
    --memo-ink: var(--ink, #1A1D21);
    --memo-muted: var(--muted, #8A9099);
    --memo-line: var(--line, #E5E8EB);
    --memo-font: var(--font-ui, "Paperozi", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif);
}
html.dark-mode .sbc-memo-root {
    --memo-card: #1e2937;
    --memo-ink: #e2e8f0;
    --memo-muted: #7c8798;
    --memo-line: #334155;
}

/* 크기·레이아웃만 재정의 — 라운드·그림자는 공용 .sbc-admin-modal 이 소유한다 */
.sbc-memo-root .sbc-admin-modal.sbc-memo {
    width: 680px;
    max-width: 94vw;
    height: 78vh;
    max-height: 720px;
    background: var(--memo-card);
    display: flex;
    flex-direction: column;
}

.sbc-memo-root .sbc-memo__header {
    flex-shrink: 0;
    font-family: var(--memo-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--memo-ink);
    border-bottom: 1px solid var(--memo-line);
}
.sbc-memo__close {
    background: none;
    border: 0;
    padding: 2px 6px;
    font-size: 22px;
    line-height: 1;
    color: var(--memo-muted);
    cursor: pointer;
}
.sbc-memo__close:hover { color: var(--memo-ink); }

/* iframe 자리 — position:relative 는 로딩 오버레이의 기준이다 */
.sbc-memo__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.sbc-memo__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* iframe 로드 전 자리표시 — 로드되면 JS 가 숨긴다 */
.sbc-memo__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--memo-font);
    font-size: 13px;
    color: var(--memo-muted);
}
.sbc-memo__loading[hidden] { display: none; }

/* 모바일: 여백 최소화한 전체화면에 가깝게 */
@media (max-width: 640px) {
    .sbc-memo-root .sbc-admin-modal.sbc-memo {
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}