.container { position: relative;}

/* 이닝 */
.board-wrap { display: flex; background: #191915; }
.position-1 { position: absolute; top: 0; left: 0;}
.position-2 { position: absolute; top: 0; right: 0;}
.position-3 { position: absolute; bottom: 0; left: 0;}
.position-4 { position: absolute; bottom: 0; right: 0;}
.add-img .img-area { width: 200px; height: auto;}
.add-img .img-area img { width: 100%;}
.board-wrap .inning {  display: flex; flex-direction: column; justify-content: center; position: relative; width: 40px; text-align: center; border-right: 1px solid #494b4d;}
.board-wrap .inning .change { font-size: 24px; color: #707070;}
.board-wrap .inning .change.active { color: #D2FD05;}
.board-wrap .inning .number { font-size: 26px; font-weight: 400; color: #ffffff;}
.score-board {width: auto; border: 1px solid #bbbbbb; overflow: hidden;}
.board-banner { width: 673px; background: #010003; padding: 8px; text-align: center; height: 43px;}
.board-banner.top { border-bottom: 1px solid #494b4d;}
.board-banner.bottom { border-top: 1px solid #494b4d;}
.board-banner .banner-text { font-size: 22px; font-weight: 600; color: #dfdfdf; white-space: nowrap; }


/* 팀명,로고 */
.board-wrap .team { position: relative; }
.board-wrap .team .team-area { display: flex; align-items: center; padding: 10px; height: 69px; overflow: hidden;}
.board-wrap .team .team-area:first-child { border-bottom: 1px solid #494b4d;}
.board-wrap .team .team-area .name { font-size: 24px; color: #fff; width: 200px; margin-left: 20px; white-space: nowrap; text-overflow: clip; transform-origin: left center; display: inline-block; height: 1em; line-height: 1;}

/* 점수판 */
.point-area { display: flex ; flex-direction: column; justify-content: center; border-left: 1px solid #494b4d;}
.point { position: relative; display: inline-block; min-width: 95px; height: 59px; overflow: hidden; font-size: 40px; color: #fff; text-align: center; border-bottom: 1px solid #494b4d; margin-top: 10px; }
.point:last-child { border-bottom: 0;}
.logo { width: 45px; height: auto;}
.logo img { width: 100%;}
.point span { position: absolute; width: 100%; left: 0; transition: transform 0.5s ease-in-out;}
.old-number { top: 0;}
.new-number { top: 100%;}

/* 주루 */
.board-wrap .play { background: #010003; width: 126px; position: relative; display: flex; justify-content: center;  border-left: 1px solid #494b4d;}
.board-wrap .play .runner-area {  position: absolute; top: 35%; left: 56%; transform: translate(-50%, -50%); }
.board-wrap .play .runner { position: absolute; background: #CFCECD; transform: rotate(-45deg);  width: 30px; height: 30px;}
.board-wrap .play .runner.active { background: #D2FD05;}
.board-wrap .play .runner.first { right: -31px; }
.board-wrap .play .runner.second { left: -23px; top: -24px;}
.board-wrap .play .runner.third {  left: -47px;}

/* 투구수 */
.board-wrap .play .pitching { position: absolute; bottom: 20px; display: flex; gap: 10px; }
.board-wrap .play .pitching .number { font-size: 16px; color: #ffffff;}


/* 볼카운트 */
.board-wrap .count {  display: flex ; flex-direction: column; justify-content: center; width: 126px; background: #010003; padding: 0 13px; border-left: 1px solid #494b4d;}
.board-wrap .count .count-area { display: flex;  align-items: center; }
.board-wrap .count .count-area .text { font-size: 24px; font-weight: 600; color: #fff; width: 26px;}
.board-wrap .count .count-area .circle { width: 20px; height: 20px; border-radius: 300px; background: #3A3B34; margin-right: 5px;}
.board-wrap .count .count-area.ball .circle.active { background: #7EB43D; }
.board-wrap .count .count-area.strike .circle.active { background: #E38824;}
.board-wrap .count .count-area.out .circle.active { background: #B73222;}

/* 이벤트 */
.event { position: absolute; top: 50px; background: #e97e0d; padding: 4px 14px; border-radius: 4px; opacity: 0; /* 기본적으로 숨김 */
	pointer-events: none;} 
.event .event-text { font-size: 17px; font-weight: 500; color: #f0f0f0;}



@keyframes fadeInOut {
	0% { opacity: 0; transform: scale(0.95);}
	10% { opacity: 1; transform: scale(1);}
	80% { opacity: 1; transform: scale(1.05);}
	100% { opacity: 0; transform: scale(0.95);}}
	.event.show { opacity: 1; animation: fadeInOut 2s ease-in-out forwards;}