@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');

body {
    /* 폰트는 상속되기 때문에 상위에서 선언해주면 모두 적용됨 */
    font-family: "BMkkubulimTTF-Regular", sans-serif;
}

/* 그누보드 */
.msg_sound_only,
.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important
}

.btn_admin {
    display: none;
}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {
    display: inline-block;
    position: relative;
    max-width: none;
    background: none;
    text-align: left;
}

#captcha legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden;
}

#captcha #captcha_img {
    height: 40px;
    border: 1px solid #ccc;
    vertical-align: top;
    padding: 0;
    margin: 0;
    border-radius: 3px
}

#captcha #captcha_mp3 {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.png') no-repeat;
    text-indent: -999px;
    border-radius: 3px
}

#captcha #captcha_reload {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.png') no-repeat 0 -40px;
    text-indent: -999px;
    border-radius: 3px
}

#captcha #captcha_key {
    margin: 0 0 0 3px;
    padding: 0 5px;
    width: 90px;
    height: 40px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 1.333em;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    vertical-align: top
}

#captcha #captcha_info {
    display: block;
    margin: 5px 0 0;
    font-size: 80%;
    color: #ff0000;
    letter-spacing: -0.1em
}

@media (max-width: 575px) {
    #captcha_audio {
        display: none !important;
    }
}

/* 커스텀 */
a {
    text-decoration: none;
}

select {
    font-size: 14px;
}

#footer .logo img {
    filter: grayscale(1);
    top: 0px;
}

#latest h4 a {
    color: #000;
}

#latest h4 a:hover {
    text-decoration: none;
}

#latest li a {
    color: #777;
}

.pagination {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.ck.ck-editor__editable {
    min-height: 200px !important;
}

/*
.dropdown-item { font-size: 1rem; }
.title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; }
*/

.card-img-wrapper {
    width: 100%;
    height: 0;
    padding-top: 100%;
    /* 정방형(1:1 비율) 유지 */
    position: relative;
    overflow: hidden;
}

.card-img-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지를 꽉 채우면서 비율 유지 */
    transform: translate(-50%, -50%);
    /* 정확한 중앙 정렬 */
    display: block;
}

.card-body .d-flex.align-items-center {
    gap: 5px;
}

.card-body img.rounded-circle {
    object-fit: cover;
    background-color: #f8f9fa;
}

.thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 비율 유지 */
    overflow: hidden;
    /* border-radius: 8px; */
}

.thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지가 정방형에 맞게 꽉 차도록 */
}

.stat-icon {
    color: blue;
    font-weight: bold;
}

.stat-icon i {
    color: blue;
}

#bo_v_con img {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
}

.stat-icon.heart {
    margin-right: auto;
    /* heart를 왼쪽으로 밀어냄 */
}

/* @font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */

/* @font-face {
    font-family: 'YoonChildfundkoreaManSeh';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/YoonChildfundkoreaManSeh.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
} */

@font-face {
    font-family: 'BMkkubulimTTF-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/BMkkubulimTTF-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* #card-container {
    position: relative;
    width: 90vw; */
/* 🔥 네모 크기 키우기 */
/* height: 70vh; */
/* 🔥 높이 키우기 */
/* margin: 0 auto; */
/* border: 2px solid black; */
/* 네모 테두리 */
/* overflow: hidden; */
/* 넘치는 카드 안 보이게 */
/* background-color: rgba(0, 0, 0, 0.1); */
/* 배경색 연하게 */
/* } */

/* body { */
/* position: relative; */
/* overflow: hidden; */
/* 넘치는 카드 숨김 */
/* height: 200vh; */
/* 전체 화면 사용 */
/* } */

.floating-card {
    position: absolute;
    width: auto;
    /* 카드 크기 */
    height: auto;
    background: url('../img/drop1.png') no-repeat center center / cover;
    background-size: 1000px 1000px;
    /* 물방울 이미지 배경 */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}

/* ✅ 물방울 이미지를 위로 올려서 배경처럼 보이게 */
.floating-card::before {
    content: "";
    position: absolute;
    top: -230px;
    /* 🔥 더 위로 올림 */
    left: -60px;
    /* 🔥 좌우 크기 확장 */
    right: -60px;
    bottom: -120px;
    /* 🔥 더 아래로 확장 */
    /* 아래로도 살짝 늘려서 자연스럽게 */
    background: url('../img/drop1.png') no-repeat center center;
    background-size: contain;
    /* ✅ 배경 크기를 카드 안에 맞게 */
    z-index: -1;
    /* ✅ 카드 뒤로 보내기 */
}

/* html,
body {
    height: auto;
    min-height: 200vh; */
/* ✅ 최소 높이를 강제로 설정하여 스크롤 확보 */
/* overflow-y: scroll; */
/* ✅ 강제 스크롤 추가 */
/* } */

#fake-content {
    height: 200vh;
    /* ✅ 가짜 컨텐츠 높이 추가 */
}

