@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

/* 공통 요소 */
.ui-btn { display: inline-flex !important; justify-content: center; align-items: center; height: 35px !important; line-height: normal !important; padding: 0 20px; vertical-align: middle; }
.ui-btn.small { height:26px !important; font-size:11px !important; padding: 0 10px; }

/* 상단 카테고리 및 페이징 */
.ui-mmb-button { text-align: center; padding-top: 10px; margin-bottom: 20px; position: relative; }

/* 카테고리 영역 */
#navi_category { text-align: center; padding: 5px 0 10px 0; }
#navi_category ul { padding: 0; margin: 0; letter-spacing: -1px; }
#navi_category li { display: inline-block; padding: 0 2px; }

/* 버튼 디자인: 작고 귀엽게 */
#navi_category a { 
    display: inline-block; 
    padding: 3px 9px; 
    background: #fff; 
    border: 1px solid #eee; 
    border-radius: 12px; 
    font-size: 11px; 
    color: #888; 
    transition: all 0.2s; 
}
#navi_category a:hover, #navi_category li.on a { 
    background: #fff; 
    border-color: var(--point-color); 
    color: var(--point-color); 
    font-weight: bold; 
}

/* 페이지 번호 */
.ui-paging { margin-bottom: 20px; padding-bottom: 0; text-align: center; }
.ui-paging a, .ui-paging strong { 
    display: inline-block; 
    min-width: 20px; height: 20px; line-height: 20px; 
    padding: 0 !important; 
    background: transparent !important; 
    border-radius: 50%; 
    margin: 0 1px; 
    color: #ccc; 
    text-decoration: none; border: none; vertical-align: middle; 
    font-size: 11px; 
    transition: 0.2s; 
    box-shadow: none !important; 
}
.ui-paging strong { font-weight: bold; border: none; }
.ui-paging a:hover { background: transparent; color: #555; }

/* 갤러리 리스트 레이아웃 */
.gallery-wrapper { 
    display: grid !important; 
    grid-template-columns: repeat(5, 1fr) !important; 
    gap: 10px !important; 
    padding: 10px 0 !important; 
    max-width: 700px !important; 
    margin: 0 auto; 
}

@media (max-width: 600px) {
    .gallery-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
}

.gallery-item { 
    position: relative; 
    border-radius: 20px; 
    overflow: hidden; 
    background: #fff; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    transition: transform 0.3s, box-shadow 0.3s; 
    display: block !important; 
}
.gallery-item:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
}

.item-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; }

/* 썸네일 스타일 */
.thumb-container { 
    position: relative; width: 100%; padding-top: 160%; 
    background-color: #f9f9f9; overflow: hidden; 
}
.thumb-container img { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.5s; 
    border: 1px solid rgba(0,0,0,0.08); 
    box-sizing: border-box; 
}
.gallery-item:hover .thumb-container img { transform: scale(1.05); }

.text-thumb-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 15px; box-sizing: border-box; background-color: #fff !important; color: #444; font-size: 11px; line-height: 1.6; text-align: left; word-break: break-all; overflow: hidden; z-index: 2; }
.text-thumb-box * { max-width: 100% !important; box-sizing: border-box !important; }
.text-thumb-box img, .text-thumb-box video, .text-thumb-box iframe { display: none !important; }
.text-thumb-box p { margin: 0 0 5px 0; }

.cate-badge { position: absolute; top: 10px; right: 10px; color: #fff; padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

.item-overlay { 
    display: flex; flex-direction: column; justify-content: flex-end; 
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.4); 
    padding: 20px; box-sizing: border-box; z-index: 5; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}
.gallery-item:hover .item-overlay { opacity: 1; }

.ov-title { 
    color: #fff; font-size: 14px; font-weight: bold; margin-bottom: 5px; 
    overflow: hidden; text-overflow: ellipsis; white-space: normal; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transform: translateY(10px); transition: transform 0.3s;
}
.ov-date { 
    color: rgba(255,255,255,0.8); font-size: 11px; 
    transform: translateY(10px); transition: transform 0.3s 0.1s; 
}
.gallery-item:hover .ov-title, 
.gallery-item:hover .ov-date { transform: translateY(0); }


/* 하단 버튼 그룹 */
.bottom-control-box {
    max-width: 700px; margin: 20px auto 50px auto; 
    display: flex; justify-content: space-between; /* flex-end에서 변경됨 */
    gap: 5px; padding: 0 5px;
}

