/* manito.css — 마니또 (2026-09-20)

   누가 쓰나   assets/manito.dog.js (아이 페이지 단추) · assets/manito.my.js (마이페이지 칸)
   부르는 곳   dog.php · my.php 에 link 한 줄씩

   ★ 이름은 전부 「mnt」로 시작합니다 — 다른 화면과 부딪히지 않게.
   ★ 빛깔 이름은 «공개 화면»의 것입니다 (assets/style.css) — 관리자 화면 이름과 다릅니다.
     여기 쓰는 것: --accent --accent-strong --p-1 --p-3 --line --ink --muted --hi --hi-ink --bad */

/* ── 아이 페이지 단추 ──
   평소에는 옆 단추들(.qrb)과 똑같이 보이고, 맺으면 보라로 채워집니다. */
#mntBtn.mnton{ background:var(--accent-strong); border-color:var(--accent-strong); color:#fff }
#mntBtn.mnton i{ color:#fff }
#mntBtn[disabled]{ opacity:.55; cursor:default }
.mntsaid{ display:block; width:100%; font-size:12.5px; color:var(--muted);
  line-height:1.7; margin:2px 0 0; word-break:keep-all }
.mntsaid a{ color:var(--accent-strong) }

/* ── 마이페이지 「내 마니또」 ── */
.mnthd{ font-size:13px; color:var(--muted); line-height:1.8; margin:2px 0 10px; word-break:keep-all }
.mnthd b{ color:var(--ink) }

.mntc{ display:flex; align-items:center; gap:12px; padding:11px 2px;
  border-bottom:.5px solid var(--line) }
.mntc:last-child{ border-bottom:0 }
.mntc img{ width:54px; height:54px; border-radius:13px; object-fit:cover;
  flex:0 0 auto; background:var(--p-1) }
.mntc .mntno{ width:54px; height:54px; border-radius:13px; background:var(--p-1);
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:var(--p-3); font-size:20px }
.mntc .t{ flex:1; min-width:110px }
.mntc .t b{ font-size:15px }
.mntc .t small{ display:block; font-size:12px; color:var(--muted); margin-top:2px }
.mntc .t a{ color:inherit; text-decoration:none }
.mntc .t a:hover b{ text-decoration:underline }

.mntnew{ display:inline-block; background:var(--hi); color:var(--hi-ink);
  border-radius:999px; padding:2px 9px; font-size:11.5px; margin-left:7px; vertical-align:1px }

.mnta{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.mnta a, .mnta button{ border:.5px solid var(--p-3); background:#fff; color:var(--ink);
  border-radius:9px; padding:6px 12px; font-size:12.5px; cursor:pointer;
  font-family:inherit; text-decoration:none; line-height:1.5 }
.mnta a:hover, .mnta button:hover{ border-color:var(--accent-strong) }
.mnta .mntoff{ border-color:transparent; background:transparent; color:var(--muted);
  text-decoration:underline; padding:6px 3px }
.mnta .mntoff:hover{ color:var(--ink) }
.mnta .mntoff.sure{ color:var(--hi-ink); text-decoration:none;
  border-color:var(--hi-ink); background:var(--hi) }

/* ── 소식 — 우체통 대신 여기서 (2026-09-20) ── */
.mntnews{ border:.5px solid var(--line); border-radius:12px; padding:12px 14px;
  margin:2px 0 14px; background:var(--p-0) }
.mntnewshd{ display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--ink);
  margin:0 0 8px; font-weight:600 }
.mntnewshd em{ font-style:normal; font-weight:400; color:var(--muted); font-size:12px }
.mntnewshd button{ margin-left:auto; border:.5px solid var(--p-3); background:#fff;
  color:var(--muted); border-radius:999px; padding:4px 11px; font-size:11.5px;
  cursor:pointer; font-family:inherit; flex:0 0 auto }
.mntnewshd button:hover{ border-color:var(--accent-strong); color:var(--ink) }
.mntnewshd button[disabled]{ opacity:.5; cursor:default }
.mntn{ display:flex; align-items:baseline; gap:8px; padding:6px 0; font-size:13.5px;
  line-height:1.6; word-break:keep-all }
.mntn span{ flex:1; color:var(--ink) }
.mntn b{ font-weight:600 }
.mntn em{ font-style:normal; color:var(--muted); font-size:12px; flex:0 0 auto }
.mntn:not(.new){ opacity:.55 }
.mntn.new span::before{ content:""; display:inline-block; width:6px; height:6px;
  border-radius:50%; background:var(--hi-ink); margin-right:7px; vertical-align:2px }

/* ★ 무지개다리 — 한 줄로 스쳐 지나가지 않게 따로 세웁니다 ★ */
.mntbye{ border:.5px solid var(--hi-line); background:var(--hi); border-radius:10px;
  padding:10px 12px; margin:8px 0 }
.mntbyeh{ display:flex; align-items:baseline; gap:8px; margin:0 0 3px; font-size:13.5px }
.mntbyeh b{ font-weight:600; color:var(--hi-ink) }
.mntbyeh em{ font-style:normal; margin-left:auto; color:var(--hi-ink); opacity:.7; font-size:12px }
.mntbyeb{ margin:0; font-size:13px; color:var(--hi-ink); line-height:1.7; word-break:keep-all }
.mntbye:not(.new){ opacity:.6 }

/* ── 랜덤 마니또 줄 — 빈 자리가 있을 때만 뜹니다 ── */
.mntrand{ display:flex; align-items:center; gap:12px; padding:13px 2px; margin-top:6px;
  border-top:.5px solid var(--line) }
.mntrand .t{ flex:1; min-width:120px }
.mntrand .t b{ display:block; font-size:14.5px; color:var(--ink) }
.mntrand .t small{ display:block; font-size:12px; color:var(--muted); margin-top:3px;
  line-height:1.65; word-break:keep-all }
.mnta .mntgo{ border-color:var(--accent-strong); background:var(--accent-strong); color:#fff }
.mnta .mntgo:hover{ background:var(--accent) }
.mnta .mntgo.sure{ background:var(--hi); color:var(--hi-ink); border-color:var(--hi-ink) }
.mnta .mntgo[disabled]{ opacity:.55; cursor:default }

.mntfoot{ font-size:12.5px; color:var(--muted); line-height:1.8; margin:12px 0 0;
  word-break:keep-all }
.mntpast{ margin-top:18px }
.mntpast .mntc{ opacity:.62 }
.mntmsg{ font-size:13px; line-height:1.7; margin:10px 0 0; word-break:keep-all }
.mntmsg.err{ color:var(--bad) }

/* 폰에서 단추가 아래로 내려가도 줄이 안 깨지게 */
@media (max-width:420px){
  .mntc{ flex-wrap:wrap }
  .mntrand{ flex-wrap:wrap }
  .mnta{ width:100%; justify-content:flex-start }
}