/* ===== Card flip effects ===== */

/* flipY (default) */
.flashcard[data-flip="flipY"] .flashcard-back {
  transform: rotateY(180deg);
}
.flashcard[data-flip="flipY"].flipped .flashcard-inner {
  transform: rotateY(180deg);
}

/* flipX */
.flashcard[data-flip="flipX"] .flashcard-inner {
  transition: transform calc(0.6s * var(--flipSpeed));
}
.flashcard[data-flip="flipX"] .flashcard-back {
  transform: rotateX(180deg);
}
.flashcard[data-flip="flipX"].flipped .flashcard-inner {
  transform: rotateX(180deg);
}

/* fade */
.flashcard[data-flip="fade"] .flashcard-inner {
  transition: none; transform-style: flat;
}
.flashcard[data-flip="fade"] .flashcard-front,
.flashcard[data-flip="fade"] .flashcard-back {
  backface-visibility: visible;
  transform: none;
  transition: opacity calc(0.4s * var(--flipSpeed));
}
.flashcard[data-flip="fade"] .flashcard-back { opacity: 0; }
.flashcard[data-flip="fade"] .flashcard-front { opacity: 1; }
.flashcard[data-flip="fade"].flipped .flashcard-front { opacity: 0; }
.flashcard[data-flip="fade"].flipped .flashcard-back { opacity: 1; }

/* zoom */
.flashcard[data-flip="zoom"] .flashcard-inner {
  transition: transform calc(0.5s * var(--flipSpeed)); transform-style: flat;
}
.flashcard[data-flip="zoom"] .flashcard-front,
.flashcard[data-flip="zoom"] .flashcard-back {
  backface-visibility: visible;
  transition: opacity calc(0.25s * var(--flipSpeed)), transform calc(0.5s * var(--flipSpeed));
}
.flashcard[data-flip="zoom"] .flashcard-back { transform: scale(1.15); opacity: 0; }
.flashcard[data-flip="zoom"] .flashcard-front { opacity: 1; transform: scale(1); }
.flashcard[data-flip="zoom"].flipped .flashcard-front { opacity: 0; transform: scale(0.8); }
.flashcard[data-flip="zoom"].flipped .flashcard-back { opacity: 1; transform: scale(1); }

/* slide */
.flashcard[data-flip="slide"] .flashcard-inner {
  transition: none; transform-style: flat;
}
.flashcard[data-flip="slide"] .flashcard-front,
.flashcard[data-flip="slide"] .flashcard-back {
  backface-visibility: visible;
  transition: transform calc(0.4s * var(--flipSpeed)), opacity calc(0.4s * var(--flipSpeed));
}
.flashcard[data-flip="slide"] .flashcard-back { transform: translateX(100%); opacity: 0; }
.flashcard[data-flip="slide"] .flashcard-front { opacity: 1; transform: translateX(0); }
.flashcard[data-flip="slide"].flipped .flashcard-front { transform: translateX(-100%); opacity: 0; }
.flashcard[data-flip="slide"].flipped .flashcard-back { transform: translateX(0); opacity: 1; }

/* none */
.flashcard[data-flip="none"] .flashcard-inner {
  transition: none; transform-style: flat;
}
.flashcard[data-flip="none"] .flashcard-front,
.flashcard[data-flip="none"] .flashcard-back {
  backface-visibility: visible;
  transform: none;
}
.flashcard[data-flip="none"] .flashcard-back { opacity: 0; pointer-events: none; }
.flashcard[data-flip="none"].flipped .flashcard-front { opacity: 0; pointer-events: none; }
.flashcard[data-flip="none"].flipped .flashcard-back { opacity: 1; pointer-events: auto; }

/* flipClock */
.flashcard[data-flip="flipClock"] .flashcard-inner {
  transition: none; transform-style: flat; will-change: auto;
}
.flashcard[data-flip="flipClock"] .flashcard-front,
.flashcard[data-flip="flipClock"] .flashcard-back { backface-visibility: visible; transform: none; }
.flashcard[data-flip="flipClock"] .flashcard-back { opacity: 0; pointer-events: none; }
.flashcard[data-flip="flipClock"].flipped .flashcard-front { opacity: 0; pointer-events: none; }
.flashcard[data-flip="flipClock"].flipped .flashcard-back { opacity: 1; pointer-events: auto; }

