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

:lang(ja) {
	font-family: 'Noto Sans JP', sans-serif;
}

body {
	font-family: 'Noto Sans KR', sans-serif;
	font-style: normal;
	word-break: keep-all;
  letter-spacing: 0.2px;
	word-spacing: -0.5px;
	line-height: 1.75;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: 5fr 3fr;
  height: 100vh;
}

.left {
  position: relative;
  width: 100%;
}

.right {
  position: relative;
  background-color: white;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.title {
  text-decoration: underline;
  width: fit-content;
  margin: 7px;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1;
}
.right-title {
  margin-bottom: 0px;
}

.paragraph {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 7px;
  margin-right: 0 !important;
  padding: 0 5px;
  padding-top: 10px;
  padding-bottom: 23px;
  padding-right: 7px;
  font-size: 14px;
  font-weight: 500;
  overflow-y: scroll;
}

img {
  position: absolute;
  left: 50%; /* 화면 너비의 33% 위치 */
  top: 50%; /* 수직 중앙 */
  transform: translate(-50%, -50%); /* 정확한 중심으로 이동 */
}

details {
  cursor: pointer;
}




@media (max-width: 767px) {
  body {
  	overflow-x: hidden;
  	overflow-y: auto;
  }
  .container {
    grid-template: none;
    height: auto;
  }

  .title {
    font-size: 16px;
    line-height: 1.6;
  }

	p {
    font-size: 16px;
    line-height: 1.6;
    position: relative; /* 고정된 위치를 해제 */
    width: 100%;
  }

  /* 이미지 크기 및 위치 조정 */
  img {
    padding: 15vh 0;
    width: 100%;
    height: auto;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .right {
    height: auto;
  }

  /* 문단 영역 조정 */
  .paragraph { 
    height: auto; 
    word-break: normal;
    overflow-y: visible;
    gap: 30px;
    padding-top: 25px;
  }

  details {
    font-size: 16px;
  }
}