/* [변수 설정] */
:root {
    --bg-color: #FDFBF7;       /* 배경: 크림색 */
    --primary-text: #4A3B32;   /* 메인 텍스트: 짙은 갈색 */
    --secondary-text: #8D8276; /* 서브 텍스트: 연한 갈색 */
    --point-green: #8F9F85;    /* 포인트: 녹색 */
    --point-green2: #8f9f8566; /* 포인트: 더 연한 녹색 */
    
    /* About Me 섹션용 */
    --white: #FFFFFF;          
    --line-color: #EBE5CE;     
    --accent-color: #A69076;  
}

/* 기본 리셋 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Gowun Dodum', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.6;
    scroll-behavior: smooth;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }


/* =======================================================
    기술 스택 뱃지 디자인 
    ======================================================= */
.badge {
    display: inline-block;
    padding: 6px 10px;        
    border-radius: 6px;     
    font-size: 0.8rem;
    font-weight: 700;         
    margin-right: 6px;
    margin-bottom: 6px;
    
    border: none;          
    color: #ffffff;         
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    line-height: 1.2;
}

/* 기술 스택 배지 */
.tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- [언어 & 프레임워크별 브랜드 컬러] --- */

/* 1. JavaScript */
.badge-js { background-color: #F7DF1E; color: #000 !important; }

/* 2. FrontEnd (파랑/하늘 계열) */
.badge-ts { background-color: #3178C6; }       /* TypeScript Blue */
.badge-react { background-color: #61DAFB; color: #000 !important; } /* React Cyan */
.badge-next { background-color: #000000; }     /* Next.js Black */
.badge-vue { background-color: #4FC08D; }      /* Vue Green */
.badge-html { background-color: #E34F26; }     /* HTML Orange */
.badge-css { background-color: #1572B6; }      /* CSS Blue */
.badge-tailwind { background-color: #06B6D4; } /* Tailwind Cyan */

/* 3. BackEnd & Languages (빨강/초록/남색) */
.badge-java { background-color: #E76F00; }     /* Java Orange/Red */
.badge-spring { background-color: #6DB33F; }   /* Spring Green */
.badge-node { background-color: #339933; }     /* Node Green */
.badge-python { background-color: #3776AB; }   /* Python Blue */
.badge-django { background-color: #092E20; }   /* Django Dark Green */
.badge-c { background-color: #A8B9CC; color: #000 !important; } /* C Gray */
.badge-cpp { background-color: #00599C; }      /* C++ Blue */
.badge-csharp { background-color: #239120; }   /* C# Green */

/* 4. Mobile */
.badge-flutter { background-color: #02569B; }  /* Flutter Blue */
.badge-swift { background-color: #F05138; }    /* Swift Orange */
.badge-kotlin { background-color: #7F52FF; }   /* Kotlin Purple */

/* 5. Database & Cloud */
.badge-db { background-color: #4479A1; }       /* SQL/MySQL Blue */
.badge-mongo { background-color: #47A248; }    /* MongoDB Green */
.badge-firebase { background-color: #FFCA28; color: #000 !important; } /* Firebase Yellow */
.badge-aws { background-color: #FF9900; }      /* AWS Orange */

/* 6. Tools & Etc */
.badge-git { background-color: #F05032; }      /* Git Red */
.badge-github { background-color: #181717; }   /* GitHub Black */
.badge-figma { background-color: #F24E1E; }    /* Figma Red/Orange */
.badge-docker { background-color: #2496ED; }   /* Docker Blue */
.badge-gray { background-color: #6c757d; }     /* 기본 회색 */


/* =======================================================
    1. 첫 화면 순차 등장 애니메이션 (Hero Section용)
   ======================================================= */
.init-ani {
    opacity: 0; 
    animation-name: slideDownFadeIn;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards; 
}

/* 위에서 아래로 */
@keyframes slideDownFadeIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 아래에서 위로 */
@keyframes slideUpFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 왼쪽에서 오른쪽으로 */
@keyframes slideRightFadeIn {
    from { opacity: 0; transform: translateX(-30px); } 
    to { opacity: 1; transform: translateX(0); }
}

/* 등장 순서 딜레이 */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; } 
.delay-6 { animation-delay: 1.4s; } 
.delay-7 { animation-name: slideUpFadeIn; animation-delay: 1.7s; }
.delay-8 { animation-name: slideRightFadeIn; animation-delay: 2.3s; }
.delay-9 { animation-delay: 2.6s; }

/* =======================================================
    2. 스크롤 시 나타나는 애니메이션 
   ======================================================= */

/* 기본 설정: 아래에 숨어있다가 올라옴 */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px); 
    transition: all 1s ease;
}

/* 활성화 되었을 때 (제자리 복귀) */
.scroll-reveal.active-ani {
    opacity: 1;
    transform: translateY(0); 
}

/* ===========================
    리스트 정렬 애니메이션
   =========================== */

/* 위에서 아래로 투명도와 함께 내려오는 키프레임 */
@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0); 
    }
}

/* 자바스크립트에서 붙일 클래스 */
.timeline-item.animate-in {
    opacity: 0; 
    animation: slideDownFade 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ===========================
    1. 헤더 디자인
   =========================== */
header {
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0; left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 50px;
    transition: transform 0.3s ease-in-out;
}

/* JS에서 스크롤을 내릴 때 헤더를 위로 숨김 */
header.hide {
    transform: translateY(-100%);
}

/* 로고 */
.logo a {
    font-family: 'Gowun Batang', serif;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: -0.5px;
}
.logo a:hover { color: var(--point-green); }

/* 네비게이션 */
nav ul.nav-list { display: flex; gap: 40px; }

nav ul.nav-list > li > a {
    font-size: 1.1rem;
    color: var(--secondary-text);
    position: relative;
    display: block;
    font-weight: 500;
}

/* 메뉴 숫자 부분 */
.nav-num {
    color: var(--primary-text); 
    margin-right: 4px;   
    font-weight: bold;
}

nav ul.nav-list > li > a:hover { color: var(--primary-text); }

/* 밑줄 애니메이션 */
nav ul.nav-list > li > a::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: -5px; left: 50%;
    background-color: var(--point-green2);
    transition: 0.3s;
    transform: translateX(-50%);
}
nav ul.nav-list > li:hover > a::after { width: 100%; }


/* ===========================
    2. 히어로 섹션 
   =========================== */
.hero-section {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color); 
    text-align: center;
}

/* 배경 이미지 */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('c:/Users/hahyun/Pictures/Screenshots/background.jpg'); 
    background-size: cover;   
    background-position: center; 
    opacity: 0.4;  
    z-index: 0; 
}

.hero-content {
    z-index: 1; 
    padding: 0 20px;
    width: 100%;
    max-width: 1400px;
}

/* 텍스트가 줄바꿈 되어도 애니메이션이 잘 먹히도록 display 설정 */
.block-text {
    display: block; 
}

.hero-section h1 {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.3;
    margin-bottom: 30px;
    color: var(--primary-text);
    word-break: keep-all;
    letter-spacing: -1px;
}

.hero-section h1 em {
    font-style: normal;
    color: var(--point-green);
    display: inline-block;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--point-green2);
}

.hero-section p {
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    color: var(--secondary-text);
    font-weight: 400;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}


/* ===========================
    3. 스크롤 다운 버튼 (화살표)
   =========================== */
.scroll-down-btn {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    cursor: pointer;
    transition: opacity 0.3s;
}
.scroll-down-btn:hover { opacity: 1; }

.scroll-down-btn span {
    display: block;
    width: 20px; height: 20px;
    border-bottom: 2px solid var(--secondary-text);
    border-right: 2px solid var(--secondary-text);
    transform: rotate(45deg);
    margin: 5px auto; 
    animation: scrollAni 2s infinite;
}
.scroll-down-btn span:nth-child(2) { animation-delay: .2s; }
.scroll-down-btn span:nth-child(3) { animation-delay: .4s; }

@keyframes scrollAni {
    0% { opacity: 0; transform: rotate(45deg) translate(-20px, -20px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translate(20px, 20px); }
}


/* ===========================
    4. 소셜 사이드바 
   =========================== */
.social-sidebar {
    position: fixed; 
    bottom: 0; left: 50px; 
    z-index: 1000; 
}

.social-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    align-items: flex-end; 
    gap: 30px; 
}

.social-list li {
    position: relative; 
    padding-bottom: 110px; 
    width: 24px; 
    display: flex; 
    justify-content: center;
    align-items: flex-end; 
}

/* 수직선 */
.social-list li::before {
    content: ""; 
    position: absolute;
    bottom: 0; left: 50%; 
    width: 1px; height: 100px;
    background-color: var(--secondary-text); 
    transform: translateX(-50%); 
    z-index: -1; 
}

.social-list li a {
    display: block;
    width: 24px; height: 24px;
    color: var(--secondary-text); 
    transition: 0.3s;
}
.social-list li a:hover { 
    transform: translateY(-3px); 
    color: var(--point-green);
}

/* ===========================
    5. About Me 섹션 
   =========================== */
.about-section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    background-color: var(--bg-color);
}

.about-card {
    width: 100%;
    max-width: 1100px;
    height: 85vh;
    max-height: 700px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 15px 40px #a6907626;
    border: 1px solid var(--line-color);
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 장식용 테이프 */
.about-card::before {
    content: '';
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    width: 120px; height: 35px;
    background: #ebdcc8b3;
    z-index: 1;
}

/* 헤더 영역 */
.card-header {
    text-align: center;
    margin-bottom: 30px;
    flex-shrink: 0;
}

.deco-text {
    font-size: 0.9rem;
    color: var(--accent-color);
    letter-spacing: 2px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.card-header h1 {
    font-size: 2rem;
    color: var(--primary-text);
    font-family: 'Gowun Batang', serif;
}
.card-header h1 em {
    font-style: normal;
    color: var(--point-green);
}

/* 콘텐츠 영역 */
.card-body {
    display: flex;
    height: 100%;
    gap: 50px;
    overflow: hidden;
}

/* [왼쪽] 프로필 컬럼 */
.col-profile {
    flex: 3.5;
    border-right: 1px solid var(--line-color);
    padding-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col-profile h2 {
    font-size: 1.3rem;
    color: var(--primary-text);
    margin-bottom: 20px;
    border-left: 4px solid var(--accent-color);
    padding-left: 10px;
}

.text-box p {
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--primary-text);
    display: flex;
}
.text-box strong {
    min-width: 80px;
    color: var(--secondary-text);
    font-weight: 500;
}

.desc {
    margin-top: 30px;
    font-family: 'Gowun Batang', serif;
    font-size: 1.1rem;
    color: var(--primary-text);
    line-height: 1.6;
    background: #F9F7F2;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}


/* [오른쪽] 정보 컬럼 */
.col-info {
    flex: 6.5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 10px;
}

.col-info h2 {
    font-size: 1.3rem;
    color: var(--primary-text);
    margin-bottom: 15px;
    border-left: 4px solid var(--accent-color);
    padding-left: 10px;
}

/* Key Experiences */
.check-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    color: var(--primary-text);
    font-size: 0.95rem;
    line-height: 1.5;
}
.check-list li::before {
    content: '✔';
    position: absolute;
    left: 0; top: 2px;
    color: var(--point-green);
    font-size: 0.8rem;
}
.check-list strong { color: var(--primary-text); background: #8f9f8533; padding: 0 4px; border-radius: 4px; }


/* 링크 버튼 영역 */
.link-group {
    margin-top: 20px;
}

.link-container {
    display: flex;
    gap: 20px;
}

.link-card {
    flex: 1;
    display: flex;
    align-items: center;
    background: #F5F0E6;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: 0.3s;
}

.link-card:hover {
    background: var(--point-green2);
    border-color: var(--secondary-text);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.icon-box {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff91;
    border-radius: 50%;
    margin-right: 15px;
    color: var(--primary-text);
}
.icon-box svg { width: 22px; height: 22px; }

.link-text { display: flex; flex-direction: column; }
.link-text strong { font-size: 1rem; color: var(--primary-text); }
.link-text span { font-size: 0.8rem; color: var(--secondary-text); margin-top: 2px; }


/* ===========================
    6. Skills 섹션 
   =========================== */
.skills-section {
    width: 100%;
    min-height: 100vh; 
    display: flex;
    justify-content: center; 
    padding: 120px 20px; 
    background-color: var(--bg-color);
}

.skills-card {
    width: auto; 
    max-width: 100%; 
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.skills-card .card-header {
    margin-bottom: 60px;
    text-align: center; 
    width: 100%;
}

.skills-container {
    display: flex;
    align-items: flex-start; 
    justify-content: center;
    gap: 60px; 
    position: relative;
}

/* [왼쪽] 탭 메뉴 */
.skill-tabs {
    position: sticky;
    top: 150px;
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0; 
    border-left: 2px solid var(--line-color);
    padding-left: 0;
}

/* 움직이는 슬라이딩 바 */
.sliding-bar {
    position: absolute;
    left: -2px; 
    width: 4px;
    height: 0; 
    background-color: #bed0b2;
    border-radius: 4px;
    z-index: 10;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-item {
    padding: 15px 0 15px 25px; 
    font-size: 1.1rem;
    color: var(--secondary-text); 
    cursor: pointer;
    transition: color 0.3s;
    list-style: none;
}

.tab-item:hover { color: var(--point-green); }

.tab-item.active {
    color: var(--primary-text);
    font-weight: bold;
    font-size: 1.2rem;
}

.tab-item.active::before {
    display: none;
}

/* [오른쪽] 콘텐츠 영역 */
.skill-content-area {
    width: 700px; 
    flex-shrink: 0; 
    height: auto;
    overflow: visible; 
    padding-left: 0; 
    min-height: 600px; 
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    gap: 60px; 
}

/* 기본적으로 모든 그룹 숨김 */
.skill-group {
    display: none;
    animation: fadeIn 0.5s ease-in-out; /* 내용 뜰 때 페이드인 효과 */
}

/* 활성화된 그룹만 보임 */
.skill-group.active {
    display: block;
}

/* 페이드인 애니메이션 정의 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.group-title {
    width: 100%; 
    font-size: 1.5rem;
    color: var(--secondary-text);
    margin-bottom: 30px;
    font-family: 'Gowun Batang', serif;
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 15px;
    text-align: left; 
}

.skill-item {
    width: 100%; 
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px; 
    padding: 25px;
    border-radius: 15px;
    background: var(--white); 
    border: 1px solid transparent;
    transition: 0.3s;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); 
    box-sizing: border-box;
}

.skill-icon {
    width: 60px; height: 60px;
    flex-shrink: 0;
    background-color: var(--bg-color);
    border: 2px solid var(--point-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 25px;
    font-weight: bold;
    color: var(--point-green);
    font-size: 1.1rem;
}

.skill-info h4 {
    font-size: 1.3rem;
    color: var(--primary-text);
    margin-bottom: 8px;
}

.skill-info p {
    font-size: 1rem;
    color: var(--secondary-text);
    line-height: 1.6;
    word-break: keep-all;
}

/* ===========================
    7. Projects 섹션 
   =========================== */
.projects-section {
    width: 100%;
    min-height: auto; 
    display: flex;
    justify-content: center;
    padding: 80px 20px; 
    background-color: var(--bg-color);
}

.projects-wrapper {
    width: 100%;
    max-width: 700px; 
    display: flex;
    flex-direction: column;
}

.section-header {
    text-align: center; 
    margin-bottom: 50px;
    position: relative;
}

.section-header::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--line-color);
    margin: 12px auto 0;
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0; 
    position: relative;
}

/* 개별 프로젝트 */
.timeline-item {
    display: flex;
    align-items: flex-start; 
    gap: 25px; 
    padding-bottom: 40px; 
}

/* [왼쪽] 날짜 및 아이콘 영역 */
.project-date-col {
    width: 150px; 
    flex-shrink: 0; 
    display: flex;
    justify-content: flex-start; 
    gap: 8px;
    padding-top: 2px; 
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 0.95rem; 
    color: var(--secondary-text);
    line-height: 1.4; 
    white-space: nowrap;
}

/* 날짜 옆 별표(*) 스타일 */
.date-icon {
    font-family: 'Gowun Batang', serif;
    font-size: 1rem;
    line-height: 1.4;
    color: #d0d0d0; 
}

/* [오른쪽] 프로젝트 내용 영역 */
.project-info-col {
    flex: 1; 
    border-bottom: 1px solid rgba(0,0,0,0.03); 
    padding-bottom: 40px; 
    margin-bottom: 10px; 
}

.timeline-item:last-child .project-info-col {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.project-title {
    font-family: 'Gowun Batang', serif;
    font-size: 1.25rem; 
    font-weight: bold;
    color: var(--primary-text);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.p-desc {
    font-size: 0.9rem; 
    color: var(--secondary-text);
    margin-bottom: 12px;
    line-height: 1.5;
    word-break: keep-all; 
}

.tech-badge {
    font-size: 0.7rem; 
    padding: 3px 7px;
    background-color: var(--white);
    border: 1px solid var(--line-color);
    border-radius: 5px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 상세보기 링크 */
.view-detail {
    font-size: 0.85rem;
    color: var(--secondary-text); 
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s;
    margin-top: 5px;
}
.view-detail:hover {
    color: var(--point-green);
    text-decoration: underline;
}

/* 현재 프로젝트 강조 스타일 */
.timeline-item.current .date-icon {
    color: var(--point-green); 
}

.timeline-item.current .project-date-col {
    color: var(--point-green); 
    font-weight: bold;
}

.timeline-item.current .project-title {
    color: var(--primary-text); 
}

/* 현재 진행 중 뱃지 */
.ing-badge {
    font-size: 0.65rem;
    background-color: var(--point-green);
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: normal;
    vertical-align: middle;
    transform: translateY(-1px);
}

/* ===========================
    7. 정렬 버튼 스타일
   =========================== */
.project-controls {
    width: 100%;
    display: flex;
    justify-content: flex-end; 
    margin-bottom: 20px; 
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.03); /* 아주 옅은 구분선 */
}

.sort-btn {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    
    font-family: 'Gowun Dodum', sans-serif; 
    font-size: 0.9rem;
    color: var(--secondary-text); 
    
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 5px;
}

/* 호버 시 포인트 컬러 적용 */
.sort-btn:hover {
    color: var(--point-green); 
    background-color: rgba(0,0,0,0.02); 
}

/* 아이콘 위치 미세 조정 */
.sort-btn i {
    font-size: 0.8rem;
    padding-top: 1px;
}


/* ===========================
    8. Project Modal 
   =========================== */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px); 
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 700px; 
    max-height: 85vh; 
    border-radius: 12px; 
    padding: 50px; 
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    
    /* 내부 스크롤 */
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

/* 스크롤바 꾸미기 */
.modal-content::-webkit-scrollbar {
    width: 8px;
}
.modal-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}
.modal-content::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 닫기 버튼 (우측 상단 고정) */
.close-btn {
    position: absolute;
    top: 45px;  
    right: 40px;
    font-size: 2.5rem; 
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    font-weight: 100;
    z-index: 10;
}
.close-btn:hover { color: #333; }


/* --------------------------------------------------
    8. 모달 내부 콘텐츠 스타일링
   -------------------------------------------------- */

/* 헤더 영역 */
.modal-header {
    text-align: left; 
    margin-bottom: 40px;
    border-bottom: none; 
    padding-bottom: 0;
}

.modal-icon {
    font-size: 3.5rem; 
    margin-bottom: 20px;
    color: var(--point-green); 
    line-height: 1;
}

.modal-header h2 {
    font-size: 2.2rem; 
    color: #333;
    font-family: 'Gowun Batang', serif; 
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
    word-break: keep-all;
}

/* 본문 영역 */
.modal-body {
    color: #333;
}

.section-block {
    margin-bottom: 40px; 
}

/* 소제목 (라벨) */
.section-block h3 {
    font-size: 0.9rem;
    color: var(--primary-text); 
    margin-bottom: 12px;
    font-weight: 600;
}

/* 본문 텍스트 */
.section-block p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
    margin: 0;
    font-weight: 400;
    word-break: keep-all;
}

/* 정보 그리드 (참여인원, 기간, 링크 등) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    padding: 25px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item .label {
    font-size: 0.85rem;
    color: var(--primary-text);
    font-weight: 600;
}

.info-item .value {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    word-break: keep-all;
}

.value.link {
    color: var(--point-green); 
    text-decoration: underline;
}

/* 상세 내용 리스트 */
.detail-list {
    list-style: none;
    padding: 0;
}

.detail-list li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
}

/* 모달 내 미디어(사진/영상) 영역 */
#modal-media-container {
    text-align: center;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
}
#modal-media-container img, 
#modal-media-container video {
    max-width: 100%;
    max-height: 450px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.info-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    padding: 25px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 40px;
}
.info-item { display: flex; flex-direction: column; gap: 8px; }
.info-item .label { font-size: 0.85rem; color: var(--primary-text); font-weight: 600; }
.info-item .value { font-size: 1rem; color: #333; font-weight: 500; word-break: keep-all; }
.value.link { color: var(--point-green); text-decoration: underline; }

.detail-list { list-style: none; padding: 0; }
.detail-list li {
    margin-bottom: 12px; padding-left: 20px; position: relative;
    font-size: 1rem; color: #444; line-height: 1.6;
}

/* ===========================
    9. 방문자 카운터 디자인
    =========================== */
    .visit-counter {
        /* 포지션 */
        position: fixed;
        top: 100px; 
        right: 20px; 
        z-index: 9999; 
        
        /* 레이아웃 */
        display: flex;
        align-items: center; 
        gap: 8px;
    
        /* 디자인 */
        background: rgba(255,255,255,0.9); 
        padding: 8px 15px; 
        border-radius: 20px; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    
        /* 폰트 */
        font-family: 'Gowun Dodum', sans-serif; 
        font-size: 0.9rem; 
        color: var(--primary-text); 
        font-weight: 500;
    }
    
    /* 아이콘 스타일 */
    .visit-counter .fas.fa-eye {
        color: var(--point-green); 
    }
    
    /* 텍스트 스타일 */
    .visit-counter #visit-text {
        color: var(--primary-text); 
        font-weight: 600;
    }