.ctrl-btn {
    width: 30px !important; height: 30px !important; 
    border-radius: 5px; 
    background: transparent !important; 
    border: none; 
    color: #ccc !important; 
    display: flex; justify-content: center; align-items: center;
    text-decoration: none; font-size: 14px; transition: 0.2s;
}
.ctrl-btn.write { background: transparent !important; color: #ccc !important; border-color: transparent; } 

.ctrl-btn:hover { 
    background: transparent !important; 
    color: #333 !important; 
    transform: translateY(-2px); 
}
.ctrl-btn.txtggu:hover { background: transparent !important; }
.ctrl-btn.emoticon:hover { background: transparent !important; color: #ff9f43 !important; }


/* -----------------------------------------------------------
   [모달 팝업 스타일]
----------------------------------------------------------- */

.log-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 9000; overflow-y: auto; backdrop-filter: blur(5px); }

.log-modal-content {
    position: relative; width: 90%; max-width: 450px; 
    margin: 60px auto; 
    background: transparent !important; 
    box-shadow: none !important; 
    border-radius: 0 !important;
    overflow: visible !important;
}

/* [1] 폴라로이드 프레임 */
.polaroid-frame {
    background: #fff;
    padding: 18px 18px 45px 18px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.6); 
    margin-bottom: 25px;
    transform: rotate(-1deg); 
    transition: transform 0.3s;
}
.polaroid-frame:hover { transform: rotate(0deg) scale(1.01); z-index: 2; }

.polaroid-frame .pic-data { width: 100% !important; padding: 0 !important; }
.polaroid-frame .swiper { 
    width: 100%; height: 0 !important; padding-bottom: 100% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #eee;
    position: relative;
}
.polaroid-frame .swiper-wrapper { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.polaroid-frame .swiper-slide { 
    width: 100% !important; height: 100% !important; 
    display: flex !important; justify-content: center; align-items: center; 
    overflow: hidden; cursor: zoom-in; 
}
.polaroid-frame .swiper-slide::before {
    content: "크게보기"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0, 0, 0, 0.6); color: #fff; padding: 8px 15px; border-radius: 20px; font-size: 12px; font-weight: bold;
    opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 20; pointer-events: none; backdrop-filter: blur(2px);
}
.polaroid-frame .swiper-slide:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.polaroid-frame .swiper-slide img { 
    width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.2), 0 5px 15px rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.03); position: static !important;
}
.polaroid-frame .swiper-pagination { display: none !important; }

/* 슬라이드 이미지 삐져나옴 방지 — 위 .polaroid-frame .swiper 규칙에 통합됨 */

