/* 떠돌이 사건 패 — 퀘스트 두루마리(#tracker) 위, 붉은 관인 + 먹 띠 (public/js/events.js) */
#ev-card { position: absolute; z-index: 6; display: flex; align-items: center; gap: 9px; box-sizing: border-box; min-height: 52px; padding: 5px 10px 6px 26px;
  background: linear-gradient(90deg, rgba(10,6,4,0), rgba(10,6,4,0.82) 16%); border-right: 3px solid var(--evc, #e8d49a); cursor: help; touch-action: manipulation; }
#ev-card.hidden { display: none; }
#ev-card .ev-seal { order: 2; flex: none; width: 40px; height: 40px; transform: rotate(-4deg); box-shadow: 0 1px 3px rgba(0,0,0,0.7); }
#ev-card .ev-body { order: 1; flex: 1; min-width: 0; text-align: right; }
#ev-card .ev-n { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; white-space: nowrap; }
#ev-card .ev-n b { font-family: var(--title); font-weight: 400; font-size: 17px; color: var(--evc, #e8d49a); text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; }
#ev-card .ev-time { font: 700 13px/1 var(--font); color: #f0e4c8; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
#ev-card .ev-p { font-size: 13px; color: #e6d8b8; text-shadow: 0 1px 2px #000; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ev-card .ev-dir { order: 0; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; width: 24px; }
#ev-card .ev-dir.hidden { display: none; }
#ev-card .ev-dir i { display: block; width: 0; height: 0; border-left: 9px solid var(--evc, #e8d49a); border-top: 5px solid transparent; border-bottom: 5px solid transparent; filter: drop-shadow(0 0 2px #000); }
#ev-card .ev-dir span { font-size: 10px; color: #cbb890; text-shadow: 0 1px 2px #000; margin-top: 3px; white-space: nowrap; }
#ev-card.done { opacity: 0.88; }
#ev-card.done .ev-n b { color: #c8b896; }
#ev-card.ok .ev-n b { color: #f0e0b0; }
#ev-card.fresh .ev-seal { animation: evstamp 0.55s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes evstamp { 0% { transform: scale(2.2) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }
body.wev-on #tracker { transform: translateY(var(--wevh, 58px)); }
body.panel-open #ev-card, body.en-on #ev-card { display: none; }

/* 휴대폰: 두루마리처럼 왼쪽에 붙고 테는 왼쪽 */
#ev-card.left { flex-direction: row; padding: 4px 26px 5px 8px; border-right: none; border-left: 3px solid var(--evc, #e8d49a);
  background: linear-gradient(270deg, rgba(10,6,4,0), rgba(10,6,4,0.82) 16%); }
#ev-card.left .ev-seal { order: 0; }
#ev-card.left .ev-body { order: 1; text-align: left; }
#ev-card.left .ev-n { justify-content: flex-start; }
#ev-card.left .ev-dir { left: auto; right: 2px; }
body.phone #ev-card { min-height: 42px; }
body.phone #ev-card .ev-seal { width: 32px; height: 32px; }
body.phone #ev-card .ev-n b { font-size: 14px; }
body.phone #ev-card .ev-time, body.phone #ev-card .ev-p { font-size: 11px; }
body.phone.panel-open #ev-card { display: none; }

#ev-tip { position: fixed; z-index: 52; min-width: 190px; max-width: min(300px, calc(100vw - 12px)); padding: 4px 8px 6px; border: 14px solid transparent;
  border-image: url("../ui/frame_najeon.png") 58 stretch; background: rgba(12,8,6,0.95); background-clip: padding-box; color: #dcd6c4; font-size: 13px; line-height: 1.5;
  pointer-events: none; text-align: left; box-shadow: 0 8px 22px rgba(0,0,0,0.7); }
#ev-tip.hidden { display: none; }
#ev-tip .et-n { font-family: var(--title); font-size: 17px; color: #f0d8a0; letter-spacing: 1px; }
#ev-tip .et-g { color: #f0e8d4; }
#ev-tip .et-h { font-size: 12px; color: #e0a890; margin-top: 2px; }
#ev-tip .et-k { font-size: 11px; color: #9a8e78; margin-top: 4px; border-top: 1px solid rgba(200,170,110,0.25); padding-top: 3px; }