/* --- Flip 타이밍 튜닝: 위쪽 더 빠르게, 아래쪽은 약간 늦게 --- */
:root{
  --t-top: .32s;  /* 기존 .42s → 더 빠르게 */
  --t-bot: .60s;  /* 기존 .56s → 약간 느리게 */
  --ease-top: cubic-bezier(.32,.66,.2,1.15); /* 위쪽은 더 날렵하게 */
  --ease-bot: cubic-bezier(.16,.84,.22,1);   /* 아래쪽은 부드럽게 */
}

/* back-bot(새 아래판) 시작을 더 늦춰서, 위판이 먼저 사라지게 */
.flip.play .back-bot{
  animation-delay: .06s; /* 기존 .02s → 60ms로 증가 */
}

/* 위판이 '더 일찍' 사라지도록 키프레임 압축 */
@keyframes flipTop{
  0%   { transform: rotateX(0deg) translateZ(0.001px); }
  80%  { transform: rotateX(-180deg) translateZ(0.001px); } /* 90% → 80% */
  100% { transform: rotateX(-180deg) translateZ(0.001px); }
}
/* 아래판은 여유 있게 올라오도록 (약간의 튕김 유지) */
@keyframes flipBot{
  0%   { transform: rotateX(-180deg) translateZ(0.001px); }
  12%  { transform: rotateX(-170deg) translateZ(0.001px); }
  100% { transform: rotateX(0deg)     translateZ(0.001px); }
}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:#e9ecff; overflow:hidden; cursor:none;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* 배경 패럴럭스 */
.stage{
  position:fixed; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(120vmax 120vmax at calc(var(--mx)*1%) calc((var(--my)-30)*1%), hsl(calc(var(--hue)+40) 70% 18%/.35), transparent 55%),
    radial-gradient(120vmax 120vmax at calc((100 - var(--mx))*1%) calc((var(--my)+30)*1%), hsl(calc(var(--hue)+220)70% 14%/.35), transparent 55%),
    var(--bg);
}

.back{position:fixed;left:12px;top:12px;text-decoration:none;z-index:40}

.clock{
  display:flex;align-items:center;gap:min(3vmin,32px);
  filter:drop-shadow(var(--glow-soft));
  perspective: 1200px;
}
.sep{font-size:clamp(28px,9vmin,64px);line-height:1;opacity:.9;text-shadow:var(--glow-soft)}
.group{display:flex;gap:min(1.8vmin,16px)}

/* ===== 한 자리 카드 ===== */
.flip{
  --H: clamp(54px, 18vmin, 190px);
  position:relative;
  width: clamp(40px, 14vmin, 150px);
  height: var(--H);
  perspective: 900px;
  isolation: isolate;
}
.panel{
  position:absolute; inset:0; border-radius:14px; overflow:hidden; z-index:0;
  background:linear-gradient(180deg,#111826,#0a0f19);
  border:1px solid #ffffff10;
  box-shadow: inset 0 -60px 120px #0006, inset 0 40px 80px #fff1;
}

/* 절반 + 뒤집기용 절반 */
.half,.back-top,.back-bot{
  position:absolute; left:0; width:100%; height:50%; overflow:hidden;
  font-weight:800; letter-spacing:.04em; color:#f6f7ff; text-shadow:var(--glow-strong);
  backface-visibility:hidden; transform-style:preserve-3d;
}
.top{ top:0; z-index:4; border-bottom:1px solid #ffffff14; }
.bot{ bottom:0; z-index:1; }
.back-top{ top:0; z-index:3; transform-origin:bottom; transform:rotateX(180deg); border-bottom:1px solid #ffffff14; }
.back-bot{ bottom:0; z-index:2; transform-origin:top;   transform:rotateX(-180deg); }

/* 숫자(카드 전체 높이로 잡고 절대 위치) */
.val{
  position:absolute; left:0; width:100%; height:var(--H); line-height:var(--H);
  font-size: clamp(32px, 12vmin, 140px); text-align:center;
}
.top .val, .back-top .val { top:0; }
.bot .val, .back-bot .val { top:calc(-0.5*var(--H)); }

/* ==== 플립 애니메이션(현실감 + 겹침 제어) ==== */
/* 기본: back면은 숨김 */
.back-top, .back-bot { opacity:0; will-change:transform,opacity; }

/* 플립 시작 시: 위판이 내려가고(top), 새 아래판(back-bot)이 올라온다 */
.flip.play .top{ animation: flipTop var(--t-top) var(--ease-top) both; }
.flip.play .back-bot{
  opacity:1;
  animation: flipBot var(--t-bot) var(--ease-bot) both;
  animation-delay: .02s; /* 20ms 딜레이로 겹침 프레임 제거 */
}
/* 기존 아래판은 잠시 숨김 → 겹침 방지 */
.flip.play .bot{ opacity:0; }

/* 현실감: 그림자/광택 */
.top::after, .back-bot::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25));
  pointer-events:none; opacity:0;
}
.flip.play .top::after{ animation: shadeTop var(--t-top) var(--ease-top) both; }
.flip.play .back-bot::after{ animation: shadeBot var(--t-bot) var(--ease-bot) both .02s; }

