@font-face {
    font-family: 'CustomFont'; /* 내가 부를 이름 (아무거나 지어도 됨) */
    src: url('fonts/KimjungchulScript-Regular.ttf') format('truetype'); /* 파일 경로 */
    /* 만약 woff 파일이라면: url('fonts/MyFont.woff') format('woff') */
    font-weight: normal;
    font-style: normal;
}

/* 모든 버튼과 입력창이 사이트 폰트를 따라가도록 강제 설정 */
button, input, textarea, select {
    font-family: inherit; /* "부모(body)의 폰트를 그대로 물려받아라" */
}

/* 기본 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    /* 방금 지은 이름('MyCustomFont')을 제일 앞에 적습니다. */
    /* 뒤에 있는 sans-serif는 만약 폰트 로딩에 실패했을 때 쓸 예비 폰트입니다. */
    font-family: 'CustomFont', 'Noto Sans KR', sans-serif;
    color: #fff;
    /* 높이 제한을 풀어서 스크롤이 생기게 함 */
    min-height: 100vh; 
    overflow-y: auto; /* 세로 스크롤 허용 */
    overflow-x: hidden; /* 가로 스크롤은 방지 */
}

/* 배경 이미지 */
.background-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(0.4);
    z-index: -1;
}

/* 메인 화면 */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 고정 높이(100%) 대신 최소 높이를 100vh로 설정 */
    min-height: 100vh;
    /* 위아래가 꽉 찼을 때 답답하지 않도록 여백 추가 */
    padding: 60px 0; 
    gap: 40px;
}

/* 중간 이미지 (메인 비주얼) 스타일 */
.center-image {
    width: 300px;       /* 너비 설정 (원하는 만큼 숫자를 조절하세요) */
    height: auto;       /* 비율에 맞춰 높이 자동 조절 */
    margin: 20px 0;     /* 위아래 여백을 줘서 답답하지 않게 */
    
    /* (선택사항) 그림자 효과 */
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.5));
    
    /* (선택사항) 둥근 모서리 */
    border-radius: 10px;
    
    /* 등장할 때 부드럽게 나타나는 애니메이션 */
    animation: fadeIn 1.5s ease-out;
}

.main-logo {
    font-size: 3rem;
    letter-spacing: 5px;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    text-transform: uppercase;
}

.category-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 메뉴 버튼 이미지 스타일 */
.menu-btn {
    width: 300px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}

.menu-btn:hover {
    transform: scale(1.1); /* 커지는 효과 */
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.8)) brightness(1.2);
}

/* --- 상세 페이지 (기존 모달 개조) --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 배경을 어둡게 까는 게 아니라, 아예 꽉 찬 화면으로 만듦 */
    z-index: 999;
    background: transparent; 
}
.modal-overlay.active { display: block; }

.modal-window {
    width: 100%; 
    height: 100%; 
    max-width: none; /* 너비 제한 해제 */
    border-radius: 0; /* 모서리 둥글게 제거 */
    background: rgba(30, 30, 30, 0.95); /* 배경색 (살짝 투명해서 뒤 배경 느낌은 살림) */
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border: none;
}

/* 상단바 (닫기 버튼 등) */
.modal-header {
    background: #111;
    padding: 15px 30px; /* 여백 조금 더 줌 */
    border-bottom: 1px solid #444;
}

/* 닫기 버튼을 'HOME' 버튼처럼 보이게 꾸미기 */
.close-btn {
    /* 위치는 그대로 우측 상단 */
    font-size: 1.5rem; 
    background: #333;
    padding: 5px 15px;
    border-radius: 5px;
    color: #fff;
    transition: 0.3s;
}
.close-btn:hover {
    background: #ffcc00;
    color: #000;
}
/* X 대신 HOME 글자로 바꾸고 싶다면 HTML에서 수정 가능 */

/* 내용 영역 */
.modal-body {
    flex: 1;
    padding: 40px; /* 내부 여백 시원하게 */
    max-width: 1200px; /* 글자가 너무 퍼지지 않게 중앙 정렬 */
    margin: 0 auto;
    width: 100%;
}

.tab-bar { display: flex; gap: 10px; overflow-x: auto; }
.tab-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 1.1rem;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}
.tab-btn:hover { color: #fff; }
.tab-btn.active {
    color: #ffcc00;
    border-bottom: 2px solid #ffcc00;
}

/* 내용 영역 */
.modal-body {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background: #222;
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 리스트 스타일 (글, 영상, 그림 공통) */
.list-item {
    display: flex;
    align-items: center;
    background: #333;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid transparent;
}
.list-item:hover {
    background: #444;
    transform: translateX(5px);
    border-color: #ffcc00;
}

.list-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 25px;
    border: 2px solid #555;
}

.list-info { flex: 1; text-align: left; }
.list-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
}
.list-author {
    font-size: 0.95rem;
    color: #aaa;
    display: flex;
    align-items: center;
}
.list-author::before {
    content: '';
    display: inline-block;
    width: 3px; height: 12px;
    background: #ffcc00;
    margin-right: 8px;
}

