.body {
  font-family: 'Hahmlet', serif;
  font-size: 18px;
  line-height: 3.2; /* 줄 간격 */
  letter-spacing: 0.08em; /* 글자 간격 */
}

.button {
  display: inline-block;
  padding: 1px 10px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000000;
  /* 검은색 테두리 선 추가 */
  color: #150a0a;
  border-radius: 4px;
  background-color: transparent;
  /* 바탕색 없애기 */
}

/**************************************
    Images & iframes
**************************************/
figure {
  cursor: pointer; /* 마우스 커서를 포인터로 변경 */
  margin: 0 0 10px; /* 마진 설정 */
  -webkit-filter: grayscale(100%); /* 웹킷 브라우저를 위한 흑백 필터 */
  filter: grayscale(100%); /* 흑백 필터 */
  transition: var(--transition-animation); /* 전환 애니메이션 */
}

figure img {
  max-width: 100%; /* 이미지의 최대 너비를 100%로 설정 */
  height: auto; /* 이미지의 높이를 자동으로 설정 */
}

figure figcaption {
  font-style: italic; /* 글자 스타일을 이탤릭체로 설정 */
  font-size: 12px; /* 글자 크기 설정 */
  text-align: center; /* 텍스트를 중앙 정렬 */
  transition: var(--transition-animation); /* 전환 애니메이션 */
}

figure figcaption:hover {
  padding-left: 5px; /* 마우스 오버시 왼쪽 패딩 추가 */
}

figure:hover {
  -webkit-filter: grayscale(0); /* 웹킷 브라우저를 위한 흑백 필터 해제 */
  filter: grayscale(0); /* 흑백 필터 해제 */
}

figure.inline {
  box-shadow: 9px 9px 11px rgba(90, 149, 243, 0.5); /* 이미지 뒤의 음영 설정. */
}

.sub {
  font-size: 1em;
  text-shadow: 5px 5px 5px #888888;
}

h1 {
  font-family: 'Hahmlet', serif;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
}

h2 {
  font-family: 'Hahmlet', serif;
  text-align: center;
}

h3 {
  font-family: 'Hahmlet', serif;
  text-align: center;
}

.hr-style {
  border-bottom: 4px solid #111;
  box-shadow: -1px 1px 0 white, -2px 2px 0 #111;
  margin-bottom: 1px;
}

.hr1-style {
  border-top: 4px solid #111;
  box-shadow: -1px -1px 0 white, -2px -2px 0 #111;
  margin-bottom: 1px;
}

.page-footer {
  margin: 1rem 0 0;
  display: flex;
  justify-content: center;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #e4e4e4;
}

.box1 {
  background-color: #fcfdfd;
  border: 1px solid #b7b7b7;
}

.box2 {
  width: 100%;
  /* 박스의 가로 길이를 화면 가로 길이와 동일하게 설정합니다 */
  height: auto;
  /* 박스의 세로 길이를 자동으로 조절합니다 */
  background-color: #fafee5;
  border: 3px solid #e4e4e4;
}

.box3 {
  background-color: #f2f2f2;
  border: 1px solid #4f4f4f;
}

.box9 {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 255, 255);
  margin-right: 10px;
  float: left;
}

.container::after {
  content: '';
  display: table;
  clear: both;
}

img {
  filter: sepia(0);
}

.copy {
  columns: 2 auto;
  column-gap: 1.5rem;
  padding: 0 2rem;
  column-rule: 1px solid black;
  line-height: 1.5em;
}

.copy p {
  margin: 0;
  text-indent: 1rem;
  line-height: 1.6; /* 줄 간격을 1.6배로 설정 */
  padding-bottom: 18px; /* 아래쪽 패딩을 20픽셀로 설정 */
  padding-left: 10px;
  padding-right: 10px;
}

.copy img {
  /* box-shadow: 4px 4px 0 black; */
  border: 1px solid;
  margin: 5px; /* 이미지와 본문의 글자 간격을 조절 */
}

.inline {
  max-width: 200px;
  padding: 5px;
}

.left {
  float: left;
  margin: 10px 1.5em 10px 0; /* 위, 오른쪽, 아래, 왼쪽 간격을 조절 */
}

.right {
  float: right;
  margin: 10px 0 1.5em 10px; /* 위, 오른쪽, 아래, 왼쪽 간격을 조절 */
}

@media screen and (max-width: 768px) {
  .copy {
    columns: 1;
    column-gap: 0;
    padding: 0 1rem;
    column-rule: none;
  }

  .copy p {
    margin: 0;
    font-family: 'Hahmlet', serif;
    text-indent: 1rem; /*들여쓰기 */
    font-size: 18px;
    line-height: 1.5em;
    letter-spacing: 0.05em; /* 글자 간격 */
  }
}

.no {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

.custom-tooltip {
  position: relative;
}
.custom-tooltip .tooltip-text {
  display: none;
  position: absolute;
  top: -120px; /* 클릭한 글 위로 툴팁을 이동시킵니다. */
  left: 0;
  background-color: #fcfef0;
  border: 1px solid #0501ff;
  padding: 5px;
  border-radius: 3px;
}
.custom-tooltip:hover .tooltip-text {
  display: block;
}

/* 테이블 스타일 */
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  border: 1px solid #dddddd;
  background-color: #fffef1;
  text-align: left;
  padding: 8px;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

article {
  max-width: 60ch;
  width: 100%;
  margin: 0 auto;
}

figure:has(blockquote) {
  background-color: var(--accent);
  color: var(--base);
  border-radius: 0 1rem 0 1rem;
  padding: 2rem;
  width: 100%;
  margin: 0;
}

figure:has(blockquote) > figcaption {
  text-align: center;
}

blockquote {
  font-weight: lighter;
  font-size: 1.1rem;
  quotes: '“' '”' '‘' '’';
}

blockquote::before {
  content: open-quote;
  font-size: 3em;
  line-height: 0;
  display: block;
  margin-left: -1ch;
}

blockquote::after {
  content: close-quote;
}

aside1 {
  display: grid;
  place-content: center;
  padding: 1em 25%;
  min-height: 20dvh;
}

aside1 > * {
  font-size: larger;
  font-weight: bold;
  color: var(--accent);
  grid-area: 1 / 1;
}

aside1:nth-last-of-type(even) > * {
  transform: rotate(-13deg);
}

aside1:nth-last-of-type(odd) > * {
  transform: rotate(13deg);
}

aside2 {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.45);
  width: 30%;
  float: right;
  margin: 1rem;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  background: #fff;
  border-radius: 1rem;
}