:root {
    --background-color: #000000;
    --text-color: #ffffff;
    --accent-color: #01FF75;
    --secondary-color: rgba(1, 255, 117, 0.1);
    --transition: all 0.3s ease;
    
    /* 폰트 굵기 변수 */
    --font-medium: 500;
    --font-bold: 700;
    --font-black: 900;
  }

  /* 카테고리 오버레이 스타일 (전역에서 쓰이게끔) */
.category-overlay {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px; /* 10px → 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    
    align-items: center;
    justify-content: center;
    line-height: 1; /* 추가 - 텍스트 높이 정규화 */

    transition: all 0.3s ease;
    
}


/* 게시판 페이지 스타일 */
.board-section {
    padding-top: 150px;
    padding-bottom: 80px;
    margin-bottom: 40px;
}

.board-section-title {
    font-size: 40px;
    margin-bottom: 15px; /* 제목과 설명 사이 여백 줄임 */
    text-align: center;
    position: relative;
    font-weight: var(--font-bold);
}

.board-section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background-color: var(--accent-color);
}

/* 게시판 소개 문구 스타일 */
.board-intro {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 40px; /* 위 0, 좌우 auto, 아래 40px로 설정 */
    opacity: 0.8;
    text-align: center;
    line-height: 1.5;
    padding-top: 25px; /* 제목 밑의 장식선과의 간격 */
}

/* 카테고리 필터 */
.board-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

/* 필터 그룹 - 카테고리와 전체보기 버튼을 함께 그룹화 */
.filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px; /* 카테고리와 버튼 사이 간격 */
}


.category-filter {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: 10px;
    cursor: pointer;
}

.category-filter li a {
    display: block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}



/*  가운데 정렬 및 간격 수정 */
.all-view-all-wrapper {
display: flex;
align-items: center;
gap: 6px;
justify-content: center; /* 가운데 정렬로 변경 */
margin-bottom: 40px; /* 아래 카테고리와의 간격 추가 */
flex-wrap: wrap; /* 모바일에서 버튼이 줄바꿈 되도록 설정 */
}

/* 전체보기 버튼 전용 와퍼 */
.view-wrapper{
display: flex;
align-items: center;
gap: 6px;
justify-content: center; /* 가운데 정렬로 변경 */
margin-bottom: 15px; /* 아래 카테고리와의 간격 추가 */
flex-wrap: wrap; /* 모바일에서 버튼이 줄바꿈 되도록 설정 */  
}

/* 각 페이지 이동 버튼 */
.all-view-all-button {
position: relative; /* 비포어 호버효과 사용하려면 필수 */
overflow: hidden; /* 이것도 추가하면 더 안전합니다 */
padding: 8px 16px;
border-radius: 5px;
border:1px solid var(--accent-color); /*테두리*/
font-size: 14px;
font-family: inherit;
color: var(--accent-color);
background-color: var(--background-color);
text-decoration: none;
transition: var(--transition);
white-space: nowrap;
box-shadow: 0 0px 0px rgba(1, 255, 115, 0);
}




/* 전체보기 버튼 전용 와퍼 */
.view-wrapper{
display: flex;
align-items: center;
gap: 6px;
justify-content: center; /* 가운데 정렬로 변경 */
margin-bottom: 15px; /* 아래 카테고리와의 간격 추가 */
flex-wrap: wrap; /* 모바일에서 버튼이 줄바꿈 되도록 설정 */  
}

/* 각 페이지 이동 버튼 */
.all-view-all-button {
position: relative; /* 비포어 호버효과 사용하려면 필수 */
overflow: hidden; /* 이것도 추가하면 더 안전합니다 */
padding: 8px 16px;
border-radius: 5px;
border:1px solid var(--accent-color); /*테두리*/
font-size: 14px;
font-family: inherit;
color: var(--accent-color);
background-color: var(--background-color);
text-decoration: none;
transition: var(--transition);
white-space: nowrap;
/* box-shadow: 0 0px 0px rgba(1, 255, 115, 0); */
}

.all-view-all-button-active {
padding: 8px 16px;
border-radius: 4px;
border: 1px solid var(--accent-color);
font-size: 14px;
font-family: inherit;
font-weight: 700;
color: #000000;
background: linear-gradient(135deg, #00FF75 0%, #00FF88 100%);
text-decoration: none;
transition: var(--transition);
white-space: nowrap;
text-align: center;
box-shadow: 0 0 10px rgba(1, 255, 117, 0.6), 0 4px 7px rgba(0, 0, 0, 0.3);
}

.all-view-all-button:hover {
background-color: var(--accent-color);
color: var(--background-color);
}

.all-view-all-button-active:hover {
background: linear-gradient(135deg, #00FF88 0%, #00FF9A 100%);
color: #000000;
box-shadow: 
0 0 20px rgba(1, 255, 117, 0.8),
0 6px 15px rgba(0, 0, 0, 0.4);
}


/* 추가된 호버효과 */
/* .all-view-all-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(1, 255, 117, 0.2), transparent);
transition: left 0.5s ease;
}

.all-view-all-button:hover {
background: linear-gradient(135deg, rgba(1, 255, 117, 0.15), rgba(1, 255, 117, 0.25));
color: #00FF88;
box-shadow: 0 8px 25px rgba(1, 255, 117, 0.3), 0 0 20px rgba(1, 255, 117, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(1, 255, 117, 0.6);
backdrop-filter: blur(10px);
}

.all-view-all-button:hover::before {
left: 100%;
}

/* 검색창 */
.board-search {
    display: flex;
    max-width: 300px;
    position: relative;
}

.board-search .form-control {
    padding-right: 40px;
}

.search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    transition: var(--transition);
}

.search-btn:hover {
    color: var(--accent-color);
}




/*0. 전체 게시판 스타일 */
/* 필터 그룹 - 카테고리와 전체보기 버튼을 함께 그룹화 */
.all-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px; /* 카테고리와 버튼 사이 간격 */
}


.all-category-filter {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: 10px;
}

.all-category-filter li a {
    display: block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.category-filter li a:hover{
    background-color: #4d4c4c77;
    color: var(--accent-color);
}
.category-filter li a.active {
    background-color: var(--accent-color);
    color: var(--background-color);
}


/* 검색창 */
.board-all-search {
    display: flex;
    max-width: 300px;
    position: relative;
}

.board-all-search .form-control {
    padding-right: 40px;
}

.all-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    transition: var(--transition);
}

.all-search-btn:hover {
    color: var(--accent-color);
}


/* 게시판 레이아웃, 그리드 */
.board-all-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 0px;
}

.board-all-header {
    margin-bottom: 30px;
    text-align: center;
}


.board-all-grid {
    display: flex;
    flex-direction: column; /* 세로로 나열 */
    gap: 30px;
    margin-top: 40px;

    min-height: 800px; /* 추가: 최소 높이 확보 */
}

/* 전체 게시판 호버 코드 */
.board-all-item {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* 추가된 부분, 문제있으면 삭제할것 */
    contain: layout style; /* 추가: 레이아웃 격리 */
}

/* 기본 홀로그램 효과 (항상 보이는 스캔 라인) */
.board-all-item {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.board-all-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(1, 255, 117, 0.05) 50%,
        transparent 70%
    );
    animation: hologram-scan 3s infinite linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes hologram-scan {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}

/* 호버 시 카드 전체 효과 */
.board-all-item:hover {
    transform: translateY(-7px) rotateX(1deg);
    background: linear-gradient(135deg, rgba(1, 255, 117, 0.03), rgba(0, 212, 170, 0.03));
}

/* 호버 시 효과 */
.board-all-item:hover {
    transform: translateY(-7px);
}

