/* ==========================================
   1. 글로벌 디자인 시스템 변수 정의
   ========================================== */
:root {
    --bg-space: #0B0F19;
    --surface-card: rgba(22, 31, 48, 0.7);
    --surface-border: rgba(255, 255, 255, 0.1);
    --primary-photon: #00D2FF;
    --secondary-quantum: #00F2FE;
    --accent-warning: #FF5E62;
    --text-main: #F5F7FA;
    --text-sub: #94A3B8;

    --font-main-title: clamp(2.2rem, 5vw, 4.5rem);
    --font-sec-heading: clamp(1.6rem, 3.5vw, 2.8rem);
    --font-body: clamp(0.95rem, 1.2vw, 1.1rem);
    --font-button: clamp(0.9rem, 1vw, 1.05rem);

    --spacing-layout: clamp(2rem, 6vw, 5rem);
    --spacing-gap: clamp(1rem, 3vw, 2.5rem);
    
    --header-height: 70px;
}

/* ==========================================
   2. 브라우저 기본 마진 및 배경 초기화 (필수)
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html, body {
    background-color: #0B0F19 !important; /* 다크 테마 배경색 강제 고정 */
    color: #F5F7FA !important;            /* 기본 글자색을 밝은 톤으로 고정 */
    font-family: 'Pretendard', -apple-system, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ==========================================
   3. Hero Section 스타일 (메인 타이틀)
   ========================================== */
.hero-content {
    text-align: center;
    max-width: 900px;
    padding: 0 var(--spacing-gap);
    z-index: 10;
    margin: 0 auto;
}

.hero-title {
    font-size: var(--font-main-title);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    background: linear-gradient(to bottom, #FFFFFF 40%, #A5B4FC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    color: var(--primary-photon);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 3rem;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
}

/* ── css/main.css 의 .btn-explore 관련 스타일 수정 ── */

.btn-explore {
    display: inline-block;
    padding: 1.1rem 3rem; /* 버튼 크기를 살짝 키워 안정감 확보 */
    font-size: var(--font-button);
    font-weight: 700;     /* 글자 굵기를 더 두껍게 변경 */
    color: #0B0F19;       /* 기본 글자색을 어둡게 하여 버튼 배경과 대비 증가 */
    
    /* 버튼 배경을 투명이 아닌 선명한 사이언 네온 컬러로 가득 채움 */
    background: linear-gradient(135deg, var(--primary-photon), var(--secondary-quantum));
    border: none;
    border-radius: 50px;
    
    /* 버튼 자체에서 빛이 뿜어져 나오는 듯한 강한 네온 글로우 효과 추가 */
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4), 
                0 10px 25px -5px rgba(0, 210, 255, 0.3);
    
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.05em;
    text-decoration: none;
}

/* 마우스를 올렸을 때(Hover) 더욱 다이내믹한 시각 효과 */
.btn-explore:hover {
    color: #FFFFFF;
    /* 마우스를 올리면 내부 색상이 살짝 어두워지면서 테두리가 강조되는 역전 효과 */
    background: #0B0F19;
    box-shadow: 0 0 35px rgba(0, 210, 255, 0.8),
                inset 0 0 0 2px var(--primary-photon);
    transform: scale(1.05) translateY(-2px);
}

/* ==========================================
   4. Problem Section 스타일 (사용자 소스 통합)
   ========================================== */
.problem-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 var(--spacing-gap);
    text-align: center;
    margin: 0 auto;
}

.section-title {
    font-size: var(--font-sec-heading);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.section-desc {
    font-size: var(--font-body);
    color: var(--text-sub);
    margin-bottom: 4rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-gap);
    perspective: 1000px;
}

/* ── css/main.css 의 카드 디자인 부분 수정 ── */

/* Glassmorphism 베이스 카드 디자인 (가시성 및 입체감 강화 버전) */

/* ── css/main.css 의 .choice-card 관련 스타일 수정 ── */

