/* ===========================================================================
   티켓타임 디자인 토큰
   ---------------------------------------------------------------------------
   모든 색·반경·간격은 이 블록에서만 정의합니다.
   개별 규칙에 색상값을 직접 쓰지 마십시오. (변경이 한 곳에서 끝나야 합니다)

   브랜드 파랑은 기존 값을 유지합니다. 색을 바꾸면 검색 스니펫·SNS 썸네일과의
   일관성이 깨지고 기존 사용자에게 낯선 사이트가 되기 때문입니다.
   =========================================================================== */
:root[data-theme="light"] {
	color-scheme: light;
}

:root {
	color-scheme: light dark;

	/* --- 브랜드 --- */
	--tt-blue-500: #0066ff;   /* GNB, 강조 */
	--tt-blue-600: #0044cc;   /* 푸터, 버튼 */
	--tt-blue-700: #0038a8;   /* hover */
	--tt-blue-50:  #eef4ff;   /* 연한 배경 */

	/* [중요] 파랑은 용도에 따라 반드시 분리해야 합니다.
	   --tt-blue-600 : 파랑 '배경' 위에 흰 글자를 올리는 용도 (어두워야 함)
	   --tt-blue-text: 밝은/어두운 '표면' 위에 올리는 파랑 '글자' 용도
	   하나로 쓰면 다크모드에서 파랑 글자가 어두운 배경에 묻힙니다.
	   (시계 초 숫자가 2.83:1 까지 떨어지는 문제가 실제로 발생했습니다) */
	--tt-blue-text: #0044cc;  /* 흰 표면 대비 7.78:1 */

	/* --- 중립 (기존 #333/#666/#777/#ccc/#ddd 난립을 5단계로 통일) --- */
	--tt-ink-900: #101828;    /* 제목 */
	--tt-ink-700: #344054;    /* 본문 */
	--tt-ink-500: #667085;    /* 보조 텍스트 */
	--tt-ink-300: #d0d5dd;    /* 경계선 */
	--tt-ink-100: #f2f4f7;    /* 페이지 배경 */
	--tt-surface: #ffffff;    /* 카드 표면 */

	/* --- 의미색 --- */
	/* 의미색은 각자의 배경 토큰 위에서 4.5:1 이상을 만족하는 값만 사용합니다.
	   (#12805c 는 --tt-ok-bg 위에서 4.33:1 로 미달하여 #0f7052 로 조정) */
	--tt-ok:   #0f7052;
	--tt-warn: #b54708;
	--tt-err:  #b42318;
	--tt-ok-bg:   #e6f4ea;
	--tt-warn-bg: #fef7e0;
	--tt-err-bg:  #fce8e6;

	/* --- 포도알 게임 테마 ---
	   게임 아이덴티티인 보라색을 유지하되 다크모드에서도 성립하도록
	   토큰화합니다. 하드코딩으로 두면 어두운 페이지에 밝은 보라 박스가
	   그대로 남아 다크모드가 적용되지 않은 것처럼 보입니다. */
	--tt-grape:      #800080;  /* 버튼 배경 (흰 글자 9.42:1) */
	--tt-grape-deep: #660066;  /* 버튼 hover */
	--tt-grape-text: #800080;  /* 표면 위 보라 글자 (9.42:1) */
	--tt-grape-bg:   #e6cce6;  /* 연보라 배경 */
	--tt-grape-bg-2: #f5f0ff;  /* 그라데이션 밝은 쪽 */
	--tt-grape-ink:  #5a005a;  /* 연보라 배경 위 글자 (8.94:1) */

	/* --- 반경 ---
	   모던 미니멀 개편: 전반적으로 키워 부드러운 인상을 만듭니다.
	   작은 요소(배지·태그)는 8, 입력/버튼은 12, 카드는 18을 씁니다. */
	--tt-r-sm:   8px;
	--tt-r-md:   12px;
	--tt-r-lg:   18px;
	--tt-r-xl:   24px;
	--tt-r-full: 999px;

	/* --- 간격 (4px 스케일) --- */
	--tt-s1: 4px;  --tt-s2: 8px;  --tt-s3: 12px;
	--tt-s4: 16px; --tt-s5: 24px; --tt-s6: 32px; --tt-s7: 48px;
	--tt-s8: 64px; --tt-s9: 96px;

	/* --- 레이아웃 ---
	   본문 폭을 넓혀 여백 리듬을 확보합니다. (800 -> 1040) */
	--tt-w-page:   1040px;
	--tt-w-text:   760px;   /* 긴 글은 가독성을 위해 좁게 */
	--tt-nav-h:    64px;

	/* --- 그림자 ---
	   단일 그림자 대신 2겹을 겹쳐 더 자연스러운 깊이를 만듭니다. */
	--tt-sh-sm: 0 1px 2px rgba(16, 24, 40, .04),
	            0 1px 3px rgba(16, 24, 40, .06);
	--tt-sh-md: 0 2px 4px rgba(16, 24, 40, .04),
	            0 8px 20px rgba(16, 24, 40, .07);
	--tt-sh-lg: 0 4px 8px rgba(16, 24, 40, .04),
	            0 20px 48px rgba(16, 24, 40, .10);
	/* 카드 경계용 미세 테두리 (그림자만으로는 다크에서 형태가 사라집니다) */
	--tt-ring:  inset 0 0 0 1px rgba(16, 24, 40, .06);

	/* --- 타이포 --- */
	/* Pretendard: 한국어 가독성이 시스템 폰트보다 뚜렷하게 좋습니다.
	   로딩 실패나 지연 시에도 어긋나지 않도록 시스템 폰트를 폴백에 둡니다. */
	--tt-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
	           "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	--tt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* (1) 사용자가 명시적으로 선택한 다크 */
:root[data-theme="dark"] {
	/* 토글로 다크를 선택하면 OS 설정과 무관하게 브라우저도 다크 문서로
	   인식해야 폼 컨트롤·스크롤바·UA 기본색이 함께 어두워집니다. */
	color-scheme: dark;

	/* GNB·버튼이 파랑 배경 + 흰 텍스트이므로 대비율 4.5:1 이상을 만족하는
	   값만 사용합니다. (#1f6dff 는 4.48:1 로 미달하여 #1a66f5 로 조정) */
	--tt-blue-500: #1a66f5;   /* 흰 텍스트 대비 4.93:1 */
	--tt-blue-600: #1a56d6;   /* 흰 텍스트 대비 6.28:1 */
	--tt-blue-700: #2a66e8;
	--tt-blue-50:  #101a2e;
	/* 어두운 표면 위 파랑 글자는 밝아야 합니다. (#131823 대비 6.90:1) */
	--tt-blue-text: #6aa1ff;

	--tt-ink-900: #e9edf5;
	--tt-ink-700: #c3cbd9;
	--tt-ink-500: #93a0b4;
	--tt-ink-300: #2f3846;
	--tt-ink-100: #1b2230;
	--tt-surface: #131823;

	--tt-ok:   #4ade9b;
	--tt-warn: #fbbf6b;
	--tt-err:  #ff8b80;

	/* 의미색 배경도 반드시 함께 반전해야 합니다.
	   배경만 밝게 남으면 밝은 글자와 겹쳐 배지가 보이지 않습니다.
	   (정확도 배지·오류 안내가 이 조합을 사용합니다) */
	/* 포도알 테마 다크 변형 (대비율 검증 완료) */
	--tt-grape:      #9b3d9b;  /* 흰 글자 5.94:1 */
	--tt-grape-deep: #8f3a8f;
	--tt-grape-text: #d9a6d9;  /* 어두운 표면 위 8.80:1 */
	--tt-grape-bg:   #2a1533;
	--tt-grape-bg-2: #241029;
	--tt-grape-ink:  #e9edf5;  /* 어두운 보라 배경 위 14.28:1 */

	--tt-ok-bg:   #10291f;
	--tt-warn-bg: #2e2410;
	--tt-err-bg:  #2e1512;

	--tt-sh-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
	--tt-sh-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45);
	--tt-sh-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .55);
	--tt-ring:  inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* (2) JS 미동작 환경 폴백: 시스템 설정을 따릅니다 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		/* GNB·버튼이 파랑 배경 + 흰 텍스트이므로 대비율 4.5:1 이상을 만족하는
		   값만 사용합니다. (#1f6dff 는 4.48:1 로 미달하여 #1a66f5 로 조정) */
		--tt-blue-500: #1a66f5;   /* 흰 텍스트 대비 4.93:1 */
		--tt-blue-600: #1a56d6;   /* 흰 텍스트 대비 6.28:1 */
		--tt-blue-700: #2a66e8;
		--tt-blue-50:  #101a2e;
		/* 어두운 표면 위 파랑 글자는 밝아야 합니다. (#131823 대비 6.90:1) */
		--tt-blue-text: #6aa1ff;

		--tt-ink-900: #e9edf5;
		--tt-ink-700: #c3cbd9;
		--tt-ink-500: #93a0b4;
		--tt-ink-300: #2f3846;
		--tt-ink-100: #1b2230;
		--tt-surface: #131823;

		--tt-ok:   #4ade9b;
		--tt-warn: #fbbf6b;
		--tt-err:  #ff8b80;

		/* 의미색 배경도 반드시 함께 반전해야 합니다.
		   배경만 밝게 남으면 밝은 글자와 겹쳐 배지가 보이지 않습니다.
		   (정확도 배지·오류 안내가 이 조합을 사용합니다) */
		/* 포도알 테마 다크 변형 (대비율 검증 완료) */
		--tt-grape:      #9b3d9b;  /* 흰 글자 5.94:1 */
		--tt-grape-deep: #8f3a8f;
		--tt-grape-text: #d9a6d9;  /* 어두운 표면 위 8.80:1 */
		--tt-grape-bg:   #2a1533;
		--tt-grape-bg-2: #241029;
		--tt-grape-ink:  #e9edf5;  /* 어두운 보라 배경 위 14.28:1 */

		--tt-ok-bg:   #10291f;
		--tt-warn-bg: #2e2410;
		--tt-err-bg:  #2e1512;

		--tt-sh-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
		--tt-sh-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45);
		--tt-sh-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .55);
		--tt-ring:  inset 0 0 0 1px rgba(255, 255, 255, .07);
	}
}

.mobile-only {
	display: none !important;
}

body {
	font-family: var(--tt-font);
	margin: 0;
	padding: 0;
	background-color: var(--tt-ink-100);
	/* [필수] 기본 글자색을 반드시 지정해야 합니다.
	   이 선언이 없으면 색을 명시하지 않은 요소(h1~h6, p, li, td 등)가
	   브라우저 기본값(검정)을 쓰게 되어 다크모드에서 글자가 보이지 않습니다. */
	color: var(--tt-ink-700);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 제목은 본문보다 진하게. 색을 지정하지 않으면 body 를 상속해
   다크모드에서 브라우저 기본 검정이 적용됩니다. */
h1, h2, h3, h4, h5, h6 {
	color: var(--tt-ink-900);
	line-height: 1.35;
	letter-spacing: -0.02em;   /* 한글은 살짝 좁혀야 덩어리감이 좋아집니다 */
	font-weight: 700;
	margin-top: 0;
}

h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin-bottom: var(--tt-s4); }
/* 홈(index.php) 전용: H1 텍스트/의미는 그대로 두고 시각적 크기만 줄여 공간을 절약합니다.
   (텍스트 변경 없음 → SEO 영향 없음) */
#home-container h1 { font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.4rem); margin-bottom: var(--tt-s2); line-height: 1.35; }
h2 { font-size: clamp(1.2rem, 1.0rem + 0.8vw, 1.5rem);  margin-bottom: var(--tt-s3); }
h3 { font-size: 1.06rem; margin-bottom: var(--tt-s2); }
.container {
	display: flex;
	flex-direction: column; /* 구글 자동 광고 삽입 시 레이아웃 깨짐(좌우로 밀림) 방지 */
	align-items: center;
	width: 100%;
	max-width: var(--tt-w-page);
	margin: 0 auto;
	padding: 0 var(--tt-s5);
	box-sizing: border-box;
}

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

.main-content {
	flex-grow: 1;
	width: 100%;
	max-width: var(--tt-w-page);
	padding: var(--tt-s6) 0 var(--tt-s7);
	box-sizing: border-box;
	text-align: center;
}

/* SEO 및 스크린 리더용 숨김 클래스 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ===== GNB 네비게이션 =====
   개편: 56px -> 64px, 스크롤해도 따라오는 반투명 고정 헤더.
   서버시간을 보면서 다른 도구로 이동하는 흐름이 잦아 상단 고정이 유용합니다.
   backdrop-filter 미지원 브라우저에서는 불투명 배경으로 자연스럽게 폴백됩니다. */
.gnb-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 52px;
	background-color: var(--tt-blue-500);
	padding: 0 var(--tt-s5);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
	.gnb-nav {
		background-color: color-mix(in srgb, var(--tt-blue-500) 88%, transparent);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		backdrop-filter: saturate(180%) blur(14px);
	}
}
.gnb-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--tt-w-page);
	margin: 0 auto;
	height: var(--tt-nav-h);
	gap: var(--tt-s3);
}
.gnb-brand a {
	color: white;
	text-decoration: none;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.5px;
}
.gnb-inner {
	display: flex;
	align-items: center;
	margin-left: 30px;
	margin-right: auto; /* 메뉴를 로고 옆에 가깝게 붙이고 다국어는 맨 우측으로 가도록 */
}

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

/* 메뉴 항목을 알약 형태로 다듬어 클릭 영역을 시각적으로 분명히 합니다 */
.gnb-direct > a,
.gnb-more > a {
	border-radius: var(--tt-r-md);
	margin: 0 2px;
	height: calc(var(--tt-nav-h) - 16px);
	transition: background-color .15s ease;
}

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

/* 더보기 드롭다운 */
.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: 0 16px;
	height: var(--tt-nav-h);
	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);
}

