body {
    font-family: 'Batang', '바탕', serif, 'Courier New', Courier, monospace;
		font-size: calc(100vw / 107); 
		word-spacing: 0px;
		font-weight: normal;
		word-break: keep-all;
		background-color: white;
		color: black;
	}

  html, body {
  margin: 0;          /* ← 이게 없어서 한쪽이 더 넓어 보였을 가능성 큼 */
  padding: 0;
  overflow-x: hidden; /* 기존 유지 */
}

.canvas {
  width: 100vw;
  height: auto; /* 모바일에선 아래에서 svh로 오버라이드 */
  overflow: visible; /* 데스크톱 기본은 기존 동작 유지 */
}

header {
	position: fixed;
	top: 0;
	line-height: 0.9;
	letter-spacing: 0.9px;
	margin: 0 auto;
	width: 100%
}

#edgeFlash{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9998; /* 모달(9999)보다 아래 */
}
.edge-flash{
  animation: edge-flash .18s ease-out both;
}
@keyframes edge-flash{
  0%{opacity:0}
  40%{opacity:.55}
  100%{opacity:0}
}



.popup {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 0, 0);
}

.popup img {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  max-width: 600px;
  height: auto;
}

.popup .popup-close { display: none !important; }

pre {
  font-family: 'Courier New', Courier, monospace;
  display: block;
  width: max-content;
  margin: 0 auto;
  font-size: calc(100vw / 112);
  line-height: 1.2;
  white-space: pre;
}


article {
	margin: 0 auto;
/*	margin-top: 20px;*/


}


h1 {
		font-size: 16px;
		font-weight: bold;

	}	


	.bottom {
	font-size: 13px;
	background-color: black;
	color: yellow;
    position: fixed;
    bottom: 0;
    left: 0;
  }

 marquee:hover {
 	color: white;
 	background-color: black;
 }


 .contact {
  	color: green;
 }


 .contact a {
 	color: inherit;
 }


a { 
	color: black;
/*	text-decoration: none;*/
}


a:hover {
	color: gold;
}

section:target {
	opacity: 1;
}

::selection {  color: red;  background-color: yellow;}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;
  cursor: crosshair;
}

@keyframes fast-blink-effect {
  0% {
    color: gold;
    opacity: 1;
  }
  50% {
    color: black;
    opacity: 1;
  }
  100% {
    color: gold;
    opacity: 1;
  }
}

.fast-blink {
  animation: fast-blink-effect 0.5s step-end infinite;
  cursor: grab;
}

.fast-blink:hover {
  color: cyan;
  background-color: black; /* 배경까지 바꾸면 눈에 확 띔 */
}



/* ===== 모바일 전용(브레이크포인트는 필요시 조정) ===== */
@media (max-width: 768px) {
  /* 시스템 UI를 뺀 실제 뷰포트 높이 사용 (iOS 15+) */
  
  header {
    font-size: calc(240vw / 112);   /* body 폰트도 비슷하게 키움 */
    /* 핀치/더블탭 확대 방지 보강 */
    touch-action: manipulation; 
  }


  a, a:link, a:visited, a:hover, a:active, a:focus,
  header a, pre a {
    text-decoration: none !important;
    -webkit-text-decoration: none !important; /* iOS Safari 보강 */
    background-image: none !important;        /* 일부 reset 테마의 밑줄 대체 */
    border-bottom: none !important;           /* 밑줄을 border로 구현한 경우 */
  }

  .canvas {
    height: 100svh;
    overflow: auto;                 /* 이 안에서만 탐험 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;     /* 당겨서 새로고침/바운스 억제 */
    touch-action: pan-x pan-y;        /* 핀치 대신 패닝만 */
  }

  pre {
    font-size: calc(200vw / 112);   /* = 2x 확대 느낌 */
    line-height: 1.18;              /* 아스키 깨짐 방지 미세 조정 */
    width: max-content;
    margin: 0;                      /* 좌상단부터 탐험 시작 */
    white-space: pre;
  }

  .popup img {
    width: 60vw !important;       /* 너비 크게 */
    max-width: none !important;    /* 인라인의 max-width:30% 무효화 */
    height: auto !important;
    top: 50% !important;           /* 필요하면 중앙 정렬도 통일 */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #popup {
    pointer-events: none !important;     /* 배경 오버레이는 이벤트 통과 */
  }

  .popup .popup-close { display: none !important; }  /* X 숨김 (있다면) */
  #popup { pointer-events: none !important; }        /* 배경 터치 통과 */
  #popup img { pointer-events: auto !important; cursor: pointer; }


}