/* 전체 body 스타일 설정: 기본적으로 영어는 Times New Roman */
body {
    height: 100vh;  /* 화면 높이를 100%로 설정 */
    margin: 8px;   /* 기본 마진 제거 */
}

/* 한글 텍스트에 대해서만 Apple SD Gothic Neo 사용 */
html[lang="ko"] body {
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* 영어 텍스트에 대해 Times New Roman 적용 */
h1 {
    font-family: 'Didot', serif;
}

a:link, a:visited {
    color: blue; /* 항상 파란색으로 유지 */
    text-decoration: none; /* 밑줄 제거 */
}
a:hover {
    color: red; /* 마우스를 올리면 빨간색으로 변경 */
}

/* Flexbox를 사용하여 좌우 레이아웃 구성 */
.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* 왼쪽 iframe의 비율을 3:1로 설정 */
.left-frame {
    flex: 2; /* 전체 비율의 3/4 */
    border: none;
}

/* 오른쪽 iframe의 비율을 1:1로 설정 */
.right-frame {
    flex: 1; /* 전체 비율의 1/4 */
    border: none;
}

.background-qr {
    position: fixed; /* 절대 위치 대신 고정 위치 사용 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://byunghyunbak.com/Nerd%20World%20in%201998/graphic/qr%20img.png');
    background-size: cover; /* 화면에 꽉 차게 */
    background-repeat: no-repeat; /* 반복 없음 */
    background-position: center; /* 중앙 정렬 */
    z-index: -1; /* 콘텐츠 뒤로 배치 */
}

/* Header 스타일 */
.site-header {
    border-bottom: 1px solid;
    font-size: 15px;
    height: 26px;
    margin: 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
    border-color: #666;
}

.site-header-navigation-links {
    float: left;
    height: 26px;
    list-style-type: none;
    margin: 0;
    padding: 0; 
    margin-left: 10px;
    vertical-align:middle;
}

.site-header-navigation-links li {
    display: inline;
    line-height: 26px;
    vertical-align:middle;
}

.site-header-announcement {
    float: right;
    line-height: 26px;
    margin-right: 10px;
    vertical-align:middle;
}

ul {
    margin: 0;
    padding-left: 5px;
    list-style-position: inside;
}

/* 이미지 그리드 스타일 */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 기본 한 행에 2개 */
    grid-gap: 20px; /* 이미지 간격 */
    justify-content: center; /* 그리드 컨테이너를 중앙 정렬 */
    justify-items: center; /* 그리드 내부 아이템 수평 중앙 정렬 */
    align-items: center; /* 그리드 내부 아이템 수직 중앙 정렬 */
    margin: 0 auto; /* 전체 그리드가 화면 중앙에 위치하도록 */
    max-width: 800px; /* 그리드 최대 너비 제한 */
    width: 100%; /* 그리드가 화면 너비에 맞도록 설정 */
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
    padding: 0 10px; /* 좌우 여백을 추가하여 모바일에서도 균등 정렬 */
}

/* 반응형 모바일 스타일 */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 한 행에 2개 */
        grid-gap: 15px; /* 모바일에서는 간격을 더 좁게 */
        padding: 0 5px; /* 모바일에서는 더 작은 여백 */
    }
}

/* 이미지 스타일 */
.grid img {
    width: 80%; /* 이미지 크기를 부모 요소에 맞추어 90%로 설정 */
    max-width: 200px; /* 이미지 최대 크기 제한 */
    height: auto; /* 비율에 맞게 높이 조정 */
    object-fit: contain; /* 이미지 비율 유지 */
    display: block; /* 이미지를 블록 요소로 설정 */
    margin: 0 auto; /* 이미지가 중앙에 위치하도록 */
    margin-top: 100px;
}