/* 출장 수선 이벤트 화면 (M3) — 이벤트 바 · 마일스톤 트랙 · 이벤트 의뢰 · 진입 카드 */

/* display 규칙이 있는 토글 요소는 hidden 속성이 UA 기본을 못 이긴다 → 명시 override */
#eventBar[hidden], #eventOrders[hidden], #eventBoard[hidden] { display: none; }

/* 이벤트 바 — orders 영역과 스왑되는 상단 바 */
#eventBar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: linear-gradient(150deg, #efe7f2, #e4d9ea);
  border: 1.5px solid #cdbcd8;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 10px 9px;
  margin: 4px 2px 8px;
}

.evTop { display: flex; align-items: center; gap: 8px; }
.evBack {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 0 #cbb68f;
  font-size: 18px; font-weight: 800;
  color: var(--wood-dark);
}
.evBack:active { transform: translateY(1px); box-shadow: none; }
.evName { flex: 1; font-size: 13.5px; font-weight: 800; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evPts {
  flex: 0 0 auto;
  font-size: 12.5px; font-weight: 800; color: #6a4f80;
  background: #fff8ea; border: 1.5px solid #d8c9e0;
  border-radius: 999px; padding: 3px 9px;
}

/* 트렁크 = 보드 밖 제너레이터. 탭=eventTap */
.evTrunk {
  flex: 0 0 auto;
  position: relative;
  width: 44px; height: 34px;
  border-radius: 11px;
  background: radial-gradient(120% 120% at 30% 20%, #ffefc9, #e8c98d);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 4px rgba(0,0,0,.22);
  font-size: 20px;
}
.evTrunk:active { transform: translateY(1px); }
.evTrunk .evCharge {
  position: absolute; left: -3px; top: -5px;
  font-size: 9px; font-weight: 800; color: #fff;
  background: var(--teal); border-radius: 999px;
  min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px;
}
.evTrunk .evCd {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(50, 38, 24, .62); border-radius: 10px;
  color: #ffe9b8; font-size: 11px; font-weight: 800;
}
.evTrunk.cooling { filter: saturate(.8); }

/* 마일스톤 트랙 */
.evTrack { position: relative; height: 36px; }
.evTrackBar {
  position: absolute; left: 15px; right: 15px; top: 16px;
  height: 5px; border-radius: 3px; background: #d3c4de; overflow: hidden;
}
.evTrackFill { height: 100%; background: var(--gold); border-radius: 3px; transition: width .3s; }
.evNodes { position: absolute; left: 15px; right: 15px; top: 0; height: 100%; }
.evNode {
  position: absolute; top: 3px;
  transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  border: 2px solid #fff8ea;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.evNode.locked { background: #cbbcd6; color: #fff; opacity: .8; }
.evNode.claimed { background: #b9d3c9; color: #3f6b5a; }
.evNode.claimable { background: var(--gold); color: #4a3705; animation: evNodePulse 1.2s ease-in-out infinite; }
@keyframes evNodePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold-soft), 0 1px 3px rgba(0,0,0,.25); }
  50% { box-shadow: 0 0 10px 3px rgba(212,165,49,.85), 0 1px 3px rgba(0,0,0,.25); }
}

/* 이벤트 의뢰 스트립 — #orders 스타일 미러 */
#eventOrders {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px 8px;
  scrollbar-width: none;
}
#eventOrders::-webkit-scrollbar { display: none; }

/* 이벤트 카드 (진입 카드 + 이벤트 의뢰 카드) — 레이스 라벤더 톤으로 구분 */
.orderCard.event { background: linear-gradient(150deg, #f1ebf5, #e6dcec); border: 1.5px solid #cdbcd8; }
.orderCard.event .oBtn { background: #7c6690; box-shadow: 0 2px 0 #5f4e70; }
.orderCard.event .oBtn.gold { background: var(--gold); box-shadow: 0 2px 0 #a87f22; color: #4a3705; }
.orderCard.event .reqChip.have { border-color: #9a8bb0; background: #efeaf4; color: var(--ink); }
.orderCard.event.expired { filter: saturate(.7); }

/* 구조 차단 2계층(CSS): 이벤트 바가 보이는 동안 코치 배너는 JS 상태와 무관하게 숨김.
   JS 가드(coach.render)와 이중화 — 어떤 호출 경로/코드 버전 꼬임에도 다락방에 본판 코치가 뜨지 않는다 */
#eventBar:not([hidden]) ~ #coachBanner { display: none !important; }