:root{
  --bg:#0b0f14;
  --surface:#0f1620;
  --card:#121c27;
  --stroke:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.52);
  --brand:#d7b08c;
  --brand2:#a37a55;
  --danger:#ff5a5f;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --shadow2:0 14px 40px rgba(0,0,0,.4);
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --container:1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, rgba(215,176,140,.22), transparent 60%),
             radial-gradient(900px 600px at 90% 0%, rgba(163,122,85,.18), transparent 55%),
             var(--bg);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height:1.55;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.main{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px 56px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:saturate(140%) blur(14px);
  background:rgba(11,15,20,.7);
  border-bottom:1px solid var(--stroke);
}
.topbar__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand__mark{
  display:inline-flex;
  padding:2px 10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(215,176,140,.22), rgba(215,176,140,.08));
  border:1px solid rgba(215,176,140,.35);
  color:rgba(215,176,140,.95);
  font-weight:800;
}
.navToggle{
  margin-left:auto;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:650;
}
.nav{
  margin-left:auto;
  display:none;
  gap:12px;
  align-items:center;
}
.nav.is-open{display:flex;flex-direction:column;align-items:stretch;width:100%;margin:0;padding:12px 0}
.nav__link{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--muted);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.nav__link:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--stroke);
  color:var(--text);
}
.nav__link--cart{
  color:rgba(215,176,140,.95);
}

@media (min-width: 860px){
  .navToggle{display:none}
  .nav{display:flex}
}

.footer{
  border-top:1px solid var(--stroke);
  background:rgba(15,22,32,.55);
}
.footer__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:28px 20px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer__brand{font-weight:700}
.footer__meta{color:var(--muted2);font-size:14px}
.footer__links{display:flex;gap:14px}

.link{
  color:rgba(215,176,140,.95);
  text-decoration:none;
}
.link:hover{text-decoration:underline}

.section{padding:36px 0}
.section--tight{padding:18px 0 36px}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.section__title{margin:0;font-size:22px;letter-spacing:.2px}
.page__title{margin:0;font-size:26px}
.page__search{display:flex;gap:10px;align-items:center}

.muted{color:var(--muted2)}
.w-100{width:100%}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(180deg, rgba(215,176,140,.95), rgba(163,122,85,.95));
  color:#1a120a;
  box-shadow:0 10px 30px rgba(215,176,140,.18);
}
.btn--ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--stroke);
  color:var(--text);
}
.btn--danger{
  background:rgba(255,90,95,.12);
  border-color:rgba(255,90,95,.25);
  color:rgba(255,255,255,.95);
}
.btn--lg{padding:12px 16px;border-radius:16px}
.btn.is-disabled{pointer-events:none;opacity:.45}

.input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  color:var(--text);
  padding:11px 12px;
  border-radius:14px;
  outline:none;
}
.input:focus{
  border-color:rgba(215,176,140,.45);
  box-shadow:0 0 0 4px rgba(215,176,140,.12);
}
.input--lg{padding:13px 14px;border-radius:16px}
.input--qty{max-width:92px}

.pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  color:var(--muted);
  font-size:13px;
}

.hero{padding:44px 0 22px}
.hero__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:stretch;
}
.hero__copy{
  background:linear-gradient(180deg, rgba(18,28,39,.9), rgba(18,28,39,.65));
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:26px;
  box-shadow:var(--shadow2);
}
.hero__kicker{
  color:rgba(215,176,140,.95);
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
}
.hero__title{
  margin:10px 0 10px;
  font-size:34px;
  line-height:1.15;
}
.hero__desc{margin:0 0 16px;color:var(--muted)}
.hero__search{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 16px}
.hero__meta{display:flex;gap:10px;flex-wrap:wrap}
.hero__visual{
  display:none;
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(215,176,140,.10), rgba(18,28,39,.75));
  overflow:hidden;
  box-shadow:var(--shadow2);
}
.hero__frame{position:relative;width:100%;height:100%;min-height:240px}
.hero__mesh{
  position:absolute;inset:-60px;
  background:radial-gradient(circle at 20% 20%, rgba(215,176,140,.35), transparent 60%),
             radial-gradient(circle at 70% 35%, rgba(255,255,255,.16), transparent 60%),
             radial-gradient(circle at 40% 85%, rgba(163,122,85,.28), transparent 55%);
  filter:blur(0);
}
.hero__stamp{
  position:absolute;
  right:18px;
  bottom:18px;
  width:88px;
  height:88px;
  border-radius:22px;
  border:1px solid rgba(215,176,140,.35);
  background:rgba(11,15,20,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.22em;
  color:rgba(215,176,140,.95);
}

@media (min-width: 980px){
  .hero__grid{grid-template-columns: 1.2fr .8fr;gap:18px}
  .hero__visual{display:block}
  .hero__title{font-size:40px}
}

.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (min-width: 720px){
  .grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width: 1060px){
  .grid{grid-template-columns:repeat(4, minmax(0,1fr))}
}

.card{
  background:linear-gradient(180deg, rgba(18,28,39,.95), rgba(18,28,39,.72));
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow2);
  transition:transform .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px);border-color:rgba(215,176,140,.22)}