.choice-card {
    /* 배경을 확실히 밝은 딥 블루 그레이 계열로 변경하여 배경색(#0B0F19)과 완벽 분리 */
    background: #1E293B; 
    /* 테두리를 은은한 흰색 투명도로 감싸 카드 경계선을 뚜렷하게 빌드 */
    border: 1px solid rgba(255, 255, 255, 0.12); 
    border-radius: 24px;
    padding: 3rem 2rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* 카드가 붕 떠 있는 듯한 고급스러운 깊이감의 그림자 추가 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

/* 마우스를 올렸을 때 은은하게 반응하는 효과 */
.choice-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* 카드를 클릭해서 선택했을 때 내부 배경을 더 깊고 진하게 반전 */
.choice-card.selected {
    background: #0F172A;
    transform: scale(1.02) translateY(-4px);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.choice-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.card-intro {
    color: var(--text-sub);
    font-size: var(--font-body);
    margin-bottom: 2rem;
    height: 3em;
}

.result-list {
    list-style: none;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease;
    border-top: 1px solid var(--surface-border);
    padding-top: 1.5rem;
}

.result-list li {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.choice-card.selected.type-electricity {
    border-color: var(--accent-warning);
    box-shadow: 0 0 40px rgba(255, 94, 98, 0.25);
    transform: scale(1.02);
}
.choice-card.selected.type-electricity .result-list {
    opacity: 1;
    transform: translateY(0);
}

.choice-card.selected.type-light {
    border-color: var(--primary-photon);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.3);
    transform: scale(1.02);
}
.choice-card.selected.type-light .result-list {
    opacity: 1;
    transform: translateY(0);
}

.choice-card.dimmed {
    opacity: 0.3;
    filter: blur(1px);
    transform: scale(0.98);
}

/* ==========================================
   Hero Section 페이드인 애니메이션 (JS 독립형 완전판)
   ========================================== */
.hero-content .hero-title, 
.hero-content .hero-subtitle, 
.hero-content .cta-container {
    opacity: 0;
    animation: smoothFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 처음 켰을 때 차례대로 등장하는 딜레이 설정 */
.hero-content .hero-subtitle { animation-delay: 0.1s; }
.hero-content .hero-title    { animation-delay: 0.3s; }
.hero-content .cta-container  { animation-delay: 0.5s; }

/* 상단 로고나 홈 버튼을 눌렀을 때(URL 뒤에 #이 붙거나 주소가 바뀔 때) 애니메이션 강제 재트리거 */
#hero:target .hero-subtitle,
:root:not(:target) .hero-subtitle { animation: smoothFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.1s; }
#hero:target .hero-title,
:root:not(:target) .hero-title    { animation: smoothFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s; }
#hero:target .cta-container,
:root:not(:target) .cta-container  { animation: smoothFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s; }

@keyframes smoothFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Reflection Section 스타일 (시뮬레이터 레이아웃)
   ========================================== */
.simulation-container {
    max-width: 1200px;
    width: 100%;
    padding: 5rem var(--spacing-gap);
    text-align: center;
    margin: 0 auto;
}

.sim-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-gap);
    background: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
    .sim-wrapper {
        grid-template-columns: 1fr;
    }
}

.sim-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.control-group label {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* 미래지향적 슬라이더 디자인 */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none; /* 표준 속성 추가 */
    width: 100%;
    background: #0F172A;
    height: 8px;
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-photon);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--primary-photon);
    transition: transform 0.1s;
}

