/* 전체 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-family: 'Pretendard-Regular';
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
body {
  background-image: url(./img/back1.jpg);
  background-size: cover;           /* 화면에 맞게 이미지 확대/축소 */
  background-repeat: no-repeat;     /* 이미지 반복 방지 */
  background-position: center;      /* 중앙 정렬 */
  /* 흰 바탕 */
  color: #ffffff;
  /* 어두운 텍스트 */
  font-family: 'Pretendard-Regular';
  display: flex;
  justify-content: left;
  flex-direction: column;
  margin-left: 10%;
  /* 세로로 정렬 */
}
.con{
   position: relative;
  z-index: 1; /* 기본 층 */
}
.ment {
  margin: 30px;
  font-family: 'Pretendard-Regular';
  font-size: 0.9rem;
}

.container {
  line-height: 1.5;
  margin-top: 10%;
}

.brand img{
  width: 10vw;
}

.subtitle {
  font-size: 0.8rem;
  margin-top: 1rem;
  font-family: 'Pretendard-Regular';
  line-height: 1.3;
  position: relative;
  /* 호버시 이미지 위치 조정을 위해 */
  color: #ffffff;
}

.subtitle:hover {
  text-decoration: underline;
  cursor: pointer;
  /* 마우스를 손 모양으로 변경 */
}

.date {
  font-size: 0.7rem;
  margin-top: 1.5rem;
  color: #ffffff;
  font-family: 'Pretendard-Regular';
}

/* 메뉴 */


.menumessage {
  width: 15vw;         /* 화면 너비의 8% */
  max-width: 100px;   /* 너무 커지지 않도록 제한 */
  height: auto;       /* 비율 유지 */
  z-index: 9999;
}
.menuin {
  position: absolute;
  top: 10%;   /* 화면 상단에서 약간 내려오게 */
  right: 20%;     /* 왼쪽에 고정 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 텍스트 기준 왼쪽 정렬 */
  gap: 7px;
  z-index: 9999;
}
.toggle-menu {
  display: none;
  padding: 6px 12px; /* 살짝 줄인 padding */
  background-color: #84BFFB;
  color: #111;
  text-decoration: none;
  font-size: 0.8rem;
  width: fit-content;     /* 내용만큼 너비 설정 */
  white-space: nowrap;    /* 텍스트 줄바꿈 방지 */
  margin-top: 10px;       /* 메뉴 간 간격 */
  border: 1px solid #ffffff; /* 흰색 테두리 */
  position: relative; /* 추가해보세요 */
  z-index: 9999;
}

.toggle-menu.show {
  display: block; /* 클릭 시 보이게 */
}
/* textin */
.textimg img{
  width: 80vw;
  max-width: 500px;   /* 너무 커지지 않도록 제한 */
}
.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
  position: absolute;
  top: 0%;
  right: 0%;
}

.or {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  top: 0%;
  padding: 5px;
  color: #ffffff;
  white-space: nowrap;
}

.textin {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px;
}

.textin a {
  color: #ffffff;
  font-size: 0.8rem;
  padding: 6px 12px;
  border: 1px solid #000000;
  text-decoration: none;
  border-radius: 5px;
  background-color: #000000;
  transition: background-color 0.2s ease;
}

.textin a:hover {
  background-color: rgba(255, 255, 255, 0.576);
  color: #000000;
}
.all {
  position: absolute;
  top: 40%;
  left: 60%; /* 보기 편한 위치 */
  transform: translateX(-50%); /* 가운데 정렬 느낌 */
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
}
.ok {
  position: absolute;
  bottom: 0;
  left: 20%;
  z-index: 100;
  color: white;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.5;
}
.ok a {
  display: block; /* 줄바꿈 강제 */
}
.ok a:not(:first-child) {
  margin-top: 1rem;
}
.hand{
    width: 40vw;
    max-width: 300px;   /* 너무 커지지 않도록 제한 */
}
/* 자바 */
.mag1,
.ok {
  display: none;
}
.mag2 {
  display: block;
}

/* 클릭하면 나타나게 제어 */
.mag1.show,
.ok.show {
  display: block;
}
.footer {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 100;
    white-space: nowrap;
    /* 줄 바꿈 방지 */
    position: fixed;
    /* 아래 고정 */
    box-sizing: border-box;
    font-family: 'Pretendard-Regular';
    padding-bottom: 20px;
    z-index: 1000;
}

.footer p {
    font-family: 'Pretendard-Regular';
}
@media (max-width: 767px) {
  .body{
    background-image: url(./img/mag2.png);
    background-size: cover;
  }
  /* textin */
.textimg img{
  width: 70vw;
  max-width: 600px;   /* 너무 커지지 않도록 제한 */
}
.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
  position: absolute;
  top: 10%;
  right: 0%;
}

.or {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  top: 0%;
  padding: 5px;
  color: #ffffff;
  white-space: nowrap;
}

.textin {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px;
}

.textin a {
  color: #ffffff;
  font-size: 0.8rem;
  padding: 6px 12px;
  border: 1px solid #000000;
  text-decoration: none;
  border-radius: 5px;
  background-color: #000000;
  transition: background-color 0.2s ease;
}

.textin a:hover {
  background-color: rgba(255, 255, 255, 0.576);
  color: #000000;
}
.all {
  position: absolute;
  top: 20%;
  left: 20%; /* 보기 편한 위치 */
  transform: translateX(-50%); /* 가운데 정렬 느낌 */
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
}
.ok {
  position: absolute;
  bottom: 10%;
  left: 0%;
  z-index: 100;
  color: white;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.5;
}
.ok a {
  display: block; /* 줄바꿈 강제 */
}
.ok a:not(:first-child) {
  margin-top: 1rem;
}
.mag1,
.ok {
  display: none;
}
.mag2 {
  display: block;
}

/* 클릭하면 나타나게 제어 */
.mag1.show,
.ok.show {
  display: block;
}

.menuin {
  position: absolute;
  top: 5%;   /* 화면 상단에서 약간 내려오게 */
  right: 10%;     /* 왼쪽에 고정 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 텍스트 기준 왼쪽 정렬 */
  gap: 7px;
  z-index: 9999;
}
.menumessage {
  width: 18vw;         /* 화면 너비의 8% */
  max-width: 100px;   /* 너무 커지지 않도록 제한 */
  height: auto;       /* 비율 유지 */
  z-index: 9999;
}
}