/* ===== Baseball Scoreboard — 4 Color Themes (.type-01 ~ .type-04) ===== */
/* Base: Slate Grey title bar, Dark Charcoal hub, glassmorphism. Team bars: gradient + 1px glass border, bold white type. */

:root {
	--board-bg: rgba(45, 50, 56, 0.92);
	--board-border: rgba(255, 255, 255, 0.1);
	--board-blur: 14px;
	--charcoal-glass: rgba(45, 50, 56, 0.78);
	--away-bg: linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
	--home-bg: linear-gradient(145deg, #5c1a1a 0%, #8D2A35 50%, #5c1a1a 100%);
	--banner-bg: linear-gradient(180deg, #243d36 0%, #1a2f2a 100%);
	--neon-lime: #b8ff00;
	--neon-lime-glow: rgba(184, 255, 0, 0.5);
	--text-primary: #ffffff;
	--text-muted: #9ca3af;
	--glass-border: rgba(255, 255, 255, 0.08);
	--gloss: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Type 01: 기존 디자인 — 그린 배너, 원정 Navy / 홈 Red-Maroon */
.score-board.type-01,
.board-wrap.type-01 {
	--banner-bg: linear-gradient(180deg, #243d36 0%, #1a2f2a 100%);
	--away-bg: linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
	--home-bg: linear-gradient(145deg, #5c1a1a 0%, #8D2A35 50%, #5c1a1a 100%);
}
.score-board.type-01 .board-wrap .count .count-area.ball .circle.active,
.board-wrap.type-01 .count .count-area.ball .circle.active { background: #16a34a; box-shadow: none; }
.score-board.type-01 .board-wrap .inning .change.active,
.board-wrap.type-01 .inning .change.active { text-shadow: none; }
.score-board.type-01 .board-wrap .play .runner.active,
.board-wrap.type-01 .play .runner.active { box-shadow: none; }

/* Type 02: Crystal Light — 레퍼런스 이미지 톤 (로얄블루 #0052cc / 비비드레드 #c8102e, 화이트 프레임) */
.score-board.type-02,
.board-wrap.type-02 {
	--board-bg: rgba(245, 247, 250, 0.95);
	--board-border: rgba(0, 0, 0, 0.08);
	--glass-border: rgba(0, 0, 0, 0.08);
	--banner-bg: linear-gradient(145deg, #0b172a 0%, #091735 25%, #001636 60%, #010c1d 100%);
	--away-bg: #03419e;
	--home-bg: #b60421;
	--charcoal-glass: rgba(255, 255, 255, 0.98);
	--text-primary: #1e293b;
	--text-muted: #64748b;
	--gloss: none;
	--glass-highlight: 0 8px 24px rgba(0, 0, 0, 0.08);
	--neon-lime: #16a34a;
	--neon-lime-glow: transparent;
}

/* Type-02 Crystal Light 전용 오버라이드 */
.score-board.type-02 { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); }
.board-wrap.type-02 { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }
.score-board.type-02 .board-banner .banner-text { color: #fff; }
.score-board.type-02 .board-wrap .team .team-area .name,
.board-wrap.type-02 .team .team-area .name { color: #fff; }
.score-board.type-02 .board-banner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 6px rgba(0, 0, 0, 0.12); }
.score-board.type-02 .board-wrap .team .team-area,
.board-wrap.type-02 .team .team-area { box-shadow: none; }
.score-board.type-02 .board-wrap .team .team-area:last-child,
.board-wrap.type-02 .team .team-area:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.score-board.type-02 .event,
.board-wrap.type-02 .event { background: #ff6600; border-color: rgba(0, 0, 0, 0.12); }
.score-board.type-02 .event .event-text,
.board-wrap.type-02 .event .event-text { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.score-board.type-02 .board-wrap .count .count-area .circle,
.board-wrap.type-02 .count .count-area .circle { background: #e2e8f0; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.06); }
.score-board.type-02 .board-wrap .count .count-area.ball .circle.active,
.board-wrap.type-02 .count .count-area.ball .circle.active { background: #16a34a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.score-board.type-02 .board-wrap .count .count-area.strike .circle.active,
.board-wrap.type-02 .count .count-area.strike .circle.active { background: #ea580c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.score-board.type-02 .board-wrap .count .count-area.out .circle.active,
.board-wrap.type-02 .count .count-area.out .circle.active { background: #dc2626; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.score-board.type-02 .board-wrap .inning .change.active,
.board-wrap.type-02 .inning .change.active { color: #eab308; text-shadow: 0 0 8px rgba(234, 179, 8, 0.4); }
.score-board.type-02 .board-wrap .play .runner.active,
.board-wrap.type-02 .play .runner.active { background: #eab308; box-shadow: 0 0 8px rgba(234, 179, 8, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

/* Type 03: Midnight Neon — Vivid Purple 배너, 딥 퍼플 팀 영역, 화이트 글래스 데이터 패널 (레퍼런스 image_11) */
.score-board.type-03,
.board-wrap.type-03 {
	--board-bg: rgba(10, 10, 12, 0.95);
	--board-border: rgba(98, 0, 234, 0.3);
	--glass-border: rgba(98, 0, 234, 0.3);
	--charcoal-glass: #ffffff;
	--banner-bg: #6200ea;
	--away-bg: rgba(26, 35, 126, 0.7);
	--home-bg: rgba(26, 35, 126, 0.7);
	--text-primary: #ffffff;
	--text-muted: rgba(0, 0, 0, 0.6);
	--gloss: none;
	--neon-lime: #39ff14;
	--neon-lime-glow: rgba(57, 255, 20, 0.6);
}

/* Type-03 Midnight Neon 전용 오버라이드 — 하얀 데이터 영역 radius 제거(날카로운 모서리) */
.score-board.type-03 { border-radius: 0; }
.board-wrap.type-03 { border-radius: 0; }
.score-board.type-03 .board-banner,
.board-wrap.type-03 .board-banner { background: #6200ea; border: none; border-bottom: 1px solid rgba(98, 0, 234, 0.3); box-shadow: none; }
.score-board.type-03 .board-banner .banner-text { color: #ffffff; text-shadow: none; }
.score-board.type-03 .board-wrap .team .team-area:first-child,
.board-wrap.type-03 .team .team-area:first-child { background: rgba(26, 35, 126, 0.7); box-shadow: none; border-bottom: 1px solid rgba(98, 0, 234, 0.3); }
.score-board.type-03 .board-wrap .team .team-area:last-child,
.board-wrap.type-03 .team .team-area:last-child { background: rgba(26, 35, 126, 0.7); box-shadow: none; border-bottom: none; border-top: 1px solid rgba(98, 0, 234, 0.3); }
.score-board.type-03 .board-wrap .team .team-area .name,
.board-wrap.type-03 .team .team-area .name { color: #ffffff; }
.score-board.type-03 .board-wrap .point-area,
.board-wrap.type-03 .point-area { background: #ffffff; border-left: 1px solid rgba(98, 0, 234, 0.3); box-shadow: none; border-radius: 0; }
.score-board.type-03 .board-wrap .inning,
.board-wrap.type-03 .inning { background: #ffffff; border-left: 1px solid rgba(98, 0, 234, 0.3); box-shadow: none; border-radius: 0; }
.score-board.type-03 .board-wrap .count,
.board-wrap.type-03 .count { background: #ffffff; border-left: 1px solid rgba(98, 0, 234, 0.3); box-shadow: none; border-radius: 0; }
.score-board.type-03 .board-wrap .play,
.board-wrap.type-03 .play { background: #ffffff; border-right: 1px solid rgba(98, 0, 234, 0.3); box-shadow: none; border-radius: 0; }
.score-board.type-03 .board-wrap .point .old-number,
.score-board.type-03 .board-wrap .point .new-number,
.score-board.type-03 .board-wrap .inning .number,
.board-wrap.type-03 .point .old-number,
.board-wrap.type-03 .point .new-number,
.board-wrap.type-03 .inning .number { color: #000000; text-shadow: none; }
.score-board.type-03 .board-wrap .point,
.board-wrap.type-03 .point { border-bottom: 1px solid rgba(98, 0, 234, 0.3); color: #000000; }
.score-board.type-03 .board-wrap .inning .change,
.board-wrap.type-03 .inning .change { color: rgba(0, 0, 0, 0.5); }
.score-board.type-03 .board-wrap .inning .change.active,
.board-wrap.type-03 .inning .change.active { color: #e63946; text-shadow: 0 0 8px rgba(230, 57, 70, 0.5); }
.score-board.type-03 .board-wrap .count .count-area .text,
.board-wrap.type-03 .count .count-area .text { color: #000000; text-shadow: none; }
.score-board.type-03 .board-wrap .count .count-area .circle,
.board-wrap.type-03 .count .count-area .circle { background: rgba(0, 0, 0, 0.12); border: 1px solid rgba(98, 0, 234, 0.25); }
.score-board.type-03 .board-wrap .count .count-area.ball .circle.active,
.board-wrap.type-03 .count .count-area.ball .circle.active { background: #39ff14; box-shadow: 0 0 10px rgba(57, 255, 20, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.score-board.type-03 .board-wrap .count .count-area.strike .circle.active,
.board-wrap.type-03 .count .count-area.strike .circle.active { background: #f97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.score-board.type-03 .board-wrap .count .count-area.out .circle.active,
.board-wrap.type-03 .count .count-area.out .circle.active { background: #b91c1c; box-shadow: 0 0 10px rgba(185, 28, 28, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.score-board.type-03 .board-wrap .play .runner,
.board-wrap.type-03 .play .runner { background: rgba(0, 0, 0, 0.15); }
.score-board.type-03 .board-wrap .play .runner.active,
.board-wrap.type-03 .play .runner.active { background: #e63946; box-shadow: 0 0 10px rgba(230, 57, 70, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.score-board.type-03 .board-wrap .play .pitching .number,
.board-wrap.type-03 .play .pitching .number { color: #000000; }
.score-board.type-03 .event,
.board-wrap.type-03 .event { background: rgba(98, 0, 234, 0.95); border: 1px solid rgba(98, 0, 234, 0.5); box-shadow: 0 4px 20px rgba(98, 0, 234, 0.4); }
.score-board.type-03 .event .event-text,
.board-wrap.type-03 .event .event-text { color: #ffffff; text-shadow: none; }

/* Type 04: Frosted Glass — 프리미엄 플로팅 글래스 UI */
.score-board.type-04,
.board-wrap.type-04 {
	--board-bg: rgba(15, 23, 42, 0.75);
	--board-blur: 20px;
	--board-border: rgba(255, 255, 255, 0.2);
	--glass-border: rgba(255, 255, 255, 0.2);
	--charcoal-glass: rgba(0, 0, 0, 0.3);
	--banner-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.85) 100%);
	--away-bg: linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
	--home-bg: linear-gradient(145deg, #7f1d1d 0%, #991b1b 50%, #7f1d1d 100%);
	--text-primary: #ffffff;
	--text-muted: rgba(255, 255, 255, 0.85);
	--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Type-04 Frosted Glass 전용 오버라이드 */
.score-board.type-04 { border: 1px solid rgba(255, 255, 255, 0.2); }
.board-wrap.type-04 { border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.score-board.type-04 .board-banner { border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .board-wrap .team .team-area:first-child,
.board-wrap.type-04 .team .team-area:first-child { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%), var(--away-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .board-wrap .team .team-area:last-child,
.board-wrap.type-04 .team .team-area:last-child { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%), var(--home-bg); border: none; border-bottom: none; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .board-wrap .point-area,
.board-wrap.type-04 .point-area { background: rgba(0, 0, 0, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .board-wrap .inning,
.board-wrap.type-04 .inning { background: rgba(0, 0, 0, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .board-wrap .count,
.board-wrap.type-04 .count { background: rgba(0, 0, 0, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .board-wrap .play,
.board-wrap.type-04 .play { background: rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .board-wrap .point,
.board-wrap.type-04 .point { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.score-board.type-04 .board-banner .banner-text,
.score-board.type-04 .board-wrap .team .team-area .name,
.board-wrap.type-04 .team .team-area .name { color: #ffffff; }
.score-board.type-04 .event,
.board-wrap.type-04 .event { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.2); }
.score-board.type-04 .event .event-text,
.board-wrap.type-04 .event .event-text { color: #ffffff; }

/* Type-02, 04: 배너 글래스 하이라이트 */
.score-board.type-02 .board-banner,
.score-board.type-04 .board-banner { box-shadow: var(--gloss), var(--glass-highlight); }

/* ===== 레이아웃 & 공통 컴포넌트 ===== */
.board-wrap {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	background: var(--board-bg);
	backdrop-filter: blur(var(--board-blur));
	-webkit-backdrop-filter: blur(var(--board-blur));
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), var(--gloss);
}
.container > .board-wrap { max-width: 780px; }
.board-wrap .team { order: 1; }
.board-wrap .point-area { order: 2; }
.board-wrap .inning { order: 3; }
.board-wrap .count { order: 4; }
.board-wrap .play { order: 5; }

/* 포지션(배치) 유틸 */
.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%; }

/* 팀 영역 (Away 푸른색 / Home 붉은색) */
.board-wrap .team { position: relative; min-width: 240px; flex: 1; }
.board-wrap .team .team-area { display: flex; align-items: center; padding: 14px 18px; height: 69px; overflow: hidden; border-bottom: 1px solid var(--glass-border); box-shadow: var(--gloss); }
.board-wrap .team .team-area:first-child { background: var(--away-bg); }
.board-wrap .team .team-area:last-child { background: var(--home-bg); border-bottom: none; }
.board-wrap .team .team-area .name { font-size: 24px; font-weight: 700; color: var(--text-primary); width: 200px; margin-left: 20px; white-space: nowrap; text-overflow: clip; transform-origin: left center; display: inline-block; height: 1em; line-height: 1; letter-spacing: -0.02em; }
.logo { width: 45px; min-width: 45px; height: auto; flex-shrink: 0; }
.logo img { width: 45px; height: auto; min-width: 45px; object-fit: contain; }

/* 이닝 */
.board-wrap .inning {
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	position: relative; width: 48px; min-width: 48px; text-align: center;
	background: var(--charcoal-glass); border-left: 1px solid var(--glass-border);
	border-radius: 4px 0 0 4px; box-shadow: var(--gloss);
}
.board-wrap .inning .change { font-size: 22px; color: var(--text-muted); line-height: 1; }
.board-wrap .inning .change.active { color: var(--neon-lime); text-shadow: 0 0 10px var(--neon-lime-glow); }
.board-wrap .inning .number { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.2; }

/* 점수 */
.point-area { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--glass-border); background: var(--charcoal-glass); box-shadow: var(--gloss); min-width: 100px; padding: 0 6px; }
.point { position: relative; display: inline-block; min-width: 88px; height: 59px; overflow: hidden; font-size: 40px; font-weight: 700; color: var(--text-primary); text-align: center; border-bottom: 1px solid var(--glass-border); margin-top: 10px; letter-spacing: -0.02em; }
.point:last-child { border-bottom: 0; }
.point span { position: absolute; width: 100%; left: 0; transition: transform 0.5s ease-in-out; }
.point .old-number { top: 0; }
.point .new-number { top: 100%; }

/* 볼·스트라이크·아웃 카운트 */
.board-wrap .count { display: flex; flex-direction: column; justify-content: center; width: 126px; background: var(--charcoal-glass); padding: 0 13px; border-left: 1px solid var(--glass-border); box-shadow: var(--gloss); }
.board-wrap .count .count-area { display: flex; align-items: center; }
.board-wrap .count .count-area .text { font-size: 24px; font-weight: 700; color: var(--text-primary); width: 26px; }
.board-wrap .count .count-area .circle { width: 20px; height: 20px; border-radius: 300px; background: var(--text-muted); margin-right: 5px; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3); }
.board-wrap .count .count-area.ball .circle.active { background: var(--neon-lime); box-shadow: 0 0 10px var(--neon-lime-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.board-wrap .count .count-area.strike .circle.active { background: #e65100; box-shadow: 0 0 8px rgba(230, 81, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.board-wrap .count .count-area.out .circle.active { background: #dc2626; box-shadow: 0 0 8px rgba(220, 38, 38, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

/* 주루 */
.board-wrap .play {
	width: 126px; min-width: 126px; position: relative; display: flex; justify-content: center;
	background: var(--charcoal-glass); border-right: 1px solid var(--glass-border);
	border-radius: 0 4px 4px 0; box-shadow: var(--gloss);
}
.board-wrap .play .runner-area { position: absolute; top: 35%; left: 56%; transform: translate(-50%, -50%); }
.board-wrap .play .runner { position: absolute; background: var(--text-muted); transform: rotate(-45deg); width: 30px; height: 30px; border-radius: 2px; }
.board-wrap .play .runner.active { background: var(--neon-lime); box-shadow: 0 0 10px var(--neon-lime-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.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: 18px; display: flex; gap: 8px; }
.board-wrap .play .pitching .number { font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* 이벤트 */
.event { position: absolute; top: 50px; background: var(--charcoal-glass); backdrop-filter: blur(8px); border: 1px solid var(--glass-border); padding: 6px 14px; border-radius: 4px; opacity: 0; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), var(--gloss); }
.event .event-text { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }

/* 배너(타이틀) — 보드 너비 고정, 배너는 100%로 배경이 잘리지 않게, 텍스트는 overflow로 가둠 */
.score-board { width: 780px; border: 1px solid var(--board-border); overflow: hidden; border-radius: 4px; }
.board-banner { width: 100%; background: var(--banner-bg); padding: 8px; height: 43px; box-shadow: var(--gloss); overflow: visible; box-sizing: border-box; display: flex; justify-content: center; align-items: center;  }
.board-banner.top { border-bottom: 1px solid var(--glass-border); }
.board-banner.bottom { border-top: 1px solid var(--glass-border); }
.board-banner .banner-text { font-size: 24px; font-weight: 700; color: var(--text-primary); white-space: nowrap; text-overflow: clip; transform-origin: center; display: inline-block; }

@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; }