/* 드롭다운 패널 */
/* 드롭다운
   ---------------------------------------------------------------------------
   [구조] 항목이 19개라 1열로 두면 879px 가 되어 세로 900px 이하 화면에서
   아래가 잘렸습니다. 3열로 나눠 높이를 1/3 수준으로 줄입니다.
   화면 오른쪽으로 넘치지 않도록 left 대신 right 기준으로 붙입니다. */
.gnb-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	/* margin-top 을 두면 트리거와 드롭다운 사이에 마우스 오버가 끊기는
	   빈틈(dead zone)이 생겨, 아래로 이동하다 메뉴가 닫혀버립니다.
	   간격을 없애 hover 가 끊기지 않게 합니다 (시각적 여백은 box-shadow로 충분). */
	margin-top: 0;
	box-shadow: var(--tt-sh-lg), var(--tt-ring);
	z-index: 100;
	padding: var(--tt-s3) var(--tt-s2);
	/* 좁은 창에서는 열 수가 자동으로 줄어듭니다. */
	max-width: min(760px, calc(100vw - 32px));
}

.gnb-more:hover .gnb-dropdown,
.gnb-more:focus-within .gnb-dropdown {
	display: grid;
	grid-template-columns: repeat(3, minmax(168px, 1fr));
	gap: 0 var(--tt-s2);
	align-items: start;
}

/* 열 사이 구분선: 그룹 경계를 눈으로 잡아 줍니다. */
.gnb-dd-col + .gnb-dd-col {
	border-left: 1px solid var(--tt-ink-300);
	padding-left: var(--tt-s2);
}

/* [주의] 2열로 떨어뜨리면 오히려 세로가 638px 로 늘어 짧은 화면에서 잘립니다.
   3열 폭은 476px 뿐이고 데스크톱 메뉴는 769px 이상에서만 보이므로 3열을 유지합니다.

   그래도 세로가 매우 짧은 화면(노트북 700px 등)이 있으므로,
   화면을 넘기면 드롭다운 안에서만 스크롤되게 해 항목이 잘려 사라지지 않도록 합니다. */
.gnb-more:hover .gnb-dropdown,
.gnb-more:focus-within .gnb-dropdown {
	max-height: calc(100vh - var(--tt-nav-h) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.gnb-dropdown-title {
	padding: 10px 18px 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--tt-blue-600);
	letter-spacing: 0.5px;
	border-top: 1px solid var(--tt-ink-100);
}
.gnb-dropdown-title:first-child {
	border-top: none;
}
.gnb-dropdown a {
	display: block;
	padding: 9px 18px 9px 28px;
	color: var(--tt-ink-900);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.12s;
}
.gnb-dropdown a:hover {
	background: var(--tt-blue-50);
	color: var(--tt-blue-600);
}
.gnb-badge-external {
	font-size: 10px;
	color: var(--tt-ink-500);
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-sm);
	padding: 1px 5px;
	margin-left: 6px;
}

/* 모바일 요소 (데스크톱에서 숨김) */
.gnb-hamburger {
	display: none;
	background: none;
	border: none;
	color: white;
	font-size: 26px;
	cursor: pointer;
	padding: 8px;
}
.gnb-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.gnb-mobile-menu {
	display: none;
	background: var(--tt-blue-500);
	position: relative;
	z-index: 110;
}
.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: 450px;
}
.gnb-accordion-body a {
	display: flex;
	align-items: center;
	padding: 14px 20px 14px 36px; /* UX: 11px→14px 터치 타겟 확대 */
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	font-size: 14px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	min-height: 48px; /* UX: 터치 타겟 최소 높이 보장 */
	box-sizing: border-box;
}
.gnb-accordion-body a:last-child { border-bottom: none; }
.gnb-accordion-body a:active {
	background: rgba(255,255,255,0.1);
	color: var(--tt-surface);
}

/* ---------------------------------------------------------------------------
   카드 표면
   ---------------------------------------------------------------------------
   개편 전에는 padding 10px / radius 10px 로 답답했습니다.
   여백을 키우고 라운드를 늘려 콘텐츠가 숨 쉬게 합니다.
   그림자만 쓰면 다크모드에서 카드 경계가 사라지므로 미세 링을 함께 씁니다.
   --------------------------------------------------------------------------- */
section {
	width: 100%;
	max-width: var(--tt-w-page);
	margin: var(--tt-s5) auto;
	padding: var(--tt-s6) var(--tt-s5);
	background-color: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	box-sizing: border-box;
}

footer {
	text-align: center;
	padding: 10px 0;
	background-color: var(--tt-blue-600);
	color: white;
	margin-top: 20px;
}

/* ===========================================================================
   서버시간 확인 입력 폼
   ---------------------------------------------------------------------------
   [수정] 입력창에 flex 속성이 걸려 있었지만 부모(<form>)가 flex 컨테이너가
   아니어서 전혀 적용되지 않았습니다. 그 결과 944px 폭 안에서 입력창이
   브라우저 기본 크기(약 205px, 화면의 16%)로만 표시되고 있었습니다.
   도메인을 입력하면 뒷부분이 보이지 않아 확인이 어려웠습니다.
   =========================================================================== */
.form-container form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	justify-content: center;
	max-width: 720px;
	margin: 0 auto;
}

.form-container input {
	flex: 1 1 320px;
	min-width: 0;
	padding: 16px 18px;
	font-size: 1.05rem;
	font-family: inherit;
	color: var(--tt-ink-900);
	background: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.form-container input::placeholder { color: var(--tt-ink-500); }

.form-container input:focus {
	outline: none;
	border-color: var(--tt-blue-500);
	/* 포커스를 테두리 색만으로 알리면 약해서 링을 함께 씁니다 */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-blue-500) 22%, transparent);
}

.form-container button {
	flex: 0 0 auto;
	padding: 16px 28px;
	font-size: 1.05rem;
	font-family: inherit;
	font-weight: 700;
	color: white;
	background: var(--tt-blue-500);
	border: none;
	border-radius: var(--tt-r-md);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, transform .12s ease;
}

.form-container button:active { transform: translateY(1px); }

.form-container button:hover {
	background-color: var(--tt-blue-600);
}

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

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

/* 버튼 스타일 */
.question-button {
	background: none;
	border: none;
	padding: 10px; /* UX: 터치 영역 확보 (24+20=44px) */
	margin: 0 0 0 2px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.2s;
}
.question-button:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
/* 아이콘 이미지 스타일 */
.question-icon {
	width: 24px; /* 아이콘 크기 */
	height: 24px;
	vertical-align: middle; /* 텍스트와 아이콘의 세로 중심 맞추기 */
	margin-left: 0;
}

.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: var(--tt-ink-300);
	transition: 0.4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	/* 컬러 트랙 위 손잡이라 다크모드에서도 흰색을 유지합니다 */
	background-color: #ffffff;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: var(--tt-blue-500);
}

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: var(--tt-ink-300);
	margin: 0 auto;
}

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

#quickLinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-s2);
	margin-top: var(--tt-s4);
}

.quickLink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	font-size: .88rem;
	font-family: inherit;
	font-weight: 600;
	color: var(--tt-ink-700);
	background: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-full);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, transform .12s ease;
}

.quickLink:active { transform: translateY(1px); }

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

.quickLink:hover {
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

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

	/* 홈 전용: 플랫폼 버튼이 2줄로 넘치던 것을, 좌우로 미는 가로 스크롤 1줄로 바꿉니다.
	   버튼/링크는 모두 그대로 DOM에 남아있어 검색엔진 색인에는 영향이 없습니다. */
	#home-container #quickLinks {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 4px;
	}
	#home-container .quickLink {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.quickLink {
		flex-direction: column; /* 아이콘과 텍스트 세로 정렬 */
		padding: 12px; /* UX: 터치 영역 확보 (16+24=40px, min으로 44px 보장) */
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		align-items: center;
	}

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

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


.details-section {
	display: none;
	margin: 0 auto;
	margin-top: -20px;
	margin-bottom: 10px;
	padding: 10px 15px;
	background-color: var(--tt-ink-100);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-sm);
	font-size: 12px;
	color: var(--tt-ink-900);
	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) {
	#btn-floating-clock {
		display: none !important;
	}
	.desktop-only {
		display: none !important;
	}
	.mobile-only {
		display: flex !important;
	}
	.gnb-mobile-translate-wrapper {
		padding: 12px 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		display: flex;
		justify-content: center;
		background: rgba(0, 0, 0, 0.08);
	}
	.gnb-mobile-translate-wrapper .custom-translate-container {
		position: relative;
		margin: 0;
		background: rgba(255, 255, 255, 0.12);
	}
	.container {
		flex-direction: column;
		align-items: center;
	}
	.main-content {
		width: 100%;
		max-width: 600px;
	}
	
	body {
		font-size: 14px;
	}
	
	/* GNB 모바일 전환 */
	.gnb-nav {
		padding: 0 10px;
	}
	.gnb-container {
		height: 50px; /* 모바일 슬림형 높이 */
	}
	.gnb-brand a {
		font-size: 18px;
	}
	.gnb-inner { display: none; }
	.gnb-hamburger { display: block; }

	section {
		padding: 15px;
	}
	
	/* 모바일: 입력창과 버튼을 위아래로 나눠 입력창이 가로를 다 쓰게 합니다.
	   한 줄에 같이 두면 버튼이 130px 을 가져가 입력창이 좁아집니다. */
	.form-container form { gap: 8px; }

	.form-container input {
		flex: 1 1 100%;
		width: 100%;
		font-size: 17px; /* UX: iOS 자동 줌 방지(16px 이상) + 가독성 */
		padding: 15px 16px;
		min-height: 54px; /* UX: 터치 타겟 */
		box-sizing: border-box;
	}

	.form-container button {
		flex: 1 1 100%;
		width: 100%;
		font-size: 17px; /* UX: iOS 자동 줌 방지 */
		font-weight: 700;
		padding: 15px 20px;
		min-height: 54px; /* UX: 터치 타겟 */
		border-radius: var(--tt-r-md);
		letter-spacing: 0.5px;
	}

	.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: var(--tt-ink-900); /* 색상 */
	margin-top:-30px;
	margin-bottom: 10px; /* 시간과 간격 추가 */
}

/* ---------------------------------------------------------------------------
   서버시간 시각 계층
   ---------------------------------------------------------------------------
   티켓팅에서 결정적인 정보는 '초'입니다. 날짜는 보조, 시:분은 중간,
   초는 최대 크기로 두어 시선이 초에 고정되도록 합니다.

   숫자 폭이 매 프레임 흔들리면 눈이 피로하므로 tabular-nums(고정폭 숫자)를
   반드시 적용합니다. 이게 없으면 1과 8의 폭이 달라 시계가 떨립니다.
   --------------------------------------------------------------------------- */
.server-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tt-s1);
	color: var(--tt-ink-900);
	margin: var(--tt-s3) 0;
}

.tt-clock-date {
	font-size: .95rem;
	font-weight: 600;
	color: var(--tt-ink-500);
	letter-spacing: -0.01em;
}

.tt-clock-main {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--tt-font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	line-height: 1;
}

.tt-clock-hm {
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.tt-clock-colon {
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--tt-ink-500);
	margin: 0 2px;
}

/* 초: 화면에서 가장 큰 요소 */
.tt-clock-sec {
	font-size: 4.2rem;
	font-weight: 800;
	color: var(--tt-blue-text);
	letter-spacing: -0.03em;
	transition: color .15s;
}

/* 정각 직전(55초~) 강조 - 클릭 준비 신호 */
.tt-clock-sec.is-near {
	color: var(--tt-err);
}

@media (max-width: 480px) {
	.tt-clock-hm    { font-size: 2.2rem; }
	.tt-clock-colon { font-size: 1.9rem; }
	.tt-clock-sec   { font-size: 3rem; }
	.tt-clock-date  { font-size: .84rem; }
}

/* 동작 최소화를 선호하는 사용자에게는 색 전환을 끕니다 */
@media (prefers-reduced-motion: reduce) {
	.tt-clock-sec { transition: none; }
}

  /* 캘린더 스타일 높이 잘림 방지 (Google Calendar 시각화 보장) */
  #calendar-container {
	width: 100%;
	max-width: var(--tt-w-page);
	margin: 20px auto;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tt-surface);
	min-height: 780px;
  }
  #calendar-container iframe,
  #calendar-container iframe[src*="google"] {
	width: 100% !important;
	height: 780px !important;
	min-height: 780px !important;
	max-height: none !important;
	display: block !important;
	border: 0 !important;
  }

  /* 모바일 화면에 맞게 조정 (높이 600px로 콤팩트화) */
  @media (max-width: 768px) {
	#calendar-container {
	  min-height: 600px !important;
	  margin: 10px auto 20px !important;
	}
	#calendar-container iframe,
	#calendar-container iframe[src*="google"] {
	  width: 100% !important;
	  height: 600px !important;
	  min-height: 600px !important;
	}
  }
  
@keyframes blink {
	  0%, 100% {
		  background-color: var(--tt-err); /* 빨간색 */
	  }
	  50% {
		  background-color: var(--tt-surface); /* 흰색 */
	  }
  }
  
  body.blinking {
	  animation: blink 0.5s step-end infinite;
  }

