body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	 "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic",
	 sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f9f9f9;
	font-size: 16px;
	line-height: 1.5;
}
.container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	max-width: 95%; /* 화면 크기의 95% */
	width: 100%; /* 전체 너비로 확장 */
	margin: 0 auto; /* 중앙 정렬 */
	padding: 0px;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.container {
		max-width: 100%; /* 모바일에서는 전체 너비 */
		padding: 0px; /* 패딩 감소 */
	}
}

.main-content {
	flex-grow: 1;
	max-width: 800px;
	padding: 20px;
	box-sizing: border-box;
}

header {
	background-color: #0044cc;
	color: white;
	text-align: center;
	padding: 20px;
}

nav {
	display: flex;
	justify-content: center;
	background-color: #0066ff;
	padding: 10px 0;
}

nav a {
	color: white;
	text-decoration: none;
	margin: 0 15px;
	font-weight: bold;
	font-size: 16px;
}

nav a:hover {
	text-decoration: underline;
}

section {
	max-width: 800px;
	margin: 10px auto;
	padding: 10px;
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	font-size: 16px;
}

footer {
	text-align: center;
	padding: 10px 0;
	background-color: #0044cc;
	color: white;
	margin-top: 20px;
}

.form-container input {
	width: 70%;
	padding: 10px;
	font-size: 28px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

.form-container button {
	padding: 10px 20px;
	font-size: 28px;
	color: white;
	background-color: #0066ff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.form-container button:hover {
	background-color: #0044cc;
}

.result {
	margin-top: 20px;
	font-size: 18px;
	font-weight: bold;
}

.layer-popup {
	position: absolute;
	top: 40px;
	left: calc(50% + 50px);
	padding: 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	display: none;
	width: 250px;
	box-sizing: border-box;
	z-index: 10;
}

/* 버튼 스타일 */
.question-button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: left; /* 아이콘과 텍스트 정렬 */
	justify-content: left;
}
/* 아이콘 이미지 스타일 */
.question-icon {
	width: 24px; /* 아이콘 크기 */
	height: 24px;
	vertical-align: middle; /* 텍스트와 아이콘의 세로 중심 맞추기 */
	margin-left: 5px; /* 텍스트와 아이콘 간격 */
}

.question-button:hover .question-icon {
	transform: scale(1.1); /* 호버 시 확대 */
}

.question-button:active .question-icon {
	transform: scale(0.9); /* 클릭 시 축소 */
}

.toggle-container {
	display: inline-block;
	margin-left: 10px;
}

.toggle {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #0066ff;
}

input:checked + .slider:before {
	transform: translateX(26px);
}

.ping-visual {
	margin-top: 20px;
	text-align: center;
}

.ping-indicator {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #ccc;
	margin: 0 auto;
}

.ping-label {
	margin-top: 10px;
	font-size: 18px;
	font-weight: bold;
}

#quickLinks {
	margin: 16px 0;
	display: flex;
	flex-wrap: wrap; /* 줄바꿈 허용 */
	justify-content: center; /* 버튼을 가로로 중앙 정렬 */
	align-items: center; /* 버튼을 세로로 중앙 정렬 */
	gap: 8px; /* 버튼 간 간격 */
}

.quickLink {
	display: flex; /* 버튼 내부 정렬 */
	align-items: center;
	justify-content: center;
	padding: 5px; /* 내부 여백 */
	padding-right: 10px;
	padding-left : 10px;
	background-color: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 5px;
	cursor: pointer;
	box-sizing: border-box;
	width: auto; /* 버튼 크기 자동 조정 */
	height: auto;
}

.quickLink img {
	width: 20px; /* 아이콘 크기 */
	height: 20px;
	margin: 0; /* 여백 제거 */
	vertical-align: middle;
}

.quickLink:hover {
	background-color: #e9e9e9; /* 호버 시 배경색 변경 */
}

