/* =========================================
   1. 폰트 정의 (SUIT) - 최적화: 사용하는 weight만
   ========================================= */
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

@font-face { font-family: 'SchoolSafetyWave'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimMulgyeolR.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'OngleipKonkon'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2412-1@1.0/Ownglyph_corncorn-Rg.woff2') format('woff2'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'NostalgicDesertYeonwoo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-2@1.0/Griun_YEONWOO-Rg.woff2') format('woff2'); font-weight: normal; font-display: swap; }

/* =========================================
   2. 디자인 토큰
   ========================================= */
:root {
    /* 겨울 밤의 따뜻한 빛 팔레트 */
    --c-text-main: #f5f0e6;      /* 아이보리 */
    --c-text-sub: rgba(245, 240, 230, 0.8);
    --c-accent: #d4a574;          /* 앰버/황금 - 램프 불빛 */
    --c-accent-soft: rgba(212, 165, 116, 0.15);
    --c-silver: #b8c5d6;          /* 차가운 은색 - 눈/서리 */
    --c-warm: #8b6b4a;            /* 따뜻한 갈색 */
    /* Lord of Heroes 속성 색상 */
    --c-dark: #9B6DD1;   /* 어둠 - 보라 */
    --c-earth: #3CB371;  /* 대지 - 초록 */
    --c-light: #DAA520;  /* 빛 - 금색 */
    --c-fire: #E74C3C;   /* 불 - 빨강 */
    --c-water: #3498DB;  /* 물 - 파랑 */
    --c-warn: #ff8a80;
    --bg-glass: rgba(26, 31, 46, 0.8);
    --border-glass: rgba(245, 240, 230, 0.12);

    /* Fonts Hierarchy */
    --f-deco: 'SchoolSafetyWave', serif;       /* 타이틀 */
    --f-serif: 'Nanum Myeongjo', serif;        /* ★★★ 본문, 감성 (중요) ★★★ */
    --f-sans: 'Suit', sans-serif;              /* 시스템 UI (기본) */
    --f-hand: 'OngleipKonkon', cursive;        /* 손글씨 */
    
    /* Z-Index */
    --z-snow: 0;
    --z-content: 1;
    --z-header: 10;
    --z-modal: 9999;
}

/* =========================================
   3. 기본 및 레이아웃
   ========================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; }
input, textarea, button, select, div, span, li, a, p, h1, h2, h3, h4, h5, h6, ul, ol, table, td, th, label, section, article, header, footer, nav { font-family: var(--f-sans); }
/* Font Awesome 아이콘 폰트 보호 */
i.fa-solid, i.fa-regular, i.fa-brands, i.fas, i.far, i.fab { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; }
input, textarea { -webkit-user-select: text; user-select: text; }
a { text-decoration: none !important; color: inherit; outline: none; border: none; cursor: pointer; }
a:hover, a:active, a:visited { text-decoration: none !important; border: none; outline: none; }

body {
    font-family: var(--f-sans);
    color: var(--c-text-main);
    line-height: 1.6;
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.85), rgba(20, 25, 40, 0.9)),
                url('https://images.unsplash.com/photo-1514969655361-1dbc3731d4cc?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center fixed;
    background-size: cover;
    background-color: #0f172a;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-top: 76px; /* 상단 바 높이 */
}
body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
    background: inherit; filter: blur(2px); transform: scale(1.02);
}
body.page-fade-in { opacity: 0; transition: opacity 0.15s ease-out; }
body.page-fade-in.ready { opacity: 1; }

#snow-canvas { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-snow); will-change: transform; }

.header-wrapper { width: 100%; max-width: 1200px; padding: 40px 20px 0; z-index: var(--z-header); position: relative; display: flex; flex-direction: column; align-items: center; }

.layout-wrapper {
    position: relative;
    z-index: var(--z-content);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 80px;
    flex-wrap: nowrap;
}

.container { flex: 1; min-width: 0; max-width: 600px; }

/* 참고용.html과 동일: 기본은 플로우, 데스크탑 1200px에서 fixed */
.sidebar {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
    font-family: var(--f-sans) !important;
}

