/* ================================================================================
   JCI 관리자 웹 — 푸시 발송 화면 (지시서 33 · 사장님 2026-10-31)
   한 화면 흐름: ① 무엇을 알릴까요 → ② 알림 글 → ③ 누구에게 · 언제  +  아래 3열(예약 · 웹 · 앱).

   ── 새 색 · 새 글꼴을 만들지 않는다 ──────────────────────────────────────────────
   · 색은 admin.css 토큰(--c-*)과 문서 테마(theme-doc.css)의 --doc-* 만 쓴다.
     --doc-* 는 문서 테마가 켜졌을 때만 있으므로 'var(--doc-…, 기본 테마 값)' 한 줄로 두 테마를 같이 맞춘다
     (예전 push.js 안 <style> 과 같은 방식 — 이 파일로 옮겼다).
   · 모서리는 --card-radius(기본 16px · 문서 테마 0px)에서 끌어온다 → 기본 테마는 둥글게, 문서 테마는 각지게(2~3px).
   · '고른 것' 표시는 한 가지 — 왼쪽 3px 주색 줄 + 옅은 바탕(① 목록 줄 · ② 연결 칩 · ③ 받는 사람). 같은 표시가
     같은 뜻(지금 고른 것 · 지금 연결된 것)이 되게.
   · 모든 규칙은 .push-wrap 아래 — 다른 화면에 새지 않는다. index.html 에서 theme-doc.css 보다 먼저 읽힌다.
   · 한글 어절 끊김 금지(word-break: keep-all · overflow-wrap: anywhere) · 글자 13px 이상 · 누르는 곳 높이 40px 이상.
   ================================================================================ */

