body {

    font-family: 'Arial', sans-serif;

    background-color: #f3f4f6;

}



.container {

    background: #fff;

    border-radius: 15px;

    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);

    max-width : 750px;

	text-align : center;

}



h2, h3, h4, h5 {

    color: #333;

}

h3 {

	margin-top : 15px;

}



.btn-primary {

    background-color: #FF5733;

    border: none;

	margin-top : 15px;

}



.btn-primary:hover {

    background-color: #FF704D;

}



/* ... 기존 코드 ... */



.ball {

    display: inline-block;

    width: 50px; /* 폭을 50px로 변경 */

    height: 50px; /* 높이를 50px로 변경 */

    line-height: 50px; /* 텍스트 중앙 정렬을 위해 높이 값과 동일하게 변경 */

    text-align: center;

    border-radius: 50%;

    background-color: #FFFFFF;

    color: #333;

    margin: 0 8px; /* 공 사이의 간격을 조금 더 넓히기 위해 마진을 변경 */

    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); /* 그림자의 블러 값을 더 크게 설정 */

    border: 1px solid #aaa;

    font-size: 20px; /* 숫자의 폰트 크기를 적절하게 조정 */

}

.ballx {

    display: inline-block;

    width: 50px; /* 폭을 50px로 변경 */

    height: 50px; /* 높이를 50px로 변경 */

    line-height: 50px; /* 텍스트 중앙 정렬을 위해 높이 값과 동일하게 변경 */

    text-align: center;

    border-radius: 50%;

    background-color: #c8102e;

	color: #fff;

    margin: 0 8px; /* 공 사이의 간격을 조금 더 넓히기 위해 마진을 변경 */

    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); /* 그림자의 블러 값을 더 크게 설정 */

    border: 1px solid #aaa;

    font-size: 20px; /* 숫자의 폰트 크기를 적절하게 조정 */

}



	

/* ... 기존 코드 ... */



.btnok {

    display: flex;

    flex-direction: column;

    align-items: center; /* 가로 중앙 정렬 */

	margin-bottom: 15px;

}





.probability-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.bar-container {

    position: relative;	

    flex-grow: 1;

    height: 30px;

    background-color: #eee;

    margin: 0 10px;

    border-radius: 15px;

    overflow: hidden;

	text-align : center;

	width : 300px !important;

}



.bar-fill {

    height: 100%;

    background-color: #FF5733;

	transition: width 0.3s;



}



.label {

    color: #777;

    font-weight: bold;

}



.main {

    margin-top: 5px !important;

}

/*

.bar-fill {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%; 

    background-color: green;

    transition: width 0.3s;

}

*/



.probability-text {

    position: absolute;

	width : 100%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-weight: bold;

    color: black; 

    z-index: 1;

}



.nanum {

	display : flex;

	flex-wrap: wrap;

}



.info {

	margin : auto;

}



.nanum {

	display: flex;

	flex-wrap: wrap;

    gap: 5px;  /* 각 카드 사이의 간격 */

    justify-content: center;

    padding: 5px;

}



.info {

    margin: 5px auto;

    padding: 5px;

    border-radius: 10px;  /* 모서리를 둥글게 */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 그림자 효과 */

    background-color: silver;  /* 배경색 */

    width: 47%;  /* 카드의 폭 */



	background: linear-gradient(to top, #f5f5f5, #e0e0e0);

}

@media (max-width: 650px) {

    .info {

		width : 90%;

    }

}





h3 {

    font-size: 24px;  /* 제목 글꼴 크기 */

    border-bottom: 2px solid #e0e0e0;

    padding-bottom: 10px;

    margin-bottom: 20px;

}



p {

    font-size: 16px;  /* 내용 글꼴 크기 */

    margin-bottom: 15px;

}



span {

    font-weight: bold;  /* 강조 효과 */

    color: #333;

}

.footer {

    color: #ffffff;

    margin-top: 20px;

	

}

.footer .container{

    background-color: black; /* #212529; */

    color: #ffffff;

	padding : 10px;

}



.footer h5 {

	color : red;

    margin-bottom: 20px;

    font-size: 18px;

}



.footer p {

    font-size: 14px;

    margin-bottom: 20px;

}



.footer-links {

    list-style-type: none;

    padding: 0;

}



.footer-links li {

    margin-bottom: 10px;

}



.footer-links a {

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

}



.footer-links a:hover {

    text-decoration: underline;

}



.social-icons a {

    font-size: 24px;

    margin-right: 10px;

    color: #ffffff;

    transition: color 0.2s;

}



.social-icons a:hover {

    color: #007bff; 

}



.footer-bottom {

    margin-top: 20px;

    font-size: 14px;

    border-top: 1px solid #333;

    padding-top: 20px;

}