/* Silk Background */
#silk-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Place it on top of the background image */
    opacity: 0.3; /* User requested opacity */
}

#silk-background canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 200ms ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-overlay-form{position:relative;display:flex;align-items:center;justify-content:center;padding:5vh 0;border-radius:0;background:transparent !important;-webkit-backdrop-filter:none;backdrop-filter:none;border:none !important;width:min(92vw, 720px);opacity:0;transform:translateY(8px);transition:opacity 220ms ease 60ms, transform 220ms ease 60ms}
.search-overlay.open .search-overlay-form{opacity:1;transform:translateY(0)}
.overlay-search-field{width:100%;border:none;background:transparent;color:#fff;outline:none;font-size:1.2rem;text-align:center;padding:0.8rem 1rem}
.overlay-search-field::placeholder{color:rgba(255,255,255,0.7);text-align:center}
.overlay-search-field::-webkit-input-placeholder{text-align:center}
.overlay-search-field::-moz-placeholder{text-align:center}
.overlay-search-field:-ms-input-placeholder{text-align:center}
.overlay-search-submit{display:none}
.overlay-search-field::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none }
.overlay-search-field::-ms-clear{ display:none; width:0; height:0 }
.dock-search-field::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none }
.dock-search-field::-ms-clear{ display:none; width:0; height:0 }
/*
Theme Name: Bunny Theme
Theme URI: https://blog.bunnyscloud.com
Author: BunnyBinny
Description: A minimal, gallery-style WordPress theme
Version: 0.7.24
Text Domain: bunny-theme
Domain Path: /languages
*/

:root {
    --anim-delay-fast: 0.1s;
    --anim-delay-medium: 0.2s;
    --anim-delay-stagger-1: 0.8s;
    --anim-delay-stagger-2: 1.0s;
    --anim-delay-stagger-3: 1.2s;
    --bg-reveal-duration: 1.8s;
    --bg-reveal-ease: cubic-bezier(0.22, 0.72, 0.2, 1);
}

/* 전역 폰트 설정 */
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');

/* 배경 이미지 프리로드 */
body {
    background: #000000;
    transition: background-color var(--bg-reveal-duration) var(--bg-reveal-ease),
                background-image var(--bg-reveal-duration) var(--bg-reveal-ease),
                background-position var(--bg-reveal-duration) var(--bg-reveal-ease),
                background-size var(--bg-reveal-duration) var(--bg-reveal-ease);
}



@keyframes backgroundZoomOut {
    0% {
        opacity: 0;
        transform: scale(1.2);
        transform-origin: top center;
        filter: blur(5px) brightness(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        transform-origin: top center;
        filter: blur(5px) brightness(0.9);
    }
}

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #181818;
    color: #ffffff;
    position: relative; /* Positioning context for ::after */
    min-height: 100vh;
    padding-bottom: 0; /* 플로팅 바 위치 원복: 하단 여백 제거 */
    display: flex;
    flex-direction: column;
}

/* 배경 이미지 컨테이너 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* 스크롤해도 고정 */
    filter: blur(14px) brightness(0.72);
    z-index: -3;
}

/* body 클래스가 loaded 되면 애니메이션 시작 */
body.loaded::before {
    opacity: 1;
    transform: translateY(0);
}

/* 비네팅 효과 -> 스크롤 그라데이션 오버레이로 변경 */
body::after {
    content: '';
    position: absolute; /* Use absolute positioning to cover the entire page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    /* Dynamic gradient controlled by JS */
    background: 
        /* Layer 1 (Top): Vignette for the edges, controlled by JS */
        radial-gradient(ellipse at center bottom, transparent 50%, rgba(0, 0, 0, var(--gradient-opacity-edge, 0)) 100%),
        /* Layer 2 (Bottom): Linear gradient for the center/overall effect, controlled by JS */
        linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, var(--gradient-opacity-center, 0)) 100%);
    
    pointer-events: none;
    transition: background 0.3s ease-in-out;
}

/* Random distorted image layer for single posts (lowest layer) */
.single-random-bg-layer {
    position: fixed;
    inset: -12%;
    z-index: -4;
    pointer-events: none;
    opacity: 0;
    background-repeat: no-repeat;
    background-size: 210% 210%;
    background-position: center center;
    transform: scale(1.72) rotate(-7deg) skewX(-9deg) translate3d(0, 0, 0);
    filter: blur(74px) brightness(0.38) saturate(1.2) contrast(0.9);
    transition: opacity 1.9s cubic-bezier(0.22, 0.72, 0.2, 1),
                transform 1.9s cubic-bezier(0.22, 0.72, 0.2, 1),
                filter 1.9s cubic-bezier(0.22, 0.72, 0.2, 1),
                background-size 1.9s cubic-bezier(0.22, 0.72, 0.2, 1);
    will-change: transform, filter, opacity;
}

.single-random-bg-layer.is-visible {
    opacity: 0.82;
    background-size: 150% 150%;
    transform: scale(1.45) rotate(-6deg) skewX(-8deg) translate3d(0, 0, 0);
    filter: blur(56px) brightness(0.42) saturate(1.25) contrast(0.9);
}

.single-random-bg-layer.is-exiting {
    opacity: 0;
    background-size: 150% 150%;
    transform: scale(1.45) rotate(-6deg) skewX(-8deg) translate3d(0, 0, 0);
    filter: blur(56px) brightness(0.42) saturate(1.25) contrast(0.9);
}

/* 배경 이미지가 로드되기 전 기본 배경색 */
/* 시스템 테마 강제 적용 제거 - 배경 이미지가 항상 표시되도록 함 */

/* 게시글 본문 페이지 스타일 */
.site-main {
    width: 100%;
    transition: opacity 0.3s ease-in-out;
    flex-grow: 1;
}

/* Page-specific top padding for main content area */
body.home .site-main,
body.blog .site-main,
body.archive .site-main,
body.category .site-main,
body.tag .site-main,
body.search .site-main {
    padding-top: 32px;
}

body.single-post .site-main {
    padding-top: 120px;
    padding-bottom: 0.4rem;
}

.site-main .single-post {
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* 본문, 헤더 등 너비 제한 */
.post-header,
.post-content,
.post-taxonomy {
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* 좌우 여백 추가 */
    padding-right: 1rem;
    box-sizing: border-box;
}

/* 게시글 본문 요소들의 순차적 표시 */
.single-post .post-title {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out var(--anim-delay-stagger-1),
                transform 0.6s ease-out var(--anim-delay-stagger-1);
}

.single-post .post-date {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out var(--anim-delay-stagger-2),
                transform 0.6s ease-out var(--anim-delay-stagger-2);
}

.single-post .post-meta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out var(--anim-delay-stagger-3),
                transform 0.6s ease-out var(--anim-delay-stagger-3);
}