/* =========================================
   4. 헤더 / 네비게이션 / 위젯
   ========================================= */
header { text-align: center; margin-bottom: 45px; width: 100%; }
header h1 { 
    font-family: var(--f-deco) !important; 
    font-size: 2.6rem; 
    letter-spacing: 3px; 
    text-shadow: 0 0 30px rgba(212, 165, 116, 0.4); 
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
body.main-page header h1 {
    color: #ffffff !important;
    text-shadow: none;
}
.header-alert-icons {
    position: absolute;
    left: 20px;
    top: 65px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 100;
}
.title-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    cursor: help;
    transition: all 0.2s ease;
}
.title-icon:hover,
.title-icon.touched {
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.25);
}
.title-icon .tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.7rem;
    font-family: var(--f-sans);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}
.title-icon:hover .tooltip,
.title-icon.touched .tooltip {
    opacity: 1;
    visibility: visible;
}
header p { font-size: 0.75rem; color: var(--c-text-sub); letter-spacing: 9px; text-transform: uppercase; margin-top: 8px; font-family: var(--f-sans) !important; }

nav#main-nav {
    display: flex; justify-content: center; gap: 60px; padding: 15px 0 12px 0; margin-bottom: 50px; width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-glass);
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    flex-wrap: wrap; 
}
nav#main-nav a { font-family: var(--f-sans) !important; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: 0.3s; white-space: nowrap; }
nav#main-nav a:hover, nav#main-nav a.active { color: #fff; text-shadow: 0 0 10px #fff; }



/* =========================================
   5. 섹션 공통 요소
   ========================================= */
.section { display: none; animation: fadeIn 0.6s ease-out forwards; width: 100%; }
.section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* [수정] ART 섹션 레이아웃: 그림 잘림 방지 (width: 100%, height: auto) */
.img-layer-container { 
    position: relative; display: block; 
    width: 100%; /* 너비 꽉 채움 */
    height: auto; /* 높이 자동 */
    margin: 0 auto; border-radius: 14px; overflow: hidden; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.4); border: 1px solid var(--border-glass); 
    cursor: pointer; transition: 0.4s ease; line-height: 0; 
}
.layer-image { 
    display: block; 
    width: 100%; /* 부모 너비에 맞춤 */
    height: auto; /* 비율 유지 */
    transition: 0.6s ease; object-fit: cover; 
}
.img-layer-container:hover .layer-image { transform: scale(1.03); }
.image-copyright { position: absolute; bottom: 10px; left: 15px; right: auto; font-size: 0.6rem; color: rgba(255, 255, 255, 0.7); pointer-events: none; font-family: var(--f-sans) !important; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.mouse-guide { 
    position: absolute; 
    z-index: 10; 
    pointer-events: none; 
    animation: guideClickMove 3.5s infinite ease-in-out;
    right: 15%;
    bottom: 15%;
    width: 32px;
    height: 32px;
}
.mouse-guide img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
@keyframes guideClickMove { 
    0% { opacity: 0; transform: translate(0, 0); } 
    15% { opacity: 1; transform: translate(0, 0); } 
    60% { opacity: 1; transform: translate(-80px, -60px); } 
    75% { opacity: 1; transform: translate(-80px, -60px) scale(0.85); }
    85% { opacity: 1; transform: translate(-80px, -60px) scale(1); }
    100% { opacity: 0; transform: translate(-80px, -60px); } 
}

/* 상태 정보 뱃지 라인 - 모바일 전용 */
.status-badge-row {
    display: none; /* 데스크탑에서 숨김 */
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 25px;
    padding: 12px 20px;
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}
.status-badge .badge-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-badge .badge-value {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 700;
}
.status-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.2);
}