/* 위판은 짧고 빠르게 내려가며 약간 더 어둡게, 아래판은 부드럽게 올라오며 광택이 사라짐 */
@keyframes flipTop{
  0%{   transform:rotateX(0deg) translateZ(0.001px); }
  90%{  transform:rotateX(-178deg) translateZ(0.001px); }
  100%{ transform:rotateX(-180deg) translateZ(0.001px); }
}
@keyframes flipBot{
  0%{   transform:rotateX(-180deg) translateZ(0.001px); }
  10%{  transform:rotateX(-170deg) translateZ(0.001px); } /* 약간의 튕김 */
  100%{ transform:rotateX(0deg)     translateZ(0.001px); }
}
@keyframes shadeTop{
  0%{opacity:0}
  50%{opacity:.35}
  100%{opacity:.0}
}
@keyframes shadeBot{
  0%{opacity:.35}
  60%{opacity:.18}
  100%{opacity:0}
}

/* 날짜/HUD */
.date{margin-top:16px;font-size:clamp(12px,2.3vmin,16px);letter-spacing:.04em;opacity:.85;filter:drop-shadow(var(--glow-soft))}
.hud{position:fixed;right:12px;bottom:10px;display:grid;gap:6px;z-index:30}
.hud #pill{
  justify-self:end;background:#0e1322;border:1px solid #ffffff1a;border-radius:999px;padding:6px 10px;
  font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfe2ff;
  box-shadow:var(--glow-soft);opacity:.9;user-select:none
}

/* 접근성 */
@media (prefers-reduced-motion:reduce){
  :root{ --t-top:.6s; --t-bot:.7s; }
}

/* ==================== Paper Flip Mode ==================== */
/* 활성화: <html class="paper"> ... */
:root{
  /* 종이 재질/물리감 */
  --paper-color-top: #0f1424;       /* 위 장 색감 */
  --paper-color-bot: #0b111d;       /* 아래 장 색감 */
  --paper-edge-hi:  #ffffff18;      /* 가장자리 하이라이트 */
  --paper-edge-lo:  #00000035;      /* 가장자리 그림자 */
  --hinge-line:     #ffffff14;      /* 중앙 힌지선 색 */

  --t-top: .30s;                    /* 위판 더 빠르게 */
  --t-bot: .64s;                    /* 아래판 더 느리게 */
  --ease-top: cubic-bezier(.3,.65,.2,1.15);
  --ease-bot: cubic-bezier(.16,.84,.22,1);

  --flip-delay-bot: .08s;           /* 아래판 시작 지연 */
}

/* 패널 표면을 종이처럼: 위/아래 절반 색을 살짝 다르게 */
.paper .panel{
  background:
    linear-gradient(180deg, var(--paper-color-top), var(--paper-color-bot));
  border-radius: 14px;
  position: relative;
}