/* flipClock: persistent hinge line on card */
.flashcard[data-flip="flipClock"] .flashcard-inner::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 3px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.08) 40%, rgba(255,255,255,0.1) 60%, rgba(0,0,0,0.12));
  box-shadow: 0 -1px 2px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
  z-index: 2;
  transform: translateY(-1.5px);
  pointer-events: none;
}
.flashcard.sizeFit[data-flip="flipClock"] .flashcard-inner::after {
  height: 4px; transform: translateY(-2px);
  box-shadow: 0 -1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.12);
}
.flashcard.sizeFull[data-flip="flipClock"] .flashcard-inner::after {
  height: 5px; transform: translateY(-2.5px);
  box-shadow: 0 -2px 4px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);
}
.flashcard.sizeResize[data-flip="flipClock"] .flashcard-inner::after {
  height: 4px; transform: translateY(-2px);
  box-shadow: 0 -1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.12);
}

/* flipClock overlay */
.flipClockOverlay {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; border-radius: var(--cardRadius); perspective: 600px;
}
.flipClockOverlay::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 3px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.08) 40%, rgba(255,255,255,0.1) 60%, rgba(0,0,0,0.12));
  box-shadow: 0 -1px 2px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
  z-index: 10;
  transform: translateY(-1.5px);
}

/* sizeFit: larger card → thicker hinge + larger perspective */
.flashcard.sizeFit .flipClockOverlay {
  perspective: 1000px;
}
.flashcard.sizeFit .flipClockOverlay::after {
  height: 2.5px;
  transform: translateY(-1.25px);
}
/* sizeFull: fullscreen card → thicker hinge + larger perspective */
.flashcard.sizeFull .flipClockOverlay {
  perspective: 1200px;
}
.flashcard.sizeFull .flipClockOverlay::after {
  height: 3px;
  transform: translateY(-1.5px);
}
/* sizeResize: resizable card → thicker hinge */
.flashcard.sizeResize .flipClockOverlay::after {
  height: 2.5px;
  transform: translateY(-1.25px);
}

/* sizeFit/sizeFull: 모든 애니메이션 overlay 요소 border-radius 통일 (16px) */
.flashcard.sizeFit .flipClockOverlay,
.flashcard.sizeFit .flipClockHalf.top { border-radius: 16px 16px 0 0; }
.flashcard.sizeFit .flipClockHalf.bottom { border-radius: 0 0 16px 16px; }
.flashcard.sizeFit .flipClockPanel { border-radius: 16px 16px 0 0; }
.flashcard.sizeFit .pageTurnPage .pageTurnFace,
.flashcard.sizeFit .pageTurnShadow { border-radius: 16px; }
.flashcard.sizeFit .coverflowPeek,
.flashcard.sizeFit .coverflowCard { border-radius: 16px; }

.flashcard.sizeFull .flipClockOverlay,
.flashcard.sizeFull .flipClockHalf.top { border-radius: 16px 16px 0 0; }
.flashcard.sizeFull .flipClockHalf.bottom { border-radius: 0 0 16px 16px; }
.flashcard.sizeFull .flipClockPanel { border-radius: 16px 16px 0 0; }
.flashcard.sizeFull .pageTurnPage .pageTurnFace,
.flashcard.sizeFull .pageTurnShadow { border-radius: 16px; }
.flashcard.sizeFull .coverflowPeek,
.flashcard.sizeFull .coverflowCard { border-radius: 16px; }
.flipClockHalf {
  position: absolute; left: 0; width: 100%; height: 50%;
  overflow: hidden; border: var(--cardBorderWidth) var(--cardBorderStyle) var(--cardBorder);
}
.flipClockHalf.top { top: 0; border-radius: var(--cardRadius) var(--cardRadius) 0 0; border-bottom: none; }
.flipClockHalf.bottom { bottom: 0; border-radius: 0 0 var(--cardRadius) var(--cardRadius); border-top: none; }
.flipClockContent {
  position: absolute; left: 0; width: 100%; height: 200%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.5rem, 5vw, 6rem);
  font-family: var(--cardFont);
  color: var(--cardWordColor);
  padding: 1.5rem;
  box-sizing: border-box;
  z-index: 2;
}
.flipClockContent.has-slot-layout {
  padding: 0.5rem;
}
.flipClockHalf.top .flipClockContent { top: 0; }
.flipClockHalf.bottom .flipClockContent { bottom: 0; }

