/* ===================================================
   [1. 공통 및 배경 스타일]
   =================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    font-family: sans-serif;
    box-sizing: border-box;
}

/* 전체 배경 이미지 설정 (1.png 연동) */
.retro-desktop {
    background: url('1.png') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    height: 100vh;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* ===================================================
   [2. 컴퓨터 창 공통 디자인: 흰색 반투명 + 입체 테두리]
   =================================================== */
.bottom-left-window, .modern-retro-window {
    background: rgba(255, 255, 255, 0.7); /* 흰색 반투명 바탕 */
    border: 2px solid;
    /* 고전 윈도우 스타일 입체 테두리를 흰색과 투명 블랙으로 재현 */
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.9);
    padding: 2px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
}

/* 상단 제목 표시줄 */
.title-bar {
    background: rgba(255, 255, 255, 0.85);
    color: #333333;
    padding: 3px 6px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 창 내부 본문 박스 */
.window-body {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin: 2px;
}

/* ===================================================
   [3. 첫 표지 페이지 전용 세부 스타일]
   =================================================== */
.bottom-left-window {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 320px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.info-list li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #222222;
}

/* 표지 진입 버튼 (입체감 있는 흰색 반투명 버튼) */
.start-link {
    display: block;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.9);
    padding: 5px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 13px;
    transition: background 0.2s;
}

.start-link:hover { background: rgba(255, 255, 255, 0.9); }
.start-link:active { border-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.3); }

/* ===================================================
   [4. 메인 홈페이지 레이아웃 및 세부 스타일]
   =================================================== */
.desktop-layout {
    display: flex;
    max-width: 1200px;
    width: 95%;
    height: 90vh;
    margin: 5vh auto;
    gap: 40px;
}

