/* ===== ENGAGEMENT ENGINE CSS ===== */

/* Reading Timer Bar */
.read-timer{position:fixed;top:3px;right:12px;z-index:9997;background:rgba(255,255,255,.95);border-radius:20px;padding:4px 12px;font-size:.75rem;color:#8B0000;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.1);backdrop-filter:blur(6px);transition:all .3s}
.read-timer .msg{color:#555;font-weight:400;margin-left:4px}

/* Secret Discovery Progress */
.secret-progress{position:fixed;top:46px;right:12px;z-index:9996;background:rgba(255,255,255,.95);border-radius:12px;padding:8px 14px;font-size:.75rem;box-shadow:0 2px 8px rgba(0,0,0,.1);backdrop-filter:blur(6px);max-width:200px}
.secret-progress .bar{height:4px;background:#eee;border-radius:2px;margin-top:4px;overflow:hidden}
.secret-progress .fill{height:100%;background:linear-gradient(90deg,#8B0000,#C9A96E);border-radius:2px;transition:width .5s ease}
.secret-progress .label{color:#8B0000;font-weight:700}

/* Live Activity Feed */
.live-feed{position:fixed;bottom:70px;left:12px;z-index:9995;max-width:280px}
.live-item{background:rgba(255,255,255,.95);border-radius:10px;padding:8px 14px;font-size:.78rem;color:#555;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:6px;animation:slideInLeft .4s ease;backdrop-filter:blur(6px);border-left:3px solid #22C55E}
.live-item strong{color:#111}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

/* Curiosity Gap - Blurred Content */
.curiosity-gap{position:relative;overflow:hidden;border-radius:12px;margin:1.5rem 0}
.curiosity-blur{filter:blur(8px);user-select:none;padding:1.5rem;background:#FFF9F5;transition:filter .5s}
.curiosity-gap.revealed .curiosity-blur{filter:none;user-select:auto}
.curiosity-unlock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#8B0000;color:#fff;border:none;padding:.7rem 1.5rem;border-radius:50px;font-size:.9rem;font-weight:700;cursor:pointer;z-index:2;box-shadow:0 4px 15px rgba(139,0,0,.3);transition:all .2s;font-family:inherit;min-height:44px}
.curiosity-unlock:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 6px 20px rgba(139,0,0,.4)}
.curiosity-gap.revealed .curiosity-unlock{display:none}

/* Time-Gated Content */
.time-gate{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:1.5rem;margin:1.5rem 0;text-align:center;border:2px dashed #eee}
.time-gate.locked .gate-content{display:none}
.time-gate.unlocked{border-color:#C9A96E;border-style:solid;animation:gateUnlock .5s ease}
.time-gate.unlocked .gate-lock{display:none}
.time-gate.unlocked .gate-content{display:block;animation:fadeUp .5s ease}
.gate-lock{color:#555;font-size:.9rem}
.gate-lock .countdown{font-size:2rem;font-weight:800;color:#8B0000;display:block;margin:.5rem 0}
.gate-lock .gate-label{font-size:.8rem;color:#767676}
@keyframes gateUnlock{from{transform:scale(.97);opacity:.7}to{transform:scale(1);opacity:1}}

/* Slot Machine / Spin Wheel */
.slot-machine{background:linear-gradient(135deg,#FFF9F5,#fff);border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:2rem;margin:2rem 0;text-align:center;border:1px solid #eee}
.slot-machine h3{color:#8B0000;margin-bottom:1rem}
.slot-display{display:flex;justify-content:center;gap:8px;margin:1rem 0}
.slot-reel{width:70px;height:70px;background:#fff;border:2px solid #eee;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden;transition:all .1s}
.slot-reel.spinning{animation:slotSpin .1s linear infinite;border-color:#C9A96E}
@keyframes slotSpin{0%{transform:translateY(-2px)}50%{transform:translateY(2px)}100%{transform:translateY(-2px)}}
.slot-btn{background:linear-gradient(135deg,#8B0000,#a01010);color:#fff;border:none;padding:.8rem 2.5rem;border-radius:50px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px rgba(139,0,0,.3);font-family:inherit;margin-top:.5rem;min-height:44px}
.slot-btn:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(139,0,0,.4)}
.slot-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.slot-result{margin-top:1rem;font-size:1rem;font-weight:700;color:#8B0000;min-height:1.5rem;animation:fadeUp .3s ease}

/* Achievement Badges */
.badges{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0}
.badge{width:50px;height:50px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;opacity:.3;transition:all .4s;border:2px solid #eee}
.badge.earned{opacity:1;background:#FFF9F5;border-color:#C9A96E;animation:badgePop .4s ease;box-shadow:0 2px 8px rgba(201,169,110,.3)}
@keyframes badgePop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.badge-label{font-size:.65rem;color:#555;text-align:center;margin-top:.2rem}

/* Reactions */
.reactions{display:flex;justify-content:center;gap:.8rem;margin:1.5rem 0}
.react-btn{background:#fff;border:1px solid #eee;border-radius:50px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.3rem;font-family:inherit;min-height:44px}
.react-btn:hover{border-color:#C9A96E;transform:scale(1.05)}
.react-btn.active{background:#FFF9F5;border-color:#C9A96E}
.react-btn .count{font-size:.75rem;color:#555;font-weight:600}
.react-float{position:fixed;pointer-events:none;font-size:1.5rem;z-index:9999;animation:floatUp 1s ease forwards}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80px) scale(1.5)}}

/* Auto-Next 제거됨 — NEVER auto page transition */

/* Exit Intent Popup */
.exit-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.exit-overlay.show{display:flex}
.exit-popup{background:#fff;border-radius:16px;padding:2rem;max-width:360px;width:90%;text-align:center;animation:popIn .3s ease;box-shadow:0 8px 30px rgba(0,0,0,.2)}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.exit-popup h3{color:#8B0000;margin-bottom:.5rem;font-size:1.2rem}
.exit-popup p{color:#555;font-size:.9rem;margin-bottom:1rem}
.exit-popup .exit-cta{display:inline-flex;align-items:center;justify-content:center;background:#8B0000;color:#fff;padding:.7rem 1.5rem;border-radius:50px;font-weight:700;text-decoration:none;font-size:.95rem;transition:transform .2s;min-height:44px}
.exit-popup .exit-cta:hover{transform:scale(1.03);text-decoration:none}
.exit-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.2rem;color:#767676;cursor:pointer}

/* Streak */
.streak-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(139,0,0,.95);color:#fff;padding:1rem 2rem;border-radius:16px;font-size:1.1rem;font-weight:700;z-index:99998;animation:streakIn .5s ease;box-shadow:0 4px 20px rgba(139,0,0,.4);pointer-events:none}
@keyframes streakIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}60%{transform:translate(-50%,-50%) scale(1.1);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* Toast notification */
.toast{position:fixed;bottom:80px;right:12px;background:rgba(255,255,255,.95);border-radius:12px;padding:10px 16px;font-size:.8rem;color:#111;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:9997;animation:toastIn .4s ease;backdrop-filter:blur(6px);border-left:3px solid #C9A96E;max-width:250px}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Scroll reveal */
.scroll-reveal{opacity:0;transform:translateY(20px);transition:all .5s ease}
.scroll-reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:480px){
  .read-timer{right:8px;font-size:.65rem;padding:3px 8px}
  .secret-progress{right:8px;max-width:160px;font-size:.75rem}
  .live-feed{left:8px;bottom:auto;top:80px;max-width:220px}
  .live-item{font-size:.75rem;padding:6px 10px}
  .slot-reel{width:55px;height:55px;font-size:1.5rem}
  .toast{bottom:auto;top:60px;right:8px}
}
/* Social Proof */
.social-proof{text-align:center;padding:.8rem 1rem;background:#FFF9F5;border-radius:10px;font-size:.85rem;color:#555;margin-bottom:1.2rem;border:1px solid #f0e6d6}
.social-proof strong{color:#8B0000;font-weight:800}

/* Countdown Urgency */
.countdown-urgency{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;background:linear-gradient(90deg,#FFF5F5,#FFF9F0);border-radius:10px;font-size:.88rem;color:#333;margin:1rem 0;border:1px solid #fecaca;font-weight:600}
.countdown-urgency strong{color:#8B0000}
.urgency-pulse{display:inline-block;width:8px;height:8px;background:#ef4444;border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* Gallery Compare */
.gallery-compare{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:1.5rem 0;margin:2rem 0;overflow:hidden}
.gallery-compare h3{color:#8B0000;text-align:center;margin-bottom:1rem;padding:0 1rem}
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-slide{flex:0 0 80%;scroll-snap-align:center;padding:0 .5rem}
.gallery-slide img{width:100%;height:auto;border-radius:12px;display:block}
.gallery-cap{text-align:center;font-size:.82rem;color:#555;margin-top:.5rem;font-weight:600}
.gallery-dots{display:flex;justify-content:center;gap:6px;margin-top:.8rem}
.gallery-dot{width:8px;height:8px;background:#ddd;border-radius:50%;transition:all .3s}
.gallery-dot.active{background:#8B0000;width:20px;border-radius:4px}
.gallery-hint{text-align:center;font-size:.75rem;color:#777;margin-top:.5rem}

/* Mini Quiz */
.mini-quiz{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:1.5rem;margin:2rem 0}
.mini-quiz h3{color:#8B0000;text-align:center;margin-bottom:.3rem}
.quiz-sub{text-align:center;color:#767676;font-size:.82rem;margin-bottom:1rem}
.mq-q{margin-bottom:1.2rem}
.mq-label{color:#111;font-weight:700;font-size:.95rem;margin-bottom:.6rem}
.mq-opt{display:block;width:100%;padding:.7rem 1rem;background:#FAFAFA;border:1px solid #eee;border-radius:10px;color:#555;cursor:pointer;font-size:.9rem;margin-bottom:.4rem;text-align:left;transition:all .2s;font-family:inherit;min-height:44px}
.mq-opt:hover{border-color:#C9A96E;color:#111}
.mq-q.done .mq-opt{opacity:.5;cursor:default}
.mq-q.done .mq-opt.selected{opacity:1;background:#FFF5F5;border-color:#8B0000;color:#8B0000;font-weight:700}
.mq-result{display:none;text-align:center;padding:1.5rem;margin-top:1rem;background:linear-gradient(135deg,#FFF9F0,#FFF5F5);border-radius:12px;border:1px solid #C9A96E;animation:fadeUp .5s ease}
.mq-result.show{display:block}
.mq-type{font-size:1.3rem;font-weight:800;color:#8B0000;margin-bottom:.5rem}
.mq-result p{color:#555;font-size:.9rem}

/* Bottom Nolcool CTA */
.nolcool-cta{display:block;max-width:480px;margin:1.5rem auto;padding:1rem 2rem;background:#7C3AED;color:#fff;border-radius:16px;text-align:center;font-size:1.1rem;font-weight:800;text-decoration:none;transition:all .2s;box-shadow:0 4px 16px rgba(124,58,237,.3);min-height:52px;line-height:1.4}
.nolcool-cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(124,58,237,.4);text-decoration:none;color:#fff}

@media(min-width:481px){
  .live-feed{bottom:80px}
  .toast{bottom:90px}
}