#asciiArea { touch-action: manipulation; }
body { min-height: 100dvh; }


@font-face {
    font-family: 'Wanju';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/TTWanjunuricheR.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SfHambakneun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MissedSimsim';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/Griun_Simsimche-Rg.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  background: #f6f6f6;
  overflow: hidden;
}

/* 화면 전체 */
.ascii-wrap {
  position: fixed;
  inset: 0;
  background: #f6f6f6;
  overflow: hidden;
}

.ascii-center{
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 아스키 컨테이너 */
.ascii-container{
  will-change: transform;
  transform-origin: center center;
  width: fit-content;
}


.gif-wrapper {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;   /* 🎯 원하는 크기로 축소 */
  height: auto;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
}

.floating-gif {
  position: absolute;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;   /* 원하는 크기 */
  pointer-events: none;
  z-index: 999;
}


.center-area {
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 30;
  pointer-events: none;
}

.center-message {
  font-family: 'MissedSimsim', sans-serif;
  font-size: 22px;
  line-height: 1.5;
  color: #222;
  opacity: 0;
  animation: floatUp 2s cubic-bezier(.25,.46,.45,.94) forwards;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(40px); /* X축 제거 */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 제자리 */
  }
}

@keyframes sparkle {
  0%   { color: #444; }
  50%  { color: var(--sparkle-color, #ff6b6b); }
  100% { color: #444; }
}


.countdown {
  margin-top: 10px;
  font-family: 'MissedSimsim', sans-serif;
  font-size: 18px;
  color: #333;
  opacity: 0;
  animation: fadeIn 2s ease forwards 1.8s;
}


.countdown .num {
  display: inline-block;
  font-weight: bold;
  animation: sparkle 1.5s infinite;
}

.countdown .label {
  color: #222; /* 고정 검정색 */
  margin-right: 4px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 아스키 자체 */
.ascii-bg {
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  font-family: monospace;
  font-weight: bold;
  white-space: pre;
  line-height: 3px;
  font-size: 7px;
  cursor: pointer;
}

/* 드로잉 영역 */
.drawing-area {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  overflow: auto;
}




/* 부드러운 떠오름 */
@keyframes float {
  0% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-6px); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}


@media (max-width: 767px){
  .countdown{
    font-size: 13px;      /* <- 여기 숫자 줄이면 더 작아짐 */
    line-height: 1.2;
    white-space: nowrap;  /* ✅ 무조건 한 줄 */
    letter-spacing: -0.2px;
  }

  .countdown .label{
    margin-right: 2px;    /* 간격 줄이기 */
  }

  .countdown .num{
    margin-right: 2px;    /* 숫자-라벨 붙는 느낌 */
  }
}