.captcha-buttons {
	  display: flex;
	  justify-content: center;
	  gap: 10px;
	  margin-top: 10px;
  }
  
  /* [정리] 이 규칙이 .tt-btn 보다 우선순위가 높아 공통 버튼 스타일을 덮고 있었습니다.
     (모서리 8px, 보조 버튼까지 파랗게) 배치만 담당하고 색·모양은 .tt-btn 에 맡깁니다. */
  .captcha-buttons {
	  display: flex;
	  gap: var(--tt-s2);
	  justify-content: center;
	  flex-wrap: wrap;
  }
  
  .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: var(--tt-ink-900);
	  margin-bottom: 10px;
  }
  
  .server-time {
	  font-size: 40px;
	  font-weight: bold;
	  color: var(--tt-blue-500); /* 파란색 */
	  margin: 10px auto;
  }
  
  .formatted-time {
	  font-family: 'JetBrains Mono', monospace;
	  font-weight: 700;
	  font-size: 40px;
	  color: var(--tt-blue-500); /* 파란색 */
  }
  
  .formatted-milliseconds {
	font-family: var(--tt-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--tt-ink-500);
	margin-left: 2px;
}
  
  .server-host {
	  font-size: 20px;
	  color: var(--tt-blue-600); /* UX: 시간 표시와 차별화된 파란색 */
	  text-decoration: underline;
	  text-underline-offset: 3px;
	  transition: color 0.2s;
  }
  .server-host:hover {
	  color: var(--tt-blue-700);
  }
		.telegram-button {
	  display: inline-block;
	  background-color: var(--tt-blue-500);
	  color: var(--tt-surface);
	  padding: 10px 20px;
	  border-radius: var(--tt-r-sm);
	  text-decoration: none;
	  font-size: 16px;
	  font-weight: bold;
	  margin-top: 15px;
	  transition: background-color 0.3s ease;
  }
  
  .telegram-button:hover {
	  background-color: var(--tt-blue-700);
  }
  
.schedule-item {
	  margin-bottom: 10px; /* 항목 간 간격 줄이기 */
	  padding: 10px; /* 내부 여백 줄이기 */
	  background-color: var(--tt-ink-100);
	  border: 1px solid var(--tt-ink-300);
	  border-radius: var(--tt-r-sm);
	  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: var(--tt-ink-900);
  }
  
  .schedule-item p {
	  margin: 3px 0; /* 텍스트 간격 줄이기 */
	  font-size: 14px; /* 폰트 크기 줄이기 */
	  color: var(--tt-ink-500);
  }
  
  .schedule-item button {
	  margin-top: 5px; /* 버튼과 텍스트 간격 줄이기 */
	  padding: 8px 15px; /* 버튼 크기 축소 */
	  background-color: var(--tt-blue-500);
	  color: white;
	  border: none;
	  border-radius: var(--tt-r-sm);
	  font-size: 14px; /* 버튼 글꼴 크기 줄이기 */
	  cursor: pointer;
  }
  
  .schedule-item button:hover {
	  background-color: var(--tt-blue-600);
  }
  
  /* 전체 레이아웃 조정 */
  #schedule-list {
	  display: flex;
	  flex-direction: column;
	  gap: 10px; /* 각 일정 항목 간격 */
  }
.idol-item {
	  margin-bottom: 10px;
	  padding: 10px;
	  background-color: var(--tt-ink-100);
	  border: 1px solid var(--tt-ink-300);
	  border-radius: var(--tt-r-sm);
	  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .idol-item h3 {
	  margin: 0 0 5px;
	  font-size: 18px;
	  color: var(--tt-ink-900);
  }
  
  .idol-item p {
	  margin: 5px 0;
	  font-size: 14px;
	  color: var(--tt-ink-500);
  }
  
  .idol-item button {
	  padding: 8px 15px;
	  background-color: var(--tt-blue-500);
	  color: white;
	  border: none;
	  border-radius: var(--tt-r-sm);
	  font-size: 14px;
	  cursor: pointer;
  }
  
  .idol-item button:hover {
	  background-color: var(--tt-blue-600);
  }
  
/* 체크박스와 라벨을 감싸는 컨테이너 */
  .checkbox-container {
	  display: flex;
	  justify-content: center; /* 수평 가운데 정렬 */
	  align-items: center; /* 수직 가운데 정렬 */
	  gap: 15px; /* 체크박스 간 간격 */
	  margin-top: 10px; /* 상단 여백 */
  }
  /* UX: 체크박스 라벨 터치 영역 확보 */
  .checkbox-container label {
	  display: inline-flex;
	  align-items: center;
	  gap: 6px;
	  padding: 8px 4px;
	  cursor: pointer;
	  -webkit-tap-highlight-color: rgba(0, 102, 255, 0.1);
  }
  
  /* 체크박스 크기 조정 */
  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 var(--tt-ink-300);
  }
	.adsense-block {
	  	display: block;
	  	min-height: 416px;
	  	width: 100%;
  	}
	.options {
	  min-height: 40px;
	}

	/* 홈 전용: "정확한 서버시간 확인" 제목과 밀리초/날짜 체크박스를 한 줄로 묶어
	   세로 한 줄을 절약합니다. 다른 페이지(ping.php 등)는 기존 세로 배치 그대로입니다. */
	#home-container .server-time-heading-row {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--tt-s3);
	}
	#home-container .server-time-heading-row h2 {
		margin-bottom: 0;
	}
	#home-container .server-time-heading-row .options {
		min-height: auto;
	}
.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: var(--tt-ink-900);
		  background-color: var(--tt-ink-100);
		  border-radius: var(--tt-r-md);
		  min-height: 60px; /* 레이아웃 안정성 확보 */
	  }

/* 대학교 선택 영역 스타일 */
.university-section {
	margin-top: 30px;
	padding: 20px;
	background-color: var(--tt-ink-100);
	border-radius: var(--tt-r-md);
	border: 1px solid var(--tt-ink-300);
}

.university-section h3 {
	margin: 0 0 20px 0;
	color: var(--tt-ink-900);
	font-size: 18px;
	text-align: center;
}

.university-selector {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	max-width: 500px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
	pointer-events: auto !important;
}

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

.select-group label {
	font-weight: bold;
	color: var(--tt-ink-700);
	font-size: 14px;
	text-align: left;
}

.select-group select {
	padding: 12px;
	font-size: 16px;
	border: 2px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	background-color: var(--tt-surface);
	cursor: pointer;
	transition: border-color 0.3s ease;
	pointer-events: auto !important;
}

.select-group select:focus {
	outline: none;
	border-color: var(--tt-blue-500);
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.select-group select:disabled {
	background-color: var(--tt-ink-100);
	color: var(--tt-ink-500);
	cursor: not-allowed;
}

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

/* 오류 메시지 및 새로고침 버튼 스타일 */
.error {
	color: var(--tt-err);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin: 20px 0 10px 0;
	padding: 15px;
	background-color: var(--tt-err-bg);
	border: 1px solid var(--tt-err-bg);
	border-radius: var(--tt-r-md);
}

.refresh-message {
	color: var(--tt-ink-500);
	font-size: 14px;
	text-align: center;
	margin: 10px 0;
}

.refresh-button {
	background-color: var(--tt-blue-500);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: var(--tt-r-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin: 0 5px;
}

.refresh-button:hover {
	background-color: var(--tt-blue-600);
}

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

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

/* 구글 번역 툴팁 및 피드백 숨기기 */
#goog-gt-tt { display: none !important; }
.goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; border: none !important; }

.custom-translate-container {
	position: relative;
	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: var(--tt-ink-900);
}
.globe-icon {
	font-size: 16px;
}

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

/* Google Auto Ads 최적화: 레이아웃 시프트 및 가독성 저하를 방지하기 위해 서버시간 영역 내 광고 강제 삽입 방지 */
.server-time-container,
#server-time {
	google-auto-ads: ignore;
}

/* 플로팅 시계 (PiP) 버튼 스타일 */
#btn-floating-clock {
	padding: 10px 20px;
	font-size: 15px;
	font-weight: bold;
	background-color: var(--tt-blue-500);
	color: white;
	border: none;
	border-radius: var(--tt-r-sm);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
	display: inline-block;
}
#btn-floating-clock:hover {
	background-color: var(--tt-blue-600);
	transform: translateY(-1px);
}
#btn-floating-clock.active {
	background-color: var(--tt-err) !important;
}
#btn-floating-clock.active:hover {
	background-color: var(--tt-err) !important;
}
.hidden {
	display: none !important;
}

/* 대시보드 탭 및 콘텐츠 스타일 */
.dashboard-section {
	max-width: var(--tt-w-page);
	margin: 20px auto;
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	overflow: visible;
	border: 1px solid var(--tt-ink-300);
}
.dashboard-tabs {
	display: flex;
	background: var(--tt-ink-100);
	border-bottom: 1px solid var(--tt-ink-300);
	border-top-left-radius: 11px;
	border-top-right-radius: 11px;
}
.tab-btn:first-child {
	border-top-left-radius: 11px;
}
.tab-btn:last-child {
	border-top-right-radius: 11px;
}
.tab-btn {
	flex: 1;
	padding: 14px 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--tt-ink-700);
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
	border-bottom: 2px solid transparent;
	text-align: center;
}
.tab-btn:hover {
	background-color: var(--tt-ink-300);
	color: var(--tt-ink-900);
}
.tab-btn.active {
	background-color: var(--tt-surface);
	color: var(--tt-blue-500);
	border-bottom: 2px solid var(--tt-blue-500);
}
.dashboard-content-container {
	padding: 24px;
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
	animation: fadeInDashboard 0.25s ease-in-out;
}
@keyframes fadeInDashboard {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.tab-subheading {
	font-size: 18px;
	font-weight: 700;
	color: var(--tt-ink-900);
	margin-bottom: 8px;
}
.tab-instruction {
	font-size: 14px;
	color: var(--tt-ink-500);
	line-height: 1.5;
}
.tab-inner-box {
	padding: 10px;
}

/* 연습 게임 그리드 배치 */
.games-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 480px) {
	.games-grid {
		grid-template-columns: 1fr;
	}
}
.game-card {
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: var(--tt-ink-100);
	border: 1px solid var(--tt-ink-100);
	border-radius: var(--tt-r-md);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	text-align: left;
}
.game-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 102, 255, 0.08);
	border-color: var(--tt-ink-300);
}
/* UX: 모바일 터치 시 시각적 피드백 */
.game-card:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 102, 255, 0.12);
}
.game-icon {
	font-size: 28px;
	margin-bottom: 10px;
}
.game-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--tt-ink-900);
	margin-bottom: 6px;
}
.game-desc {
	font-size: 13px;
	color: var(--tt-ink-500);
	line-height: 1.4;
	margin-bottom: 12px;
	flex-grow: 1;
}
.game-btn {
	display: inline-block;
	align-self: flex-start;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: bold;
	color: var(--tt-blue-600);
	background: var(--tt-blue-50);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-sm);
	transition: background-color 0.15s, color 0.15s;
}
.game-card:hover .game-btn {
	background-color: var(--tt-blue-500);
	color: var(--tt-surface);
}

/* 구글 번역기 관련 모든 동적 오버레이/프레임의 터치 가로챔 완벽 방지 */
[class*="goog-te"],
[id*="goog-gt"],
.goog-te-spinner-pos,
iframe[class*="goog"] {
	pointer-events: none !important;
}
/* 단, 구글 번역 셀렉터 및 위젯 내부의 실제 클릭이 필요한 링크 등은 터치 허용 */
.custom-translate-container,
.custom-translate-container select,
.goog-te-menu-value,
.goog-te-menu-value * {
	pointer-events: auto !important;
}


/* UX: FAQ/details 내부 링크 식별성 향상 */
details a {
	color: var(--tt-blue-500);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}
details a:hover {
	color: var(--tt-blue-600);
}

/* UX: 예매처 바로가기 링크 스타일 (인라인 스타일 대체) */
.platform-seo-links a {
	padding: 8px 12px;
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-sm);
	text-decoration: none;
	color: var(--tt-ink-900);
	font-size: 14px;
	font-weight: bold;
	border: 1px solid var(--tt-ink-300);
	transition: all 0.2s;
	display: inline-block;
}
.platform-seo-links a:hover {
	background: var(--tt-ink-300);
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-600);
	transform: translateY(-1px);
}
.platform-seo-links a:active {
	transform: translateY(0);
}

/* UX: 대시보드 탭 모바일 최소 크기 */
@media (max-width: 480px) {
	.tab-btn {
		padding: 12px 6px;
		font-size: 13px;
		min-height: 48px;
		line-height: 1.3;
	}
	.dashboard-tabs {
		gap: 1px;
	}
}

/* 게임 카드 및 추천 카드, 퀵링크, 탭 버튼 내부 요소들이 터치를 낚아채서 모바일 동작을 방해하는 버그 해결 */
.game-card *,
.recommend-card *,
.quickLink *,
.tab-btn * {
	pointer-events: none !important;
}

/* 커스텀 셀렉트 박스 스타일 */
.custom-select-container {
	position: relative;
	width: 280px;
	max-width: 100%;
	font-family: inherit;
	user-select: none;
	display: inline-block;
	text-align: left;
}

.custom-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	font-size: 15px;
	border: 2px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	background-color: var(--tt-surface);
	color: var(--tt-ink-700);
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	font-weight: 500;
}

.custom-select-trigger:hover {
	border-color: var(--tt-ink-300);
	background-color: var(--tt-ink-100);
}

.custom-select-container.open .custom-select-trigger {
	border-color: var(--tt-blue-500);
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
	background-color: var(--tt-surface);
}

/* 화살표 아이콘 */
.custom-select-trigger::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 12px;
	border-right: 2px solid var(--tt-ink-500);
	border-bottom: 2px solid var(--tt-ink-500);
	transform: rotate(45deg);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.custom-select-container.open .custom-select-trigger::after {
	transform: rotate(-135deg);
	border-color: var(--tt-blue-500);
}

/* 옵션 컨테이너 */
.custom-select-options {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: 250px;
	overflow-y: auto;
	background-color: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-select-container.open .custom-select-options {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 개별 옵션 */
.custom-select-option {
	padding: 10px 16px;
	font-size: 14px;
	color: var(--tt-ink-700);
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: left;
}

.custom-select-option:hover {
	background-color: var(--tt-ink-100);
	color: var(--tt-ink-900);
}

.custom-select-option.selected {
	background-color: var(--tt-blue-50);
	color: var(--tt-blue-500);
	font-weight: 600;
}

/* 비활성화 상태 */
.custom-select-container.disabled .custom-select-trigger {
	background-color: var(--tt-ink-100);
	border-color: var(--tt-ink-300);
	color: var(--tt-ink-500);
	cursor: not-allowed;
	box-shadow: none;
}

.custom-select-container.disabled .custom-select-trigger::after {
	border-color: var(--tt-ink-300);
}

.custom-select-container.disabled .custom-select-options {
	display: none !important;
}

/* 네이티브 셀렉트 숨김 처리 */
.select-group select.hidden-native-select {
	display: none !important;
}



/* ===========================================================================
   서버시간 동기화 정확도 배지
   초 경계 감지 + 왕복 지연 보정의 실측 오차를 사용자에게 그대로 노출합니다.
   =========================================================================== */
.accuracy-badge-wrap {
	text-align: center;
	min-height: 26px;
	margin: 4px auto 10px;
}

.accuracy-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--tt-r-full);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.5;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}

