/* ═══════════════════════════════════════════════════════════════
   MOA MUSIC — 메인 스타일시트 v4 (완전 반응형)
   Breakpoints: xs(~479) / sm(480) / md(768) / lg(1024)
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   1. CSS 변수
   ══════════════════════════════════════════════ */
:root {
  /* 색상 — 다크 모드 기본 */
  --mm-bg:        #0f0f1a;
  --mm-surface:   #1a1a2e;
  --mm-surface2:  #22223a;
  --mm-border:    #2d2d4a;
  --mm-primary:   #7c3aed;
  --mm-primary2:  #a78bfa;
  --mm-text:      #e2e8f0;
  --mm-muted:     #94a3b8;
  --mm-shadow:    rgba(0,0,0,.5);
  --mm-bar-bg:    rgba(22,22,40,.97);
  --mm-header-bg: rgba(15,15,26,.92);
  /* 치수 */
  --mm-bar-h:    64px;
  --mm-hdr-h:    58px;
  --mm-radius:   12px;
  --mm-pad:      20px;       /* 좌우 기본 여백 */
  /* 헤더 글꼴 */
  --mm-nav-fs:   .875rem;
  --mm-logo-fs:  1.05rem;
}

/* 라이트 모드 */
[data-mm-theme="light"] {
  --mm-bg:        #f0f2f8;
  --mm-surface:   #ffffff;
  --mm-surface2:  #e8eaf2;
  --mm-border:    #d1d5e8;
  --mm-primary:   #6d28d9;
  --mm-primary2:  #7c3aed;
  --mm-text:      #1e1b3a;
  --mm-muted:     #6b7280;
  --mm-shadow:    rgba(0,0,0,.12);
  --mm-bar-bg:    rgba(255,255,255,.97);
  --mm-header-bg: rgba(240,242,248,.95);
}

/* 모바일 치수 조정 */
@media (max-width:767px) {
  :root { --mm-hdr-h:52px; --mm-pad:14px; }
}

/* ══════════════════════════════════════════════
   2. 리셋 & 기본
   ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; }
body {
  font-family:'Noto Sans KR','Apple SD Gothic Neo',-apple-system,sans-serif;
  background:var(--mm-bg);
  color:var(--mm-text);
  padding-bottom:calc(var(--mm-bar-h) + 20px);
  min-height:100vh;
  line-height:1.5;
  overflow-x:hidden;
}
a  { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }

/* ══════════════════════════════════════════════
   3. 헤더
   ══════════════════════════════════════════════ */
.mm-header {
  position:sticky; top:0; z-index:100;
  background:var(--mm-header-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mm-border);
}
.mm-header-inner {
  max-width:1200px; margin:0 auto;
  padding:0 var(--mm-pad);
  height:var(--mm-hdr-h);
  display:flex; align-items:center; gap:4px;
}

/* 로고 */
.mm-logo {
  font-size:var(--mm-logo-fs); font-weight:800;
  color:var(--mm-primary2); white-space:nowrap;
  flex-shrink:0; letter-spacing:-.01em;
  transition:opacity .15s;
}
.mm-logo:hover { opacity:.8; }

/* 데스크톱 네비 */
.mm-nav {
  display:flex; align-items:center; gap:2px;
  margin-left:auto; flex-wrap:nowrap;
}
.mm-nav a {
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:8px;
  font-size:var(--mm-nav-fs); font-weight:500; line-height:1;
  color:var(--mm-muted); white-space:nowrap;
  transition:background .15s, color .15s;
}
.mm-nav a:hover,
.mm-nav a.active { background:var(--mm-surface2); color:var(--mm-text); }

.mm-nav-adm {
  background:rgba(124,58,237,.18) !important;
  color:var(--mm-primary2) !important;
}
.mm-nav-adm:hover { background:rgba(124,58,237,.3) !important; }

/* 구분선 — 모바일 드롭다운에서만 */
.mm-nav-divider { display:none; }

/* 다크/라이트 토글 */
.mm-theme-btn {
  flex-shrink:0;
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--mm-border);
  background:var(--mm-surface2); color:var(--mm-text);
  font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
  margin-left:8px;
}
.mm-theme-btn:hover { background:var(--mm-border); }

