/* ===== 엑셀 프로그레스바 공통 스타일 ===== */
/* NanumBarunGothic은 프로젝트 css/common.css에서 이미 @font-face 로딩됨 */

/* 오버레이 배경 */
#excelProgressOverlay {
	display:none; position:fixed; top:0; left:0; width:100%; height:100%;
	background:
		radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.06) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 80%, rgba(139,92,246,0.05) 0%, transparent 50%),
		rgba(0,0,0,0.45);
	z-index:999999;
}
#excelProgressOverlay.ep-blur-active {
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
}

/* 카드 — chart-box 스타일 (플랫, 그라데이션 없음) */
.ep-card {
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	background:#fff;
	border-radius:8px;
	border:1px solid #e0e0e0;
	box-shadow:0 2px 8px rgba(0,0,0,0.12);
	min-width:420px; max-width:480px; width:90%;
	animation:ep-card-in 0.25s ease both;
	overflow:hidden;
}

@keyframes ep-card-in {
	from { opacity:0; transform:translate(-50%,-50%) scale(0.97) translateY(8px); }
	to   { opacity:1; transform:translate(-50%,-50%) scale(1) translateY(0); }
}

/* 타이틀 바 (상단 진한 띠) */
.ep-title-bar {
	display:flex; align-items:center; justify-content:space-between;
	padding:12px 20px;
	background:#555;
	color:#fff;
}
.ep-title-bar-left {
	display:flex; align-items:center; gap:10px;
}
.ep-title {
	font-family:'NanumBarunGothic', '맑은 고딕', sans-serif;
	font-size:15px; font-weight:700; color:#fff;
	line-height:1.3;
}
#excelProgressFileName {
	font-family:'NanumBarunGothic', '맑은 고딕', sans-serif;
	font-size:11px; color:rgba(255,255,255,0.7);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	max-width:200px;
}

/* 아이콘 */
.ep-icon {
	width:32px; height:32px; border-radius:6px;
	display:flex; align-items:center; justify-content:center;
	flex-shrink:0;
	transition:background 0.3s;
}
.ep-icon-loading { background:rgba(255,255,255,0.15); }
.ep-icon-writing { background:rgba(255,255,255,0.15); }
.ep-icon-done    { background:rgba(255,255,255,0.2); }
.ep-icon-error   { background:rgba(239,68,68,0.3); }

.ep-icon svg { width:18px; height:18px; }
.ep-icon-loading svg { color:#fff; animation:ep-spin 1.2s linear infinite; }
.ep-icon-writing svg { color:#fff; }
.ep-icon-done    svg { color:#fff; }
.ep-icon-error   svg { color:#fff; }

@keyframes ep-spin { to { transform:rotate(360deg); } }

/* 본문 영역 */
.ep-body {
	padding:20px;
}

/* 스텝 인디케이터 */
.ep-steps {
	display:flex; align-items:center; justify-content:center;
	margin-bottom:18px;
	padding:0 4px;
}
.ep-step {
	display:flex; align-items:center; gap:6px;
	font-family:'NanumBarunGothic', '맑은 고딕', sans-serif;
	font-size:11px; color:#bbb;
	transition:color 0.3s;
}
.ep-step-num {
	width:22px; height:22px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:700;
	background:#e9ecef; color:#bbb;
	transition:background 0.3s, color 0.3s;
	flex-shrink:0;
}
.ep-step.active .ep-step-num {
	background:#667eea; color:#fff;
}
.ep-step.active {
	color:#333; font-weight:600;
}
.ep-step.done .ep-step-num {
	background:#667eea; color:#fff;
}
.ep-step.done {
	color:#667eea;
}
.ep-step-line {
	width:30px; height:1px;
	background:#ddd; margin:0 8px;
	flex-shrink:0;
}
.ep-step-line.done {
	background:#667eea;
}

/* 진행률 구역 (chart-box 스타일) */
.ep-progress-section {
	background:#fff;
	border:1px solid #e0e0e0;
	border-radius:6px;
	padding:14px 16px;
}
.ep-progress-section h4 {
	margin:0 0 12px 0;
	font-family:'NanumBarunGothic', '맑은 고딕', sans-serif;
	font-size:13px; font-weight:700; color:#333;
	padding-bottom:8px;
	border-bottom:2px solid #667eea;
}
.ep-progress-info {
	display:flex; justify-content:space-between; align-items:baseline;
	margin-bottom:10px; padding:0 2px;
}
#excelProgressText {
	font-family:'NanumBarunGothic', '맑은 고딕', sans-serif;
	font-size:13px; color:#333;
}
#excelProgressPct {
	font-family:'NanumBarunGothic', '맑은 고딕', sans-serif;
	font-size:22px; font-weight:800; color:#333;
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.02em;
	line-height:1.1;
}

/* 프로그레스바 트랙 */
.ep-track {
	background:#e9ecef;
	border-radius:8px; height:12px;
	overflow:hidden; position:relative;
}
#excelProgressBar {
	height:100%; width:0%; border-radius:8px;
	background:linear-gradient(90deg,#667eea,#5a6fe0);
	transition:width 0.4s cubic-bezier(0.4,0,0.2,1);
	position:relative;
}
#excelProgressBar::after {
	content:''; position:absolute; top:0; left:0; right:0; bottom:0;
	background:linear-gradient(
		90deg,
		transparent 0%,
		rgba(255,255,255,0.35) 40%,
		rgba(255,255,255,0.1) 60%,
		transparent 100%
	);
	background-size:200% 100%;
	animation:ep-shimmer 2s ease infinite;
	border-radius:8px;
}
#excelProgressBar.ep-bar-done {
	background:#667eea;
	animation:none;
}
#excelProgressBar.ep-bar-done::after { animation:none; background:transparent; }
#excelProgressBar.ep-bar-error {
	background:#ef4444;
	animation:none;
}
#excelProgressBar.ep-bar-error::after { animation:none; background:transparent; }

@keyframes ep-shimmer {
	0%   { background-position:200% 0; }
	100% { background-position:-200% 0; }
}

/* 하단 버튼 영역 */
.ep-footer {
	padding:12px 20px;
	text-align:right;
	border-top:1px solid #e0e0e0;
	background:#f9f9f9;
}
#excelProgressCancelBtn {
	font-family:'NanumBarunGothic', '맑은 고딕', sans-serif;
	display:inline-block;
	padding:7px 24px;
	background:#666; color:#fff;
	border:none; border-radius:4px;
	font-size:13px; font-weight:600;
	cursor:pointer;
	transition:background 0.15s;
}
#excelProgressCancelBtn:hover {
	background:#555;
}
#excelProgressCancelBtn:active {
	transform:scale(0.97);
}

/* 로딩 점 애니메이션 */
.ep-loading-dot {
	display:inline-block; width:6px; height:6px;
	background:#667eea; border-radius:50%;
	animation:ep-blink 1s ease infinite; vertical-align:middle;
	margin-right:4px;
}
@keyframes ep-blink { 0%,100%{opacity:0.3} 50%{opacity:1} }