/* 편지함 #/m/mail — 결정 BO5·BO6(2026-09-28). screens_mail.js.
   새 UI 기준(결정 BU·BV·BS): 역할 토큰만(글자 --fs-*, 줄 간격 --lh-*, 간격 --sp-*), 직접 px는 테두리 1~3px만. 공용 칩·상태 태그 모양은 바꾸지 않는다.
   누름 영역 44 = --sp-6 + --sp-3. 편지 본문만 긴 글(.tw-prose — app.css 규칙, 결정 BV1). PC ≥840px = 목록 + 상세 나란히(결정 BU6), 휴대폰 = 하단 시트. */
.tw-ml-card { gap: var(--sp-3); }
.tw-ml-boxes > button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.tw-ml-count { color: var(--bad); font-weight: var(--fw-strong); }

/* 거르기 */
.tw-ml-tools { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-ml-cats { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: var(--sp-1) 0; min-width: 0; }
.tw-ml-cats::-webkit-scrollbar { display: none; }
.tw-ml-cats > * { flex: none; }
.tw-ml-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-ml-search { flex: 1 1 calc(var(--sp-6) * 4); min-width: 0; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2);
  min-height: calc(var(--sp-6) + var(--sp-3)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--muted); }
.tw-ml-search:focus-within { border-color: var(--fg-2); }
.tw-ml-in { min-width: 0; font: inherit; font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--fg-2); background: none; border: 0; padding: var(--sp-2) 0; }
.tw-ml-search .tw-ml-in { flex: 1 1 auto; align-self: stretch; }   /* 결정 CN(갈래 C 검토): 입력 누름 높이 = 검색 칸 전체(44) */
.tw-ml-in:focus { outline: 0; }
.tw-ml-in.is-box { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; padding: var(--sp-2) var(--sp-3); min-height: calc(var(--sp-6) + var(--sp-3)); }
.tw-ml-in.is-box:focus { border-color: var(--fg-2); }
textarea.tw-ml-in.is-box { line-height: var(--lh-loose); resize: vertical; }
.tw-ml-claimall { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: transparent; }
.tw-ml-claimall > span { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-ml-claimall b { color: var(--fg-2); }

/* 결과 한 줄(받음 n · 남음 m · 되돌리기) */
.tw-ml-out:empty { display: none; }
.tw-ml-result { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--fg); }
.tw-ml-result > p, p.tw-ml-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tw-ml-result.is-partial { color: var(--warn); }
.tw-ml-left { margin: 0; padding-left: var(--sp-5); color: var(--muted); }

/* 여러 개 고르기 막대 */
.tw-ml-selbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-ml-selbar[hidden] { display: none; }
.tw-ml-selbar__n { font-size: var(--fs-sub); margin-right: var(--sp-2); }
.tw-ml-sbtn { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: calc(var(--sp-6) + var(--sp-3)); }
.tw-icon-btn.tw-ml-sbtn { width: calc(var(--sp-6) + var(--sp-3)); height: calc(var(--sp-6) + var(--sp-3)); margin-left: auto; }
.tw-ml-selbar__br { display: none; }
@media (max-width: 599px) {   /* 휴대폰: 막대 버튼은 선 아이콘만 보이고 이름은 낭독기·길게 누르기(title)로 — 두 줄 고정: [n통 선택 … ×] / [행동 버튼들] */
  .tw-ml-sbtn .tw-ml-sbtn__t { position: absolute; width: 1em; height: 1em; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tw-ml-sbtn { min-width: calc(var(--sp-6) + var(--sp-3)); justify-content: center; padding: 0 var(--sp-2); order: 3; }
  .tw-ml-selbar__n { margin-right: 0; order: 0; }
  .tw-icon-btn.tw-ml-sbtn { order: 1; }
  .tw-ml-selbar__br { display: block; order: 2; flex-basis: 100%; height: 0; }   /* 검토 2026-09-29: × 하나만 둘째 줄로 떨어지던 것 */
}

/* 목록 + 상세 */
.tw-ml-split { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-ml-list { min-width: 0; }
.tw-ml-side { display: none; }
@media (min-width: 840px) {
  .tw-ml-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tw-ml-side { display: block; position: sticky; top: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); padding: var(--sp-4); min-width: 0; }
}
.tw-ml-rows { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-ml-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-width: 0; border-bottom: 1px solid var(--rule); border-left: 2px solid transparent; }
/* 결정 CR15: 읽지 않은 편지 = 제목 굵게·밝게 + 빨간 점(아래 .tw-ml-title::before) — 줄마다 빨간 세로선 없음. 열어 둔 편지 = 인디고 선 하나 */
.tw-ml-row.is-unread .tw-ml-title::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: var(--sp-1); border-radius: 50%; background: var(--bad); vertical-align: middle; }
.tw-ml-row.is-sel { border-left-color: var(--sel); }
.tw-ml-pick { display: grid; place-items: center; min-width: calc(var(--sp-6) + var(--sp-3)); min-height: calc(var(--sp-6) + var(--sp-3)); cursor: pointer; }
.tw-ml-pick input { width: var(--sp-4); height: var(--sp-4); margin: 0; accent-color: var(--accent); cursor: pointer; }
.tw-ml-open { font: inherit; text-align: left; color: var(--fg); background: none; border: 0; cursor: pointer; display: grid; gap: var(--sp-1); min-width: 0;
  min-height: calc(var(--sp-6) + var(--sp-3)); padding: var(--sp-2) var(--sp-1); }
