/* 히어로 제목 효과(tech-text.js)용 스타일 */
.tt-title {
  font-size: 1.875rem;            /* 제목 h2와 같은 크기(단위 em 기준) */
  margin: -0.3em 0 0.2em;
}
@media (min-width: 768px)  { .tt-title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .tt-title { font-size: 3rem; } }

.tt-line {
  position: relative;
  height: 1.8em;
  margin: 0 -12px;                 /* 선택 프레임이 잘리지 않도록 좌우 여유 */
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity .8s ease, transform .8s ease;
  touch-action: pan-y;             /* 세로 스크롤은 그대로, 가로로 글자 끌기 */
  -webkit-user-select: none;
  user-select: none;
}
.tt-line + .tt-line { margin-top: -0.3em; }
.tt-line.is-ready { opacity: 1; transform: none; }
.tt-line:nth-child(2) { transition-delay: .15s; }
.tt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 원래 제목은 화면에서만 숨기고 검색·스크린리더용으로 남긴다 */
.tt-active {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tt-line { transition: none; transform: none; }
}