/* --- 커스텀 폰트 불러오기 --- */
@font-face {
    font-family: 'Paperology'; 
    src: url('./assets/fonts/Paperlogy-3Light.ttf') format('truetype');
    font-weight: 300; 
    font-style: normal;
}

/* 2. 강조 및 제목용 (Bold - 700) */
@font-face {
    font-family: 'Paperology'; 
    src: url('./assets/fonts/Paperlogy-7Bold.ttf') format('truetype');
    font-weight: 700; 
    font-style: normal;
}

/* 3. 로고 타이포그래피용 (Black - 900) */
@font-face {
    font-family: 'Paperology'; 
    src: url('./assets/fonts/Paperlogy-9Black.ttf') format('truetype');
    font-weight: 900; 
    font-style: normal;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #050505;
    overflow: hidden;
    font-family: 'Paperology', 'Helvetica Neue', Arial, sans-serif;
}

#space-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none; /* 클릭 방해 금지 */
    overflow: hidden;
}

#intro-text {
    color: #ffffff;
    font-weight: 300;
    letter-spacing: 0.3em;
    position: absolute; 
    top: 50%;
    left: 50%;
    margin: 0;
    text-align: center;
    width: 100%; 
    font-size: clamp(12px, 6vw, 24px);
    
    /* 중앙 정렬과 글리치 애니메이션을 충돌 없이 동시 적용하기 위한 CSS 변수 세팅 */
    --trans-x: -50%;
    --trans-y: -50%;
    transform: translate(var(--trans-x), var(--trans-y));
}

@keyframes pulse {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

.fade-out {
    opacity: 0 !important;
    transition: opacity 1s ease;
}

#hover-title {
    position: absolute; 
    font-size: clamp(18px, 4vw, 20px); 
    color: #ffffff;
    font-weight: 300;
    letter-spacing: 0.1em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%); 
    white-space: nowrap;
    z-index: 20;
}

#hover-title.show {
    opacity: 1;
}

/* Phase 4 암전 트랜지션용 오버레이 */
#fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #050505; /* 우주 배경색과 동일한 깊은 검은색 */
    z-index: 100; /* 가장 앞쪽으로 배치 */
    opacity: 0; /* 평소에는 투명하게 */
    pointer-events: none;
}

/* --- 뒤로가기 버튼 스타일 --- */
#back-btn {
    position: fixed;
    top: 100px;
    left: 40px;
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 300;
    letter-spacing: 0.2em;
    cursor: pointer;
    opacity: 0;
    pointer-events: none; /* 평소에는 클릭 방지 */
    z-index: 50;
    transition: opacity 0.5s ease;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#back-btn.show {
    opacity: 1;
    pointer-events: auto; /* show 클래스가 붙었을 때만 클릭 활성화 */
}

#back-btn:hover {
    text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

#pixi-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* Three.js 뒤에 깔리게 설정 */
    pointer-events: none; /* 클릭은 Three.js가 처리하도록 통과시킴 */
}

/* --- 전역 타이틀 (좌상단) --- */
#global-title {
    position: fixed;
    top: 50px;
    left: 40px;
    font-size: 2.5rem;
    color: #ffffff;
    font-weight: 900;
    animation-delay: 2s;
    letter-spacing: 0.2em;
    z-index: 50;
    pointer-events: none;
    margin: 0;
    /* 좌상단 고정이므로 이동값 0 설정 */
    --trans-x: 0px; 
    --trans-y: 0px;
}

/* --- [새로 추가] 카피라이트 (하단 정중앙) --- */
#copyright {
    position: fixed;
    bottom: 20px;
    width: 100vw;
    text-align: center;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 200;
    letter-spacing: 0.15em;
    z-index: 50;
    pointer-events: none;
}

/* --- [새로 추가] 간헐적 글리치 애니메이션 (3초 정적 + 1초 글리치 = 총 4초 주기) --- */
.glitch-text {
    animation: periodic-glitch 4s infinite; 
    position: relative;
}

