/* base/skin.css는 레이아웃이 먼저 불러온다. 이 파일에는 파이몰 대표 색상과 파이몰 전용 블록만 둔다. */
:root {
    --brand: #5a3ea6;
    --brand-strong: #432d80;
    --brand-hover: #4d3590;
    --brand-soft: #efeaf8;
    --brand-ring: rgba(90, 62, 166, .12);
    --bcg-gold: #e0a12b;
}

/* 홈 BCG코인 안내 (blocks/home/12-bcg) */
.bcg { padding-top: var(--sp-6); }
.bcg-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: 36px 40px; border-radius: var(--r-xl); background: var(--brand-soft); }
.bcg-copy { min-width: 0; }
.bcg-banner h2 { margin: 10px 0 6px; font-size: var(--fs-2xl); line-height: 1.35; letter-spacing: -.05em; font-weight: 800; }
.bcg-banner p { margin: 0; color: var(--text-soft); font-size: var(--fs-lg); }
.bcg strong { color: var(--brand); font-weight: 800; }
.bcg-action { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--sp-4); }
.bcg-swap { display: flex; align-items: center; gap: var(--sp-3); }
.bcg-coin { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: var(--fs-sm); font-weight: 800; }
.bcg-coin.bcg-gold { background: var(--bcg-gold); color: #3a2600; }
.bcg-arrow { color: var(--brand); font-size: var(--fs-xl); font-weight: 800; }
.bcg-kicker { margin: var(--sp-6) 0 var(--sp-4); }
.bcg-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.bcg-links a { display: flex; flex-direction: column; gap: var(--sp-3); padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.bcg-links a:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.bcg-links i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); }
.bcg-links b { font-size: var(--fs-md); }
.bcg-links b span { color: var(--brand); }

@media (max-width: 720px) {
    .bcg { padding-top: var(--sp-5); }
    .bcg-banner { flex-direction: column; align-items: stretch; padding: 28px 24px; }
    .bcg-banner h2 { font-size: var(--fs-xl); }
    .bcg-banner p { font-size: var(--fs-md); }
    .bcg-action .primary { width: 100%; }
    .bcg-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}