/* 모바일 환경 */
@media (max-width: 768px) {
	#quickLinks {
		justify-content: center; /* 모바일에서도 중앙 정렬 유지 */
	}

	.quickLink {
		flex-direction: column; /* 아이콘과 텍스트 세로 정렬 */
		padding: 5px;
	}

	.quickLink img {
		width: 20px; /* 모바일에서 아이콘 크기 축소 */
		height: 20px;
	}

	.quickLink span {
		display: none; /* 모바일에서 텍스트 숨김 */
	}
}


.details-section {
	display: none;
	margin: 0 auto;
	margin-top: -20px;
	margin-bottom: 10px;
	padding: 10px 15px;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 12px;
	color: #333;
	line-height: 1.5;
	max-width: 80%;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: relative;
}

.details-section.visible {
	display: block;
	animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 반응형 스타일 */
@media (max-width: 768px) {
	.container {
		flex-direction: column;
		align-items: center;
	}
	.main-content {
		width: 100%;
		max-width: 600px;
	}
	
	body {
		font-size: 14px;
	}
	
	header {
		padding: 15px;
	}
	
	nav {
		flex-wrap: wrap;
		font-size: 14px;
	}
	
	section {
		padding: 15px;
	}
	
	.form-container input {
		width: 90%;
		font-size: 14px;
	}
	
	.form-container button {
		font-size: 14px;
		padding: 8px 16px;
	}

	.result {
		font-size: 16px;
	}

	footer {
		font-size: 14px;
	}
}

#serverTimeResult {
	text-align: center; /* 중앙 정렬 */
	margin-top: 20px;
}

.server-url {
	font-size: 16px; /* URL 크기 유지 */
	font-weight: normal; /* 기본 굵기 */
	color: #333; /* 색상 */
	margin-top:-30px;
	margin-bottom: 10px; /* 시간과 간격 추가 */
}

.server-time {
	font-size: 30px; /* 시간 크기 키움 */
	font-weight: bold; /* 굵게 표시 */
	color: #000; /* 색상 */
}

  /* 기본 캘린더 스타일 */
  #calendar-container iframe {
	width: 800px;
	height: 600px;
  }

  /* 모바일 화면에 맞게 조정 */
  @media (max-width: 768px) {
	#calendar-container iframe {
	  width: 100%; /* 모바일에서는 가로를 100%로 설정 */
	  height: 400px; /* 높이를 줄여서 화면에서 너무 큰 공간을 차지하지 않도록 설정 */
	}
  }
  
@keyframes blink {
	  0%, 100% {
		  background-color: #ff0000; /* 빨간색 */
	  }
	  50% {
		  background-color: #ffffff; /* 흰색 */
	  }
  }
  
  body.blinking {
	  animation: blink 0.5s step-end infinite;
  }

.captcha-buttons {
	  display: flex;
	  justify-content: center;
	  gap: 10px;
	  margin-top: 10px;
  }
  
  .captcha-buttons button {
	  padding: 10px 20px;
	  font-size: 16px;
	  color: white;
	  background-color: #0066ff;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
  }
  
  .captcha-buttons button:hover {
	  background-color: #0044cc;
  }
  
  .social-icons {
	  display: flex;
	  justify-content: center;
	  gap: 15px;
	  margin-top: 10px;
  }
  
  .social-icon img {
	  width: 24px;
	  height: 24px;
	  transition: transform 0.3s ease;
  }
  
  .social-icon img:hover {
	  transform: scale(1.2);
  }





.server-time-container {
	  text-align: center;
	  margin: 20px auto;
  }
  
  .server-description {
	  font-size: 20px;
	  font-weight: bold;
	  color: black;
	  margin-bottom: 10px;
  }
  
  .server-time {
	  font-size: 40px;
	  font-weight: bold;
	  color: #007bff; /* 파란색 */
	  margin: 10px auto;
  }
  
  .formatted-time {
	  font-size: 40px;
	  color: #007bff; /* 파란색 */
  }
  
  .formatted-milliseconds {
	  font-size: 30px;
	  color: #007bff; /* 파란색 */
  }
  
  .server-host {
	  font-size: 20px;
	  color: #007bff; /* 파란색 */
	  text-decoration: underline;
  }
		.telegram-button {
	  display: inline-block;
	  background-color: #0088cc;
	  color: #fff;
	  padding: 10px 20px;
	  border-radius: 5px;
	  text-decoration: none;
	  font-size: 16px;
	  font-weight: bold;
	  margin-top: 15px;
	  transition: background-color 0.3s ease;
  }
  
  .telegram-button:hover {
	  background-color: #006699;
  }
  
