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;
	flex-direction: column; /* 구글 자동 광고 삽입 시 레이아웃 깨짐(좌우로 밀림) 방지 */
	justify-content: flex-start;
	align-items: center; /* 요소들을 중앙 정렬 */
	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;
	width: 100%; /* 컨테이너가 column 모드일 때 너비를 유지하기 위함 */
	max-width: 800px;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}

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

/* ===== GNB 네비게이션 ===== */
.gnb-nav {
	background-color: #0066ff;
	padding: 0;
	position: relative;
}
.gnb-inner {
	display: flex;
	justify-content: center;
	align-items: stretch;
	max-width: 900px;
	margin: 0 auto;
}

/* 직접 노출 메뉴 */
.gnb-direct > a {
	display: flex;
	align-items: center;
	color: white;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 16px;
	transition: background 0.15s;
	white-space: nowrap;
}
.gnb-direct > a:hover {
	background: rgba(255,255,255,0.15);
}

/* 구분선 */
.gnb-separator {
	width: 1px;
	background: rgba(255,255,255,0.2);
	margin: 8px 0;
}

/* 더보기 드롭다운 */
.gnb-more {
	position: relative;
}
.gnb-more > a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: white;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 16px;
	transition: background 0.15s;
	white-space: nowrap;
	cursor: pointer;
}
.gnb-more > a:hover,
.gnb-more:hover > a {
	background: rgba(255,255,255,0.15);
}
.gnb-arrow {
	font-size: 10px;
	opacity: 0.7;
	transition: transform 0.2s;
}
.gnb-more:hover .gnb-arrow {
	transform: rotate(180deg);
}

/* 드롭다운 패널 */
.gnb-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 200px;
	background: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 8px 28px rgba(0,0,0,0.18);
	z-index: 100;
	overflow: hidden;
}
.gnb-more:hover .gnb-dropdown {
	display: block;
}
.gnb-dropdown-title {
	padding: 10px 18px 4px;
	font-size: 11px;
	font-weight: 700;
	color: #0044cc;
	letter-spacing: 0.5px;
	border-top: 1px solid #f0f0f0;
}
.gnb-dropdown-title:first-child {
	border-top: none;
}
.gnb-dropdown a {
	display: block;
	padding: 9px 18px 9px 28px;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.12s;
}
.gnb-dropdown a:hover {
	background: #eef3ff;
	color: #0044cc;
}
.gnb-badge-external {
	font-size: 10px;
	color: #999;
	background: #f0f0f0;
	border-radius: 3px;
	padding: 1px 5px;
	margin-left: 6px;
}

/* 모바일 요소 (데스크톱에서 숨김) */
.gnb-hamburger {
	display: none;
	background: none;
	border: none;
	color: white;
	font-size: 26px;
	cursor: pointer;
	padding: 10px 16px;
	margin-left: auto;
}
.gnb-mobile-brand {
	display: none;
	color: white;
	font-weight: 700;
	font-size: 16px;
	padding: 10px 12px;
}
.gnb-mobile-menu {
	display: none;
	background: #0055ee;
}
.gnb-mobile-menu.open {
	display: block;
}

/* 모바일 핵심 메뉴 그리드 */
.gnb-mobile-direct {
	display: flex;
	border-bottom: 2px solid rgba(255,255,255,0.15);
}
.gnb-mobile-direct a {
	flex: 1;
	text-align: center;
	padding: 14px 8px;
	color: white;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	border-right: 1px solid rgba(255,255,255,0.1);
}
.gnb-mobile-direct a:last-child { border-right: none; }
.gnb-mobile-direct a:active {
	background: rgba(255,255,255,0.15);
}

/* 모바일 아코디언 */
.gnb-accordion {
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gnb-accordion-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 13px 20px;
	background: none;
	border: none;
	color: white;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gnb-accordion-toggle:active {
	background: rgba(255,255,255,0.08);
}
.gnb-acc-arrow {
	font-size: 12px;
	opacity: 0.5;
	transition: transform 0.25s;
}
.gnb-accordion.open .gnb-acc-arrow {
	transform: rotate(90deg);
	opacity: 0.8;
}
.gnb-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: rgba(0,0,0,0.08);
}
.gnb-accordion.open .gnb-accordion-body {
	max-height: 300px;
}
.gnb-accordion-body a {
	display: block;
	padding: 11px 20px 11px 36px;
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	font-size: 14px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}
.gnb-accordion-body a:last-child { border-bottom: none; }
.gnb-accordion-body a:active {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

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 숨기고 nav 바에 브랜드+햄버거 통합 */
	header {
		display: none;
	}

	/* GNB 모바일 전환 */
	.gnb-inner { display: none; }
	.gnb-hamburger { display: block; }
	.gnb-mobile-brand {
		display: block;
		font-size: 18px;
		font-weight: 700;
		padding: 12px 16px;
	}
	.gnb-nav {
		display: flex;
		align-items: center;
		padding: 0;
	}

	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;
	  	min-height: 416px;
	  	width: 100%;
  	}
	.options {
	  min-height: 40px;
	}
.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; /* 레이아웃 안정성 확보 */
	  }

/* 대학교 선택 영역 스타일 */
.university-section {
	margin-top: 30px;
	padding: 20px;
	background-color: #f8f9fa;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.university-section h3 {
	margin: 0 0 20px 0;
	color: #333;
	font-size: 18px;
	text-align: center;
}

.university-selector {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 500px;
	margin: 0 auto;
}

.select-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.select-group label {
	font-weight: bold;
	color: #555;
	font-size: 14px;
	text-align: left;
}

.select-group select {
	padding: 12px;
	font-size: 16px;
	border: 2px solid #ddd;
	border-radius: 8px;
	background-color: white;
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.select-group select:focus {
	outline: none;
	border-color: #0066ff;
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.select-group select:disabled {
	background-color: #f5f5f5;
	color: #999;
	cursor: not-allowed;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
	.university-selector {
		max-width: 100%;
	}
	
	.select-group select {
		font-size: 16px; /* 모바일에서 입력 크기 조정 방지 */
	}
}

/* 오류 메시지 및 새로고침 버튼 스타일 */
.error {
	color: #dc3545;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin: 20px 0 10px 0;
	padding: 15px;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 8px;
}

.refresh-message {
	color: #666;
	font-size: 14px;
	text-align: center;
	margin: 10px 0;
}

.refresh-button {
	background-color: #0066ff;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin: 0 5px;
}

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

.refresh-button:active {
	transform: scale(0.95);
}

/* Google Translate Customization (Option B) */
#google_translate_element { display: none !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; } 
body { top: 0px !important; }

.custom-translate-container {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.15);
	padding: 5px 10px;
	border-radius: 20px;
	z-index: 50;
}
.custom-translate-container select {
	background: transparent;
	border: none;
	color: white;
	font-weight: bold;
	outline: none;
	cursor: pointer;
	font-size: 14px;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 5px;
	padding-left: 5px;
}
.custom-translate-container select option {
	color: black;
}
.globe-icon {
	font-size: 16px;
}

@media (max-width: 768px) {
	.custom-translate-container {
		position: static;
		transform: none;
		margin-left: auto;
		margin-right: 15px;
	}
	.gnb-hamburger { margin-left: 0; }
}