.accuracy-badge:empty {
	display: none;
}

.accuracy-badge::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	vertical-align: middle;
	background-color: currentColor;
}

.accuracy-good {
	background-color: var(--tt-ok-bg);
	color: var(--tt-ok);
}

.accuracy-fair {
	background-color: var(--tt-warn-bg);
	color: var(--tt-warn);
}

.accuracy-poor {
	background-color: var(--tt-err-bg);
	color: var(--tt-err);
	white-space: normal;
}

@media (max-width: 480px) {
	.accuracy-badge {
		font-size: 0.72rem;
		padding: 4px 10px;
	}
}

/* ===========================================================================
   대학교 수강신청 허브 (sugang.php)
   =========================================================================== */
.sugang-hero {
	text-align: center;
	padding: 24px 16px 8px;
}

.sugang-lead {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--tt-ink-700);
	margin: 12px auto 20px;
	max-width: 640px;
}

.sugang-search-box {
	max-width: 480px;
	margin: 0 auto;
}

.sugang-search-box input[type="search"] {
	width: 100%;
	padding: 14px 16px;
	font-size: 1rem;
	border: 2px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.sugang-search-box input[type="search"]:focus {
	outline: none;
	border-color: var(--tt-blue-600);
}

.sugang-hint {
	font-size: 0.82rem;
	color: var(--tt-ink-500);
	margin: 8px 0 0;
}

/* --- 준비 도구 카드 --- */
.sugang-tools {
	margin: 32px auto;
}

.sugang-tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.sugang-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 18px 12px;
	background: var(--tt-ink-100);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-lg);
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.sugang-tool:hover,
.sugang-tool:focus-visible {
	transform: translateY(-2px);
	border-color: var(--tt-blue-600);
	box-shadow: 0 4px 12px rgba(0, 68, 204, 0.1);
}

.sugang-tool-icon { font-size: 1.7rem; line-height: 1; }
.sugang-tool-name { font-weight: 700; font-size: 0.95rem; }
.sugang-tool-desc { font-size: 0.78rem; color: var(--tt-ink-500); text-align: center; }

/* --- 지역별 대학 목록 --- */
.sugang-region {
	margin: 26px 0;
}

.sugang-region[hidden] { display: none; }

.sugang-region-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tt-ink-900);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--tt-ink-100);
	display: flex;
	align-items: center;
	gap: 8px;
}

.sugang-region-count {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--tt-ink-500);
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-full);
	padding: 2px 9px;
}

.sugang-univ-grid {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px;
}

.sugang-univ-grid li[hidden] { display: none; }

.sugang-univ-grid a {
	display: block;
	padding: 11px 13px;
	background: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	text-decoration: none;
	color: var(--tt-ink-900);
	font-size: 0.9rem;
	line-height: 1.35;
	transition: background-color 0.15s, border-color 0.15s;
}

.sugang-univ-grid a:hover,
.sugang-univ-grid a:focus-visible {
	background: var(--tt-blue-50);
	border-color: var(--tt-blue-600);
	color: var(--tt-blue-600);
}

.sugang-empty {
	padding: 24px;
	text-align: center;
	color: var(--tt-ink-500);
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-md);
}

/* --- 가이드 --- */
.sugang-guide {
	margin: 36px 0;
	line-height: 1.75;
}

.sugang-guide h2 {
	margin-top: 28px;
}

.sugang-checklist {
	padding-left: 20px;
	margin: 14px 0;
}

.sugang-checklist li {
	margin-bottom: 12px;
	color: var(--tt-ink-900);
}

@media (max-width: 480px) {
	.sugang-univ-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}
	.sugang-tool-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===========================================================================
   광고 슬롯 (ad_slot.php)
   ---------------------------------------------------------------------------
   [정책] 티켓타임은 연속 클릭 게임 사이트입니다. 플레이 영역과 광고가 가까우면
   무효 클릭으로 계정이 정지될 수 있습니다. .tt-ad--safe 는 게임 페이지 전용으로
   상단에 큰 여백을 강제해 물리적으로 분리합니다.

   [CLS] .tt-ad-inner 의 min-height 는 PHP가 인라인으로 넣습니다.
   광고 로드 전에 공간을 확보해 레이아웃 밀림을 방지합니다.
   =========================================================================== */
.tt-ad {
	display: block;
	width: 100%;
	max-width: var(--tt-w-text);
	margin: var(--tt-s6) auto;
	text-align: center;
	/* 광고 영역임을 시각적으로 분리해 콘텐츠와 혼동되지 않게 합니다 */
	padding-top: var(--tt-s2);
	border-top: 1px solid var(--tt-ink-300);
	box-sizing: border-box;
}

/* 바로 아래에 클릭 요소(탭·버튼)가 오는 광고용.
   광고와 내비게이션이 붙어 있으면 오클릭을 유발하므로 하단 여백을 키웁니다.
   (메인의 대시보드 탭이 광고 바로 아래에 있어 이 클래스를 사용합니다) */
.tt-ad--gap-below {
	margin-bottom: var(--tt-s7);
}

@media (max-width: 768px) {
	.tt-ad--gap-below {
		margin-bottom: var(--tt-s6);
	}
}

/* 게임 페이지: 플레이 영역과 충분히 떨어뜨립니다 (무효 클릭 방지) */
.tt-ad--safe {
	margin-top: calc(var(--tt-s7) * 2);   /* 96px 이상 */
	margin-bottom: var(--tt-s6);
}

.tt-ad-label {
	display: block;
	margin-bottom: var(--tt-s2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--tt-ink-500);
	text-transform: none;
}

.tt-ad-inner {
	display: block;
	width: 100%;
	overflow: hidden;   /* 광고가 컨테이너를 넘어 레이아웃을 밀지 않도록 */
}

.tt-ad-inner .adsbygoogle {
	display: block;
	width: 100%;
}

@media (max-width: 768px) {
	.tt-ad {
		margin: var(--tt-s5) auto;
	}
	.tt-ad--safe {
		margin-top: var(--tt-s7);   /* 모바일에서도 48px 이상 확보 */
	}
}

/* ===========================================================================
   테마 토글 버튼 (GNB 우측)
   =========================================================================== */
.gnb-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--tt-r-full);
	cursor: pointer;
	transition: background-color .15s, transform .15s;
	flex-shrink: 0;
}

.gnb-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.26);
}

.gnb-theme-toggle:active {
	transform: scale(.94);
}

/* 키보드 접근성: 파랑 배경 위에서도 보이는 포커스 링 */
.gnb-theme-toggle:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.gnb-theme-icon {
	font-size: 17px;
	line-height: 1;
}

@media (max-width: 768px) {
	.gnb-theme-toggle {
		width: 36px;
		height: 36px;
	}
	.gnb-theme-icon {
		font-size: 16px;
	}
}

/* ===========================================================================
   예매처 서버 시계 오차 리포트 (servertime-report.php)
   =========================================================================== */
.report-tldr {
	margin: var(--tt-s5) auto;
	padding: var(--tt-s4) var(--tt-s5);
	background: var(--tt-blue-50);
	border-left: 4px solid var(--tt-blue-500);
	border-radius: var(--tt-r-md);
	text-align: left;
	line-height: 1.7;
	color: var(--tt-ink-900);
}

.report-tldr p { margin: 0; }

.report-tldr-sub {
	display: block;
	margin-top: var(--tt-s2);
	font-size: .84rem;
	color: var(--tt-ink-500);
	line-height: 1.6;
}

.report-tldr code {
	padding: 1px 5px;
	background: var(--tt-surface);
	border-radius: var(--tt-r-sm);
	font-family: var(--tt-font-mono);
	font-size: .92em;
}

/* 넓은 표는 페이지가 아니라 표 자체가 스크롤되어야 합니다 */
.report-table-wrap {
	overflow-x: auto;
	margin: var(--tt-s4) 0;
	-webkit-overflow-scrolling: touch;
}

.report-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: .92rem;
	text-align: left;
}

.report-table th,
.report-table td {
	padding: var(--tt-s3);
	border-bottom: 1px solid var(--tt-ink-300);
	vertical-align: middle;
}

.report-table thead th {
	background: var(--tt-ink-100);
	color: var(--tt-ink-700);
	font-size: .82rem;
	font-weight: 700;
	white-space: nowrap;
}

.report-table tbody th {
	font-weight: 700;
	color: var(--tt-ink-900);
}

.report-table tbody th a {
	color: var(--tt-blue-600);
	text-decoration: none;
}

.report-table tbody th a:hover { text-decoration: underline; }

.report-host {
	display: block;
	margin-top: 2px;
	font-size: .74rem;
	font-weight: 400;
	color: var(--tt-ink-500);
	font-family: var(--tt-font-mono);
}

.report-offset {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--tt-r-full);
	font-weight: 700;
	font-size: .86rem;
	white-space: nowrap;
}

.report-offset--ok   { background: var(--tt-ok-bg);   color: var(--tt-ok); }
.report-offset--warn { background: var(--tt-warn-bg); color: var(--tt-warn); }
.report-offset--err  { background: var(--tt-err-bg);  color: var(--tt-err); }

.report-num {
	font-family: var(--tt-font-mono);
	font-size: .84rem;
	color: var(--tt-ink-700);
	white-space: nowrap;
}

.report-note,
.report-empty {
	font-size: .86rem;
	color: var(--tt-ink-500);
	line-height: 1.7;
	text-align: left;
}

.report-empty {
	padding: var(--tt-s5);
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-md);
	text-align: center;
}

/* 질문-단답 구조 (AI 추출 친화) */
.report-qa { text-align: left; margin-top: var(--tt-s6); }
.report-qa h3 {
	margin: var(--tt-s5) 0 var(--tt-s2);
	font-size: 1.02rem;
	color: var(--tt-ink-900);
}
.report-qa p {
	margin: 0;
	line-height: 1.75;
	color: var(--tt-ink-700);
}
.report-qa code {
	padding: 1px 5px;
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-sm);
	font-family: var(--tt-font-mono);
	font-size: .92em;
}

.report-links { text-align: left; margin-top: var(--tt-s6); }
.report-link-list {
	list-style: none;
	padding: 0;
	margin: var(--tt-s3) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--tt-s2);
}
.report-link-list a {
	display: block;
	padding: var(--tt-s3);
	background: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	color: var(--tt-ink-900);
	text-decoration: none;
	font-size: .9rem;
}
.report-link-list a:hover {
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-600);
}

@media (max-width: 480px) {
	.report-tldr { padding: var(--tt-s3) var(--tt-s4); }
	.report-table { font-size: .86rem; }
}

/* ===========================================================================
   빈 상태 (데이터가 없을 때의 안내)
   ---------------------------------------------------------------------------
   "없습니다" 한 줄은 이탈로 이어집니다. 다음 행동을 제시합니다.
   =========================================================================== */
.empty-state {
	max-width: 520px;
	margin: var(--tt-s6) auto;
	padding: var(--tt-s6) var(--tt-s4);
	background: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-lg);
	text-align: center;
}

.empty-state-icon { font-size: 2.6rem; line-height: 1; }

.empty-state-title {
	margin: var(--tt-s3) 0 var(--tt-s2);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tt-ink-900);
}

.empty-state-desc {
	margin: 0 0 var(--tt-s5);
	font-size: .9rem;
	line-height: 1.7;
	color: var(--tt-ink-500);
}

.empty-state-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-s2);
}

.empty-state-btn {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	border-radius: var(--tt-r-md);
	border: 1px solid var(--tt-ink-300);
	background: var(--tt-surface);
	color: var(--tt-ink-900);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}

.empty-state-btn:hover {
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-600);
}

.empty-state-btn--primary {
	background: var(--tt-blue-600);
	border-color: var(--tt-blue-600);
	color: #ffffff;
}

.empty-state-btn--primary:hover {
	background: var(--tt-blue-700);
	border-color: var(--tt-blue-700);
	color: #ffffff;
}

.empty-state-tools {
	margin-top: var(--tt-s5);
	padding-top: var(--tt-s4);
	border-top: 1px solid var(--tt-ink-300);
}

.empty-state-tools p {
	margin: 0 0 var(--tt-s3);
	font-size: .84rem;
	color: var(--tt-ink-500);
}

.empty-state-tool-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-s2);
}

.empty-state-tool-links a {
	padding: 7px 13px;
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-full);
	color: var(--tt-ink-700);
	font-size: .84rem;
	text-decoration: none;
}

.empty-state-tool-links a:hover {
	background: var(--tt-blue-50);
	color: var(--tt-blue-600);
}

/* ===========================================================================
   모바일 하단 탭바
   ---------------------------------------------------------------------------
   768px 이하에서만 노출됩니다. 데스크톱에는 GNB가 이미 충분합니다.

   [주의] 하단 고정 요소는 광고와 겹치면 오클릭을 유발합니다.
   body 에 하단 여백을 주어 콘텐츠·광고가 탭바에 가리지 않게 합니다.
   =========================================================================== */
.tt-tabbar { display: none !important; }