.home-caption { color: #fff; font-size: 1rem; margin-top: 35px; font-style: italic; font-family: var(--f-serif) !important; opacity: 0.9; letter-spacing: 1px; }
.m-br { display: none; }

/* [사이드바 - 배너 + 라벨 스타일] */
.sidebar-title {
    font-family: var(--f-deco) !important;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 4px;
}

/* [좌측 공식 링크 위젯] */
.official-links-widget {
    display: none; /* 기본적으로 숨김, 데스크탑에서만 표시 */
}
.official-links-header {
    display: none;
}
.official-links-footer {
    display: none;
}
.official-links-title {
    font-family: var(--f-deco) !important;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 3px;
}
.official-links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.official-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}
.official-link-item.youtube-link {
    padding: 0;
    background: transparent;
    border: none;
    overflow: hidden;
    border-radius: 8px;
}
.youtube-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
}
.youtube-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.youtube-link:hover .youtube-thumbnail img {
    transform: scale(1.05);
}
.youtube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
    pointer-events: none;
}
.youtube-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    z-index: 2;
}
.youtube-content i {
    font-size: 1.2rem;
    color: #ff0000;
    flex-shrink: 0;
}
.youtube-content .official-link-text {
    flex: 1;
}
.youtube-content .official-link-title {
    color: #fff;
    font-size: 0.75rem;
}
.youtube-content .official-link-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
}
.official-link-item:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(3px);
}
.youtube-link:hover {
    transform: translateX(3px);
}
.official-link-item.blog-link {
    padding: 0;
    background: transparent;
    border: none;
    overflow: hidden;
    border-radius: 8px;
}
.blog-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
}
.blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.blog-link:hover .blog-thumbnail img {
    transform: scale(1.05);
}
.blog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
    pointer-events: none;
}
.blog-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    z-index: 2;
}
.blog-content i {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}
.blog-content .official-link-text {
    flex: 1;
}
.blog-content .official-link-title {
    color: #fff;
    font-size: 0.75rem;
}
.blog-content .official-link-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
}
.blog-link:hover {
    transform: translateX(3px);
}
.official-link-item i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.official-link-item:hover i {
    color: rgba(255, 255, 255, 0.9);
}
.official-link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.official-link-title {
    font-family: var(--f-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}
.official-link-item:hover .official-link-title {
    color: #fff;
}
.official-link-subtitle {
    font-family: var(--f-sans);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.2;
}
.official-link-item:hover .official-link-subtitle {
    color: rgba(255, 255, 255, 0.6);
}

.neighbors-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.neighbor-item {
    display: block;
    text-decoration: none;
}

.neighbor-item .banner-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    transition: all 0.25s ease;
}
.neighbor-item:hover .banner-wrap {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.2);
}

.neighbor-item .banner-wrap img {
    display: block;
    width: 100%;
    height: 40px;
    object-fit: cover;
    filter: brightness(0.85) saturate(0.9);
    transition: all 0.25s;
}
.neighbor-item:hover .banner-wrap img {
    filter: brightness(1) saturate(1.1);
}

.neighbor-item .item-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 2px;
}
.neighbor-item .item-name {
    font-family: var(--f-hand);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    transition: color 0.25s;
}
.neighbor-item:hover .item-name {
    color: #fff;
}
.neighbor-item .item-action {
    font-family: var(--f-hand);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    transition: color 0.25s;
}
.neighbor-item:hover .item-action {
    color: var(--c-accent);
}