.info-panel {
    background: #0F172A;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.info-item .cyan { color: var(--primary-photon); }
.info-item .yellow { color: #FBBF24; font-weight: 700; }

.status-box {
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 캔버스 스타일 */
.sim-visual {
    background: #0F172A;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#rayCanvas {
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 4;
}

/* main.css 맨 아래에 추가 */
.core-color {
    color: #8B5CF6 !important; /* 매질 1: 퍼플 */
    font-weight: bold;
}
.cladding-color {
    color: #10B981 !important; /* 매질 2: 민트 그린 */
    font-weight: bold;
}

/* ==========================================
   Reflection Section 가이드 박스 디자인
   ========================================== */
.sim-guide-box {
    margin-top: 2.5rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2rem;
    text-align: left;
}

.sim-guide-box h3 {
    font-size: 1.3rem;
    color: #FBBF24; /* 골드 네온 */
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
}

.guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .guide-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

.guide-item h4 {
    font-size: 1.05rem;
    color: #FFF;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.guide-item p {
    font-size: 0.92rem;
    color: #94A3B8;
    line-height: 1.6;
}

/* ==========================================
   Intro & Problem Section 개조 스타일
   ========================================== */
#intro {
    padding: 6rem 1rem;
    background: linear-gradient(to bottom, #0B0F19, #0F172A);
}

.question-flow {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.flow-text {
    font-size: 1.2rem;
    color: #94A3B8;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.main-question {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFF;
    margin-top: 3rem;
    padding: 2rem;
    border-left: 4px solid var(--primary-photon);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 16px 16px 0;
}

.choice-sub-text {
    font-size: 1.1rem;
    margin-top: 1rem;
    color: #64748B;
}

/* 카드 디테일 제어 (기본 닫힘 -> 클릭 시 열림) */
.card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.4s ease;
    opacity: 0;
}

.choice-card.selected .card-details {
    max-height: 500px;
    opacity: 1;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-status-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: #64748B;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.choice-card.selected .card-status-tag {
    background: rgba(14, 165, 233, 0.2);
    color: var(--primary-photon);
    border-color: var(--primary-photon);
    content: "분석 완료";
}

/* 탐구 노트 스타일 */
.discovery-note {
    margin-top: 4rem;
    background: #131D30;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: left;
    transition: all 0.5s ease;
}

.discovery-note.activated {
    border-color: #0EA5E9;
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.15);
}

.discovery-note h3 {
    color: #FBBF24;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.note-placeholder {
    color: #475569;
    font-style: italic;
}

.note-content.hidden {
    display: none;
}

.next-signal {
    margin-top: 1.5rem;
    font-weight: bold;
    color: #10B981;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* main.css 맨 아래 .unlock-toast 스타일을 이걸로 교체 */
.sim-visual {
    position: relative; /* 안에 있는 팝업이 캔버스 기준으로 정렬되도록 고정 */
}

/* ==========================================
   추가: Future Section & Footer (기존 스타일 보존형)
   ========================================== */
#future {
    padding: 80px 0;
    background: linear-gradient(to bottom, #0F172A, #070A12);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.future-academic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .future-academic-grid { grid-template-columns: 1fr; }
}

.academic-card {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px;
    text-align: left;
    transition: all 0.3s ease;
}

.academic-card:hover {
    transform: translateY(-5px);
    border-color: #38bdf8;
}

.card-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.card-tag.primary {
    background: rgba(14, 165, 233, 0.1);
    color: #38bdf8;
}

.academic-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #fff;
}

.academic-summary {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.academic-details {
    list-style: none;
    padding: 0;
}

.academic-details li {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-bottom: 12px;
    line-height: 1.6;
    position: relative;
    padding-left: 15px;
}

.academic-details li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #38bdf8;
}

/* 최종 보고서 박스 */
.final-report-box {
    margin-top: 60px;
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 24px;
    padding: 50px;
    position: relative;
}

.report-header {
    position: absolute;
    top: -15px;
    left: 30px;
    background: #0ea5e9;
    color: #fff;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
}

.report-content p {
    color: #e2e8f0;
    line-height: 1.9;
    text-align: left;
    font-size: 1.05rem;
}

.report-content strong {
    color: #38bdf8;
}

/* 푸터 스타일 */
.global-footer {
    padding: 60px 0;
    background: #04060b;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.global-footer p {
    color: #64748b;
    font-size: 0.9rem;
}

.footer-sub {
    margin-top: 5px;
    font-size: 0.8rem !important;
    opacity: 0.6;
}

/* ==========================================
   추가: 실리콘 포토닉스 하이테크 애니메이션 모듈
   ========================================== */
.physics-anim-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: #090D16;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 30px;
}

.anim-track {
    text-align: left;
}

.track-label {
    font-size: 0.85rem;
    color: #64748B;
    margin-bottom: 10px;
    font-family: monospace;
}

/* 구리 배선 애니메이션 */
.copper-wire {
    height: 60px;
    background: linear-gradient(90deg, #B45309 0%, #78350F 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.electron {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    box-shadow: 0 0 10px #EF4444;
    top: 50%;
    transform: translateY(-50%);
}

/* 불규칙하게 충돌하며 느리게 가는 전자 표현 */
.e1 { animation: drift 1.5s infinite linear; top: 25%; }
.e2 { animation: drift 2.2s infinite linear; top: 45%; animation-delay: 0.3s; }
.e3 { animation: drift 1.8s infinite linear; top: 70%; animation-delay: 0.7s; }
.e4 { animation: drift 2.5s infinite linear; top: 35%; animation-delay: 1.1s; }

@keyframes drift {
    0% { left: -5%; transform: translate(0, -50%) scale(1); }
    30% { transform: translate(15px, -10px); background: #FBBF24; }
    60% { transform: translate(30px, 8px); }
    100% { left: 105%; transform: translate(0, -50%) scale(0.8); }
}

.heat-wave {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(239,68,68,0.15) 0%, transparent 80%);
    animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* 광도파로 전반사 애니메이션 */
.waveguide-wire {
    display: flex;
    flex-direction: column;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.cladding-top, .cladding-bottom {
    height: 25px;
    background: #1E293B;
    color: #475569;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
}

.core-center {
    height: 50px;
    background: #0F172A;
    color: #38BDF8;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: monospace;
    font-weight: bold;
}

/* 코어 내부에서 완벽하게 지그재그 튕기는 전반사 레이저선 */
.photon-beam {
    position: absolute;
    height: 3px;
    width: 60px;
    background: #0EA5E9;
    box-shadow: 0 0 15px #0EA5E9, 0 0 5px #FFF;
    left: -10%;
    top: 50%;
    animation: totalReflectionMoving 1.2s infinite linear;
}

@keyframes totalReflectionMoving {
    0% {
        left: -10%;
        top: 10%;
    }
    25% {
        top: 90%;
    }
    50% {
        top: 10%;
    }
    75% {
        top: 90%;
    }
    100% {
        left: 110%;
        top: 50%;
    }
}

/* 🚀 탐구 노트 #02 알림 배너 사이즈 업 및 상단 배치 수정 */
.unlock-toast {
    position: absolute;
    /* 💡 기존 bottom(아래)에서 top(위)으로 변경하여 레이저 화면 위쪽에 배치 */
    top: 25px; 
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    
    /* 💡 시인성을 극대화하기 위해 패딩(여백)과 글자 크기를 대폭 확대 */
    font-size: 1.15rem; /* 더 커진 글씨 */
    padding: 1rem 2.5rem; /* 더 넓어진 배너 크기 */
    font-weight: 800;
    color: #000;
    
    /* 황금빛 그라데이션 및 네온 효과 강화 */
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%);
    backdrop-filter: blur(6px);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(251, 191, 36, 0.6);
    text-align: center;
    pointer-events: none;
    
    /* 기본 숨김 */
    display: none;
    opacity: 0;
    z-index: 10; /* 레이저 그래픽보다 무조건 위에 뜨도록 보장 */
}

/* 활성화 시 위에서 아래로 부드럽게 통 튕기며 등장 */
.unlock-toast.show {
    display: block;
    animation: popDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popDown {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==========================================
   최종 해결: 광섬유 심화 텍스트 하이테크 스타일링
   ========================================== */
.fiber-depth-analysis {
    margin-top: 40px !important;
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 20px !important;
    padding: 35px !important;
    text-align: left !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

.analysis-header {
    font-size: 1.2rem !important;
    color: #38BDF8 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 12px !important;
    font-family: monospace !important;
}

.fiber-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
}

@media (max-width: 768px) {
    .fiber-grid { grid-template-columns: 1fr !important; }
}

.fiber-theory-box h4 {
    font-size: 1.1rem !important;
    color: #FFF !important;
    margin-bottom: 12px !important;
}

.fiber-theory-box p {
    font-size: 0.95rem !important;
    color: #94A3B8 !important;
    line-height: 1.7 !important;
}

.academic-bullet {
    list-style: none !important;
    padding-left: 0 !important;
}

.academic-bullet li {
    font-size: 0.92rem !important;
    color: #CBD5E1 !important;
    margin-bottom: 10px !important;
    position: relative !important;
    padding-left: 15px !important;
}

.academic-bullet li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    color: #38BDF8 !important;
}

.fiber-application-banner {
    margin-top: 30px !important;
    background: rgba(56, 189, 248, 0.08) !important;
    border-left: 4px solid #38BDF8 !important;
    padding: 20px !important;
    border-radius: 0 12px 12px 0 !important;
}

.fiber-application-banner h5 {
    font-size: 1.05rem !important;
    color: #38BDF8 !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

.fiber-application-banner p {
    font-size: 0.95rem !important;
    color: #E2E8F0 !important;
    line-height: 1.65 !important;
}

/* ==========================================
   추가: 광섬유 섹션 하이테크 애니메이션 효과
   ========================================== */

/* 1. 제목 배경 그라데이션 및 네온 효과 */
/* 🪐 광섬유 타이틀 폰트 테크니컬 스타일링 */
.fiber-depth-analysis .analysis-header {
    /* 기본 고딕체를 버리고 SFPro, 멘로, 모노스페이스 계열의 개발자 감성 폰트 지정 */
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
    
    /* 굵기와 자간(글자 사이 간격)을 정밀 조정하여 미래지향적인 느낌 연출 */
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important; /* 글자 사이를 살짝 띄워 가독성과 세련미 업 */
    text-transform: uppercase; /* 영문 대문자 감성 강조 */
    
    /* 기존에 넣었던 그라데이션 및 네온 효과와 결합 */
    background: linear-gradient(90deg, #38BDF8, #FBBF24, #38BDF8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineTitle 3s linear infinite;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
    
    border-bottom: 2px solid rgba(56, 189, 248, 0.2) !important;
    padding-bottom: 15px !important;
    margin-bottom: 25px !important;
}

@keyframes shineTitle {
    to { background-position: 200% center; }
}

/* 2. 박스 호버 시 테두리 흐름 효과 */
.fiber-theory-box {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.fiber-theory-box:hover {
    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.fiber-theory-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38BDF8, transparent);
    transition: all 0.5s ease;
}

.fiber-theory-box:hover::after {
    left: 100%;
}

/* 3. 불릿 포인트 숨쉬기 애니메이션 */
.academic-bullet li::before {
    animation: bulletPulse 1.5s infinite ease-in-out;
}

@keyframes bulletPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* 4. 배너 배경 은은한 빛 효과 */
.fiber-application-banner {
    background: rgba(56, 189, 248, 0.05);
    position: relative;
    overflow: hidden;
}

.fiber-application-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
    animation: bannerGlow 5s infinite linear;
}

@keyframes bannerGlow {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(10%, 10%) rotate(360deg); }
}

/* 푸터 전체 영역 디자인 */
.final-project-footer {
    background-color: #0F172A !important;
    border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
    padding: 30px 0 !important;
    margin-top: 80px !important;
    width: 100% !important;
    display: block !important;
}

/* 내부 정렬 */
.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 프로젝트 정보 배지 */
.project-info .badge {
    font-family: monospace;
    font-size: 0.75rem;
    color: #38BDF8;
    background-color: rgba(56, 189, 248, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.project-info h3 {
    font-size: 1rem;
    color: #64748B;
    margin-top: 8px;
    font-weight: 500;
}

/* 연구자 정보 정렬 */
.researcher-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: monospace;
}

/* RESEARCHER 파란색 배지 */
.researcher-info .role {
    font-size: 0.75rem;
    color: #0F172A;
    background-color: #38BDF8;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 4px;
}

/* 소속 및 이름 색상 */
.researcher-info .name {
    font-size: 0.95rem;
    color: #E2E8F0;
}

/* 소속학과 강조 (노란색) */
.researcher-info .name strong {
    color: #FBBF24;
    font-weight: 700;
    margin-right: 6px;
}

/* ==========================================
   광섬유 심화 섹션 글씨 크기 대폭 확대
   ========================================== */
/* 1. 메인 타이틀 크기 확대 (2rem -> 2.4rem) */
.fiber-main-title .title-text {
    font-size: 2.4rem !important;
}

/* 2. 소제목 크기 확대 (1.1rem -> 1.3rem) */
.fiber-theory-box h4 {
    font-size: 1.3rem !important;
    margin-bottom: 18px !important;
}

/* 3. 본문 설명 글씨 크기 확대 (0.95rem -> 1.1rem) */
.fiber-theory-box p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important; /* 자간 흐름에 맞춰 줄간격도 넓힘 */
}

/* 4. 하단 네트워크 CS 융합 배너 글씨 확대 */
.fiber-application-banner h5 {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
}

.fiber-application-banner p {
    font-size: 1.08rem !important;
    line-height: 1.8 !important;
}

/* ==========================================
   광섬유 섹션 독립성 확보 (한 화면 가득 채우기)
   ========================================== */

/* 1. 탐구 노트 #02와 광섬유 제목 사이의 간격을 대폭 넓힘 */
.fiber-main-title {
    margin-top: 180px !important; /* 기존 80px에서 180px로 대폭 확장 */
}

/* 2. 광섬유 본문 박스가 최소한 한 화면(뷰포트) 전체를 차지하도록 설정 */
.fiber-depth-analysis {
    /* min-height: 85vh; 는 브라우저 화면 높이의 85%를 최소 높이로 강제 지정합니다.
       여기에 위쪽 타이틀 공간까지 더해지면 딱 한 화면을 온전히 광섬유 파트가 독점하게 됩니다.
    */
    min-height: 85vh !important;
    
    /* 콘텐츠들을 세로로 예쁘게 정렬하기 위한 내부 여백 및 배치 조절 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 50px !important; /* 안쪽 여백도 시원하게 넓힘 */
    margin-bottom: 120px !important; /* 아래쪽 실리콘 포토닉스가 올라오지 못하도록 바리케이드 */
}

/* 3. 화면이 커졌을 때 본문 그리드 간격도 시원하게 조정 */
.fiber-grid {
    gap: 40px !important;
    margin-bottom: 40px !important;
}

/* ==========================================
   최종 수정: 광섬유 내부 빈 공간 버그 해결 및 바깥 마진 확장
   ========================================== */

/* 1. 박스 내부가 비어 보이는 버그 해결 (강제 높이 지정 삭제) */
.fiber-depth-analysis {
    min-height: auto !important; /* 내부 빈 공간을 없애고 글자 크기에 딱 맞춤 */
    display: block !important;
    padding: 40px !important;
    
    /* 2. 💡 요청하신 핵심: 광섬유 박스 "바깥 밑에" 거대한 바리케이드를 쳐서 다음 섹션을 밀어냄 */
    margin-bottom: 300px !important; /* 광섬유와 실리콘 포토닉스 사이의 완벽한 분리 */
}

/* 3. 위쪽 탐구 노트 #02와의 위쪽 바깥 간격도 시원하게 고정 */
.fiber-main-title {
    margin-top: 200px !important; /* 위쪽 섹션이 침범하지 못하게 간격 확보 */
}
/* ==========================================
   🏛️ 과학관 전시회 스타일 가이드 & UX 테마
   ========================================== */
:root {
    --bg-dark: #0B132B;
    --card-bg: #1C2541;
    --neon-cyan: #38BDF8;
    --neon-yellow: #FBBF24;
    --text-main: #F1F5F9;
    --text-muted: #94A3B8;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

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

/* 🤔 사용자가 먼저 질문을 마주하게 만드는 Think Box */
.think-box {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(251, 191, 36, 0.05));
    border-left: 4px solid var(--neon-cyan);
    border-radius: 0 16px 16px 0;
    padding: 24px;
    margin-bottom: 40px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.think-icon {
    font-size: 2rem;
}

.think-text h4 {
    margin: 0 0 8px 0;
    color: var(--neon-yellow);
    font-size: 1.15rem;
}

.think-text p {
    margin: 0;
    color: var(--text-main);
    line-height: 1.6;
}

/* 🛠️ 인터랙티브 실험실 랩 형태의 레이아웃 */
.sim-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

@media (max-width: 900px) {
    .sim-wrapper { grid-template-columns: 1fr; }
}

.sim-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.control-group label {
    display: block;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

/* 슬라이더 하이테크 스타일 (오류 해결 버전) */
input[type="range"] {
    width: 100%;
    appearance: none; /* 표준 속성을 먼저 배치하여 에디터 오류 방지 */
    -webkit-appearance: none; /* 크롬, 사파리 브라우저용 */
    -moz-appearance: none; /* 파이어폭스 브라우저용 */
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 3px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--neon-cyan);
    cursor: pointer;
    box-shadow: 0 0 10px var(--neon-cyan);
}

/* 시뮬레이터 캔버스 프레임 */
.sim-visual {
    background: #020617;
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 10px;
}

.sim-visual canvas {
    max-width: 100%;
    height: auto;
}

/* 토글 버튼 디자인 */
.btn-toggle {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-toggle.off { background: #475569; color: white; }
.btn-toggle.on { background: #10B981; color: white; box-shadow: 0 0 15px #10B981; }

/* 🖥️ AI 데이터센터 애니메이션 파이프라인 */
.pipeline-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 40px 10px;
}

.node {
    background: #1E293B;
    border: 2px solid var(--text-muted);
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
}

.node.gpu { border-color: var(--neon-yellow); color: var(--neon-yellow); }
.node.transceiver { border-color: var(--neon-cyan); color: var(--neon-cyan); }

.pipe {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 5px;
    position: relative;
    text-align: center;
    flex-grow: 1;
}

/* 📊 미래 기술 비교 카드 */
.tech-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .tech-comparison-grid { grid-template-columns: 1fr; }
}

.tech-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    position: relative;
}

.tech-card.future-tech {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 15px 30px rgba(56, 189, 248, 0.1);
}

.card-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    background: #475569;
    font-weight: bold;
    margin-bottom: 15px;
}

.future-tech .card-badge.safe-glow {
    background: rgba(56, 189, 248, 0.2);
    color: var(--neon-cyan);
}

.tech-list {
    padding-left: 20px;
    color: var(--text-muted);
}

.tech-list li {
    margin-bottom: 12px;
    line-height: 1.6;
}

.tech-list strong {
    color: var(--text-main);
}

/* 📝 대단원 요약 타일 */
.wrapup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.wrapup-box {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 25px;
    transition: transform 0.3s;
}

.wrapup-box:hover { transform: translateY(-5px); }

.wrapup-box span {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--neon-cyan);
    display: block;
    margin-bottom: 10px;
}

.wrapup-box p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* 🏁 푸터 및 학술 레퍼런스 스타일 */
.final-project-footer {
    background: #070B19;
    border-top: 1px solid rgba(56, 189, 248, 0.2);
    padding: 40px 0;
    margin-top: 100px;
}

.ref-links {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 15px 0;
    line-height: 1.8;
}

.ref-links span {
    color: rgba(255,255,255,0.6);
    display: inline-block;
    padding: 2px 5px;
}

/* ==========================================
   🏛️ 2차 고도화: 상단바 가시성 및 챕터 간격 독립성 확보
   ========================================== */

/* 1. 상단 내비게이션 바 디자인 대폭 개선 (배경과 분리 및 버튼화) */
.nav-bar {
    background-color: #070B19 !important; /* 배경보다 한 톤 더 어두운 네이비 블랙 */
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    color: #38BDF8 !important;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.2rem;
}

.nav-links {
    display: flex;
    gap: 15px;
}

/* 💡 상단 메뉴 텍스트를 고대비 네온 버튼 스타일로 전환 */
.nav-btn {
    color: #94A3B8 !important; /* 기본은 은은한 회색으로 가독성 확보 */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.25s ease;
}

.nav-btn:hover {
    color: #38BDF8 !important; /* 마우스 올리면 선명한 네온 블루 */
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

/* 2. 💡 요청하신 핵심: 챕터별 상자 꼬임 없이 '섹션 바깥 여백'으로만 화면 분할 */
.scroll-section {
    min-height: 90vh !important; /* 한 섹션이 모니터 화면의 대부분을 확보하도록 강제 */
    margin-bottom: 250px !important; /* 섹션과 섹션 사이 바깥 여백을 거대하게 벌림 */
    scroll-margin-top: 90px; /* 상단 메뉴 이동 시 타이틀 안 가려지게 배려 */
}

/* 마지막 섹션 마진 미세 조절 */
#conclusion {
    margin-bottom: 100px !important;
}

/* 3. 분리형 챕터 타이틀 디자인 공통화 */
.chapter-title {
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    text-align: left !important;
}

.chapter-title .title-label {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 900;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.1);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    border-left: 3px solid #38BDF8;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.chapter-title .title-text {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
    margin: 0 !important;
}

.chapter-title .title-text span {
    color: #38BDF8 !important;
}

.chapter-title .title-deco-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #38BDF8 0%, rgba(56, 189, 248, 0.1) 100%);
    margin-top: 15px;
}

/* 4. 하단 과학관 실시간 안내 가이드 박스 디자인 */
.sim-guide-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 25px;
}