@media (max-width: 768px) {
	.tt-tabbar {
		display: none !important;
	}

	.tt-tabbar-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 8px 2px;
		min-height: 56px;          /* 터치 타겟 확보 */
		color: var(--tt-ink-500);
		text-decoration: none;
		transition: color .12s, background-color .12s;
	}

	.tt-tabbar-item:active {
		background: var(--tt-ink-100);
	}

	.tt-tabbar-item.is-active {
		color: var(--tt-blue-text);
		font-weight: 700;
	}

	.tt-tabbar-icon { font-size: 19px; line-height: 1; }
	.tt-tabbar-label { font-size: 11px; letter-spacing: -0.02em; }

	/* 탭바가 제거되었으므로 body 하단 여백 제거 */
	body { padding-bottom: 0; }
	footer { margin-bottom: 0; }
}

/* 접근성: 키보드 포커스가 어디 있는지 항상 보이게 합니다 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--tt-blue-500);
	outline-offset: 2px;
	border-radius: var(--tt-r-sm);
}

/* ===========================================================================
   대학 수강신청 서버 상세 (index.php 의 $is_university 분기)
   ---------------------------------------------------------------------------
   401개 대학 페이지가 서로 구별되도록 학교별 고유 정보를 담는 영역입니다.
   =========================================================================== */
.univ-detail {
	text-align: left;
	max-width: var(--tt-w-page);
	margin: var(--tt-s5) auto;
}

.univ-detail h2 {
	font-size: 1.15rem;
	margin-bottom: var(--tt-s4);
}

.univ-facts {
	margin: 0 0 var(--tt-s4);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--tt-s2);
}

.univ-fact {
	padding: var(--tt-s3);
	background: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
}

.univ-fact dt {
	font-size: .78rem;
	font-weight: 600;
	color: var(--tt-ink-500);
	margin-bottom: var(--tt-s1);
}

.univ-fact dd {
	margin: 0;
	font-size: .95rem;
	color: var(--tt-ink-900);
	word-break: break-all;
}

.univ-fact dd a {
	color: var(--tt-blue-text);
	text-decoration: none;
}

.univ-fact dd a:hover { text-decoration: underline; }

.univ-fact-sub {
	display: block;
	margin-top: 2px;
	font-size: .74rem;
	font-weight: 400;
	color: var(--tt-ink-500);
	word-break: keep-all;
}

.univ-note {
	padding: var(--tt-s4);
	background: var(--tt-blue-50);
	border-left: 3px solid var(--tt-blue-500);
	border-radius: var(--tt-r-md);
	font-size: .9rem;
	line-height: 1.75;
	color: var(--tt-ink-900);
}

.univ-note a {
	display: inline-block;
	margin-top: var(--tt-s2);
	color: var(--tt-blue-text);
	font-weight: 600;
	text-decoration: none;
}

.univ-note a:hover { text-decoration: underline; }

.univ-neighbors { margin-top: var(--tt-s5); }

.univ-neighbors h3 {
	font-size: 1rem;
	margin-bottom: var(--tt-s3);
	color: var(--tt-ink-900);
}

.univ-neighbor-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--tt-s2);
}

.univ-neighbor-list a {
	display: block;
	padding: 9px 12px;
	background: var(--tt-surface);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-sm);
	color: var(--tt-ink-900);
	font-size: .87rem;
	text-decoration: none;
}

.univ-neighbor-list a:hover {
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

.univ-neighbor-more {
	margin-top: var(--tt-s3);
	font-size: .87rem;
}

.univ-neighbor-more a {
	color: var(--tt-blue-text);
	font-weight: 600;
	text-decoration: none;
}

/* 시각 동기화가 크게 어긋난 서버 경고 (1분 초과) */
.univ-warn {
	display: block;
	margin-top: var(--tt-s2);
	padding: var(--tt-s3);
	background: var(--tt-warn-bg);
	border-radius: var(--tt-r-sm);
	font-size: .82rem;
	font-weight: 400;
	line-height: 1.65;
	color: var(--tt-warn);
	word-break: keep-all;
}

/* 정확도 배지 옆 '측정 방법' 링크 */
.accuracy-help {
	display: inline-block;
	margin-left: var(--tt-s2);
	font-size: .76rem;
	font-weight: 600;
	color: var(--tt-ink-500);
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.accuracy-help:hover,
.accuracy-help:focus-visible {
	color: var(--tt-blue-text);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.accuracy-help {
		display: block;
		margin: var(--tt-s1) 0 0;
	}
}


/* ===========================================================================
   동작 최소화 선호(prefers-reduced-motion) 존중
   ---------------------------------------------------------------------------
   전환/애니메이션을 끕니다. 접근성 요구사항이며, 멀미를 유발하지 않습니다.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* ===========================================================================
   메인 히어로 / 시계 영역 (모던 미니멀 개편)
   ---------------------------------------------------------------------------
   시계가 이 사이트의 주인공입니다. 주변 요소의 시각 무게를 낮추고
   시계 카드만 한 단계 더 떠 보이게 해 시선을 모읍니다.
   =========================================================================== */
#serverTimeResult-time {
	background: var(--tt-surface);
	box-shadow: var(--tt-sh-md), var(--tt-ring);
}

.server-time-container {
	padding: var(--tt-s5) var(--tt-s4) var(--tt-s4);
}

/* 시각 계층: 초를 더 크게, 자간을 좁혀 숫자 덩어리를 단단하게 */
.tt-clock-main {
	gap: 0;
	letter-spacing: -0.03em;
}

.tt-clock-sec {
	font-size: clamp(3rem, 2.2rem + 3.4vw, 4.6rem);
}

.tt-clock-hm {
	font-size: clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
	color: var(--tt-ink-900);
}

.tt-clock-colon {
	font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem);
}

.formatted-milliseconds {
	font-size: clamp(1rem, .8rem + .9vw, 1.6rem);
}

/* 서버 설명 문구는 보조 정보로 낮춥니다 */
.server-description {
	font-size: .95rem;
	font-weight: 500;
	color: var(--tt-ink-500);
	line-height: 1.6;
}

/* 홈 전용: <p> 기본 상단 여백(약 15px)이 그대로 남아 있어 카드 위쪽이
   불필요하게 넓어 보였습니다. 값을 명시해 여백을 줄입니다. */
#home-container .server-description {
	margin: 0 0 6px;
}
#home-container .server-time-container {
	padding-top: var(--tt-s2);
	margin-top: 0;
}
/* "실시간 서버시간 측정 결과" 제목과 URL 사이 간격을 좁힙니다 */
#serverTimeResult-time > h2 {
	margin-bottom: var(--tt-s1);
}
/* PiP 버튼을 배지 줄에 합치면서 버튼 자체도 살짝 축소해 줄 높이를 맞춥니다 */
#home-container .accuracy-badge-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--tt-s2);
}
#home-container .accuracy-badge-wrap #btn-floating-clock {
	padding: 4px 12px;
	font-size: .78rem;
	font-weight: 600;
	border-radius: var(--tt-r-full);
}

.server-description .server-host {
	font-weight: 700;
	color: var(--tt-blue-text);
	text-decoration: none;
}

.server-description .server-host:hover { text-decoration: underline; }

/* 히어로 문구: 카드 밖 여백에 두어 화면이 답답하지 않게 */
.highlight-lcp {
	max-width: var(--tt-w-text);
	margin: var(--tt-s5) auto;
	padding: var(--tt-s4) var(--tt-s5);
	background: var(--tt-blue-50);
	border-radius: var(--tt-r-lg);
	color: var(--tt-ink-700);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.7;
}

/* 긴 글은 폭을 좁혀 가독성을 확보합니다 (한 줄 45~75자 권장) */
.univ-guide,
.report-qa,
.sugang-guide {
	max-width: var(--tt-w-text);
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.container   { padding: 0 var(--tt-s4); }
	.main-content{ padding: var(--tt-s5) 0 var(--tt-s6); }
	section      { padding: var(--tt-s5) var(--tt-s4); margin: var(--tt-s4) auto; }
}

@media (max-width: 480px) {
	.container   { padding: 0 var(--tt-s3); }
	section      { padding: var(--tt-s4) var(--tt-s3); border-radius: var(--tt-r-md); }
}


/* ===========================================================================
   본문 가독성 (긴 글 폭 제한)
   ---------------------------------------------------------------------------
   본문 폭을 1040px 로 넓히면서 카드는 시원해졌지만, 문단이 그대로 넓어지면
   한 줄이 100자를 넘어 읽기 어려워집니다. (권장: 한 줄 45~75자)
   카드 폭은 유지한 채 텍스트 블록만 좁혀 균형을 맞춥니다.
   =========================================================================== */
section > p,
section > ul,
section > ol,
section > dl,
.main-content > p {
	max-width: var(--tt-w-text);
	margin-left: auto;
	margin-right: auto;
}

/* 문서형 페이지는 좌측 정렬이 읽기 편합니다.
   (메인의 시계·도구 화면은 가운데 정렬을 유지합니다) */
.faq-content,
.guide-content,
.doc-content,
section > ol,
section > ul {
	text-align: left;
}

/* ===========================================================================
   서버시간 가이드 (홈 하단 아코디언)
   ---------------------------------------------------------------------------
   검색 유입을 받으려면 본문이 필요하지만, 도구를 쓰러 온 사용자에게 긴 글을
   그대로 펼쳐 두면 벽처럼 보입니다. 주제별로 접어 두고 목차로 훑게 합니다.

   [중요] display:none 이 아니라 <details> 를 씁니다. 검색엔진은 <details>
   안의 내용을 그대로 읽으므로 색인 손실이 없습니다.
   =========================================================================== */
.tt-guide,
.tt-faq-section {
	max-width: var(--tt-w-text);
	margin: var(--tt-s6) auto 0;
	text-align: left;
}

.tt-guide-title { font-size: 1.35rem; margin: 0 0 var(--tt-s2); }

.tt-guide-lead {
	font-size: .92rem; line-height: 1.7;
	color: var(--tt-ink-500); margin: 0 0 var(--tt-s3);
}

/* 목차 칩: 어떤 내용이 있는지 한눈에 보여 주고 바로 이동시킵니다. */
.tt-guide-toc {
	display: flex; flex-wrap: wrap; gap: var(--tt-s2);
	margin-bottom: var(--tt-s4);
}

.tt-guide-toc a {
	padding: 7px 14px;
	font-size: .85rem; font-weight: 600;
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-full);
	color: var(--tt-ink-700);
	text-decoration: none;
	background: var(--tt-surface);
}

.tt-guide-toc a:hover {
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

/* 아코디언 카드 */
.tt-guide-item,
.main-content details {
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	margin-bottom: var(--tt-s3);
	overflow: hidden;
	/* 목차에서 이동했을 때 헤더에 가려지지 않도록 여유를 둡니다. */
	scroll-margin-top: calc(var(--tt-nav-h) + 12px);
}

.tt-guide-item > summary,
.main-content details > summary {
	display: flex; align-items: center; gap: var(--tt-s2);
	padding: var(--tt-s4);
	font-size: 1.02rem; font-weight: 700;
	color: var(--tt-ink-900);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: var(--tt-s7);
}

/* 브라우저 기본 삼각형 제거 (사파리는 별도 의사요소를 씁니다) */
.tt-guide-item > summary::-webkit-details-marker,
.main-content details > summary::-webkit-details-marker { display: none; }

/* 직접 만든 펼침 표시 */
.tt-guide-item > summary::after,
.main-content details > summary::after {
	content: '';
	position: absolute;
	right: var(--tt-s4);
	width: 9px; height: 9px;
	border-right: 2px solid var(--tt-ink-500);
	border-bottom: 2px solid var(--tt-ink-500);
	transform: rotate(45deg) translateY(-3px);
	transition: transform .18s ease;
}

.tt-guide-item[open] > summary::after,
.main-content details[open] > summary::after {
	transform: rotate(-135deg) translateY(-3px);
}

.tt-guide-item[open] > summary,
.main-content details[open] > summary { color: var(--tt-blue-text); }

.tt-guide-item > summary:hover,
.main-content details > summary:hover { background: var(--tt-ink-100); }

/*
   summary 안의 제목.
   접힌 항목도 검색엔진과 스크린리더에는 '제목'으로 읽혀야 문서 구조가 유지되므로
   h3 를 넣고, 화면에서는 요약 줄에 자연스럽게 녹아들도록 스타일을 지웁니다.
*/
.tt-guide-h {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0;
	line-height: inherit;
}

/* 번호 배지: 순서가 있다는 것을 알려 훑기 쉽게 합니다. */
.tt-guide-num {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	font-family: var(--tt-font-mono);
	font-size: .74rem; font-weight: 700;
	color: var(--tt-blue-text);
	background: var(--tt-blue-50);
	border-radius: var(--tt-r-sm);
}

/* .tt-guide-body 로 감싸지 않은 맨 <details> 본문에도 같은 여백을 줍니다. */
.main-content details > *:not(summary) {
	padding-left: var(--tt-s4);
	padding-right: var(--tt-s4);
	font-size: .93rem;
	line-height: 1.75;
	color: var(--tt-ink-700);
	text-align: left;
}

.main-content details > *:not(summary):first-of-type {
	padding-top: var(--tt-s3);
	border-top: 1px solid var(--tt-ink-300);
}

.main-content details > *:not(summary):last-child { padding-bottom: var(--tt-s4); }

/* .tt-guide-body 를 쓰는 경우 위 규칙과 겹치지 않게 여백을 되돌립니다. */
.main-content details > .tt-guide-body { padding-left: 0; padding-right: 0; }

.tt-guide-body {
	padding: 0 var(--tt-s4) var(--tt-s4);
	border-top: 1px solid var(--tt-ink-300);
	padding-top: var(--tt-s3);
	font-size: .93rem;
	line-height: 1.75;
	color: var(--tt-ink-700);
}

.tt-guide-body h3 {
	font-size: 1rem;
	margin: var(--tt-s4) 0 var(--tt-s2);
	color: var(--tt-ink-900);
}

.tt-guide-body h4 {
	font-size: .93rem;
	margin: var(--tt-s3) 0 var(--tt-s1);
	color: var(--tt-ink-900);
}

.tt-guide-body p { margin: 0 0 var(--tt-s3); }
.tt-guide-body p:last-child { margin-bottom: 0; }

.tt-guide-body ol,
.tt-guide-body ul {
	margin: 0 0 var(--tt-s3);
	padding-left: 1.35em;
}

.tt-guide-body li { margin-bottom: 6px; }
.tt-guide-body .styled-table { margin-bottom: var(--tt-s3); }

/* 링크 묶음: 가이드 안에서는 왼쪽 정렬이 자연스럽습니다. */
.tt-guide-body .platform-seo-links,
.tt-faq-section .platform-seo-links {
	display: flex; flex-wrap: wrap; gap: 8px;
	justify-content: flex-start;
	margin: var(--tt-s2) 0 0;
}

.tt-guide-body .platform-seo-links a,
.tt-faq-section .platform-seo-links a {
	padding: 6px 12px;
	font-size: .84rem;
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-full);
	color: var(--tt-ink-700);
	text-decoration: none;
	background: var(--tt-ink-100);
}

