@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Story+Script&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  background-image: url('../img/p1.png');
  background-repeat: repeat-x;       
  background-size: auto 100vh;       
  background-position: top left;     
  font-family: Arial, sans-serif;
}

/* 부모: 위치 + 회전 */
.video-wrapper {
  position: fixed;
  bottom: 0;
  left: 2vw;
  width: 85vw;
  height: 85vh;
  overflow: hidden;
  transform: rotate(-2deg);
  transform-origin: bottom left;
  z-index: -1;
    box-shadow: 0 0 0px 20px #F5EFDE;
}

/* 자식: 확대 */
.video-inner {
  width: 100%;
  height: 100%;
  transform: scale(1.2);
  transform-origin: center;
}

.video-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* 로고 */
.logo {
  position: fixed;
  bottom: 1vh;
  left: 1vw;
  z-index: 1;
}

.logo img {
  width: clamp(50px, 7vw, 90px);
  height: auto;
  cursor: pointer; /* 누를 수 있다는 표시 */
  transition: 0.5s;
}

.logo img:hover {
  padding: 0.5vw;
}

/* 메뉴바 */
header {
  background-color: #D9998B;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;  
  padding: 2vh 3vw;
}

#gnb {
  display: flex;
  list-style: none;
  padding: 0 5vw;
}

#gnb > li {
  position: relative;
}

#gnb > li > a {
  display: block;
  align-items: center;
  line-height: 7vh;
  padding: 0 3vw;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
  font-size: clamp(16px, 2vw, 25px);
}

#gnb > li:hover > a {
  background-color: #D9998B;
}

#gnb li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #A68776;
  list-style: none;
  min-width: 12vw;
}

#gnb li:hover ul {
  display: block;
}

#gnb li ul li a {
  display: block;
  padding: 1vh 1.5vw;
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  font-size: clamp(14px, 1.5vw, 20px);
}

#gnb li ul li a:hover {
  background-color: #735E4C;
}

#gnb li.on > a {
  background-color: #A68776;
}

/* SNS 아이콘 */
#sns {
  position: fixed;
  bottom: 10vh;
  left: 1vw;
}

#sns li {
  display: flex;
  margin-bottom: 2vh;
}

#sns .fa-brands {
  font-size: clamp(20px, 2.5vw, 36px);
  color: #ffffff;
  transition: 0.5s;
}

#sns .fa-brands:hover {
  transform: scale(1.4);
}

/* 텍스트 박스 */
.txtBox { 
  width: clamp(240px, 25vw, 400px);
  height: auto;
  position: fixed;
  bottom: 1vh;
  right: 25vw;
}

.txt {
  font-size: clamp(32px, 6vw, 64px);
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0.5vw 0.5vw 0.3vw #735E4C;
  font-family: 'Story Script';
}

.tit { 
  font-size: clamp(20px, 3vw, 44px);
  color: #000000; 
  font-weight: bold;
  text-shadow: 0.5vw 0.5vw 0.2vw #ffffff;
  margin: 0;
  margin-top: 1vh;
  font-family: 'Caveat';
}

/* 체크박스 숨기기 */
/* 체크박스 숨기기 */
#logoToggle {
  display: none;
}

/* 로고 이미지 스타일 */
label[for="logoToggle"] img {
  position: fixed;   /* 화면 스크롤 따라옴 */
  bottom: -10vh;          /* 화면 위쪽 위치 */
  right: 2vw;         /* 화면 왼쪽 위치 */
  z-index: 1001;     /* 메뉴보다 위 */
  width: clamp(80px, 25vw, 350px);       /* 원하는 크기로 */
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* hover 시 작아지게 */
label[for="logoToggle"] img:hover {
  transform: scale(1.1);
}

/* 토글 메뉴 숨기기 */
.logo-menu {
  position: fixed;
  bottom: calc(-25vh + 350px); /* 이미지 바로 위 */
  right: 2vw;
  width: 350px;
  height: 600px;
  background: #fdf6e4;
  list-style: none;
  padding: 1vh 2vw;
  border-radius: 8px;

  transform: translateY(20px); /* 아래로 살짝 숨김 */
  opacity: 0;                 /* 투명 */
  pointer-events: none;        /* 클릭 막기 */
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.logo-menu img{
  width: 300px;
  height: auto;
  transform: translate(-4%, -0%);
  cursor: pointer;
  padding-bottom: 20px;
  padding-top: 20px;
}

/* 체크박스 클릭 시 메뉴 나타나기 */
#logoToggle:checked + label + .logo-menu {
  transform: translateY(0); /* 원래 위치로 이동 */
  opacity: 1;
  pointer-events: auto;      /* 클릭 가능 */
}

.logo-menu li {
  margin: 1vh 0;
}

.logo-menu li a {
  text-decoration: none;
  color: #000000;
  font-size: clamp(14px, 2vw, 20px);
  font-family: 'Story Script';
}

.book img {
  width: 160px;        /* 크기 */
  height: 213px;        /* 비율 유지 */
  position: fixed;     /* 화면 스크롤 따라 위치 고정 */
  top: 10vh;            /* 화면 위쪽 5% */
  left: 87vw;           /* 화면 왼쪽 3% */
  transform: rotate(-93deg);
}

.txt_P {
  color: white;
  position: fixed; /* 화면 기준으로 위치 고정 */
  top: 19vh;       /* 화면 위에서 10% */
  left: 87vw;      /* 화면 왼쪽에서 87% */
  font-size: clamp(16px, 2vw, 35px); /* 글씨 크기 반응형 */
  z-index: 1000;   /* 다른 요소 위로 */
  transform: rotate(-3deg);
  font-family: 'Story Script';
}
.txt_C {
  color: black;
  position: fixed; /* 화면 기준으로 위치 고정 */
  top: 80vh;       /* 화면 위에서 10% */
  left: 92vw;      /* 화면 왼쪽에서 87% */
  font-size: clamp(16px, 2vw, 35px); /* 글씨 크기 반응형 */
  z-index: 1001;   /* 다른 요소 위로 */
  transform: rotate(-10deg);
  font-family: 'Caveat';
}