body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
}
*{ 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
a:link {
   text-decoration: none;
}
#prcess-loading {
    display:none; 
	position:fixed; 
	width:100px;	
	top:0; 
	left:50%; 
	margin-left:-50px; 
	padding:20px 0;	
	text-align:center;
	z-index:100001; 
	background:rgba(0,0,0, 1);
	color:#FFFFFF;
	border-radius: 0 0 5px 5px;
}
.overlayOuter { 
	display:none; position:fixed; background:rgba(146,146,146, 0.7);	
	opacity:0.7; 
	filter:alpha(opacity=70); 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
	-moz-opacity:0.7; 
	-khtml-opacity: 0.7;
	width:100%; height:100%; left:0; top:0; z-index:100000; 
}	
.overlayInner { display:none; position:absolute; top:25%; left:50%; margin-left:-25%; z-index:100001; background:rgba(0,0,0, 1); border:1px solid #3c3c3c; 
}

/* 1. Background Overlay: Fixed to Browser */
.popup-overlay {
    display: none; /* 기본은 숨김 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important; 
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 99999 !important;
    
    /* 중앙 정렬 (flex일 때만 작동) */
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Main Popup Box */
.popup-content {
    margin: auto !important; 
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #1a1a1a !important;
    border: 1px solid #831016 !important;
    width: 420px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
    z-index: 100001 !important;
}

/* 3. Header: Left Title, Right Close X */
.popup-header {
    display: flex!important;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 15px;
    background: #222; /* Slightly different dark shade */
    border-bottom: 1px solid #333;
}

.popup-header p {
    color: #831016; /* Matching your gold theme */
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    padding-left: 5px; /* Left margin as requested */
}

.popup-close-x {
    background: none;
    border: none;
    color: #888;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}
.popup-close-x:hover { color: #fff; }

/* 4. Body: Message text */
.popup-body {
    flex: 1; 
    display: flex;
    align-items: center; /* Changed from flex-end to center for better readability */
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

#popup-message {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* 5. Footer: Close Button Right */
.popup-footer {
    background: #111;
    padding: 10px 15px;
    display: flex;
    justify-content: flex-end; 
    border-top: 1px solid #333;
}

.btn-close {
    background: #831016;
    color: #000;
    border: none;
    padding: 8px 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    transition: opacity 0.2s;
}
.btn-close:hover { opacity: 0.9; }


/*2025.12.21 Martin - bar duration*/
.round-time-bar {
  overflow: hidden;
  background: aliceblue;
}
.round-time-bar div {
  height: 5px;
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration))
    forwards;
  transform-origin: left center;
  background: linear-gradient(to bottom, red, #900);
}

.round-time-bar[data-style="smooth"] div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

.round-time-bar[data-style="fixed"] div {
  width: calc(var(--duration) * 5%);
}

.round-time-bar[data-color="blue"] div {
  background: linear-gradient(to bottom, #64b5f6, #1565c0);
}

@keyframes roundtime {
  to {
    /* More performant than `width` */
    transform: scaleX(0);
  }
}

.shadow-image {
  box-shadow: 4px 5px 5px 2px rgba(0, 0, 0, 0.2);
}

.rounded-image-15 {
	  border-radius: 15px; /* Adjust the pixel value for desired roundness */
}
.rounded-image-10 {
	  border-radius: 10px; /* Adjust the pixel value for desired roundness */
}


.svg .activated {
  display: inline-block;
  vertical-align: middle;
  fill: #831016;
  stroke: #831016;
}

.svg .inactivated {
  display: inline-block;
  vertical-align: middle;
  fill: #373636;
  stroke: #373636;
}

/* 2025.12.21 Martin - progress bar */
/* 타이머 전체 외곽선 및 지나간 시간 영역 (그레이) */
.timer-container-v2 {
  position: relative;
  width: 100%;
  height: 24px;
  background-color: #333333; /* 지나간 시간 (그레이 색상) */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #444;
  margin-top: 10px;
  display: inline-block;
  vertical-align: middle;
}

/* 줄어드는 남은 시간 바 (눈에 띄는 빨간색 + 화이트닝 오버레이 추가) */
.progress-bar-v2 {
  height: 100%;
  width: 100%; /* 초기 상태 100% */
  background-color: #791218; /* 베이스 빨간색 */
  position: relative;
  overflow: hidden;
  transition: width 0.2s linear; /* 부드러운 감소 연출 */
}

/* 오버레이 화이트닝 빛 효과 (Pseudo-element) */
.progress-bar-v2::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* 바 왼쪽 바깥에서 대기 */
  width: 80%;  /* 빛의 너비 */
  height: 100%;
  
  /* 은은한 흰색 그라데이션 빛줄기 정의 */
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  
  /* 2.5초 주기로 왼쪽에서 오른쪽으로 무한 반복 이동 */
  animation: whitening-sweep 2.5s infinite ease-in-out;
}

/* 화이트닝 이동 애니메이션 */
@keyframes whitening-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}

/* 바 중앙에 고정될 텍스트 스타일 */
.timer-text-v2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 가독성 확보 */
  pointer-events: none; /* 클릭 이벤트 방해 방지 */
}