* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 100%;
	font-weight: normal;
}

body {
	padding: 40px ;
	font-size: 16px;
  font-family: "Noto Serif KR", serif;
	line-height: 1.8;
	word-break: keep-all;
	text-align: center;
	  height: 500vh; 
}

.nav {
	padding: 0 40px;
    position: fixed;   
    left: 0;         
}

.nav a {
	color: black;
	text-decoration: none;
	display: block;
	text-align: left;
	margin-right: 20px;
}

.container {
/*	padding: 20px;*/
	max-width: 800px; 
	margin: 0 auto; 
}

/* 웹킷 브라우저(Chrome, Safari)에서 스크롤바 숨기기 */
::-webkit-scrollbar {
    display: none;
}

/* Firefox에서 스크롤바 숨기기 */
html {
    scrollbar-width: none;
}

/*중복디테일스오류수정*/
details summary {
  -webkit-mask-image: none;
  clip-path: inset(0 0 0 0);
}

summary::-webkit-details-marker {
  display: none; /* Safari에서 기본 삼각형 숨기기 */
}

summary {
  padding: 20px; /*하위디테일스 상단여백*/
  list-style: none; /* 기본 삼각형 숨기기 */
  display: block;
  align-items: center;
  justify-content: center;
  cursor: pointer;
    margin: 10px 0;

}


summary::before {
  content: "→"; 
  display: block;
  font-size: .8em; 
  transition: transform 0.2s ease;
}

details[open] > summary::before {
  transform: rotate(90deg); 
}


/*눈뜨기*/

.eyes {
  max-width: 400px; 
  width: 100%; 
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  margin: 0 auto; 
}

.question {
  width: 100%; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  margin-bottom: 5px;
}

.options {
  display: flex; 
  gap: 10px; /* 예, 아니오 간의 간격을 10px로 설정 */
}

/*운동하기*/
.workout-left,
.workout-right {
  width: 48%;
  height: 100px;
  display: inline-block;
  animation: widthAnimation 3s ease-in-out infinite;
  text-align: center; 
  white-space: normal; 
  overflow-wrap: break-word; 
  vertical-align: middle;
  justify-content: center;
  align-items: center;
}

.workout-left {
  transform-origin: right;
}

.workout-right {
  transform-origin: left;
}

@keyframes widthAnimation {
  0% {
    width: 48%;
  }
  50% {
    width: 16px;
  }
  100% {
    width: 48%;
  }
}


/*준비하기*/
.ready {
    display: flex;
    justify-content: space-between; 
    width: 100%; 
}

.ready details {
    width: 48%; 
}

.ready label,
.like label {
    display: flex;  
    align-items: center; 
    gap: 5px; /* input과 텍스트 사이 간격 */
     justify-content: center;
}

/*놀기*/
iframe {
	border: none;
}
.play {
	display: flex;
    justify-content: space-between; 
    width: 100%; 

}
.item {
	width: 33%;
  white-space: normal; 
}

.item-2 {
  width: 48%;
  white-space: normal;
  display: inline-block;
  vertical-align: top;
}



ul {
	list-style: none;
}

.contact a,
.play a {
	display: block;
	color: black;
	text-decoration: none;
}

 .button {
        display: inline-block;
        text-decoration: none;
    }

.button:hover {
    color: blue;
}