.flipClockPanel {
  position: absolute; left: 0; width: 100%; height: 50%;
  overflow: hidden; transform-origin: bottom center;
  border: var(--cardBorderWidth) var(--cardBorderStyle) var(--cardBorder);
  border-radius: var(--cardRadius) var(--cardRadius) 0 0; border-bottom: none; top: 0; z-index: 6;
}
.flipClockPanel .flipClockContent {
  position: absolute; left: 0; width: 100%; height: 200%;
  display: flex; align-items: center; justify-content: center; top: 0;
  padding: 1.5rem; box-sizing: border-box;
}
.flipClockPanel::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0); transition: background 0.3s;
}
.flipClockPanel.animating {
  animation: flipClockFold calc(0.4s * var(--flipSpeed)) cubic-bezier(0.455,0.03,0.515,0.955) forwards;
}
.flipClockPanel.animating::after {
  animation: flipClockDarken calc(0.4s * var(--flipSpeed)) ease-in forwards;
}

.flipClockPanelBottom {
  position: absolute; left: 0; width: 100%; height: 50%;
  overflow: hidden; transform-origin: top center;
  border: var(--cardBorderWidth) var(--cardBorderStyle) var(--cardBorder);
  border-radius: 0 0 var(--cardRadius) var(--cardRadius); border-top: none; bottom: 0; z-index: 6;
  transform: rotateX(90deg);
}
.flipClockPanelBottom .flipClockContent {
  position: absolute; left: 0; width: 100%; height: 200%;
  display: flex; align-items: center; justify-content: center; bottom: 0;
  padding: 1.5rem; box-sizing: border-box;
}
.flipClockPanelBottom::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.25);
}
.flipClockPanelBottom.animating {
  animation: flipClockUnfold calc(0.5s * var(--flipSpeed)) calc(0.25s * var(--flipSpeed)) ease-out forwards;
}
.flipClockPanelBottom.animating::after {
  animation: flipClockBrighten calc(0.5s * var(--flipSpeed)) calc(0.25s * var(--flipSpeed)) ease-out forwards;
}