.push-wrap {
    --push-ink:      var(--doc-ink, var(--c-text));
    --push-ink-2:    var(--doc-ink-2, var(--c-text-sub));
    --push-ink-3:    var(--doc-ink-3, var(--c-text-hint));
    --push-head:     var(--doc-head, var(--c-text));
    --push-accent:   var(--doc-navy, var(--c-brand-strong));
    --push-rule:     var(--doc-rule, var(--c-border));
    --push-rule-2:   var(--doc-rule-2, #EEF0F2);
    --push-paper:    var(--doc-paper, #FFFFFF);
    --push-soft:     var(--doc-tint-2, #FAFBFC);
    --push-hover:    var(--doc-tint, rgba(11, 134, 198, 0.06));
    --push-sel-bg:   var(--doc-tint, var(--c-brand-tint));
    --push-sel-line: var(--doc-navy, var(--c-brand-strong));
    --push-warn:     var(--doc-warn, #92400E);
    --push-r:        clamp(3px, calc(var(--card-radius, 16px) * 0.625), 10px);   /* 기본 10px · 문서 3px */
    --push-r-sm:     clamp(2px, calc(var(--card-radius, 16px) * 0.5), 8px);      /* 기본 8px · 문서 2px */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.push-wrap .push-head { margin-bottom: 20px; }
.push-wrap .push-head h2 { margin: 0; }
.push-wrap .push-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--push-ink-2); }

/* ── 위 3단 흐름 — 넓으면 3열(① 1 · ② 1.15 · ③ 1) · 1024~1439 는 ①② 위 · ③ 아래 전체 폭 · 좁으면 ①②③ 세로 ── */
.push-wrap .push-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "src" "text" "who";
    gap: 20px;
    margin-bottom: 28px;
}
.push-wrap .push-step-src  { grid-area: src; }
.push-wrap .push-step-text { grid-area: text; }
.push-wrap .push-step-who  { grid-area: who; container-type: inline-size; container-name: pushwho; }

@media (min-width: 1024px) {
    .push-wrap .push-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "src text" "who who";
        gap: 24px;
    }
}
/* ≥1440 도 ①② 위 · ③ 아래 전체 폭 — ③ 안에 '받는 사람 | 보낼 명단' 두 칸이 들어가야 해서(사장님 11-03 · 예전 = 3열) */
@media (min-width: 1440px) {
    .push-wrap .push-flow {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-areas: "src text" "who who";
        gap: 28px;
    }
}

/* 카드 — 모양은 테마의 .card / .card-header / .card-body 그대로. 칸 안 초점 테두리가 잘리지 않게 overflow 만 풀어 둔다 */
.push-wrap .push-step { display: flex; flex-direction: column; min-width: 0; overflow: visible; }
.push-wrap .push-step > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.push-wrap .push-step-text > .card-body { gap: 16px; }
.push-wrap .push-step-title { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }

/* 단계 번호 — 기본 테마 = 연한 주색 동그라미 · 문서 테마 = 먹색 테두리 네모 */
.push-wrap .push-no,
.push-wrap .push-ref {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--doc-head, transparent);
    border-radius: clamp(2px, calc(var(--card-radius, 16px) * 0.75), 12px);
    background: var(--doc-paper, var(--c-brand-tint));
    color: var(--doc-head, var(--c-brand-strong));
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.push-wrap .push-no { width: 24px; height: 24px; font-size: 13px; }
/* 안내 글 속 '② 에' 의 작은 번호 — 머리 번호와 같은 모양(그림 글자 ① ② 는 PC 마다 글꼴이 달라 쓰지 않음) */
.push-wrap .push-ref { width: 19px; height: 19px; margin: 0 2px; font-size: 13px; vertical-align: -3px; }

/* ── ① 무엇을 알릴까요 ─────────────────────────────────────────────────────────── */
/* 세그먼트 — 회원 · 게시판 공용 탭(.filter-tab)과 같은 모양(2026-10-30 점검 K-11 · 기존 .seg/.seg-btn) */
.push-wrap .seg { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--push-rule); }
.push-wrap .seg-btn {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--push-ink-2);
    cursor: pointer;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.push-wrap .seg-btn:hover { background: var(--doc-tint, #F5F7FA); color: var(--push-head); }
.push-wrap .seg-btn.active {
    background: var(--doc-head, var(--c-primary));
    border-color: var(--doc-head, var(--c-primary));
    color: #fff;
    font-weight: 700;
}
.push-wrap .seg-btn .count { font-size: 13px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.push-wrap .seg-btn.active .count { opacity: .95; }

.push-wrap .push-src-hint { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--push-ink-2); text-wrap: pretty; }
.push-wrap .push-dir-below { display: none; }
@media (max-width: 1023.98px) {
    .push-wrap .push-dir-side { display: none; }
    .push-wrap .push-dir-below { display: inline; }
}

/* 일정 · 공지 목록 — 라디오 줄 */
.push-wrap .push-pick {
    border: 1px solid var(--push-rule);
    border-radius: var(--push-r);
    background: var(--push-paper);
    max-height: 460px;
    overflow: auto;
    overscroll-behavior: contain;
}
.push-wrap .push-pick[hidden] { display: none; }
.push-wrap .push-pick-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 56px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--push-rule-2);
    cursor: pointer;
    transition: background .12s;
}
.push-wrap .push-pick-row:last-child { border-bottom: 0; }
.push-wrap .push-pick-row:hover { background: var(--push-hover); }
.push-wrap .push-pick-row.is-on { background: var(--push-sel-bg); box-shadow: inset 3px 0 0 var(--push-sel-line); }
.push-wrap .push-pick-row:has(input:focus-visible) { outline: 2px solid var(--push-accent); outline-offset: -2px; }
.push-wrap .push-pick-row input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--push-accent);
    cursor: pointer;
}
.push-wrap .push-pick-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-wrap .push-pick-when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--push-accent);
    font-variant-numeric: tabular-nums;
}
.push-wrap .push-pick-when .badge { font-size: 13px; }
.push-wrap .push-pick-ttl {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--push-ink);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.push-wrap .push-pick-sub { font-size: 13px; line-height: 1.45; color: var(--push-ink-2); }
.push-wrap .push-pick-empty {
    padding: 22px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--push-ink-2);
    text-align: center;
    text-wrap: pretty;
}
.push-wrap .push-pick-empty.is-error { color: var(--c-danger); }
.push-wrap .push-pick-empty .btn { margin-top: 10px; }
.push-wrap .push-pick-skel { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.push-wrap .push-pick-skel .skeleton { height: 44px; }

/* ── ② 알림 글 ───────────────────────────────────────────────────────────────── */
.push-wrap .push-field { display: flex; flex-direction: column; gap: 6px; }
.push-wrap .push-label { font-size: 13px; font-weight: 700; color: var(--push-head); }
.push-wrap .push-req { color: var(--c-danger); }
.push-wrap .text-input {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--push-rule);
    border-radius: var(--push-r);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--push-ink);
    background: var(--push-paper);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.push-wrap .text-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(11, 134, 198, .15); }
