/* style.css */

/* 기본 설정: 모든 페이지에 적용됨 */
* {
    box-sizing: border-box; /* 모든 요소에 box-sizing 적용 */
    font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif !important;
}

body {
    font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; 
    color: #ffffff;
    line-height: 1.15;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* style.css */

/* --- 헤더 (상단 네비게이션) 공통 스타일 --- */
header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    padding: 20px 40px; 
 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    
    background-color: transparent !important; 
    color: #854242; /* default header color for regular pages */
    z-index: 1000;
}

header .name a,
header nav a {
    color: inherit; /* inherit from header (regular pages use #555555) */
}


/* --- 메인 페이지 (index.html) 전용 스타일 수정 --- */

.overlay-header {
    background-color: transparent !important; 
    padding: 20px 40px; 
    z-index: 100; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overlay-header .name a,
.overlay-header nav a {
    color: #ff0000; 
}



.overlay-header .name .eng-name {
     font-weight: 900; /* PARK YOUNG SUN 굵기 최대로 추가 (bold에서 900으로 변경) */
    font-size: 1.5rem;
    color: inherit; /* use the same color as the parent */
    display: inline; /* keep it inline with the Korean text */
    /* letter-spacing: -0.5px; reduced from 1px to tighten the header name spacing */
    font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; /* PARK YOUNG SUN 폰트 */
    font-stretch: 500%;
    
    color: #000000;
}

header .name {
    font-weight: bold;
    font-size: 1.5rem;
    color: #000000;/*gray*/
   }

/* Ensure English part of the name matches the surrounding (Korean) color */
header .name h8,
header .name .eng-name {
    font-weight: 900; /* PARK YOUNG SUN 굵기 최대로 추가 (bold에서 900으로 변경) */
    font-size: 1.5rem;
    color: inherit; /* use the same color as the parent */
    display: inline; /* keep it inline with the Korean text */
    /* letter-spacing: -0.5px; reduced from 1px to tighten the header name spacing */
    font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; /* PARK YOUNG SUN 폰트 */
    font-stretch: 500%;
}

header nav a {
    margin-left: 20px;
    font-size: 1.0rem;
    font-weight: 500;
    color: inherit; /* inherit from header */
    text-transform: uppercase; 
    /* background-color: aqua; */
}

/* ... (나머지 공통 스타일) ... */
/* --- 헤딩 태그 (h1~h7) 기본 스타일 정의 --- */

h1 {
    font-size: 2.5rem; 
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    font-weight: lighter;
}

h2 {
    font-size: 2rem;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    font-weight: bold;
}

h3 {
    font-size: 1.5rem;
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: bold;
}

h4 {
    font-size: 2rem;
    margin-top: 1em;
    margin-bottom: 0.4em;
    font-weight: bold;
}

h5 {
    font-size: 1rem; 
    margin-top: 1.67em;
    margin-bottom: 0.4em;
    font-weight: bold;
}

h6 {
    font-size: 1.15rem; 
    margin-top: 2.33em;
    margin-bottom: 2.33em;
    font-weight: light;
}

h7 {
    font-size: 2rem; 
    margin-top: 0em;
    margin-bottom: 0em;
    font-weight: light;
    display: block;
    width: fit-content;
    margin: 0 auto; /* 중앙 정렬을 위해 추가 */
}

h8 {
    font-size: 1.15rem; 
    margin-top: 0em;
    margin-bottom: 0em;
    font-weight: light;
}
hcv {
    font-size: 0.9rem; 
    margin-top: 0em;
    margin-bottom: 0em;
    font-weight: light;
}
hab {
    font-size: 0.7rem; 
    margin-top: 0em;
    margin-bottom: 0em;
    font-weight: light;
}
h1, h2, h3, h4, h5, h6, h7, h8, hcv, hab {
    color: #555555;/*gray*/ 
    line-height: 1.2; 
}
/* 링크 기본 스타일 */
a {
    color: inherit;
    text-decoration: none;
}




/* 섹션 공통 스타일 - 수정/추가된 부분 */
.content-section {
    padding: 80px 40px;
     
    
    /* 👇 ABOUT 페이지 중앙 정렬을 위한 flex 설정 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 기본: 상단 정렬 */
    
    /* header와 footer가 fixed이므로, min-height를 100vh로 설정하여 공간 확보 */
    /* 실제 header/footer 높이를 계산하여 100vh에서 빼는 것이 가장 정확하나, */
    /* 중앙 정렬을 위해 100vh에 가깝게 설정하고 내부 요소 정렬로 해결합니다. */
    min-height: calc(100vh - 100px); 
}

/* ABOUT 페이지의 내용만 수직 중앙 정렬 (about.html에만 적용) */
/* .about-content 클래스를 가진 내용이 content-section의 중앙에 오도록 함 */
.content-section:has(.about-content) {
    justify-content: center; /* 수직 중앙 정렬 적용 */
}
/* -------------------------------------- */


/* ABOUT 섹션 스타일 */

/* 1. 컨테이너: 여전히 flex-end로 정렬 */
.about-content.two-columns {
    display: flex;
    gap: 6 px; 
    align-items: flex-start; /* 이미지와 텍스트 컬럼 자체를 아래에 정렬 */
}

/* 2. 텍스트 컬럼: 이미지 높이를 완전히 채우도록 설정하고, 내부를 Flexbox로 만듭니다. */
.text-column {
    flex: 1; 
    height: 100%; /* 부모의 높이(사진 높이)를 강제로 상속 */
    
    display: flex;
    flex-direction: column; 
    /* 텍스트 래퍼(.text-wrapper)를 컬럼의 맨 아래로 밀어냅니다. */
    justify-content: flex-end; /* 하단 정렬 */
    align-items: flex-start; /* 좌측 정렬 유지 */
}

/* 3. 새로운 텍스트 래퍼: 높이 설정은 필요 없습니다. */
.text-wrapper {
    /* 텍스트 내용의 여백이나 스타일을 여기서 관리할 수 있습니다. */
    width: 70%;
    line-height: 1.7;
    margin-top: auto; /* 상단 여백을 자동으로 설정하여 텍스트를 하단으로 밀어냄 */
    /* background-color: aqua; */
}




/* WORKS 인트로 링크 스타일 */
.work-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.work-links a {
    font-size: 1.1rem;
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
}

/* 푸터 */
footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: #999;
}