@keyframes periodic-glitch {
    0%, 92% { 
        transform: translate(var(--trans-x), var(--trans-y));
        text-shadow: none;
        opacity: 0.8;
    }
    /* 바깥쪽(Red), 중간(Bright Yellow), 안쪽(Ultramarine #1100ff) 그림자 다중 겹침 */
    93% { transform: translate(calc(var(--trans-x) - 4px), var(--trans-y)); text-shadow: -4px 0 #ff0000, -2px 0 #ffff00, 4px 0 #1100ff; opacity: 1; }
    94% { transform: translate(calc(var(--trans-x) - 2px), var(--trans-y)); text-shadow: 4px 0 #ff0000, 2px 0 #ffff00, -4px 0 #1100ff; }
    95% { transform: translate(calc(var(--trans-x) + 4px), var(--trans-y)); text-shadow: -4px 0 #ff0000, -2px 0 #ffff00, 4px 0 #1100ff; }
    96% { transform: translate(calc(var(--trans-x) + 2px), var(--trans-y)); text-shadow: 4px 0 #ff0000, 2px 0 #ffff00, -4px 0 #1100ff; }
    97% { transform: translate(var(--trans-x), var(--trans-y)) skewX(15deg); }
    98% { transform: translate(var(--trans-x), var(--trans-y)) skewX(-15deg); opacity: 0.5; }
    99%, 100% { transform: translate(var(--trans-x), var(--trans-y)); text-shadow: none; opacity: 0.8; }
}

/* --- [추가] 모바일 환경(화면 가로폭 768px 이하) 반응형 레이아웃 조정 --- */
@media (max-width: 768px) {
    #global-title {
        top: 25px;
        left: 20px; /* 모바일에서는 좌측 여백을 20px로 줄여줍니다 */
        font-size: 1.5rem; /* 글자 크기도 화면에 맞춰 살짝 줄여 한 줄에 예쁘게 안착시킵니다 */
    }
    
    #back-btn {
        top: 60px; /* 타이틀 폰트가 작아졌으므로, 버튼도 위로 살짝 당겨줍니다 */
        left: 20px; /* 타이틀과 동일한 좌측 정렬 선을 맞춥니다 */
        font-size: 1rem;
    }
    
    #copyright {
        padding: 0 15px; /* 카피라이트 텍스트가 양옆으로 화면에 바짝 붙지 않도록 안전 여백을 줍니다 */
        box-sizing: border-box;
    }
}

/* --- [새로 추가] 디테일 페이지 오버레이 --- */
#detail-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(5, 5, 5, 0.7); /* 배경 우주가 살짝 비치는 반투명 검은색 */
    backdrop-filter: blur(15px); /* 배경을 흐리게 만드는 유리창 효과 */
    -webkit-backdrop-filter: blur(15px);
    z-index: 200; /* 모든 UI 요소보다 제일 위로 */
    
    /* 핵심: 내용이 길어지면 내부에서 스크롤 생성, 배경 우주는 고정! */
    overflow-y: auto; 
    overflow-x: hidden;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#detail-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

#detail-close-btn {
    position: static; 
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 210;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 300;
    transition: color 0.3s ease; 
}

#detail-close-btn:hover {
    color: #1100ff; 
}

#detail-close-btn span {
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

/* 디테일 컨텐츠 레이아웃 */
#detail-content {
    max-width: 900px;
    margin: 120px auto 100px auto; /* 상하 여백 넉넉히 */
    padding: 0 30px;
    color: #eee;
}

.detail-title {
    font-size: clamp(1.75rem, 4vw, 2rem); 
    font-weight: 700;
    margin-bottom: 10px;
    color: #1100ff; 
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-meta {
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    color: #aaaaaa;
    font-weight: 300;
    
    /* --- [선과 여백] --- */
    padding-bottom: 25px; /* 글씨와 선 사이의 간격 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* 은은하고 고급스러운 반투명 흰색/회색 선 */
    margin-bottom: 15px; /* 선과 아래쪽 본문/영상 사이의 간격 */
}

/* 다국어 Writing을 위한 반응형 2단 레이아웃 */
.bilingual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    line-height: 1.8;
    font-weight: 300;
}
.bilingual-grid p { margin-bottom: 20px; }

/* 모바일에서는 1단으로 스택됨 */
@media (max-width: 768px) {
    .bilingual-grid { grid-template-columns: 1fr; gap: 20px; }
    #detail-close-btn { top: 25px; right: 20px; }
}

/* --- [추가] 디테일 페이지 상단 헤더 & 토글 스위치 --- */
#detail-header {
    position: fixed;
    top: 40px; left: 40px; right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 210;
}

#detail-close-btn {
    position: static; /* 기존 absolute에서 header 내부 정렬로 변경 */
}

.lang-toggle {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 34px;
}

