/* General body styles */
body {
    margin: 10px auto;
    /* max-width: 800px;  */
    line-height: 1.5;
    font-size: 1rem; /* Using rem for better scaling */
    color: #000000;
    padding: 0 10px;
    background-color: #ffffff;
    font-family: 'joseon';
    letter-spacing: 0.5px;
    max-width: 800px; 
    /* transform: scale(0.70);  */
    transform-origin: top; /* Ensure it scales from the top-left corner */
}


/* For larger screens */
@media (min-width: 769px) {
    body {
        font-size: 1rem; /* Keep it consistent on large screens */
        letter-spacing: 0.5px;
    }
}

/* For mobile screens */
@media (max-width: 768px) {
    body {
        font-size: 0.875rem; /* Adjust font size for smaller screens */
        letter-spacing: 0.5px;
        line-height: 1.5;
        transform: scale(1); /* Scale down more on smaller screens */
    }
}

/* Table styles */
table {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}
td {
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    width: 10%;
    height: 10%;
    border: white;
}

/* Image styles */
img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center images */
    object-fit: cover;
}

/* Popup Styles */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9); /* Dark background for popups */
    border: 2px solid #333;
    color: white;
    padding: 10px 5px;
    width: 80%; /* Responsive width */
    max-height: 80%; /* Adjusted for responsiveness */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    text-decoration: none;
    overflow-y: scroll;
    font-family: 'joseon';
}

/* Mobile popup styles */
@media (max-width: 480px) {
    .popup {
        width: 90%; /* Popup width on smaller screens */
        max-height: 90%;
    }
}


/* Bottom padding for body to avoid content overlap with footer */
body {
    padding-bottom: 30px;
}

/* Link styles */
a {
    text-decoration: none; /* 밑줄 제거 */
    color: #0645ad
    text-decoration-thickness: 0.7px;
    text-underline-offset: 5px;
    padding-bottom: 1px;
    /* display: inline-block; */
    display: inline; /* 기본 값 */

}

a:visited {
    color: #0b0080; /* 방문한 링크 색상 (#0b0080) */
  }
  
/* 평소 상태 */
#phoneIcon::before {
    content: "✆"; /* 전화기 아이콘 표시 */
}

#emailIcon::before {
    content: "✉︎"; /* 이메일 아이콘 표시 */
}

#specialLink::before {
    content: "✒︎"; /* 평소에는 ✒︎ 표시 */
}

@media print {
    a {
      color: black !important;
      text-decoration: none; /* 밑줄 제거 (선택 사항) */
      pointer-events: none; 
      /* PDF에서 모든 링크 클릭 비활성화 */
    }
  }

  
/* PDF 저장 시 */
@media print {
    #phoneIcon::before {
        content: "010-9197-9367"; /* PDF에서는 전화 아이콘으로 변경 */
    }

    #emailIcon::before {
        content: "starpeeker@naver.com"; /* PDF에서는 이메일 아이콘으로 변경 */
        
    }

    #specialLink::before {
        content: ""; /* PDF에서는 링크 아이콘으로 변경 */
    }


    #specialLink {
        text-decoration: none; /* PDF에서 링크의 밑줄 없애기 */
    }

    a {

        text-decoration: none;
         /* PDF 저장 시 모든 링크의 밑줄 없애기 */

        cursor: default;
         /* 마우스 커서를 기본 상태로 변경 */
    }

    /* 링크의 href 속성도 제거 */
    /* a[href] { */
        /* pointer-events: none;  */
        /* 링크 비활성화 */
    }
}


  

/* HR styles */
hr {
    height: 0.5px;
    background-color: rgba(0, 0, 0, 0.5);
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Preformatted text styles */
pre {
    font-size: 1rem;
}


/* Media query for mobile screens (smaller devices) */
@media (max-width: 600px) {
    pre {
        font-size: 0.875rem; /* Reduce font size on smaller screens */
    }
}

/* Font-face for Joseon font */
@font-face {
    font-family: 'joseon';
    src: url('../fonts/ChosunSm.TTF') format('truetype');
}

/* Container for flex layout */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
}

/* For summary dropdown */
.no-triangle {
    list-style-type: none;
    padding-left: 0;
}

