:root {
  --skill-red: #a50f0f;
  --skill-gold: #ffde00;
  --skill-white: #fff;
  --skill-ink: #281313;
  --skill-muted: #735f5f;
}
.skill-page { padding-top: 28px; padding-bottom: 60px; color: var(--skill-ink); }
.skill-page-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.skill-page-head h1 { font-weight: 800; }
.skill-account-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.8fr); gap: 24px; }
.skill-panel { padding: 24px; background: #fff; border: 1px solid #eadede; border-radius: 18px; box-shadow: 0 10px 34px rgba(95,10,10,.06); }
.skill-panel h2 { font-size: 1.35rem; margin-bottom: 20px; }
.skill-upload-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 12px; }
.skill-upload-grid > div { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f8f1f1; }
.skill-upload-grid img { width: 100%; height: 100%; object-fit: cover; }
.skill-upload-grid button { position: absolute; right: 6px; top: 6px; border: 0; border-radius: 50%; width: 28px; height: 28px; background: #fff; color: var(--skill-red); font-size: 20px; }
.skill-my-list article { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eee; }
.skill-my-list article > div:first-child { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 2px 10px; }
.skill-my-list img { grid-row: 1/3; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
.skill-my-list span { font-size: .82rem; color: var(--skill-muted); }
.skill-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.skill-card { overflow: hidden; background: #fff; border: 1px solid #eadede; border-radius: 18px; box-shadow: 0 8px 28px rgba(95,10,10,.06); }
.skill-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #f7eeee; }
.skill-card__body { padding: 18px; }
.skill-card h2 { font-size: 1.15rem; }
.skill-badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #fff5bb; color: #6e5800; font-size: .75rem; font-weight: 700; }
.skill-price { color: var(--skill-red); font-size: 1.35rem; font-weight: 900; }
.skill-detail { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 30px; }
.skill-gallery img { width: 100%; border-radius: 18px; }
.skill-checkout { position: sticky; top: 110px; height: max-content; }
.skill-order-card { padding: 18px; border: 1px solid #eadede; border-radius: 16px; background: #fff; margin-bottom: 14px; }
.skill-order-card.is-paid { border-color: #b9dfc2; }
.skill-status { font-weight: 800; color: var(--skill-red); }
#skill-checkout-frame { min-height: 480px; }
.skill-page .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: var(--skill-gold);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  background: var(--skill-red);
  border-color: var(--skill-red);
  color: #fff !important;
}
.skill-page .btn-danger:hover,
.skill-page .btn-danger:focus-visible { color: var(--skill-gold) !important; }
@media (max-width: 900px) {
  .skill-account-grid, .skill-detail { grid-template-columns: 1fr; }
  .skill-card-grid { grid-template-columns: repeat(2,1fr); }
  .skill-checkout { position: static; }
}
@media (max-width: 600px) {
  .skill-page-head { align-items: start; flex-direction: column; }
  .skill-card-grid { grid-template-columns: 1fr; }
  .skill-panel { padding: 17px; }
  .skill-upload-grid { grid-template-columns: repeat(3,1fr); }
}