body {
  margin: 0; 
  height: 100vh; 
  display: flex;
  flex-direction: column; 
  overflow: hidden;
  
  background-color: #111;

  /* 비네팅 효과 */
  background-image:
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0) 50%,
      rgba(10, 20, 0, 0.6) 100%  /* 테두리 어두움 */
    );
  background-blend-mode: multiply;
}

.title {
  flex: 0; 
  padding: 20px 10px;
  width: 200px;
}
.text {
  flex: 0; 
  position: relative;
}
.text::after {
  position: absolute;
  top: 0;
  left: 0;
  color:rgba(86, 98, 94);
  padding-left: 10px;
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  right: 0;
}




.screen {
    flex: 1;
  position: relative;
  overflow: hidden;
 }

.noise {
  position: absolute;
  width: 100vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}


.video {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* iframe 기본은 숨김 */
.video iframe {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  object-fit: cover;
}


.frame {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 5; /* 영상 위로 */
  pointer-events: none;
}

.frame img {
  display: none;
}

.year-label {
  position: absolute;
  bottom: 5vh;       
  right: 20vw;        
  font-size: clamp(50px, 10vw, 180px); /* 최소 50px, 화면 기준 20vw, 최대 200px */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.03);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: 'Michroma', sans-serif;
  letter-spacing: -2px;
  mix-blend-mode: lighten;
  transform: rotate(90deg);
  transform-origin: bottom right;
}





/* 1966 흑백 CRT */
@media (max-width: 580px) {
  .crt-black-video {
    display: block !important;
    width: 100px;
    height: 70px;
  }
  .crt-black{
    display: block !important;
    width: 230px;
    height: auto;
    transform: translate(-24%, -7%);
  }
  .noise {
    display: none;
    transition: all 3s;
  }
  .year-label::after {
    content: "1960";
  }
  .text::after {
   content: "1966년, 흑백 브라운관 TV\A::전파::\A경제 발전의 상징이자 국민의 삶과 문화 변화를 담보한 근대화의 기폭제\A산업디자인에서의 역사적 의미, 영상매체 시대로의 진입 토대\A\A::기억::\A 다층 건물과 초가집, 티셔츠와 삿갓";
   white-space: pre;
  }
}

/* 1974 컬러 CRT */
@media (min-width: 600px) and (max-width: 768px) {
  .crt-color-video {
    display: block !important;
    width: 200px;
  height: 160px;
  }
    .crt-color{
    display: block !important;
    width: 380px;
    height: auto;
    transform: translate(-35%, -16%);
  }
  .noise {
    display: none;
    width: 200px;
  }
  .year-label::after {
    content: "1970";
  }
  .text::after {
   content: "1974년, 컬러 브라운관 TV\A::전파::\A정책적 제한으로 실제 컬러 방송은 1980년부터\A\A::기억::\A 개인 자동차, 쥐잡기 운동,\A 100억불 수출의 날과 산아 제한 정책";
   white-space: pre;
  }
}

/* 1992 평면 CRT */
@media (min-width: 780px) and (max-width: 900px) {
  .crt-video {
    display: block !important;
    width: 300px;
  height: 250px;
  }
    .crt{
    display: block !important;
    width: 410px;
    height: auto;
    transform: translate(-50%, -35%);
  }
  .noise {
    display: none;
    width: 300px;
  }
  .year-label::after {
    content: "1980";
  }
  .text::after {
   content: "1992년, 컬러 평면 브라운관 TV\A::전파::\A기존의 볼록한 화면에서 평평해진 화면\A\A::기억::\A 현대식 문화, 88서울올림픽과 이를 기념하는 백남준의 '다다익선'";
   white-space: pre;
  }
  
}

/* 1999 LCD */
@media (min-width: 920px) and (max-width: 1200px) {
  .lcd-video {
    display: block !important;
    width: 500px;
  height: 320px;
  }
    .lcd{
    display: block !important;
    width: 530px;
    height: auto;
    transform: translate(-50%, -34%);
  }
  .noise {
    display: none;
    width: 500px;
  }
  .year-label::after {
    content: "1990";
  }
   .text::after {
   content: "1999년, LCD (HD) TV\A::전파::\A브라운관이 아닌 액정(Liquid Crystal Display)을 이용한 화면\AHigh Definition의 약자, 1280*720의 해상도\A\A::기억::\A 전화번호부, 두꺼운 휴대전화,\A 1997 외환위기, 그리고 힙합 패션";
   white-space: pre;
  }
}

/* FHD */
@media (min-width: 1220px) and (max-width: 1350px) {
  .fhd-video {
    display: block !important;
    width: 500px;
  height: 300px;
  }
    .fhd{
    display: block !important;
    width: 730px;
    height: auto;
    transform: translate(-48%, -28%);
  }
  .noise {
    display: none;
    width: 500px;
  }
  .year-label::after {
    content: "2000";
  }
  .text::after {
   content: "2004년, LCD (FHD) TV\A::전파::\A기존의 HD(1280*720)에서\A Full-HD(1920*1080)로 화질 개선\A\A::기억::\A 새천년 카운트다운과 2002 월드컵, 웰빙 클로렐라, 인터넷 문화";
   white-space: pre;
  }
}

/* UHD */
@media (min-width: 1400px) {
  .uhd-video {
    display: block !important;
    width: 1000px;
  height: 630px;
  }
    .uhd{
    display: block !important;
    width: 1010px;
    height: auto;
    transform: translate(-50%, -32%);
  }
  .noise {
    display: none;
    width: 1000px;
  }
  .year-label::after {
    content: "2010";
  }
  .text::after {
   content: "2012년, LCD (UHD) TV\A::전파::\A기존의 FHD(1920*1080)에서\A Ultra-HD(3840*2160)로 화질 개선\A\A::기억::\A싸이의 '강남스타일'과 김연아 선수의 은메달, \A 나로호 발사, 애니팡과 욜로족";
   white-space: pre;
  }
}