/* 호버 시 이미지에만 네온 글로우 */
.board-all-item:hover .board-thumbnail {
    box-shadow: 
        0 0 5px rgba(1, 255, 117, 0.6),
        0 0 10px rgba(1, 255, 117, 0.4);
    border: 2px solid #01ff75;
    border-radius: 4px;
}




/* 모든 게시판 홀로그램 효과 */
.board-all-item,
.board-item,
.board-item-square, 
.board-item-wide,
.board-item-creative,
.board-item-ad,
.board-item-project-minimal {
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

/* 홀로그램 스캔 라인 (모든 게시판) */
.board-all-item::before,
.board-item::before,
.board-item-square::before,
.board-item-wide::before, 
.board-item-creative::before,
.board-item-ad::before,
.board-item-project-minimal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(1, 255, 117, 0.05) 50%,
        transparent 70%
    );
    animation: hologram-scan 2s infinite linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes hologram-scan {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}

/* 전체 게시판 썸네일 16:9 비율 설정 */

/* PC 버전 - 360px 너비 기준 */
/* 1. 전체 게시판 - 16:9 → 모바일에서 1:1 */
.board-thumbnail {
    width: 360px; /* 고정 너비 */
    transition: all 0.3s ease;
    border: 2px solid transparent;
    aspect-ratio: 16/9;  /* height: 202.5px; 대신 */
    flex-shrink: 0; /* 크기 변경 방지 */
    overflow: hidden;
    border-radius: 4px;
    margin-right: 20px;
    position: relative;

    min-height: 202px; /* 추가: 최소 높이 보장 */
}

/* 2. 웹디자인/프로그래밍 - 4:3 비율 */
.board-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하며 컨테이너에 맞춤 */
    object-position: center; /* 이미지 중앙 정렬 */
    transition: transform 0.3s ease;
}


.board-thumbnail:hover img {
    transform: scale(1.05);
}

.board-all-item-content {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.board-all-item-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #8b8b8b;
}

.board-all-item-desc {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    margin-bottom: 40px;
}

.board-all-item-date {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

.board-all-item-link {
    display: inline-block;
    margin-top: 0px;
    color: var(--text-color);
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color var(--transition);
    /* 추가: 텍스트 너비에 맞춤 */
    width: fit-content;
    font-size: 14px;
}

.board-all-item-link:hover {
    color: var(--accent-color);
}

.board-all-item-link::after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: var(--transition);
}

.board-all-item-link:hover::after {
    width: 100%;
}

.board-all-item:hover .category-overlay {
    background: linear-gradient(135deg, var(--accent-color), rgba(1, 255, 117, 0.8));
    color: var(--background-color);
    border-color: var(--accent-color);
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(1, 255, 117, 0.4);
}




.category-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 10px;
}

.category-tab {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid var(--accent-color);
    border-radius: 30px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: all 0.3s ease;
}

.category-tab:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.category-tab.active {
    background-color: var(--accent-color);
    color:var(--background-color);
}


/* 게시글 제목 카테고리 강조 */
.board-all-item-title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 0px;
    color: white;
}

/* 게시글 제목 흰색 영역 */
.board-all-item-title .title-text,
.board-item-title .title-text {
    color: white; 
}

/* 카테고리 부분만 스타일 적용 */
.category-text {
    color: var(--accent-color);
    font-weight: 700;
}


/*1. 웹디자인,프로그래밍 게시판 그리드 */
.board-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.board-item {
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    transition: var(--transition);
    height: 100%;
}

.board-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(1, 255, 117, 0.1);
}

.board-item a {
    display: block;
    height: 100%;
}

/* 2. 웹디자인/프로그래밍 - 4:3 비율 */
.board-item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.board-item-content {
    padding: 12px;
}


.board-item-title {
font-size: 15px; /* 16px에서 15px로 축소 */
overflow: hidden;
margin-bottom: 6px; /* 8px에서 6px로 축소 */
color: white;
font-weight: 500;
line-height: 1.5; /* 1.25에서 1.2로 축소 */
text-overflow: ellipsis;

/* ellipsis가 작동하기 위한 필수 조건들 */
width: 100%; /* 또는 고정 너비 */

transition: all 0.3s ease;

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

/* 🔥 핵심 해결책: nowrap 덮어쓰기 */
white-space: normal !important;
word-break: break-word;
}


.board-item-link {
    font-size: 12px;
    color: var(--text-color);
    font-weight: var(--font-bold);
    display: inline-block;
    position: relative;

    transition: all 0.3 ease;
}

.board-item .board-item-subtitle {
   font-size: 13px;
}

.board-item-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: var(--transition);
}

.board-item:hover .board-item-link::after {
    width: 100%;
}

.board-item:hover .board-item-link{
    color: var(--accent-color);
}

.board-item:hover .board-item-title {
    color: var(--accent-color);
}

.board-item:hover .category-overlay{
    background: linear-gradient(135deg, var(--accent-color), rgba(1, 255, 117, 0.8));
    color: var(--background-color);
    border-color: var(--accent-color);
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(1, 255, 117, 0.4);
}



.board-item-ad:hover .category-overlay {
    background: linear-gradient(135deg, var(--accent-color), rgba(1, 255, 117, 0.8));
    color: var(--background-color);
    border-color: var(--accent-color);
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(1, 255, 117, 0.4);
}

/* ==============================
   2. 컨텐츠 디자인 정사각형 레이아웃 (5*3) 스타일
   ============================== */

/* (컨텐츠디자인) 정사각형 레이아웃 게시판 그리드 */
.board-grid-square {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.board-item-square {
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    transition: var(--transition);
    height: 100%;
}

.board-item-square:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(1, 255, 117, 0.1);
}

.board-item-square a {
    display: block;
    height: 100%;
}

/* 3. 컨텐츠 디자인 - 1:1 정사각형 */
.board-item-square .board-item-img {
    overflow: hidden;
    position: relative;
    /* padding-top: 100%; */
    aspect-ratio: 1/1; /* padding-top: 100%; 대신 */
}

.board-item-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.board-item-square:hover img {
    transform: scale(1.05);
}

.board-item-square .board-item-content {
    padding: 10px;
}

/* 컨텐츠 디자인 게시글 제목 */
.board-item-square .board-item-title {
    font-size: 14px;
    height: 36px; /* 18px → 36px (15px * 1.2 * 2줄 = 36px) */
    overflow: hidden;
    text-overflow: ellipsis; /* 말줄임표 */
    margin-bottom: 6px; /* 6px → 4px */
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.3; /* 1.25 → 1.2 */

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;

    /* 🔥 핵심 해결책: nowrap 덮어쓰기 */
    white-space: normal !important;
    word-break: break-word;
}

/* 컨텐츠 디자인 게시글 소제목 */
.board-item-square .board-item-subtitle
{
font-size: 13px;
height: 18px; /* min-height, max-height 대신 고정 height */
overflow: hidden;
white-space: nowrap; /* 1줄 강제 */
text-overflow: ellipsis; /* 말줄임표 */
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
line-height: 1.2; /* 1.25 → 1.2 */
margin-bottom: 0px !important;
}

/* 컨텐츠 디자인 게시글 카테고리 (현재는 오버레이에서 카테고리를 보여주니 삭제된 상태) */
.board-item-square .board-item-desc {
    font-size: 10px;
    height: 16px; /* 최대 2줄 제한 */
    overflow: hidden;
    white-space: nowrap; /* 1줄 강제 */
    line-height: 1.2; /* 1.25 → 1.2 */
   
    font-weight: 500;
    margin-bottom: 0px;
    color: var(--text-color);
    opacity: 0.5;
}


/* 컨텐츠 디자인 게시글 날짜 */
.board-item-square .board-item-date {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.3;
}

