/* ✅ 1) 전체 배경: 사용자가 만든 이미지로 지정 */

@font-face{
font-family:'DNFBitBitv2';
font-style:normal;font-weight:400;src:url('//cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf')format('opentype')}

.logo-img {
  height: 30px;      /* 높이는 필요에 따라 조절 */
  margin-right: 10px; /* 텍스트와 간격 */
}

body {
  margin: 0;
  background: #000 no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family:'DNFBitBitv2';
  color: #fff;
}

/* ✅ 2) 모니터 프레임: 배경 이미지 위에 카드처럼 배치 */
.frame {
  font-family:'DNFBitBitv2';
  background: rgba(225, 218, 202, 0.993); /* 약간 투명한 베이지색 */
  border: 12px solid #d2c4b2;
  border-radius: 10px;
  width: 90%;
  max-width: 800px;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ✅ 3) 상단 바 */
.window-bar {
  font-family:'DNFBitBitv2';
  background: #B993D6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #8CA6DB, #B993D6);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #8CA6DB, #B993D6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

/* ✅ 4) 내부 화면 */
.content {
  font-family:'DNFBitBitv2';
  background-color: black;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.subtitle {
  font-size: 0.8rem;
  margin: 10px;
  color: #aaa;
}

.welcome {
  text-align: center;
  font-size: 2rem;
  line-height: 1.4;
}

.highlight {
  color: #b13c69;
}

.loader {
  margin-top: 30px;
  border: 5px solid #b13c69;
  border-top: 5px solid transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ✅ 5) 반응형: 화면이 작아지면 내용과 로더 크기 축소 */
@media (max-width: 600px) {
  .welcome {
    font-size: 1.2rem;
  }

  .loader {
    width: 40px;
    height: 40px;
  }
}