/* 마이페이지 「우체통」 칸 — 회원에게 온 소식. (2026-08-23)
   my.css 를 건드리지 않으려고 새 파일로 두었습니다.
   색은 style.css 변수와 my.css · myvol.css 에서 쓰던 값을 그대로 씁니다 — 새 색을 만들지 않았습니다.

   ★★ [hidden] 짝을 반드시 함께 적습니다 ★★
     브라우저 기본 [hidden]{display:none} 은 «우리가 적은 display» 에게 집니다.
     2026-08-18 딱지, 2026-08-22 노란 배너 — 같은 함정을 두 번 밟았습니다.
     여기서 display 를 정하는 것은 .ntflag 와 .ntn 둘입니다. 둘 다 짝을 적어두었습니다.
     ★ 2026-08-23 에 크로미움으로 «일부러 그 줄을 빼고» 재봤습니다 —
       빼면 다 읽으신 뒤에도 「0」 딱지가 그대로 남습니다. 그 줄이 진짜 일을 합니다.

   ★ 폰에서 잘리지 않게 ★ grid 를 쓰지 않고 flex + min-width:0 입니다.
     (1fr 은 minmax(auto,1fr) 이라 keep-all 한글보다 좁아지지 않습니다 — 2026-08-20)
     320 · 360 · 390 · 430 · 560px 에서 넘침 0px 을 확인했습니다. */

/* 안 읽은 수 — 펼치지 않아도 보이는 빨간 깃발
   ★ margin 을 주지 않습니다 ★ my.css 의 .row 가 이미 gap:12px 을 주고 있습니다. */
.ntflag{display:inline-block; flex:0 0 auto;
  min-width:20px; padding:2px 7px; border-radius:999px;
  background:var(--bad); color:#fff; font-size:11.5px; line-height:1.5;
  text-align:center; white-space:nowrap}
.ntflag[hidden]{display:none}

/* 한 통 */
.ntlist{margin:2px 0 4px}

.ntrow{display:flex; align-items:flex-start; gap:10px; padding:12px 2px;
  border-bottom:.5px solid var(--line-soft); color:inherit; text-decoration:none}
.ntrow:last-child{border-bottom:0}

a.ntrow:hover{background:var(--p-0)}

/* 아직 안 읽은 것 — 왼쪽에 작은 표가 섭니다. 읽으면 이 표만 사라집니다 */
.ntrow.new{position:relative}
.ntrow.new::before{content:''; position:absolute; left:-8px; top:19px;
  width:5px; height:5px; border-radius:50%; background:var(--bad)}

.nti{flex:0 0 auto; margin-top:2px; font-size:17px; color:var(--accent-strong); opacity:.85}

.ntt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}

.ntt b{font-size:14px; font-weight:600; color:var(--ink); line-height:1.6; word-break:keep-all}
.ntrow:not(.new) .ntt b{font-weight:500; color:var(--muted)}

/* 뭉쳐진 건수 — 「사진이 올라갔어요 ⑤」 */
.ntn{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:var(--p-1); color:var(--muted); font-size:11px; font-weight:500; white-space:nowrap}
.ntn[hidden]{display:none}

.ntb{font-size:13px; color:var(--muted); line-height:1.7; word-break:keep-all}

.ntw{font-size:11.5px; color:var(--muted); opacity:.75}

/* 아직 온 것이 없을 때 — 왜 비었는지 여기서 말합니다 */
.ntnone{font-size:13.5px; color:var(--muted); line-height:1.9; word-break:keep-all;
  margin:2px 0 6px}

.ntmore{font-size:12.5px; color:var(--muted); line-height:1.7; word-break:keep-all;
  margin:10px 0 0}

@media (max-width:430px){
  .ntrow{gap:8px}
  .ntrow.new::before{left:-6px}
}