.tt-guide-body .platform-seo-links a:hover,
.tt-faq-section .platform-seo-links a:hover {
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

.tt-faq-section h2 { font-size: 1.35rem; margin: 0 0 var(--tt-s2); }
/* FAQ 답변 아래 관련 링크 (구조화 데이터에는 포함되지 않는 보조 경로) */
.tt-faq-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-s3);
	margin: var(--tt-s2) 0 0 !important;
	font-size: .88rem;
}

.tt-faq-links a {
	color: var(--tt-blue-text);
	font-weight: 600;
	text-decoration: none;
}

.tt-faq-links a:hover { text-decoration: underline; }

.tt-faq-section h3 { font-size: 1rem; margin: var(--tt-s5) 0 var(--tt-s2); }

@media (max-width: 480px) {
	.tt-guide-item > summary,
	.main-content details > summary { font-size: .95rem; padding: var(--tt-s3); padding-right: var(--tt-s6); }
	.tt-guide-body { padding: var(--tt-s3); padding-top: var(--tt-s3); }
	.tt-guide-toc a { font-size: .8rem; padding: 6px 11px; }
}

/* ===========================================================================
   위젯 삽입 (/embed)
   =========================================================================== */
.tt-embed { max-width: var(--tt-w-page); margin: 0 auto; }

.tt-embed-lead {
	text-align: left; font-size: .95rem; line-height: 1.7;
	color: var(--tt-ink-700); max-width: var(--tt-w-text); margin: 0 auto var(--tt-s4);
}

.tt-embed-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--tt-s4);
	align-items: start;
}

.tt-embed-panel {
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	padding: var(--tt-s4);
	text-align: left;
}

.tt-embed-panel h2 { font-size: 1rem; margin: 0 0 var(--tt-s3); }

.tt-embed-field { display: block; margin-bottom: var(--tt-s3); border: 0; padding: 0; }
.tt-embed-field > span,
.tt-embed-field > legend {
	display: block; font-size: .88rem; font-weight: 600;
	color: var(--tt-ink-700); margin-bottom: var(--tt-s1); padding: 0;
}

.tt-embed-field select {
	width: 100%; padding: 10px 12px; font-size: .95rem;
	border: 1px solid var(--tt-ink-300); border-radius: var(--tt-r-md);
	background: var(--tt-ink-100); color: var(--tt-ink-900);
}

.tt-embed-field label {
	display: inline-flex; align-items: center; gap: 5px;
	margin-right: var(--tt-s3); font-size: .9rem; color: var(--tt-ink-700);
}

.tt-embed-check {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .9rem; color: var(--tt-ink-700);
}

.tt-embed-hint { font-size: .82rem; color: var(--tt-ink-500); margin: 0 0 var(--tt-s2); line-height: 1.6; }

/* 미리보기는 실제 삽입 결과와 같아야 하므로 배경을 깔아 경계를 보여 줍니다. */
.tt-embed-preview {
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-md);
	padding: var(--tt-s3);
	display: flex; justify-content: center;
}

.tt-embed-preview iframe {
	width: 100%; max-width: 420px; border: 0;
	background: var(--tt-surface); border-radius: var(--tt-r-sm);
}

.tt-embed-codes {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--tt-s4); margin-top: var(--tt-s4);
}

.tt-embed-code {
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	padding: var(--tt-s4);
	text-align: left;
}

.tt-embed-code h2 { font-size: 1rem; margin: 0 0 var(--tt-s2); }

.tt-embed-code textarea {
	width: 100%;
	font-family: var(--tt-font-mono);
	font-size: .78rem; line-height: 1.6;
	padding: var(--tt-s3);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	background: var(--tt-ink-100);
	color: var(--tt-ink-900);
	resize: vertical;
}

.tt-embed-copy {
	margin-top: var(--tt-s2);
	padding: 9px 18px; font-size: .9rem; font-weight: 600;
	border: 0; border-radius: var(--tt-r-md);
	background: var(--tt-blue-600); color: #fff; cursor: pointer;
}

.tt-embed-copy.is-done { background: var(--tt-ok); }

@media (max-width: 720px) {
	.tt-embed-grid,
	.tt-embed-codes { grid-template-columns: 1fr; }
}

/* ===========================================================================
   정확도 낮을 때의 행동 안내
   ---------------------------------------------------------------------------
   경고처럼 붉게 칠하지 않습니다. 서비스 결함이 아니라 대상 서버의 특성이고,
   사용자는 겁먹을 게 아니라 '정각에 클릭하면 된다'는 것만 알면 됩니다.
   =========================================================================== */
.accuracy-guide {
	max-width: var(--tt-w-text);
	margin: var(--tt-s3) auto 0;
	padding: var(--tt-s3);
	background: var(--tt-warn-bg);
	border-radius: var(--tt-r-md);
	font-size: .88rem;
	line-height: 1.65;
	color: var(--tt-warn);
	text-align: left;
}

.accuracy-guide strong { color: var(--tt-warn); }
.accuracy-guide-retrying { opacity: .85; }

.accuracy-retry {
	display: inline-block;
	margin-left: var(--tt-s1);
	padding: 5px 12px;
	font-size: .84rem;
	font-weight: 600;
	border: 1px solid currentColor;
	border-radius: var(--tt-r-full);
	background: transparent;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
}

.accuracy-retry:disabled { opacity: .55; cursor: default; }

/* ===========================================================================
   클릭 타이밍 연습 (/practice)
   =========================================================================== */
.tt-practice { max-width: var(--tt-w-text); margin: 0 auto; }

.tt-practice-lead {
	text-align: left;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--tt-ink-700);
}

.tt-practice-stage {
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	padding: var(--tt-s5) var(--tt-s4);
	margin: var(--tt-s4) 0;
}

.tt-practice-target { font-size: .92rem; color: var(--tt-ink-500); }
.tt-practice-target strong { color: var(--tt-blue-text); font-family: var(--tt-font-mono); }

.tt-practice-clock {
	font-family: var(--tt-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--tt-ink-900);
	line-height: 1.2;
	margin: var(--tt-s2) 0;
}

.tt-practice-ms { font-size: .6em; color: var(--tt-ink-500); }

.tt-practice-count {
	font-family: var(--tt-font-mono);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--tt-ink-500);
	min-height: 1.5em;
}

/* 3초 이내로 들어오면 색을 바꿔 '지금 집중' 신호를 줍니다. */
.tt-practice-count.is-near { color: var(--tt-err); }

.tt-practice-hit {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: var(--tt-s4) auto var(--tt-s2);
	padding: 22px;
	font-size: 1.3rem;
	font-weight: 800;
	border: 0;
	border-radius: var(--tt-r-lg);
	background: var(--tt-ink-300);
	color: var(--tt-ink-500);
	cursor: not-allowed;
}

.tt-practice-hit.is-armed {
	background: var(--tt-blue-600);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--tt-sh-md);
}

.tt-practice-hit.is-armed:active { transform: translateY(1px); }

.tt-practice-result {
	min-height: 2em;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tt-ink-700);
}

.tt-practice-result.is-perfect { color: var(--tt-ok); }
.tt-practice-result.is-good    { color: var(--tt-blue-text); }
.tt-practice-result.is-fair    { color: var(--tt-warn); }
.tt-practice-result.is-poor    { color: var(--tt-err); }

.tt-practice-actions {
	display: flex;
	gap: var(--tt-s2);
	justify-content: center;
	margin-top: var(--tt-s3);
}

.tt-practice-primary,
.tt-practice-ghost {
	padding: 10px 20px;
	font-size: .95rem;
	font-weight: 600;
	border-radius: var(--tt-r-md);
	cursor: pointer;
	border: 0;
}

.tt-practice-primary { background: var(--tt-blue-600); color: #fff; }
.tt-practice-primary:disabled { opacity: .5; cursor: default; }
.tt-practice-ghost { background: var(--tt-ink-100); color: var(--tt-ink-700); }

.tt-practice-stats {
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	padding: var(--tt-s4);
	text-align: left;
}

.tt-practice-stats h2 { font-size: 1.05rem; margin: 0 0 var(--tt-s3); }

.tt-practice-statgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tt-s2);
	text-align: center;
}

.tt-practice-statgrid div {
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-md);
	padding: var(--tt-s3) var(--tt-s2);
}

.tt-practice-statgrid span {
	display: block;
	font-family: var(--tt-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--tt-ink-900);
}

.tt-practice-statgrid small {
	display: block;
	margin-top: 4px;
	font-size: .78rem;
	color: var(--tt-ink-500);
}

.tt-practice-note {
	margin: var(--tt-s3) 0 0;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--tt-ink-700);
}

.tt-practice-share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: var(--tt-s3) 0 0;
	padding: 9px 16px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--tt-blue-text);
	background: var(--tt-blue-50);
	border: 1px solid rgba(0, 68, 204, .15);
	border-radius: var(--tt-r-full);
	cursor: pointer;
}
.tt-practice-share:hover { filter: brightness(0.97); }

.tt-practice-history {
	list-style: none;
	padding: 0;
	margin: var(--tt-s3) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tt-practice-history li {
	font-family: var(--tt-font-mono);
	font-size: .8rem;
	padding: 4px 10px;
	border-radius: var(--tt-r-full);
	background: var(--tt-ink-100);
	color: var(--tt-ink-700);
}

.tt-practice-history li.is-good { background: var(--tt-ok-bg); color: var(--tt-ok); }

@media (max-width: 480px) {
	.tt-practice-clock { font-size: 2rem; }
	.tt-practice-statgrid span { font-size: 1.1rem; }
}

/* ===========================================================================
   정각 알람 · 내 클릭 보정
   ---------------------------------------------------------------------------
   시계 바로 아래에 놓이는 실행 도구입니다. 시계보다 시선을 끌면 안 되므로
   면적은 넓게 쓰되 색은 절제하고, '지금 클릭' 신호에만 강한 색을 씁니다.
   =========================================================================== */
.tt-alarm {
	max-width: var(--tt-w-text);
	margin: var(--tt-s5) auto 0;
	padding: var(--tt-s4);
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	text-align: left;
}

.tt-alarm-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 var(--tt-s2);
	color: var(--tt-ink-900);
}

.tt-alarm-lead {
	font-size: .92rem;
	line-height: 1.6;
	color: var(--tt-ink-700);
	margin: 0 0 var(--tt-s3);
}

.tt-alarm-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tt-s2);
}

.tt-alarm-row label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--tt-ink-700);
}

.tt-alarm-row input[type="time"] {
	padding: 10px 12px;
	font-size: 1rem;
	font-family: var(--tt-font-mono);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	background: var(--tt-ink-100);
	color: var(--tt-ink-900);
}

.tt-alarm-primary,
.tt-alarm-cancel {
	padding: 10px 18px;
	font-size: .95rem;
	font-weight: 600;
	border: 0;
	border-radius: var(--tt-r-md);
	cursor: pointer;
}

.tt-alarm-primary { background: var(--tt-blue-600); color: #fff; }
.tt-alarm-primary:hover:not(:disabled) { background: var(--tt-blue-700); }
.tt-alarm-primary:disabled { opacity: .5; cursor: default; }
.tt-alarm-cancel { background: var(--tt-ink-100); color: var(--tt-ink-700); }

.tt-alarm-help,
.tt-alarm-note {
	font-size: .82rem;
	color: var(--tt-ink-500);
	line-height: 1.6;
	margin: var(--tt-s2) 0 0;
}

.tt-alarm-points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-s2);
	margin-top: var(--tt-s3);
}

/* 모바일에서 5개 버튼이 2줄로 줄바꿈되던 것을 좌우 스크롤 1줄로 바꿉니다.
   버튼은 모두 그대로 DOM에 남아 있어 기능/색인에는 영향이 없습니다. */
