/*
 * 갈래 M — 알림·쪽지 목록 (화면 키 inbox, 페이지 /inbox/). 마이페이지 안 「알림·쪽지」 탭에도 같은 파일을 싣는다(inc/fx/screens-account.php).
 * 본문 규칙은 공통 셸 <main id="main"> 안만 겨냥(#main = 플러그인 클래스 규칙보다 앞서는 구체성) — 두 화면 공용.
 * 플러그인(fluxhub-common) 소유 마크업 fxi-*·fxm-* 는 렌더 시점에 로드돼 내릴 수 없으므로 덮기만 한다.
 * 읽음·삭제·모두 읽음은 admin_post 폼 그대로(클래스·name·action 불변).
 * 2차(2026-10-21 mypage-design-pass AC-2): 흰 그룹 카드 안 알림 행. 안 읽음 = 점 + 굵은 제목(+ 읽는 이에겐 「안 읽음」 글자), 제목 1줄·미리보기 1줄·시각 오른쪽,
 *  종류 탭은 마이페이지 칩 모양, 삭제·읽음은 작은 보조 버튼. 버튼 높이는 마이페이지 변수 --mp-btn-h(없으면 44).
 */
.fx-plugin--inbox{overflow-x:clip;background:var(--fx-paper)}
.fx-plugin--inbox .fx-plugin__head{padding:calc(76px + var(--fx-sp-6)) 0 var(--fx-sp-6);background:var(--fx-s1);color:var(--fx-t1)}
.fx-plugin--inbox .fx-plugin__head-in,.fx-plugin--inbox .fx-plugin__wrap{max-width:var(--fx-wrap-w);margin:0 auto;padding:0 var(--fx-gut)}
.fx-plugin--inbox .fx-plugin__title{margin:0;font-size:var(--fx-size-h3);font-weight:700;letter-spacing:-.025em;line-height:1.3;color:var(--fx-t1)}
.fx-plugin--inbox .fx-plugin__body{padding:var(--fx-sp-8) 0 var(--fx-sp-24);background:var(--fx-paper);color:var(--fx-k1)}
#main .fs-plugin{display:block;padding:0;background:none;color:var(--fx-k1);font-family:var(--fx-face)}
#main .fxi{--fx-surface:#fff;--fx-canvas:var(--fx-paper-2);--fx-sunken:var(--fx-paper-2);--fx-line:var(--fx-edge-paper);--fx-line-strong:var(--fx-edge-paper-strong);--fx-ink:var(--fx-k1);--fx-ink-2:var(--fx-k2);--fx-ink-3:var(--fx-k3);--fx-radius:var(--fx-radius-m);--fx-radius-lg:var(--fx-radius-l);--fx-font:var(--fx-face);max-width:820px;margin:0 auto}

/* 머리 */
#main .fxi__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fx-sp-3);margin:0 0 var(--fx-sp-4);padding:0 0 var(--fx-sp-3);border-bottom:1px solid var(--fx-k1)}
#main .fxi__title{margin:0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fx-k1)}
#main a.fxi__prefs{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h,44px);padding:0 var(--mp-btn-px,16px);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:var(--mp-btn-fs,14px);font-weight:600;color:var(--fx-k1);text-decoration:none;transition:border-color var(--fx-time-fast) var(--fx-ease-std),background var(--fx-time-fast) var(--fx-ease-std)}
#main a.fxi__prefs:hover{border-color:var(--fx-k1);background:var(--fx-paper-2)}
/* 종류 탭: 마이페이지 칩(선택은 검정 면). 개수 배지만 라임 */
#main .fxi__tabs{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin:0 0 var(--fx-sp-4);border:0}
#main a.fxi__tab{display:inline-flex;align-items:center;gap:var(--fx-sp-2);min-width:44px;min-height:44px;margin:0;padding:0 var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:15px;font-weight:600;color:var(--fx-k2);text-decoration:none;transition:background var(--fx-time-fast) var(--fx-ease-std),border-color var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast) var(--fx-ease-std)}
#main a.fxi__tab:hover{border-color:var(--fx-k1);color:var(--fx-k1)}
#main a.fxi__tab--active,#main a.fxi__tab--active:hover{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff}
#main .fxi__count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 var(--fx-sp-2);border-radius:var(--fx-radius-pill);background:var(--fx-brand);font-size:var(--fx-size-min);font-weight:700;color:var(--fx-brand-ink);font-variant-numeric:tabular-nums}