.tw-ml-open:hover .tw-ml-title { color: var(--accent); }   /* 결정 CN2: 누를 곳 위 = 글자 색만(옛 덧칠 없음) */
.tw-ml-row__top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-ml-ic, .tw-ml-clip { flex: none; display: inline-grid; place-items: center; }
.tw-ml-clip { color: var(--warn); }
.tw-ml-from { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-ml-when { margin-left: auto; flex: none; font-size: var(--fs-cap); color: var(--faint); white-space: nowrap; }
.tw-ml-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--fg); }
.tw-ml-row.is-unread .tw-ml-title { color: var(--fg-2); font-weight: var(--fw-strong); }
.tw-icon-btn.tw-ml-star { width: calc(var(--sp-6) + var(--sp-3)); height: calc(var(--sp-6) + var(--sp-3)); border: 0; background: none; color: var(--faint); }
.tw-ml-star[aria-pressed="true"] { color: var(--warn); }

/* 상세·쓰기 */
.tw-ml-det, .tw-ml-form { display: grid; gap: var(--sp-3); min-width: 0; }
:is(.tw-ml-det, .tw-ml-form) .tw-ml-det__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-strong); line-height: var(--lh-tight);
  color: var(--fg-2); overflow-wrap: anywhere; }
:is(.tw-ml-det, .tw-ml-form) .tw-ml-det__title::before { content: none; }   /* 카드 안 h2의 네모 머리표 없음(상세 제목) */
.tw-ml-det__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-ml-det__meta time { font-variant-numeric: tabular-nums; }
.tw-ml-keep { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--faint); }
.tw-ml-det__body { font-size: var(--fs-body); white-space: pre-wrap; color: var(--fg); padding: var(--sp-3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tw-ml-att { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-ml-att h3 { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); }
.tw-ml-att ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); font-size: var(--fs-body); }
.tw-ml-det__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tw-ml-det__acts .tw-btn { gap: var(--sp-2); }
.tw-ml-to { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); align-items: end; }
.tw-ml-field { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-ml-field small { color: var(--faint); font-size: var(--fs-cap); }

/* 휴대폰 하단 시트(<dialog>) */
.tw-ml-sheet { border: 0; border-top: 1px solid var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; background: var(--bg); box-shadow: var(--pop-shadow); color: var(--fg); padding: 0; margin: auto 0 0; width: 100%; max-width: 100%;
  max-height: 88vh; overflow: auto; }
.tw-ml-sheet::backdrop { background: var(--scrim); }
.tw-ml-sheet[open] { animation: tw-sheet-up .16s ease-out; }
.tw-ml-sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4); background: var(--bg); color: var(--fg-2); border-bottom: 1px solid var(--rule); font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); }   /* 결정 CN: 반전 막대 제목 → 카드 제목 모양 */
.tw-ml-sheet__head .tw-icon-btn { width: calc(var(--sp-6) + var(--sp-3)); height: calc(var(--sp-6) + var(--sp-3)); border: 0; background: none; color: var(--muted); }
.tw-ml-sheet__body { padding: var(--sp-4); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }

/* 결정 BZ14(2026-09-29) 편지 신고: 확인창(confirmAsk) 안 사유 고르기 — 누름 영역 44 */
.tw-ml-rsns { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.tw-ml-rsn { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: calc(var(--sp-6) + var(--sp-3)); }
.tw-ml-rsnote { display: block; font-size: var(--fs-sub); color: var(--muted); }