/**
 * 모바일 메인 카드 컴포넌트 — 메인 페이지 + 등급 전체보기 페이지 공용
 * (index.php의 미디어쿼리 외부로 추출, 그래서 PC에서도 카드가 보임)
 */

/* 태그 */
.m-tag-pink { background: var(--brand-light, #fce7f3); color: var(--brand-deep, #be185d); font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.m-tag-gray { background: #f1f3f5; color: #495057; font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.m-tag-tc { background: var(--brand, #ec4899); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700; }

/* 리스트 섹션 */
.m-list-sec { margin: 0 14px 14px; }
.m-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.m-list-title { display: flex; align-items: center; gap: 6px; }
.m-list-title h3 { font-size: 13px; font-weight: 800; color: #1f2937; margin: 0; }
.m-list-more { display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 11px; color: #6b7280; text-decoration: none; font-weight: 600; white-space: nowrap; transition: all 0.12s; flex-shrink: 0; }
.m-list-more:hover { background: var(--brand-light, #fce7f3); color: var(--brand-deep, #be185d); border-color: var(--brand, #ec4899); }
.m-list { display: flex; flex-direction: column; gap: 8px; }

/* 카드 */
.m-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #f1f3f5; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; position: relative; }
.m-card:hover { border-color: var(--brand, #ec4899); }
.m-card.tier-premium { border: 1.5px solid #ec4899; box-shadow: 0 2px 8px rgba(236,72,153,0.16); }
.m-card.tier-recommend { border: 1px solid #fda4af; box-shadow: 0 1px 6px rgba(253,164,175,0.18); }
.m-card.tier-smart { border: 1px solid #38bdf8; }
.m-card.tier-grand { border: 1px solid #94a3b8; }

.m-card-thumb { width: 64px; height: 64px; border-radius: 4px; background: var(--brand-soft, #fdf2f8); color: var(--brand-deep, #be185d); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; overflow: hidden; }
.m-card-thumb img,
.m-card-thumb picture,
.m-card-thumb picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 찜 하트 */
.m-card-heart { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 11px; cursor: pointer; transition: all 0.15s; z-index: 2; border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.m-card-heart-r { left: auto; right: 8px; }
.m-card-heart:hover, .m-card-heart.on { color: #ec4899; transform: scale(1.1); }
.m-card-heart.on { color: #ec4899; }

/* 프라임/프리미엄 카드 */
.m-card-prime { align-items: stretch; }
.m-card-prime .m-card-right { justify-content: flex-end; padding-top: 26px; }
.m-card-left { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.m-prem-tag { display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg,#ec4899,#be185d); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.4px; box-shadow: 0 1px 3px rgba(190,24,93,0.3); white-space: nowrap; }
.m-prem-tag i { font-size: 8px; }

/* #태그 마퀴 */
.m-card-hashes-wrap { overflow: hidden; margin-top: 4px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); }
.m-card-hashes { display: inline-flex; gap: 8px; width: max-content; animation: m-card-marquee 14s linear infinite; }
.m-card-hashes span { font-size: 10.5px; color: var(--brand-deep, #be185d); white-space: nowrap; }
@keyframes m-card-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.m-card:hover .m-card-hashes { animation-play-state: paused; }

/* body / right */
.m-card-body { flex: 1; min-width: 0; }
.m-card-tags { display: flex; gap: 4px; margin-bottom: 4px; }
.m-card-title { font-size: 14px; font-weight: 800; color: #1f2937; line-height: 1.3; }
.m-card-desc { font-size: 11.5px; color: #6b7280; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.m-card-pay { font-size: 12.5px; font-weight: 800; color: #1f2937; }

/* 그랜드 한줄 컴팩트 */
.m-grand-list { display: flex; flex-direction: column; gap: 6px; }
.m-grand-row { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid #f1f3f5; border-radius: 8px; background: #fff; font-size: 12px; color: #1f2937; text-decoration: none; }
.m-grand-row strong { font-weight: 800; flex-shrink: 0; }
.m-grand-desc { color: #6b7280; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-grand-pay { font-weight: 800; white-space: nowrap; }