/* 도구줄 + 목록: 흰 그룹 카드 안의 행 */
#main .fxi__toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fx-sp-3);margin:0 0 var(--fx-sp-3)}
#main .fxi__summary{font-size:var(--fx-size-small);color:var(--fx-k2);font-variant-numeric:tabular-nums}
#main .fxm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h,44px);padding:0 var(--mp-btn-px,16px);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:var(--mp-btn-fs,14px);font-weight:600;line-height:1.2;color:var(--fx-k1);text-decoration:none;cursor:pointer;transition:background var(--fx-time-fast) var(--fx-ease-std),border-color var(--fx-time-fast) var(--fx-ease-std)}
#main .fxm-btn:hover{border-color:var(--fx-k1);background:var(--fx-paper-2)}
#main .fxm-btn--primary{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff}
#main .fxm-btn--primary:hover{border-color:#000;background:#000;color:var(--fx-brand)}
#main .fxi__list{margin:0;padding:0;overflow:hidden;list-style:none;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff;box-shadow:none}
#main .fxi__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"subject time" "body actions";column-gap:var(--fx-sp-4);row-gap:var(--fx-sp-1);align-items:center;margin:0;padding:var(--fx-sp-3) var(--fx-sp-6) var(--fx-sp-3) var(--fx-sp-12);border:0;border-top:1px solid var(--fx-edge-paper);border-radius:0;background:#fff}
#main .fxi__item:first-child{border-top:0}
#main .fxi__main{display:contents}
/* 읽음 행은 한 톤 낮게, 안 읽음 행은 점 + 굵은 제목 */
#main .fxi__item::before{content:'';position:absolute;left:var(--fx-sp-6);top:calc(var(--fx-sp-3) + 12px);width:8px;height:8px;box-sizing:border-box;border:1.5px solid var(--fx-edge-paper-strong);border-radius:50%;background:none}
#main .fxi__item--unread::before{border-color:var(--fx-k1);background:var(--fx-brand);box-shadow:0 0 0 1px var(--fx-k1)}
#main .fxi__subject{grid-area:subject;min-width:0;margin:0;font-size:16px;font-weight:500;line-height:1.4;color:var(--fx-k2)}
#main .fxi__item--unread .fxi__subject{font-weight:700;color:var(--fx-k1)}
#main a.fxi__link{display:block;min-height:0;margin:-11px 0;padding:11px 0;overflow:hidden;color:inherit;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
#main a.fxi__link:hover{text-decoration:underline;text-underline-offset:3px}
#main .fxi__subject:not(:has(a)){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#main .fxi__body{grid-area:body;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0;margin:0;overflow:hidden;font-size:var(--fx-size-small);line-height:1.6;color:var(--fx-k2);overflow-wrap:anywhere}
/* 펼치기(inbox.js 가 넘치는 행에만 단추를 넣는다): 본문 줄 제한·제목 말줄임 해제, 높이는 JS 가 0.2s 로 잇는다 */
#main .fxi__body{transition:height .2s var(--fx-ease-std)}
#main .fxi__item--open .fxi__body{display:block;-webkit-line-clamp:unset}
#main .fxi__item--open .fxi__subject,#main .fxi__item--open a.fxi__link{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;word-break:keep-all}
#main .fxi__item--open .fxi__time{align-self:start}
#main .fxi__actions .fxi__more{align-self:flex-start}
#main .fxi__actions .fxi__more[hidden]{display:none}
#main .fxi__actions .fxi__more:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px}
#main .fxi__time{grid-area:time;align-self:start;margin:0;font-size:var(--fx-size-min);line-height:1.6;color:var(--fx-k3);white-space:nowrap;font-variant-numeric:tabular-nums}
#main .fxi__item:not(:has(.fxi__body)) .fxi__time{grid-area:body;align-self:center}
#main .fxi__item:not(:has(.fxi__body)) .fxi__actions{grid-area:actions}
/* 공지·이벤트 목록은 알림과 같은 카드 톤(점 없음) */
#main .fxi__list--announce .fxi__item{grid-template-areas:"subject time";padding-left:var(--fx-sp-6)}
#main .fxi__list--announce .fxi__item::before{display:none}
#main .fxi__list--announce .fxi__subject{font-weight:600;color:var(--fx-k1);white-space:normal}
#main .fxi__list--announce .fxi__source{margin-right:var(--fx-sp-2);padding:1px var(--fx-sp-2);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);font-size:var(--fx-size-min);font-weight:500;color:var(--fx-k2)}
#main .fxi__list--announce .fxi__time{grid-area:time;align-self:center}
/* 행 안의 읽음·삭제: 작은 보조 버튼 — 보이는 높이 32px, 터치 영역 44px(::after 로 확장) */
#main .fxi__actions{grid-area:actions;display:flex;gap:var(--fx-sp-2);justify-self:end}
#main .fxi__actions .fxm-btn{position:relative;width:auto;min-width:44px;min-height:32px;height:32px;padding:0 var(--fx-sp-3);border-color:var(--fx-edge-paper);background:#fff;font-size:var(--fx-size-min);font-weight:600;line-height:1.2;color:var(--fx-k2)}
#main .fxi__actions .fxm-btn::after{content:'';position:absolute;inset:-6px -4px}
#main .fxi__actions .fxm-btn:hover{border-color:var(--fx-k1);background:var(--fx-paper-2);color:var(--fx-k1)}
#main .fxi__actions .fxi__form{flex:0 0 auto}
#main .fxi__notice{margin:0 0 var(--fx-sp-3);padding:var(--fx-sp-3) var(--fx-sp-4);border-radius:var(--fx-radius-s);background:var(--fx-paper-2);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k1)}
#main .fxm-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--fx-sp-1);margin:var(--fx-sp-6) 0 0}
#main a.fxm-pagination__item{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--fx-sp-3);border:1px solid transparent;border-radius:var(--fx-radius-pill);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fx-k2);text-decoration:none}
#main a.fxm-pagination__item:hover{border-color:var(--fx-edge-paper-strong);color:var(--fx-k1)}
#main a.fxm-pagination__item--active{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff}