/* 다음은 네비바 css 입니다 */

/* 🔥 물감이 튄 듯한 네비게이션 버튼 */
.menu-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: none !important;
    /* border-radius: 50%; */
    /* cursor: pointer; */
    /* z-index: 1001; */
    transition: transform 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: blue;
    /* font-weight: bold; */
    z-index: 9999;

    /* ✅ 테두리에 물감 번짐 효과 추가 */
    border: 0px solid blue;
    filter: url(#paintedEdge);
}

.menu-btn.active {
    /* background-color: blue; */
    color: white;
    transition: transform 0.3s ease-in-out;
}

body>header>div>button {
    background-color: transparent;
}

.menu-icon {
    background-color: none !important;
}

/* ✅ PC(1025px 이상)에서만 호버 효과 적용 */
@media (min-width: 1025px) {
    .menu-btn:hover {
        transform: scale(1.1) rotate(-2deg);
        /* background-color: blue; */
        color: blue;
        /* border: 5px solid blue; */
    }

    .hover2:hover {
        transform: scale(1.1) rotate(-2deg);
        transition: transform 0.3s ease-in-out;
    }

    .menu-btn.active:hover {
        /* background-color: blue; */
        color: white;
    }
}

/* ✅ 모바일(1024px 이하)에서는 호버 효과 제거 */
@media (max-width: 1024px) {
    .menu-btn:hover {
        transform: none !important;
        /* background-color: white !important; */
        color: blue
            /* border: none !important; */
    }

    .menu-btn.active:hover {
        /* background-color: blue; */
        color: white;
    }
}


/* 🔥 3. 네비게이션 (처음에는 숨김) */
.menu-nav {
    position: fixed;
    top: 0;
    right: -300px;
    /* ❌ 처음에는 화면 밖에 숨김 */
    width: 300px;
    height: 100vh;
    background: rgba(0, 0, 255, 1);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-in-out;
    padding: 20px;
    z-index: 9998;
}

/* 🔥 4. 네비게이션 안의 메뉴 */
.menu-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.menu-nav li {
    margin: 15px 0;
}

.menu-nav a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.menu-nav a:hover {
    color: yellow;
}

/* 🔥 5. 검색 폼 스타일 */
.menu-search {
    width: 100%;
    padding: 20px;
    text-align: center;
}

.menu-search .input-group {
    display: flex;
    align-items: center;
}

.menu-search input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
}

.menu-search button {
    margin-left: 10px;
    padding: 10px;
    border-radius: 5px;
    background: white;
    color: black;
    border: none;
    cursor: pointer;
}

.menu-search button:hover {
    background: blue;
}

/* 🔥 6. 네비게이션이 펼쳐진 상태 */

.menu-nav.open {
    transform: translateX(-300px);
}

/* ✅ 울퉁불퉁한 왼쪽 테두리 div 스타일 */
.menu-border {
    position: absolute;
    top: 0;
    left: -10px;
    /* ✅ 테두리를 왼쪽에 배치 */
    width: 15px;
    /* ✅ 테두리 두께 */
    height: 100%;
    background: white;
    filter: url(#roughNavBorder);
    /* ✅ SVG 필터 적용 */
    z-index: 9998;
}

/* 🔥 7. X 아이콘으로 변경 */
.menu-btn.open {
    font-size: 34px;
}

.bo .dropdown-item {
    color: black !important;
}

/* 새로운 인덱스 */

/* 🔥 인기 게시글 그리드 */
.post-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* ✅ 한 줄에 5개 */
    gap: 8px;
    justify-content: center;
    padding: 10px;
    grid-auto-flow: dense;
    /* ✅ 빈 공간 없이 정렬 */
}