.lang-toggle input { 
    opacity: 0; width: 0; height: 0; 
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #1100ff; /* 심우주의 쨍한 블루톤 */
    border-radius: 34px;
    transition: .4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}

/* 토글 안의 텍스트 (EN / KO) */
.lang-text {
    color: white;
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
}

/* 스위치 동그라미 */
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px; width: 26px;
    left: 4px; bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 쫀득한 텐션 애니메이션 */
    z-index: 2;
}

/* 체크(KO) 상태일 때 동그라미 이동 */
input:checked + .toggle-slider:before {
    transform: translateX(36px);
}

/* --- [핵심] 다국어 표시 CSS 로직 --- */
/* 기본적으로 한국어(ko)는 숨기고 영어(en)만 보여줍니다. */
.content-ko { display: none; }
.content-en { display: block; }

/* 디테일 오버레이에 'show-ko' 클래스가 붙으면 반대로 작동합니다! */
#detail-overlay.show-ko .content-ko { display: block; }
#detail-overlay.show-ko .content-en { display: none; }

/* 모바일 대응 */
@media (max-width: 768px) {
    #detail-header { top: 25px; left: 20px; right: 20px; }
}

/* --- 항성 위에 띄울 3D 글리치 텍스처 --- */
.glowing-text-3d {
    color: #ffffff;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-align: center;
    pointer-events: none; 
    white-space: nowrap;
    
    text-shadow: 
        0 0 10px #1100ff,
        0 0 20px #1100ff,
        0 0 30px rgba(17, 0, 255, 0.8),
        0 0 40px rgba(17, 0, 255, 0.6);
        
    /* [수정 1] 기존의 공용 애니메이션 대신, 3D 전용 애니메이션으로 연결합니다! */
    animation: periodic-glitch-3d 4s infinite; 
    
    animation-delay: 2s; 
    
    --trans-x: -50%;
    --trans-y: -50%;
    transform: translate(var(--trans-x), var(--trans-y)); 
    
    position: absolute;
    top: 0; left: 0;
}