.left-column {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.right-column {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.desktop-title {
    margin: 0;
    font-size: 18px;
    color: #111;
    letter-spacing: 1px;
    text-align: center;
}

.main-hero-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 250px;
    object-fit: cover;
}

/* 창틀 없는 독립형 2분할 미니 배너 구역 */
.double-banner-container {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-top: 5px;
}

.single-banner {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pure-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 오른쪽 아이콘 이동 창 링크 */
.icon-window { text-align: center; }
.desktop-icon-link {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000000;
    transition: background 0.2s;
}
.desktop-icon-link:hover { background: rgba(255, 255, 255, 0.4); }
.pixel-icon-box { font-size: 32px; margin-bottom: 5px; }
.icon-label { font-weight: bold; font-size: 13px; letter-spacing: 1px; text-decoration: underline; }

/* ===================================================
   [5. 캐릭터 인덱스 및 상세 페이지 스타일]
   =================================================== */

/* 스크롤이 필요한 페이지 전용 설정 */
.scrollable-body {
    overflow-y: auto !important; /* 스크롤 허용 */
}

/* 캐릭터 메인 인덱스 레이아웃 */
.character-index-container {
    max-width: 1200px;
    width: 95%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 4분할 온전한 이미지 그리드 */
.pure-image-grid-4 {
    display: flex;
    gap: 20px;
    width: 100%;
}

.char-thumb-link {
    flex: 1;
    display: block;
}

.char-thumb-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s;
}

.char-thumb-link img:hover {
    transform: scale(1.02); /* 살짝 커지는 현대적 효과 */
}

/* 중앙 단독 배너 영역 */
.center-banner-zone {
    width: 100%;
}

.pure-center-banner {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------------------------------------------------
   개별 캐릭터 상세 페이지 구조 (레이아웃)
   --------------------------------------------------- */
.char-screen-section {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 40px 50px 20px 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.additional-section {
    justify-content: flex-start;
    padding-top: 60px;
}

.char-main-layout {
    display: flex;
    gap: 40px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    flex-grow: 1;
}

/* 왼쪽 열 (1/3 비율 선점) */
.char-left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 오른쪽 열 (남은 비율) */
.char-right-col {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 이름 및 설명창 개별 세팅 */
.name-window {
    width: 100%;
}

.char-name {
    margin: 0;
    font-size: 24px;
    letter-spacing: 1px;
}

.desc-window {
    flex-grow: 1;
}

/* 창틀 없는 온전한 이미지 박스들 */
.char-hero-image-box img {
    width: 100%;
    height: auto;
    display: block;
}

.char-sub-image-box {
    width: 100%;
    max-height: 150px; /* 1/5 비율 조절을 위한 최대 높이 제한 */
    overflow: hidden;
}

.char-sub-image-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 최하단 와이드 배너 */
.char-bottom-wide-banner {
    width: 100%;
    max-width: 1300px;
    margin: 30px auto 0 auto;
}

.char-bottom-wide-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* 스크롤 추가 페이지용 전체 높이 창 */
.full-height-window {
    height: 80vh;
}

.photo-window-body {
    height: calc(100% - 40px);
    padding: 10px !important;
}

.extra-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===================================================
   [6. 그림(갤러리) 페이지 전용 스타일]
   =================================================== */

.gallery-container {
    max-width: 1000px;
    width: 90%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 1. 상단 작은 제목 창 크기 제한 */
.gallery-title-window {
    align-self: center;
    width: 350px;
}

.gallery-main-title {
    margin: 0;
    font-size: 16px;
    text-align: center;
    letter-spacing: 2px;
}

/* 2. 제목 아래 온전한 이미지 */
.gallery-top-banner {
    width: 100%;
}

.pure-top-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. 가로/세로 정렬 선택 버튼 구역 */
.view-switcher-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 반투명 컴퓨터 스타일을 적용한 조작 버튼 */
.view-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    transition: all 0.2s;
}

.view-btn:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* 현재 선택된 버튼 표시 스타일 */
.view-btn.active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.3);
    color: #000;
}

/* ===================================================
   [핵심] 정렬 방식에 따른 가변 스타일 레이아웃
   =================================================== */

.gallery-content-box {
    width: 100%;
    transition: all 0.3s ease;
}

/* -----------------------------------------------
   [4번 조건] 가로 정렬 일 때 (1:1 작은 아이콘 형태, 창틀 없음)
   ----------------------------------------------- */
.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 바둑판 배열 */
    gap: 20px;
}

.view-grid .item-window-header {
    display: none; /* 가로 정렬일 때는 창틀 해더를 숨깁니다 */
}

.view-grid .gallery-item {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* 1:1 비율의 사각형 아이콘 모양으로 강제 크롭(일부분만 보이기) */
.view-grid .gallery-link {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* 1:1 정사각형 고정 */
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.view-grid .gallery-link img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 사각형을 채우도록 자름 */
    display: block;
    transition: transform 0.2s;
}

.view-grid .gallery-link img:hover {
    transform: scale(1.05);
}

/* -----------------------------------------------
   [5번 조건] 세로 정렬 일 때 (컴퓨터 창틀로 감싸고 온전한 이미지로)
   ----------------------------------------------- */
.view-list {
    display: flex;
    flex-direction: column; /* 세로 나열 */
    gap: 30px;
    max-width: 700px; /* 세로 보기는 보기 좋게 폭을 좁힘 */
    margin: 0 auto;
}

/* 세로 정렬 시 개별 이미지를 감싸는 흰색 반투명 컴퓨터 창틀 발동 */
.view-list .gallery-item {
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.9);
    padding: 2px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
}

/* 세로 정렬일 때만 나타나는 상단 창틀 바 */
.view-list .item-window-header {
    display: block;
    background: rgba(255, 255, 255, 0.85);
    color: #444;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.view-list .gallery-link {
    display: block;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin: 2px;
}

/* 세로 보기에서는 온전한 이미지 형태로 전체 다 보여줌 */
.view-list .gallery-link img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ===================================================
   [7. 전 페이지 공통 하단 내비게이션 바 스타일]
   =================================================== */

/* 하단 버튼들을 감싸는 바 (윈도우 작업표시줄 스타일) */
.footer-nav-bar {
    width: 100%;
    max-width: 800px;
    margin: 40px auto 20px auto;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6); /* 흰색 반투명 */
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

/* 내비게이션 개별 버튼 스타일 */
.nav-btn {
    flex: 1;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.9);
    padding: 8px 5px;
    text-decoration: none;
    color: #333333;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

/* 마우스를 올렸을 때 효과 */
.nav-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000000;
}

/* 현재 클릭해서 들어와 있는 페이지 버튼 표시 (눌려있는 연출) */
.nav-btn.current-page, .nav-btn:active {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.3);
    color: #000080; /* 고전 블루 포인트 컬러 */
}