@keyframes flipClockFold {
  0% { transform: rotateX(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
  100% { transform: rotateX(-90deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
@keyframes flipClockDarken {
  0% { background: rgba(0,0,0,0); } 100% { background: rgba(0,0,0,0.25); }
}
@keyframes flipClockUnfold {
  0% { transform: rotateX(90deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 -8px 20px rgba(0,0,0,0.3); }
  75% { transform: rotateX(-4deg); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
  88% { transform: rotateX(2deg); box-shadow: 0 -1px 3px rgba(0,0,0,0.05); }
  100% { transform: rotateX(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
@keyframes flipClockBrighten {
  0% { background: rgba(0,0,0,0.25); } 100% { background: rgba(0,0,0,0); }
}

/* ===== Card transition animations ===== */

/* slideH */
@keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.flashcard-inner.slideOutLeft { animation: slideOutLeft calc(0.3s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.slideInRight { animation: slideInRight calc(0.3s * var(--slideSpeed)) ease-out none; }
.flashcard-inner.slideOutRight { animation: slideOutRight calc(0.3s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.slideInLeft { animation: slideInLeft calc(0.3s * var(--slideSpeed)) ease-out none; }

/* slideV */
@keyframes slideOutUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes slideInDown { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOutDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes slideInUp { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.flashcard-inner.slideOutUp { animation: slideOutUp calc(0.3s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.slideInDown { animation: slideInDown calc(0.3s * var(--slideSpeed)) ease-out none; }
.flashcard-inner.slideOutDown { animation: slideOutDown calc(0.3s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.slideInUp { animation: slideInUp calc(0.3s * var(--slideSpeed)) ease-out none; }

/* cardFade */
@keyframes cardFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes cardFadeIn { from { opacity: 0; } to { opacity: 1; } }
.flashcard-inner.cardFadeOut { animation: cardFadeOut calc(0.25s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.cardFadeIn { animation: cardFadeIn calc(0.25s * var(--slideSpeed)) ease-out none; }

/* zoomFade */
@keyframes zoomFadeOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.85); opacity: 0; } }
@keyframes zoomFadeIn { from { transform: scale(1.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.flashcard-inner.zoomFadeOut { animation: zoomFadeOut calc(0.3s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.zoomFadeIn { animation: zoomFadeIn calc(0.3s * var(--slideSpeed)) ease-out none; }

/* swing */
@keyframes swingOutNext { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(-90deg); opacity: 0; } }
@keyframes swingInNext { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swingOutPrev { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(90deg); opacity: 0; } }
@keyframes swingInPrev { from { transform: rotateY(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }

.flashcard-inner.swingOutNext { animation: swingOutNext calc(0.3s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.swingInNext { animation: swingInNext calc(0.3s * var(--slideSpeed)) ease-out none; }
.flashcard-inner.swingOutPrev { animation: swingOutPrev calc(0.3s * var(--slideSpeed)) ease-in forwards; }
.flashcard-inner.swingInPrev { animation: swingInPrev calc(0.3s * var(--slideSpeed)) ease-out none; }

/* ===== pageTurn (book page flip) ===== */
.pageTurnOverlay {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; perspective: 1800px;
}
.pageTurnPage {
  position: absolute; inset: 0; z-index: 6;
  transform-style: preserve-3d;
}
.pageTurnPage.flipNext { transform-origin: left center; }
.pageTurnPage.flipPrev { transform-origin: right center; }
.pageTurnPage .pageTurnFace {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cardBgGradient, var(--cardBg)); border: var(--cardBorderWidth) var(--cardBorderStyle) var(--cardBorder);
  border-radius: var(--cardRadius); overflow: hidden;
  font-size: clamp(1.5rem, 5vw, 6rem);
  font-family: var(--cardFont); color: var(--cardWordColor);
  padding: 1.5rem; box-sizing: border-box;
  backface-visibility: hidden;
}
.pageTurnPage .pageTurnFace.front::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 60px;
  background: linear-gradient(to left, rgba(0,0,0,0.04) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.pageTurnPage .pageTurnFace.back { transform: rotateY(180deg); color: var(--cardMeaningColor); background: var(--cardBackBg, var(--cardBgGradient, var(--cardBg))); }
.pageTurnPage.flipNext .pageTurnFace.back::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 30px;
  background: linear-gradient(to left, rgba(0,0,0,0.06) 0%, transparent 100%);
  pointer-events: none;
}
.pageTurnPage.flipPrev .pageTurnFace.back::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30px;
  background: linear-gradient(to right, rgba(0,0,0,0.06) 0%, transparent 100%);
  pointer-events: none;
}
/* Shadow cast on the static card underneath */
.pageTurnShadow {
  position: absolute; inset: 0; z-index: 7;
  pointer-events: none; opacity: 0;
  border-radius: 12px;
}
.pageTurnShadow.shadowNext {
  background: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.08) 40%, transparent 100%);
}
.pageTurnShadow.shadowPrev {
  background: linear-gradient(to left, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.08) 40%, transparent 100%);
}
/* Spine shadow (fold crease) on the flipping page */
.pageTurnPage::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40px;
  pointer-events: none; z-index: 8; opacity: 0;
  transition: opacity 0.1s;
}
.pageTurnPage.flipNext::after {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.12) 0%, transparent 100%);
}
.pageTurnPage.flipPrev::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.12) 0%, transparent 100%);
}
.pageTurnPage.animating::after { opacity: 1; }

.pageTurnPage.flipNext.animating {
  animation: pageFlipNext calc(0.7s * var(--slideSpeed)) cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.pageTurnPage.flipPrev.animating {
  animation: pageFlipPrev calc(0.7s * var(--slideSpeed)) cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.pageTurnShadow.animating {
  animation: pageShadowFade calc(0.7s * var(--slideSpeed)) cubic-bezier(0.22,0.61,0.36,1) forwards;
}

/* Next: page lifts, curls slightly, flips left like a real book page */
@keyframes pageFlipNext {
  0%   { transform: rotateY(0deg) translateZ(0); box-shadow: none; }
  15%  { transform: rotateY(-15deg) translateZ(20px) scale(1.01); box-shadow: -4px 0 16px rgba(0,0,0,0.12); }
  40%  { transform: rotateY(-70deg) translateZ(30px) scale(1.02); box-shadow: -8px 0 30px rgba(0,0,0,0.2); }
  60%  { transform: rotateY(-110deg) translateZ(25px) scale(1.01); box-shadow: -6px 0 24px rgba(0,0,0,0.18); }
  80%  { transform: rotateY(-160deg) translateZ(10px); box-shadow: -2px 0 8px rgba(0,0,0,0.08); }
  95%  { transform: rotateY(-177deg) translateZ(2px); box-shadow: 0 0 2px rgba(0,0,0,0.03); }
  100% { transform: rotateY(-180deg) translateZ(0); box-shadow: none; }
}

/* Prev: page flips back from the left */
@keyframes pageFlipPrev {
  0%   { transform: rotateY(0deg) translateZ(0); box-shadow: none; }
  15%  { transform: rotateY(15deg) translateZ(20px) scale(1.01); box-shadow: 4px 0 16px rgba(0,0,0,0.12); }
  40%  { transform: rotateY(70deg) translateZ(30px) scale(1.02); box-shadow: 8px 0 30px rgba(0,0,0,0.2); }
  60%  { transform: rotateY(110deg) translateZ(25px) scale(1.01); box-shadow: 6px 0 24px rgba(0,0,0,0.18); }
  80%  { transform: rotateY(160deg) translateZ(10px); box-shadow: 2px 0 8px rgba(0,0,0,0.08); }
  95%  { transform: rotateY(177deg) translateZ(2px); box-shadow: 0 0 2px rgba(0,0,0,0.03); }
  100% { transform: rotateY(180deg) translateZ(0); box-shadow: none; }
}

/* Shadow on static card: appears as page lifts, fades as it lands */
@keyframes pageShadowFade {
  0%   { opacity: 0; }
  20%  { opacity: 0.7; }
  50%  { opacity: 1; }
  80%  { opacity: 0.5; }
  100% { opacity: 0; }
}
/* Page turn: respect slot layout */
.pageTurnFace.has-slot-layout {
  font-size: 1rem; padding: 0.5rem;
}
.pageTurnFace .slot-layout-container {
  position: absolute; inset: 0;
}

/* Page turn + flipClock: hinge on flipping page */
.flashcard[data-flip="flipClock"] .pageTurnFace::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 3px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.08) 40%, rgba(255,255,255,0.1) 60%, rgba(0,0,0,0.12));
  box-shadow: 0 -1px 2px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
  z-index: 1;
  transform: translateY(-1.5px);
  pointer-events: none;
}
/* 뒷면은 ::after가 페이지 끝 그림자에 사용되므로 ::before로 힌지 추가 */
.flashcard[data-flip="flipClock"] .pageTurnFace.back::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 3px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.08) 40%, rgba(255,255,255,0.1) 60%, rgba(0,0,0,0.12));
  box-shadow: 0 -1px 2px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
  z-index: 2;
  transform: translateY(-1.5px);
  pointer-events: none;
}

/* ===== pageTurn stack (remaining cards) ===== */
.pageTurnStack {
  position: absolute; z-index: -1; pointer-events: none;
  background: var(--cardBg); border: 2px solid var(--cardBorder);
  border-radius: 12px;
  transition: opacity 0.3s, transform 0.3s;
}
.pageTurnStack[data-layer="1"] {
  inset: 4px 4px -4px -4px; opacity: 0.5;
}
.pageTurnStack[data-layer="2"] {
  inset: 8px 8px -8px -8px; opacity: 0.3;
}
.pageTurnStack[data-layer="3"] {
  inset: 12px 12px -12px -12px; opacity: 0.15;
}
/* sizeFit: 스택 레이어를 inner 영역(10% offset)에 맞춤 */
.flashcard.sizeFit .pageTurnStack { border-radius: 16px; }
.flashcard.sizeFit .pageTurnStack[data-layer="1"] {
  inset: auto; top: calc(10% + 4px); left: calc(10% - 4px); width: 80%; height: 80%;
}
.flashcard.sizeFit .pageTurnStack[data-layer="2"] {
  inset: auto; top: calc(10% + 8px); left: calc(10% - 8px); width: 80%; height: 80%;
}
.flashcard.sizeFit .pageTurnStack[data-layer="3"] {
  inset: auto; top: calc(10% + 12px); left: calc(10% - 12px); width: 80%; height: 80%;
}

/* ===== coverflow ===== */
.coverflowPeek {
  position: absolute; top: 5%; left: 0; width: 100%; height: 90%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cardBgGradient, var(--cardBg)); border: var(--cardBorderWidth) var(--cardBorderStyle) var(--cardBorder);
  border-radius: 10px; pointer-events: none;
  will-change: transform, opacity; box-shadow: var(--cardShadow);
  z-index: 6; font-family: var(--cardFont);
  overflow: hidden;
}
.coverflowPeek .wordText, .coverflowPeek .peekText {
  font-size: clamp(0.7rem, 3.5cqi, 1.5rem); opacity: 0.35; filter: blur(1.5px);
  color: var(--cardWordColor);
  position: relative; z-index: 2;
}
.coverflowOverlay {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; perspective: 800px; overflow: visible;
}
.coverflowCard {
  position: absolute; top: 5%; left: 0; width: 100%; height: 90%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cardBgGradient, var(--cardBg)); border: var(--cardBorderWidth) var(--cardBorderStyle) var(--cardBorder);
  border-radius: var(--cardRadius); will-change: transform, opacity;
  box-shadow: var(--cardShadow); font-family: var(--cardFont);
  overflow: hidden;
}
.coverflowCard.cfCenter {
  top: 0; height: 100%;
}
.flashcard.sizeFit .coverflowCard.cfCenter {
  top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 16px;
}
.coverflowCard .peekText {
  font-size: clamp(0.7rem, 3.5cqi, 1.5rem); opacity: 0.35; filter: blur(1.5px);
  color: var(--cardWordColor);
  position: relative; z-index: 2;
  transition: font-size calc(0.5s * var(--slideSpeed)), opacity calc(0.5s * var(--slideSpeed)), filter calc(0.5s * var(--slideSpeed));
}
.coverflowCard.cfCenter .peekText {
  font-size: clamp(1.5rem, 5vw, 6rem); opacity: 1; filter: none;
  padding: 1.5rem;
  box-sizing: border-box;
}
.coverflowCard.cfCenter .peekText.has-slot-layout {
  padding: 0.5rem;
}

/* shake */
.shake { animation: shake 0.5s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* Clock flip: respect slot layout */
.flipClockContent.has-slot-layout {
  font-size: 1rem;
  align-items: stretch;
  justify-content: stretch;
}
.flipClockContent .slot-layout-container {
  position: absolute;
  inset: 0;
}

/* Page turn: respect slot layout */
.pageTurnTextWrap.has-slot-layout {
  font-size: 1rem;
  padding: 0.5rem;
  align-items: stretch;
  justify-content: stretch;
}
.pageTurnTextWrap .slot-layout-container {
  position: absolute;
  inset: 0;
}

/* Coverflow: respect slot layout */
.coverflowCard.has-slot-layout,
.coverflowPeek.has-slot-layout {
  font-size: 1rem;
}
.coverflowCard .slot-layout-container,
.coverflowPeek .slot-layout-container {
  position: absolute;
  inset: 0;
}
.coverflowCard .peekText.has-slot-layout,
.coverflowPeek .peekText.has-slot-layout {
  position: absolute;
  inset: 0;
  font-size: 1rem;
  opacity: 1;
  filter: none;
}
.coverflowPeek .peekText.has-slot-layout {
  opacity: 0.35;
  filter: blur(1.5px);
}

/* Coverflow + flipClock: hinge line on peek/anim cards */
.flashcard[data-flip="flipClock"] .coverflowPeek::after,
.flashcard[data-flip="flipClock"] .coverflowCard::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.06) 40%, rgba(255,255,255,0.08) 60%, rgba(0,0,0,0.1));
  box-shadow: 0 -1px 1px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.08);
  z-index: 1;
  transform: translateY(-1px);
  pointer-events: none;
}