@media (max-width: 768px) {
	.tt-alarm-points {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 4px;
	}
	.tt-alarm-points button {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* 알람을 설정하기 전에는 내용이 비어 있는데도 padding+border 만큼 빈 줄이
   보였습니다. :empty 로 텅 빈 상태에서만 숨기고, 값이 채워지면(JS가 텍스트를
   넣는 순간) 그대로 나타나므로 레이아웃 시프트(CLS)는 없습니다. */
.tt-alarm-correction:empty {
	display: none;
}

/* 선택되지 않은 상태가 기본. 켜진 것만 파랗게 해 현재 설정을 한눈에 보여줍니다. */
.tt-alarm-points button {
	padding: 8px 14px;
	font-size: .88rem;
	font-weight: 600;
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-full);
	background: transparent;
	color: var(--tt-ink-500);
	cursor: pointer;
}

.tt-alarm-points button.is-on {
	background: var(--tt-blue-50);
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

.tt-alarm-countdown {
	margin-top: var(--tt-s3);
	font-family: var(--tt-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--tt-ink-900);
	line-height: 1.2;
	min-height: 1.2em;
}

.tt-alarm-status {
	margin-top: var(--tt-s1);
	font-size: .92rem;
	font-weight: 600;
	color: var(--tt-ink-700);
	min-height: 1.4em;
}

/* '지금 클릭' 순간에만 쓰는 강조. 평소에 이 색을 쓰면 신호 가치가 떨어집니다. */
.tt-alarm-status.is-hit {
	color: var(--tt-err);
	font-size: 1.15rem;
}

.tt-alarm-correction {
	margin-top: var(--tt-s2);
	padding-top: var(--tt-s2);
	border-top: 1px solid var(--tt-ink-300);
	font-size: .88rem;
	color: var(--tt-ink-700);
	line-height: 1.6;
}

.tt-alarm-correction strong { color: var(--tt-blue-text); }

/* 보정보다 시각 오차가 클 때의 단서. 눈에 띄되 경고처럼 보이지 않게 둡니다. */
.tt-alarm-caveat {
	display: inline-block;
	margin-top: var(--tt-s1);
	font-size: .84rem;
	color: var(--tt-warn);
	line-height: 1.6;
}

/* 화면 점멸 오버레이: 평소에는 보이지 않고 클릭을 가로채지 않습니다. */
#ttAlarmFlash {
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 9998;
	background: var(--tt-blue-500);
}

#ttAlarmFlash.is-on { animation: ttFlash .6s ease-out; }
#ttAlarmFlash.is-strong { background: var(--tt-err); animation: ttFlashStrong 1.2s ease-out; }

@keyframes ttFlash {
	0%   { opacity: .35; }
	100% { opacity: 0; }
}

@keyframes ttFlashStrong {
	0%   { opacity: .55; }
	25%  { opacity: .12; }
	50%  { opacity: .55; }
	100% { opacity: 0; }
}

/* 화면 점멸에 민감한 사용자를 위해 애니메이션을 끕니다.
   소리와 진동은 그대로 동작하므로 알람 기능 자체는 유지됩니다. */
@media (prefers-reduced-motion: reduce) {
	#ttAlarmFlash.is-on,
	#ttAlarmFlash.is-strong { animation: none; opacity: 0; }
}

@media (max-width: 480px) {
	.tt-alarm-row input[type="time"] { flex: 1 1 auto; min-width: 0; }
	.tt-alarm-countdown { font-size: 1.35rem; }
}

/* ===========================================================================
   설명형 본문 섹션
   ---------------------------------------------------------------------------
   메인의 시계·도구 영역은 가운데 정렬이 어울리지만, 여러 줄짜리 설명 문단까지
   가운데로 두면 줄마다 시작 위치가 달라져 눈이 행을 따라가기 어렵습니다.
   서버시간을 설명하는 긴 글은 좌측 정렬로 읽기 편하게 둡니다.
   =========================================================================== */
#what-is-servertime > p,
#what-is-servertime > h2,
#what-is-servertime > h3 {
	text-align: left;
}

/* ===========================================================================
   비교표의 모바일 대응
   ---------------------------------------------------------------------------
   2열 표를 좁은 화면에 그대로 두면 첫 열이 한 글자씩 줄바꿈되어 읽을 수 없습니다.
   ("시 간 서 버 가 서 로 다 름" 처럼 세로로 늘어집니다)
   좁은 화면에서는 행을 위아래로 쌓아 항목명과 설명이 자연스럽게 이어지게 합니다.
   =========================================================================== */
@media (max-width: 600px) {
	.styled-table,
	.styled-table tbody,
	.styled-table tr,
	.styled-table .table-cell {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.styled-table tr {
		border: 1px solid var(--tt-ink-300);
		border-radius: var(--tt-r-sm);
		margin-bottom: var(--tt-s3);
		overflow: hidden;
	}

	/* 행을 카드처럼 묶었으므로 셀의 개별 테두리는 없앱니다. */
	.styled-table .table-cell {
		border: 0;
		text-align: left;
		padding: var(--tt-s3);
	}

	/* 첫 셀(항목명)은 제목처럼 보이게 배경을 살짝 깔아 구분합니다. */
	.styled-table .table-cell:first-child {
		background: var(--tt-ink-100);
		font-weight: 600;
		padding-bottom: var(--tt-s2);
	}

	/* 항목명이 하나뿐인 행(체크리스트형)은 배경 없이 그대로 둡니다. */
	.styled-table .table-cell:first-child:last-child {
		background: transparent;
		font-weight: 400;
	}
}

/* ===========================================================================
   티켓팅 체크리스트 (/checklist)
   =========================================================================== */
.tt-check { max-width: var(--tt-w-text); margin: 0 auto; text-align: left; }

.tt-check-lead { font-size: .95rem; line-height: 1.7; color: var(--tt-ink-700); }

.tt-check-progress {
	display: flex; align-items: center; gap: var(--tt-s3);
	margin: var(--tt-s4) 0 var(--tt-s3);
}

.tt-check-bar {
	flex: 1; height: 10px;
	background: var(--tt-ink-300);
	border-radius: var(--tt-r-full);
	overflow: hidden;
}

.tt-check-bar span {
	display: block; height: 100%; width: 0;
	background: var(--tt-blue-500);
	border-radius: var(--tt-r-full);
	transition: width .25s ease;
}

.tt-check-count {
	font-family: var(--tt-font-mono);
	font-size: .9rem; color: var(--tt-ink-500); white-space: nowrap;
}
.tt-check-count strong { color: var(--tt-blue-text); font-size: 1.1rem; }

.tt-check-actions { display: flex; gap: var(--tt-s2); margin-bottom: var(--tt-s5); flex-wrap: wrap; }

.tt-check-btn, .tt-check-ghost {
	padding: 9px 18px; font-size: .9rem; font-weight: 600;
	border: 0; border-radius: var(--tt-r-md); cursor: pointer;
}
.tt-check-btn { background: var(--tt-blue-600); color: #fff; }
.tt-check-btn.is-done { background: var(--tt-ok); }
.tt-check-ghost { background: var(--tt-ink-100); color: var(--tt-ink-700); }

.tt-check-group {
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
	padding: var(--tt-s4);
	margin-bottom: var(--tt-s3);
}

.tt-check-phase {
	font-size: 1rem; margin: 0 0 var(--tt-s3);
	color: var(--tt-blue-text);
	display: flex; align-items: center; gap: 8px;
}

.tt-check-list { list-style: none; padding: 0; margin: 0; }

.tt-check-list li {
	padding: var(--tt-s2) 0;
	border-top: 1px solid var(--tt-ink-300);
}
.tt-check-list li:first-child { border-top: 0; }

/* 완료한 항목은 흐리게 해서 남은 일이 눈에 들어오게 합니다. */
.tt-check-list li.is-done .tt-check-text { color: var(--tt-ink-500); text-decoration: line-through; }

.tt-check-list label {
	display: flex; align-items: flex-start; gap: 10px;
	cursor: pointer; line-height: 1.65;
}

.tt-check-list input[type="checkbox"] {
	flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px;
	accent-color: var(--tt-blue-600); cursor: pointer;
}

.tt-check-text { font-size: .93rem; color: var(--tt-ink-700); }

.tt-check-links {
	display: inline-flex; flex-wrap: wrap; gap: var(--tt-s3);
	margin: 4px 0 0 29px; font-size: .84rem;
}
.tt-check-links a { color: var(--tt-blue-text); font-weight: 600; text-decoration: none; }
.tt-check-links a:hover { text-decoration: underline; }
/* ===========================================================================
   전체 서버시간 목록 (/servers)
   =========================================================================== */
.tt-servers { max-width: var(--tt-w-page); margin: 0 auto; text-align: left; }

.tt-servers-lead {
	font-size: .95rem; line-height: 1.7; color: var(--tt-ink-700);
	max-width: var(--tt-w-text);
}

.tt-servers-tools { margin: var(--tt-s4) 0; }

.tt-servers-tools input[type="search"] {
	width: 100%; max-width: 480px;
	padding: 11px 14px; font-size: .95rem;
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	background: var(--tt-surface); color: var(--tt-ink-900);
}

.tt-servers-filter {
	display: flex; flex-wrap: wrap; gap: var(--tt-s2);
	margin-top: var(--tt-s3);
}

.tt-servers-filter button {
	padding: 7px 15px; font-size: .86rem; font-weight: 600;
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-full);
	background: var(--tt-surface); color: var(--tt-ink-500);
	cursor: pointer;
}

.tt-servers-filter button.is-on {
	background: var(--tt-blue-50);
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

.tt-servers-hint { font-size: .87rem; color: var(--tt-ink-500); margin: var(--tt-s2) 0 0; }

.tt-servers-group { margin-bottom: var(--tt-s5); }

.tt-servers-group h2 {
	font-size: 1.05rem; margin: 0 0 var(--tt-s3);
	display: flex; align-items: center; gap: 8px;
}

.tt-servers-count {
	font-family: var(--tt-font-mono);
	font-size: .78rem; font-weight: 700;
	padding: 2px 9px; border-radius: var(--tt-r-full);
	background: var(--tt-ink-100); color: var(--tt-ink-500);
}

.tt-servers-list {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: var(--tt-s2);
}

.tt-servers-list a {
	display: block; padding: var(--tt-s3);
	background: var(--tt-surface);
	border-radius: var(--tt-r-md);
	box-shadow: var(--tt-ring);
	text-decoration: none;
}

.tt-servers-list a:hover { box-shadow: var(--tt-sh-sm), inset 0 0 0 1px var(--tt-blue-500); }
.tt-servers-list strong { display: block; font-size: .93rem; color: var(--tt-ink-900); }
.tt-servers-list span {
	display: block; margin-top: 3px;
	font-family: var(--tt-font-mono); font-size: .76rem; color: var(--tt-ink-500);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 좌석 예매 연습 난이도 선택 (/book) */
.diff-btn {
	display: flex; flex-direction: column; align-items: center;
	gap: 2px; padding: 8px 14px;
	font-size: .9rem; font-weight: 700;
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	background: var(--tt-surface); color: var(--tt-ink-500);
	cursor: pointer; line-height: 1.3;
}

.diff-btn small { font-size: .72rem; font-weight: 400; opacity: .85; }

.diff-btn.is-on {
	background: var(--tt-blue-50);
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

/* ===========================================================================
   공개 API 문서 (/api)
   =========================================================================== */
.tt-api { max-width: var(--tt-w-text); margin: 0 auto; text-align: left; }

.tt-api-lead {
	font-size: .97rem; line-height: 1.75; color: var(--tt-ink-700);
	padding: var(--tt-s4);
	background: var(--tt-blue-50);
	border-radius: var(--tt-r-lg);
	margin-bottom: var(--tt-s5);
}

.tt-api h2 { font-size: 1.15rem; margin: var(--tt-s5) 0 var(--tt-s2); }
.tt-api h3 { font-size: 1rem; margin: var(--tt-s4) 0 var(--tt-s2); }
.tt-api p { font-size: .93rem; line-height: 1.75; color: var(--tt-ink-700); }

/* 코드 블록은 좁은 화면에서 페이지를 밀지 않고 자기 안에서만 스크롤합니다.
   [주의] overflow-x 만으로는 부족합니다. max-width/min-width 를 함께 못 박지 않으면
   안쪽 <code> 가 부모를 밀어내 페이지 전체에 가로 스크롤이 생깁니다.
   (실측: 아이폰 390px 화면에서 266px 넘침) */
.tt-api-code {
	background: var(--tt-ink-100);
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	padding: var(--tt-s3);
	overflow-x: auto;
	margin: 0 0 var(--tt-s3);
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

.tt-api-code code {
	display: block;
	min-width: 0;
	font-family: var(--tt-font-mono);
	font-size: .82rem;
	line-height: 1.65;
	color: var(--tt-ink-900);
	white-space: pre;
}

.tt-api .styled-table code {
	font-family: var(--tt-font-mono);
	font-size: .84rem;
	padding: 2px 6px;
	background: var(--tt-ink-100);
	border-radius: var(--tt-r-sm);
	color: var(--tt-blue-text);
}

/* ===========================================================================
   공통 UI 정리
   ---------------------------------------------------------------------------
   페이지마다 손으로 만든 스타일이 쌓여 같은 역할의 요소가 서로 다르게 보였습니다.
   실측 결과 버튼이 18종, 카드 반경이 8px/18px 로 갈라져 있었습니다.
   여기서 공통 규칙을 정하고, 각 페이지의 예외를 이 값으로 되돌립니다.
   =========================================================================== */

/* --- 목록용 로고(파비콘) ---------------------------------------------------
   대학·예매처 이름만 나열하면 훑기 어렵습니다. 로고를 붙여 찾기 쉽게 합니다.
   크기를 20px 박스로 고정하되 늘리지는 않습니다(작은 파비콘이 뭉개지므로). */
.tt-ico {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	object-fit: contain;
	border-radius: 4px;
	/* 파비콘이 흰 배경을 갖는 경우가 많아 다크모드에서 떠 보입니다.
	   아주 옅은 판을 깔아 경계를 정리합니다. */
	background: var(--tt-ink-100);
}

/* 로고 + 이름을 한 줄로 정렬 */
.sugang-univ-grid a,
.platform-seo-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sugang-univ-grid a > span,
.platform-seo-links a > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- 카드 반경 통일 -------------------------------------------------------
   게임 페이지 3종(포도알·캡챠·날짜선택)이 디자인 시스템 이전의 8px 을 쓰고
   있어 다른 페이지와 달라 보였습니다. 토큰 값으로 맞춥니다. */
.main-content .ranking-container,
.main-content .semantic-content,
.main-content .game-container {
	border-radius: var(--tt-r-lg);
}

/* --- 버튼 통일 -----------------------------------------------------------
   [원칙] 주 동작은 파란 채움, 보조는 회색 채움, 세 번째는 테두리만.
   모서리는 --tt-r-md, 글자는 600 이상. 아래는 각 페이지가 직접 지정해 둔
   예외를 시스템 값으로 되돌리는 규칙입니다. */

/* 날짜선택 연습: 보라/회색 raw 색상 + 각진 모서리를 쓰고 있었습니다. */
.main-content .nav-buttons button {
	background-color: var(--tt-ink-100);
	color: var(--tt-ink-700);
	border-radius: var(--tt-r-md);
	font-size: .88rem;
	font-weight: 600;
	padding: 8px 14px;
	width: auto;
}

.main-content .nav-buttons button:hover {
	background-color: var(--tt-ink-300);
}

.main-content .time-slot {
	border: 1px solid var(--tt-ink-300);
	border-radius: var(--tt-r-md);
	font-size: .95rem;
	font-weight: 600;
	padding: 10px 18px;
}

.main-content .time-slot.selected {
	background: var(--tt-blue-50);
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-text);
}

.main-content #date_pick button,
.main-content #date-reserve-button {
	background-color: var(--tt-blue-600);
	color: #fff;
	border-radius: var(--tt-r-md);
	font-size: 1rem;
	font-weight: 700;
	padding: 12px 24px;
}

.main-content #date_pick button:hover,
.main-content #date-reserve-button:hover:not(:disabled) {
	background-color: var(--tt-blue-700);
}

.main-content #date-reserve-button:disabled {
	background-color: var(--tt-ink-300);
	color: var(--tt-ink-500);
	cursor: not-allowed;
}

/* 캡챠 연습: 모서리 8px, 굵기 400 으로 다른 페이지와 어긋났습니다. */
.main-content #captchaSubmit,
.main-content #captchaReset,
.main-content #startCaptcha {
	border-radius: var(--tt-r-md);
	font-weight: 700;
}