/* 상세 화면 & 뒤로가기 */
.hidden { display: none; }
.back-btn {
    background: #444; border: none; color: white;
    padding: 8px 15px; border-radius: 4px;
    cursor: pointer; margin-bottom: 20px;
}
.back-btn:hover { background: #555; }

.content-area { line-height: 1.8; white-space: pre-wrap; margin-top: 20px; font-size: 1.1rem; }
.video-container iframe { width: 100%; height: 450px; border: none; }
.art-container { text-align: center; }
.art-container img { width: 100%; max-width: 800px; margin-bottom: 0; display: block; margin: 0 auto; }

/* 참가자 & 후기 블록 */
.role-block, .review-block {
    background: #2a2a2a;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 5px solid #ffcc00;
    border-radius: 4px;
}
.role-block h3 { margin-bottom: 10px; color: #ffcc00; }
.reviewer-name { font-weight: bold; color: #ffcc00; display: block; margin-bottom: 10px; }
.review-text { 
    line-height: 1.6; 
    color: #ddd;
    
    /* ★ 핵심: 텍스트 파일의 줄바꿈과 띄어쓰기를 그대로 보여줘라! */
    white-space: pre-wrap; 
    
    /* (선택) 폰트가 너무 작으면 조금 키우세요 */
    font-size: 1rem; 
}


/* =========================================
   스크롤바 디자인 커스텀 (Chrome, Edge, Safari)
   ========================================= */

/* 1. 스크롤바 전체 너비 */
::-webkit-scrollbar {
    width: 12px;
}

/* 2. 스크롤바 뒷배경 (트랙) */
::-webkit-scrollbar-track {
    background: #1a1a1a; /* 사이트 분위기에 맞춰 어둡게 */
}

/* 3. 스크롤바 막대 (썸) - 여기가 하늘색! */
::-webkit-scrollbar-thumb {
    background-color: #87CEEB; /* 하늘색 (SkyBlue) */
    border-radius: 10px;       /* 둥글둥글하게 */
    border: 3px solid #1a1a1a; /* 테두리를 줘서 좀 더 얇고 세련돼 보이게 함 */
}

/* 4. 마우스 올렸을 때 색상 변화 */
::-webkit-scrollbar-thumb:hover {
    background-color: #00BFFF; /* 조금 더 진한 하늘색 (DeepSkyBlue) */
}

/* --- 참가자 목록 스타일 --- */
.participant-list {
    display: flex;
    flex-direction: column; /* 세로 배열 */
    gap: 12px; /* 이름 사이 간격 */
    padding-left: 10px;
}

.participant-item {
    font-size: 1.1rem;
    color: #fff;
    display: flex;
    align-items: center; /* 텍스트 수직 중앙 정렬 */
    gap: 8px; /* 이름과 아이디 사이 간격 */
}

/* 이름 스타일 (굵게) */
.p-name {
    font-weight: bold;
    color: #fff;
}

/* X 태그 스타일 (조금 작고 흐리게) */
.x-handle {
    font-size: 0.9rem;
    color: #888; /* 회색으로 처리 */
    font-weight: normal;
}

/* (선택) 마우스 올리면 태그가 밝아짐 */
.participant-item:hover .x-handle {
    color: #87CEEB; /* 하늘색 포인트 */
}


/* =========================================
   [라이트 모드] 스타일 (기본은 다크모드)
   ========================================= */

/* 1. 테마 전환 버튼 디자인 */
#theme-btn {
    position: fixed;
    top: 20px; right: 20px; /* 우측 상단 고정 */
    z-index: 1000;
    padding: 10px 15px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}
#theme-btn:hover { background: #fff; color: #000; }

/* 2. 라이트모드 활성화 시 기본 색상 변경 */
body.light-mode {
    color: #333; /* 글자색: 검정 */
}

/* 3. 배경 이미지: 라이트모드에선 밝고 선명하게! */
body.light-mode .background-layer {
    /* 기존 0.4(어두움) -> 0.9(밝음) 으로 변경 */
    filter: brightness(0.9); 
}

/* 4. 팝업창(상세페이지) 배경: 하얗게 + 살짝 투명 */
body.light-mode .modal-window {
    /* 흰색 배경(255,255,255) + 투명도 0.9 (배경이 살짝 비침) */
    background: rgba(255, 255, 255, 0.92); 
    color: #111;
}

/* 5. 상단 탭 바 & 헤더 */
body.light-mode .modal-header {
    background: rgba(255, 255, 255, 0.95); /* 흰색에 가깝게 */
    border-bottom: 1px solid #ddd;
}
body.light-mode .tab-btn { color: #666; }
body.light-mode .tab-btn:hover { color: #000; }
body.light-mode .tab-btn.active {
    color: #ff8c00; /* 활성 탭: 주황색 포인트 */
    border-bottom: 2px solid #ff8c00;
}

/* 6. 내용 박스들 (리스트, 후기, 참가자) */
body.light-mode .modal-body {
    background: transparent; /* 모달 배경을 따라감 */
}

/* 리스트 아이템 (글/영상/그림 목록) */
body.light-mode .list-item {
    background: #fff; /* 흰색 카드 */
    border: 1px solid #ddd; /* 회색 테두리 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 살짝 그림자 */
}
body.light-mode .list-item:hover {
    background: #f9f9f9;
    border-color: #ff8c00;
}
body.light-mode .list-title { color: #000; }
body.light-mode .list-author { color: #666; }

/* 7. 상세 내용 화면 */
body.light-mode .back-btn {
    background: #eee; color: #333;
    border: 1px solid #ccc;
}
body.light-mode .back-btn:hover { background: #ddd; }
body.light-mode .role-block, 
body.light-mode .review-block {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
body.light-mode .reviewer-name,
body.light-mode .role-block h3,
body.light-mode .p-name {
    color: #d35400; /* 진한 주황색으로 가독성 확보 */
}
body.light-mode .review-text { color: #444; }
body.light-mode .participant-item { color: #333; }

/* =========================================
   [라이트 모드] 스크롤바 디자인 수정 (최종_진짜최종.css)
   ========================================= */

/* 1. 스크롤바 뒷배경 (트랙) - 밝게 */
/* body 자체와 body 안에 있는 모든(*) 요소의 스크롤바를 다 바꿈 */
body.light-mode::-webkit-scrollbar-track,
body.light-mode *::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* 밝은 회색 */
}

/* 2. 스크롤바 막대 (썸) - 테두리 색 맞춤 */
body.light-mode::-webkit-scrollbar-thumb,
body.light-mode *::-webkit-scrollbar-thumb {
    background-color: #87CEEB; /* 하늘색 유지 */
    border: 3px solid #f5f5f5; /* 테두리를 배경색과 똑같이 (공중에 뜬 효과) */
}

/* 3. 마우스 올렸을 때 */
body.light-mode::-webkit-scrollbar-thumb:hover,
body.light-mode *::-webkit-scrollbar-thumb:hover {
    background-color: #00BFFF; 
}


/* =========================================
   [인트로 화면] 스타일
   ========================================= */
#intro-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000; /* 완전히 검은 배경 */
    z-index: 9999; /* 제일 위에 덮어씌움 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: opacity 0.5s; /* 부드럽게 사라지는 효과 */
}

.intro-content {
    text-align: center;
}

.intro-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: 5px;
    color: #ffcc00;
}

.intro-content p {
    margin-bottom: 40px;
    color: #aaa;
}

#enter-btn {
    padding: 15px 50px;
    font-size: 1.5rem;
    background: transparent;
    border: 2px solid #ffcc00;
    color: #ffcc00;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
}

#enter-btn:hover {
    background: #ffcc00;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
}

/* 유튜브 BGM 플레이어 숨기기 */
#youtube-bgm-container {
    position: fixed;
    top: -9999px; /* 화면 저 멀리 날려버림 */
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none; /* 클릭 방지 */
    z-index: -1;
}

/* =========================================
   [감자 커서 적용]
   ========================================= */

/* 1. 평소 상태 (둥근 감자) */
html, body {
    /* url: 이미지 경로
       16 16: 감자의 정중앙(32px 기준)이 클릭 포인트가 됨
       auto: 그림 못 읽으면 기본 화살표 나옴
    */
    cursor: url('images/potato_cursor.png') 16 16, auto;
}

/* 2. 버튼 위에 올렸을 때 (맛있는 감자? 혹은 색 바뀐 감자?) */
/* 만약 클릭용 이미지를 따로 안 만들 거면 그냥 pointer(손가락)로 둬도 됩니다. */
a, button, .tab-btn, .list-item, .participant-item, .close-btn, #enter-btn {
    cursor: url('images/potato_cursor.png') 16 16, pointer;
}

/* =========================================
   [커서 잔상 효과 - 빛나는 가루]
   ========================================= */

/* 가루 알갱이 하나의 기본 스타일 */
.cursor-particle {
    position: absolute; /* 자유로운 위치 배치 */
    width: 8px;         /* 알갱이 너비 */
    height: 8px;        /* 알갱이 높이 */
    background: #ffd700; /* 황금색 (Gold) */
    border-radius: 50%; /* 동그랗게 */
    pointer-events: none; /* 마우스 클릭 방해 안 하게 설정 (필수!) */
    z-index: 9999;        /* 다른 요소들보다 위에 보이게 */
    
    /* 빛나는 효과 (그림자 이용) */
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ff8c00;
    
    /* 애니메이션 적용 (이름, 시간, 속도, 반복여부) */
    animation: fadeOut 1s linear forwards;
}

/* 가루가 사라지는 애니메이션 정의 */
@keyframes fadeOut {
    0% {
        opacity: 1;         /* 처음엔 선명하게 */
        transform: scale(1); /* 원래 크기 */
    }
    100% {
        opacity: 0;           /* 투명해짐 */
        transform: scale(0.2) translate(0, 20px); /* 작아지면서 약간 아래로 떨어짐 */
    }
}