/* 🔥 각 게시글 아이템 (기본 1x1) */
.post-item {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    /* ✅ 1:1 비율 유지 */
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

/* 🔥 큰 게시물 (첫 번째 + 랜덤 적용) */
.post-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

/* 🔥 이미지 스타일 */
.post-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

/* 🔥 마우스 오버 효과 */
.post-item:hover {
    transform: scale(1.05);
}

.post-item.large:hover {
    transform: scale(1.01);
}

.post-item:hover img {
    opacity: 0.8;
}

/* ✅ 테두리만 울퉁불퉁하게 */
.border-effect {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 8px solid white;
    filter: url(#roughBorder);
    /* ✅ SVG 필터 적용 */
    z-index: 2;
    /* ✅ 테두리를 이미지 위에 표시 */
    pointer-events: none;
    /* ✅ 클릭 방지 */
}

/* ✅ 테두리만 울퉁불퉁하게 */
.border-effect-e {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 5px solid white;
    filter: url(#roughBorder);
    /* ✅ SVG 필터 적용 */
    z-index: 2;
    /* ✅ 테두리를 이미지 위에 표시 */
    pointer-events: none;
    /* ✅ 클릭 방지 */
}

/* ✅ 모바일(1024px 이하)에서는 호버 효과 제거 */
@media (max-width: 1024px) {

    .post-item:hover,
    .post-item.large:hover {
        transform: none !important;
    }

    .post-item:hover img {
        opacity: 1 !important;
    }

    .container.mt-4>div>a>img {
        padding: 6px;
    }

    /* ✅ 테두리만 울퉁불퉁하게 */
    .border-effect {
        position: absolute;
        top: -11px;
        left: -11px;
        right: -11px;
        bottom: -11px;
        border: 20px solid white;
        filter: url(#roughBorder);
        /* ✅ SVG 필터 적용 */
        z-index: 2;
        /* ✅ 테두리를 이미지 위에 표시 */
        pointer-events: none;
        /* ✅ 클릭 방지 */
    }

    .border-effect-e {
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 5px solid white;
        filter: url(#roughBorder);
        /* ✅ SVG 필터 적용 */
        z-index: 2;
        /* ✅ 테두리를 이미지 위에 표시 */
        pointer-events: none;
        /* ✅ 클릭 방지 */
    }

}

/* 🔥 작성자 정보 */
.post-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    display: flex;
    align-items: center;
}

/* 🔥 게시글 메타 정보 */
.post-meta {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 12px;
}

.post-meta span {
    margin-left: 8px;
}

/* 🔥 반응형 (작은 화면에서는 자동 조정) */
@media (max-width: 1024px) {
    .post-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .post-item.large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .post-writer {
        margin: 10px;
    }

    .post-meta {
        margin: 10px 12px;
        font-size: 11px;
        position: absolute;
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
        /* ✅ 모바일에서는 2개씩 */
        gap: 8px;
        /* ✅ 여백 조정 */
    }
}

/* 🔥 더 작은 화면 (480px 이하)에서는 여백 줄이기 */
@media (max-width: 480px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
        /* ✅ 계속 2개씩 */
        gap: 5px;
    }
}

.empty-item {
    display: flex;
    align-items: center;
    /* ✅ 수직 가운데 정렬 */
    justify-content: center;
    /* ✅ 수평 가운데 정렬 */
}

/* ✅ 빈칸(플레이스홀더) 스타일 */
.empty-item img {
    width: 100%;
    /* height: auto; */
    object-fit: contain;
    display: block;
    margin: auto;
}

.post-item {
    backface-visibility: hidden;
    /* ✅ 백페이스(뒷면) 렌더링 방지 */
    transform-style: preserve-3d;
    /* ✅ 3D 렌더링 최적화 */
}

.post-item img {
    image-rendering: -webkit-optimize-contrast;
    /* ✅ 이미지 렌더링 최적화 */
    image-rendering: crisp-edges;
    /* ✅ 가장자리 깨끗하게 */
}

.post-item:hover {
    will-change: transform;
    /* ✅ 변형 시 성능 최적화 */
}

.border-delete {
    padding: 1px;
}

/* ✅ 울퉁불퉁한 테두리 */
.card-border {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 12px solid white;
    filter: url(#roughBorder);
    pointer-events: none;
    /* ✅ 클릭 방지 */
    z-index: 1;

}

/* ✅ 그림자 추가 (가상 요소) */
.card-border::before {
    content: "";
    position: absolute;
    inset: -4px;
    /* ✅ 테두리 바깥쪽에 그림자 적용 */
    border-radius: 1px;
    /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); */
    /* ✅ 부드러운 그림자 */
    z-index: -2;
    /* ✅ 테두리보다 더 뒤로 */
}

.dropdown-item {
    color: black !important;
}

.page-item.active .page-link {
    background-color: blue;
}

.page-link {
    color: blue;
}

.btn.btn-primary {
    background-color: blue;
    border-color: blue;
}

.card {
    border-radius: 0px;
}

.navbar-nav .nav-link.active {
    color: white;
}

.navbar-nav .nav-link.show {
    color: white;
}

#bo_v_con [style*="궁서"],
#bo_v_con [style*="'궁서체'"] {
    font-family: 'Noto Serif KR', serif !important;
}

/* 메뉴 전체를 가로 정렬 */
.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    /* 항목 사이 여백 (선택) */
}

/* 각 메뉴 항목도 inline처럼 정렬 */
.navbar-nav .nav-item {
    display: flex !important;
    align-items: center;
}

/* a.nav-link도 inline-block 유지 */
.navbar-nav .nav-link {
    white-space: nowrap;
}