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

body {
  display: flex;
  background-color: white;
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  background-color: #feffbb;
}

/* 왼쪽 바인더 마진 */
.binder-margin {
  width: 50px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;  /* 구멍 간격 */
}

/* 구멍 */
.hole {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  margin: 25px 0;  /* 구멍 간격 - 이미지 비슷하게 조정 */
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  flex: 0 0 auto;   /* 크기 늘어나지 않도록 고정 */
}

/* 본문 내용 */
.page-content {
  flex: 1;
  padding: 40px;
}

.date {
    width: 150px;
}

.title {
    width: 500px;
}

h1 {
    font-size: 12pt;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 20px;
}

p {
    width: 700px;
}

ol {
    margin-left: 50px;
}

hr {
    margin-top: 20px;
    margin-bottom: 10px;
}

img {
    width: 250px;
    margin-top: 20px;
}

small {
    line-height: 13pt;
    font-size: 9pt;
}


@media screen and (max-width: 704px) {

.page-content {
padding: 20px;
}

table, p {
    font-size: 11pt;
}

p {
    width: 300px;
}
}