.card--flat{box-shadow:none}
.card__media{aspect-ratio: 4/5; background:rgba(255,255,255,.03)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__fallback{width:100%;height:100%;background:radial-gradient(circle at 40% 30%, rgba(215,176,140,.18), rgba(255,255,255,.04) 60%, rgba(0,0,0,0) 75%)}
.card__body{padding:14px 14px 16px}
.card__title{font-weight:800;letter-spacing:.1px;margin-bottom:6px}
.card__desc{color:var(--muted2);font-size:13px;min-height:38px}
.card__price{margin-top:10px;font-weight:850;color:rgba(215,176,140,.95)}

.pager{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.pager__controls{display:flex;align-items:center;gap:10px}
.pager__status{color:var(--muted);font-weight:700}

.empty{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--r-lg);
  padding:28px;
  background:rgba(255,255,255,.03);
}
.empty__title{font-size:20px;font-weight:850;margin-bottom:8px}
.empty__desc{color:var(--muted);margin-bottom:16px}

.cart{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width: 980px){
  .cart{grid-template-columns: 1fr 360px}
}
.cart__list{display:flex;flex-direction:column;gap:12px}
.cart__item{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
}
@media (min-width: 860px){
  .cart__item{grid-template-columns: 92px 1.2fr 160px 120px 110px}
}
.cart__thumb{width:86px;height:108px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid var(--stroke)}
.cart__thumb img{width:100%;height:100%;object-fit:cover}
.cart__name{font-weight:850}
.cart__sku{color:var(--muted2);font-size:13px;margin-top:2px}
.cart__price{color:rgba(215,176,140,.95);font-weight:850;margin-top:8px}
.cart__qty form{display:flex;gap:10px;align-items:center}
.cart__sum{font-weight:850}

.summary{
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(18,28,39,.85), rgba(18,28,39,.6));
  padding:16px;
}
.summary__title{font-weight:850;margin-bottom:12px}
.summary__row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.summary__row:first-of-type{border-top:0}
.summary__total{font-size:18px;font-weight:900}
.summary__note{font-size:13px;margin-top:10px}
.summary__items{display:flex;flex-direction:column;gap:10px;margin:10px 0 12px}
.summary__item{display:grid;grid-template-columns:1fr auto;gap:10px}
.summary__itemName{font-weight:800}
.summary__itemPrice{font-weight:800;color:rgba(215,176,140,.95)}