h3 {
    margin: 0;
}

        /* 간단한 스타일링 */
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            color: #000000;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            z-index: 1000;
            width: auto;
            max-width: 500px;
            overflow: hidden;
        }
        
        .popup button {
            margin: 10px 5px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #242627;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }
        
        .popup button:hover {
            background-color: #232527;
        }
        
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        
        /* 모바일 대응 */
        @media (max-width: 768px) {
            .popup {
                position: fixed;
                top: 50%; /* 뷰포트 기준 중앙 */
                left: 50%;
                transform: translate(-50%, -50%);
                width: auto; /* 글자수에 맞춰 넓이 자동 조정 */
                max-width: 700px;
                padding: 15px;
                background-color: white;
                color: #000000;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                z-index: 1000;
                overflow: hidden;
                white-space: nowrap; /* 글자가 한 줄로 나오도록 */
                text-overflow: ellipsis; /* 넘치는 텍스트는 '...'으로 표시 */
                
            }
        
            .popup button {
                padding: 8px 16px; /* 버튼 크기 조정 */
                font-size: 12px; /* 작은 화면에 맞춘 폰트 크기 */
            }
        }
        

        ul,ol {
            margin: 0; /* 상하 여백 제거 */
            padding: 0 10px 0 30px; /* 좌측 20px, 우측 10px */
        }
        
        li {
            margin: 0; /* 개별 항목 간 여백 제거 */
            padding: 0px 0; /* 항목 간 적당한 간격 유지 */
        }
        
        @media (max-width: 768px) { /* 화면 너비 768px 이하 */
            ul {
                padding: 0 15px; /* 좌우 여백을 동일하게 조정 */
            }
        
            li {
                font-size: 14px; /* 글꼴 크기를 모바일에 맞게 축소 */
                line-height: 1.5; /* 줄 간격 조정으로 가독성 향상 */
            }
        
            .flex-container {
                /* flex-direction: column;  */
                /* 모바일에서 열 방향으로 정렬 */
                gap: 10px; /* 각 요소 간격 추가 */
            }
        
            a {
                font-size: 14px; /* 링크 글꼴 크기 조정 */
                word-break: break-word; /* 긴 링크 자동 줄바꿈 */

            }
        } 
        

.note-widget {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
  border: none;
}

.toggle-button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  font-size: 14px;
  background-color: rgb(197, 194, 29);
  color: #007bff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  z-index: 10; /* 위젯 위로 버튼 표시 */
}

.note-header {
  display: none; /* 헤더 숨기기 */
}

.note-content {
  display: none;
  padding: 20px;
  font-size: 14px;
  color: #333;
}


.split-scroll-container {
    display: flex;
    height: 100vh; /* 화면 전체 높이 */
}


.left-section {
    width: 40%; /* 화면의 35% 폭 */
    max-width: 800px;
    overflow: auto; /* 스크롤 가능 */
    height: 100%; /* 높이 설정 */
    scrollbar-width: none; /* Firefox에서 스크롤 바 숨기기 */
    -ms-overflow-style: none; /* Internet Explorer에서 스크롤 바 숨기기 */
}

.left-section::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge에서 스크롤 바 숨기기 */
}

.right-section {
    flex: 1; /* 나머지 공간을 차지 */
    overflow: auto; /* 스크롤 가능 */
    height: 100%; /* 높이 설정 */
    scrollbar-width: none; /* Firefox에서 스크롤 바 숨기기 */
    -ms-overflow-style: none; /* Internet Explorer에서 스크롤 바 숨기기 */
}

.right-section::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge에서 스크롤 바 숨기기 */
}



/* 이미지 스타일 */
.centered-figure {
    text-align: center; /* 이미지와 캡션을 가운데 정렬 */
    margin: 20px 0; /* 이미지와 캡션 간격 추가 */
}

.centered-figure img {
    max-width: 100%; /* 이미지 크기를 90%로 제한 (원하는 크기로 조절) */
    height: auto;    /* 이미지 비율 유지 */
    margin-bottom: 10px; /* 이미지와 캡션 사이 여백 */
}

.centered-figure figcaption {
    font-size: 1rem; /* 캡션 텍스트 크기 */
    color: #555;     /* 캡션 색상 */
    text-align: center; /* 캡션 텍스트 정렬 */
    display: block;   /* 캡션을 블록 요소로 설정하여 이미지 아래에 위치시킴 */
}



/* 상위 flex-container 설정 */
section.flex-container {
    display: flex;
    justify-content: space-between; /* 좌우 공간 분배 */

}

/* 각 flex-item 스타일 */
section.flex-container > div {
    flex: 1; /* 각 div가 동일 비율로 공간 차지 */
    display: flex;
    flex-direction: column; /* 리스트 항목이 세로로 배치되도록 설정 */
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 화면 전체 높이 */
    text-align: center;
  }
  
  .center p {
    font-size: 24px; /* 글자 크기 조정 */
    font-weight: bold; /* 필요하면 글자 두께 추가 */
    color: #333; /* 글자 색상도 변경 가능 */
  }
  }
  

/* 모바일 대응: 768px 이하에서 flex 방향을 세로로 전환 */
@media (max-width: 768px) {
    section.flex-container {

    }

    section.flex-container > div {
        width: 100%; /* 각 div가 100% 폭을 차지하도록 설정 */
    }
}
.resize-image {
    width: 80%;
    display: block; /* 필요한 경우 이미지 정렬을 위해 추가 */
    margin: 0 auto; /* 중앙 정렬을 원할 경우 추가 */
  }
  

/* 모바일에서 위아래 배치, 왼쪽 섹션이 100% 차지 */
@media (max-width: 768px) {
    .split-scroll-container {
        flex-direction: column;
        height: auto; /* 높이 제한 제거 */
    }

    .left-section {
        width: 100%; /* 모바일에서 왼쪽 섹션을 100% 차지 */
    }

    .right-section {
        width: 100%; /* 오른쪽 섹션을 100% 차지하도록 설정 */
    }