/* 햄버거 — 기본 숨김 */
.mm-nav-toggle {
  display:none; flex-shrink:0;
  align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--mm-border);
  background:var(--mm-surface2); color:var(--mm-text);
  font-size:1.1rem;
  transition:background .15s;
  margin-left:4px;
}
.mm-nav-toggle:hover { background:var(--mm-border); }

/* 태블릿: 글자 살짝 축소 */
@media (min-width:768px) and (max-width:960px) {
  :root { --mm-nav-fs:.8rem; }
  .mm-nav a { padding:6px 8px; }
}

/* 모바일 드롭다운 */
@media (max-width:767px) {
  .mm-nav-toggle { display:flex; }

  .mm-nav {
    display:none;
    position:fixed;
    top:var(--mm-hdr-h); left:0; right:0;
    flex-direction:column; gap:2px;
    padding:8px 10px 14px;
    background:var(--mm-surface);
    border-bottom:1px solid var(--mm-border);
    box-shadow:0 12px 28px var(--mm-shadow);
    z-index:99;
    max-height:calc(100svh - var(--mm-hdr-h));
    overflow-y:auto;
  }
  .mm-nav.open { display:flex; }

  .mm-nav a {
    width:100%; padding:11px 14px;
    font-size:.9375rem; border-radius:8px; color:var(--mm-muted);
  }
  .mm-nav-adm { font-size:.9375rem !important; }
  .mm-nav-divider {
    display:block;
    height:1px; background:var(--mm-border); margin:4px 0; width:100%;
  }
}

/* ══════════════════════════════════════════════
   4. 레이아웃
   ══════════════════════════════════════════════ */
.mm-wrap {
  max-width:1200px; margin:0 auto;
  padding:24px var(--mm-pad);
}

/* ══════════════════════════════════════════════
   5. 섹션 타이틀
   ══════════════════════════════════════════════ */
.mm-section-title {
  font-size:1rem; font-weight:800;
  margin-bottom:14px;
  display:flex; align-items:center;
  justify-content:space-between; gap:8px;
}
.mm-section-title a {
  font-size:.78rem; font-weight:400;
  color:var(--mm-muted); white-space:nowrap;
}

/* ══════════════════════════════════════════════
   6. 홈 2단 그리드 (TOP10 | 최신곡)
   데스크톱: 나란히 / 모바일: 세로 쌓임
   ══════════════════════════════════════════════ */
.mm-home-grid {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:24px;
}
@media (max-width:767px) {
  .mm-home-grid { grid-template-columns:1fr; gap:32px; }
}

/* ══════════════════════════════════════════════
   7. 장르 탭
   데스크톱(768+) : flex-wrap → 자동 줄바꿈
   모바일(~767)   : 가로 스크롤
   ══════════════════════════════════════════════ */
.mm-tabs {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap !important;   /* ★ 데스크톱: 줄바꿈 강제 */
  margin-bottom:20px;
}
.mm-tab {
  padding:6px 14px;
  border-radius:20px;
  font-size:.82rem; font-weight:600;
  border:1px solid var(--mm-border);
  background:none; color:var(--mm-muted);
  white-space:nowrap; flex-shrink:0;
  transition:background .15s, color .15s, border-color .15s;
}
.mm-tab.active { background:var(--mm-primary); color:#fff; border-color:var(--mm-primary); }
.mm-tab:hover:not(.active) {
  background:var(--mm-surface2); color:var(--mm-text);
  border-color:var(--mm-surface2);
}

/* 모바일: 가로 스크롤 (줄바꿈 해제) */
@media (max-width:767px) {
  .mm-tabs {
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    margin-bottom:14px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .mm-tabs::-webkit-scrollbar { display:none; }
  .mm-tabs::after {
    content:''; display:block;
    flex-shrink:0; width:10px;
  }
  .mm-tab {
    scroll-snap-align:start;
    padding:5px 12px; font-size:.8rem;
  }
}

/* ══════════════════════════════════════════════
   8. 카드 그리드 (앨범·트랙 등)
   ══════════════════════════════════════════════ */
.mm-card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(130px,1fr));
  gap:12px;
}
@media (min-width:480px) {
  .mm-card-grid { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
}
@media (min-width:768px) {
  .mm-card-grid { grid-template-columns:repeat(auto-fill, minmax(165px,1fr)); gap:16px; }
}
@media (min-width:1024px) {
  .mm-card-grid { grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:18px; }
}

.mm-card {
  background:var(--mm-surface); border:1px solid var(--mm-border);
  border-radius:var(--mm-radius); overflow:hidden; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.mm-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px var(--mm-shadow); }
.mm-card-thumb { position:relative; padding-top:100%; background:var(--mm-surface2); overflow:hidden; }
.mm-card-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mm-card-thumb .mm-play-btn {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); opacity:0; transition:opacity .2s; font-size:2rem;
}
.mm-card:hover .mm-play-btn { opacity:1; }
.mm-card-body { padding:9px 11px 13px; }
.mm-card-title { font-size:.83rem; font-weight:700; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-card-sub   { font-size:.72rem; color:var(--mm-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ══════════════════════════════════════════════
   9. 아티스트 그리드
   ══════════════════════════════════════════════ */
.mm-artist-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:14px; }
@media (min-width:480px) { .mm-artist-grid { grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); } }
@media (min-width:768px)  { .mm-artist-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); } }