/* --- [새로 추가] 3D 텍스트 전용 글리치 애니메이션 (글로우 강제 유지) --- */
@keyframes periodic-glitch-3d {
    0%, 92% { 
        transform: translate(var(--trans-x), var(--trans-y));
        text-shadow: 
            0 0 10px #1100ff,
            0 0 20px #1100ff,
            0 0 30px rgba(17, 0, 255, 0.8),
            0 0 40px rgba(17, 0, 255, 0.6);
        opacity: 1; 
    }
    93% { transform: translate(calc(var(--trans-x) - 4px), var(--trans-y)); text-shadow: -4px 0 #ff0000, -2px 0 #ffff00, 4px 0 #1100ff; opacity: 1; }
    94% { transform: translate(calc(var(--trans-x) - 2px), var(--trans-y)); text-shadow: 4px 0 #ff0000, 2px 0 #ffff00, -4px 0 #1100ff; }
    95% { transform: translate(calc(var(--trans-x) + 4px), var(--trans-y)); text-shadow: -4px 0 #ff0000, -2px 0 #ffff00, 4px 0 #1100ff; }
    96% { transform: translate(calc(var(--trans-x) + 2px), var(--trans-y)); text-shadow: 4px 0 #ff0000, 2px 0 #ffff00, -4px 0 #1100ff; }
    97% { transform: translate(var(--trans-x), var(--trans-y)) skewX(15deg); }
    98% { transform: translate(var(--trans-x), var(--trans-y)) skewX(-15deg); opacity: 0.7; }
    99%, 100% { 
        transform: translate(var(--trans-x), var(--trans-y)); 
        text-shadow: 
            0 0 10px #1100ff,
            0 0 20px #1100ff,
            0 0 30px rgba(17, 0, 255, 0.8),
            0 0 40px rgba(17, 0, 255, 0.6);
        opacity: 1; 
    }
}
/* --- [새로 추가] 마크다운 변환 콘텐츠 스타일링 --- */
.markdown-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1100ff;
    margin-top: 60px;
    margin-bottom: 20px;
}

.markdown-content h3 {
    font-size: 1.4rem;
    font-weight: 500;
    color: #ffffff;
    margin-top: 40px;
    margin-bottom: 15px;
}

.markdown-content p {
    margin-bottom: 24px; /* 문단 사이의 자연스러운 여백 */
    text-align: justify; 
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* [수정] 이미지를 블록 요소로 변경하고, 양옆 margin을 auto로 주어 가운데 정렬합니다. */
    display: block;
    margin: 30px auto; 
}

/* --- [새로 추가] 마크다운 변환 콘텐츠 기본 설정 --- */
.markdown-content {
    /* [수정] 본문: 모바일 1rem ~ PC 1.125rem / 줄간격 1.8 */
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    line-height: 1.8;
    font-weight: 300;
}

.markdown-content h2 {
    /* [수정] 중제목: 모바일 1.25rem ~ PC 1.75rem */
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: #1100ff; 
    margin-top: 60px;
    margin-bottom: 20px;
}

.markdown-content h3 {
    /* [수정] 소제목(참고용): 중제목보다 한 단계 작게 설정 */
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 500;
    color: #ffffff;
    margin-top: 40px;
    margin-bottom: 15px;
}

.markdown-content p {
    margin-bottom: 24px; 
    text-align: justify; 
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: block;
    margin: 30px auto; 
}
/* --- 이미지 캡션 스타일링 --- */
.markdown-content .caption {
    display: block;
    text-align: center; /* 이미지에 맞춰 가운데 정렬 */
    
    /* 본문(1rem)보다 약간 작게, 메타데이터 사이즈와 밸런스를 맞춥니다 */
    font-size: clamp(0.8rem, 1.5vw, 0.9rem); 
    
    /* 밝기를 낮춰 본문과의 위계를 명확히 분리합니다 */
    color: #888888; 
    
    /* 위쪽 이미지가 가진 기본 하단 여백(30px)을 상쇄하여 이미지에 딱 붙게 끌어올립니다 */
    margin-top: -15px; 
    margin-bottom: 30px; /* 다음 문단과의 여백 */
}
/* --- [새로 추가] 스크롤 힌트 텍스트 --- */
#scroll-hint {
    position: absolute;
    bottom: 50px; /* 화면 하단에 배치 */
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-weight: 300;
    font-size: clamp(0.75rem, 1.5vw, 0.85rem); /* 메타데이터 사이즈와 유사하게 */
    letter-spacing: 0.3em;
    pointer-events: none; /* 마우스 방해 금지 */
    z-index: 100;
    opacity: 0;
    transition: opacity 1s ease-out; /* 사라질 때 아주 부드럽게 */
    white-space: nowrap;
}

/* 항성계에 들어왔을 때 깜빡이는 애니메이션 부여 */
#scroll-hint.show {
    animation: pulseHint 2.5s infinite alternate;
}

/* 유저가 스크롤을 굴리면 애니메이션을 멈추고 투명하게 만듦 */
#scroll-hint.hide {
    animation: none;
    opacity: 0 !important;
}

@keyframes pulseHint {
    0% { opacity: 0.2; }
    100% { opacity: 0.8; }
}
/* --- About 페이지 레이아웃 --- */
.about-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    margin-top: 40px;
    align-items: start;
}

.about-profile img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px; /* 사진과 텍스트 사이 간격을 위해 25px -> 15px로 줄임 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    filter: grayscale(20%); 
    transition: filter 0.3s ease;
}

/* 👇 사진 바로 아래 들어갈 직업/위치 정보 텍스트 스타일 */
.about-role {
    font-size: 0.95rem;
    color: #dddddd;
    font-weight: 300;
    margin-bottom: 25px; /* 이 텍스트와 이메일/링크 사이의 간격 */
    letter-spacing: 0.05em;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 사진 아래 구역에 아주 연하고 짧은 선을 하나 그어 깔끔하게 나눔 */
}

.about-profile img:hover { filter: grayscale(0%); }

.about-contact p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #aaaaaa;
    margin-bottom: 15px;
}

.about-contact a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.about-contact a:hover { color: #1100ff; }

.about-text h3 {
    font-size: 1.3rem;
    color: #1100ff;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    /* border-bottom과 padding-bottom 속성을 삭제하여 파란색 밑줄 제거 */
}

.about-text h3:not(:first-child) { margin-top: 40px; }

.about-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #dddddd;
    margin-bottom: 10px;
    font-weight: 300;
    text-align: justify;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .about-container { grid-template-columns: 1fr; gap: 30px; }
    .about-profile img {
        max-width: 300px;
        display: block;
        margin: 0 auto 25px auto;
    }
}
/* --- About 투명 레이어 스타일 --- */
#about-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 45; 
    overflow: hidden; /* [핵심] 전체 레이어의 스크롤을 막고 내부 컨텐츠에서만 스크롤되도록 변경 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

#about-layer.show {
    opacity: 1;
    pointer-events: auto; 
}

/* 언어 토글 위치 고정 */
#about-lang-toggle {
    position: fixed;
    top: 140px; 
    left: 40px;
    z-index: 50;
}