.push-wrap textarea.text-input { resize: vertical; min-height: 128px; max-height: 360px; }
.push-wrap .char-hint { font-size: 13px; color: var(--push-ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* 연결 칩 — ① 에서 고른 일정 · 공지(× = 연결만 끊음 · 글은 둠) */
.push-wrap .push-link { display: flex; flex-direction: column; gap: 6px; }
.push-wrap .push-link[hidden] { display: none; }
.push-wrap .push-link-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-left: 12px;
    border: 1px solid var(--doc-rule, var(--c-brand-line));
    border-radius: var(--push-r);
    background: var(--doc-tint-2, var(--c-brand-tint));
    box-shadow: inset 3px 0 0 var(--push-sel-line);
    color: var(--push-accent);
}
.push-wrap .push-link-chip > svg { flex: none; }
.push-wrap .push-link-text { flex: 1 1 auto; min-width: 0; padding: 8px 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.push-wrap .push-link-kind { font-weight: 800; }
.push-wrap .push-link-x {
    flex: none;
    align-self: stretch;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--push-r-sm);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.push-wrap .push-link-x:hover { color: var(--c-danger); background: rgba(17, 24, 39, .05); }
.push-wrap .push-link-hint { margin: 0; font-size: 13px; line-height: 1.55; color: var(--push-ink-2); text-wrap: pretty; }
.push-wrap .push-link-hint.is-warn { display: flex; align-items: flex-start; gap: 6px; color: var(--push-warn); }
.push-wrap .push-link-hint.is-warn > svg { margin-top: 2px; }

/* 폰 알림창 미리보기 (지시서 28 ③) — 카드마다 가로 최대 360px · 좁으면 위아래로 */
.push-wrap .push-preview { display: flex; flex-direction: column; gap: 8px; }
.push-wrap .push-preview-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--push-head); }
.push-wrap .push-preview-cards { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.push-wrap .push-preview-col { flex: 1 1 240px; max-width: 360px; min-width: 0; }
.push-wrap .push-preview-cap { font-size: 13px; color: var(--push-ink-2); margin-bottom: 6px; }
.push-wrap .push-noti {
    background: var(--doc-tint-2, var(--c-bg));
    border: 1px solid var(--push-rule);
    border-radius: 16px;                 /* 폰 알림 모양 흉내 — 두 테마 모두 둥글게 */
    padding: 12px 14px;
    box-sizing: border-box;
}
.push-wrap .push-noti-app { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--push-ink-2); margin-bottom: 6px; }
.push-wrap .push-noti-icon { width: 16px; height: 16px; border-radius: 4px; background: var(--c-primary); flex: none; }
.push-wrap .push-noti-title { font-size: 14px; font-weight: 600; color: var(--push-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-wrap .push-noti-body { font-size: 14px; line-height: 1.45; color: var(--push-ink); margin-top: 2px; }
.push-wrap .push-noti-body.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-wrap .push-noti-body.ten { white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
.push-wrap .push-noti .is-empty { color: var(--push-ink-3); font-weight: 400; }
.push-wrap .push-preview-hint { margin: 0; font-size: 13px; line-height: 1.55; color: var(--push-ink-2); text-wrap: pretty; }

/* ── ③ 누구에게 · 언제 ───────────────────────────────────────────────────────── */
.push-wrap .push-who { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.push-wrap .push-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.push-wrap .push-fieldset > legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--push-head); }

/* 받는 사람 라디오 4종 */
.push-wrap .push-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--push-rule);
    border-radius: var(--push-r);
    background: var(--push-paper);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.push-wrap .push-opt:hover { border-color: var(--push-accent); }
.push-wrap .push-opt.is-on { border-color: var(--push-sel-line); background: var(--push-sel-bg); box-shadow: inset 3px 0 0 var(--push-sel-line); }
.push-wrap .push-opt:has(input:focus-visible) { outline: 2px solid var(--push-accent); outline-offset: 1px; }
.push-wrap .push-opt input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--push-accent); cursor: pointer; }
.push-wrap .push-opt-text { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--push-ink); }
.push-wrap .push-opt-note { font-weight: 500; color: var(--push-ink-2); }
.push-wrap .push-opt-count { flex: none; font-size: 14px; font-weight: 700; color: var(--push-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 고른 줄 바로 아래 그 자리에서 펼침 — 한국JC·지구 체크 목록 · 회원 체크 목록 */
.push-wrap .push-opt-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 6px;
    padding: 12px;
    border: 1px solid var(--push-rule);
    border-radius: var(--push-r);
    background: var(--push-soft);
}
.push-wrap .push-opt-panel[hidden] { display: none; }
.push-wrap .push-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: var(--push-ink);
    cursor: pointer;
}
.push-wrap .push-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--push-accent); cursor: pointer; }
/* share-scope.js 부품(공지 · 일정 모달과 같이 씀 — 그 파일은 그대로)을 이 칸 안에서만 다듬는다 */
.push-wrap .push-scope-panel .ssp-wrap {
    max-height: 440px;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: var(--push-r-sm);
    background: var(--push-paper);
}
.push-wrap .push-scope-panel .ssp-wrap .ssp-btns .btn { min-height: 40px; }