.sim-guide-box h3 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
    color: #FBBF24;
}

.sim-guide-box p {
    margin: 0;
    font-size: 0.95rem;
    color: #94A3B8;
    line-height: 1.6;
}

/* ==========================================
   🏛️ 3차 고도화: 인트로 쇼케이스 및 코어/클래딩 네온 텍스트 매칭
   ========================================== */

/* 1. CHAPTER 01 인트로 배지 스타일 */
.chapter-badge {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 900;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.1);
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    letter-spacing: 0.15em;
    display: inline-block;
    margin-bottom: 20px;
}

/* 2. 💡 인트로 본문 글귀 하이테크 전시 프레임 디자인 */
.hero-showcase-box {
    background: linear-gradient(180deg, rgba(28, 37, 65, 0.6) 0%, rgba(11, 19, 43, 0.8) 100%);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 20px;
    padding: 35px;
    max-width: 800px;
    margin: 40px auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(56, 189, 248, 0.05);
    backdrop-filter: blur(10px);
}

.hero-desc {
    font-size: 1.2rem !important;
    line-height: 1.9 !important;
    color: #CBD5E1 !important;
    margin: 0;
    text-align: center;
    word-break: keep-all;
}

.text-glow-cyan {
    color: #38BDF8;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.action-arrow-box {
    margin-top: 40px;
    font-size: 1.05rem;
    color: #94A3B8;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.arrow-icon {
    display: inline-block;
    animation: bounce 1.6s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* 3. 💡 코어/클래딩 텍스트 고대비 네온 색상 지정 */
/* 코어: 네온 맑은 민트 그린 계열 */
.text-core-color label, .text-core-color span {
    color: #10B981 !important;
    font-weight: 600;
}
.text-core-color input[type="range"]::-webkit-slider-thumb {
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981 !important;
}

/* 클래딩: 네온 퍼플/인디고 블루 계열 */
.text-cladding-color label, .text-cladding-color span {
    color: #818CF8 !important; 
    font-weight: 600;
}
.text-cladding-color input[type="range"]::-webkit-slider-thumb {
    background: #818CF8 !important;
    box-shadow: 0 0 10px #818CF8 !important;
}

/* ==========================================
   🏛️ 4차 고도화: 신규 캔버스 및 레이아웃 패치
   ========================================== */
#conclusion {
    margin-bottom: 180px !important;
}

