/* 메모리 카드 — 고유 레이아웃만 (박스/버튼/배경/그림자는 style_tools_base.css 통일) */
.wrap{ max-width:100%; padding:0 0 70px; }

.mem-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.mem-title{ font-size:38px; font-weight:800; margin:0; letter-spacing:-.02em; line-height:1; }
.mem-sub{ margin:8px 0 0; color:#6b7280; font-size:13px; }
.mem-stats{ display:flex; gap:8px; }
.mem-stat{ background:#f3f4f6; border-radius:8px; padding:8px 16px; text-align:center; min-width:64px; }
.mem-stat span{ display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; }
.mem-stat b{ font-size:20px; font-weight:800; }

.mem-controls{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.mem-select{ padding:8px 12px; border:1.5px solid #e5e7eb; font-size:13px; background:#fff; }
.mem-new{ background:#111827; color:#fff; border:none; padding:9px 18px; font-weight:700; font-size:14px; cursor:pointer; }
.mem-new:hover{ background:#374151; }

.mem-board{ display:grid; gap:8px; max-width:480px; margin:0 auto; }
.mem-card{
  aspect-ratio:1; background:#4f46e5; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; cursor:pointer; user-select:none; transition:background .15s;
}
.mem-card.flipped{ background:#eef2ff; }
.mem-card.matched{ background:#dcfce7; opacity:.65; cursor:default; }

.mem-win{ text-align:center; margin:16px 0; }
.mem-win-inner{ display:inline-block; background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:20px 28px; }
.mem-win-inner p{ font-size:18px; font-weight:800; margin:0 0 14px; }

@media (max-width:480px){
  .mem-title{ font-size:30px; }
  .mem-card{ font-size:20px; }
}