/* ===========================================================================
   좌석 예매 연습(/book) 다크모드 대응
   ---------------------------------------------------------------------------
   이 페이지만 Tailwind 의 고정 색(bg-gray-100, text-gray-800 등)을 써서
   다크모드로 바꿔도 혼자 흰 화면으로 남아 있었습니다.
   (실측: 다른 페이지 배경 밝기 34, 이 페이지만 244)
   Tailwind 를 걷어내는 대신 실제로 쓰이는 클래스만 토큰으로 되돌립니다.
   =========================================================================== */
body.bg-gray-100 { background-color: var(--tt-ink-100) !important; }

.main-content .bg-white { background-color: var(--tt-surface) !important; }
.main-content .bg-gray-50 { background-color: var(--tt-ink-100) !important; }
.main-content .text-gray-800 { color: var(--tt-ink-900) !important; }
.main-content .text-gray-700 { color: var(--tt-ink-700) !important; }
.main-content .border-gray-300 { border-color: var(--tt-ink-300) !important; }

/* 무대 표시는 어두운 판이 의도된 디자인이므로 대비만 보장합니다. */
.main-content .bg-gray-800 { background-color: var(--tt-ink-900) !important; }
.main-content .bg-gray-800.text-white { color: var(--tt-surface) !important; }

/* --- 공통 버튼 클래스 -------------------------------------------------------
   페이지마다 버튼을 직접 스타일링하다 보니 18종으로 갈라졌습니다.
   새로 만드는 버튼은 아래 클래스를 쓰십시오.
     tt-btn-primary : 주 동작(파란 채움)
     tt-btn-ghost   : 보조 동작(회색 채움)
   ------------------------------------------------------------------------- */
.tt-btn {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--tt-r-md);
	cursor: pointer;
	transition: background-color .15s ease, transform .12s ease;
}

.tt-btn:active { transform: translateY(1px); }

.tt-btn-primary { background: var(--tt-blue-600); color: #fff; }
.tt-btn-primary:hover { background: var(--tt-blue-700); }

.tt-btn-ghost { background: var(--tt-ink-100); color: var(--tt-ink-700); }
.tt-btn-ghost:hover { background: var(--tt-ink-300); }

/* 게임 페이지의 설명 카드. 인라인으로 8px·raw 그림자를 쓰고 있어
   다른 페이지 카드(18px)와 달라 보였습니다. */
.main-content .semantic-content {
	text-align: left;
	padding: var(--tt-s4);
	margin-top: var(--tt-s4);
	background: var(--tt-surface);
	border-radius: var(--tt-r-lg);
	box-shadow: var(--tt-sh-sm), var(--tt-ring);
}

/* Tailwind 를 쓰는 페이지(book·survey)는 preflight 가 h1 크기를 지워
   본문 글자와 같은 16px 로 나옵니다. 시스템 H1 로 되돌립니다. */
/* Tailwind preflight 는 h1 크기를 지웁니다. survey.php 는 h1 이 main 밖에 있어
   컨테이너로 한정하면 걸리지 않으므로 body 기준으로 되돌립니다. */
body h1,
.main-content > h1,
.main-content h1:not(.tt-guide-h) {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tt-ink-900);
}

@media (max-width: 480px) {
	body h1,
	.main-content > h1,
	.main-content h1:not(.tt-guide-h) { font-size: 1.6rem; }
}

/* /embed 미리보기의 출처 링크(백링크) 표시 */
.tt-embed-attr {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
}
.tt-embed-attr a { color: var(--tt-ink-700); }
.tt-embed-attr a:hover { color: var(--tt-blue-500); }

/* ===== Mobile Responsive Image & Layout Overflow Fix v2.0 ===== */
html, body {
	max-width: 100% !important;
	width: 100% !important;
	overflow-x: hidden !important;
}

*, *::before, *::after {
	box-sizing: border-box;
}

img, video, embed, object, picture, figure, canvas, svg {
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box !important;
}

iframe {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* 구글 애드센스 및 사이드바 광고 iframe 높이 잘림 완벽 방지 */
ins.adsbygoogle iframe,
.adsbygoogle iframe,
iframe[id*="aswift"],
iframe[name*="aswift"],
iframe[src*="googleads"],
iframe[src*="doubleclick"],
iframe[src*="googlesyndication"] {
	max-width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: none !important;
	overflow: visible !important;
}

figure {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

.b1-wrapper, .container, .content-area, .hero, .analysis-card, 
.threads-post, .related-section, .related-card-list, .content-header-container {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.main-image, .content-header-container img, .analysis-card img, 
.threads-body img, .hero img, .article-body img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.hero {
		padding: 24px 16px 20px !important;
		max-width: 100% !important;
	}
	.content-area, .b1-wrapper {
		padding-left: 12px !important;
		padding-right: 12px !important;
		max-width: 100% !important;
	}
	.hero-title {
		font-size: 20px !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}
}

/* ===== Ad Unit Container Containment Fix ===== */
.ad-unit, .tt-ad-container, .tt-ad-inner {
	margin: 24px 0 !important;
	text-align: center !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 100px;
	overflow: visible !important;
	box-sizing: border-box !important;
}
.ad-unit iframe, .tt-ad-inner iframe, .adsbygoogle iframe {
	max-width: 100% !important;
}
.ad-unit .ad-label {
	display: block;
	font-size: 11px;
	color: #94a3b8;
	text-align: center;
	margin-bottom: 6px;
}

/* ===== Desktop PC (width > 768px): Centered Layout with Margins ===== */
@media (min-width: 769px) {
	/* [수정] 원래 .container가 이 목록에 같이 걸려 있었습니다. .container는 홈/캘린더 등
	   36개 이상 페이지가 공유하는 범용 래퍼인데, 기사 본문(.hero, .b1-wrapper 등)만
	   860px로 좁히려던 규칙에 실수로 끼어 있어서 사이트 전역이 의도한 1040px 대신
	   860px로 눌려 있었습니다(캘린더 페이지 가로 폭 문제의 원인). .container를 빼서
	   기사 페이지 폭은 그대로 두고, 나머지 페이지는 원래 설계 폭(1040px)을 되찾습니다. */
	.e1-wrapper, .b1-wrapper, .content-area, .hero, .content-header-container, .analysis-section {
		max-width: 860px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		box-sizing: border-box !important;
	}

	#home-container {
		max-width: var(--tt-w-page) !important;
	}

	/* 홈 카드(섹션) 사이 여백을 줄여 스크롤 없이 더 많은 내용이 보이게 합니다.
	   카드 자체 폭/내용은 그대로라 SEO·CLS 영향 없이 여백만 조정됩니다. */
	#home-container section {
		margin: 16px auto;
		padding: 24px 24px;
	}
	#home-container .main-content {
		padding: 20px 0 32px;
	}
}

/* ===== Opinion Section (주요쟁점분석) Mobile Containment & Overflow Fix ===== */
.opinion-section {
	width: 100% !important;
	max-width: 100% !important;
	margin: 28px 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

.opinion-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 14px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.opinion-card {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 14px !important;
	padding: 20px 16px !important;
	position: relative !important;
	overflow: hidden !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
}

.opinion-card-header {
	font-size: 14px !important;
	font-weight: 700 !important;
	margin-bottom: 12px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	max-width: 100% !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
}

.opinion-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.opinion-list li {
	font-size: 14px !important;
	line-height: 1.65 !important;
	padding: 8px 0 8px 20px !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
	.opinion-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.opinion-card {
		padding: 16px 14px !important;
		width: 100% !important;
	}
}

/* ===== Google Auto Ads Exclusion Protection ===== */
.summary-box, .summary-box *, .google-auto-ads-no-ad, .google-auto-ads-no-ad * {
	google-auto-ads: ignore !important;
}

/* ===== Related Article Cards PC & Mobile Layout Fix ===== */
.related-card-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 12px !important;
	margin-top: 16px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.related-card-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 10px 12px !important;
	background: var(--tt-surface, #ffffff) !important;
	border: 1px solid var(--tt-ink-300, #e2e8f0) !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	color: var(--tt-ink-900, #1e293b) !important;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

.related-card-item:hover {
	transform: translateY(-2px) !important;
	border-color: var(--tt-blue-500, #0066ff) !important;
	box-shadow: 0 4px 12px rgba(0, 102, 255, 0.12) !important;
}

.related-card-thumb-wrap {
	position: relative !important;
	width: 84px !important;
	height: 64px !important;
	flex-shrink: 0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background-color: var(--tt-ink-100, #f1f5f9) !important;
	max-width: 84px !important;
}

.related-card-thumb-wrap img,
.related-card-thumb {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	position: relative !important;
	z-index: 1 !important;
}

.related-card-num {
	position: absolute !important;
	top: 4px !important;
	left: 4px !important;
	z-index: 10 !important;
	background: rgba(0, 102, 255, 0.92) !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	line-height: 1.3 !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.related-card-content {
	flex: 1 !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

.related-card-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--tt-ink-900, #0f172a) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
}

.related-card-meta {
	font-size: 12px !important;
	color: var(--tt-blue-500, #0066ff) !important;
	font-weight: 600 !important;
	margin-top: 4px !important;
}

@media (max-width: 600px) {
	.related-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}
	.related-card-item {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 8px !important;
		gap: 6px !important;
	}
	.related-card-thumb-wrap {
		width: 100% !important;
		max-width: 100% !important;
		height: 90px !important;
	}
	.related-card-title {
		font-size: 12px !important;
		line-height: 1.35 !important;
	}
	.related-card-meta {
		font-size: 11px !important;
		margin-top: 2px !important;
	}
}

/* ===========================================================================
   문서 및 푸터 상세페이지 (Terms, Privacy, FAQ, Notice, About, Guide, Support)
   --------------------------------------------------------------------------- */
.doc-card {
	background: var(--tt-surface, #ffffff);
	border: 1px solid var(--tt-ink-300, #d0d5dd);
	border-radius: 16px;
	box-shadow: var(--tt-sh-sm, 0 1px 3px rgba(0, 0, 0, .05));
	padding: 32px 28px;
	margin: 0 auto 32px auto;
	max-width: 800px;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.doc-card h1 {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem);
	font-weight: 800;
	color: var(--tt-ink-900, #101828);
	margin: 0 0 10px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: -0.02em;
}

.doc-card .doc-effective {
	font-size: 13.5px;
	color: var(--tt-ink-500, #667085);
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tt-ink-100, #f2f4f7);
}

.doc-card h2 {
	font-size: clamp(1.1rem, 1.0rem + 0.5vw, 1.3rem);
	font-weight: 700;
	color: var(--tt-blue-text, #0044cc);
	margin: 28px 0 12px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.doc-card h3 {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--tt-ink-900, #101828);
	margin: 20px 0 8px 0;
}

.doc-card p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--tt-ink-700, #344054);
	margin: 0 0 12px 0;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.doc-card ul, .doc-card ol {
	padding-left: 22px;
	margin: 0 0 18px 0;
	color: var(--tt-ink-700, #344054);
	font-size: 15px;
	line-height: 1.75;
}

.doc-card li {
	margin-bottom: 8px;
}

.doc-card a {
	color: var(--tt-blue-500, #0066ff);
	text-decoration: underline;
	font-weight: 600;
}

.doc-card a:hover {
	color: var(--tt-blue-700, #0038a8);
}

.doc-card table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--tt-ink-300, #d0d5dd);
	margin: 16px 0 24px 0;
}

.doc-card th {
	background: var(--tt-blue-50, #eef4ff);
	color: var(--tt-blue-text, #0044cc);
	font-weight: 700;
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--tt-ink-300, #d0d5dd);
	font-size: 14px;
}

.doc-card td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--tt-ink-100, #f2f4f7);
	color: var(--tt-ink-700, #344054);
	font-size: 14px;
}

.doc-card tr:last-child td {
	border-bottom: none;
}

.doc-card .notice-box {
	background: var(--tt-blue-50, #eef4ff);
	border: 1px solid var(--tt-ink-300, #d0d5dd);
	border-radius: 12px;
	padding: 16px 20px;
	margin: 20px 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--tt-ink-900, #101828);
}

@media (max-width: 768px) {
	.doc-card {
		padding: 20px 14px;
		border-radius: 12px;
		margin-bottom: 20px;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}
	.doc-card h1 {
		font-size: 1.35rem;
	}
	.doc-card h2 {
		font-size: 1.1rem;
		margin: 20px 0 10px 0;
	}
	.doc-card p, .doc-card li {
		font-size: 14px;
	}
	.doc-card .notice-box {
		padding: 14px 14px;
		font-size: 13.5px;
	}
}