/* ===================================================
   [8. 메인화면 입장 시 컴퓨터 창 낙하 애니메이션]
   =================================================== */

/* 애니메이션 동작 전 초기 상태 설정 (위로 20px 띄우고 투명하게) */
.window-fade-in {
    opacity: 0;
    transform: translateY(-20px);
    animation: dropDownFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 위에서 아래로 짧게 내려오며 선명해지는 애니메이션 효과 정의 */
@keyframes dropDownFade {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* 시작 위치: 위쪽 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* 최종 위치: 원래 자리 */
    }
}

/* 메인 이미지 클릭 링크 스타일 (마우스 올렸을 때 돋보기 모양 커서 연출) */
.hero-click-link {
    display: block;
    cursor: zoom-in; 
    overflow: hidden;
}

.hero-click-link img {
    transition: transform 0.3s ease;
}

/* 이미지에 마우스를 올리면 살짝 확대되는 현대적 효과 */
.hero-click-link:hover img {
    transform: scale(1.02);
}

/* ===================================================
   [9. 캐릭터 아카이브 상단 80% / 하단 20% 이동 및 세로 단락형 리스트]
   =================================================== */

.single-banner-wrapper {
    width: 100%;
    margin-top: auto;
}

.no-scroll-body {
    overflow: hidden !important;
}