.single-post .post-categories,
.single-post .post-image-count,
.single-post .post-tags,
.single-post .category-link {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out var(--anim-delay-stagger-3),
                transform 0.6s ease-out var(--anim-delay-stagger-3);
}

body.loaded .single-post .post-title,
body.loaded .single-post .post-date,
body.loaded .single-post .post-meta,
body.loaded .single-post .post-categories,
body.loaded .single-post .post-image-count,
body.loaded .single-post .post-tags,
body.loaded .single-post .category-link {
    opacity: 1;
    transform: translateY(0);
}

.post-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
    border-bottom: none;
}

.single-post .post-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    position: static;
    padding: 0;
    text-shadow: none;
}

.post-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: #ffffff;
    line-height: 1.3;
    display: none; /* 초기에 공간을 차지하지 않도록 숨김 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out 0.8s,    /* 0.8초 후 시작, 1.4초에 완료 */
                transform 0.6s ease-out 0.8s;
}

.post-date {
    display: none; /* 초기에 공간을 차지하지 않도록 숨김 */
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out 1.0s,    /* 1.0초 후 시작, 1.6초에 완료 */
                transform 0.6s ease-out 1.0s;
}

body.loaded .post-title,
body.loaded .post-date {
    opacity: 1;
    transform: translateY(0);
}

.post-date-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out 1.0s,    /* 1.0초 후 시작, 1.6초에 완료 */
                transform 0.6s ease-out 1.0s;
}