/* --- 스크롤 컨테이너 분리 및 마스크 적용 --- */
#about-content {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 960px; /* 기존 900px + 좌우 패딩 30px씩 */
    height: 100vh;
    overflow-y: auto; /* 내용이 길면 여기서 스크롤 발생 */
    padding: 200px 30px 100px 30px; /* margin 대신 padding으로 스크롤 여유 공간 확보 */
    box-sizing: border-box;
    color: #eee;
    
    /* 우주 배경은 건드리지 않고, 위로 올라가는 텍스트만 150px~250px 구간에서 자연스럽게 투명해지도록 마스크 처리 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 150px, black 250px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, transparent 150px, black 250px, black 100%);
    
    /* 텍스트가 사라지는 효과를 극대화하기 위해 스크롤바는 숨김 처리 (선택사항) */
    scrollbar-width: none; 
}

#about-content::-webkit-scrollbar {
    display: none; 
}

/* 다국어 표시 로직 */
#about-layer .content-ko { display: none; }
#about-layer .content-en { display: block; }
#about-layer.show-ko .content-ko { display: block; }
#about-layer.show-ko .content-en { display: none; }

/* 텍스트 가독성 확보를 위한 텍스트 그림자 */
#about-layer .detail-title, 
#about-layer .detail-meta,
#about-layer .about-text p,
#about-layer .about-text h3 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .about-text p {
        font-size: 0.95rem; /* ✅ 기존 1.05rem에서 모바일용으로 살짝 축소 */
    }
    .about-text p strong {
    font-size: 1.05rem; /* 본문 크기와 동일하게 고정 */
    line-height: 1.8;
    color: #dddddd;
    font-weight: 300;
    }
/* strong 태그만 별도로 굵기 조정 (선택 사항) */
    .about-text p strong {
    font-weight: 700;
    }
    #about-lang-toggle {
        top: 90px; 
        left: 20px;
    }
    #about-content {
        padding-top: 150px;
        /* 모바일은 UI가 더 좁게 배치되므로 마스크가 사라지는 구간도 위로 당겨줍니다 */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 180px, black 100%);
        mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 180px, black 100%);
    }
}
/* =========================================================================
   [ 로딩 스크린 (System Booting) ]
   ========================================================================= */
#loading-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #050505;
    z-index: 9999; /* 모든 화면을 덮도록 설정 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Paperology', 'Helvetica Neue', Arial, sans-serif; 
    transition: opacity 1.5s ease-in-out;
}

#loading-screen.fade-out-loading {
    opacity: 0;
    pointer-events: none;
}

#loading-text {
    font-size: 1.1rem;
    color: #1100ff; 
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(17, 0, 255, 0.8);
    font-weight: 700; /* Paperology Bold 속성 적용 */
}

#loading-bar-container {
    width: 250px;
    height: 1px; 
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

#loading-bar {
    width: 0%;
    height: 100%;
    background-color: #ffffff; 
    box-shadow: 0 0 10px #ffffff;
    transition: width 0.2s ease;
}

#loading-glitch {
    margin-top: 25px;
    font-size: 0.8rem;
    color: #eeff00;
    letter-spacing: 0.3em;
    font-weight: 300;
    /* 부드러운 페이드 인아웃 애니메이션 적용 */
    animation: slow-fade-in-out 1.5s infinite alternate ease-in-out; 
}

@keyframes slow-fade-in-out {
    0% { opacity: 0.2; }
    100% { opacity: 0.9; }
}

@media (max-width: 768px) {
    #intro-text {
        top: 47%; /* 화면의 상단에서 40% 위치로 끌어올림 (기존 50%) */
    font-size: 16px;
    }
    #about-content {
        /* 하단 여백을 150px 이상으로 늘려 스크롤 끝에서도 답답하지 않게 조절합니다 */
        padding-bottom: 200px !important; 
    }
    .about-text p:not(:first-of-type) {
        text-align: left !important;
    }
}
#detail-content p {
    text-align: justify;
    word-break: keep-all; 
    
}