:root{
    --card-radius:1.25rem;
    --shadow-soft:0 10px 28px rgba(15,23,42,.14);
    --easing:cubic-bezier(.2,0,.38,.9);
    --flip-ms:420ms;
}
body{
    font-family:Pretendard,system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans KR',sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* 카드 스택 */
.stack{
    position:relative;
    perspective:1200px;
    user-select:none;
}
.card{
    position:absolute; inset:0;
    display:grid; place-items:center;
    border-radius:var(--card-radius);
    box-shadow:var(--shadow-soft);
    background:white;
    overflow:hidden;
    will-change:transform,opacity;
    transition:transform var(--flip-ms) var(--easing), opacity 220ms var(--easing);
    touch-action:none; /* PointerEvent 드래그 위해 */
}

/* 역할 기반 z-index */
.card.top { z-index: 2; }
.card.back { z-index: 1; transform: scale(.985); opacity:.9;
    transition: transform 180ms var(--easing), opacity 180ms var(--easing); }

/* 드래그 중 다음 카드가 살짝 올라오는 느낌 */
.card.top.dragging ~ .back { transform: scale(.995); opacity:.96; }

/* 기본은 흰 카드만 보이게 */
.card .card-bg { display: none; }
/* 안내(처음) 상태에서만 보라색 배경 노출 */
.card.instruction .card-bg { display: block; }

.card-bg{
    position:absolute; inset:0;
    background: radial-gradient(120% 120% at 0% 0%,
                #a78bfa 0%, #6366f1 45%, #4338ca 100%);
}
.card-content{
    position:relative; z-index:1;
    padding:1.25rem;
    text-align:center;
    color:#0f172a;
}
.card.instruction .card-content{ color:white; }

.hidden-card{ opacity:0; pointer-events:none; }

/* 스와이프 중 회전 살짝 */
.dragging{
    transition:none !important;
    cursor:grabbing;
}

/* 날아가는 애니메이션(방향별) */
.fly-left{ transform: translateX(-130vw) rotate(-24deg) !important; opacity:0 !important; }
.fly-right{ transform: translateX(130vw) rotate(24deg) !important; opacity:0 !important; }

/* 접근성: 모션 민감 */
@media (prefers-reduced-motion: reduce){
    .card{ transition: opacity 160ms ease }
    .fly-left,.fly-right{ transform:none !important; }
}

/* 2줄 클램프(안내문) */
.line-clamp-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* iOS 하단 제스처 영역 안전 패딩 */
@supports(padding:max(0px)){
    .safe-bottom{ padding-bottom:max(1rem, env(safe-area-inset-bottom)); }
}