/* 페이지네이션 도트 (사진 장수 표시) */
.photo-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
}
.photo-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d0d0d0;
    transition: background 0.25s, transform 0.25s;
    cursor: pointer;
    flex-shrink: 0;
}
.photo-dot:hover { background: #aaa; }
.photo-dot.active {
    background: #777;
    transform: scale(1.3);
}

.polaroid-text-area {
    margin-top: 20px; padding: 0 5px; color: #444; text-align: left; font-family: 'Nanum Pen Script', 'Nanum Gothic', sans-serif;
}
.polaroid-title { font-size: 20px !important; font-weight: bold; display: block; line-height: 1.3; margin-bottom: 3px; }
.polaroid-date { font-size: 13px !important; color: #bbb; display: block; margin-bottom: 12px; font-family: sans-serif; }
.polaroid-desc { font-size: 17px !important; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: #555; }

.admin-btns { text-align: right; margin-top: 10px; }
.admin-btns a { font-size: 11px; color: #ccc; text-decoration: none; margin-left: 8px; background: transparent; padding: 0; font-family: sans-serif; }
.admin-btns a:hover { color: #555; text-decoration: underline; }

/* [2] 하단 댓글/버튼 프레임 */
.comment-frame { background: transparent; padding: 0; box-shadow: none; margin-top: 10px; }
.item-comment { 
    position: relative; background: #fff !important; border: none !important; 
    border-radius: 12px !important; padding: 15px !important; margin-bottom: 10px; 
    width: 100% !important; box-sizing: border-box; display: block !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.btn-modal-close {
    position: fixed; top: 30px; right: 30px; background: transparent; border: none; 
    color: rgba(255,255,255,0.8); font-size: 40px; cursor: pointer; z-index: 9999;
    transition: 0.2s; padding: 10px;
}
.btn-modal-close:hover { color: #fff; transform: scale(1.2) rotate(90deg); }

.ui-comment { width: 100% !important; box-sizing: border-box; background: transparent !important; border: none !important; }
.item-comment.item-reply { margin-left: 20px; background: #fdfdfd !important; width: auto !important; }
.co-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.co-header strong { font-size: 12px; color: #333; font-weight: bold; }
.co-footer { text-align: right; margin-top: 5px; }
.co-footer .date { font-size: 10px; color: #bbb; margin-right: 5px; }
.co-footer a.btn-cmt { display: inline-block; font-size: 10px; padding: 2px 6px; background: #f5f5f5; border: 1px solid #eee; border-radius: 10px; color: #888; text-decoration: none; margin-left: 3px; font-weight: normal; transition: 0.2s; }
.co-footer a.btn-cmt:hover { color: #000; } 
.co-content { font-size: 12px; color: #666; line-height: 1.6; margin: 8px 0 5px 0; padding: 0 2px; }

.comment-img-grid { display: grid; gap: 2px; width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid #eee; margin-top: 5px; margin-bottom: 10px; }
.comment-img-grid img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; transition: 0.2s; }
.grid-1 { grid-template-columns: 1fr; aspect-ratio: 16/9; }
.grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; height: 200px !important; }
.grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: 1fr !important; height: 200px !important; } 
.grid-3 img:nth-child(1), .grid-3 img:nth-child(2), .grid-3 img:nth-child(3) { grid-area: auto !important; height: 100% !important; }
.grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; grid-template-rows: 1fr !important; height: 200px !important; aspect-ratio: auto !important; }

.cmt-toolbar { display: flex; gap: 5px; padding: 0 0 5px 5px; background: transparent; border: none; border-radius: 0; }
.btn-cmt-tool { height: 26px; border-radius: 5px !important; padding: 0 10px; background: #eee; border: none; color: #666; font-size: 11px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.btn-cmt-tool:hover { background: #ddd; color: #000; }

.item-comment-form-box { display: none; margin-top: 15px; padding: 0; }
.input-comment textarea { width: 100% !important; height: 60px; border: none; background: #fff; border-radius: 10px !important; padding: 15px; box-sizing: border-box; resize: none; font-size: 12px; outline: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.input-comment textarea:focus { background: #fff; }
.btn_confirm .ui-comment-submit { color: #fff; border: none; padding: 0 25px; height: 32px; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
/* 댓글 쓰기 버튼 숨김 */
.btn-cmt-toggle { display: none !important; }
.comment-frame { display: none !important; }

/* 하트 버튼 — polaroid-frame 오른쪽 하단 절대 위치 */
.heart-area { display: none; } /* 이전 래퍼 혹시 남아있으면 숨김 */

.polaroid-frame { position: relative; }

.heart-btn {
    position: absolute;
    bottom: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 2;
}
.heart-btn:hover .heart-icon { opacity: 0.7; }
.heart-btn .heart-icon {
    font-size: 20px;
    color: #a8c8e8;
    transition: transform .18s, color .18s, opacity .18s;
    display: inline-block;
}
.heart-btn.hearted .heart-icon {
    color: #85b8d8;
    transform: scale(1.2);
}
.heart-btn .heart-count {
    font-size: 12px;
    color: #bbb;
    font-weight: normal;
    min-width: 10px;
}

.btn-next-post-bottom { display: block; width: 100%; padding: 10px 0; margin: 10px 0 10px 0; background: transparent; color: #999; font-size: 12px; font-weight: bold; border: none; cursor: pointer; transition: 0.2s; box-shadow: none; }
.btn-next-post-bottom:hover { color: #fff; text-decoration: underline; background: transparent; }

/* 라이트박스 */
/* =========================================================
   [복구] 이미지 크게보기(라이트박스) 시스템
   ========================================================= */
#img-lightbox { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.9) !important; /* 배경 투명도 살짝 조절 */
    z-index: 100000 !important; /* 최상단으로 올림 */
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
}

/* 라이트박스 내 스와이퍼 설정 */
#img-lightbox .lightbox-swiper { 
    width: 100% !important; 
    height: 100% !important; 
    position: relative !important; 
}

#img-lightbox .swiper-slide { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    background: transparent !important;
}

/* [핵심] 이미지 가시성 확보 */
#img-lightbox img { 
    max-width: 95vw !important; 
    max-height: 95vh !important; 
    width: auto !important; 
    height: auto !important; 
    object-fit: contain !important; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
    border: none !important;
    display: block !important; /* 이미지가 강제로 숨겨지는 것 방지 */
}

/* 닫기 버튼 */
/* style.css 내 닫기 버튼 부분 수정 */
#img-lightbox .close-btn { 
    position: absolute; 
    /* 기존의 top, right 25px 설정을 제거하거나 아래처럼 유지 */
    top: 25px; 
    right: 25px; 
    color: #fff; 
    font-size: 40px; 
    cursor: pointer; 
    z-index: 100001; 
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: transform 0.2s;
    /* 스크립트 계산이 적용될 때 부드럽게 움직이도록 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
}
#img-lightbox .close-btn:hover { transform: scale(1.1); color: #ccc; }


@media all and (max-width: 1024px) {
    .gallery-wrapper { grid-template-columns: repeat(3, 1fr) !important; padding: 0 10px !important; max-width: 100% !important; }
    .bottom-control-box { padding: 0 20px; } 
    .log-modal-content { width: 95%; margin: 60px auto; padding: 0 !important; }
    .btn-modal-close { top: 20px; right: 20px; font-size: 30px; } 
}

/* [수정됨] 직관적인 좌우 카드 슬라이드 애니메이션 */

/* 1. 다음글 (Next, > 버튼) */
/* 현재 글: 왼쪽으로 밀려남 */
@keyframes slideOutToLeft {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.9); opacity: 0; }
}
/* 새 글: 오른쪽에서 들어옴 */
@keyframes slideInFromRight {
    0% { transform: translateX(50%) scale(0.9); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* 2. 이전글 (Prev, < 버튼) */
/* 현재 글: 오른쪽으로 밀려남 */
@keyframes slideOutToRight {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    100% { transform: translateX(50%) scale(0.9); opacity: 0; }
}
/* 새 글: 왼쪽에서 들어옴 */
@keyframes slideInFromLeft {
    0% { transform: translateX(-50%) scale(0.9); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* =========================================================
   [최종 수정] 배경 중첩 및 깜빡임 방지 애니메이션
   ========================================================= */

/* 애니메이션 진행 중 혹은 투명 배경 모드일 때 모든 배경/블러 제거 */
.anim-next-out, .anim-next-in, .anim-prev-out, .anim-prev-in, .transparent-bg {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* =========================================================
   [입체적 카드 슬라이드 애니메이션]
   ========================================================= */

/* 1. 다음글 (Next) 애니메이션: 카드가 뒤로 물러나며 왼쪽으로 휘어짐 */
@keyframes cubeOutLeft {
    0% { transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; }
    50% { transform: translateX(-30%) scale(0.8) rotateY(-10deg); opacity: 0.5; }
    100% { transform: translateX(-100%) scale(0.5) rotateY(-45deg); opacity: 0; }
}
@keyframes cubeInRight {
    0% { transform: translateX(100%) scale(0.5) rotateY(45deg); opacity: 0; }
    50% { transform: translateX(30%) scale(0.8) rotateY(10deg); opacity: 0.5; }
    100% { transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; }
}

/* 2. 이전글 (Prev) 애니메이션: 카드가 뒤로 물러나며 오른쪽으로 휘어짐 */
@keyframes cubeOutRight {
    0% { transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; }
    50% { transform: translateX(30%) scale(0.8) rotateY(10deg); opacity: 0.5; }
    100% { transform: translateX(100%) scale(0.5) rotateY(45deg); opacity: 0; }
}
@keyframes cubeInLeft {
    0% { transform: translateX(-100%) scale(0.5) rotateY(-45deg); opacity: 0; }
    50% { transform: translateX(-30%) scale(0.8) rotateY(-10deg); opacity: 0.5; }
    100% { transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; }
}

/* 다음 글로 갈 때 (오른쪽 클릭) */
.anim-next-out .log-modal-content { 
    animation: cubeOutLeft 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards !important; 
}
.anim-next-in .log-modal-content { 
    animation: cubeInRight 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards !important; 
}

/* 이전 글로 갈 때 (왼쪽 클릭) */
.anim-prev-out .log-modal-content { 
    animation: cubeOutRight 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards !important; 
}
.anim-prev-in .log-modal-content { 
    animation: cubeInLeft 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards !important; 
}

/* 원근감 부여를 위한 오버레이 설정 */
.log-modal-overlay {
    perspective: 1500px;
    backface-visibility: hidden;
}

/* 게시글 모달 및 라이트박스의 X 버튼 제거 */
.log-modal-content .close-modal,
#img-lightbox .close-btn {
    display: none !important;
}

/* 라이트박스 배경 커서 설정 */
#img-lightbox {
    cursor: pointer; /* 배경을 누르면 닫힌다는 느낌을 줌 */
}

#img-lightbox img {
    cursor: default; /* 이미지는 클릭해도 반응 없음을 표시 */
}

/* [추가] 게시글 모달 배경 커서 설정 */
.log-modal-overlay {
    cursor: pointer; /* 배경에 마우스를 올리면 손가락 모양으로 변경 */
}

/* [중요] 모달 내부 콘텐츠 위에서는 커서가 기본으로 돌아오게 설정 */
.log-modal-content {
    cursor: default; /* 실제 글 내용 부분에서는 일반 화살표 커서 유지 */
}

/* 버튼이나 링크 위에서는 다시 손가락 모양 유지 (기본값) */
.log-modal-content a, 
.log-modal-content button, 
.log-modal-content .ctrl-btn {
    cursor: pointer;
}

/* [최종 수정] 잔상 제거를 위해 종료 위치를 더 멀리 밀어낸 애니메이션 */
@keyframes glossy-shine {
    0% { 
        left: -200%; /* 시작 위치를 더 왼쪽으로 */
        opacity: 0; 
    }
    10% { opacity: 1; } /* 나타나기 시작 */
    90% { opacity: 1; } /* 사라지기 시작 */
    100% { 
        left: 200%; /* [핵심] 종료 위치를 150%에서 200%로 늘려 잔상 방지 */
        opacity: 0; /* 완전히 사라짐 */
    }
}

.polaroid-frame .swiper {
    position: relative;
    overflow: hidden !important;
    border-radius: 4px !important;
}

.polaroid-frame .swiper::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -200%; /* 평상시 대기 위치 */
    width: 80%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(-45deg); 
    z-index: 15;
    pointer-events: none;
    opacity: 0; /* [중요] 평소에는 보이지 않게 설정 */
}

/* 호버 시 애니메이션 실행 */
.polaroid-frame:hover .swiper::after {
    animation: glossy-shine 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- 모달 오픈 애니메이션 추가 --- */

/* 1. 배경 서서히 어두워지는 효과 */
@keyframes fadeInBg {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 2. 콘텐츠가 아래에서 위로 올라오는 효과 */
@keyframes slideUpContent {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 애니메이션 적용 클래스 */
#modal-fixed-bg.animate-fade {
    animation: fadeInBg 0.4s ease-out forwards;
}

.log-modal-content.animate-up {
    animation: slideUpContent 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 게시글 배경 투명화: 고정 배경(modal-fixed-bg)만 보이게 하여 중첩 방지 */
.log-modal-overlay.transparent-bg {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* --- 모달 닫기 애니메이션 추가 --- */

/* 1. 배경이 다시 투명해지는 효과 */
@keyframes fadeOutBg {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* 2. 콘텐츠가 아래로 내려가며 사라지는 효과 */
@keyframes slideDownContent {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(50px); opacity: 0; }
}

/* 닫기 애니메이션 적용 클래스 */
#modal-fixed-bg.animate-fade-out {
    animation: fadeOutBg 0.3s ease-in forwards;
}

.log-modal-content.animate-down {
    animation: slideDownContent 0.3s ease-in forwards;
}

/* =========================================================
   [추가] 하단 심플 검색창 디자인 (투명 배경/반투명 입력창)
   ========================================================= */

/* 검색창 박스 & 폼: 배경 완전 투명 */
.sch_simple_box,
.sch_simple_box form {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    gap: 5px; /* 입력창과 돋보기 사이 간격 */
}

/* 입력창: 반투명 흰색 배경 + 둥근 모서리 */
.sch_input {
    border: 1px solid rgba(0,0,0,0.08);   /* 아주 연한 테두리 */
    background: rgba(255, 255, 255, 0.5); /* 반투명 흰색 */
    height: 30px; 
    width: 110px; 
    font-size: 12px;
    color: #555;
    outline: none;
    border-radius: 15px; /* 둥글게 */
    padding: 0 12px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    backdrop-filter: blur(2px); /* 살짝 블러 효과 (선택사항) */
}

/* 입력창 호버/포커스 시 조금 더 진하게 */
.sch_input:hover, .sch_input:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0,0,0,0.2);
    width: 140px; /* 입력 시 살짝 길어짐 */
}
.sch_input::placeholder { color: #bbb; }

/* 검색 버튼: 아이콘만 보임 (관리버튼과 동일 스타일) */
.sch_btn {
    width: 30px; height: 30px;
    background: transparent !important; /* 배경 투명 */
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #ccc; /* 기본 연한 회색 */
    display: flex; justify-content: center; align-items: center;
    font-size: 13px;
    transition: 0.2s;
}

/* 검색 버튼 호버 시 */
.sch_btn:hover {
    color: #555; /* 진한 회색 */
    transform: translateY(-2px);
}