* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    line-height: 1.6;
    color: #2c2c2c;
    background: linear-gradient(135deg, #0a0f1c 0%, #1a1a2e 50%, #2d1b69 100%);
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: rgba(245, 245, 245, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #1a1a2e;
    text-decoration: none;
    text-shadow: none;
}

.korean-name {
    font-size: 1.2rem;
    color: #666;
    font-weight: normal;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: #1a1a2e;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    text-shadow: none;
}

.nav-links a:hover {
    color: #7b68ee;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #7b68ee;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.language-toggle {
    background: linear-gradient(45deg, #4a306b, #2d1b69);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.language-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Hero Section */
.hero {
    margin-top: 80px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23243447" width="1200" height="600"/><path fill="%234a306b" d="M0 300L50 280C100 260 200 220 300 200C400 180 500 180 600 200C700 220 800 260 900 280C1000 300 1100 300 1150 300L1200 300V600H1150C1100 600 1000 600 900 600C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V300Z"/></svg>') center/cover;
    color: white;
    text-align: center;
    padding: 75px 0;
    position: relative;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 10px;
    font-weight: 300;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 2px;
}

.hero-korean {
    font-size: 2.5rem;
    margin-bottom: 20px;
    opacity: 0.9;
    font-weight: 300;
    animation: fadeInUp 1s ease 0.2s both;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 1.5px;
}

.hero-content p {
    font-size: 1.6rem;
    margin-bottom: 30px;
    opacity: 0.9;
    animation: fadeInUp 1s ease 0.4s both;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 1px;
    font-weight: 400;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(45deg, #4a306b, #2d1b69);
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease 0.6s both;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

/* Bio Section */
.bio-section {
    background: #f5f5f5;
    padding: 100px 0;
    position: relative;
}

.bio-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
}

.bio-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.bio-image:hover {
    transform: scale(1.02);
}

.bio-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bio-text h2 {
    font-size: 3rem;
    margin-bottom: 30px;
    color: #1a1a2e;
    position: relative;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 1px;
}

.bio-text h2::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 4px;
    background: linear-gradient(45deg, #4a306b, #2d1b69);
    bottom: -10px;
    left: 0;
}

.bio-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.bio-text .lang-ko p {
    font-weight: 600;
}

.awards {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    margin-top: 30px;
    border-left: 5px solid #4a306b;
}

.awards h3 {
    color: #1a1a2e;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.awards ul {
    list-style: none;
}

.awards li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.awards li::before {
    content: '🏆';
    position: absolute;
    left: 0;
}

/* Mission Section */
.mission-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 100%);
    color: white;
    padding: 100px 0;
}

.mission-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.mission-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(255,255,255,0.1);
    transition: transform 0.3s ease;
}

.mission-image:hover {
    transform: scale(1.02);
}

.mission-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mission-text-content h2 {
    font-size: 3rem;
    margin-bottom: 40px;
    font-weight: 300;
    text-align: left;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 1px;
}

.mission-text {
    font-size: 1.2rem;
    line-height: 2;
    font-style: italic;
    opacity: 0.95;
}

.mission-text.korean {
    display: none;
}

.mission-text p {
    margin-bottom: 20px;
}

.section-title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 60px;
    color: #1a1a2e;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 1px;
}

.contact-section .section-title {
    color: white;
}

.contact-email {
    margin-top: 40px;
}

.email-link {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 15px 30px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
}

.email-link:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
    transform: translateY(-2px);
}

/* Performance History Section */
.performance-section {
    background: #f0f0f0;
    padding: 100px 0;
}

.performance-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.performance-table th {
    background: #1a1a2e;
    color: white;
    padding: 20px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
}

.performance-table td {
    padding: 20px 15px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    vertical-align: top;
}

.performance-table tr:last-child td {
    border-bottom: none;
}

.performance-table tr:hover {
    background: #f8f9fa;
}

.performance-table .opera-title {
    font-style: italic;
    color: #1a1a2e;
    font-weight: 500;
}

.performance-table .role {
    font-weight: 600;
    color: #4a306b;
}

.performance-table .year {
    font-weight: 600;
    color: #1a1a2e;
}

.performance-table .notes {
    font-size: 0.9rem;
    color: #888;
}

/* Conductors Section */
.conductors-section {
    background: #e8e8e8;
    padding: 100px 0;
}

.conductors-intro {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.conductors-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.conductor-item {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-left: 5px solid #4a306b;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.conductor-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.conductor-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 10px;
}

.conductor-work {
    color: #4a306b;
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 8px;
}

.conductor-company {
    color: #888;
    font-size: 0.95rem;
}

/* Video Section */
.video-section {
    margin-top: 60px;
    text-align: center;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-title {
    font-size: 1.5rem;
    color: #1a1a2e;
    margin-bottom: 30px;
    font-weight: 500;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 0.5px;
}

/* Contact Section */
.contact-section {
    background: linear-gradient(135deg, #0a0f1c 0%, #1a1a2e 50%, #2d1b69 100%);
    color: white;
    padding: 100px 0;
    text-align: center;
}


/* Language specific content */
.lang-ko {
    display: none;
}

body.korean .lang-en {
    display: none;
}

body.korean .lang-ko {
    display: block;
}

body.korean .mission-text.korean {
    display: block;
}

body.korean .mission-text.english {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-korean {
        font-size: 2rem;
    }

    .bio-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mission-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mission-text-content h2 {
        text-align: center;
    }

    .performance-table {
        font-size: 0.8rem;
    }

    .performance-table th,
    .performance-table td {
        padding: 10px 8px;
    }

    .performance-table th:nth-child(4),
    .performance-table td:nth-child(4),
    .performance-table th:nth-child(5),
    .performance-table td:nth-child(5) {
        display: none;
    }

    .conductors-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .conductor-item {
        padding: 20px;
    }

    .video-container {
        max-width: 100%;
        margin: 0 10px;
    }

    .video-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}