.schedule-item {
	  margin-bottom: 10px; /* 항목 간 간격 줄이기 */
	  padding: 10px; /* 내부 여백 줄이기 */
	  background-color: #f9f9f9;
	  border: 1px solid #ddd;
	  border-radius: 5px;
	  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 그림자 줄이기 */
	  display: flex; /* 레이아웃을 플렉스 박스로 변경 */
	  flex-direction: column;
  }
  
  .schedule-item h3 {
	  margin-top: 0;
	  margin-bottom: 5px; /* 제목과 내용 사이 간격 축소 */
	  font-size: 16px; /* 제목 크기 줄이기 */
	  color: #333;
  }
  
  .schedule-item p {
	  margin: 3px 0; /* 텍스트 간격 줄이기 */
	  font-size: 14px; /* 폰트 크기 줄이기 */
	  color: #666;
  }
  
  .schedule-item button {
	  margin-top: 5px; /* 버튼과 텍스트 간격 줄이기 */
	  padding: 8px 15px; /* 버튼 크기 축소 */
	  background-color: #0066ff;
	  color: white;
	  border: none;
	  border-radius: 3px;
	  font-size: 14px; /* 버튼 글꼴 크기 줄이기 */
	  cursor: pointer;
  }
  
  .schedule-item button:hover {
	  background-color: #0044cc;
  }
  
  /* 전체 레이아웃 조정 */
  #schedule-list {
	  display: flex;
	  flex-direction: column;
	  gap: 10px; /* 각 일정 항목 간격 */
  }
.idol-item {
	  margin-bottom: 10px;
	  padding: 10px;
	  background-color: #f9f9f9;
	  border: 1px solid #ddd;
	  border-radius: 5px;
	  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .idol-item h3 {
	  margin: 0 0 5px;
	  font-size: 18px;
	  color: #333;
  }
  
  .idol-item p {
	  margin: 5px 0;
	  font-size: 14px;
	  color: #666;
  }
  
  .idol-item button {
	  padding: 8px 15px;
	  background-color: #0066ff;
	  color: white;
	  border: none;
	  border-radius: 3px;
	  font-size: 14px;
	  cursor: pointer;
  }
  
  .idol-item button:hover {
	  background-color: #0044cc;
  }
  
/* 체크박스와 라벨을 감싸는 컨테이너 */
  .checkbox-container {
	  display: flex;
	  justify-content: center; /* 수평 가운데 정렬 */
	  align-items: center; /* 수직 가운데 정렬 */
	  gap: 15px; /* 체크박스 간 간격 */
	  margin-top: 10px; /* 상단 여백 */
  }
  
  /* 체크박스 크기 조정 */
  input[type="checkbox"] {
	  width: 20px;
	  height: 20px;
	  margin: 0;
	  vertical-align: middle;
  }
  .no-padding {
	  padding: 0px;
  }
  .styled-table {
	  width: 100%;
	  border-collapse: collapse;
	  margin-bottom: 2rem;
  }
  .table-cell {
	  padding: 0.8rem;
	  border: 1px solid #ddd;
  }
	.adsense-block {
	  	display: block;
  	}
.highlight-lcp {
		  font-size: 1.0rem;
		  font-weight: 600;
		  text-align: center;
		  line-height: 1.5;
		  margin: 20px auto;
		  padding: 10px 15px;
		  max-width: 720px;
		  color: #222;
		  background-color: #f9f9f9;
		  border-radius: 8px;
		  min-height: 60px; /* 레이아웃 안정성 확보 */
	  }