/* 빈 슬롯 */
.neighbor-item.empty {
    cursor: default;
}
.neighbor-item.empty .banner-wrap {
    height: 40px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.neighbor-item.empty:hover .banner-wrap {
    transform: none;
    box-shadow: none;
}
.neighbor-item.empty .item-name {
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}
.neighbor-item.empty .item-action {
    display: none;
}

/* [모달 & 푸터] */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.modal-overlay.active { display: flex; opacity: 1; pointer-events: auto; }
.modal-content { background: var(--bg-glass); border: 1px solid rgba(255, 255, 255, 0.2); width: 92%; max-width: 500px; border-radius: 25px; padding: 40px 35px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.modal-close { position: absolute; top: 20px; right: 20px; font-size: 1.5rem; color: rgba(255,255,255,0.5); cursor: pointer; transition: 0.3s; }
.modal-close:hover { color: #fff; }
/* 유튜브 모달 */
.youtube-modal-content {
    max-width: 900px;
    width: 90%;
    padding: 20px;
}
.youtube-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    overflow: hidden;
}
.youtube-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* [명조] 모달 타이틀 & 본문 */
.modal-title { font-family: var(--f-serif) !important; font-size: 1.6rem; letter-spacing: 3px; color: #fff; font-weight: 800; text-align: center; width: 100%; }
.modal-body { overflow-y: auto; font-family: var(--f-serif) !important; font-size: 0.98rem; line-height: 1.7; text-align: left; padding-right: 10px; max-height: 70vh; }
.modal-body p { margin-bottom: 15px; }

footer { margin-top: 40px; text-align: center; padding-bottom: 60px; font-size: 0.72rem; opacity: 0.6; font-family: var(--f-sans) !important; }
.shortcut-links { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 0 auto 25px; flex-wrap: wrap; }
.footer-icon-wrapper { width: 46px; height: 46px; background: rgba(0, 0, 0, 0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s ease; }
.footer-icon-wrapper:hover { background: rgba(0, 0, 0, 0.85); transform: translateY(-3px); }
.shortcut-img { width: 1.3rem; height: 1.3rem; object-fit: contain; }

/* [태블릿/중간 화면 - LP 플레이어 레이아웃] */
@media (min-width: 768px) {
    .layout-wrapper {
        max-width: 1200px;
        gap: 40px;
    }
    .container {
        max-width: 1000px;
    }
    .sidebar {
        width: 180px;
        flex-shrink: 0;
    }
}

/* [데스크탑 화면일 때만 적용] */
@media (min-width: 1200px) {

    /* 1. 좌측 위젯: 마진 더 확장하여 본문 공간 최대한 확보 */
    .official-links-widget {
        display: block !important; /* 강제로 보이게 함 */
        position: fixed !important; /* neighbors(sidebar)와 동일하게 fixed - 명시적으로 강제 */
        width: 240px; /* 265px에서 25px 줄임 */
        left: 15px !important; /* 마진 더 확장: 30px → 15px로 줄여서 본문 공간 더 확보 */
        top: 50% !important; /* neighbors와 동일한 수직 좌표 - 명시적으로 강제 */
        transform: translateY(-50%) !important; /* neighbors와 동일한 중앙 정렬 - 명시적으로 강제 */
        max-height: 70vh; /* neighbors와 동일한 최대 높이 제한 */
        overflow-y: auto; /* 스크롤 가능하도록 */
        overflow-x: hidden; /* 가로 스크롤 방지 */
        z-index: 100;
        /* neighbors와 동일한 안정성을 위한 추가 속성 */
        will-change: auto;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }


    /* 2. 본문 껍데기: 좌측 배너를 피해서 중앙 정렬 (본문 폭은 원래대로 유지) */
    .layout-wrapper {
        max-width: 1000px; /* 원래 폭으로 되돌림 */
        margin-left: 280px; /* 좌측 배너 공간 확보 (15px + 265px) - 위젯을 피하기 위한 마진 */
        margin-right: 215px; /* 우측 배너 공간 확보 (200px + 15px) - 사이드바를 피하기 위한 마진 */
        padding-left: 20px; /* 기존 패딩 유지 */
        padding-right: 20px;
    }

    /* 3. 헤더: 좌측 배너를 피해서 중앙 정렬 (본문 폭은 원래대로 유지) */
    .header-wrapper {
        max-width: 1000px; /* 원래 폭으로 되돌림 */
        margin-left: 280px; /* 좌측 배너 공간 확보 (15px + 265px) - 위젯을 피하기 위한 마진 */
        margin-right: 215px; /* 우측 배너 공간 확보 (200px + 15px) - 사이드바를 피하기 위한 마진 */
    }
    
    /* 4. 메뉴 바: 좌우로 30px씩 확장 (헤더 영역 내에서 확장) */
    nav#main-nav {
        margin-left: -30px; /* 좌측으로 30px 확장 */
        margin-right: -30px; /* 우측으로 30px 확장 */
        padding-left: 30px; /* 좌측 패딩으로 내부 여백 유지 */
        padding-right: 30px; /* 우측 패딩으로 내부 여백 유지 */
    }
    
    /* 5. Alert 아이콘: 타이틀의 좌측에 위치, 제일 오른쪽 아이콘이 타이틀 첫 글자와 30px 갭, 메뉴 바 상단에서 30px 위 */
    .header-alert-icons {
        /* 타이틀의 첫 글자 위치 계산 */
        /* header-wrapper: margin-left 340px, max-width calc(100% - 600px) */
        /* 타이틀은 중앙 정렬이므로: header-wrapper 중앙 - 타이틀 너비/2 */
        /* 타이틀 대략 너비: 400px 정도, 따라서 첫 글자 위치: 50% - 200px */
        left: calc(50% - 200px - 30px); /* 화면 중앙에서 타이틀 첫 글자 위치를 빼고, alert 오른쪽 끝과의 30px 갭을 뺌 */
        /* 메뉴 바 상단 위치 계산: 상단바(76) + header-wrapper padding-top(40) + header 높이(대략 40px: h1 30px + p 10px) + header margin-bottom(45) = 201px */
        /* 메뉴 바 상단에서 30px 위 = 201px - 30px = 171px */
        /* 방금 올라간 높이(20px)의 2배(40px) 더 올림 = 171px - 40px = 131px */
        top: calc(76px + 40px + 40px + 45px - 30px - 40px); /* 메뉴 바 상단에서 30px 위, 추가로 40px 더 올림 */
        transform: translateX(-100%); /* alert 아이콘들을 오른쪽 끝 기준으로 배치하여 제일 오른쪽 아이콘이 지정된 위치에 오도록 */
    }
    
    /* 우측 배너: 마진 더 확장하여 본문 공간 최대한 확보 */
    .sidebar {
        position: fixed;
        right: 15px; /* 마진 더 확장: 30px → 15px로 줄여서 본문 공간 더 확보 */
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        max-height: 70vh;
        padding: 0 10px;
        background: transparent;
        border: none;
        overflow: hidden;
        z-index: 50;
    }
    .sidebar-title {
        font-size: 0.65rem;
        margin-bottom: 15px;
    }
}

/* =========================================
   INDEX PAGE 전용 스타일
   ========================================= */

/* 인덱스 페이지 헤더 (패딩 다름) */
body:not(.main-page) .header-wrapper {
    padding: 40px 20px 0;
}

/* 인덱스 페이지 헤더 스타일 */
body:not(.main-page) header {
    text-align: center;
    margin-bottom: 45px;
    width: 100%;
}
body:not(.main-page) header h1 {
    font-family: var(--f-deco) !important;
    font-size: 2.6rem;
    letter-spacing: 3px;
    text-shadow: 0 0 30px rgba(212, 165, 116, 0.4);
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
body:not(.main-page) header p {
    font-size: 0.75rem;
    color: var(--c-text-sub);
    letter-spacing: 9px;
    text-transform: uppercase;
    margin-top: 8px;
    font-family: var(--f-sans) !important;
}


/* 인덱스 페이지 히어로 섹션 */
.index-hero {
    position: relative;
    text-align: center;
    padding: 20px 0;
    width: 100%;
    max-width: 1200px;
}
.index-hero .img-layer-container {
    position: relative;
    display: block;
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    border: 1px solid var(--border-glass);
    cursor: pointer;
    transition: 0.4s ease;
    line-height: 0;
}
.index-hero .layer-image {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.6s ease;
    object-fit: cover;
}
.index-hero .img-layer-container:hover .layer-image {
    transform: scale(1.03);
}
.index-hero .image-copyright {
    position: absolute;
    bottom: 10px;
    left: 15px;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    pointer-events: none;
    font-family: var(--f-sans) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.index-hero .mouse-guide {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    animation: guideClickMove 3.5s infinite ease-in-out;
    right: 15%;
    bottom: 15%;
    width: 32px;
    height: 32px;
}
.index-hero .mouse-guide img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
@keyframes guideClickMove {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: 1; transform: translate(0, 0); }
    60% { opacity: 1; transform: translate(-80px, -60px); }
    75% { opacity: 1; transform: translate(-80px, -60px) scale(0.85); }
    85% { opacity: 1; transform: translate(-80px, -60px) scale(1); }
    100% { opacity: 0; transform: translate(-80px, -60px); }
}
/* 캡션 + 열쇠 한 줄 배치 (문장 끝에서 갭 넉넉히) */
.index-hero-caption-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 35px;
    flex-wrap: wrap;
}
.index-hero .home-caption {
    color: #fff;
    font-size: 1rem;
    margin: 0;
    font-style: italic;
    font-family: var(--f-serif) !important;
    opacity: 0.9;
    letter-spacing: 1px;
}
.index-hero .m-br {
    display: none;
}

/* =========================================
   비밀 문 (Secret Gate) - 열쇠 버튼 + 모달
   ========================================= */

/* 열쇠 버튼: 이미지 우측 하단 */
.secret-trigger-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 50;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
    filter: drop-shadow(0 1px 2px rgba(26, 31, 46, 0.4));
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-family: var(--f-sans) !important;
}
.secret-trigger-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    transform: scale(1.1) rotate(15deg);
}

/* 모달 오버레이 (검은색 없이 글래스) */
.secret-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 31, 46, 0.4);
    z-index: var(--z-modal);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.secret-modal-overlay.active {
    display: flex;
    opacity: 1;
}