/* 모바일 반응형 (선택 사항) */
@media (max-width: 768px) {
    /* Do not apply the default mobile white background to overlay headers.
       Apply it only to non-overlay headers so the main-page overlay remains transparent. */
    header:not(.overlay-header) {
        flex-direction: column;
        padding: 15px 20px;
        /* 👇 모바일에서 스크롤과 함께 움직이도록 고정 해제 */
        position: static; 
        background-color: #ffffff; /* 흰 배경을 다른(일반) 페이지 헤더에만 적용 */
        /* background-color: rgba(255, 255, 255, 0.95); /* 반투명 흰색도 고려 */
    }

    
    
    /* Restore vertical stacking and center alignment for overlay header on mobile */
    header.overlay-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px 20px;
        width: 100%;
    }

  
    


    /* ⭐ 새로 추가/수정할 부분: nav를 수직으로 정렬합니다. */
    header nav {
        display: flex;             /* Flexbox 레이아웃 적용 */
        flex-direction: column;    /* 항목을 수직(위에서 아래로)으로 쌓음 */
        align-items: center;       /* 항목을 가로 축에서 가운데 정렬 (선택 사항) */
        width: 100%;               /* 네비게이션이 전체 폭을 사용하도록 설정 */
        margin-top: 10px;          /* 이름과 네비게이션 사이 간격 추가 */
    }
    
    header nav a {
        /* 기존 스타일 */
        /* margin: 0 10px; */
        /* display: inline-block; */

        /* ⭐ 새로 추가/수정할 부분: 항목 간 수직 간격 및 전체 폭 사용 */
        margin: 5px 0;             /* 상하 여백 추가, 좌우 여백 제거 */
        padding: 5px 10px;         /* 클릭 영역 확보를 위한 패딩 */
        display: block;            /* 전체 폭을 사용하도록 블록 요소로 변경 */
        text-align: center;        /* 텍스트 가운데 정렬 (선택 사항) */
    }

 
}

/* ABOUT 페이지 2단 레이아웃 (확대/축소에 안정적) */
.about-content.two-columns {
    display: flex;
    gap: 2rem;                    /* 고정 px 대신 rem 사용 */
    align-items: flex-start;      /* center → flex-start (높이 변화에도 상단 정렬 유지) */
    width: 100%;
    max-width: 1200px;            /* 너무 넓어지는 것 방지 */
    margin: 0 auto;
    padding: 8rem 6vw;            /* 고정 px → vw/rem 혼합 (비율 유지) */
    box-sizing: border-box;
     /* border: 1px solid rgb(0, 0, 0); */
}