/* 히어로 인트로 폰트 및 구조 안정성 확보 */
.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 75vh;
}

/* ==========================================
   📱 5차 고도화: 모바일/태블릿 반응형 레이아웃 패치
   ========================================== */
@media (max-width: 768px) {
    /* 1. 상단 내비게이션 바 모바일 대응 */
    .nav-container {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    .nav-links {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-btn {
        font-size: 0.8rem;
        padding: 4px 10px;
    }

    /* 2. 챕터 섹션 여백 조정 및 타이틀 축소 */
    .scroll-section {
        margin-bottom: 120px !important; /* 모바일에서는 여백을 조금 줄여 가독성 확보 */
        padding: 0 15px;
    }
    .chapter-title .title-text {
        font-size: 1.6rem !important;
    }

    /* 3. 2단 시뮬레이터 레이아웃을 1단 구조로 전환 */
    .sim-wrapper {
        flex-direction: column !important;
        gap: 20px;
    }

    /* 4. 터치 스크린에서 캔버스가 깨지지 않도록 자동 조절 */
    .sim-visual canvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }

    /* 5. 실리콘 포토닉스 카드 그리드를 1단으로 변경 */
    .tech-comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* 6. 인트로 쇼케이스 박스 텍스트 크기 완화 */
    .hero-title {
        font-size: 2rem !important;
    }
    .hero-showcase-box {
        padding: 20px;
    }
    .hero-desc {
        font-size: 1rem !important;
    }

    /* 7. 푸터 영역 반응형 완벽 대응 (소속/이름 잘림 방지) */
    .final-project-footer {
        padding: 30px 15px !important;
    }
    
    .footer-container {
        flex-direction: column !important; /* 가로 배열을 세로 배열로 변경 */
        gap: 25px !important;
        text-align: center !important;
    }

    .project-info h3 {
        font-size: 1rem !important;
        line-height: 1.4;
    }

    .researcher-info {
        align-items: center !important; /* 모바일에서 이름 영역 중앙 정렬 */
        border-left: none !important;
        border-top: 1px dashed rgba(148, 163, 184, 0.2) !important; /* 가로선으로 변경 */
        padding-left: 0 !important;
        padding-top: 15px !important;
        width: 100%;
    }
    
    .researcher-info .name {
        font-size: 1rem !important;
        word-break: keep-all; /* 이름이나 소속이 애매하게 안 잘리도록 처리 */
    }
}