/* 대시부스터 demo · interactive guided tour (coachmarks + spotlight + arrows) */
#dtour-dim, #dtour-ring, #dtour-tip { position:fixed; z-index:100000; }
#dtour-dim { inset:0; pointer-events:none; opacity:0; transition:opacity .25s ease; }
#dtour-dim.on { opacity:1; }
/* the hole: a transparent rect whose huge box-shadow dims everything else. pointer-events
   stay off so the page underneath is still fully clickable · users can try features live. */
#dtour-hole { position:fixed; z-index:100000; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,9,14,0.66); transition:all .42s cubic-bezier(.4,0,.2,1); opacity:0; }
#dtour-dim.on #dtour-hole { opacity:1; }
#dtour-ring { border-radius:16px; pointer-events:none; border:2px solid #818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,0.28), 0 0 26px rgba(129,140,248,0.5);
  transition:all .42s cubic-bezier(.4,0,.2,1); opacity:0; }
#dtour-ring.on { opacity:1; animation:dtPulse 1.7s ease-in-out infinite; }
@keyframes dtPulse { 0%,100%{ box-shadow:0 0 0 4px rgba(129,140,248,0.28),0 0 22px rgba(129,140,248,0.45);} 50%{ box-shadow:0 0 0 7px rgba(129,140,248,0.12),0 0 34px rgba(129,140,248,0.7);} }

#dtour-tip { width:min(320px, calc(100vw - 28px)); background:#15161d; color:#f4f4f7;
  border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:18px 18px 14px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.7); pointer-events:auto;
  font-family:'Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  pointer-events:auto; touch-action:manipulation;
  opacity:0; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), left .34s cubic-bezier(.4,0,.2,1), top .34s cubic-bezier(.4,0,.2,1); }
#dtour-tip.on { opacity:1; transform:none; }
#dtour-tip .dt-step { font-size:11px; font-weight:700; letter-spacing:.06em; color:#818cf8; }
#dtour-tip h4 { margin:7px 0 7px; font-size:17px; font-weight:800; letter-spacing:-0.02em; line-height:1.3; }
#dtour-tip p { margin:0; font-size:13.5px; line-height:1.7; color:#c2c2cc; }
#dtour-tip .dt-bar { display:flex; align-items:center; gap:8px; margin-top:16px; }
#dtour-tip .dt-dots { display:flex; gap:5px; margin-right:auto; }
#dtour-tip .dt-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.2); transition:background .2s, width .2s; }
#dtour-tip .dt-dots i.cur { background:#818cf8; width:16px; border-radius:3px; }
#dtour-tip button { font-family:inherit; cursor:pointer; border-radius:11px; font-weight:700; font-size:13.5px; border:none; touch-action:manipulation; transition:transform .12s, filter .15s; }
#dtour-tip button:active { transform:scale(.95); }
#dtour-tip .dt-prev { background:rgba(255,255,255,0.08); color:#d8d8de; padding:11px 16px; min-height:42px; }
#dtour-tip .dt-next { background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; padding:11px 22px; min-height:42px; font-size:14px; }
#dtour-tip .dt-skip { position:absolute; top:8px; right:8px; background:none; color:#8a8a93; font-size:12px; font-weight:600; padding:10px 12px; }
#dtour-tip .dt-skip:hover { color:#fff; }
/* arrow pointer */
#dtour-tip .dt-arrow { position:absolute; width:16px; height:16px; background:#15161d;
  border:1px solid rgba(255,255,255,0.1); transform:rotate(45deg); }
#dtour-tip.below .dt-arrow { top:-9px; border-right:none; border-bottom:none; }
#dtour-tip.above .dt-arrow { bottom:-9px; border-left:none; border-top:none; }

/* demo-mode badge · always visible so it's obvious this is a sample */
#dtour-demobadge { position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:99991;
  display:flex; align-items:center; gap:7px; cursor:pointer;
  background:rgba(99,102,241,0.16); color:#c7d2fe; border:1px solid rgba(129,140,248,0.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; padding:6px 14px; font-size:12px; font-weight:700;
  font-family:'Pretendard',-apple-system,sans-serif; box-shadow:0 8px 24px -8px rgba(0,0,0,0.5);
  animation:dtBadgeIn .5s cubic-bezier(.2,.8,.2,1) both; }
#dtour-demobadge .dot { width:7px; height:7px; border-radius:50%; background:#818cf8; animation:dtBlink 1.6s ease-in-out infinite; }
#dtour-demobadge:hover { background:rgba(99,102,241,0.26); color:#e0e7ff; }
@keyframes dtBlink { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes dtBadgeIn { from{ opacity:0; transform:translate(-50%,-10px); } to{ opacity:1; transform:translate(-50%,0); } }
@media (max-width:520px){ #dtour-demobadge { font-size:11px; padding:5px 12px; top:8px; } }

/* floating start/replay button (also the way to skip · always available) */
/* bottom-LEFT so it never collides with the AI chatbot bubble (bottom-right) */
#dtour-fab { position:fixed; left:18px; bottom:18px; z-index:99990; display:flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; border:none; cursor:pointer;
  border-radius:999px; padding:11px 17px; font-weight:700; font-size:13.5px;
  font-family:'Pretendard',-apple-system,sans-serif; box-shadow:0 14px 34px -10px rgba(79,70,229,0.6);
  transition:transform .14s, box-shadow .2s; }
#dtour-fab:hover { transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(79,70,229,0.7); }
#dtour-fab:active { transform:scale(.96); }
@media (max-width:520px){ #dtour-fab { left:12px; padding:10px 14px; font-size:12.5px; } }
/* 채팅 팝업이 열려 있는 동안엔 FAB 숨김 · 입력창을 가리지 않게 */
body:has(#v2supPop) #dtour-fab { opacity:0; pointer-events:none; }
/* 모바일 하단 플로팅 바(.mobnav) 위로 올려서 "오늘" 탭을 가리지 않게 */
@media (max-width:767px){ #dtour-fab { bottom:calc(88px + env(safe-area-inset-bottom)); } }

/* welcome / finish modal */
#dtour-modal { position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center;
  background:rgba(8,9,14,0.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s; padding:20px;
  pointer-events:none; }   /* when hidden it must NOT intercept clicks (was blocking the tip's Next/Prev) */
#dtour-modal.on { opacity:1; pointer-events:auto; }
#dtour-modal .box { width:min(380px,100%); background:#15161d; color:#f4f4f7; border:1px solid rgba(255,255,255,0.1);
  border-radius:22px; padding:30px 26px; text-align:center; box-shadow:0 40px 90px -24px rgba(0,0,0,0.7);
  font-family:'Pretendard',-apple-system,sans-serif; transform:scale(.96); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
#dtour-modal.on .box { transform:none; }
#dtour-modal .emoji { font-size:38px; }
#dtour-modal h3 { margin:12px 0 8px; font-size:21px; font-weight:800; letter-spacing:-0.03em; }
#dtour-modal p { margin:0 0 22px; font-size:14px; line-height:1.75; color:#c2c2cc; }
#dtour-modal .dt-go { display:block; width:100%; background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff;
  border:none; border-radius:13px; padding:14px; font-weight:800; font-size:15px; cursor:pointer; font-family:inherit; }
#dtour-modal .dt-2nd { display:block; width:100%; background:none; color:#9a9aa3; border:none; margin-top:10px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
@media (prefers-reduced-motion:reduce){
  #dtour-hole, #dtour-ring, #dtour-tip, #dtour-modal, #dtour-modal .box { transition:none !important; }
  #dtour-ring.on { animation:none !important; }
}