/* 모달 컨텐츠 (글래스모피즘, 검은색 없음) */
.secret-modal-content {
    background: rgba(26, 31, 46, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px rgba(26, 31, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
    width: 320px;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.secret-modal-overlay.active .secret-modal-content {
    transform: scale(1);
}

.secret-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.2s;
    background: none;
    border: none;
    outline: none;
    padding: 0;
}
.secret-close:hover {
    color: var(--c-text-main);
}

.secret-title {
    color: var(--c-text-main);
    font-family: var(--f-sans) !important;
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-transform: uppercase;
    opacity: 0.8;
}

.code-input-wrapper {
    position: relative;
    margin-bottom: 25px;
}

/* 입력창 글래스모피즘 */
.secret-code-input {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 240, 230, 0.15);
    border-radius: 10px;
    color: var(--c-text-main);
    font-family: var(--f-sans) !important;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 8px;
    text-align: center;
    width: 100%;
    max-width: 200px;
    outline: none;
    padding: 12px 16px;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(26, 31, 46, 0.2);
}
.secret-code-input:focus {
    border-color: rgba(245, 240, 230, 0.3);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(212, 165, 116, 0.2);
}
.secret-code-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 8px;
}

.secret-hint {
    font-family: var(--f-serif) !important;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    font-style: italic;
}