/* ══════════════════════════════════════════════
   10. 트랙 리스트
   ══════════════════════════════════════════════ */
.mm-track-list { display:flex; flex-direction:column; gap:2px; }
.mm-track-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px;
  cursor:pointer; transition:background .15s; min-width:0;
}
.mm-track-item:hover   { background:var(--mm-surface); }
.mm-track-item.playing { background:rgba(124,58,237,.15); }
.mm-track-no    { width:22px; text-align:center; font-size:.78rem; color:var(--mm-muted); flex-shrink:0; }
.mm-track-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.mm-track-info  { flex:1; min-width:0; }
.mm-track-title  { font-size:.875rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-track-artist { font-size:.75rem; color:var(--mm-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-track-dur    { font-size:.75rem; color:var(--mm-muted); flex-shrink:0; }
.mm-track-like   {
  font-size:.85rem; color:var(--mm-muted); flex-shrink:0;
  padding:4px 8px; border-radius:6px; border:none; background:none;
}
.mm-track-like.liked { color:#f472b6; }
.mm-track-like:hover  { background:var(--mm-surface2); }

@media (max-width:479px) {
  .mm-track-item { padding:7px 6px; gap:8px; }
  .mm-track-no   { width:18px; font-size:.7rem; }
  .mm-track-dur  { display:none; }
}

/* ══════════════════════════════════════════════
   11. 버튼
   ══════════════════════════════════════════════ */
.mm-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; border-radius:8px;
  font-weight:600; font-size:.875rem;
  border:none; transition:all .2s; white-space:nowrap;
}
.mm-btn-primary { background:var(--mm-primary); color:#fff; }
.mm-btn-primary:hover { background:#6d28d9; }
.mm-btn-ghost  { background:var(--mm-surface2); color:var(--mm-text); }
.mm-btn-ghost:hover { background:var(--mm-border); }
.mm-btn-danger { background:rgba(239,68,68,.15); color:#fca5a5; }
.mm-btn-danger:hover { background:rgba(239,68,68,.3); }
.mm-btn-sm { padding:5px 12px; font-size:.78rem; }
.mm-btn-xs { padding:3px 8px;  font-size:.73rem; border-radius:6px; }

/* ══════════════════════════════════════════════
   12. 배지
   ══════════════════════════════════════════════ */
.mm-badge { display:inline-block; padding:2px 8px; border-radius:50px; font-size:.68rem; font-weight:700; }
.mm-badge-genre { background:rgba(124,58,237,.2); color:var(--mm-primary2); }
.mm-badge-title { background:rgba(239,68,68,.2);  color:#fca5a5; }
.mm-badge-type  { background:rgba(16,185,129,.15); color:#6ee7b7; }

/* ══════════════════════════════════════════════
   13. 검색창
   ══════════════════════════════════════════════ */
.mm-search-box { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.mm-search-box input {
  flex:1; min-width:160px;
  background:var(--mm-surface); border:1px solid var(--mm-border);
  color:var(--mm-text); padding:9px 14px; border-radius:10px;
  font-family:inherit; font-size:.875rem;
}
.mm-search-box input:focus { outline:none; border-color:var(--mm-primary2); }

/* ══════════════════════════════════════════════
   14. 입력 공통
   ══════════════════════════════════════════════ */
.mm-input {
  width:100%; background:var(--mm-surface); border:1.5px solid var(--mm-border);
  color:var(--mm-text); padding:9px 14px; border-radius:8px;
  font-family:inherit; font-size:.875rem; transition:border-color .15s;
}
.mm-input:focus { outline:none; border-color:var(--mm-primary2); }
textarea.mm-input { resize:vertical; }
.mm-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}

/* ══════════════════════════════════════════════
   15. 빈 상태
   ══════════════════════════════════════════════ */
.mm-empty { text-align:center; color:var(--mm-muted); padding:40px 0; font-size:.875rem; }

/* ══════════════════════════════════════════════
   16. 페이지네이션
   ══════════════════════════════════════════════ */
.mm-pagination { display:flex; justify-content:center; margin-top:24px; }
.mm-pagination ul { display:flex; gap:4px; list-style:none; flex-wrap:wrap; justify-content:center; }
.mm-pagination li a,
.mm-pagination li.active {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  font-size:.82rem; font-weight:600; color:var(--mm-muted);
  background:var(--mm-surface); border:1px solid var(--mm-border);
}
.mm-pagination li.active { background:var(--mm-primary); color:#fff; border-color:var(--mm-primary); }
.mm-pagination li a:hover { background:var(--mm-surface2); }
.mm-pagination li.dots { display:flex; align-items:center; color:var(--mm-muted); padding:0 4px; }

/* ══════════════════════════════════════════════
   17. 상세 히어로 (앨범/아티스트 페이지)
   ══════════════════════════════════════════════ */
.mm-detail-hero {
  display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap;
  padding:20px; border-radius:16px;
  background:linear-gradient(135deg, var(--mm-surface2), var(--mm-surface));
  margin-bottom:24px;
}
.mm-detail-cover {
  width:120px; height:120px; flex-shrink:0;
  border-radius:10px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.mm-detail-cover img { width:100%; height:100%; object-fit:cover; }
.mm-detail-info { flex:1; min-width:180px; }
.mm-detail-info h1 { font-size:1.3rem; font-weight:800; margin-bottom:6px; }
.mm-detail-info .mm-meta { color:var(--mm-muted); font-size:.85rem; margin-bottom:12px; }
.mm-detail-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media (min-width:768px) {
  .mm-detail-cover { width:180px; height:180px; }
  .mm-detail-info h1 { font-size:1.9rem; }
  .mm-detail-hero { padding:28px; gap:28px; }
}

/* ══════════════════════════════════════════════
   18. 하단 플레이어 바
   ══════════════════════════════════════════════ */
.mm-player-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:var(--mm-bar-h);
  background:var(--mm-bar-bg);
  border-top:1px solid var(--mm-border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; align-items:center; gap:10px; padding:0 14px;
}
.mm-hidden { display:none !important; }
#mm-yt-wrap {
  position:absolute; top:-5px; left:-5px;
  width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;
}
.mm-bar-cover { flex-shrink:0; position:relative; }
.mm-bar-cover img { width:42px; height:42px; border-radius:6px; object-fit:cover; }
.mm-bar-info   { min-width:0; flex:0 1 180px; }
.mm-bar-title  { font-size:.82rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-bar-artist { font-size:.7rem; color:var(--mm-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-bar-controls { display:flex; gap:2px; flex-shrink:0; }
.mm-bar-controls button {
  background:none; border:none; color:var(--mm-text);
  font-size:1.15rem; padding:6px 8px; border-radius:6px;
}
.mm-bar-controls button:hover { background:var(--mm-surface2); }
.mm-bar-progress { flex:1; display:flex; align-items:center; gap:6px; min-width:0; }
.mm-bar-progress span { font-size:.68rem; color:var(--mm-muted); flex-shrink:0; width:30px; text-align:center; }
.mm-bar-progress input[type=range] { flex:1; accent-color:var(--mm-primary); height:4px; min-width:40px; }
.mm-bar-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.mm-bar-right button { background:none; border:none; color:var(--mm-muted); font-size:1rem; padding:4px 6px; border-radius:6px; }
.mm-bar-right button:hover { color:var(--mm-text); }
.mm-vol-wrap { display:flex; align-items:center; gap:4px; }
.mm-vol-wrap input[type=range] { width:70px; accent-color:var(--mm-primary); }
.mm-bar-video-badge {
  position:absolute; bottom:2px; right:2px;
  font-size:.58rem; background:rgba(0,0,0,.55);
  border-radius:3px; padding:1px 3px; line-height:1.4; pointer-events:none;
}
@media (max-width:599px) {
  .mm-player-bar { gap:6px; padding:0 8px; }
  .mm-bar-info   { flex:0 1 90px; }
  .mm-bar-progress span { display:none; }
  .mm-vol-wrap   { display:none; }
}
@media (max-width:479px) {
  .mm-bar-info { display:none; }
}

/* ══════════════════════════════════════════════
   19. 가사 패널
   ══════════════════════════════════════════════ */
.mm-lyrics-panel {
  position:fixed; right:12px; bottom:calc(var(--mm-bar-h) + 10px); z-index:201;
  width:min(320px, calc(100vw - 24px));
  max-height:min(420px, calc(100vh - var(--mm-bar-h) - 70px));
  background:var(--mm-surface); border:1px solid var(--mm-border);
  border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.5);
  display:flex; flex-direction:column; overflow:hidden;
}
.mm-lyrics-inner { display:flex; flex-direction:column; height:100%; }
.mm-lyrics-inner h3 { padding:14px 16px 0; font-size:.875rem; font-weight:700; color:var(--mm-primary2); }
.mm-lyrics-close { position:absolute; top:10px; right:12px; background:none; border:none; color:var(--mm-muted); font-size:1rem; }
.mm-lyrics-body  { flex:1; overflow-y:auto; padding:12px 16px 16px; font-size:.82rem; line-height:1.9; color:var(--mm-muted); }

/* ══════════════════════════════════════════════
   20. 차트 테이블
   ══════════════════════════════════════════════ */
.mm-chart-table { width:100%; border-collapse:collapse; }
.mm-chart-table th { font-size:.78rem; color:var(--mm-muted); font-weight:600; padding:8px 10px; text-align:left; border-bottom:1px solid var(--mm-border); }
.mm-chart-table td { padding:9px 10px; border-bottom:1px solid rgba(45,45,74,.4); }
.mm-chart-table tr:hover td { background:var(--mm-surface); }
.mm-rank-no { font-size:.95rem; font-weight:800; color:var(--mm-primary2); width:32px; }
.mm-rank-1  { color:#fbbf24; }
.mm-rank-2  { color:#94a3b8; }
.mm-rank-3  { color:#d97706; }
@media (max-width:599px) {
  .mm-chart-hide-mobile { display:none; }
  .mm-chart-table td, .mm-chart-table th { padding:7px 6px; }
}

/* ══════════════════════════════════════════════
   21. 플레이리스트
   ══════════════════════════════════════════════ */
.mm-pl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px; }
@media (min-width:480px) { .mm-pl-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); } }
.mm-pl-card { background:var(--mm-surface); border:1px solid var(--mm-border); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .2s; }
.mm-pl-card:hover { transform:translateY(-2px); }
.mm-pl-cover { aspect-ratio:1; background:var(--mm-surface2); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.mm-pl-cover img { width:100%; height:100%; object-fit:cover; }
.mm-pl-body { padding:10px 12px; }
.mm-pl-name { font-size:.875rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-pl-meta { font-size:.72rem; color:var(--mm-muted); }

/* ══════════════════════════════════════════════
   22. 알림
   ══════════════════════════════════════════════ */
.mm-alert { padding:12px 16px; border-radius:10px; font-size:.875rem; font-weight:600; }
.mm-alert-ok  { background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.mm-alert-err { background:rgba(239,68,68,.15);  color:#fca5a5; border:1px solid rgba(239,68,68,.3); }

/* ══════════════════════════════════════════════
   23. 유틸리티
   ══════════════════════════════════════════════ */
.mm-flex-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mm-mt-8  { margin-top:8px;  }
.mm-mt-16 { margin-top:16px; }
.mm-mt-24 { margin-top:24px; }
.mm-mt-32 { margin-top:32px; }