@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: 12.5px;
    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", "Noto Serif KR", "Noto Serif JP", serif;
    letter-spacing: 0.05em;
    font-weight: 400; 
}

/* 국문 및 특정 요소 볼드체 적용 */
.bold-700 {
    font-weight: 700 !important;
}

/* 목록 및 일반 텍스트 언어별 스타일 (fieldNotes와 공유) */
.ko-title {
    font-family: "Noto Serif KR", serif !important;
    font-weight: 700 !important;
}

.en-title {
    font-family: "Libre Bodoni", serif !important;
    font-weight: 400 !important;
}

.jp-title {
    font-family: "Noto Serif JP", serif !important;
    font-weight: 700 !important;
}

/* 리스트 및 링크 기본 스타일 */
a, .nav-links a, .composition-item a {
    font-family: "Libre Bodoni", "Noto Serif KR", serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}

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

/* 본문 영역 기본 링크 */
a {
    color: #000;
    text-decoration: none;
    font-family: "Libre Bodoni", "Nanum Myeongjo", serif;
    font-weight: 400; 
    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: 12.5px;
    line-height: 1.75;
}

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

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

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

#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;
    }

    .sidebar-sns-desktop, 
    .sidebar-info-desktop {
        display: none;
    }

    .sidebar-info-mobile {
        display: block !important;
        width: 360px;
        margin-top: 180px;
        padding: 15px 20px 40px 20px;
        border-top: 1px solid #000;
    }

    #content {
        padding: 20px;
        width: 360px;
        flex-basis: 360px;
    }

    .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: 13.5px !important;
        line-height: 1.75 !important;
    }

    #random-photo, 
    img[alt*="profile"],
    .about-section img {
        width: auto !important;
        height: 180px !important;
        max-width: 100% !important;
    }

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

/* 목록 및 일반 텍스트 언어별 스타일 (하이브리드 렌더링용) */
.ko-title {
    font-family: "Noto Serif KR", serif !important;
    font-weight: 700 !important;
    font-size: inherit;
}

.en-title {
    font-family: "Libre Bodoni", serif !important;
    font-weight: 400 !important;
    font-size: inherit;
}

.jp-title {
    font-family: "Noto Serif JP", serif !important;
    font-weight: 700 !important;
    font-size: inherit;
}

/* upcomingEvents 제목은 언어에 관계없이 일반체(400) 적용 */
.event-title .ko-title,
.event-title .en-title,
.event-title .jp-title {
    font-weight: 400 !important;
}

/* 기존 스타일 유지 */
.bio-kr a {
    font-family: "Libre Bodoni", "Nanum Myeongjo", serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.bio-jp a {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
}
/* --- 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: 400;
    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;
}