@keyframes secret-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.secret-code-input.shake {
    animation: secret-shake 0.5s;
    border-color: var(--c-warn) !important;
}

/* 페이드 아웃 효과 (인덱스 페이지 전용) */
body.fade-out {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* 인덱스 페이지 모달 스타일 (나눔명조 폰트, 행간 여유) */
body:not(.main-page) .modal-body {
    font-family: var(--f-serif) !important;
    line-height: 1.9;
}
body:not(.main-page) .modal-body p {
    margin-bottom: 18px;
}

/* =========================================
   [FINAL] Detective Wall Style (CSS Art)
   ========================================= */

/* 1. 트리거 아이콘 */
#case-trigger {
    position: fixed;
    bottom: 40px; right: 40px;
    z-index: 9000;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    transition: transform 0.3s;
}
.trigger-icon {
    font-size: 2.5rem; color: #5d4037;
    background: #f5f5f5;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    border: 3px solid #8d6e63;
}
.trigger-label {
    background: #000; color: #fff;
    padding: 3px 8px; font-size: 0.7rem;
    border-radius: 4px; margin-top: 8px;
    font-weight: bold; letter-spacing: 1px;
    opacity: 0; transition: opacity 0.3s;
}
#case-trigger:hover { transform: translateY(-5px); }
#case-trigger:hover .trigger-label { opacity: 1; }

/* 2. 서류철 본체 (폴더) */
.detective-board {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px; /* 정사각형에 가깝게 */
    background-color: #d7ccc8; /* 짙은 베이지 */
    border: 1px solid #a1887f;
    border-radius: 5px;
    box-shadow: 20px 30px 80px rgba(0,0,0,0.7);
    z-index: 10000;
    font-family: 'Courier Prime', monospace;
    overflow: hidden;
}