.image-column {
    flex: 0 0 38%;
    max-width: 38%;
    display: flex;
    justify-content: flex-end;
    /* border: 1px solid red; */
    margin-top: 0.5rem;
    
}

.about-image {
    height: min(13rem, 15rem);  /* 화면이 좁을 때는 100%, 넓을 때는 22rem */
    width: auto;
}

.text-column {
    flex: 1;
    min-width: 0;                 /* 텍스트가 넘칠 때 flex 깨짐 방지 */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
     /* border: 1px solid rgb(0, 255, 191); */
}

.text-wrapper {
    width: 70%;
    line-height: 1.7;
    margin-top: 0;
     /* border: 1px solid red; */
}
/* 모바일 반응형: 화면이 좁아지면 텍스트와 이미지를 수직으로 쌓기 */
@media (max-width: 768px) {
    .about-content.two-columns {
        flex-direction: column;
        gap: 3px; /* compact gap between image and text on mobile */
        align-items: flex-start; /* ensure no extra vertical offset from alignment */
        margin: 0;
    }

    .image-column,
    .text-column {
        flex: 1 1 100%;
        max-width: 100%;
        align-self: auto;
        font-size: 0.9rem;
    }

    /* Make the section flow naturally on small viewports and prevent
       the large vertical stretching that created big gaps. */
    .content-section {
        padding: 40px 20px; /* reduced padding on mobile */
        min-height: auto !important; /* remove tall min-height on mobile */
        display: block; /* use normal flow so children stack naturally */
    }

    /* If the browser supports :has(), ensure we don't vertically center */
    .content-section:has(.about-content) {
        justify-content: flex-start !important;
    }

    /* Ensure the about block itself doesn't add extra spacing */
    .about-content.two-columns {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Let text size naturally under the image and remove bottom-alignment */
    .text-column {
        height: auto;
        justify-content: flex-start !important;
        align-items: stretch;
        padding-bottom: 0;
    }

    .text-wrapper {
        margin-top: 0 !important; /* be explicit in case other rules try to push it down */
    }

    /* Small bottom margin on the image to ensure a compact, visible gap */
    .about-image {
        margin-bottom: 6px;
        max-width: 100%;
        display: block;
    }
}

/* Stronger fallback mobile overrides specifically for the ABOUT page
   (uses body.about-page so it works even if :has() is unsupported) */
@media (max-width: 768px) {
    .about-page .content-section {
        padding: 30px 16px !important;
        min-height: 0 !important; /* remove any forced tall height */
        display: block !important; /* normal flow stacking */
        justify-content: flex-start !important;
    }

    .about-page .about-content.two-columns {
        display: block !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-page .image-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 6px 0 !important; /* small bottom gap under image */
        align-self: auto !important;
    }

    .about-page .text-column {
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .about-page .text-wrapper {
        margin-top: 0 !important;
    }
}
/* style.css (메인 페이지 전용 스타일) */

/* 1. 배경 이미지 컨테이너: 전체 화면 채우기 및 절대 위치 기준점 설정 */
.main-background-container {
    height: 100vh; 
    width: 100vw; 
    position: relative; 
    
    /* 배경 이미지 설정 (HTML에서 사용된 경로 'images/main.jpg' 사용) */
    background-image: url('images/main.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* style.css 파일 중 */
/* 이미지 위에 어둡게 덮는 레이어 (선택 사항: 텍스트 가독성 향상) */
/* .main-background-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 2;
    /* 클릭 무시 */
    /* pointer-events: none; 
} */
/* 3. 오버레이 푸터 (Footer) 수정 */
.overlay-footer {
    position: fixed; 
    bottom: 0;
    right: 0;
    
    background-color: transparent !important;
    color: rgb(255, 255, 255); 
    padding: 20px 40px; 
    text-align: right; 
    z-index: 100;
}

/* 중앙 스페이서는 절대 위치 요소 배치 후 남는 공간을 차지하지 않도록 합니다. */
.main-content-spacer {
    height: 100%;
    width: 100%;
}

/* style.css에 추가 */

/* CV 항목의 줄 간격 조정 */
.cv-column p {
    margin-top: 5px;   /* p 태그 위쪽 여백 (기본값보다 줄임) */
    margin-bottom: 5px; /* p 태그 아래쪽 여백 (기본값보다 줄임) */
    line-height: 1.5; /* 줄 내부의 간격 (선택 사항) */
}

/* CV 및 ABOUT 페이지 모바일 글자 크기 조정 */
/* style.css 하단 미디어 쿼리 수정 */
@media (max-width: 768px) {
    .cv-page .cv-column h7, 
    .cv-page .cv-column p, 
    .cv-page .cv-column hcv, 
    .about-page .text-column .text-wrapper h7,
    .about-page .text-column .text-wrapper hab {
        font-size: 0.8rem !important;
    }
}

/* Stronger fallback mobile overrides specifically for the ABOUT page
   (uses body.about-page so it works even if :has() is unsupported) */
@media (max-width: 768px) {
    .about-page .content-section {
        padding: 30px 16px !important;
        margin-bottom: 200px !important; /* ensure footer doesn't overlap content */
        min-height: 0 !important; /* remove any forced tall height */
        display: block !important; /* normal flow stacking */
        justify-content: flex-start !important;
    }

    .about-page .about-content.two-columns {
        display: block !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-page .image-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 6px 0 !important; /* small bottom gap under image */
        align-self: auto !important;
    }

    .about-page .text-column {
        height: auto !important;
        padding: 0 !important;
        margin: 20px 0 0!important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        line-height: 1.2rem;
    }

    .about-page .text-wrapper {
        margin-top: 0 !important;
    }
}
/* .works-main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px); 
    justify-content: flex-start;
    background-color: aquamarine;
}*/

/* Series 클래스 스타일 */
.series {
    margin-top: 20vh;
    text-align: center;
    font-size: 1em; /* 원래 폰트 크기로 되돌림 */
    font-weight: light;
    color: #acacac;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: antiquewhite transparent=1.0;
    overflow-wrap: break-word; /* 긴 단어가 컨테이너를 넘어가지 않도록 줄바꿈 */
    /* margin-top: auto; image-gallery 내에서 하단으로 이동 (works.html에는 해당 안 됨) */
}

.content-wrapper {
    display: flex;
    padding-top: 80px; /* 헤더 높이만큼 여유 공간 확보 */
}

.fixed-page-caption {
    position: fixed;
    top: 320px; /* 헤더 높이만큼 고정될 위치 설정 */
    left: 40px;
    max-width: 20vw; /* 캡션 너비 최대값 설정 */
    width: auto; /* 내용에 따라 너비 자동 조절 */
    min-width: 100px; /* 캡션 너비 최소값 설정 */
    height: fit-content; /* 내용에 따라 높이 자동 조절 */
    padding: 0 10px; /* 좌우 패딩 추가 */
    color: #000000; /* 텍스트 색상 */
    font-size: 1.15rem;
    line-height: 1.5;
    z-index: 999; /* 헤더보다 낮은 z-index를 사용하여 겹치지 않게 합니다. */
    overflow-wrap: break-word; /* 긴 단어가 컨테이너를 넘어가지 않도록 줄바꿈 */
    word-break: break-all; /* 텍스트가 캡션 박스 밖으로 나가지 않도록 줄바꿈 */
    /* background-color: antiquewhite; 제거 */
}

.image-gallery {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 설정 */
    padding-left: 40px; /* 캡션과 이미지 갤러리 사이 간격 */
    margin-left: 0px; /* 캡션의 최대 너비(500px)와 left(40px)를 고려한 값 */
    width: 100%; /* 모바일에서 이미지 갤러리 전체 너비 차지 */
    display: flex; /* Flex 컨테이너로 설정 */
    flex-direction: column; /* 자식 요소들을 수직으로 정렬 */
}

.fixed-page-caption h1 {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.fixed-page-caption h2 {
    font-size: 0.83rem;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.fixed-page-caption h3 {
    font-size: 0.67rem;
    font-weight: light;
    margin-bottom: 0.5em;
}

/* 모바일 반응형: 화면이 좁아지면 캡션 숨기기 */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column; /* 세로로 쌓이도록 변경 */
        padding-top: 0; /* 모바일에서는 헤더가 static이거나 다르므로 padding 제거 */
    }
    .fixed-page-caption {
        position: static; /* 문서 흐름에 따라 배치 */
        display: block; /* 캡션 표시 */
        width: 100%; /* 가로 전체를 차지 */
        max-width: 80%; /* 최대 너비 */
        min-width: unset;
        
        padding: 20px; /* 상하좌우 패딩 추가 */
        text-align: left; /* 텍스트 왼쪽 정렬 */
        margin-left: 0; /* 모바일에서 마진 제거 */
        margin-top: 20px; /* 내비게이션 아래 여백 */
        background-color: transparent; /* 배경색 제거 또는 투명 */
    }
    .image-gallery {
        padding-left: 0; /* 모바일에서는 간격 제거 */
        margin-left: 0; /* 모바일에서는 마진 제거 */
        width: 100%; /* 모바일에서 이미지 갤러리 전체 너비 차지 */
    }
    .text-wrapper {
        /* 텍스트 내용의 여백이나 스타일을 여기서 관리할 수 있습니다. */
        width: 100%;
        background-color: white;
    }
}

/* --- 3단 레이아웃 (index.html 제외, body.layout-3col) --- */
html:has(body.layout-3col),
html.layout-3col,
body.layout-3col {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body.layout-3col {
    background-color: #ffffff;
    color: #000000;
    font-size: 0.9vw;
    line-height: 1.7em;
    font-weight: 450;
    letter-spacing: -0.07em;
    overflow: hidden;
}

body.layout-3col h1,
body.layout-3col h2,
body.layout-3col h3,
body.layout-3col h4,
body.layout-3col h5,
body.layout-3col h6,
body.layout-3col h7,
body.layout-3col h8,
body.layout-3col hcv,
body.layout-3col hab {
    color: inherit;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

body.layout-3col > header {
    display: none;
}

body.layout-3col .bold {
    font-weight: 700;
}

body.layout-3col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}

#mobile-button {
    display: none;
}

body.layout-3col nav {
    width: 20%;
    flex-shrink: 0;
    font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
    font-size: 0.92em;
    letter-spacing: -0.03em;
}

#contents-container {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    overflow: hidden auto;
    scrollbar-width: none;
}

body.layout-3col:not(.layout-home) #contents-container {
    height: 100%;
}

#contents-container::-webkit-scrollbar {
    display: none;
}

#contents-container article {
    width: 40%;
}

