/* ================================================================
   v276 — 부스터팩 첫 화면 단순화 + 순차 카드 플립 공개
   1) 부스터 첫 화면: 팩 표지/팩명/에피소드만 표시
   2) 개봉 결과: 카드 뒷면 -> 앞면을 획득 순서대로 자동 플립
   ================================================================ */

/* ---------- 부스터팩 첫 화면 ---------- */
#boosterPackGrid.v276-booster-picker{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;
  gap:14px!important;
  align-items:start!important;
}
#boosterPackGrid .booster-card.v276-simple-pack{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto auto!important;
  gap:7px!important;
  align-items:start!important;
  padding:10px!important;
  min-width:0!important;
  cursor:pointer!important;
  overflow:hidden!important;
  border:1px solid rgba(232,196,108,.25)!important;
  border-radius:11px!important;
  background:rgba(18,14,11,.9)!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
#boosterPackGrid .booster-card.v276-simple-pack:hover,
#boosterPackGrid .booster-card.v276-simple-pack:focus-visible{
  transform:translateY(-2px)!important;
  border-color:rgba(245,211,124,.72)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
  outline:none!important;
}
#boosterPackGrid .booster-card.v276-simple-pack > *{
  display:none!important;
  grid-column:1!important;
}
#boosterPackGrid .booster-card.v276-simple-pack > .v265-pack-cover,
#boosterPackGrid .booster-card.v276-simple-pack > .pack-art{
  display:flex!important;
  grid-row:1!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  aspect-ratio:16/9!important;
  position:relative!important;
}
#boosterPackGrid .booster-card.v276-simple-pack > .v265-pack-head{
  display:block!important;
  grid-row:2!important;
  margin:0!important;
}
#boosterPackGrid .booster-card.v276-simple-pack > .v265-pack-head h3{
  display:block!important;
  margin:0!important;
  font-size:13px!important;
  line-height:1.35!important;
  color:#f2d27f!important;
  text-align:center!important;
}
#boosterPackGrid .booster-card.v276-simple-pack > .v265-pack-head .v265-visibility{
  display:none!important;
}
#boosterPackGrid .booster-card.v276-simple-pack > p{
  display:block!important;
  grid-row:3!important;
  margin:0!important;
  padding:0!important;
  font-size:10px!important;
  line-height:1.35!important;
  text-align:center!important;
  color:#d8c79d!important;
}
#boosterPackGrid .booster-card.v276-simple-pack .v273-cover-hint{
  display:none!important;
}

/* ---------- 개봉 결과: 순차 플립 ---------- */

/* 결과 DOM이 래핑되기 전 카드 앞면이 순간 노출되지 않도록 숨긴다. */
#v274BoosterResultGrid > .shop-card-entry{visibility:hidden!important;}
#v274BoosterResultGrid.v276-flip-grid{
  perspective:1200px!important;
  align-items:start!important;
}
#v274BoosterResultGrid .v276-flip-card{
  position:relative!important;
  width:var(--collection-card-width,175px)!important;
  min-width:var(--collection-card-width,175px)!important;
  max-width:var(--collection-card-width,175px)!important;
  height:calc(var(--collection-card-height,306.25px) + 28px)!important;
  min-height:calc(var(--collection-card-height,306.25px) + 28px)!important;
  perspective:1000px!important;
  transform:translateZ(0);
}
#v274BoosterResultGrid .v276-flip-inner{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform-style:preserve-3d!important;
  transform:rotateY(180deg)!important;
  transition:transform .62s cubic-bezier(.2,.72,.16,1)!important;
}
#v274BoosterResultGrid .v276-flip-card.is-revealed .v276-flip-inner{
  transform:rotateY(0deg)!important;
}
#v274BoosterResultGrid .v276-card-back,
#v274BoosterResultGrid .v276-card-front{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  overflow:hidden!important;
}
#v274BoosterResultGrid .v276-card-front{
  transform:rotateY(0deg)!important;
}
#v274BoosterResultGrid .v276-card-back{
  transform:rotateY(180deg)!important;
}
#v274BoosterResultGrid .v276-card-front > .shop-card-entry{
  margin:0!important;
}
#v274BoosterResultGrid .v276-card-back{
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  padding:10px!important;
  border:1px solid rgba(232,196,108,.58)!important;
  border-radius:9px!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(213,169,73,.25),transparent 34%),
    repeating-linear-gradient(45deg,rgba(235,202,119,.055) 0 7px,transparent 7px 14px),
    linear-gradient(160deg,#24190e 0%,#0e0b09 52%,#191008 100%)!important;
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.42),inset 0 0 0 6px rgba(230,193,102,.18),0 12px 30px rgba(0,0,0,.34)!important;
}
#v274BoosterResultGrid .v276-card-back::before{
  content:'三國志'!important;
  display:grid!important;
  place-items:center!important;
  width:76%!important;
  aspect-ratio:1!important;
  border:1px solid rgba(238,207,125,.38)!important;
  border-radius:50%!important;
  color:#f0cf7b!important;
  font-size:26px!important;
  font-weight:900!important;
  letter-spacing:.1em!important;
  text-indent:.1em!important;
  text-shadow:0 2px 8px rgba(0,0,0,.65)!important;
  box-shadow:inset 0 0 28px rgba(218,167,62,.1)!important;
}
#v274BoosterResultGrid .v276-card-back::after{
  content:'TCG BOOSTER'!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:18px!important;
  text-align:center!important;
  color:rgba(244,221,164,.72)!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
}
#v274BoosterResultGrid .v276-flip-card.is-revealed{
  animation:v276RevealPop .42s ease-out both;
}
@keyframes v276RevealPop{
  0%{filter:brightness(.82)}
  55%{filter:brightness(1.18)}
  100%{filter:none}
}

@media(max-width:760px){
  #boosterPackGrid.v276-booster-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #boosterPackGrid .booster-card.v276-simple-pack{padding:8px!important}
  #boosterPackGrid .booster-card.v276-simple-pack > .v265-pack-head h3{font-size:11px!important}
  #v274BoosterResultGrid .v276-card-back::before{font-size:21px!important}
}
@media(max-width:420px){
  #boosterPackGrid.v276-booster-picker{grid-template-columns:1fr 1fr!important;gap:7px!important}
  #boosterPackGrid .booster-card.v276-simple-pack > .v265-pack-head h3{font-size:10px!important}
  #boosterPackGrid .booster-card.v276-simple-pack > p{font-size:9px!important}
}

@media(prefers-reduced-motion:reduce){
  #v274BoosterResultGrid .v276-flip-inner{transition-duration:.01ms!important}
  #v274BoosterResultGrid .v276-flip-card.is-revealed{animation:none!important}
}