/* 상단 탭 */
.board-header {
    height: 45px;
    background: #8d6e63; /* 가죽 느낌 헤더 */
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 15px;
    color: rgba(255,255,255,0.8);
    cursor: grab;
    border-bottom: 2px solid #5d4037;
}
.board-header:active { cursor: grabbing; }
.header-title { font-weight: bold; letter-spacing: 1px; font-size: 0.9rem; }
.header-stamp { 
    border: 2px solid #ff5252; color: #ff5252; 
    padding: 0 5px; font-size: 0.7rem; font-weight: 900; 
    transform: rotate(-3deg); letter-spacing: 1px;
}
.board-close-btn { cursor: pointer; font-size: 1.5rem; transition: 0.2s; }
.board-close-btn:hover { color: #fff; }

/* 내부 컨텐츠 (코르크 보드 or 책상 느낌) */
.board-content {
    position: relative;
    width: 100%; height: calc(100% - 45px);
    background-color: #efebe9; /* 종이 질감 배경 */
    overflow: hidden; /* 요소가 삐져나가지 않게 */
}
.grid-bg {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-image: linear-gradient(#d7ccc8 1px, transparent 1px), linear-gradient(90deg, #d7ccc8 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5; pointer-events: none;
}

/* [요소] 붉은 실 */
.red-thread {
    position: absolute; height: 2px; background: #d32f2f;
    transform-origin: left center; pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    opacity: 0.8;
}
.red-thread::before, .red-thread::after {
    content: ''; position: absolute; width: 6px; height: 6px;
    background: #b71c1c; border-radius: 50%; top: -2px;
}
.red-thread::before { left: -3px; } .red-thread::after { right: -3px; }

/* [요소] 증거 카드 (폴라로이드 스타일) */
.evidence-card {
    position: absolute;
    background: #fff; padding: 10px 10px 25px 10px;
    width: 140px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
    text-align: center;
    font-size: 0.7rem; color: #333;
    transition: transform 0.2s;
}
.evidence-card:hover { transform: scale(1.05) !important; z-index: 100 !important; }
.profile-icon-box {
    width: 100%; height: 90px; background: #333;
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 2.5rem; margin-bottom: 8px;
}
.evidence-card h3 { margin: 5px 0; border-bottom: 1px solid #ccc; font-size: 0.8rem; }

/* [요소] 테이프 */
.tape-strip {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    width: 60px; height: 20px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

/* [요소] 보고서 종이 */
.evidence-paper {
    position: absolute;
    background: #fafafa;
    padding: 20px; width: 180px;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
    font-size: 0.75rem; line-height: 1.5; color: #444;
    border-left: 3px solid #ff5252; /* 중요 표시 */
}
.highlight-text { background: rgba(255, 235, 59, 0.4); }
.paper-clip-visual {
    position: absolute; top: -10px; right: 20px;
    width: 10px; height: 30px;
    border-radius: 10px; border: 2px solid #757575;
}
.stamp-mark {
    position: absolute; bottom: 10px; right: 10px;
    color: #d32f2f; border: 2px solid #d32f2f;
    padding: 2px 5px; font-weight: bold; font-size: 0.8rem;
    transform: rotate(-15deg); opacity: 0.6;
}

/* [요소] 포스트잇 */
.sticky-note {
    position: absolute;
    background: #fff9c4; /* 노랑 */
    padding: 15px; width: 130px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
    color: #e65100;
    text-align: center;
}
.pin-tack {
    position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px; background: #d32f2f; border-radius: 50%;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}

/* [요소] 태그 */
.evidence-tag {
    position: absolute;
    background: #fff; padding: 5px 10px;
    border: 1px solid #ccc;
    font-size: 0.6rem; color: #666;
    display: flex; align-items: center; gap: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.evidence-tag i { color: #d32f2f; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .detective-board { width: 95%; height: 70vh; }
    /* 모바일에서는 요소 위치를 조금 중앙으로 모아주거나 축소 */
    .red-thread { display: none; } /* 복잡하니까 선은 숨김 */
}