@charset "utf-8";

/* ─────────────────────────────────────────
   폰트
   물마루 : 홈페이지 로컬 설치 폰트
   DungGeunMo는 @font-face로 직접 선언
───────────────────────────────────────── */
@font-face {
    font-family: 'DungGeunMo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 폰트 로딩 전 fallback 폰트로 먼저 보여줌 */
}

/* ─────────────────────────────────────────
   레이아웃 & 그리드
───────────────────────────────────────── */
#bo_gall { max-width: 1100px; margin: 0 auto; padding: 40px 10px; }

#bo_cate { margin-bottom: 2px; border: none; }
#bo_cate_ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
}
#bo_cate_ul a {
    display: block;
    padding: 5px 12px;
    border-radius: 20px;
    background: #f5f5f5;
    color: #888;
    text-decoration: none;
    font-size: 12px;
    border: 1px solid #eee;
}
#bo_cate_ul #bo_cate_on { background: #333; color: #fff; border-color: #333; }

.bo_gall_top { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.btn_b01 {
    padding: 6px 15px;
    background: #333;
    color: #fff !important; /* 테마 링크 색상 override용 */
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
}

#gall_ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px 25px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.gall_li { width: 100%; }
.gall_box { position: relative; width: 100%; z-index: 1; }

/* ─────────────────────────────────────────
   썸네일 영역
───────────────────────────────────────── */
.gall_img_wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    background: #f0f0f0;
    z-index: 10;
    overflow: visible;
}
.gall_img_inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* [fix] 커버 이미지 컨테이너 높이 명시 - 이게 없으면 img height:100%가 무시됨 */
.gall_img {
    display: block;
    width: 100%;
    height: 100%;
}
.gall_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gall_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
}
.gall_box:hover .gall_overlay { opacity: 1; }
.gall_box:hover .gall_img img { transform: scale(1.05); }

/* ─────────────────────────────────────────
   제목
───────────────────────────────────────── */
.bo_tit {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 30;
    color: #3a3a3a;
    font-size: 20px;
    font-family: '물마루', 'DungGeunMo', monospace; /* 홈페이지 로컬 설치 폰트 */
    font-weight: 700;
    letter-spacing: 0em;
    pointer-events: none;
    text-shadow:
        -1px -1px 0 rgba(255,255,255,0.95),
         1px -1px 0 rgba(255,255,255,0.95),
        -1px  1px 0 rgba(255,255,255,0.95),
         1px  1px 0 rgba(255,255,255,0.95),
         0 2px 8px rgba(0,0,0,0.18);
    /* [fix] 긴 제목이 카드 밖으로 튀어나오지 않게 */
    max-width: calc(100% - 36px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────
   본문 (호버 시 표시)
───────────────────────────────────────── */
.bo_content {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 21;
    color: #eee;
    font-size: 12px;
    font-family: 'Dotum', '돋움', sans-serif;
    text-align: right;
    max-width: 55%;
    opacity: 0;
    transition: opacity 0.3s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
}
.gall_box:hover .bo_content { opacity: 1; }

/* ─────────────────────────────────────────
   수정/삭제 버튼
───────────────────────────────────────── */
.bo_admin_btns {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 999;
    display: flex;
    gap: 12px;
}
.bo_admin_btns a {
    display: inline-block;
    color: #fff !important; /* 테마 링크 색상 override용 */
    font-size: 18px;
    font-weight: bold;
    font-family: 'DungGeunMo', sans-serif;
    text-decoration: none !important;
    filter: drop-shadow(0 0 4px rgba(0,0,0,1));
    cursor: pointer;
}

/* ─────────────────────────────────────────
   토큰
───────────────────────────────────────── */
.mini_thumb {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
}
.mini_thumb .token {
    position: relative;
    display: inline-block;
    height: clamp(90px, 15vw, 150px);
    flex: 0 0 auto;
    pointer-events: auto;
    margin: 0 2px;
}

/* 토큰 개수에 따른 자동 겹침 조절 */
.mini_thumb .token:nth-last-child(n+4),
.mini_thumb .token:nth-last-child(n+4) ~ .token { margin: 0 -20px !important; }

.mini_thumb .token:nth-last-child(n+5),
.mini_thumb .token:nth-last-child(n+5) ~ .token { margin: 0 -30px !important; }

.mini_thumb .token img {
    height: 100%;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.3));
}

/* 말풍선 본체 */
.mini_thumb .token::after {
    content: attr(data-name);
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bubble-bg, #333);
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s;
    z-index: 99999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 말풍선 꼬리 */
.mini_thumb .token::before {
    content: "";
    position: absolute;
    bottom: 98%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: var(--bubble-bg, #333) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s;
    z-index: 99998;
}

.mini_thumb .token:hover::after,
.mini_thumb .token:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ─────────────────────────────────────────
   모바일 (768px 이하)
───────────────────────────────────────── */
@media (max-width: 768px) {

    #bo_gall { padding: 20px 10px; }

    #gall_ul {
        grid-template-columns: 1fr;
        gap: 80px 0;
        justify-items: center;
    }

    /* 썸네일 잘림 방지 - 부모 aspect-ratio에 위임 */
    .gall_img {
        max-width: 100%;
        height: 100%;
        margin: 0;
    }

    .mini_thumb { bottom: -12px; }

    .mini_thumb .token {
        width: auto;
        margin: 0 2px;
    }

    .mini_thumb .token img { max-width: 90px; }

    .mini_thumb .token:nth-last-child(n+4),
    .mini_thumb .token:nth-last-child(n+4) ~ .token { margin: 0 -15px !important; }

    .mini_thumb .token:nth-last-child(n+5),
    .mini_thumb .token:nth-last-child(n+5) ~ .token { margin: 0 -22px !important; }

    .bo_tit { font-size: 16px; }
}