/* 특정 회원 선택 — 찾기 · 다열 그리드(이름 + 직책) · ㄱㄴㄷ 그룹 머리 */
.push-wrap .push-sel-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.push-wrap .push-sel-count { font-size: 13px; color: var(--push-ink-2); }
.push-wrap .push-sel-count strong { color: var(--push-ink); }
.push-wrap .push-sel-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.push-wrap .push-member-list {
    max-height: 340px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--push-rule);
    border-radius: var(--push-r-sm);
    background: var(--push-paper);
}
.push-wrap .push-member-msg { padding: 14px; font-size: 13px; color: var(--push-ink-2); text-align: center; }
.push-wrap .push-member-msg.is-error { color: var(--c-danger); }
.push-wrap .push-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 6px; padding: 8px; }
.push-wrap .push-cho {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--doc-tint-2, #F6F8FA);
    color: var(--push-ink-2);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--push-r-sm);
    margin-top: 2px;
}
.push-wrap .push-cell { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px; border-radius: var(--push-r-sm); cursor: pointer; min-width: 0; }
.push-wrap .push-cell:hover { background: var(--push-hover); }
.push-wrap .push-cell input { width: 16px; height: 16px; flex: none; accent-color: var(--push-accent); cursor: pointer; margin: 0; }
.push-wrap .push-cell .nm { font-size: 14px; font-weight: 600; color: var(--push-ink); white-space: nowrap; flex: none; }
.push-wrap .push-cell .pos { font-size: 13px; color: var(--push-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* 발송 시점 (지시서 27) */
.push-wrap .push-when { display: flex; gap: 8px; flex-wrap: wrap; }
.push-wrap .push-when-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--push-rule);
    border-radius: var(--push-r);
    background: var(--push-paper);
    font-size: 14px;
    font-weight: 600;
    color: var(--push-ink);
    cursor: pointer;
}
.push-wrap .push-when-opt.is-on { border-color: var(--push-sel-line); background: var(--push-sel-bg); }
.push-wrap .push-when-opt:has(input:focus-visible) { outline: 2px solid var(--push-accent); outline-offset: 1px; }
.push-wrap .push-when-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--push-accent); cursor: pointer; }
.push-wrap .push-when-later { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.push-wrap .push-when-later[hidden] { display: none; }
.push-wrap .push-when-later .text-input { max-width: 280px; }
.push-wrap .push-when-hint { font-size: 13px; line-height: 1.55; color: var(--push-ink-2); }

/* 발송 — ③ 맨 아래 오른쪽(카드가 늘어나도 바닥에 붙음 · 위 가는 선 = ③ 의 동작 줄) */
.push-wrap .push-send {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--push-rule-2);
}
.push-wrap .push-error { font-size: 13.5px; line-height: 1.5; color: var(--c-danger); }
/* 맨 아래 한 줄(사장님 11-03) — 왼쪽 발송 시점 · 오른쪽 받는 사람 수 + [발송] */
.push-wrap .push-send-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.push-wrap .push-send-row .push-who-when { flex: 0 1 auto; }
.push-wrap .push-send-act { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px 14px; flex-wrap: wrap; }
.push-wrap .push-send-summary { font-size: 13.5px; color: var(--push-ink-2); font-variant-numeric: tabular-nums; }
.push-wrap .push-send-summary strong { color: var(--push-ink); }
.push-wrap .send-btn { min-height: 44px; padding: 10px 28px; font-size: 15px; font-weight: 700; border-radius: var(--push-r); }