/* 중앙 힌지 얇은 선 */
.paper .panel::before{
  content:"";
  position:absolute; left:0; right:0; top:50%; height:1px; transform:translateY(-.5px);
  background: linear-gradient(90deg, transparent, var(--hinge-line), transparent);
  pointer-events:none;
}

/* 카드 가장자리 하이라이트/그림자(종이 두께) */
.paper .panel::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 var(--paper-edge-hi),
    inset 0 -1px 0 var(--paper-edge-lo);
  opacity:.8;
}

/* 각 절반의 표면에도 미세한 기울기/광택 */
.paper .top::before,
.paper .bot::before,
.paper .back-top::before,
.paper .back-bot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% -10%, #ffffff10, transparent 55%),
              linear-gradient(180deg, #ffffff05, #00000018);
  mix-blend-mode: screen; opacity:.6;
}

/* 숫자 대비 조금 낮추고 종이 위에 잉크처럼 보이게 */
.paper .val{
  text-shadow: none;
  color: #f2f4ff;
}

/* ===== 종이 플립 동안의 레이어/그림자 ===== */
.paper .back-top, .paper .back-bot{ opacity:0; will-change: transform, opacity; }

/* top은 항상 보인다(위판) — 아래판(bot)은 잠시 숨김 */
.paper .flip.play .top{
  animation: flipTopPaper var(--t-top) var(--ease-top) both;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); /* 위판이 아래판에 그림자 */
}
.paper .flip.play .bot{ opacity:0; }

/* 새 아래판(back-bot)은 조금 늦게 올라오며 두께감을 준다 */
.paper .flip.play .back-bot{
  opacity:1;
  animation: flipBotPaper var(--t-bot) var(--ease-bot) both;
  animation-delay: var(--flip-delay-bot);
  box-shadow: 0 -8px 18px rgba(0,0,0,.28) inset; /* 아래쪽 엣지 어둡게 */
}

/* 미세한 종이 두께(엣지 라인) */
.paper .top, .paper .back-bot{
  outline: 1px solid #00000010;
  box-shadow:
    inset 0 -1px 0 var(--paper-edge-lo),
    inset 0  1px 0 var(--paper-edge-hi);
}

/* ====== 종이 플립 키프레임: 살짝 휘어지고 스냅감 ====== */
@keyframes flipTopPaper{
  0%   { transform: rotateX(0deg) translateZ(0.001px) skewX(0deg); filter:brightness(1); }
  40%  { transform: rotateX(-70deg) translateZ(0.001px) skewX(-1deg); filter:brightness(.96); }
  80%  { transform: rotateX(-180deg) translateZ(0.001px) skewX(-2deg); filter:brightness(.88); }
  100% { transform: rotateX(-180deg) translateZ(0.001px) skewX(-2deg); filter:brightness(.88); }
}
@keyframes flipBotPaper{
  0%   { transform: rotateX(-180deg) translateZ(0.001px) skewX(2deg);   filter:brightness(.85); }
  15%  { transform: rotateX(-170deg) translateZ(0.001px) skewX(1deg);   filter:brightness(.9); }
  80%  { transform: rotateX(-10deg)  translateZ(0.001px) skewX(.3deg);  filter:brightness(.98); }
  100% { transform: rotateX(0deg)     translateZ(0.001px) skewX(0deg);  filter:brightness(1); }
}

/* 자리별 미세 지연(폭포 효과를 더 크게 하고 싶다면 늘려도 됨) */
.paper .group:nth-of-type(1) .flip{ transition-delay: 0ms; }
.paper .group:nth-of-type(2) .flip{ transition-delay: 10ms; }
.paper .group:nth-of-type(3) .flip{ transition-delay: 20ms; }
.paper .group:nth-of-type(4) .flip{ transition-delay: 30ms; }
.paper .group:nth-of-type(5) .flip{ transition-delay: 40ms; }
.paper .group:nth-of-type(6) .flip{ transition-delay: 50ms; }