.post-date {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.post-date-separator {
    color: rgba(255, 255, 255, 0.8);
}

.post-image-count-inline {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.post-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.post-categories {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.category-link,
.post-image-count,
.post-tags a {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    background: rgba(29, 29, 31, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: 400;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-link:hover,
.post-tags a:hover {
    background: rgba(29, 29, 31, 0.95);
    color: rgba(255, 255, 255, 0.8);
}

.post-tags {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* 단일 페이지 하단 통합 분류(카테고리+태그) */
.post-taxonomy {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem auto 4rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.post-taxonomy.animate {
    opacity: 1;
    transform: translateY(0);
}

/* -- .post-taxonomy a styles refactored -- */

.post-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 4rem;
}

.post-content p {
    margin: 1.5rem 0;
}

/* 본문 이미지 기본 스타일 */
.post-content {
    width: 100%;
    box-sizing: border-box;
}

/* 이미지 컨테이너 */
.post-content p:has(> img) {
    margin: 2.5rem 0;  /* 이미지 간격 */
    text-align: center;  /* 이미지 중앙 정렬 */
}

/* 갤러리와 동일한 라운드 효과를 단일 이미지에도 적용 */
.post-content .wp-block-image img,
.post-content p:has(> img) img {
    border-radius: 12px !important;
}

    /* [진짜 최종 수정] 갤러리 컨테이너의 간격과 여백을 직접 수정 */
    @media (max-width: 767px) {
        .wp-block-gallery.has-nested-images {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            gap: 1rem !important;
        }
    }

/* picture 태그 블록 요소로 변경 */
.post-content picture {
    display: block;
}
/* LQIP 블러 업 */
.post-content img.lqip {
    filter: blur(14px);
}
.post-content img.lqip.is-loaded {
    filter: none;
    background-image: none !important;
}

/* 싱글 본문 로딩 스피너 */
body.single-post .post-content { position: relative; }
body.single-post .post-content { min-height: 40vh; }
body.single-post .post-content .content-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
body.single-post .post-content .content-spinner.hidden { opacity: 0; pointer-events: none; }
body.single-post .post-content .content-spinner::after {
    content: '';
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: rgba(255,255,255,0.9);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 초기 3개 이미지의 지연 로딩 제거 - 즉시 표시를 위해 */
.post-content img:nth-of-type(1),
.post-content iframe:nth-of-type(1),
.post-content img:nth-of-type(2),
.post-content iframe:nth-of-type(2),
.post-content img:nth-of-type(3),
.post-content iframe:nth-of-type(3) {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* --- YouTube 16:9 Aspect Ratio Fix for PC/Tablet --- */
@media (min-width: 768px) {
    /* 1. Create a 16:9 aspect ratio container for video embeds using the standard WP wrapper */
    .post-content .wp-block-embed__wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        width: 100%;
        margin: 2rem auto;
        border-radius: 12px;
    }

    /* 2. Make the iframe inside this wrapper fill it completely */
    .post-content .wp-block-embed__wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        margin: 0;
    }
}

/* 모바일에서 동영상 간격 조정 (기존 규칙 유지) */
@media (max-width: 767px) {
    .post-content .wp-block-embed iframe,
    .post-content iframe {
        margin: 1rem auto; /* 이미지와 동일한 간격 */
        width: 92vw; /* 이미지와 동일한 여백 비율 */
        height: calc(92vw * 9 / 16); /* 16:9 비율 유지 */
        border-radius: 12px;
        display: block;
    }

    /* 모바일에서 개별 이미지 간격 조정 */
    .post-content p:has(> img) {
        margin: 1.5rem 0;
    }
}

/* 갤러리 기본 스타일 */
.wp-block-gallery.has-nested-images {
    display: flex !important;
    flex-direction: column !important;
    margin: 2.5rem 0 !important;
    padding: 0 !important; /* [최종 수정] 자식의 좌우 패딩은 0으로 초기화 */
    width: 100% !important;
    gap: 2rem !important; /* 데스크톱 기본 간격 */
    box-sizing: border-box !important;
}

/* [레이아웃 최종 수정] */
@media (max-width: 767px) {
    /* 부모 컨테이너가 모든 좌우 여백을 1rem으로 담당 */
    body.single-post .post-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* 갤러리 컨테이너는 자신의 여백/패딩은 0, 자식간의 간격(gap)만 1rem으로 설정 */
    body.single-post .post-content .wp-block-gallery.has-nested-images {
        padding: 0 !important;
        margin: 1.5rem 0 !important;
        gap: 1.25rem !important;
    }

    /* 갤러리 안의 개별 이미지 아이템은 자신의 모든 여백/패딩을 0으로 초기화 */
    body.single-post .post-content .wp-block-gallery.has-nested-images .wp-block-image {
        margin: 0 !important;
        padding: 0 !important;
    }
}

.wp-block-gallery.has-nested-images .wp-block-image {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.wp-block-gallery.has-nested-images .wp-block-image img,
.wp-block-gallery.has-nested-images .wp-block-image video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
}

/* PC/태블릿 스타일 (768px 이상) */
@media screen and (min-width: 768px) {
    .wp-block-gallery.has-nested-images {
        padding: 0 !important;
        gap: 2rem !important;  /* PC/태블릿 이미지 간격 */
    }

    /* 가로가 긴 이미지 (3:2) - 전체 너비 */
    .post-content .wp-block-image[data-aspect-ratio="landscape"] {
        width: 100% !important;
    }

    /* 세로가 긴 이미지 (2:3), 정사각형 (1:1), GIF - 2/3 너비 */
    .post-content .wp-block-image[data-aspect-ratio="portrait"],
    .post-content .wp-block-image[data-aspect-ratio="square"] {
        width: 66.666% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.post-content .wp-block-image.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Safari/iOS: make image block a positioning context for absolute download button */
.post-content .wp-block-image {
    position: relative;
}

/* Make embed containers ready for animation */
.post-content .wp-block-embed {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animate embed containers */
.post-content .wp-block-embed.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 본문 이미지 순차 애니메이션 딜레이 */
.post-content .wp-block-image:nth-of-type(1).animate {
    transition-delay: var(--anim-delay-stagger-2);
}
.post-content .wp-block-embed:first-of-type.animate {
    transition-delay: var(--anim-delay-stagger-2);
}
/* 관련 게시글 섹션 스크롤 애니메이션 */
.related-posts.category-posts, .related-posts.similar-posts {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.related-posts.category-posts.animate, .related-posts.similar-posts.animate {
    opacity: 1;
    transform: translateY(0);
}

.related-posts.similar-posts.animate {
    transition-delay: var(--anim-delay-medium);
}

/* 이미지를 포함한 p 태그도 중앙 정렬 */
.post-content p:has(img) {
    text-align: center;
}

/* 관련 게시글 섹션 */
.related-posts-section {
    margin-top: 4rem;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

.related-title {
    font-size: 1.9rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    /* 그리드와 같은 폭으로 중앙에 정렬 */
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .related-title {
        font-size: 1.6rem;
    }
}

.related-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 0.35rem;
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .related-posts-grid {
        margin-bottom: 0.25rem;
    }
}

/* Override main grid styles for items within the related posts grid */
.related-posts-grid .grid-item {
    width: auto;
    padding: 0;
}

.related-post-item {
    width: 100%;
}

.related-post-item .thumbnail-wrapper {
    aspect-ratio: 1;
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.related-post-item .thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-post-item.more-posts .thumbnail-wrapper {
    position: relative;
    background: rgba(29, 29, 31, 0.2);
    overflow: hidden;
}

.related-post-item.more-posts .thumbnail-wrapper:hover {
    background: rgba(29, 29, 31, 0.8);
}

.more-posts-title-2line {
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    margin: 0;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.related-posts-grid .more-posts .title-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.6rem;
    padding: 0.75rem 1rem;
    z-index: 2;
}

/* 더보기 화살표 아이콘 (원형) */
/* 제거: 중앙 화살표 아이콘 */

/* 태블릿 (768px 이상) */
@media screen and (min-width: 768px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PC 1 (1024px 이상) */
@media screen and (min-width: 1024px) {
    .related-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* PC 2 (1600px 이상) */
@media screen and (min-width: 1600px) {
    .related-posts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Homepage Copyright Notice - Final Sticky Footer Implementation */
.homepage-copyright {
    padding: 2rem 1rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* On list/archive views, keep footer hidden until masonry/content animation completes */
body.home .homepage-copyright,
body.blog .homepage-copyright,
body.archive .homepage-copyright,
body.category .homepage-copyright,
body.tag .homepage-copyright,
body.search .homepage-copyright {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.loaded.home .homepage-copyright,
body.loaded.blog .homepage-copyright,
body.loaded.archive .homepage-copyright,
body.loaded.category .homepage-copyright,
body.loaded.tag .homepage-copyright,
body.loaded.search .homepage-copyright,
body.home .homepage-copyright.visible,
body.blog .homepage-copyright.visible,
body.archive .homepage-copyright.visible,
body.category .homepage-copyright.visible,
body.tag .homepage-copyright.visible,
body.search .homepage-copyright.visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) {
    .homepage-copyright {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.85rem; /* Slightly smaller font to help fit */
    }
}

.homepage-copyright p {
    margin: 0;
}

.homepage-copyright a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.homepage-copyright a:hover {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

/* Prevent footer/author flash during AJAX archive transitions */
body.ajax-nav-loading .homepage-copyright,
body.ajax-nav-loading .global-authors {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Lightbox styles */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100002;
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.lightbox-stage img {
    /* All positioning and sizing is now handled by JavaScript. */
    position: absolute; /* Keep absolute for stacking context, but JS will set top/left. */
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: none;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    transition: transform 0.2s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.lightbox-close:hover {
    transform: scale(1.1);
}

.lightbox-counter {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.lightbox-thumbnails {
    position: absolute;
    bottom: 1vh;
    left: 50%;
    transform: translateX(-50%);
    height: 72px;
    max-width: 90vw;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lightbox-thumbnails::-webkit-scrollbar {
    display: none;
}

.lightbox-thumbnail {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.05s ease;
    border: 2px solid transparent;
}

.lightbox-thumbnail:hover {
    opacity: 0.8;
}

.lightbox-thumbnail.active {
    opacity: 1;
    border-color: #fff;
    transform: scale(1.05);
}

/* Lightbox UI Stacking & Style Fixes */
.lightbox-close,
.lightbox-counter {
    z-index: 10; /* Ensure UI is above images */
}

/* Mobile Sizing & Positioning */
@media screen and (max-width: 767px) {
    .lightbox-stage img {
        width: 100vw;
        max-width: 100vw;
        max-height: calc(100vh - 140px); /* 썸네일 영역 제외 */
        top: 46%; /* 중앙보다 더 위로 */
        border-radius: 0;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
        background: none;
        border: none;
    }

    .lightbox-thumbnails {
        height: 54px;
    }

    .lightbox-thumbnail {
        width: 48px;
        height: 48px;
    }

    .lightbox-counter {
        bottom: 8.5vh;
    }
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.theme-version {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Floating search bar */
.floating-search-bar {
    position: fixed;
    left: 50%;
    bottom: 48px; /* PC: 살짝 아래로 */
    transform: translateX(-50%);
    z-index: 100000; /* 헤더 등 상위 레이어보다 위 */
    width: 50vw; /* PC 기본: 뷰포트의 50% */
    max-width: none;
    padding: 0;
    opacity: 0; /* 지연 표시 */
    pointer-events: none;
    transition: opacity 0.35s ease;
}

body.show-search .floating-search-bar { opacity: 1; pointer-events: auto; }

.floating-search-bar .search-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0.48rem 0.8rem 0.48rem 1rem; /* 살짝 얇게 */
    /* 리퀴드 글래스: 배경색 없이, 뒷배경만 블러링 */
    background: transparent;
    border-radius: 36px; /* 더 둥글게 */
    box-sizing: border-box;
    backdrop-filter: blur(20px) saturate(170%) contrast(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(170%) contrast(1.05);
    border: 0; /* 테두리는 별도 레이어에서 */
    box-shadow: 0 14px 36px rgba(0,0,0,0.30); /* 바 자체 입체감 */
    position: relative;
}

/* 글라스모피즘 이중 테두리(유리창 느낌) */
/* 리퀴드 글래스: 왜곡되는 유리 테두리(강한 블러/왜곡) */

.floating-search-bar .search-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 36px;
    padding: 0; /* 두께 복원 */
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); /* 얇은 50% 투명 테두리 */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
}

/* 외곽 글로우 + 추가 왜곡 레이어 */
.floating-search-bar .search-form::after { content: none; }

.floating-search-bar .search-field {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    color: #fff; /* 흰색 텍스트 */
    font-size: 1rem; /* 기본(태블릿) */
    outline: none;
    min-width: 0;
    text-align: center; /* 검색 기본문구와 입력을 중앙 정렬 */
}
.floating-search-bar .search-field::placeholder { color: rgba(255,255,255,0.8); font-weight: 600; }

.floating-search-bar .search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* 버튼은 바와 일체감, 입체감 제거 */
    color: #fff;
    border: 0;
    border-radius: 12px;
    width: 2.6rem;
    height: 2.6rem;
    box-shadow: none;
    cursor: pointer;
}
.floating-search-bar .search-submit svg { display: inline-block; }
/* 헤더 전역 아이콘 의도치 않은 복제를 차단 */
.floating-search-bar .search-submit::before { content: none !important; }

.floating-search-bar .floating-random-btn {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* 버튼은 평면 */
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
}

/* 버튼 아이콘을 흰색으로 강제 */
.floating-search-bar .search-submit svg,
.floating-search-bar .floating-random-btn svg {
    stroke: rgba(255,255,255,0.95) !important;
}

/* 좌/우 배치: 랜덤 왼쪽, 검색 버튼 오른쪽 */
.floating-search-bar .floating-random-btn { order: 0; }
.floating-search-bar .search-field { order: 1; }
.floating-search-bar .search-submit { order: 2; }

@media (max-width: 767px) {
    .floating-search-bar {
        width: calc(100% - 4rem); /* 모바일 좌우 여백 2rem씩 */
        bottom: 42px; /* 모바일: 살짝 위로 */
    }
    .floating-search-bar .search-field { font-size: 0.95rem; } /* 모바일은 조금 작게 */
}

/* 태블릿(768–1023px): 현재값의 250% → min(62.5vw, 1125px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .floating-search-bar { width: 480px !important; max-width: none !important; }
}

/* PC(≥1024px): 현재값의 120% → min(30vw, 540px) */
@media (min-width: 1024px) {
    .floating-search-bar { width: 480px !important; max-width: none !important; }
}

/* 태블릿/모바일은 기존 규칙 유지 (아래 모바일 규칙에서 재정의) */

@media (min-width: 1024px) {
    .floating-search-bar .search-field { font-size: 1rem; } /* PC는 조금 크게 */
    .floating-search-bar .search-field::placeholder { font-weight: 400; }
}

/* 구 검색바 완전 숨김 */
.floating-search-bar { display: none !important; }

/* Floating Dock (central) - Unified Transition-based Animation */
.floating-dock {
    position: fixed;
    left: 50%;
    bottom: 72px;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.25rem 1.4rem;
    border-radius: 26px;
    width: 280px;

    /* Glass base without white gradient tint */
    background-color: rgba(187, 187, 188, 0.18);
    background: rgba(187, 187, 188, 0.18);
    -webkit-backdrop-filter: url(#dock-glass-filter) blur(1px) saturate(220%);
    backdrop-filter: url(#dock-glass-filter) blur(1px) saturate(220%);
    border: none;
    box-shadow:
        inset -0.4px -1px 4px 0 rgba(0, 0, 0, 0.32),
        0 8px 18px -8px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    isolation: isolate;

    /* Initial state for transition */
    opacity: 0;
    transform: translateX(-50%) translateY(40px);

    /* Unified transition for all movements */
    transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s, 
                transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s, 
                width 350ms ease;
}

.floating-dock::before,
.floating-dock::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* Top radial highlight */
.floating-dock::before {
    background: transparent;
    z-index: 0;
}

/* Keep second overlay subtle and neutral */
.floating-dock::after {
    background: transparent;
    opacity: 0;
    z-index: 0;
}

.floating-dock > * {
    position: relative;
    z-index: 1;
}

/* State to animate to on page load */
.floating-dock.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Mobile scroll behavior */
.floating-dock.hide-on-scroll {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition-duration: 0.3s; /* Make hiding faster */
}

/* Override shimmer for expanded state - keep shimmer active */
.floating-dock.expanded{ width:530px; }
.floating-dock .dock-btn {
    width:52px;
    height:52px; /* Make square for perfect circle */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    color:#fff;
    cursor:pointer;
    position:relative;
    transition: transform 0.2s ease, background-color 0.2s ease;
    background: transparent;
    outline: none;
    border-radius: 999px;
    box-shadow: none;
    border: 0 !important;
}

/* Remove hover background circle effect */
.floating-dock .dock-btn:hover {
    background: transparent;
    transform: scale(1.05);
}

/* Active state for menu button - no background */
.floating-dock .dock-btn.active {
    background: transparent;
}
.floating-dock .dock-btn::before{content:none}
.floating-dock .dock-btn svg{stroke:rgba(255,255,255,0.95);transition:transform 0.22s ease, fill 0.22s ease;width:20px;height:20px;display:block;margin:0 auto}
.floating-dock .home-btn svg{width:22px;height:22px}
.floating-dock .floating-random-btn svg{width:19px;height:19px}
/* Random button 4x size adjustment */
.floating-dock .dock-btn:hover svg{transform:scale(1.12)}
.floating-dock .home-btn svg rect{fill:transparent;transition:fill 0.22s ease}
.floating-dock .home-btn:hover svg rect{fill:rgba(255,255,255,0.95)}
/* Tag button hashtag vertical lines position adjustment */
.floating-dock .tags-btn svg{width:24px;height:24px}
.floating-dock .tags-btn svg path{fill:transparent;transition:fill 0.22s ease}
.floating-dock .tags-btn:hover svg path{fill:rgba(255,255,255,0.95)}
.floating-dock .menu-btn .menu-icon-svg .l1,
.floating-dock .menu-btn .menu-icon-svg .l2,
.floating-dock .menu-btn .menu-icon-svg .l3 {
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transform-origin: center;
}
.floating-dock .menu-btn.active .menu-icon-svg .l1{transform: translate(-5px, 5px) rotate(45deg)}
.floating-dock .menu-btn.active .menu-icon-svg .l2{opacity: 0}
.floating-dock .menu-btn.active .menu-icon-svg .l3{transform: translate(-5px, -5px) rotate(-45deg)}
@keyframes spin180{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
/* Random button hover effect standardized */

.floating-dock .dock-search-form{
    width:52px;
    height:52px;
    overflow:hidden;
    border-radius:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    background: transparent;
    transition:width 0.35s ease,padding 0.35s ease, background 0.2s ease;
    box-shadow: none;
    border: 0 !important;
}
.floating-dock:not(.expanded) .dock-search-form{cursor:pointer}
.floating-dock:not(.expanded) .dock-search-submit{cursor:pointer}
.floating-dock:not(.expanded) .dock-search-field{cursor:pointer}
.floating-dock:not(.expanded) .dock-search-form:hover{background: transparent}
.floating-dock.expanded .dock-search-form{background: transparent}
.floating-dock .dock-search-form::before{content:none}
.floating-dock .dock-search-field{width:0;border:none;background:transparent;color:#fff;outline:none;opacity:0;transition:width 0.35s ease,opacity 0.25s ease 0.1s;font-size:1.2rem;text-align:center}
.floating-dock .dock-search-field::placeholder{color:rgba(255,255,255,0.9)}
.floating-dock.expanded .dock-search-form{width:auto;flex:1;padding:0 0.8rem}
.floating-dock.expanded .dock-search-field{padding-left:1.2rem;padding-right:4.0rem; text-align:center; margin:0 auto}
@media (max-width:767px){.floating-dock.expanded .dock-search-form{width:calc(100vw - 4rem)}}
.floating-dock.expanded .dock-search-field{width:100%;opacity:1}
.floating-dock .dock-search-submit{width:34px;height:34px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;}

/* Remove icon shadow/outline for cleaner transparent look */
.floating-dock .dock-btn,
.floating-dock .dock-search-submit {
    filter: none !important;
    background: transparent !important;
}

.floating-dock .dock-search-submit svg{width:20px;height:20px;transition:transform 0.22s ease;transform-origin:center;display:block;margin:0 auto}
.floating-dock .dock-search-form:hover .dock-search-submit svg{transform:scale(1.12)}
.floating-dock .dock-search-submit:hover svg{transform:scale(1.12)}
.floating-dock.expanded .dock-search-submit{position:absolute;right:0.8rem}
.floating-dock:not(.expanded) .dock-search-submit svg{transform:none}

/* Shared Floating Overlay */
.floating-overlay-container {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: flex-start; /* Changed from center */
    padding-top: 20vh; /* Added */
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.floating-overlay-container.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- FIX: Disable expensive blur effect on archive pages to prevent rendering glitches --- */
.archive .floating-overlay-container {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,0.92) !important; /* Use a solid background as a fallback */
}

.floating-overlay-content {
    position: absolute;
    /* transition and transform removed for staggered animation */
}
.floating-overlay-container.open .floating-overlay-content.active {
    opacity: 1;
    visibility: visible;
    /* transform and delay removed */
}
/* 통합 오버레이 구조 */
.menu-content {
    display: flex;
    flex-direction: column;
    gap: 8rem; /* Default for PC/Tablet */
    max-height: 80vh;
    overflow-y: auto;
    padding: 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

@media (max-width: 767px) {
    .floating-overlay-container {
        padding-top: 10vh;
    }
    .menu-content {
        gap: 4rem; /* Mobile-specific gap */
    }
}

.menu-content::-webkit-scrollbar {
    width: 6px;
}

.menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.menu-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}

.menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}

@media (min-width: 768px) {
    .floating-overlay-content.menu-content {
        max-width: 33%;
    }
}

.overlay-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Animation initial state */
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Staggered animation for open state */
.floating-overlay-container.open .overlay-section {
    opacity: 1;
    transform: translateY(0);
}

.floating-overlay-container.open .menu-section {
    transition-delay: var(--anim-delay-fast);
}

.floating-overlay-container.open .tags-section {
    transition-delay: var(--anim-delay-medium);
}

.overlay-section-title {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem; /* Increased font size */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-items-wrapper .menu-items,
.tags-items-wrapper .tags-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.8rem !important;
    align-items: center;
    justify-content: center;
    /* GPU acceleration and rendering isolation */
    transform: translateZ(0);
    will-change: contents;
    contain: layout style;
}

/* PC: 넓은 간격 */
@media (min-width: 768px) {
    .menu-items-wrapper .menu-items,
    .tags-items-wrapper .tags-items {
        gap: 1.5rem !important;
        row-gap: 1.2rem !important;
    }
}

/* Mobile: 적당한 간격 */
@media (max-width: 767px) {
    .menu-items-wrapper .menu-items,
    .tags-items-wrapper .tags-items {
        gap: 0.6rem !important;
        row-gap: 0.8rem !important;
    }
}

.menu-items-wrapper .menu-items a,
.tags-items-wrapper .tags-items a {
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 12px;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.menu-items-wrapper .menu-items a:hover,
.tags-items-wrapper .tags-items a:hover {
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 2px;
    border-radius: 14px;
    padding: 0.35rem 1rem;
}

.tags-items-wrapper .loading,
.tags-items-wrapper .error {
    color:#fff;font-size:1.2rem;text-align:center;padding:2rem
}

/* 싱글 페이지에서도 플로팅 검색바는 항상 보이도록 강제 */
body.single-post .floating-search-bar .search-form {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* 싱글에서 상위 규칙 무력화 */
}

/* 하이퍼링크 스타일 */
a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .post-meta {
        gap: 0.6rem;
    }
}

/* 모바일에서는 도크 확장 금지(가로 길이 고정), 버튼 크기와 간격 조정 */
@media (max-width:767px){
    .floating-dock, .floating-dock.expanded { gap:0.65rem !important; padding:0.26rem 1.3rem !important; }
    .floating-dock { bottom:48px !important; }
    .floating-dock .dock-btn { width:48px !important; height:48px !important; }
    .floating-dock .dock-search-form { width:48px !important; height:48px !important; }
}

/* 다이내믹 배경 그라데이션 기본값과 애니메이션 */
:root{ --bg1:#0a0a0a; --bg2:#1a1a1a; --bg3:#2a2a2a; }

/* 이전 배경 이미지 레이어 제거 */
body::before{ content:none !important; }
@keyframes gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

@media (max-width: 480px) {
    .post-title {
        font-size: 2.0rem;
    }
}

/* 메인 화면 Masonry 레이아웃 (JS 제어 방식으로 변경) */
.masonry-grid {
    max-width: 1152px;
    margin: 0 auto 0.35rem;
    opacity: 0; /* FOUC 방지를 위해 초기에 숨김 */
    transition: opacity 0.3s ease-in-out;
    position: relative; /* FOUC 방지를 위해 자식 요소 absolute 포지셔닝 기준점 설정 */
}

@media screen and (min-width: 1600px) {
    .masonry-grid,
    .related-posts-grid {
        max-width: 1600px;
    }
}

/* Scroll-in Animations */
.homepage-copyright,
.masonry-grid .grid-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.homepage-copyright.visible,
.masonry-grid .grid-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.masonry-grid .grid-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    position: absolute; /* Essential for Masonry.js positioning */
    break-inside: avoid;
    /* 좌우 여백: 0.75rem (12px), 하단 여백: 1.5rem (24px) - Masonry gutter: 0 설정과 함께 사용 */
    padding: 1rem;
    width: 100%; /* 모바일 기본 1열 */
    box-sizing: border-box;
    /* Masonry absolute positioning과 padding이 겹치지 않도록 명시적 설정 */
    margin: 0;
}

@media (max-width: 767px) {
    .masonry-grid .grid-item {
        padding: 0.75rem 1rem;
    }
}

/* --- 3D Tilt Effect Start --- */
@media (min-width: 1024px) {
    .masonry-grid .grid-item {
        perspective: 1000px;
    }
}

.masonry-grid .thumbnail-wrapper {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    transform-style: preserve-3d;
}

.masonry-grid .thumbnail-wrapper img,
.masonry-grid .thumbnail-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.6);
    transition: filter 0.25s ease;
    border-radius: 12px; /* 틸트 효과 모서리 깨짐 버그 수정 */
}

.masonry-grid .thumbnail-wrapper video {
    object-fit: cover;
    background: #000;
}

/* Shine Effect Pseudo-Element */
@media (min-width: 1024px) {
    .masonry-grid .thumbnail-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        background: radial-gradient(
            circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0) 50%,
            transparent 70%
        );
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 3;
    }

    .masonry-grid .thumbnail-wrapper.is-hovered::before {
        opacity: 1;
    }
}
/* --- 3D Tilt Effect End --- */

/* 호버/포커스/클릭 시 밝기 1.0 애니메이션 */
.masonry-grid .grid-item-link:hover .thumbnail-wrapper img,
.masonry-grid .grid-item-link:hover .thumbnail-wrapper video,
.masonry-grid .grid-item-link:focus .thumbnail-wrapper img,
.masonry-grid .grid-item-link:focus .thumbnail-wrapper video,
.masonry-grid .grid-item-link:active .thumbnail-wrapper img,
.masonry-grid .grid-item-link:active .thumbnail-wrapper video {
    filter: brightness(1.0);
}

/* 모바일 탭 하이라이트 제거 */
.masonry-grid .grid-item-link { -webkit-tap-highlight-color: transparent; }

/* 썸네일 어둡게 + 그라데이션 오버레이 (메인 리스트 전용) */
.masonry-grid .thumbnail-wrapper::after { content: none; }

/* ---------------- Related/Category grids: mirror main list UI ---------------- */
.related-posts-grid .thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
    transition: filter 0.25s ease;
}

.related-posts-grid .grid-item-link:hover .thumbnail-wrapper img,
.related-posts-grid .grid-item-link:focus .thumbnail-wrapper img,
.related-posts-grid .grid-item-link:active .thumbnail-wrapper img {
    filter: brightness(0.8);
}

.related-posts-grid .thumbnail-wrapper::after { content: none; }

.related-posts-grid .title-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.6rem;
    padding: 0.75rem 1rem;
    color: #ffffff;
    z-index: 2;
}

.related-posts-grid .title-container .post-subtitle {
    line-height: 1.32;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.2rem;
}
.related-posts-grid .title-container .post-subtitle.style1 { font-size: 1.6rem; font-weight: 500; }
.related-posts-grid .title-container .post-subtitle.style2 { font-size: 1.2rem; font-weight: 400; padding-left: 0.1rem; }

.related-posts-grid .title-container .entry-title {
    font-size: 1.6rem;
    line-height: 1.36;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: normal;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* Date (text only) */
.related-posts-grid .thumbnail-wrapper .entry-date {
    position: absolute;
    bottom: 1.2rem;
    left: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* 더보기 카드 화살표를 날짜 위치에 표시 */
.related-posts-grid .more-posts .more-arrow {
    position: absolute;
    bottom: 1.2rem;
    left: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.6rem; /* 더보기 타이틀과 동일 크기 */
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

/* -- .image-count styles refactored -- */

/* 제목/부제목 컨테이너를 썸네일 내부 하단에 배치 */
.masonry-grid .title-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.6rem; /* 날짜/이미지 칩 여유 */
    padding: 0.75rem 1rem;
    color: #ffffff;
    z-index: 2;
}

.masonry-grid .title-container .post-subtitle {
    line-height: 1.32;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.2rem;
}
/* 부제목 스타일별 크기/굵기 */
.masonry-grid .title-container .post-subtitle.style1 { font-size: 1.6rem; font-weight: 500; }
.masonry-grid .title-container .post-subtitle.style2 { font-size: 1.2rem; font-weight: 400; padding-left: 0.1rem; }

.masonry-grid .title-container .entry-title {
    font-size: 1.6rem;
    line-height: 1.36;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: normal;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 날짜/이미지 개수 뱃지 - 썸네일 안쪽 하단 좌/우 */
/* 날짜: 칩 스타일 삭제, 텍스트만 표시 */
.masonry-grid .thumbnail-wrapper .entry-date {
    position: absolute;
    bottom: 1.2rem;
    left: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* -- .image-count styles refactored -- */



/* 랜덤 버튼 스타일 복구 */
#random-posts-btn.floating-btn {
    display: none !important;
}

#random-posts-btn.floating-btn:hover { display:none !important; }

@media screen and (min-width: 768px) {
    .masonry-grid .grid-item {
        width: 50%;
        /* 태블릿: 좌우 0.75rem, 하단 1.5rem 유지 */
        padding: 0 0.75rem 1.5rem 0.75rem;
    }
}

@media screen and (min-width: 1024px) {
    .masonry-grid .grid-item {
        width: 33.333%;
        /* PC1: 좌우 0.75rem, 하단 1.5rem 유지 */
        padding: 0 0.75rem 1.5rem 0.75rem;
    }
}

@media screen and (min-width: 1600px) {
    .masonry-grid .grid-item {
        width: 25%;
        /* PC2: 좌우 0.75rem, 하단 1.5rem 유지 */
        padding: 0 0.75rem 1.5rem 0.75rem;
    }
}

/* PC 플로팅 바 크기 조정 */
@media (min-width: 1024px) {
    .floating-dock {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
    .floating-dock.expanded {
        width: 600px; /* 확장 너비도 비례하여 조정 */
    }
    .floating-dock .dock-btn,
    .floating-dock .dock-search-form {
        width: 56px;
        height: 56px;
    }
    .floating-dock .dock-btn svg {
        width: 22px;
        height: 22px;
    }
    .floating-dock .home-btn svg {
        width: 24px;
        height: 24px;
    }
    .floating-dock .dock-search-submit svg {
        width: 22px;
        height: 22px;
    }
    .floating-dock .floating-random-btn svg {
        width: 19px;
        height: 19px;
    }
    .floating-dock .tags-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* Twitter Link Section */
.twitter-link-section {
    text-align: center;
    margin-top: 0rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out 0.8s, transform 0.6s ease-out 0.8s;
}

.twitter-link-section.animate {
    opacity: 1;
    transform: translateY(0);
}

.twitter-link-section a {
    display: inline-flex;
    align-items: center;
    gap: 1rem; /* Gap between RT and Like blocks */
    padding: 0.4rem 1rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1); /* Neutral background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    pointer-events: auto; /* Ensure link is clickable */
}

.twitter-link-section a:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.twitter-link-section .rt-count,
.twitter-link-section .like-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem; /* Gap between icon and number */
    font-weight: 400;
}

.twitter-link-section .rt-icon {
    width: 1.2em;
    height: 1.2em;
    fill: #17BF63; /* Green for RT */
}

.twitter-link-section .like-icon {
    width: 1.1em;
    height: 1.1em;
    fill: #E0245E; /* Red for Like */
}

/* -- .image-download-btn styles refactored -- */

/* --- Related Posts Item Count Control --- */

/* Mobile (up to 767px) */
@media screen and (max-width: 767px) {
    /* Category: Show 1 post + 'More' card (total 2 items) */
    .related-posts.category-posts .grid-item:nth-child(n+2):not(.more-posts) {
        display: none;
    }
    /* Similar: Show 2 posts */
    .related-posts.similar-posts .grid-item:nth-child(n+3) {
        display: none;
    }
}

/* Tablet (768px to 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Category: Show 1 post + 'More' card (total 2 items) by hiding posts from the 2nd one onwards, excluding the 'More' card itself. */
    .related-posts.category-posts .grid-item:nth-child(n+2):not(.more-posts) {
        display: none;
    }
    /* Similar: Show 2 posts by hiding from the 3rd item onwards. */
    .related-posts.similar-posts .grid-item:nth-child(n+3) {
        display: none;
    }
}

/* PC1 (1024px to 1599px) */
@media screen and (min-width: 1024px) and (max-width: 1599px) {
    /* Category: Show 2 posts + 'More' card (total 3 items) by hiding posts from the 3rd one onwards, excluding the 'More' card itself. */
    .related-posts.category-posts .grid-item:nth-child(n+3):not(.more-posts) {
        display: none;
    }
    /* Similar: Show 3 posts by hiding from the 4th item onwards. */
    .related-posts.similar-posts .grid-item:nth-child(n+4) {
        display: none;
    }
}

/* PC2 (1600px and up) */
@media screen and (min-width: 1600px) {
    /* Category: Show 3 posts + 'More' card (total 4 items) by hiding posts from the 4th one onwards, excluding the 'More' card itself. */
    .related-posts.category-posts .grid-item:nth-child(n+4):not(.more-posts) {
        display: none;
    }
    /* Similar: Show 4 posts by hiding from the 5th item onwards. */
    .related-posts.similar-posts .grid-item:nth-child(n+5) {
        display: none;
    }
}

/* --- LQIP Lazy Load Styles --- */
.lqip-lazy {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
}

.lqip-loaded {
    filter: blur(0);
}

/* --- Adaptive Text Color for Light Backgrounds --- */



.header-post-title.text-color-loading,



.header-post-date.text-color-loading {



    opacity: 0 !important;



        transition: none !important;



    }



    



    body.single-post.global-text-dark .site-header .header-content .header-post-title,



    



    body.single-post.global-text-dark .site-header .header-content .header-post-date {



    



        color: #333 !important;



    



        text-shadow: none;



    



    }



    



    



    



    body.global-text-dark .related-title {



    



        color: #222;



    



        text-shadow: none;



    



    }



    



    



    



        body.global-text-dark .post-taxonomy a {



    



    



    



    



    



    



    



    



    



    



    



    



    



    



    



            color: #333;



    



    



    



    



    



    



    



    



    



    



    



    



    



    



    



            background: rgba(0, 0, 0, 0.05);



    



    



    



    



    



    



    



    



    



    



    



    



    



    



    



            border-color: rgba(0, 0, 0, 0.15);



    



    



    



    



    



    



    



    



    



    



    



    



    



    



    



        }



    



    



    



    



    



    



    



    /* Recovery Popup Styles */



    



    



    



    #recovery-popup-overlay {



    



    



    



        position: fixed;



    



    



    



        inset: 0;



    



    



    



        background: rgba(0, 0, 0, 0.8);



    



    



    



        display: none; /* Hidden by default, JS will change this */



    



    



    



        align-items: center;



    



    



    



        justify-content: center;



    



    



    



        z-index: 100005; /* High z-index to be on top of everything */



    



    



    



        -webkit-backdrop-filter: blur(8px);



    



    



    



        backdrop-filter: blur(8px);



    



    



    



    }



    



    



    



    



    



    



    



    #recovery-popup-content {



    



    



    



        background: #1e1e1e;



    



    



    



        padding: 2rem 3rem;



    



    



    



        border-radius: 12px;



    



    



    



        position: relative;



    



    



    



        width: 90%;



    



    



    



        max-width: 700px;



    



    



    



        max-height: 80vh;



    



    



    



        overflow-y: auto;



    



    



    



        border: 1px solid rgba(255, 255, 255, 0.1);



    



    



    



        color: #eee;



    



    



    



    }



    



    



    



    



    



    



    



    #recovery-popup-content h2 {



    



    



    



        margin-top: 0;



    



    



    



        color: #fff;



    



    



    



        font-weight: 600;



    



    



    



        border-bottom: 1px solid rgba(255, 255, 255, 0.2);



    



    



    



        padding-bottom: 1rem;



    



    



    



        margin-bottom: 1.5rem;



    



    



    



    }



    



    



    



    



    



    



    



    #recovery-popup-content ol {



    



    



    



        padding-left: 20px;



    



    



    



        line-height: 1.8;



    



    



    



    }



    



    



    



    



    



    



    



    #recovery-popup-content li {



    



    



    



        margin-bottom: 1rem;



    



    



    



        color: #ddd;



    



    



    



    }



    



    



    



    



    



    



    



    .recovery-popup-close {



    



    



    



        position: absolute;



    



    



    



        top: 15px;



    



    



    



        right: 20px;



    



    



    



        background: none;



    



    



    



        border: none;



    



    



    



        color: #aaa;



    



    



    



        font-size: 2.5rem;



    



    



    



        font-weight: 300;



    



    



    



        cursor: pointer;



    



    



    



        line-height: 1;



    



    



    



        transition: color 0.2s ease;



    



    



    



    }



    



    



    



    



    



    



    



    .recovery-popup-close:hover {



    



    



    



        color: #fff;



    



    



    



    }



    



    



    



    



    



    



    



    body.global-text-dark .post-taxonomy a:hover {



    



        color: #000;



    



        background: rgba(0, 0, 0, 0.1);



    



        border-color: rgba(0, 0, 0, 0.3);



    



    }



    



    



    



    body.global-text-dark .twitter-link-section .rt-count,



    



    body.global-text-dark .twitter-link-section .like-count {



    



        color: #333;



    



    }



/* 언어 전환 버튼 (Dock 통합) - 지구본 아이콘 */

.lang-toggle-btn .lang-icon {

    width: 20px;

    height: 20px;

    transition: transform 0.22s ease;

}



.lang-toggle-btn:hover .lang-icon {

    transform: scale(1.12);

}



/* 언어 전환 인터스티셜 */

.lang-switch-interstitial {

    position: fixed;

    inset: 0;

    z-index: 999999;

    background: rgba(0, 0, 0, 0);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

}



.no-posts-message {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 60vh;

    font-size: 1.2rem;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.6);

    text-align: center;

}



/* --- Unified Chip & Tag Styles (Refactored for Performance) --- */



/* 1. Chip Components (Download Button only) */

.image-download-btn {

    /* Box Model & Positioning */

    position: absolute;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

    border-radius: 20px;

    

    /* Appearance (Unified) */

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: none; /* Performance: Blur removed */



/* --- Adaptive Text Color for Light Backgrounds --- */










    
    /* Font (Unified) */
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Media counter text: top-left, text only */
.related-posts-grid .thumbnail-wrapper .image-count,
.masonry-grid .thumbnail-wrapper .image-count {
    position: absolute;
    top: 1.05rem;
    left: 0.6rem;
    z-index: 2;
    padding: 0.32rem 0.66rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.1rem;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Main list category badge: top-right, same UI family as media count */
.masonry-grid .thumbnail-wrapper .post-category-badge,
.related-posts-grid .thumbnail-wrapper .post-category-badge {
    position: absolute;
    top: 1.05rem;
    right: 1rem;
    z-index: 6;
    padding: 0.32rem 0.66rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.1rem;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease, border-color 220ms ease;
}

.masonry-grid .thumbnail-wrapper .post-category-badge:hover,
.related-posts-grid .thumbnail-wrapper .post-category-badge:hover,
.masonry-grid .thumbnail-wrapper .post-category-badge:focus-visible,
.related-posts-grid .thumbnail-wrapper .post-category-badge:focus-visible {
    transform: scale(1.08);
}

/* Positioning & Sizing for Download Button */
.image-download-btn {
    bottom: 12px;
    right: 12px;
    width: 56px;
    height: 30px;
    padding: 0;
    gap: 0;
    border-radius: 20px; /* Match other chips */
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
}

.image-download-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-1px);
}

.image-download-btn:active {
    transform: scale(0.96);
}

/* Mobile override for Download Button */
@media screen and (max-width: 767px) {
    .image-download-btn {
        height: 32px;
        padding: 0 14px;
        bottom: 20px;
        right: 20px;
        gap: 5px;
    }
}

/* Safari/iOS tap reliability: prevent delayed/double-tap interaction */
a,
button,
.grid-item-link,
.floating-dock .dock-btn,
.image-download-btn {
    touch-action: manipulation;
}


/* 2. Keyword Tag Component */
.post-taxonomy a {
    /* Box Model */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    
    /* Appearance */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: none; /* Performance: Blur removed */
    box-shadow: none; /* Performance: Shadow removed */

    /* Font */
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.0rem;
    font-weight: 500;

    /* Other */
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.2s ease;
}

.post-taxonomy a:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

/* Author links between tags and related-posts */
.post-authors {
    max-width: 1152px;
    margin: 0.9rem auto 1.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

.post-authors .author-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    padding: 0.48rem 0.96rem 0.48rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
}

.post-authors .author-chip:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.post-authors .author-chip-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    flex: 0 0 auto;
}

.post-authors .author-chip-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.post-authors .author-chip-id {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.post-authors .author-chip-twitter {
    background: rgba(29, 155, 240, 0.17);
    border-color: rgba(29, 155, 240, 0.38);
    color: #eaf6ff;
}

.post-authors .author-chip-twitter .author-chip-icon {
    background: rgba(29, 155, 240, 0.95);
    color: #ffffff;
}

.post-authors .author-chip-twitter:hover {
    background: rgba(29, 155, 240, 0.25);
    border-color: rgba(29, 155, 240, 0.52);
}

.post-authors .author-chip-youtube {
    background: rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.35);
    color: #ffecec;
}

.post-authors .author-chip-youtube .author-chip-icon {
    background: rgba(255, 0, 0, 0.92);
    color: #ffffff;
}

.post-authors .author-chip-youtube:hover {
    background: rgba(255, 0, 0, 0.23);
    border-color: rgba(255, 0, 0, 0.5);
}

/* Global author icons between content and footer */
.global-authors {
    width: fit-content;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    pointer-events: none;
}

.global-authors.visible,
body.loaded .global-authors {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (min-width: 1024px) {
    .global-authors {
        display: flex;
        position: fixed;
        right: 3.5rem;
        bottom: 3.5rem;
        z-index: 100003;
    }
}

.global-author-icon {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #ffffff;
}

.global-author-icon svg {
    width: 1.48rem;
    height: 1.48rem;
    display: block;
}

.global-author-twitter {
    color: #ffffff;
    background: rgba(29, 155, 240, 0.3);
}

.global-author-youtube {
    color: #ffffff;
    background: rgba(255, 0, 0, 0.3);
}

.global-author-icon:hover {
    transform: translateY(-1px);
    filter: none;
}

.global-author-twitter:hover {
    background: rgba(29, 155, 240, 0.38);
}

.global-author-youtube:hover {
    background: rgba(255, 0, 0, 0.38);
}



/* 404 Page Styles (Content Body & Animations) */
.not-found-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75vh; /* Reduced from 80vh to prevent mobile scroll */
    padding: 0 1rem;
    text-align: center;
}

.not-found-message {
    max-width: 500px;
    width: 100%;
}

/* Staggered Animation Setup */
.not-found-message h1,
.not-found-message p,
.not-found-message a {
    opacity: 0;
    transform: translateY(20px);
}

.not-found-message h1,
.not-found-message p {
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Staggered Animation Execution */
body.loaded.error404 .not-found-message h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s; /* Header(0.2s) + 0.3s */
}

body.loaded.error404 .not-found-message p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s; /* 0.5s + 0.3s */
}

body.loaded.error404 .not-found-message a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s; /* 0.8s + 0.3s */
}

.not-found-message h1 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.not-found-message p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.7);
    margin: 0 auto 3rem;
}

.not-found-message a {
    display: inline-block;
    padding: 0.9rem 2rem;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 1.1rem;
    /* FIX: Combined transitions to prevent override */
    transition: background 0.2s ease, opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Mobile Font Size Adjustment */
@media (max-width: 767px) {
    .not-found-message h1 {
        font-size: 1.8rem;
    }
    .not-found-message p {
        font-size: 1.0rem;
    }
}

/* 404 Page Random Background */
.not-found-background {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
    z-index: -1;
}

.not-found-background::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Enhanced vignette effect */
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.9) 100%);
}