/* --- [TMS ARCHIVE GLOBAL STYLESHEET V3.0 - INTEGRATED] --- */
/* =========================================================
   TMS ARCHIVE LOCAL FONT SYSTEM
   Path: /tms/assets/fonts/
   ========================================================= */

/* [1] Roboto Mono (메인: 영문, 숫자, 코드) */
@font-face {
    font-family: 'Roboto Mono';
    font-weight: 400; /* Regular */
    src: url('/tms/assets/fonts/roboto-mono-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    font-weight: 700; /* Bold */
    src: url('/tms/assets/fonts/roboto-mono-700.woff2') format('woff2');
    font-display: swap;
}

/* [2] Noto Sans KR (한국어) */
@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 400; /* Regular */
    src: url('/tms/assets/fonts/noto-sans-kr-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 700; /* Bold */
    src: url('/tms/assets/fonts/noto-sans-kr-700.woff2') format('woff2');
    font-display: swap;
}

/* [3] Noto Sans JP (일본어) */
@font-face {
    font-family: 'Noto Sans JP';
    font-weight: 400; /* Regular */
    src: url('/tms/assets/fonts/noto-sans-jp-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-weight: 700; /* Bold */
    src: url('/tms/assets/fonts/noto-sans-jp-700.woff2') format('woff2');
    font-display: swap;
}


/* =========================================================
   GLOBAL STYLE APPLICATION (Language Intelligent)
   ========================================================= */

body {
    background-color: #0d0d0d;
    color: #e0e0e0;
    /* 기본: Roboto Mono 우선 (영문, 숫자 예쁘게 나옴) */
    font-family: 'Roboto Mono', 'Noto Sans KR', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 한국어(KR) 페이지 전용 폰트 우선순위 */
html:lang(ko) body {
    font-family: 'Roboto Mono', 'Noto Sans KR', sans-serif;
}

/* 일본어(JP) 페이지 전용 폰트 우선순위 */
html:lang(ja) body {
    font-family: 'Roboto Mono', 'Noto Sans JP', sans-serif;
}

/* 타이틀이나 강조 텍스트 */
h1, h2, h3, .bold {
    font-weight: 700;
}






:root {
	--bg-color: #121212;
	--text-color: #e0e0e0;
	--lang-accent-color: #39FF14;
	--accent-color: #ffffff;
	--dim-color: #666666;
	--warning-color: #ffcc00;
	--alert-color: #ff3333; /* 녹화 표시용 빨강 */
	--highlight-bg: rgba(255, 255, 255, 0.05); /* 리스트 호버 배경 */
	--font-stack: 'Roboto Mono', 'Noto Sans KR', 'Noto Sans JP', 'Courier New', monospace, sans-serif;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-stack);
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.1rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- [언어 선택 터미널 바 (우측 정렬)] --- */
.lang-bar {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #333;
  margin-bottom: 2rem;
  font-size: 0.75rem;
}

.lang-link {
  color: #fff; /* 비활성: 어둡게 */
  transition: all 0.3s;
}

.lang-link:hover { color: var(--warning-color); }

.lang-link.active {
  color: var(--lang-accent-color);
  font-weight: bold;
  cursor: default;
  text-decoration: underline;
}

/* --- [헤더] --- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #333;
  margin-bottom: 1rem;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--accent-color);
  letter-spacing: 2px;
}

nav a {
  color: var(--text-color);
  margin-left: 2rem;
  font-size: 0.9rem;
  opacity: 0.7;
}
nav a:hover { opacity: 1; color: var(--accent-color); text-decoration: underline; }

.top-nav{margin-bottom:20px;}

/* --- [메인 콘텐츠] --- */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero-copy {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  min-height: 3em;
  white-space: pre-wrap;
}
.cursor {
  display: inline-block; width: 10px; background-color: var(--accent-color);
  margin-left: 2px; animation: blink 1s step-end infinite; vertical-align: text-bottom;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- [최신 비디오 섹션] --- */
.latest-video-section {
  /*width: 100%;*/
  margin-bottom: 4rem;
  border: 1px solid #333;
  padding: 10px;
  background-color: #0f0f0f;
}

.video-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: var(--warning-color);
  font-weight: bold;
}

.rec-indicator { color: var(--alert-color); animation: blink 1.5s infinite; }

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율 */
  height: 0;
  overflow: hidden;
  background-color: #000;
}
.video-wrapper iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
.video-caption { margin-top: 10px; font-size: 0.8rem; color: #d2d2d2; text-align: right; }

/* --- [아카이브 리스트 (업그레이드됨)] --- */
.archive-preview {
  width: 100%;
  border-top: 1px solid #333;
  padding-top: 2rem;
}

.archive-header {
  font-size: 0.9rem;
  opacity: 0.6;
  margin-bottom: 1.5rem;
  margin-left: 1rem;
  display: block;
  font-weight: bold;
}

.file-item {
  margin-bottom: 1rem; /* 아이템 간 간격 */
  border-bottom: 1px dashed #d2d2d2;
}

/* [중요] 링크를 블록 요소로 변경하여 박스 전체 클릭 가능하게 함 */
.file-link {
  display: block; 
  padding: 1rem;
  border: 1px solid transparent; /* 호버 시 테두리를 위해 투명 선언 */
  transition: all 0.3s ease;
}

.file-link:hover {
  background-color: var(--highlight-bg);
  border-color: #333;
  transform: translateX(5px); /* 살짝 오른쪽으로 이동 효과 */
}

/* 상단 정보 줄 (ID + 제목 + 상태) */
.file-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem; /* 개요와의 간격 */
  flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
  gap: 10px;
}



.file-id { color: var(--accent-color); font-weight: bold; margin-right: 10px; }
.file-title { font-weight: bold; text-decoration: underline; text-underline-offset: 4px; }

.file-status { font-size: 0.75rem; padding: 2px 6px; border: 1px solid #333; min-width: auto; }
.status-new { color: var(--bg-color); background: var(--accent-color); border: none; font-weight: bold; }
.status-warn { color: var(--warning-color); border-color: var(--warning-color); }
.status-dim { color: #555; border-color: #333; }

/* [핵심] 3줄 요약 스타일 */
.file-summary {
    /* 1. 폰트 및 가독성 설정 */
    font-size: 0.95rem;          /* PC 기본 크기 */
    color: rgba(255, 255, 255, 0.7);
    line-height: 2;            /* 줄 간격 (글자 크기의 1.5배) */
    margin: 0;
    
    /* 2. [핵심] 3줄 컷팅 매직 코드 (PC/모바일 공통) */
    display: -webkit-box;        /* 플렉스 박스 계열의 구형 스펙 사용 (필수) */
    -webkit-line-clamp: 3;       /* 정확히 3번째 줄에서 자름 */
    -webkit-box-orient: vertical;/* 박스 방향을 수직으로 */
    overflow: hidden;            /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis;     /* 잘린 부분에 '...' 표시 */
    
    /* 3. 단어 끊기 설정 (긴 영단어가 있어도 레이아웃 안 깨지게) */
    word-break: break-word;      
    overflow-wrap: break-word;
}

/* --- [페이지네이션] --- */
.pagination {
  margin-top: 2rem;
  display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 0.9rem;
}
.page-link {
  color: var(--dim-color); padding: 5px 10px; border: 1px solid transparent;
}
.page-link:hover { color: var(--accent-color); border-color: #333; }
.page-link.active { color: var(--accent-color); font-weight: bold; border: 1px solid var(--accent-color); }
.page-link.disabled { pointer-events: none; opacity: 0.3; }

/* --- [푸터 & 글리치] --- */
footer {
  text-align: center; padding-top: 3rem; font-size: 0.8rem; opacity: 0.5;
  padding-bottom: 1rem; border-bottom: 1px dashed #333; margin-top: 2rem;
}

  /* 글리치 경고문 (하단) */
  .disclaimer-glitch {
    margin-top: 1rem; margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #333;
    background-color: #0a0a0a;
    font-size: 0.7rem;
    color: var(--dim-color);
    position: relative;
    overflow: hidden;
    opacity: 0.6;
  }
  .disclaimer-glitch::before, .disclaimer-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a0a; }
  .disclaimer-glitch::before { left: 2px; text-shadow: -1px 0 red; animation: glitch-anim-1 2s infinite linear alternate-reverse; }
  .disclaimer-glitch::after { left: -2px; text-shadow: -1px 0 blue; animation: glitch-anim-2 3s infinite linear alternate-reverse; }
  @keyframes glitch-anim-1 { 0% { clip: rect(20px, 9999px, 15px, 0); } 20% { clip: rect(60px, 9999px, 70px, 0); } 40% { clip: rect(20px, 9999px, 15px, 0); } 60% { clip: rect(80px, 9999px, 50px, 0); } 80% { clip: rect(10px, 9999px, 55px, 0); } 100% { clip: rect(30px, 9999px, 40px, 0); } }
  @keyframes glitch-anim-2 { 0% { clip: rect(10px, 9999px, 50px, 0); } 20% { clip: rect(30px, 9999px, 10px, 0); } 40% { clip: rect(50px, 9999px, 60px, 0); } 60% { clip: rect(70px, 9999px, 30px, 0); } 80% { clip: rect(20px, 9999px, 40px, 0); } 100% { clip: rect(10px, 9999px, 30px, 0); } }


/* --- [📱 모바일 최적화] --- */
@media (max-width: 600px) {
  header { flex-direction: column; align-items: flex-start; }
  nav { margin-top: 1.5rem; }
  nav a { margin-left: 0; margin-right: 1.5rem; }
  
  .hero-copy { font-size: 1.2rem; }
  
  /* 모바일에서 리스트 레이아웃 조정 */
    .file-info-row {
        flex-direction: column; /* 가로 배치를 세로(위아래) 배치로 변경 */
    }

    /* 제목 그룹 (ID + Title) */
    .file-info-row > span:first-child {
        width: 100%; /* 제목이 줄 전체를 차지하게 함 */
        margin-bottom: 6px; /* 아래쪽 상태 배지와의 간격 */
        line-height: 1.4; /* 줄 간격 확보 */
    }

    /* 상태 배지 (ARCHIVED 등) */
    .file-status {
        align-self: flex-end; /* 부모 박스 안에서 혼자만 '오른쪽'으로 이동 */
        margin-top: 0; /* 불필요한 여백 제거 */
        /* float: right; <-- 더 이상 필요 없음 */
    }
  
  /* 요약문 글자 크기 축소 */
	.file-summary {
		font-size: 1rem;      /* 글자를 약간 작게 줄임 */
		line-height: 2;        /* 줄 간격도 조금 더 타이트하게 */
		/* 모바일에서도 3줄 유지 (만약 2줄로 줄이고 싶으면 여기를 2로 변경) */
		-webkit-line-clamp: 3;   
	}
}



/* TMS Counter Widget Style *******************************************************/
	/* 메인 페이지용 */
	.tms-counter-box {
		position: fixed;
		bottom: 20px;
		left: 20px; /* 왼쪽 하단 배치 */
		background: rgba(0, 0, 0, 0.7);
		border: 1px solid #0d3305;
		padding: 10px;
		font-family: 'Courier New', Courier, monospace;
		color: #39FF14; /* 형광 그린 */
		font-size: 0.7rem;
		z-index: 100;
		min-width: 120px;
		backdrop-filter: blur(2px);
		user-select: none;
	}

	.tms-counter-box .counter-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 2px;
	}

	.tms-counter-box .label { opacity: 0.7; }
	.tms-counter-box .value { font-weight: bold; text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); }
	.tms-counter-box .counter-divider { opacity: 0.3; margin: 3px 0; font-size: 0.6rem; }
	.tms-counter-box .sub { color: #ccffcc; } /* 서브 텍스트는 약간 밝게 */


	/* 서브 페이지용 가로바 스타일 (Bar Type) */
	.tms-counter-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 30px; /* 높이 고정 */
		background: rgba(0, 0, 0, 0.9); /* 배경 진하게 */
		border-top: 1px solid #0d3305;
		
		display: flex;
		align-items: center;
		justify-content: center; /* 중앙 정렬 */
		gap: 0; /* 간격은 padding으로 조절 */
		
		font-family: 'Courier New', Courier, monospace;
		color: #39FF14;
		font-size: 0.75rem;
		z-index: 9999;
		backdrop-filter: blur(4px);
		user-select: none;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
	}

	/* 개별 아이템 */
	.tms-bar-item {
		display: flex;
		align-items: center;
		padding: 0 15px;
		position: relative;
	}

	/* 아이템 사이 구분선 (|) */
	.tms-bar-item:not(:last-child)::after {
		content: "|";
		position: absolute;
		right: 0;
		color: #0d3305; /* 구분선은 어둡게 */
		font-weight: normal;
	}

	.tms-bar-label { opacity: 0.6; margin-right: 5px; }
	.tms-bar-value { font-weight: bold; color: #ccffcc; }

	/* 모바일 대응 */
	@media (max-width: 600px) {
		.tms-counter-bar {
			justify-content: flex-start;
			overflow-x: auto; /* 가로 스크롤 */
			padding-left: 10px;
			white-space: nowrap;
		}
		/* 스크롤바 숨김 */
		.tms-counter-bar::-webkit-scrollbar { display: none; } 
	}
/* TMS Counter Widget Style *******************************************************/






/* TMS NOTICE *******************************************************/
        /* 이 페이지 전용 스타일 (보고서 느낌) */
        .report-header {
            border-bottom: 2px solid var(--accent-color, #00ff00);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .report-meta {
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: #888;
            margin-bottom: 5px;
        }
        .highlight-red {
            color: #ff3333;
            font-weight: bold;
        }
        .highlight-green {
            color: #00ff00;
            font-weight: bold;
        }
        .back-btn {
            display: inline-block;
            margin-top: 30px;
            color: #fff;
            text-decoration: none;
            border: 1px solid #555;
            padding: 5px 15px;
            font-size: 0.8rem;
            transition: 0.3s;
        }
        .back-btn:hover {
            background: #333;
            border-color: #fff;
        }
/* TMS NOTICE *******************************************************/





  /* --- [ABOUT 페이지 전용 스타일] --- */
	  /* ASCII 로고 박스 */
	  .ascii-logo {
		font-family: 'Courier New', Courier, monospace !important; /* 고정폭 폰트 강제 */
		line-height: 1.2 !important; /* 줄 간격 고정 */
		letter-spacing: 0px !important; /* 자간 초기화 */
		white-space: pre; /* 공백 유지 */
		display: inline-block;
		text-align: left;
		
		font-size: 0.8rem;
		line-height: 1.2;
		white-space: pre;
		color: var(--accent-color);
		margin-bottom: 3rem;
		opacity: 0.8;
		text-align: center;
		border: 1px dashed #333;
		padding: 2rem 0;
	  }

	  h1 {
		font-size: 1.5rem;
		border-bottom: 2px solid var(--accent-color);
		padding-bottom: 1rem;
		margin-bottom: 2rem;
		text-transform: uppercase;
	  }

	  h2 {
		font-size: 1.1rem;
		color: var(--warning-color);
		margin-top: 3rem;
		margin-bottom: 1rem;
	  }

	  p { margin-bottom: 1.5rem; text-align: justify; }

	  /* 기밀 처리된 텍스트 (마우스 올리면 보임) */
	  .redacted {
		background-color: var(--text-color);
		color: var(--text-color); /* 글자색과 배경색을 같게 해서 숨김 */
		padding: 0 5px;
		cursor: help;
		transition: all 0.3s ease;
	  }
	  .redacted:hover {
		background-color: transparent;
		color: var(--alert-color); /* 호버 시 빨간 글씨로 등장 */
		text-decoration: underline;
	  }

	  /* 인용구 스타일 */
	  .manifesto-quote {
		border-left: 4px solid var(--dim-color);
		padding-left: 1rem;
		font-style: italic;
		color: #999;
		margin: 2rem 0;
	  }

	  /* 연락처/제보 섹션 */
	  .contact-section {
		margin-top: 4rem;
		padding: 2rem;
		border: 1px solid #333;
		background-color: #0f0f0f;
	  }
	  .contact-email {
		color: var(--accent-color);
		font-weight: bold;
		font-size: 1.2rem;
		display: block;
		margin-top: 1rem;
		text-decoration: none;
	  }
  /* --- [ABOUT 페이지 전용 스타일] --- */
  
  
/* --- 메인 화면 긴급 공지 스타일 --- */
	.emergency-notice {
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom:20px;
		width: 90%; 
		max-width: 800px; /* 너무 넓게 퍼지지 않도록 제한 */
		border: 1px solid #ff3333; /* 붉은색 경고 테두리 */
		background: rgba(30, 0, 0, 0.6); /* 어두운 붉은 배경 */
		padding: 15px;
		text-align: left; /* 텍스트는 왼쪽 정렬 */
		transition: 0.3s;
		box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
	}

	.emergency-notice:hover {
		background: rgba(50, 0, 0, 0.8);
		box-shadow: 0 0 15px rgba(255, 0, 0, 0.6); /* 마우스 올리면 붉은 빛 발산 */
		transform: scale(1.02); /* 살짝 커짐 */
		cursor: pointer;
	}

	.notice-link {
		text-decoration: none;
		color: #ccc;
		display: block; /* 박스 전체 클릭 가능 */
	}

	.notice-header {
		font-family: 'Courier New', monospace;
		color: #ff3333; /* 붉은색 글씨 */
		font-weight: bold;
		font-size: 0.9rem;
		margin-bottom: 10px;
		border-bottom: 1px dashed #555;
		padding-bottom: 5px;
		animation: blink 2s infinite; /* 깜빡이는 효과 */
	}

	.emergency-notice ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.emergency-notice li {
		font-size: 0.8rem;
		line-height: 1.6;
		color: #ddd;
		font-family: sans-serif; /* 가독성을 위해 고딕 계열 */
	}

	.lang-code {
		display: inline-block;
		width: 35px;
		color: #ff8888; /* 언어 코드는 연한 붉은색 */
		font-weight: bold;
		font-size: 0.7rem;
	}

	/* 깜빡임 애니메이션 */
	@keyframes blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
	}

	/* 모바일 대응 */
	@media screen and (max-width: 768px) {
		.emergency-notice {
			width: 90%; /* 모바일에서는 폭을 좀 더 넓게 */
			padding: 10px;
		}
		.emergency-notice li {
			font-size: 0.75rem; /* 글씨 크기 약간 줄임 */
		}
	}
/* --- 메인 화면 긴급 공지 스타일 --- */




/* --- VIEW --- */

  .case-header { display:block;border: 1px solid var(--text-color); padding: 1.5rem; margin-bottom: 3rem; background-color: rgba(255,255,255,0.02); }
  .case-title { font-size: 1.4rem; font-weight: bold; color: var(--accent-color); margin: 0 0 1rem 0; border-bottom: 1px dashed #555; padding-bottom: 0.5rem; }

  /* 그리드 설정 (minmax는 유지하되, 내용은 언어설정 따라감) */
  .meta-grid { 
      display: grid; 
      grid-template-columns: 100px minmax(0, 1fr); 
      gap: 0.5rem; 
      font-size: 0.9rem; 
  }
  .meta-label { opacity: 0.6; }
  .meta-value { color: var(--accent-color); }
  .status-tag { color: var(--warning-color); font-weight: bold; }

  /* 본문 스타일 */
  article { flex: 1; margin-bottom: 4rem; }
  h2 { font-size: 1.1rem; color: var(--accent-color); border-left: 3px solid var(--accent-color); padding-left: 10px; margin-top: 3rem; margin-bottom: 1.5rem; text-transform: uppercase; }
  h3 { font-size: 1rem; color: var(--text-color); margin-top: 2rem; margin-bottom: 1rem; opacity: 0.9; text-decoration: underline; }
  
  p { 
      margin-bottom: 1.5rem; 
      text-align: justify; 
  }
  
  ul { padding-left: 0rem; margin-bottom: 2rem; }
  li { margin-bottom: 0.5rem; }

  /* --- [비디오 플레이어 등 나머지 스타일 그대로 유지] --- */
  .evidence-video-container { margin: 4rem 0; border: 1px solid #333; padding: 5px; background-color: #0f0f0f; }
  .video-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--warning-color); font-weight: bold; margin-bottom: 5px; padding-left: 5px; }
  .playing-indicator { color: var(--alert-color); animation: blink 1.5s infinite; }
  .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: #000; }
  .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

  .evidence-box { border: 1px solid var(--alert-color); color: var(--alert-color); padding: 1.5rem; margin: 2rem 0; font-weight: bold; background-color: rgba(255, 51, 51, 0.05); }
  .evidence-label { font-size: 0.8rem; display: block; margin-bottom: 0.5rem; opacity: 0.8; }

  .content-block { display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 2rem; }
  .evidence-figure { flex: 0 0 300px; margin: 0; border: 2px solid #333; background-color: #000; padding: 5px; cursor: pointer; transition: border-color 0.3s ease; }
  .evidence-figure:hover { border-color: var(--warning-color); }
  .evidence-img { width: 100%; height: auto; display: block; filter: contrast(1.2) grayscale(0.7) sepia(0.2); border-bottom: 1px dotted #333; }
  .evidence-caption { font-size: 0.75rem; color: var(--warning-color); background-color: #1a1a1a; padding: 5px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
  .text-content { flex: 1; }

  .gallery-section { margin-top: 5rem; border-top: 2px solid #333; padding-top: 2rem; }
  .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .gallery-item { cursor: pointer; overflow: hidden; border: 1px solid #333; transition: all 0.3s ease; background: #000; }
  .gallery-item:hover { border-color: var(--warning-color); transform: translateY(-2px); }
  .gallery-thumb { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1 / 1; filter: grayscale(100%) contrast(1.2); transition: filter 0.3s ease; }
  .gallery-item:hover .gallery-thumb { filter: grayscale(0%) contrast(1.0); }

  .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; }
  .modal-overlay.active { opacity: 1; }
  .modal-content { width: auto; height: auto; max-width: 95vw; max-height: 95vh; background-color: transparent; padding: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .modal-img { max-width: 100%; max-height: 85vh; width: auto; height: auto; display: block; border: 1px solid #333; box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); object-fit: contain; }
  .modal-caption { margin-top: 15px; color: var(--warning-color); font-size: 1rem; text-align: center; font-weight: bold; background-color: #000; padding: 5px 10px; border: 1px solid #333; }
  .modal-close-hint { margin-top: 1rem; color: #666; font-size: 0.8rem; }

  .disclaimer-glitch { margin-top: 1rem; margin-bottom: 2rem; padding: 1rem; border: 1px solid #333; background-color: #0a0a0a; font-size: 0.7rem; color: var(--dim-color); position: relative; overflow: hidden; opacity: 0.6; }
  .disclaimer-glitch::before, .disclaimer-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a0a; }
  .disclaimer-glitch::before { left: 2px; text-shadow: -1px 0 red; animation: glitch-anim-1 2s infinite linear alternate-reverse; }
  .disclaimer-glitch::after { left: -2px; text-shadow: -1px 0 blue; animation: glitch-anim-2 3s infinite linear alternate-reverse; }
  @keyframes glitch-anim-1 { 0% { clip: rect(20px, 9999px, 15px, 0); } 20% { clip: rect(60px, 9999px, 70px, 0); } 40% { clip: rect(20px, 9999px, 15px, 0); } 60% { clip: rect(80px, 9999px, 50px, 0); } 80% { clip: rect(10px, 9999px, 55px, 0); } 100% { clip: rect(30px, 9999px, 40px, 0); } }
  @keyframes glitch-anim-2 { 0% { clip: rect(10px, 9999px, 50px, 0); } 20% { clip: rect(30px, 9999px, 10px, 0); } 40% { clip: rect(50px, 9999px, 60px, 0); } 60% { clip: rect(70px, 9999px, 30px, 0); } 80% { clip: rect(20px, 9999px, 40px, 0); } 100% { clip: rect(10px, 9999px, 30px, 0); } }

  .see-also { margin-top: 4rem; border-top: 1px dotted #555; padding-top: 2rem; font-size: 0.9rem; }
  .tag { display: inline-block; border: 1px solid #555; padding: 2px 8px; margin-right: 5px; margin-bottom: 5px; color: #888; text-decoration: none; transition: all 0.3s; }
  .tag:hover { border-color: var(--accent-color); color: var(--accent-color); }

  footer { text-align: center; font-size: 0.8rem; opacity: 0.4; padding-bottom: 1rem; margin-top: 2rem; border-bottom: 1px dashed #333; }

  /* [수정됨 3] 모바일 대응 스타일 */
  @media (max-width: 768px) {
    .container { padding: 1.5rem; }
    
    /* 모바일 그리드 */
    .meta-grid { 
        grid-template-columns: 80px minmax(0, 1fr); 
    }
    
    .content-block { flex-direction: column; }
    .evidence-figure { width: 100%; flex: none; order: -1; margin-bottom: 1rem; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* [중요] 모바일 텍스트 설정 */
    p {
        text-align: left !important;  
        /* 여기서 word-break를 강제하지 않습니다! */
        /* 위에서 설정한 언어별 규칙(keep-all vs break-all)을 따르게 둡니다. */
    }
  }
   
  .lang-bar { display: flex; justify-content: flex-end; gap: 15px; padding-bottom: 0.5rem; border-bottom: 1px dashed #333; margin-bottom: 2rem; font-size: 0.75rem; font-family: var(--font-stack); }
  .lang-link { text-decoration: none; color: #fff; transition: all 0.3s; }
  .lang-link:hover { color: var(--warning-color); }
  .lang-link.active { color: var(--lang-accent-color); font-weight: bold; cursor: default; }

/* TMS Counter Widget Style */
.tms-counter-box { position: fixed; bottom: 20px; left: 20px; background: rgba(0, 0, 0, 0.7); border: 1px solid #0d3305; padding: 10px; font-family: 'Courier New', Courier, monospace; color: #39FF14; font-size: 0.7rem; z-index: 100; min-width: 120px; backdrop-filter: blur(2px); user-select: none; }
.tms-counter-box .counter-row { display: flex; justify-content: space-between; margin-bottom: 2px; }
.tms-counter-box .label { opacity: 0.7; }
.tms-counter-box .value { font-weight: bold; text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); }
.tms-counter-box .counter-divider { opacity: 0.3; margin: 3px 0; font-size: 0.6rem; }
.tms-counter-box .sub { color: #ccffcc; }

/* 서브 페이지용 가로바 스타일 */
.tms-counter-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background: rgba(0, 0, 0, 0.9); border-top: 1px solid #0d3305; display: flex; align-items: center; justify-content: center; gap: 0; font-family: 'Courier New', Courier, monospace; color: #39FF14; font-size: 0.75rem; z-index: 9999; backdrop-filter: blur(4px); user-select: none; box-shadow: 0 -2px 10px rgba(0,0,0,0.5); }
.tms-bar-item { display: flex; align-items: center; padding: 0 15px; position: relative; }
.tms-bar-item:not(:last-child)::after { content: "|"; position: absolute; right: 0; color: #0d3305; font-weight: normal; }
.tms-bar-label { opacity: 0.6; margin-right: 5px; }
.tms-bar-value { font-weight: bold; color: #ccffcc; }
@media (max-width: 600px) { .tms-counter-bar { justify-content: flex-start; overflow-x: auto; padding-left: 10px; white-space: nowrap; } .tms-counter-bar::-webkit-scrollbar { display: none; } }
/* --- VIEW --- */


/* --- VOID TITLE --- */
.logo-container {
    padding: 20px 0;
    text-align: left; /* 기존 디자인에 따라 center로 변경 가능 */
}

.brand-link {
    text-decoration: none;
    display: inline-block;
}

.void-main {
    display: block;
    font-size: 2.2rem; /* 기존 타이틀보다 약간 더 강조 */
    font-weight: 800;
    color: #fff;
    letter-spacing: 6px;
    line-height: 1.1;
    font-family: 'Courier New', Courier, monospace; /* 기존 사이트 테마와 일치 */
}

.void-sub {
    display: block;
    font-size: 0.7rem;
    color: #666; /* 너무 튀지 않게 조정 */
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 5px;
}
/* --- VOID TITLE --- */