@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 이 소유한다.
   폭 500px (2026-08-18, 구 560px 에서 축소 — PC 에서 과하다는 요청).
   ⚠ 구 주석이 560px 을 "한 행이 줄바꿈 없이 들어가는 하한" 이라고 적어 뒀었다. 줄인 만큼
     미리보기(.sbc-mp-memo__preview) 말줄임이 조금 더 일찍 걸리고 대화 말풍선(max-width:75%)이
     더 자주 두 줄이 된다 — 의도한 절충이다. 더 줄이면 닉네임+시각 줄까지 흔들리니
     여기서 멈춘다. 되돌리려면 이 한 줄만 560px 으로. */
.sbc-memo-root .sbc-admin-modal.sbc-memo {
    width: 500px;
    max-width: 94vw;
    /* vh 먼저 → dvh 로 덮기(앞 vh 는 dvh 미지원 폴백. 순서 뒤집으면 폴백이 사라진다).
       DESIGN_SYSTEM.md §12.6. ≤640px 는 아래 미디어쿼리에서 height:100% 로 갈아타므로
       이 값은 사실상 데스크톱 전용이지만, 관용구를 깨두면 다음 사람이 복사해 간다. */
    height: 70vh;
    height: 70dvh;
    max-height: 620px;
    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);
}
/* 제목(「메세지함」) 18px 은 공용 .sbc-admin-modal-header span 이 준다 (custom-sidebar.css).
   2026-08-18 사이트 모달 제목 18px 통일로 이 모달 전용 확대 레이어는 제거했다 — 되살리지 말 것.
   위 __header 의 15px 은 span 이 아닌 나머지 텍스트용이라 제목에는 닿지 않는다. */
.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 는 로딩 오버레이의 기준이다.

   ⚠ overflow-y:auto 는 장식이 아니다 — 빼지 말 것.
   iOS(사파리·크롬 모두 WebKit) 는 iframe 의 height 를 무시하고 콘텐츠 높이만큼 늘린다.
   여기가 스크롤러가 아니면 늘어난 부분이 부모 .sbc-admin-modal 의 overflow:hidden 에 잘려
   쪽지보내기 폼 하단 버튼에 못 닿는다. 아이패드처럼 넓은 iOS 기기가 이 PC 모달을 쓴다.
   모바일 시트(custom-sidebar.css 의 .sbc-myinfo-doc)와 같은 처방이니 함께 유지할 것. */
.sbc-memo__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.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;
    }
}