/* 알림 수신 설정(쪽지·알림 설정 화면): 묶음 제목 + 흰 카드 안 행. 채널 선택은 윤곽 칩(켜짐 = 검정 윤곽 + 체크), 라임 반복 금지 */
#main .fxi__back{margin:0 0 var(--fx-sp-4)}
#main .fxi__back a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2);text-decoration:underline;text-underline-offset:3px}
#main .fxi__back a:hover{color:var(--fx-k1)}
#main .fhc-notify-prefs__group{margin:var(--fx-sp-8) 0 var(--fx-sp-3);font-size:var(--fx-size-lead);font-weight:700;letter-spacing:-.02em;color:var(--fx-k1)}
#main .fhc-notify-prefs__group:first-of-type{margin-top:0}
#main .fhc-notify-prefs__table{width:100%;overflow:hidden;border:1px solid var(--fx-edge-paper);border-collapse:separate;border-spacing:0;border-radius:var(--fx-radius-l);background:#fff}
#main .fhc-notify-prefs__table tr>*{padding:var(--fx-sp-2) var(--fx-sp-6);border:0;border-top:1px solid var(--fx-edge-paper);vertical-align:middle}
#main .fhc-notify-prefs__table tr:first-child>*{border-top:0}
#main .fhc-notify-prefs__event{font-size:16px;font-weight:500;color:var(--fx-k1)}
#main .fhc-notify-prefs__channels{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fx-sp-2)}
#main .fhc-notify-prefs__channel{display:inline-flex;align-items:center;gap:var(--fx-sp-2);min-height:44px;padding:0 var(--fx-sp-3);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2);cursor:pointer}
#main .fhc-notify-prefs__channel:has(input:checked){border-color:var(--fx-k1);background:var(--fx-paper-2);color:var(--fx-k1)}
#main .fhc-notify-prefs__channel input{width:18px;height:18px;margin:0;accent-color:var(--fx-k1)}
#main .fhc-notify-prefs__channel:has(input:focus-visible){outline:2px solid var(--fx-k1);outline-offset:2px}
#main .fhc-notify-prefs__submit{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h,44px);margin-top:var(--fx-sp-6);padding:0 var(--fx-sp-6);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);background:var(--fx-k1);font-size:var(--mp-btn-fs,14px);font-weight:600;color:#fff;cursor:pointer}
#main .fhc-notify-prefs__submit:hover{border-color:#000;background:#000;color:var(--fx-brand)}
#main .fhc-notify-prefs__submit:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px}
#main .fhc-notify-prefs__notice{margin:0 0 var(--fx-sp-4);padding:var(--fx-sp-3) var(--fx-sp-4);border-radius:var(--fx-radius-s);background:var(--fx-paper-2);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k1)}