#contents-container main {
    width: 60%;
}

body.layout-3col article,
body.layout-3col main {
    font-size: 0.92em;
}

body.layout-3col nav,
body.layout-3col article,
body.layout-3col main {
    padding: 1em 1em 2em;
    padding-top: calc(1em + 4rem);
    height: 100%;
    overflow: hidden auto;
    scrollbar-width: none;
    box-sizing: border-box;
}

body.layout-3col nav {
    padding-left: 2em;
    padding-right: 5px;
}

body.layout-3col main {
    padding-left: 2em;
    padding-right: 2em;
}

@media (min-width: 951px) {
    body.layout-3col:not(.layout-home) article {
        padding-right: 4em;
        padding-left: 2em;
    }
}

body.layout-3col nav::-webkit-scrollbar,
body.layout-3col article::-webkit-scrollbar,
body.layout-3col main::-webkit-scrollbar {
    display: none;
}

.site-name {
    margin-bottom: 0;
    height: 0;
    overflow: visible;
    font-size: 1.395em;
    font-weight: 800;
    line-height: 1.3;
    position: relative;
    top: -3rem;
    color: #4f4f4f;
}

.site-name a {
    color: inherit;
}

body.layout-3col:not(.layout-home) .site-name {
    color: transparent;
    pointer-events: none;
    user-select: none;
}