/* 카테고리 오버레이(컨텐츠 디자인 게시판) */
.board-item-square .category-overlay {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px; /* 10px → 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
    line-height: 1; /* 추가 - 텍스트 높이 정규화 */
    
}

.board-item-square:hover .category-overlay {
    background: linear-gradient(135deg, var(--accent-color), rgba(1, 255, 117, 0.8));
    color: var(--background-color);
    border-color: var(--accent-color);
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(1, 255, 117, 0.4);
}

/* 추가 레이아웃을 위한 CSS - additional-layouts.css */

/* ============================
   3. 영상 디자인 와이드 레이아웃 (4*3) 스타일 - 카드 크기 최적화
   ============================ */

/* 와이드 레이아웃 게시판 그리드 */
.board-grid-wide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.board-item-wide {
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    transition: var(--transition);
    height: 100%;
}

.board-item-wide:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(1, 255, 117, 0.1);
}

.board-item-wide a {
    display: block;
    height: 100%;
}

/* 4. 영상 디자인 - 16:9 와이드 */ 
.board-item-wide .board-item-img {
    overflow: hidden;
    position: relative;
    /* padding-top: 56.25%; */
    aspect-ratio: 16/9; /* padding-top: 56.25%; 대신 */
}

/* 영상 게시판 재생버튼 스타일 */
.board-item-img {
    position: relative;
    overflow: hidden;
}

.video-overlay {
        /* 고정 크기 추가 */
    width: 40px;
    height: 40px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000000;
    font-size: 48px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: all 0.3s ease;

    background: rgba(0, 0, 0, 0.7); /* 검은색 반투명 */

    border: 2px solid rgba(1, 255, 117, 0.6);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(10px);
    text-shadow: 0 0 10px rgba(1, 255, 117, 0.5);
    
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    border-style: solid;
}

.video-overlay i {
    /* i 태그의 배경 스타일 제거 (불필요) */
    color: #01ff75; /* 삼각형 색상 */
    font-size: 15px;
    transform: translateX(1.5px); /* X축으로 1px 이동 */
}


