/* ===== 모모핀 파스텔 코럴/피치 팔레트 =====
   PC/모바일 공통. PC는 styles.css가 이 파일보다 뒤에 로드되므로
   shop.head.php 인라인 <style>에서 한 번 더 확정한다. */
:root {
    --mp-accent: #fb7185;        /* 코럴 - 가격/포인트 */
    --mp-accent-strong: #f43f5e; /* 코럴 진하게 - hover */
    --mp-action: #f97316;        /* 주황 - 주요 버튼 */
    --mp-action-strong: #ea580c; /* 주황 진하게 - hover */
    --mp-success: #4ade80;       /* 연두 - 상태 */
    --mp-bg: #fff7f5;            /* 아주 옅은 피치 - 페이지 배경 */
    --mp-surface: #ffffff;       /* 카드 배경 */
    --mp-border: #ffe4e0;        /* 피치 톤 테두리 */
    --mp-text: #3f3235;          /* 본문 텍스트 (피치 배경 위 대비 확보) */
    --mp-text-muted: #8a7175;    /* 보조 텍스트 */
}

.avatar-md {
    height: 5rem;
    width: 5rem;
    padding: 10px;
    background: white;
}
.index-card {
    
}
.index-card .card-title {
    font-weight: 600;
}
.index-card button {
    width: 80% !important;
    
}
.index-card:hover {
    transform: translateY(-5px);
    transition: .2s !important;
}
.index-card-container {
    width: 768px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1rem;
}
.buy-btn {
    background: #f9f9f9;
    color: red;
    border: 0;
    
}
@media (max-width: 768px) {
    .index-card-container {
        width: unset;
    }
}