#main .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
html[data-fx-surface] .fhc-bell .fhc-bell__badge{min-width:20px;height:20px;font-size:var(--fx-size-min);line-height:20px}

/* 빈 상태: C0 .fx-empty 와 같은 모양 + 다음 행동 */
#main .fxm-empty{display:grid;align-content:start;justify-items:start;gap:var(--fx-sp-3);margin:0;padding:var(--fx-sp-8);border:1px dashed var(--fx-edge-paper-strong);border-radius:var(--fx-radius-l);background:var(--fx-tint)}
#main .fxm-empty__title{margin:0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fx-k1)}
#main .fxm-empty__desc{max-width:520px;margin:0;font-size:16px;line-height:1.7;color:var(--fx-k2)}
#main .fxm-empty .fxm-btn{margin-top:var(--fx-sp-2);border-color:var(--fx-k1);background:var(--fx-k1);color:#fff}
#main .fxm-empty .fxm-btn:hover{border-color:#000;background:#000;color:var(--fx-brand)}
#main :is(.fxm-btn,a.fxi__prefs,a.fxi__tab,a.fxi__link,a.fxm-pagination__item,.fxi__back a):focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px}

@media (max-width:1023px){
  #main{--mp-btn-h:44px}
}
@media (max-width:767px){
  #main{--mp-btn-h:40px}
}
@media (max-width:768px){
  .fx-plugin--inbox .fx-plugin__head{padding-top:calc(76px + var(--fx-sp-4));padding-bottom:var(--fx-sp-4)}
  .fx-plugin--inbox .fx-plugin__body{padding-top:var(--fx-sp-6);padding-bottom:var(--fx-sp-16)}
  #main .fxi__item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"subject subject" "body body" "time actions";padding:var(--fx-sp-3) var(--fx-sp-4) var(--fx-sp-3) calc(var(--fx-sp-4) + 20px);column-gap:var(--fx-sp-3)}
  #main .fxi__item:not(:has(.fxi__body)) .fxi__time{grid-area:time}
  #main .fxi__time{align-self:center}
  #main .fxi__actions .fxm-btn{min-height:44px;height:44px}
  #main .fxi__actions .fxm-btn::after{inset:0}
  #main .fxi__toolbar{justify-content:space-between;text-align:left}
  #main .fxi__summary{text-align:left}
  #main .fxi__item::before{left:var(--fx-sp-4)}
  #main .fxi__list--announce .fxi__item{grid-template-columns:minmax(0,1fr);grid-template-areas:"subject" "time";padding-left:var(--fx-sp-4)}
  #main .fxi__list--announce .fxi__time{grid-area:time}
  #main .fhc-notify-prefs__table,#main .fhc-notify-prefs__table tbody,#main .fhc-notify-prefs__table tr{display:block}
  #main .fhc-notify-prefs__table tr>*{display:block;border:0;padding:var(--fx-sp-1) var(--fx-sp-4)}
  #main .fhc-notify-prefs__table tr{padding:var(--fx-sp-3) 0;border-top:1px solid var(--fx-edge-paper)}
  #main .fhc-notify-prefs__table tr:first-child{border-top:0}
  #main .fhc-notify-prefs__channels{justify-content:flex-start}
  #main .fxm-empty{padding:var(--fx-sp-6)}
}
@media (prefers-reduced-motion:reduce){
  .fx-plugin--inbox *,#main .fxi__body{transition:none!important;animation:none!important}
}