/* 동영상이 있으면 재생 아이콘 오버레이 */
.board-all-item:hover .video-overlay,
.board-item:hover .video-overlay,
.board-item-wide:hover .video-overlay,
.board-item-ad:hover .video-overlay,
.board-item-square:hover .video-overlay, 
.board-item-creative:hover .video-overlay,
.board-item-project-minimal:hover .video-overlay {
    background: var(--accent-color); /* 검은색 반투명 */
    border-color: #01FF75;
    box-shadow: 0 0 25px rgba(1, 255, 117, 0.8);
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.board-all-item:hover .video-overlay i,
.board-item:hover .video-overlay i,
.board-item-wide:hover .video-overlay i,
.board-item-ad:hover .video-overlay i, 
.board-item-square:hover .video-overlay i,
.board-item-creative:hover .video-overlay i,
.board-item-project-minimal:hover .video-overlay i {
    color: var(--background-color); /* 삼각형 색상 */
}

.board-item-wide:hover .category-overlay{
    background: linear-gradient(135deg, var(--accent-color), rgba(1, 255, 117, 0.8));
    color: var(--background-color);
    border-color: var(--accent-color);
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(1, 255, 117, 0.4);
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.video-placeholder i {
    font-size: 48px;
    margin-bottom: 10px;
}

.video-placeholder p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.board-item-wide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.board-item-wide:hover img {
    transform: scale(1.1);
}

/* 영상 게시판 카드 크기 최적화 */
.board-item-wide .board-item-content {
    padding: 15px; /* 기존 16px에서 12px로 축소 */
}

.board-item-wide .board-item-title {
font-size: 14px;
height: 18px; /* min-height, max-height 대신 고정 height */
overflow: hidden;
white-space: nowrap; /* 1줄 강제 */
text-overflow: ellipsis; /* 말줄임표 */
margin-bottom: 6px; /* 6px → 4px */
font-weight: 500;
line-height: 1.2; /* 1.25 → 1.2 */
}



/* 카테고리 표시 스타일 최적화 */
.board-item-wide .board-item-desc {
    font-size: 12px; /* 작은 폰트 사이즈 */
    color: var(--text-color); /* 강조색 대신 기본 텍스트 색상 */
    opacity: 0.7; /* 약한 색상으로 조정 */
    margin-bottom: 2px; /* 제목과의 여백 축소 */
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* 길어지면 말줄임 */
}

.board-item-wide .board-item-date {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.3;
}

/* 페이지네이션 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
}

.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    transition: var(--transition);
}

.pagination a:hover,
.pagination a.active {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.page-prev,
.page-next {
    width: 40px;
    height: 40px;
}


/* 4. 광고/인쇄 디자인 그리드 - 4x3 와이드 레이아웃으로 변경 */
.board-grid-ad {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3열에서 4열로 변경 */
    gap: 20px; /* 간격 축소 */
    margin-bottom: 50px;
}

.board-item-ad {
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    transition: var(--transition);
    height: 100%;
}

.board-item-ad:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(1, 255, 117, 0.1);
}

.board-item-ad a {
    display: block;
    height: 100%;
}

/* 5. 광고/인쇄 - 16:9 와이드 */
.board-item-ad .board-item-img {
    overflow: hidden;
    position: relative;
    /* padding-top: 56.25%; */
    aspect-ratio: 16/9; /* padding-top: 56.25%; 대신 */
    
}

.board-item-ad img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.board-item-ad:hover img {
    transform: scale(1.05);
}


.board-item-ad .board-item-content {
    padding: 15px; /* 15px에서 12px로 축소 */
}

.board-item-ad .board-item-title {
font-size: 14px; /* 16px에서 15px로 축소 */
height: 40px; 
overflow: hidden;
margin-bottom: 6px; /* 8px에서 6px로 축소 */
color: white;
font-weight: 500;
line-height: 1.5; /* 1.25에서 1.2로 축소 */

text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

/* 🔥 핵심 해결책: nowrap 덮어쓰기 */
white-space: normal !important;
word-break: break-word;
}



.board-item-subtitle{
font-size: 13px;
height: 18px; /* min-height, max-height 대신 고정 height */
overflow: hidden;
white-space: nowrap; /* 1줄 강제 */
text-overflow: ellipsis; /* 말줄임표 */
margin-bottom: 6px !important;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
line-height: 1.2; /* 1.25 → 1.2 */
margin-bottom: 0px !important;
}

.board-game-grid {
    display: flex;
    flex-direction: column; /* 세로로 나열 */
    gap: 30px;
    margin-top: 40px;
}

  .board-game-grid .board-all-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .board-game-grid .board-all-item a {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    align-items: flex-start !important;
  }

/* 게임게시판용 본문 내용 표기 */
.board-all-item-excerpt{
    font-size: 15px;
    height: 36px; /* 2줄 고정 높이 (18px * 2) */
    overflow: hidden;
    white-space: normal; /* 줄바꿈 허용 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄로 제한 */
    -webkit-box-orient: vertical;

    color: #8b8b8b;
    font-weight: 500;
    line-height: 1.2;

    margin-bottom: 20px !important;
}

.board-game-grid .board-all-item-desc{
    margin-bottom: 10px;
}

.board-item-ad .board-item-date {
font-size: 11px;
color: var(--text-color);
opacity: 0.3;
}

/* * 게시글 페이지 스타일 */
.post-section {
    padding-top: 150px;
    padding-bottom: 80px;
}

.post-container {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.post-header {
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

.post-title {
    font-size: 26px;
    font-weight: var(--font-bold);
    margin-bottom: 15px;
    color: var(--accent-color);
}

.post-meta {
    display: flex;
    gap: 30px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    align-items: center;
}

.post-views{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px; /* 또는 원하는 간격 */
}

.post-views i{
    font-size: 14px;
}

.post-content {
    /* 내부 패딩이 40이니까 0줘도 됨 */
    margin-bottom: 0px;
}

.post-image {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.post-image img {
    height: auto;
    margin-bottom: 20px;
    max-width: none; /* PC에서 원본 크기 */
}

.post-body {
    line-height: 1.8;
}

.post-body p {
    margin-bottom: 20px;
    font-size: 16px;
}

/* 크리에이티브 디자인 게시판 - 5x3 완전 분리형 레이아웃 */
.board-grid-creative {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.board-item-creative {
    transition: var(--transition);
    height: auto; /* 자동 높이 */
}

.board-item-creative:hover {
    transform: translateY(-8px);
}

.board-item-creative:hover .category-overlay{
    background: linear-gradient(135deg, var(--accent-color), rgba(1, 255, 117, 0.8));
    color: var(--background-color);
    border-color: var(--accent-color);
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(1, 255, 117, 0.4);
}

.board-item-creative a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 이미지만 별도 영역 - 카드 스타일 없음 */
/* 6. 크리에이티브 - 1:1 정사각형 */
.board-item-creative .board-item-image-only {
    position: relative;
    aspect-ratio: 1/1; /* padding-top: 100%; 대신 */
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 6px; /* 이미지와 텍스트 사이 간격 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background-color: rgba(255, 255, 255, 0.05);
}

.board-item-creative .board-item-image-only img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.board-item-creative:hover .board-item-image-only img {
    transform: scale(1.05);
}

.board-item-creative:hover .board-item-image-only {
    box-shadow: 0 8px 25px rgba(1, 255, 117, 0.15);
}

/* 텍스트만 별도 영역 - 이미지 아래 분리 배치 */
.board-item-creative .board-item-text-only {
    padding: 8px; /* 패딩 제거 - 완전 분리 */
    background-color: transparent; /* 배경 제거 */
}

.board-item-creative .board-item-title {
    font-size: 14px;
    height: 40px; /* 18px → 36px (15px * 1.2 * 2줄 = 36px) */
    overflow: hidden;
    /* white-space: nowrap; 1줄 강제 제거 */
    text-overflow: ellipsis; /* 말줄임표 */
    margin-bottom: 6px; /* 6px → 4px */
    color: var(--text-colorr);
    font-weight: var(--font-bold);
    line-height: 1.5; /* 1.25 → 1.2 */
    
    /* 2줄 표시를 위한 추가 속성 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;

white-space: normal !important;
word-break: break-word;
}

.board-item-creative .board-item-desc {
    font-size: 13px;
    min-height: 32px;
    max-height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
    margin-bottom: 6px;
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.3;
}

.board-item-ad .board-item-desc {
    font-size: 13px; /* 14px에서 12px로 축소 */
   height: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
    margin-bottom: 4px; /* 6px에서 4px로 축소 */
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.3; /* 1.35에서 1.3으로 축소 */
}

.board-item-creative .board-item-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* board.css 또는 styles.css에 추가하세요 */
/* 활성화 상태 - 폰트 굵기 강화 */
.category-filter li a.active {
    background-color: var(--accent-color);
    color: var(--background-color);
    font-weight: var(--font-bold) !important; /* 가장 굵게 + 강제 적용 */
}

/* 전체 게시판용 카테고리 필터도 동일하게 적용 */
.all-category-filter li a.active {
    background-color: var(--accent-color);
    color: var(--background-color);
    font-weight: var(--font-bold) !important;
}

/* 페이지네이션 컨테이너 */
.js-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    min-height: 40px; /* 고정 높이로 레이아웃 안정화 */
}

/* 페이지네이션 버튼 공통 스타일 */
.js-pagination a,
.js-pagination .pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer; /* 중요: 마우스 커서 */
}

/* 호버 효과 */
.js-pagination a:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

/* 활성 페이지 */
.js-pagination a.active {
    background-color: var(--accent-color);
    color: var(--background-color);
}

/* 이전/다음 버튼 */
.js-pagination .page-prev,
.js-pagination .page-next {
    min-width: 40px;
}

/* 점선 표시 */
.js-pagination .pagination-dots {
    background-color: transparent;
    cursor: default;
    color: rgba(255, 255, 255, 0.5);
}

.js-pagination .pagination-dots:hover {
    background-color: transparent;
}

/* 공통 태그 컨테이너 */
.board-tags {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 통일된 태그 스타일 (자유게시판과 동일) */
.board-tag {
    display: inline-block;
    background: rgba(1, 255, 117, 0.1);
    color: var(--accent-color);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(1, 255, 117, 0.2);
    transition: all 0.2s ease;
    line-height: 1.6;
}

.board-tag:hover {
    background: rgba(1, 255, 117, 0.2);
    border-color: var(--accent-color);
}

/* 자유게시판 태그 스타일 */
.blog-tags {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.blog-tag {
    display: inline-block;
    background: rgba(1, 255, 117, 0.1);
    color: var(--accent-color);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(1, 255, 117, 0.2);
    transition: all 0.2s ease;
}

.blog-tag:hover {
    background: rgba(1, 255, 117, 0.2);
    border-color: var(--accent-color);
}

/* 자유게시판 플레이스홀더 색상 */
.category-placeholder-all[data-category="blog"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
    transition: all 0.3s ease;
}

.category-placeholder-all[data-category="blog"]:hover {
    background: linear-gradient(135deg, #7c7ce6 0%, #8a5aa8 100%);
    transform: scale(1.02);
}

.category-placeholder-all[data-category="blog"] i {
    font-size: 24px;
    margin-bottom: 8px;
}

.category-placeholder-all[data-category="blog"] span {
    font-size: 14px;
    font-weight: 600;
}


/* 다른글 목록으로 네비게이션 */
/* 관련글 섹션 */

/* 제목 */
.related-posts-header h3 {
    text-align: center;
    color: var(--text-color);
    font-size: 22px;
    font-weight: var(--font-bold);
    margin-bottom: 40px;
    position: relative;
    padding-top: 20px;
    /* border-top: 1px solid rgba(1, 255, 117, 0.15); */
}

.related-posts-header h3::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background-color: var(--accent-color);
}

/* 그리드 컨테이너 */
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}


/* 텍스트형일 때는 그리드 해제 */
.related-posts-grid:has(.text-list) {
    display: block;
}

/* 카드형 레이아웃 */
.related-post-card {
    background: var(--background-color);
    border-radius: 4px;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(1, 255, 117, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 285px;
}

.related-post-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(1, 255, 117, 0.15);
}

.card-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}


.card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.related-post-card:hover .card-thumbnail img {
    transform: scale(1.05);
}

/* 카드 호버 시 카테고리 오버레이 변경 */
.related-post-card:hover .category-overlay {
    background: var(--accent-color);
    color: var(--background-color);
    transition: all 0.3s ease;
}

/* 카드 호버 시 비디오 오버레이 변경 */
.related-post-card:hover .video-overlay {
    background: var(--accent-color);
    color: var(--background-color);
    transform: translate(-50%, -50%) scale(1.1);
    transition: all 0.3s ease;
}

.related-post-card:hover .video-overlay i {
    color: var(--background-color);
}
/* 카테고리 오버레이 */
.category-overlay {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 12px; /* 10px → 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
    line-height: 1; /* 추가 - 텍스트 높이 정규화 */

    transition: all 0.3s ease;
}

.category-overlay:hover{

}



.card-content {
    padding: 14px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-content h4 {
    color: var(--text-color);
    font-size: 15px;
    font-weight: var(--font-bold);
    line-height: 1.4;
    
    /* 줄임표(...) 핵심 속성들 */
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* 2줄까지만 */
    -webkit-box-orient: vertical;
    /* overflow: hidden;           반드시 필요! */
    
    /* 추가 개선 */
    word-break: keep-all;       /* 한글 단어 단위로 줄바꿈 */
    overflow-wrap: break-word;  /* 긴 단어는 강제 줄바꿈 */
    text-overflow: ellipsis;    /* 명시적 줄임표 (선택사항) */
}

.card-content .post-date {
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}

/* 텍스트형 리스트 (notice, news, terms) */
.text-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(1, 255, 117, 0.03);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(1, 255, 117, 0.1);
}

.text-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    transition: var(--transition);
    border: 0px solid transparent;
}

.text-list-item:last-child {
    border-bottom: none;
}

.text-list-item:hover {
    background: rgba(1, 255, 117, 0.08);
}

.text-title {
    color: var(--text-color);
    font-size: 15px;
    font-weight: var(--font-medium);
    flex-grow: 1;
    line-height: 1.4;
}

.text-date {
    color: var(--accent-color);
    font-size: 12px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 15px;
    flex-shrink: 0;
}

.no-related {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 60px 0;
    font-weight: var(--font-medium);
    font-size: 16px;
}

/* 목록으로 돌아가기 버튼 */
.back-to-list {
    text-align: center;
    margin-top: 40px;
}

.btn-back {
    display: inline-block;
    background-color: transparent;
    color: var(--accent-color);
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: var(--font-bold);
    transition: var(--transition);
    border: 2px solid var(--accent-color);
    text-decoration: none;
}

.btn-back:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

/* 카드 개수별 최적화 */
.related-posts-grid:has(.related-post-card:nth-child(1):nth-last-child(1)) {
    grid-template-columns: 1fr;
    max-width: 400px;
}

.related-posts-grid:has(.related-post-card:nth-child(2):nth-last-child(1)) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

.related-posts-grid:has(.related-post-card:nth-child(3):nth-last-child(1)) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px;
}

/* 프로그래밍 카테고리 - 기존 스타일 적용 */
.demo-placeholder-grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 서브카테고리별 배경 색상 */
.demo-placeholder-grid[data-subcategory="프론트엔드"] {
    background: linear-gradient(135deg, #61dafb 0%, #21759b 100%);
}

.demo-placeholder-grid[data-subcategory="백엔드"] {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
}

.demo-placeholder-grid[data-subcategory="웹 퍼블리싱"] {
    background: linear-gradient(135deg, #ff6d00 0%, #e65100 100%);
}

.demo-placeholder-grid[data-subcategory="모바일 앱"] {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.demo-placeholder-grid[data-subcategory="게임 개발"] {
    background: linear-gradient(135deg, #00F0FF 0%, #FFF200 100%);
}

/* 기본 프로그래밍 색상 */
.demo-placeholder-grid:not([data-subcategory]),
.demo-placeholder-grid[data-subcategory=""] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.demo-placeholder-grid .demo-icon {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.demo-placeholder-grid .demo-label {
    text-align: center;
    transition: all 0.3s ease;
}

.demo-placeholder-grid .demo-type {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.demo-placeholder-grid .demo-tech {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* 프로그래밍 카테고리 호버 효과 */
.related-post-card:hover .demo-placeholder-grid[data-subcategory="프론트엔드"] {
    background: linear-gradient(135deg, #81e5ff 0%, #3a8bb5 100%);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(97, 218, 251, 0.4);
}

.related-post-card:hover .demo-placeholder-grid[data-subcategory="백엔드"] {
    background: linear-gradient(135deg, #66bb6a 0%, #4a7c59 100%);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.related-post-card:hover .demo-placeholder-grid[data-subcategory="웹 퍼블리싱"] {
    background: linear-gradient(135deg, #ff8a50 0%, #ff7043 100%);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 109, 0, 0.4);
}

.related-post-card:hover .demo-placeholder-grid[data-subcategory="모바일 앱"] {
    background: linear-gradient(135deg, #ef5350 0%, #f44336 100%);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 67, 54, 0.4);
}

.related-post-card:hover .demo-placeholder-grid[data-subcategory="게임 개발"] {
    background: linear-gradient(135deg, #33f3ff 0%, #ffff33 100%);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4);
}

.related-post-card:hover .demo-placeholder-grid:not([data-subcategory]),
.related-post-card:hover .demo-placeholder-grid[data-subcategory=""] {
    background: linear-gradient(135deg, #7c7ce6 0%, #8a5aa8 100%);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 124, 230, 0.3);
}

/* 다른 카테고리 - 간단한 플레이스홀더 */
.simple-placeholder-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(1, 255, 117, 0.1), rgba(1, 255, 117, 0.05));
    color: var(--accent-color);
    position: relative;
    overflow: hidden;
}

.simple-placeholder-thumbnail i {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.simple-placeholder-thumbnail span {
    font-size: 12px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 8px;
    background: rgba(1, 255, 117, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(1, 255, 117, 0.2);
}

/* 다른 카테고리별 색상 */
.simple-placeholder-thumbnail[data-category="web"] {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.15), rgba(74, 144, 226, 0.08));
    color: #4a90e2;
}

.simple-placeholder-thumbnail[data-category="creative"] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.08));
    color: #ff6b6b;
}

.simple-placeholder-thumbnail[data-category="video"] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
    color: #ffc107;
}
/* YouTube 게시판 스타일 유튜브 */
.youtube-board-section {
    background: #0f0f0f;
    color: #fff;

    padding-top: 150px;
    padding-bottom: 80px;
    margin-bottom: 40px;
}

.youtube-board-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}

.youtube-intro {
    text-align: center;
    color: #aaa;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* YouTube CTA 버튼 */
.youtube-cta-wrapper {
    text-align: center;
    margin-bottom: 40px;
    padding: 60px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.youtube-cta-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.youtube-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.15);
    color: white;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.2);
}

.youtube-cta-button:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    color: white;
    text-decoration: none;
}

.youtube-cta-button i {
    font-size: 1.3rem;
}

.youtube-stats {
    margin-top: 1rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
}

/* 네비게이션 */
.youtube-nav {
    margin-bottom: 2rem;
}

.all-view-all-button-youtube {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
white-space: nowrap;
border: 1px solid var(--accent-color);
color: var(--accent-color);
background-color: var(--background-color);
transition: all 0.3s ease;
}

.all-view-all-button-youtube:hover{
background: #ff0000;
border: 1px solid #ff0000;
color: white;
}

.all-view-all-button-youtube-active {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
white-space: nowrap;
border: 1px solid #ff0000;;
color: white;
background-color: #ff0000;;
transition: all 0.3s ease;
}

.all-view-all-button-youtube-active:hover{
background: #a70000; /* 더 어두운 빨간색 */
border: 1px solid #a70000;
color: white;
box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3); /* 빨간색 글로우 */
}


.all-view-all-button-blog {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
white-space: nowrap;
border: 1px solid var(--accent-color);
color: var(--accent-color);
background-color: var(--background-color);
transition: all 0.3s ease;
}

.all-view-all-button-blog:hover{
background: #6200ff;
border: 1px solid #6200ff;
color: white;
}

.all-view-all-button-blog-active {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
color: white;
white-space: nowrap;
border: 1px solid #6200ff;
background-color: #6200ff;
transition: all 0.3s ease;
}

.all-view-all-button-blog-active:hover{
background: #3e01a8;
border: 1px solid #3e01a8;
color: white;
box-shadow: 0 4px 12px rgba(98, 0, 255, 0.3); /* 보라색 글로우 */
}


/* 필터 */
.youtube-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.youtube-category-filter {
    display: flex;
    list-style: none;
    margin: 0;
    background: #1f1f1f;
    border-radius: 50px;
    padding: 6px 10px 6px 10px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
    gap: 8px;
    cursor: pointer;
}

.youtube-category-filter li {
    margin: 0;
}

.youtube-category-filter a {
    display: block;
    padding: 6px 14px;
    color: #aaa;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-weight: 500;
    white-space: nowrap;
    font-size: 15px;
}

.youtube-category-filter a:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.youtube-category-filter a.active {
    background: #ff0000;
    color: white;
    box-shadow: 0 4px 12px rgba(255,0,0,0.3);
}

/* 검색창 */
.youtube-search {
    display: flex;
    background: #1f1f1f;
    border-radius: 50px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
    max-width: 400px;
}

.youtube-search:focus-within {
    border-color: #ff0000;
}

.youtube-search-input {
    background: transparent;
    border: none;
    padding: 12px 20px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    width: 300px;
}

.youtube-search-input::placeholder {
    color: #666;
}

.youtube-search-btn {
    background: #ff0000;
    border: none;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.youtube-search-btn:hover {
    background: #cc0000;
}

/* YouTube 그리드 */
.youtube-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 3rem;
}

.youtube-item {
    background: #1f1f1f;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
    /* border: 1px solid #3f3f3f; */
    border: 1px solid transparent;
}

.youtube-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    /* border-color: #5f5f5f; */
}

.youtube-item:hover .category-overlay{
    background: linear-gradient(135deg, var(--accent-color), rgba(1, 255, 117, 0.8));
    color: var(--background-color);
    border-color: var(--accent-color);
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(1, 255, 117, 0.4);
}

/* 카드 구조 */
.youtube-card-content {
    display: block;
    position: relative;
}

.youtube-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 썸네일 */
.youtube-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.youtube-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.youtube-item:hover .youtube-thumb-img {
    transform: scale(1.05);
}

/* 재생 버튼 오버레이 */
.youtube-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.youtube-item:hover .youtube-play-overlay {
    opacity: 1;
}

.youtube-play-button {
    width: 50px;
    height: 50px;
    background: rgba(255,0,0,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.youtube-item:hover .youtube-play-button {
    transform: scale(1);
    background: #ff0000;
}

.youtube-play-icon {
    width: 24px;
    height: 24px;
    fill: white;
    margin-left: 2px;
}

/* 타입 배지 */
.youtube-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.youtube-type-badge.api-badge {
    background: #ff0000;
}

.youtube-type-badge.thumbnail-badge {
    background: #4caf50;
}

.youtube-type-badge.channel-art-badge {
    background: #ff9800;
}

/* 컨텐츠 영역 */
.youtube-content {
    padding: 12px 12px 6px 12px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}


.youtube-avatar {
    flex-shrink: 0;
}

/* 유튜브 프로필 사진 */
.youtube-channel-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.youtube-item:hover .youtube-channel-avatar{
    border-color: var(--accent-color);
}

.youtube-info {
    flex: 1;
    min-width: 0;
}

.youtube-title {
    /* color: var(--accent-color); */
    color: white;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 0px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.youtube-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.youtube-channel {
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

.youtube-channel span{
    color: var(--accent-color);
    font-weight: 700;
}

.youtube-date {
    color: #666;
    font-size: 13px;
    margin: 0;
}

/* 구독 버튼 */
/* 인라인 구독 버튼 (새로 추가) */
.youtube-subscribe-wrapper-inline {
    flex-shrink: 0;
    align-self: flex-end; /* 이 줄만 추가 */
    position: absolute;
    right: 12px;
    bottom: 16px;
}

.youtube-subscribe-btn-inline {
    background: #ff0000;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.youtube-subscribe-btn-inline:hover {
   background: #850101;
   transform: translateY(-1px);
   box-shadow: 
       0 0 5px #ff00004d,
       0 0 10px #ff00004d,
       0 0 15px #ff00004d,
       inset 0 0 10px rgba(255,0,0,0.3);
}

.youtube-subscribe-btn-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s ease;
}

.youtube-subscribe-btn-inline:hover::before {
    left: 100%;
}

.youtube-subscribe-btn-inline i {
    font-size: 0.7rem;
}

/* 페이지네이션 */
/* .youtube-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.youtube-pagination button,
.youtube-pagination a {
    background: #1f1f1f;
    color: #aaa;
    border: 1px solid #3f3f3f;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
} */

/* .youtube-pagination button:hover,
.youtube-pagination a:hover {
    background: #ff0000;
    color: white;
    border-color: #ff0000;
}

.youtube-pagination .active {
    background: #ff0000;
    color: white;
    border-color: #ff0000;
} */

/* 반응형 */
/* @media (max-width: 1200px) {
    .youtube-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .youtube-filter {
        flex-direction: column;
        align-items: stretch;
    }
    
    .youtube-category-filter {
        overflow-x: auto;
        padding: 6px;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    
    .youtube-search {
        max-width: none;
        width: 100%;
    }
    
    .youtube-search-input {
        width: 100%;
    }
    
    .youtube-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .youtube-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .youtube-category-filter a {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
} */



/* ==============================
   반응형 스타일
   ============================== */

/* 대형 태블릿 */
@media (max-width: 1024px) {
    .board-grid-wide {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .board-grid-square {
        grid-template-columns: repeat(4, 1fr);
    }

    .board-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .board-section-title {
        font-size: 36px;
    }

    .board-grid-creative {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .board-grid-ad {
        grid-template-columns: repeat(3, 1fr); /* 4열에서 3열로 */
        gap: 18px;
    }


    
}

/* 태블릿 */
@media (max-width: 768px) {
     .board-game-grid {
          display: flex;
    flex-direction: column;
    gap: 12px;
    }

  .board-game-grid .board-all-item {
    margin-bottom: 0;
  }


/* 웹디자인,프로그래밍 게시판 반응형 이미지처리 */
.board-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
}


    
    .board-all-item-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    width: 100%; /* 추가로 명시적 너비 설정 */
}
    
    
    .board-game-grid .board-all-item-title {
        font-size: 17px;
        margin-bottom: 8px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    

    
    .board-game-grid .board-all-item-desc {
        margin-bottom: 8px;
        font-size: 13px;
    }
    
    .board-game-grid .board-all-item-date {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .board-game-grid .board-tags {
        margin: 6px 0 0 0;
    }

    .board-tags {
    margin: 6px 0;
    gap: 3px;
    }

    .board-tag {
    font-size: 10px;
    padding: 1px 6px;
    line-height: 1.5;
    }
    
    .blog-tags {
    margin: 6px 0;
    gap: 3px;
    }

    .blog-tag {
        padding: 2px 6px;
        font-size: 10px;
        line-height: 1.5;
    }

    .board-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .board-grid-creative {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .board-item-creative .board-item-image-only {
        margin-bottom: 10px;
    }
    
    .board-item-creative .board-item-title {
        font-size: 14px;
        height: 18px;
    }
    
    .board-item-creative .board-item-desc {
        font-size: 11px;
        min-height: 28px;
        max-height: 28px;
    }

    .post-image img {
        max-width: 100%;
        width: 100%;
    }
    
    .filter-group {
        width: 100%;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .board-search {
        width: 100%;
        max-width: 100%;
    }
    
    .board-search .form-control {
        width: 100%;
    }
    
    .category-filter {
        justify-content: center; /* 카테고리 필터 중앙 정렬 */
    }
    
    .all-view-all-wrapper {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .all-view-all-button {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .board-grid-wide {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .board-grid-square {
        grid-template-columns: repeat(3, 1fr);
    }

    .board-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .board-section-title {
        font-size: 32px;
    }
    
    .board-intro {
        font-size: 16px;
        padding: 20px 15px 0;
    }

    /* 전체 게시판 태블릿 반응형 */
    .board-all-item {
        flex-direction: row; /* 가로 배치 유지 */
        align-items: center;
    }
    
    .board-thumbnail {
        width: 240px; /* 태블릿에서 축소 */
        height: 135px; /* 16:9 비율 (240 × 0.5625) */
        margin-right: 15px;
        min-height: 135px; /* 추가: 고정 높이 보장 */
    }
    
    .board-all-item-content {
        padding: 2px 2px 2px 0;
        min-width: 0; /* 이게 핵심! */
    }

    .board-game-grid .board-all-item-content {
        padding: 15px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important; /* 전체 너비 사용 */
        flex: 1 !important; /* 남은 공간 모두 차지 */
        min-width: 0 !important; /* flexbox shrink 허용 */
    }
    
    
    .board-all-item-title {
        font-size: 16px;
        margin-bottom: 6px;
    }
    
    .board-all-item-desc {
        font-size: 13px;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .board-all-item-date {
        font-size: 11px;
        margin-bottom: 2px;
        margin-top: 0;
    }
    
    .board-all-item-link {
        margin-top: 8px;
        font-size: 13px;
    }

    /* 영상 게시판 태블릿 반응형 */
    .board-item-wide .board-item-content {
        padding: 10px; /* 태블릿에서 더 축소 */
    }
    
    .board-item-wide .board-item-title {
        font-size: 14px;
        height: 18px;
        margin-bottom: 3px; /* 카테고리와의 여백 축소 */
    }
    
    .board-item-wide .board-item-desc {
        font-size: 11px;
        margin-bottom: 2px; /* 날짜와의 여백 축소 */
        opacity: 0.7; /* 약한 색상 */
    }
    
    .board-item-wide .board-item-date {
        font-size: 11px; /* 태블릿에서 크기 유지 */
    }

    /* 광고 게시판 태블릿 반응형 */
    .board-grid-ad {
        grid-template-columns: repeat(2, 1fr); /* 3열에서 2열로 */
        gap: 15px;
    }
    
    .board-item-ad .board-item-content {
        padding: 12px; /* 태블릿에서 더 축소 */
    }
    
    .board-item-ad .board-item-title {
        font-size: 14px;
        height: 18px;
        margin-bottom: 4px;
    }
    
    .board-item-ad .board-item-desc {
        font-size: 11px;
        min-height: 28px;
        max-height: 28px;
        margin-bottom: 3px;
    }
    
    .board-item-ad .board-item-date {
        font-size: 10px;
    }

    /* 게임게시판용 본문 내용 표기 */
.board-all-item-excerpt{
    font-size: 13px;
    height: 31.2px; /* 2줄 고정 높이 (18px * 2) */
    overflow: hidden;
    white-space: normal; /* 줄바꿈 허용 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄로 제한 */
    -webkit-box-orient: vertical;

    font-weight: 500;
    line-height: 1.2;

    margin-bottom: 8px !important;
}
}

/* 모바일 */
@media (max-width: 576px) {
.container{
padding: 0px 20px;
}



.board-all-container {
padding: 0px 0px;
}

.post-title{
    font-size: 18px;
}

.post-body p{
    font-size: 14px;
}

.post-navigation {
    margin-top: 40px;
    padding-top: 20px;
    gap: 10px;
}

.post-navigation a {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: var(--transition);
    font-size: 12px;
}


.category-overlay {
    top: 8px;
    left: 50%;
    padding: 4px 6px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
}

.video-overlay {
        /* 고정 크기 추가 */
    width: 24px;
    height: 24px;
    border: 1px solid rgba(1, 255, 117, 0.6);
}



.video-overlay i {
    font-size: 8px;
    transform: translateX(0.5px); /* X축으로 1px 이동 */
}

.board-all-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* 중요! flexbox에서 shrink 허용 */
}



.board-all-item-subtitle {
font-size: 12px;
    /* display 속성 완전 제거 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* 중요! */
    
   
}
    .board-section {
        padding-top: 100px; /* 상단 패딩 줄임 */
    }
    
    .board-section-title {
        font-size: 28px;
    }

    .board-grid-creative {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .board-item-creative .board-item-image-only {
        margin-bottom: 8px;
    }
    
.board-item-creative .board-item-title {
    font-size: 13px;
    height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    
    /* 🔥 핵심 해결책: nowrap 덮어쓰기 */
    white-space: normal !important;
    word-break: break-word;
}
    
    .board-item-creative .board-item-desc {
        font-size: 11px;
        min-height: 28px;
        max-height: 28px;
        margin-bottom: 4px;
    }
    
    .board-item-creative .board-item-date {
        font-size: 10px;
    }
    
    .board-intro {
        font-size: 14px;
        margin-bottom: 30px;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: center;
    }
    
    .category-filter {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .category-filter li a {
        padding: 6px 12px;
        font-size: 13px;
    }

.view-wrapper {
padding: 0 10px;
gap: 6px;
margin-bottom: 6px;
}

.all-view-all-wrapper {
padding: 0 10px;
gap: 6px;
}
    
    .all-view-all-button {
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 2px;
        flex-grow: 1;
        text-align: center;
    }
    
    .all-view-all-button-active {
        font-size: 12px;
        padding: 8px 10px;
        flex-grow: 1;
        text-align: center;
    }

    .all-view-all-button-youtube{
        font-size: 12px;
        padding: 8px 10px;
        flex-grow: 1;
        text-align: center; 
        border-radius: 2px;
    }

    .all-view-all-button-blog{
        font-size: 12px;
        padding: 8px 10px;
        flex-grow: 1;
        text-align: center;  
    }

    .all-view-all-button-youtube-active {
        font-size: 12px;
        padding: 8px 10px;
        flex-grow: 1;
        text-align: center;    
    }
    
    .all-view-all-button-blog-active {
        font-size: 12px;
        padding: 8px 10px;
        flex-grow: 1;
        text-align: center;  
    }

    .board-search {
        margin-top: 15px;
    }
    
    /* 모바일에서 그리드를 1열로 변경 */
    .board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .board-grid-wide {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .board-grid-square {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .board-grid-ad {
        grid-template-columns: repeat(2, 1fr); /* 2열 유지 */
        gap: 12px;
    }
    
    .board-item-content {
        padding: 8px;
    }
    
    .board-item-title {
        font-size: 13px;
    }
    
    .board-item-square .board-item-title,
    .board-item-wide .board-item-title,
    .board-item-ad .board-item-title {
        font-size: 13px;
    }

     .board-item-square .board-item-title {
        font-size: 13px;
        height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
        color: var(--text-color);
        font-weight: 500;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        
        /* 🔥 핵심 해결책: nowrap 덮어쓰기 */
        white-space: normal !important;
        word-break: break-word;
    }
    
    .board-item-square .board-item-desc,
    .board-item-ad .board-item-desc {
        font-size: 12px;
        min-height: 32px;
    }
    
    .pagination {
        margin-top: 30px;
    }
    
    .pagination a {
        width: 40px;
        height: 40px;
        font-size: 13px;
        margin-bottom: 25px;
    }

    /* 모바일에서 카드간 여백 없애기 */
    .board-all-grid {
        gap: 0px;
    }

    /* 전체 게시판 모바일 반응형 - 정사각형 비율 */
    .board-thumbnail {
        width: 120px !important;  /* 정사각형 크기 */
        height: 120px !important; /* 1:1 비율 */
        margin-right: 12px;
        /* 추가된 부분, 문제되면 삭제할것 */
    min-height: 120px !important; /* 추가: 최소 높이 고정 */
    flex-shrink: 0 !important; /* 추가: 크기 변경 방지 */
    }
    
    .board-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 전체 이미지가 보이도록 변경 */
        object-position: center !important;
    }
    
/* 게임게시판도 전체게시판 처럼 레이아웃 수정 */
    .board-all-grid .board-thumbnail {
        width: 120px !important;  
        height: 120px !important; 
        margin-right: 12px;
    }

      /* 이 부분을 추가! */
  .board-game-grid .board-all-item {
    min-height: 140px;
    align-items: center;
    padding: 0px;
  }
  
  .board-game-grid .board-all-item a {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100%;
  }
  
  .board-all-item-content {
    flex: 1;
    min-width: 0; /* 텍스트 잘림 방지 */
  }
    
      /* 게임게시판은 와이드 비율 유지 */
  .board-game-grid .board-thumbnail {
    width: 120px !important;      /* 100% → 120px */
    height: 120px !important;     /* auto → 120px */
    margin-right: 12px !important; /* 0 → 12px */
    /* aspect-ratio 제거 */
  }
    
.board-game-grid .board-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

    .board-all-item {
        min-height: 140px; /* 정사각형 이미지에 맞춰 높이 조정 */
        align-items: center; /* 가운데 정렬 복원 */
        padding: 0px;
    }
    
    .board-all-item-content {
        padding: 12px 8px 12px 0;
        justify-content: center; /* 가운데 정렬 복원 */
    }
    
    .board-all-item-title {
       font-size: 14px;
        margin-bottom: 0px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .board-all-item-desc {
        font-size: 11px;
        margin-bottom: 4px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .board-all-item-date {
        font-size: 10px;
        margin-top: 0;
    }
    
    .board-all-item-link {
        margin-top: 0px;
        font-size: 12px;
    }

    /* 영상 게시판 모바일 반응형 */
    .board-item-wide .board-item-content {
        padding: 10px; /* 모바일에서 최소 패딩 */
    }
    
    .board-item-wide .board-item-title {
        font-size: 13px;
        height: 18px;
        margin-bottom: 2px; /* 카테고리와의 여백 최소화 */
    }

    .board-item-subtitle{
        font-size: 12px !important;
        height: 20px; /* min-height, max-height 대신 고정 height */
        margin-bottom: 4px;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
        line-height: 1.2; /* 1.25 → 1.2 */
        margin-bottom: 0px;

        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

    }

    .board-item-wide .board-item-desc {
        font-size: 10px;
        margin-bottom: 1px; /* 날짜와의 여백 최소화 */
        opacity: 0.7; /* 약한 색상 */
    }
    
    .board-item-wide .board-item-date {
        font-size: 10px; /* 모바일에서는 작게 유지 */
    }

    /* 광고 게시판 모바일 반응형 */
    .board-item-ad .board-item-content {
        padding: 10px; /* 모바일에서 최소 패딩 */
    }
    
    .board-item-ad .board-item-title {
        font-size: 13px;
        height: 38px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
        color: var(--text-color);
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        
        /* 🔥 핵심 해결책: nowrap 덮어쓰기 */
        white-space: normal !important;
        word-break: break-word;
    }
    
    .board-item-ad .board-item-desc {
        font-size: 10px;
        min-height: 24px;
        max-height: 24px;
        margin-bottom: 2px;
    }
    
    .board-item-ad .board-item-date {
        font-size: 9px;
    }

    .board-game-grid .board-all-item-content {
        padding: 0px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important; /* 전체 너비 사용 */
        flex: 1 !important; /* 남은 공간 모두 차지 */
        min-width: 0 !important; /* flexbox shrink 허용 */
    }
    
    .board-game-grid .board-all-item-title {
        font-size: 14px;
        margin-bottom: 0px;
        text-align: left; /* 제목 왼쪽 정렬 */
    }
    
    .board-game-grid .board-all-item-desc {
        margin-bottom: 4px;
        font-size: 13px;
        text-align: left; /* 카테고리 왼쪽 정렬 */
    }
    
.board-game-grid .board-all-item-excerpt {
margin-bottom: 4px !important;
font-size: 12px;
height: auto;
text-align: left; /* 본문 왼쪽 정렬 */

/* 1줄 말줄임 처리 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
    
.board-game-grid .board-all-item-date {
    font-size: 10px;
    margin-bottom: 4px;
    text-align: left; /* 날짜 왼쪽 정렬 */
}

    .board-game-grid .board-tags {
        margin: 6px 0 0 0;
        justify-content: flex-start; /* 태그 왼쪽 정렬 */
    }


.post-meta {
    font-size: 15px;
    gap: 10px;
    justify-content: space-between;
}    

.post-views{
    gap: 6px;
    margin: 0 0;
}

/* 모바일 목록으로 반응형 */
    .post-navigation {
        padding: 20px 15px;
    }
    
    .related-posts-header h3 {
        font-size: 18px;
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        gap: 10px;
    }
    
    .related-post-card {
        height: 220px;
    }
    
    .card-thumbnail {
        height: 140px;
    }
    
    .card-content {
        padding: 12px;
    }
    
    .card-content h4 {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .card-content .post-date {
        font-size: 10px;
    }
    
    .category-overlay {
        top: 8px;
        left: 8px;
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .video-overlay {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }
    
    .placeholder-thumbnail i {
        font-size: 20px;
        margin-bottom: 6px;
    }
    
    .placeholder-thumbnail span {
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .btn-back {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .back-to-list {
        margin-top: 25px;
        padding-top: 20px;
    }

    .related-posts-grid:has(.related-post-card:nth-child(3):nth-last-child(1)) {
    grid-template-columns: repeat(2, 1fr);
    }


.youtube-category-filter {
display: flex;
list-style: none;
margin: 0;
background: #1f1f1f;
border-radius: 50px;
padding: 6px 10px 6px 10px;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
gap: 8px;
cursor: pointer;
justify-content: space-around;
}

.youtube-filter {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}

.youtube-category-filter {
margin: 0;
margin-top: -10px;
flex-direction: column;
padding: 12px;
border-radius: 12px;
gap: 10px;
}

.youtube-category-filter a {
padding: 6px 8px;
font-weight: 500;
font-size: 14px;
text-align: center;
}

.youtube-cta-wrapper {
text-align: center;
margin-bottom: 20px;
padding: 20px;
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
border-radius: 6px;
position: relative;
overflow: hidden;
}


.youtube-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.15);
color: white;
text-decoration: none;
padding: 8px 16px;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.2);
}

.youtube-stats{
    margin-top: 6px;
}

}

/* 작은 모바일 */
@media (max-width: 375px) {
    .all-view-all-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .board-grid-creative {
        grid-template-columns: 1fr;
    }
    
    .all-view-all-button {
        width: 100%;
    }
    
    .board-grid-square {
        grid-template-columns: 1fr; /* 가장 작은 화면에서는 1열로 */
    }
    
    .board-grid-ad {
        grid-template-columns: 1fr; /* 1열로 변경 */
    }
    
    .board-section-title {
        font-size: 24px;
    }
    
    .pagination a {
        width: 28px;
        height: 28px;
    }

    /* 전체 게시판 매우 작은 모바일 반응형 */
    .board-thumbnail {
        width: 80px; /* 작은 정사각형 */
        height: 80px; /* 1:1 비율 */
        margin-right: 10px;
    }

    .board-thumbnail img {
        object-fit: contain; /* 이미지 전체가 보이도록 */
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .board-all-item {
        min-height: 120px; /* 작은 화면용 높이 */
        padding: 12px;
    }
    
    .board-all-item-content {
        padding: 8px 5px 8px 0;
    }
    
    .board-all-item-title {
        font-size: 13px;
    }
    
    .board-all-item-desc {
        font-size: 11px;
    }

   
   
}