body.layout-3col nav .menu a {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    color: inherit;
}

body.layout-home nav .menu a {
    color: #4f4f4f;
}

body.layout-3col nav .menu {
    margin-top: 0;
}

body.layout-3col nav .menu > li {
    margin-bottom: 0.15em;
}

body.layout-3col nav .menu > li > a {
    font-weight: 550;
}

body.layout-3col nav .submenu {
    margin: 0.15em 0 0.85em;
    padding-left: 0;
    font-size: calc(1em / 1.012);
}

body.layout-3col nav .submenu li {
    margin-bottom: 0.45em;
}

body.layout-3col nav .submenu li a,
body.layout-3col nav .submenu a.sel {
    font-weight: 500;
    color: #000000;
}

body.layout-3col nav .submenu .nav-ko,
body.layout-3col nav .submenu .nav-en {
    display: block;
    width: fit-content;
    font-weight: 500;
    line-height: 1.36;
    text-shadow: 0.020em 0 0 currentColor;
}

body.layout-3col nav .submenu .nav-en {
    font-size: 100%;
}

body.layout-3col nav a.sel {
    font-weight: 550;
}

.page-title {
    font-weight: 700;
    margin-bottom: 1em;
    line-height: 1.25;
}

.page-contents {
    word-break: keep-all;
}