.checkout{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width: 980px){
  .checkout{grid-template-columns: 1fr 380px}
}
.form{
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  padding:16px;
}
.form__group{padding:14px 0;border-top:1px solid rgba(255,255,255,.06)}
.form__group:first-child{border-top:0;padding-top:0}
.form__label{font-weight:850;margin-bottom:10px}
.form__row{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
@media (min-width: 720px){
  .form__row{grid-template-columns: repeat(2, minmax(0,1fr))}
}
.alert{
  border:1px solid rgba(255,90,95,.28);
  background:rgba(255,90,95,.10);
  color:rgba(255,255,255,.92);
  padding:12px 14px;
  border-radius:14px;
  margin-bottom:12px;
}

.product{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding:22px 0 36px;
}
@media (min-width: 980px){
  .product{grid-template-columns: 1.05fr .95fr;gap:18px}
}
.gallery{
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.gallery__main{aspect-ratio: 4/5;background:rgba(255,255,255,.03)}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__thumbs{display:flex;gap:10px;padding:12px;overflow:auto;border-top:1px solid rgba(255,255,255,.06)}
.thumb{
  width:74px;height:92px;flex:0 0 auto;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  overflow:hidden;
  cursor:pointer;
  opacity:.82;
}
.thumb:hover{opacity:1;border-color:rgba(215,176,140,.25)}
.thumb.is-active{opacity:1;border-color:rgba(215,176,140,.55)}
.thumb img{width:100%;height:100%;object-fit:cover}

.buy{
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(18,28,39,.85), rgba(18,28,39,.6));
  padding:18px;
}
.buy__title{font-size:28px;line-height:1.2;margin:0 0 8px}
.buy__price{font-size:22px;font-weight:900;color:rgba(215,176,140,.95);margin:10px 0 12px}
.buy__desc{color:var(--muted);margin:0 0 14px}
.buy__section{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.sku{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.sku__item{
  position:relative;
}
.sku__item input{position:absolute;opacity:0;pointer-events:none}
.sku__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:750;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.sku__item input:checked + .sku__pill{
  border-color:rgba(215,176,140,.55);
  background:rgba(215,176,140,.12);
}
.buy__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.prose{color:var(--muted);white-space:pre-wrap}

/* Mystical crystal theme overrides */
:root{
  --bg:#f6f1fb;
  --surface:#fff9ff;
  --card:#fffdfd;
  --stroke:rgba(113, 82, 155, .14);
  --text:#342744;
  --muted:rgba(52,39,68,.76);
  --muted2:rgba(52,39,68,.58);
  --brand:#8b70d6;
  --brand2:#d7b2ff;
  --danger:#d45b7a;
  --shadow:0 26px 70px rgba(90,58,128,.12);
  --shadow2:0 18px 48px rgba(120,92,165,.14);
}

body{
  color:var(--text);
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(197,177,255,.5), transparent 60%),
    radial-gradient(700px 420px at 95% 5%, rgba(255,230,247,.75), transparent 58%),
    radial-gradient(540px 320px at 50% 110%, rgba(206,245,255,.5), transparent 60%),
    linear-gradient(180deg, #f9f6ff 0%, #f7f1fb 45%, #fcfbff 100%);
}

.topbar{
  background:rgba(255,250,255,.72);
  border-bottom:1px solid rgba(139,112,214,.12);
  box-shadow:0 12px 36px rgba(112,86,160,.07);
}

.brand{
  font-weight:800;
  letter-spacing:.08em;
  color:#47345f;
}

.brand__mark{
  background:linear-gradient(180deg, rgba(139,112,214,.18), rgba(215,178,255,.22));
  border:1px solid rgba(139,112,214,.2);
  color:#765bb7;
}

.navToggle{
  background:rgba(255,255,255,.7);
  color:#47345f;
}

.nav__link{
  color:#5e4a7b;
}

.nav__link:hover{
  background:rgba(255,255,255,.7);
  border-color:rgba(139,112,214,.15);
  color:#36264d;
}

.nav__link--cart{
  color:#7c56c6;
}

.nav__member{
  color:#6f56a0;
  font-weight:700;
  padding:10px 0 10px 8px;
}

.nav__form{display:inline-flex}
.btn--sm{padding:9px 12px;border-radius:12px}

.footer{
  background:rgba(255,255,255,.45);
  border-top:1px solid rgba(139,112,214,.12);
}

.link{
  color:#7c56c6;
}

.btn--primary{
  background:linear-gradient(135deg, #8f73db 0%, #b98cff 55%, #f2b8de 100%);
  color:#fff;
  box-shadow:0 14px 34px rgba(148,109,222,.22);
}

.btn--ghost{
  background:rgba(255,255,255,.7);
  border-color:rgba(139,112,214,.16);
  color:#50396d;
}

.input{
  background:rgba(255,255,255,.82);
  border-color:rgba(139,112,214,.14);
  color:#342744;
}

.input:focus{
  border-color:rgba(139,112,214,.35);
  box-shadow:0 0 0 4px rgba(139,112,214,.12);
}

.pill{
  background:rgba(255,255,255,.72);
  border-color:rgba(139,112,214,.12);
  color:#6a5787;
}

.hero{
  padding:52px 0 28px;
}

.hero__copy{
  background:
    radial-gradient(circle at top right, rgba(242,184,222,.22), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,255,.88));
  border:1px solid rgba(139,112,214,.14);
}

.hero__kicker{
  color:#9071d9;
}

.hero__title{
  color:#3a2852;
}

.hero__desc{
  color:#67567f;
}

.hero__visual{
  display:block;
  background:linear-gradient(180deg, rgba(255,255,255,.64), rgba(252,244,255,.86));
  border:1px solid rgba(139,112,214,.12);
}

.hero__visual--lotus{
  min-height:320px;
}

.hero__mesh--violet{
  background:
    radial-gradient(circle at 24% 24%, rgba(170,120,255,.46), transparent 32%),
    radial-gradient(circle at 68% 30%, rgba(255,205,242,.52), transparent 30%),
    radial-gradient(circle at 48% 78%, rgba(178,228,255,.48), transparent 34%),
    radial-gradient(circle at 60% 60%, rgba(255,255,255,.88), transparent 22%);
}

.hero__stamp{
  color:#7a60be;
  border-color:rgba(139,112,214,.22);
  background:rgba(255,255,255,.62);
}

.featureBand{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 860px){
  .featureBand{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

.featureBand__item{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(139,112,214,.12);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow2);
}

.featureBand__title{
  font-weight:800;
  color:#483165;
  margin-bottom:6px;
}

.featureBand__desc{
  color:#6c5a84;
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,252,255,.92));
  border:1px solid rgba(139,112,214,.12);
}

.card__media{
  background:linear-gradient(180deg, rgba(255,247,255,.9), rgba(244,238,255,.95));
}

.card__fallback{
  background:
    radial-gradient(circle at 40% 28%, rgba(165,120,255,.24), rgba(255,255,255,.72) 44%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(244,238,255,.88), rgba(255,249,253,.92));
}

.card__title{
  color:#3f2f55;
}

.card__desc{
  color:#6b587e;
}

.card__price{
  color:#8b65d2;
}

.empty,
.form,
.summary,
.gallery,
.buy,
.cart__item,
.memberCard,
.couponCard,
.courseCard{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,251,255,.92));
  border:1px solid rgba(139,112,214,.12);
  box-shadow:var(--shadow2);
}

