* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
      body {
            font-family: 'Cormorant Garamond', serif;
        }

        .container {
        display: flex;
        flex-direction: row;
        overflow: auto;
        height: 100vh;
        }

        .half {
            flex:1;
            width: 50%;
            height: 100vh;
            overflow-y: auto;
            overflow-x: auto;
            padding: 28px;
        }

        .left {
            background-color: #DDE7E7
;
        }

        .right {
            background-color: #F5F0C5;

        }

        .content {
            height: 200%;
        }



        details {
        list-style-type: non;    
        width: 100%;
        pointer-events: auto; /* 클릭 이벤트가 정상적으로 작동하도록 설정 */
        }


        h2 {
            position: fixed;
        }

        p {
            padding-top: 80px;
            padding-bottom: 10px;
            font-size: 12px;

        }

        summary::marker{
            list-style-type: non; 
            list-style: disc inside;
        }


        summary {
    width: 100%;
    cursor: pointer;
    padding: 8px;
    display: block;
    text-align: center;
    appearance: non;
}

        table, tr, td, th {
  border: 3px solid black;
  border-collapse: collapse;
  padding: 10px;
  height: 90px;
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}


.content1 p {
  font-size: 12px;
  color: #333;
  line-height: 1.6;
  padding: 10px;
  text-align: left;
  letter-spacing: -0.4px;
    word-spacing: -0.5px;
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-line;
    margin-bottom: 1px;
}


.image1 {
  margin-top: 10px;
  padding: 10px;
}

.image1 img {
  width: auto;
  height: 500px;
}

.year-selector {
    position: absolute;
    top: 24px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
}
.year-button {
    margin: 0 10px;
    padding: 5px 10px;
    text-decoration: none;
    color: black;
}
.year-button.active {
    color:black ;
    text-decoration: underline;
}

.year-button:visited,
.year-button:link {
    color: black;
}



@media (max-width: 760px) {
    .container {
        flex-direction: column; /* 가로 -> 세로 배치 변경 */
        height: auto;
        overflow-y: auto;
    }

    .half {
        width: 100% !important; /* 가로폭 100% */
        overflow-y: scroll;
    }
}