.page-contents p {
    margin: 0 0 1em;
}

.page-contents a {
    border-bottom: 0.1em solid currentColor;
}

body.layout-3col main figure,
body.layout-3col article figure {
    margin: 0 0 1em;
    width: 100%;
}
/* 이미지-캡션 간격 */
body.layout-3col main figure {
    margin-bottom: 15rem;
}

body.layout-3col main figure.portrait,
body.layout-3col article figure.portrait {
    width: 70%;
}

body.layout-3col main figure img,
body.layout-3col article figure img {
    width: 100%;
    height: auto;
    vertical-align: middle;
    display: block;
}

body.layout-3col main figure figcaption {
    width: fit-content;
    max-width: 100%;
    margin-top: 0.6em;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    font-size: calc(0.8em / 1);
    color: #000000;
    letter-spacing: -0.05em;
}

body.layout-3col .video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

body.layout-3col .video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.works-thumb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8em;
}

.works-thumb-grid a {
    display: block;
}

.works-thumb-grid img {
    width: 100%;
    height: auto;
    display: block;
}

body.layout-3col .cv-block h5 {
    font-weight: 700;
    margin: 0;
    line-height: inherit;
}

body.layout-3col .cv-block p + h5 {
    margin-top: 1em;
}

body.layout-3col .cv-block p {
    margin: 0;
    line-height: inherit;
}

body.layout-2col #contents-container {
    display: block;
    overflow: auto;
}

body.layout-2col #contents-container article {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible;
}

body.layout-2col #contents-container main {
    display: none;
}

@media (max-width: 2100px) {
    body.layout-3col { font-size: 1vw; }
}
@media (max-width: 1800px) {
    body.layout-3col { font-size: 1.1vw; }
}
@media (max-width: 1500px) {
    body.layout-3col { font-size: 1.3vw; }
}
@media (max-width: 1200px) {
    body.layout-3col { font-size: 1.4vw; }
    body.layout-3col nav { width: 25%; }
    #contents-container { width: 75%; }
}
@media (max-width: 1024px) {
    body.layout-3col { font-size: 1.5vw; }
}
@media (max-width: 950px) {
    body.layout-3col { font-size: 1.9vw; }
    body.layout-3col nav { width: 35%; }
    #contents-container {
        width: 65%;
        height: unset;
        display: block;
    }
    #contents-container article,
    #contents-container main {
        width: 100%;
        height: unset;
        overflow: unset;
    }
    #contents-container main {
        padding-top: 0;
        padding-left: 1em;
        padding-right: 1em;
    }
}
@media (max-width: 750px) {
    body.layout-3col { font-size: 2.2vw; }
}
@media (max-width: 600px) {
    body.layout-3col {
        font-size: 4.6vw;
        overflow: auto;
    }
    #main-container {
        display: block;
        height: unset;
    }
    body.layout-3col nav {
        position: fixed;
        left: 100%;
        top: 0;
        z-index: 9;
        width: 80%;
        height: 100%;
        background-color: #fff;
        border-left: 1px solid #000;
        transition: left 0.25s ease;
    }
    body.layout-3col.nav-open nav {
        left: 20%;
    }
    #mobile-button {
        display: block;
        position: fixed;
        right: 0;
        top: 0;
        padding: 0.2rem 0.8rem;
        z-index: 10;
        font-size: 10vw;
        cursor: pointer;
        line-height: 1;
        background: transparent;
        border: 0;
        color: #000;
    }
    #contents-container {
        width: 100%;
    }
    .works-thumb-grid {
        grid-template-columns: 1fr;
    }
    body.layout-3col main figure.portrait {
        width: 100%;
    }
}

/* --- 메인 페이지: 전체 배경 + 왼쪽 사이드바 --- */
.home-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url("images/main.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html:has(body.layout-home),
body.layout-home {
    background-color: transparent;
}

body.layout-home #main-container {
    position: relative;
    z-index: 1;
    background: transparent;
}

body.layout-home .site-name {
    font-weight: 700;
}

body.layout-home nav .menu > li > a,
body.layout-home nav a.sel {
    font-weight: 450;
}

body.layout-home nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
}

body.layout-home nav .submenu {
    display: none;
}

body.layout-home .overlay-footer {
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

@media (max-width: 600px) {
    body.layout-home #mobile-button {
        color: #fff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
        z-index: 11;
    }

    body.layout-home nav {
        background-color: rgba(255, 255, 255, 0.94);
        text-shadow: none;
    }
}