.summary__itemPrice,
.buy__price{
  color:#855ed0;
}

.accountShell{
  min-height:calc(100vh - 180px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 0;
}

.accountCard{
  width:min(100%, 560px);
  background:
    radial-gradient(circle at top right, rgba(242,184,222,.24), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,255,.92));
  border:1px solid rgba(139,112,214,.14);
  border-radius:28px;
  padding:26px;
  box-shadow:var(--shadow);
}

.heroBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(139,112,214,.12);
  color:#8663ca;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

.accountTitle{
  margin:14px 0 8px;
  font-size:34px;
  line-height:1.15;
  color:#3a2852;
}

.accountDesc{
  margin:0 0 18px;
  color:#69597e;
}

.accountFoot{
  margin-top:14px;
  color:#69597e;
}

.form__row--single{
  grid-template-columns:1fr;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.memberCard{
  border-radius:22px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

@media (min-width: 900px){
  .memberCard{
    grid-template-columns: 1fr auto auto;
    align-items:center;
  }
}

.memberCard__label{
  color:#8a71a8;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.memberCard__title{
  font-size:22px;
  font-weight:800;
  color:#44315d;
}

.memberCard__meta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  color:#66557e;
}

.memberCard__amount{
  font-weight:900;
  color:#825ed0;
  font-size:20px;
}

.memberCard__note{
  color:#6d5d80;
}

.grid--coupons{
  grid-template-columns:1fr;
}

@media (min-width: 820px){
  .grid--coupons{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

.couponCard{
  border-radius:24px;
  padding:18px;
}

.couponCard--used{
  opacity:.78;
}

.couponCard__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.couponCard__name{
  font-size:22px;
  font-weight:800;
  color:#412d5d;
}

.couponCard__code{
  color:#8661c9;
  font-weight:800;
}

.couponCard__value{
  margin:18px 0 10px;
  font-size:28px;
  font-weight:900;
  color:#7f57ca;
}

.couponCard__rule{
  color:#66567d;
  margin-top:6px;
}

.couponCard__foot{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(139,112,214,.14);
  background:rgba(255,255,255,.7);
  color:#71559d;
  font-size:13px;
  font-weight:800;
}

.badge--ready{
  color:#6b4db2;
  background:rgba(183,154,255,.16);
}

.badge--used{
  color:#9b7281;
  background:rgba(242,184,222,.16);
}

.badge--soft{
  color:#6e5b88;
  background:rgba(255,255,255,.72);
}

.courseGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

@media (min-width: 960px){
  .courseGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

.courseCard{
  overflow:hidden;
  border-radius:26px;
}

.courseCard__visual{
  aspect-ratio:16/10;
  background:linear-gradient(180deg, rgba(239,229,255,.96), rgba(255,244,252,.96));
}

.courseCard__visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.courseCard__body{
  padding:18px;
}

.courseCard__code{
  color:#8868c5;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
}

.courseCard__title{
  margin:8px 0 8px;
  color:#402d5a;
  font-size:24px;
}

.courseCard__desc{
  color:#6b5b83;
}

.scheduleList{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.scheduleItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(139,112,214,.12);
}

.scheduleItem__time{
  font-weight:800;
  color:#44315d;
}