/* 보낼 명단(사장님 11-03) — 이름 칸(이름 · 소속 · ×)을 여러 열로 · 칸 안 스크롤 */
.push-wrap .push-rcpt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.push-wrap .push-rcpt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.push-wrap .push-rcpt-head .push-label { font-size: 13px; }
.push-wrap .push-rcpt-count { font-size: 13px; color: var(--push-ink-2); font-variant-numeric: tabular-nums; }
.push-wrap .push-rcpt-count strong { color: var(--push-accent); font-size: 14px; }
.push-wrap .push-rcpt-restore { margin-left: auto; }
.push-wrap .push-rcpt-restore[hidden] { display: none; }
.push-wrap .push-rcpt-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px 6px;
    align-content: start;
    min-height: 120px;
    max-height: 420px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid var(--push-rule);
    border-radius: var(--push-r-sm);
    background: var(--push-paper);
}
.push-wrap .push-rcpt-msg {
    grid-column: 1 / -1;
    padding: 20px 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--push-ink-2);
    text-align: center;
}
.push-wrap .push-rcpt-msg .is-error { color: var(--c-danger); }
.push-wrap .push-rcpt-msg .btn { margin-top: 8px; }
.push-wrap .push-rcpt-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 40px;
    padding: 2px 2px 2px 10px;
    border: 1px solid var(--push-rule-2);
    border-radius: var(--push-r-sm);
    background: var(--push-soft);
}
.push-wrap .push-rcpt-item .nm { flex: none; font-size: 14px; font-weight: 600; color: var(--push-ink); white-space: nowrap; }
.push-wrap .push-rcpt-item .sub { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--push-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-wrap .push-rcpt-x {
    flex: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--push-r-sm);
    background: transparent;
    color: var(--push-ink-3);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.push-wrap .push-rcpt-x:hover { color: var(--c-danger); background: rgba(17, 24, 39, .06); }
.push-wrap .push-rcpt-x:focus-visible { outline: 2px solid var(--push-accent); outline-offset: -2px; }
.push-wrap .push-rcpt-hint { margin: 0; font-size: 13px; line-height: 1.55; color: var(--push-ink-2); text-wrap: pretty; }

/* ③ 이 넓게 펼쳐질 때 — 받는 사람 | 보낼 명단 두 칸 · 아래 한 줄 = 발송 시점 · [발송] */
@container pushwho (min-width: 720px) {
    .push-wrap .push-who {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 32px;
        row-gap: 18px;
    }
    .push-wrap .push-who-target { grid-column: 1; grid-row: 1; }
    .push-wrap .push-rcpt       { grid-column: 2; grid-row: 1; }
    .push-wrap .push-rcpt-list  { max-height: 560px; }
    .push-wrap .push-send       { grid-column: 1 / -1; grid-row: 2; align-self: end; }
}

/* ── 아래 3열 — 예약된 푸시 · 웹에서 보낸 푸시 · 앱에서 보낸 푸시 (≥1280 3열 · 그 아래 1열) ── */
.push-wrap .push-logs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1280px) {
    .push-wrap .push-logs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
.push-wrap .push-log { min-width: 0; }
.push-wrap .push-log .card-header > svg { flex: none; color: var(--push-ink-2); }
.push-wrap .push-log-cnt { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--push-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.push-wrap .push-log > .card-body { padding-top: 4px; padding-bottom: 10px; }
.push-wrap .push-log-scroll { max-height: 380px; overflow: auto; overscroll-behavior: contain; }
.push-wrap .push-log-list { list-style: none; margin: 0; padding: 0; }
.push-wrap .push-log-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--push-rule-2); }
.push-wrap .push-log-row:last-child { border-bottom: 0; }
.push-wrap .push-log-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.push-wrap .push-log-ttl { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--push-ink); }
.push-wrap .push-log-meta { font-size: 13px; line-height: 1.5; color: var(--push-ink-2); font-variant-numeric: tabular-nums; }
.push-wrap .push-log-meta .is-when { font-weight: 700; color: var(--push-accent); }
.push-wrap .push-log-row .btn { flex: none; }
.push-wrap .push-log-empty { padding: 28px 8px; text-align: center; font-size: 13.5px; color: var(--push-ink-2); }
.push-wrap .push-log-empty.is-error { color: var(--c-danger); }
.push-wrap .push-log-skel { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.push-wrap .push-log-skel .skeleton { height: 48px; }

/* 연결 태그 — 일정 연결 · 공지 연결 (기본 = 연한 주색 알약 · 문서 = 가는 테두리 네모) */
.push-wrap .push-link-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 8px;
    border: 1px solid var(--doc-rule, transparent);
    border-radius: clamp(2px, var(--card-radius, 16px), 999px);
    background: var(--doc-paper, var(--c-brand-tint));
    color: var(--push-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 1px;
    white-space: nowrap;
}

/* ── 쪽지 발송(2026-11-03 · .push-wrap.is-msg) — ① 이 없어 위는 '쪽지 글 | 누구에게 · 언제' 2열(≥1024) ·
      아래는 '예약된 쪽지 · 웹에서 보낸 쪽지' 2열(≥1280). 목록 글은 쪽지 내용이라 2줄에서 자른다(전체는 마우스를 올리면) ── */
.push-wrap.is-msg .push-flow { grid-template-areas: "text" "who"; }
@media (min-width: 1024px) {
    .push-wrap.is-msg .push-flow {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "text who";
    }
}
@media (min-width: 1280px) {
    .push-wrap.is-msg .push-logs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.push-wrap .push-log-ttl.is-body {
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 버튼 — 테마 모양 그대로 · 누르는 높이만 40px 이상 */
.push-wrap .btn,
.push-wrap .btn-sm { min-height: 40px; }

@media (max-width: 600px) {
    .push-wrap .push-pick { max-height: 380px; }
    .push-wrap .push-log-row { align-items: flex-start; }
}
@media (max-width: 480px) {
    .push-wrap .seg-btn { padding: 8px 6px; font-size: 13.5px; }
}