/* 전체 컨테이너 규격 */
.fixed-profile-container {
    max-width: 1200px;
    width: 90%;
    height: 76vh;
    margin: 3vh auto 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Page2 스크롤 및 비율 유지용 컨테이너 조절 */
.page2-container {
    height: auto !important;
    min-height: 76vh;
}

/* 첫 번째 페이지 전용 기본 수직 비율 */
.profile-row-top {
    height: 30.4vh; /* 76vh의 40% */
    display: flex;
    align-items: center;
}
.profile-row-center {
    height: 15.2vh; /* 76vh의 20% */
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
}
.profile-row-bottom {
    height: 30.4vh; /* 76vh의 40% */
    display: flex;
    align-items: center;
}

/* 📌 [1번 & 2번 조건 수정] 두 번째 페이지 상단 4/5 (80%) 높이 지정 및 대칭 구조 */
.profile-row-top-80 {
    height: 60.8vh; /* 76vh의 전체의 80% 만큼 엄청 넓게 차지 */
    display: flex;
    align-items: center;
    justify-content: center; /* 가로 중앙 정렬 */
}

.pure-image-grid-2-symmetric {
    display: flex;
    gap: 40px;
    width: 75%; /* 중앙에 이쁘게 모이도록 가로폭 조정 */
    height: 90%; /* 상단 영역 안에서 꽉 차게 */
    justify-content: center;
}

/* 📌 [2번 조건 수정] 이동 버튼과 대표 배너가 합쳐진 하단 1/5 (20%) 고정 영역 */
.profile-row-bottom-20-fixed {
    height: 15.2vh; /* 76vh의 20% 고정 */
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
    margin-bottom: 20px; /* 아래 리스트와의 간격 */
}

/* 첫 번째 페이지용 상하단 4개 격자 배치 */
.profile-row-top .pure-image-grid-4,
.profile-row-bottom .pure-image-grid-4 {
    display: flex;
    gap: 25px;
    width: 100%;
    height: 90%;
}

/* 음영 박스 제거 규칙 */
.char-thumb-link {
    flex: 1;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

.char-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

/* 마우스 호버 시 이미지 반투명 및 흰색 텍스트 오버레이 효과 */
.hover-name-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.char-thumb-link:hover img {
    opacity: 0.4;
}

.char-thumb-link:hover .hover-name-overlay {
    opacity: 1;
}

/* 대표 이미지 배너 설정 */
.center-banner-wrapper {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.center-banner-wrapper .pure-center-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 이동 미니 버튼 창틀 */
.mini-next-window {
    width: 130px;
    height: 85%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.mini-next-window .window-body {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px !important;
}

.mini-next-btn {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.9);
    padding: 8px 0;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

/* 📌 [3번 조건 수정] 하단 기타 캐릭터 세로 정렬 단락형 리스트 */
.profile-row-bottom-vertical-list {
    width: 100%;
    display: flex;
    flex-direction: column; /* 세로 정렬 무조건 고정 */
    gap: 20px;
    padding-bottom: 80px; /* 네비바에 가리지 않는 여백 */
}

/* 가로로 길게 늘어난 단락 스타일 컴퓨터 창틀 */
.sub-char-paragraph-window {
    width: 100%; /* 화면 가로비율에 맞춰 길게 늘림 */
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.9) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.9);
    padding: 2px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

/* 창 내부 본문 정렬 (사진 좌측 / 글 우측) */
.paragraph-window-body {
    padding: 15px;
    display: flex;
    flex-direction: row; /* 가로 나란히 단락 배치 */
    gap: 25px;
    align-items: center;
}

/* 왼쪽 1:1 비율 고정 작은 이미지 박스 */
.sub-char-img-box-1to1 {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    overflow: hidden;
}

.sub-char-img-box-1to1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 오른쪽 설명글 박스 */
.sub-char-text-desc {
    flex: 1;
}

.sub-char-text-desc h4 {
    margin: 0 0 6px 0;
    font-size: 17px;
    color: #111;
}

.sub-char-text-desc p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #333;
}

/* ===================================================
   [메인페이지(home.html) 미니 배너 2개 세로폭 및 시작점 완벽 고정]
   =================================================== */

/* 1. 두 미니 배너를 감싸는 전체 틀 설정 */
.main-banner-container, 
.home-banner-wrapper { /* 사용 중이신 클래스명에 맞춰 적용됩니다 */
    display: flex !important;
    gap: 20px;            /* 배너 사이의 간격 */
    width: 100%;
    align-items: stretch; /* ⭐️ 핵심: 두 배너의 세로 시작점과 끝점을 강제로 일치시킴 */
    justify-content: space-between;
}

/* 2. 배너 각각을 감싸는 링크 태그 설정 */
.main-banner-link,
.home-banner-link {
    flex: 1;            /* 반반씩 똑같은 가로폭 나눠 갖기 */
    display: block;
    position: relative;
    overflow: hidden;
    height: auto;       /* 내부 이미지에 맞게 반응 */
}

/* 3. 내부 실제 이미지 설정 */
.main-banner-link img,
.home-banner-link img {
    width: 100%;
    height: 100%;       /* ⭐️ 부모 크기에 맞춰 세로폭 비율을 동일하게 고정 */
    object-fit: cover;  /* 이미지가 찌그러지지 않고 비율을 유지하며 채워짐 */
    display: block;
}

/* ===================================================
   [메인페이지(home.html) 각 열의 창폭 일치 및 1/10 세로폭 교정]
   =================================================== */

/* ===================================================
   [메인페이지(home.html) 모든 컴퓨터창 위치 50px 다운 조정]
   =================================================== */

/* 메인 레이아웃의 상단 여백을 총 58px(기존 8px + 요청 50px)로 낮춤 */
.desktop-layout {
    display: flex;
    gap: 30px;       
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 58px !important; /* ⭐️ 기존 8px에서 50px을 더 늘려 창들의 위치를 아래로 낮춤 */
    align-items: flex-start;
}

/* 왼쪽 열과 오른쪽 열의 구조 설정 */
.left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

/* 미니 배너 각각의 가로폭 및 1/10 세로폭 고정 (기존 유지) */
.home-mini-banner-wrapper {
    width: 100%;                  
    height: 72px !important;      
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 3px;
    margin-top: auto;             
}

/* 내부 미니 배너 실제 이미지 설정 (기존 유지) */
.home-mini-banner-wrapper .pure-banner-img {
    width: 100%;
    height: 100%;                 
    object-fit: cover;            
    display: block;
}

/* 왼쪽 열과 오른쪽 열의 구조 설정 */
.left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 창들과 배너 사이의 수직 간격 */
}

/* ⭐️ 핵심: 미니 배너 각각의 가로폭을 부모 열(컴퓨터 창틀 폭)에 100% 맞추고, 세로폭은 1/10 고정 */
.home-mini-banner-wrapper {
    width: 100%;                  /* 좌/우 각 열의 컴퓨터 창 가로폭과 정확히 일치시킴 */
    height: 72px !important;      /* 1920*1080 기준 1/10 고정 세로폭 유지 */
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 3px;
    margin-top: auto;             /* 열의 최하단으로 자연스럽게 밀착 정렬 */
}

/* 내부 미니 배너 실제 이미지 설정 */
.home-mini-banner-wrapper .pure-banner-img {
    width: 100%;
    height: 100%;                 /* 72px 고정 높이에 맞춤 */
    object-fit: cover;            /* 가로폭이 늘어나거나 줄어들어도 이미지 찌그러짐 방지 */
    display: block;
}

/* ===================================================
   [첫 번째 캐릭터 페이지(profile.html) 모든 이미지 위치 30px 다운]
   =================================================== */

/* 전체 컨테이너 규격 수정 */
.fixed-profile-container {
    max-width: 1200px;
    width: 90%;
    height: 76vh;
    /* ⭐️ 원래 3vh였던 상단 여백을 30px만큼 늘려, 첫 번째 페이지의 모든 요소를 30px 아래로 낮춤 */
    margin: calc(3vh + 30px) auto 0 auto; 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 두 번째 페이지용 컨테이너는 기존 설정을 유지하여 뒤틀림 방지 */
.page2-container {
    height: auto !important;
    min-height: 76vh;
    /* 두 번째 페이지도 동일하게 낮추고 싶다면 아래 주석을 해제하세요 */
    /* margin: calc(3vh + 30px) auto 0 auto !important; */
}

/* ===================================================
   [profile.html 메뉴바 하단 스크롤 다운 및 페이지별 개별 배경화면]
   =================================================== */

/* profile.html 전용: 화면이 아래로 스크롤될 수 있도록 허용 */
.scrollable-profile-body {
    overflow-y: auto !important;
}

/* profile.html 내비바 설정: 하단 고정(fixed)을 해제하고 컨텐츠 맨 아래에 위치하도록 변경 */
.fixed-profile-container .static-nav-bar {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 50px !important;    /* 이미지들과 메뉴바 사이의 여백 */
    margin-bottom: 30px !important; /* 메뉴바 아래쪽 최종 여백 */
}


/* ⭐️ 2번 조건 만족: 각 페이지별 배경이미지 개별 삽입 구역 */
/* (기존 .retro-desktop의 background 지정을 대체하거나 덮어씁니다) */

/* 1. 메인페이지(home.html) 배경 */
body.home-bg {
    background-image: url('home_background.png'); /* 메인페이지 배경 이미지 파일명 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ===================================================
   [최종 교정: 스크롤을 끝까지 내려야만 나오는 최하단 메뉴바]
   =================================================== */

/* 1. 메뉴바의 화면 고정(fixed)을 완전히 해제하고 콘텐츠 맨 아래에 배치 */
.footer-nav-bar {
    position: relative !important;   /* 화면 고정 해제 */
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 1200px;               /* 전체 사이트 폭에 맞춤 */
    margin: 50px auto 30px auto !important; /* ⭐️ 위쪽 콘텐츠와 50px 적당한 공백 유지, 바닥 여백 30px */
    display: flex;
    justify-content: center;
    z-index: 10;
}

/* 2. 바디에 들어갔던 불필요한 고정용 패딩 제거 */
body {
    padding-bottom: 0 !important;
}

/* 3. 첫 번째 캐릭터 페이지(profile.html) 전용 높이 균형 조정 */
.scrollable-profile-body {
    overflow-y: auto !important;
}

.scrollable-profile-body .fixed-profile-container {
    max-width: 1200px;
    width: 90%;
    height: auto !important;
    /* ⭐️ 과도한 스크롤을 막기 위해 최소 높이를 적절한 수준(105vh)으로 최적화 */
    min-height: 105vh !important; 
    margin: calc(3vh + 30px) auto 0 auto; 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* profile.html 내부의 메뉴바 마진도 통일 */
.scrollable-profile-body .static-nav-bar {
    position: relative !important;
    margin-top: 60px !important;    /* 이미지 격자 바로 밑에 적당히 숨겨지도록 설정 */
    margin-bottom: 30px !important;
}

/* ===================================================
   [최종 해결: 다이어리 레이아웃 격리 및 메뉴바 최하단 고정]
   =================================================== */

/* 바디에 스크롤이 자연스럽게 생기도록 설정 */
body.diary-bg {
    overflow-y: auto !important;
    height: auto !important;
    background-image: url('diary_background.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* 다이어리 본문 레이아웃 (높이를 강제하지 않고 흐르게 둠) */
.diary-layout {
    display: block !important;
    max-width: 1000px; 
    margin: 0 auto;
    padding-top: 58px !important; 
    height: auto !important; /* 높이 고정 절대 방지 */
}

.diary-title-window {
    width: 100% !important;
    margin-bottom: 20px;
}

.diary-list-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px; 
    height: auto !important;
}

/* 일기장 창 디자인 */
.diary-item-window {
    width: 100%;
    background: rgba(255, 255, 255, 0.85); 
    border: 2px solid #000;
    box-shadow: 4px 4px 0px rgba(0,0,0,1); 
    display: flex;
    flex-direction: column;
}

/* 날짜 헤더 (블랙 고정) */
.diary-item-header {
    background: #000000 !important; 
    color: #fff;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 14px;
}

.diary-item-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

.diary-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    word-break: break-all;
}

/* 사진 격자 및 단독 이미지 설정 (기존 유지) */
.diary-image-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
    width: 100%;
    max-width: 600px; 
}
.diary-grid-link {
    display: block;
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 1 !important; 
    overflow: hidden;
    border: 1px solid #999;
}
.diary-grid-link img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}
.diary-single-image {
    max-width: 400px;
    border: 1px solid #999;
    overflow: hidden;
}
.diary-single-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ⭐️ 핵심 교정: 다이어리 본문 박스가 어떤 상태이든 상관없이, 
   무조건 스크롤을 끝까지 내려야만 메뉴바가 나오도록 강제 격리 조치 */
.diary-footer-wrapper {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    clear: both !important;        /* 주변 레이아웃 간섭 전면 차단 */
    margin-top: 80px !important;   /* 일기장이 다 끝나고 아래로 80px 여백 확보 */
    margin-bottom: 40px !important;/* 웹페이지 최하단 바닥과의 여백 */
}

/* 다이어리 페이지 안에서의 메뉴바 위치 초기화 */
.diary-bg .footer-nav-bar {
    position: static !important;   /* 고정 풀기 */
    transform: none !important;
    margin: 0 auto !important;
    display: flex;
}