@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&family=Noto+Serif+JP:wght@400;700&family=Noto+Serif+KR:wght@400;700&family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* 전역 박스 모델 설정 */
* {
    box-sizing: border-box;
}

/* 기본 리셋 및 세리프 폰트 설정 */
body {
    margin: 0;
    padding: 0;
    font-family: "Libre Baskerville", "Noto Serif KR", "Noto Serif JP", serif;
    font-size: 14px; /* 데스크톱 기본 14px */
    line-height: 1.75;
    display: flex;
    min-height: 100vh;
    color: #000;
}

/* 제목 및 헤더용 폰트 설정 */
h1, h2, h3, h4, h5, h6, .nav-links, .nav-section-title, .title-font {
    font-family: "Libre Bodoni", "Nanum Myeongjo", "Noto Serif JP", serif;
    letter-spacing: 0.05em;
    font-weight: 700; /* Nanum Myeongjo Bold 강제 적용 */
}

h1, h2, h3 {
    font-weight: 700;
}

/* 본문 영역 기본 링크 */
a {
    color: #000;
    text-decoration: none;
    font-family: "Libre Bodoni", "Nanum Myeongjo", serif;
    font-weight: 700; /* Nanum Myeongjo Bold 강제 적용 */
    letter-spacing: 0.05em;
}
a:hover {
    text-decoration: underline;
}

/* 좌측 사이드바 고정 영역 */
#sidebar {
    width: 210px; 
    padding: 30px;
    flex-shrink: 0;
    border-right: 1px solid #000;
}

#sidebar h1 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 30px;
}

#sidebar h1 a {
    color: #000;
    letter-spacing: 0.05em;
}

.nav-section-title {
    margin-top: 20px;
    font-weight: normal;
    color: #000;
    letter-spacing: 0.05em;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 5px 0 20px;
    letter-spacing: 0.05em;
}

/* 사이드바 링크 */
#sidebar a {
    color: #000;
}
#sidebar a:hover,
#sidebar a.active {
    text-decoration: underline;
    font-weight: bold;
}

/* 우측 메인 콘텐츠 영역 (비가변 고정폭) */
#content {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 30px 50px;
    width: 900px; 
    text-align: left;
}

/* 본문 텍스트 위계 재정비 (Desktop) */
.about-section, 
.program-notes, 
.composition-detail,
.performance-notes,
.misc-content,
.events-section p,
#content p,
.sidebar-info-mobile,
.sidebar-info-desktop,
.note-content {
    font-family: "Libre Baskerville", "Noto Serif KR", "Noto Serif JP", serif;
    font-size: 14px; /* 영문 기본 14px */
    line-height: 1.75;
}

/* 국문 및 일문 텍스트 시각적 크기 보정 (Desktop 15px) */
.bio-kr, .bio-jp, .kr-text, .jp-text, .note-content, .program-notes {
    font-size: 15px !important;
}

/* 뒤로가기 링크 및 메타 정보 (12px 유지) */
.back-link, .meta-info {
    font-size: 12px !important;
}

/* 사이드바 메뉴 및 섹션 제목 (14px로 상향) */
.nav-links, 
.nav-section-title {
    font-size: 14px;
}

#sidebar h1 {
    font-size: 16px; /* Han LEE 이름 크기 고정 */
}

/* 모든 이미지 전역 설정 (왼쪽 정렬 고정) */
img {
    display: block;
    margin-left: 0 !important;
    margin-right: auto !important;
    border: 1px solid #000;
}

/* --- Stepped Non-Fluid Layout --- */
@media (max-width: 1150px) {
    body {
        flex-direction: column;
    }

    #sidebar {
        width: 360px; /* 모바일 전체 고정폭 */
        padding: 15px 20px;
        border-right: none;
        border-bottom: 1px solid #000;
    }

    #sidebar h1 {
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        align-items: baseline;
    }

    .tagline-desktop {
        display: none !important;
    }

    .tagline-mobile {
        display: inline !important;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 15px;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    /* 사이드바 SNS/정보 숨기기 */
    .sidebar-sns-desktop, 
    .sidebar-info-desktop {
        display: none;
    }

    /* 모바일 하단 정보 */
    .sidebar-info-mobile {
        display: block !important;
        width: 360px;
        margin-top: 180px; /* 본문과 실선 사이의 간격 - 기존 60px에서 3배로 증대 */
        padding: 15px 20px 40px 20px; /* 실선과 링크 사이의 간격을 40px에서 15px로 대폭 축소 */
        border-top: 1px solid #000;
    }

    #content {
        padding: 20px;
        width: 360px; /* 모바일 전체 고정폭 */
        flex-basis: 360px;
    }

    /* 모바일 본문 크기 데스크톱과 동일하게 유지 (EN 14px, CJK 15px) */
    .bio-kr, .bio-jp, .kr-text, .jp-text, .note-content, .program-notes,
    .bio-kr p, .bio-jp p, .kr-text p, .jp-text p, .note-content p, .program-notes p {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    /* 이미지 크기: 내부 폭(360 - 40 = 320)에 맞춰 고정 */
    #random-photo, 
    img[alt*="profile"],
    .about-section img {
        width: auto !important;
        height: 180px !important; /* 모바일에서 사진 높이를 180px로 축소 */
        max-width: 100% !important;
    }

    .nav-section-title {
        display: none;
    }
}

/* Language-specific bio link styles */
.bio-kr a {
    font-family: "Libre Bodoni", "Nanum Myeongjo", serif;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.bio-jp a {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
}
/* --- Buttons & Interactive Elements --- */
.media-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* 데스크톱에서 최대 너비 */
    margin-bottom: 30px;
}

.media-container iframe {
    position: relative;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 1px solid #000;
}

.box-button {
...
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #000;
    font-family: "Libre Bodoni", "Nanum Myeongjo", serif;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.box-button:hover {
    background-color: #000;
    color: #fff !important;
    text-decoration: none !important;
}

/* Composition list view toggle buttons */
.view-toggle button {
    padding: 2px 5px;
}

.view-toggle button:hover {
    text-decoration: underline !important;
}