@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* CSS Document */

/* 기본 배경과 폰트 중앙 정렬 설정 */
body {
    background-color: #FAFAFA; 
    color: #2C2C2C; 
    font-family: 'Pretendard', serif; 
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column; /* 위에서 아래로 배치 */
    align-items: center; /* 전체 화면 가운데 정렬 */
}

/* 👑 상단 로고 (이미지 스타일) */
.header-logo {
    text-align: center;
    margin-bottom: 0px; /* 로고와 본문 박스 사이의 여백 */
    width: 180px;
}

/* 링크에 생길 수 있는 불필요한 테두리 제거 */
.logo-link {
    display: inline-block; /* 이미지를 감싸는 상자 */
    text-decoration: none;
    border: none;
}

/* 로고 이미지 스타일 */
.logo-img {
    max-width: 100%; /* 화면 너비보다 이미지가 크면 자동으로 줄어들게 */
    height: auto;    /* 비율 깨지지 않게 자동 조절 */
    border: none;    /* 이미지 테두리 제거 */
    
    /* 💡 만약 로고가 너무 크거나 작게 나오면, 아래 width 숫자를 조절해 보세요! */
    /* width: 300px; */ 
    
    transition: transform 0.3s ease; /* 마우스 올렸을 때 부드럽게 움직이게 */
}

/* 마우스 올렸을 때 살짝 반응하는 효과 (선택사항!) */
.logo-link:hover .logo-img {
    transform: scale(1.05); /* 살짝 커지는 효과 (싫으시면 이 부분 지우셔도 됩니다) */
}

/* 전체 레이아웃 틀 */
.blog-container {
    display: flex;
    gap: 30px; 
    width: 950px; 
    max-width: 100%;
}

/* 👈 좁아지고 귀여워진 왼쪽 사이드바 */
.sidebar {
    width: 220px; 
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center; /* 사이드바 내용물 가운데 정렬 */
}

/* 프로필과 부엉이를 묶는 영역 */
.profile-section {
    position: relative; /* 부엉이 위치를 잡기 위한 기준점 */
}

/* 앙증맞은 동그라미 프로필 박스 */
.profile-img-box {
    width: 110px; /* 크기를 확 줄였습니다! */
    height: 110px;
    background-color: #FFFFFF;
    border: 2px solid #2C2C2C; 
    border-radius: 50%; /* 깔끔한 동그라미 모양 */
    box-shadow: 3px 3px 0px #C8DF59; /* 황녹색 포인트 그림자 */
    overflow: hidden; /* 동그라미 밖으로 튀어나가지 않게 */
}

/* 프로필 이미지가 박스 안에 예쁘게 차도록 */
.profile-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 👉 오른쪽 메인 영역 */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* 💡 핵심포인트: 왼쪽 프로필(110px) + 간격(25px) = 135px 만큼 아래로 내립니다 */
    margin-top: 55px; 
}

/* 공통 박스 디자인 (깔끔한 다이어리 칸 느낌) */
.box {
    background-color: #FFFFFF; 
    border: 1px solid #2C2C2C; 
    border-radius: 8px; 
    padding: 20px;
    box-shadow: 4px 4px 0px #C8DF59; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 각 박스별 크기 비율 맞추기 */
.category-box { width: 100%; height: 280px; }
/* 📌 공지사항 배너 스타일 */
.notice-box { 
    height: 219px; 
    padding: 0; /* 이미지가 박스에 꽉 차도록 기존 패딩 제거 */
    overflow: hidden; /* 둥근 모서리 밖으로 이미지가 튀어나가지 않게 */
    position: relative;
}

/* 링크 영역 전체 덮기 */
.notice-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* 배너 이미지 꽉 차게 */
.notice-link img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않게 비율 유지 */
    transition: transform 0.4s ease; /* 부드러운 확대 애니메이션 */
}

/* 🖱️ 마우스 올렸을 때 나타나는 오버레이 (차콜색 반투명 + 황녹색 글씨) */
.notice-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(44, 44, 44, 0.65); /* 차콜 블랙 반투명 배경 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C8DF59; /* 황녹색 텍스트 포인트 */
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 4px; /* 글자 간격 넓혀서 고급스럽게 */
    opacity: 0; /* 평소에는 투명하게 숨김 */
    transition: opacity 0.4s ease;
}

/* 호버(Hover) 효과 작동 */
.notice-link:hover img {
    transform: scale(1.05); /* 사진이 살짝 앞으로 줌인 */
}

.notice-link:hover .notice-overlay {
    opacity: 1; /* 숨어있던 오버레이 등장 */
}

.widget-row { display: flex; gap: 25px; height: 160px; }
.clock-box, .dday-box { flex: 1; }

/* 🕰️ 모던 빈티지 시계 스타일 */
.clock-box {
    display: flex;
    flex-direction: column;
}

.modern-vintage-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* 아날로그 시계 틀 (깔끔한 원형) */
.analog-face {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid #2C2C2C; /* 차콜색 테두리 */
    border-radius: 50%;
    background-color: #FAFAFA;
    box-shadow: inset 2px 2px 0px rgba(0,0,0,0.05); /* 살짝 깊이감만 */
}

/* 시계 바늘 공통 속성 */
.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    background-color: #2C2C2C;
    border-radius: 4px;
    transform: translateX(-50%);
}

/* 시, 분, 초침 디테일 */
.hour-hand { width: 4px; height: 25px; }
.minute-hand { width: 3px; height: 35px; }
.second-hand { 
    width: 1.5px; 
    height: 38px; 
    background-color: #C8DF59; /* 초침은 황녹색 포인트! */
}

/* 시계 정중앙 동그라미 */
.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: #2C2C2C;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #C8DF59; /* 중심에 마법적인 포인트 */
}

/* 하단 디지털 시간 텍스트 */
.digital-time {
    font-size: 16px;
    letter-spacing: 2px;
    color: #2C2C2C;
    font-weight: bold;
}

/* -------------------------------------------
   [디데이 & 달력 토글 박스 설정]
------------------------------------------- */
.dday-box {
    position: relative;
    overflow: hidden; /* 잉크가 박스 밖으로 튀어나가지 않게 막아줍니다 */
    padding: 0; /* 내용물 정렬을 위해 기본 패딩 제거 */
}

/* 달력과 디데이 화면 공통 속성 */
.toggle-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 평소엔 투명하게 숨김 */
    z-index: 1;
    transition: opacity 0.2s ease;
}
.toggle-view.active {
    opacity: 1; /* active 클래스가 붙으면 보임 */
    z-index: 2;
}

/* 폰트 스타일 */
.view-title {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.calendar-content {
    font-size: 20px;
    font-weight: bold;
    color: #2C2C2C;
}
.dday-counter {
    font-size: 26px;
    font-weight: bold;
    color: #C8DF59; /* 드림주와 말포이의 황녹색 포인트! */
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px #2C2C2C; /* 글씨가 돋보이게 얇은 그림자 */
}

/* 🪶 깃펜 버튼 스타일 */
.quill-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 10; /* 가장 위에 오도록 설정 */
    transition: transform 0.3s ease;
}
.quill-btn:hover {
    transform: scale(1.1) rotate(-10deg); /* 마우스 올리면 살짝 까딱! */
}
.quill-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 💧 잉크 번짐 효과 (핵심!) */
.ink-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #1A472A; /* 슬리데린의 짙은 마법 잉크색 */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 5; /* 뷰보다는 위, 깃펜보다는 아래 */
    pointer-events: none; /* 클릭 방해 안 함 */
}

/* 잉크가 확 커졌다가 사라지는 애니메이션 */
@keyframes inkDropAnimation {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(60); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(60); opacity: 0; }
}
.ink-overlay.animate {
    animation: inkDropAnimation 1.5s ease-in-out;
}

/* -------------------------------------------
   [📚 왼쪽 책장 & 카테고리 디자인]
------------------------------------------- */
.category-box {
    align-items: flex-start; /* 책들이 위에서부터 쌓이도록 설정 */
    padding: 30px 10px; /* 상하 여백을 조금 더 줍니다 */
}

/* 책이 쌓여있는 모습 (리스트 스타일 제거) */
.book-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 책과 책 사이의 세로 간격 */
    width: 100%;
    align-items: center;
}

.book {
    width: 90%;
    position: relative; /* 리본이 떨어지는 기준점이 됩니다 */
}

/* 책등 이미지 스타일 */
.book img {
    width: 100%;
    height: 45px; /* 책등 두께 */
    object-fit: cover;
    border-radius: 3px;
    transition: transform 0.3s ease;
}

/* 마우스를 올리면 책이 서가에서 살짝 뽑히는 효과! */
.book:hover img {
    transform: translateX(8px); 
}

/* 🌟 카테고리 박스 투명화 (CSS 맨 아래 추가) 🌟 */
/* .box 클래스가 가진 흰색 배경과 테두리, 그림자를 이 영역에서만 무효화합니다 */
.category-box.box {
    background-color: transparent !important; /* 배경을 투명하게 */
    border: none !important; /* 테두리 없애기 */
    box-shadow: none !important; /* 황녹색 입체 그림자 없애기 */
    padding: 0 !important; /* 안쪽 여백을 없애서 책이 공간을 넓게 쓰도록 */
}

/* 책 쌓이는 정렬 다시 맞추기 */
.book-stack {
    align-items: flex-end; /* 책들이 오른쪽(메인 컨텐츠 쪽) 정렬되도록 */
    padding-right: 10px; /* 오른쪽 메인 박스와 너무 붙지 않게 살짝 띄우기 */
}

/* -------------------------------------------
   [🔖 드롭다운 리본 책갈피 (4개 버전!)]
------------------------------------------- */
.bookmark-ribbons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 5px; /* 4개가 들어가야 하니 8px -> 5px로 줄임! */
    
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease; 
}

/* Dream 책에 마우스를 올리면 리본이 길어집니다 */
.book.has-sub:hover .bookmark-ribbons {
    max-height: 120px; 
}

/* 개별 리본 모양 만들기 */
.ribbon {
    width: 26px; /* 32px -> 26px 로 다이어트! */
    height: 90px; 
    display: flex;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
    box-shadow: inset 0px -5px 10px rgba(0,0,0,0.1);
}

/* 리본 안의 텍스트 설정 */
.ribbon a {
    color: inherit;
    text-decoration: none;
    font-size: 10px; /* 11px -> 10px로 살짝 앙증맞게! */
    font-weight: bold;
    letter-spacing: 2px;
    writing-mode: vertical-rl; 
    padding-top: 10px; 
}

/* 리본 4가지 색상 (기숙사 & 두 사람의 테마) */
.ribbon-green { background-color: #1A472A; color: #FCFBF7; } 
.ribbon-yellow { background-color: #F0C75E; color: #2C2C2C; } 
.ribbon-point { background-color: #C8DF59; color: #2C2C2C; } 

/* 🌟 새로 추가된 PAIR 리본 (차콜 블랙으로 모던하게!) */
.ribbon-pair { background-color: #2C2C2C; color: #FCFBF7; }

/* -------------------------------------------
   [🦉 부엉이 방명록 애니메이션]
------------------------------------------- */
.profile-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 프로필 사진과 부엉이 사이의 간격 조절 */
    margin-bottom: 20px; 
}

/* 부엉이가 들어갈 링크 영역 틀 (크기와 높이를 줄여서 프로필을 위로 당깁니다!) */
.owl-link {
    display: block;
    position: relative;
    width: 100px;   /* 날개 편 부엉이 기준 넉넉히 */
    height: 10px;   /* ★ 핵심! 120px -> 50px로 확 줄여서 빈 공간을 없앱니다 */
    cursor: pointer;
    z-index: 10;
}

/* 두 부엉이 이미지 공통 설정 */
.owl-img {
    position: absolute;
    bottom: 0; 
    left: 50%;
    transform: translateX(-50%); 
    transition: all 0.4s ease; 
}

/* (1) 얌전한 부엉이 (작고 귀엽게 쪼꼬미로!) */
.owl-sit {
    width: 60px; /* 100px -> 60px 축소 */
    opacity: 1;  
    z-index: 2;  
}

/* (2) 날개 편 부엉이 (비율에 맞춰서 같이 축소) */
.owl-fly {
    width: 85px; /* 130px -> 85px 축소 */
    bottom: 5px; /* 날아오르는 높이 살짝 낮춤 */
    opacity: 0;   
    z-index: 1;
}

/* 🖱️✨ 마우스 올렸을 때 (기존과 동일) */
.owl-link:hover .owl-sit { opacity: 0; }
.owl-link:hover .owl-fly { opacity: 1; }

/* -------------------------------------------
   [👗 캐릭터 프로필 화면: 폴라로이드 & 팝업 완벽 수정!]
------------------------------------------- */
.character-box-wrapper {
    position: relative;
    height: auto;           /* 365px → auto 로 변경 */
    min-height: 380px;      /* 최소 높이는 이걸로 보장 */
    display: flex;
    align-items: center;   /* center → flex-start 로 변경 (팝업 열려도 안 늘어나게) */
    justify-content: center;
    padding: 20px 40px;
    background-color: #FDFBF7 !important;
    background-image: radial-gradient(circle, transparent 20%, #F5F0E6 120%);
    border: 1px solid #D4C5B9 !important;
    box-shadow: inset 0 0 40px rgba(139, 115, 85, 0.1);
}

.character-display {
    display: flex;
    justify-content: center;
    gap: 60px;
    height: auto;          /* 100% → auto */
    align-items: center; /* center → flex-start */
}

.chara-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  /* center → flex-start */
    width: 260px;
    height: auto;                  /* 100% → auto */
}

.chara-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 🏷️ 이름표 (사진에 안 가려지게 철벽 방어!) */
.chara-name {
    font-family: 'Georgia', serif; 
    font-size: 17px;
    font-weight: bold;
    color: #4A3B32; 
    margin-bottom: 10px; /* 간격 조절 */
    border-bottom: 1px dashed #D4C5B9; 
    padding-bottom: 5px;
    letter-spacing: 1px;
    position: relative;
    z-index: 5; /* 💡 사진보다 무조건 위에 뜨게 만듭니다! */
}

/* 📸 폴라로이드 사진 (부드러운 화면 전환 추가!) */
.chara-col img {
    width: 170px;  
    height: 210px;
    object-fit: cover;   
    object-position: center top; 
    
    background-color: #fff;
    padding: 8px 8px 25px 8px; 
    border: 1px solid #E5E5E5;
    border-radius: 2px;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.15); 
    
    /* 💡 마법 핵심: 위치, 그림자뿐만 아니라 '투명도(opacity)'도 0.3초 동안 부드럽게 변하도록 추가! */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; 
    
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* 살짝 삐뚤게 (감성 한 스푼) */
#chara-malfoy { transform: rotate(-3deg); }
#chara-dreamju { transform: rotate(3deg); }

/* 마우스 올리면 정면으로 돌아오기 */
.chara-col img:hover {
    transform: rotate(0deg) scale(1.05) translateY(-5px) !important;
    box-shadow: 5px 10px 20px rgba(0,0,0,0.2); 
    z-index: 10;
}

/* 📝 팝업 설명창 (가운데 정렬 깨짐 방지 & 예쁜 메모장 디자인!) */
.profile-info-box {
    background-color: #fff;
    border-left: 3px solid #C8DF59; /* 포인트 컬러 테두리 */
    padding: 15px 20px;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.08);
    border-radius: 0 4px 4px 0;
    width: 240px;
    text-align: left; /* 💡 글씨가 가운데로 뭉치지 않고 왼쪽부터 차분하게 읽히도록 수정! */
    line-height: 1.6;
    font-size: 13px;
    color: #444;
    animation: fadeIn 0.3s ease; /* 스르륵 나타나는 효과 */
}

.info-title {
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 16px;
    color: #2C2C2C;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.info-desc {
    word-break: keep-all; /* 단어가 뚝뚝 끊기지 않고 예쁘게 줄바꿈됨 */
}

.click-to-close {
    display: block;
    margin-top: 15px;
    font-size: 11px;
    color: #999;
    text-align: center;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 📜 나타나는 양피지 프로필 박스 디자인 */
.profile-info-box {
    width: 100%;
    max-height: 350px;
    background-color: #FAFAFA; 
    border: 1px dashed #2C2C2C; 
    border-radius: 8px;
    padding: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    box-sizing: border-box;
    overflow-y: auto;
    animation: fadeIn 0.4s ease; 
    /* ★ 폰트를 깔끔한 프리텐다드로 변경! */
    font-family: 'Pretendard', sans-serif;
}

.info-title {
    font-size: 15px; /* 기존 18px -> 15px로 축소 */
    font-weight: 800; /* 제목은 눈에 띄게 굵게 */
    color: #1A472A; 
    border-bottom: 2px solid #C8DF59;
    padding-bottom: 8px;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 1px; /* 자간을 살짝 넓혀서 세련되게 */
}

.info-desc {
    font-size: 13px; /* 기존 13px -> 11.5px로 축소 */
    line-height: 1.8; /* 글씨가 작아진 대신 줄간격을 넓혀서 읽기 편하게! */
    margin: 5px 0;
    color: #2C2C2C;
    word-break: keep-all; /* 단어가 중간에 뚝 끊기지 않게 깔끔하게 줄바꿈 */
}

.info-desc hr {
    border: none;
    border-top: 1px dotted #2C2C2C;
    margin: 15px 0;
}

.click-to-close {
    font-size: 10px !important; /* 안내문구도 더 작게 */
    color: #999 !important; /* 색을 조금 더 연하게 해서 튀지 않게 */
    text-align: center;
    margin-top: 20px !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* 🔖 가로 리본 책갈피 (학년 선택) */
.year-ribbons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: absolute;
    right: -45px; /* 다이어리 오른쪽 밖으로 살짝 튀어나오게! */
}

.year-btn {
    background-color: #2C2C2C;
    color: #FCFBF7;
    padding: 10px 15px 10px 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    /* CSS 마법: 리본 오른쪽 끝을 V자로 파이게 자르기 */
    clip-path: polygon(0% 0%, 100% 0%, 85% 50%, 100% 100%, 0% 100%);
    transition: all 0.3s ease;
}

/* 마우스를 올리거나 클릭(활성화) 되었을 때 */
.year-btn:hover {
    background-color: #1A472A; /* 슬리데린 딥그린 */
    transform: translateX(-5px); /* 왼쪽으로 살짝 당겨짐 */
}

.year-btn.active {
    background-color: #C8DF59; /* 황녹색 포인트 */
    color: #2C2C2C;
    transform: translateX(-10px); /* 선택된 책갈피는 더 튀어나옴 */
}

/* -------------------------------------------
   [메인 홈 화면 간격 복구]
------------------------------------------- */
#main-home-view {
    display: flex;
    flex-direction: column;
    gap: 25px; /* 공지사항 박스와 아래 위젯 박스 사이의 넉넉한 간격 */
}

/* -------------------------------------------
   [✨ 예쁜 커스텀 스크롤바 마법]
------------------------------------------- */

/* 1. 블로그 전체 페이지 스크롤바 */
::-webkit-scrollbar {
    width: 10px;  /* 세로 스크롤바 굵기 */
    height: 10px; /* 가로 스크롤바 굵기 */
}

::-webkit-scrollbar-track {
    background: #FAFAFA; /* 트랙(바탕)은 다이어리 배경색인 아이보리로! */
}

::-webkit-scrollbar-thumb {
    background: #2C2C2C; /* 손잡이는 깔끔한 차콜 블랙 */
    border-radius: 10px; /* 위아래를 동그랗게 깎아줍니다 */
    border: 3px solid #FAFAFA; /* 손잡이 주변에 여백을 줘서 더 얇고 예뻐 보이게! */
}

::-webkit-scrollbar-thumb:hover {
    background: #1A472A; /* 마우스를 올리면 슬리데린 딥그린으로 변함! */
}


/* 2. 📜 캐릭터 팝업(양피지) 안쪽 전용 얇은 스크롤바 */
.profile-info-box::-webkit-scrollbar {
    width: 6px; /* 팝업창은 공간이 작으니 더 얇고 앙증맞게! */
}

.profile-info-box::-webkit-scrollbar-track {
    background: transparent; /* 양피지 배경이 보이도록 투명하게 */
}

.profile-info-box::-webkit-scrollbar-thumb {
    background: #C8DF59; /* 손잡이는 두 사람의 포인트 컬러인 황녹색! */
    border-radius: 10px;
    border: none; /* 여기는 여백 없이 꽉 찬 동그라미로 */
}

.profile-info-box::-webkit-scrollbar-thumb:hover {
    background: #1A472A; /* 마우스를 올리면 슬리데린 딥그린으로 변함! */
}

/* -------------------------------------------
   [⏳ 타임라인 화면 전용 스타일]
------------------------------------------- */
.timeline-box-wrapper {
    height: 407px; /* 왼쪽 책장, 캐릭터 화면과 높이 통일 */
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

/* 타임라인 제목 (명조체) */
.timeline-main-title {
    text-align: center;
    font-size: 20px;
    color: #1A472A;
    margin: 0 0 15px 0;
    font-family: 'Georgia', serif;
    border-bottom: 2px solid #C8DF59;
    padding-bottom: 10px;
    letter-spacing: 2px;
}

/* 스크롤되는 타임라인 영역 (프리텐다드 폰트 적용) */
.timeline-container {
    flex: 1;
    overflow-y: auto; /* 내용이 많으면 세로 스크롤 생성 */
    position: relative;
    padding: 10px 0;
    font-family: 'Pretendard', sans-serif; 
}

/* 타임라인 전용 얇은 스크롤바 (아까 만든 팝업 스크롤바와 세트!) */
.timeline-container::-webkit-scrollbar { width: 6px; }
.timeline-container::-webkit-scrollbar-track { background: transparent; }
.timeline-container::-webkit-scrollbar-thumb { background: #C8DF59; border-radius: 10px; }
.timeline-container::-webkit-scrollbar-thumb:hover { background: #1A472A; }

/* 📏 가운데 차콜색 중심선 (스크롤 끝까지 이어지도록 수정!) */
.timeline-track {
    position: relative;
    padding: 10px 0;
}

.timeline-track::before {
    content: '';
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 50%;
    width: 2px;
    background-color: #2C2C2C;
    transform: translateX(-50%);
}

/* 개별 이벤트 래퍼 (왼쪽/오른쪽 분배) */
.timeline-item {
    position: relative;
    width: 50%; /* 반쪽씩 차지 */
    box-sizing: border-box;
    margin-bottom: 25px;
}

.timeline-item.left {
    left: 0;
    padding-right: 30px;
    text-align: right; /* 왼쪽 항목은 글씨를 오른쪽 정렬 */
}

.timeline-item.right {
    left: 50%;
    padding-left: 30px;
    text-align: left; /* 오른쪽 항목은 글씨를 왼쪽 정렬 */
}

/* 🟢 선 위에 찍히는 동그란 노드(점) */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background-color: #FAFAFA;
    border: 3px solid #C8DF59; /* 황녹색 테두리 */
    border-radius: 50%;
    top: 15px; 
    z-index: 1;
}
.timeline-item.left::after { right: -9px; }
.timeline-item.right::after { left: -9px; }

/* 📝 이벤트 내용이 담기는 메모장 박스 */
.timeline-content {
    background-color: #FAFAFA;
    border: 1px dashed #2C2C2C;
    padding: 15px;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
.timeline-content:hover {
    transform: translateY(-3px); /* 마우스 올리면 살짝 뜸 */
    border-color: #1A472A; /* 테두리 초록색으로 변경 */
}

/* 날짜, 제목, 내용 꾸미기 */
.time-date {
    display: inline-block;
    background-color: #2C2C2C;
    color: #C8DF59;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 12px;
    margin-bottom: 10px;
}
.time-title {
    font-size: 14px;
    font-weight: 800;
    color: #1A472A;
    margin-bottom: 8px;
}
.time-desc {
    font-size: 11.5px;
    line-height: 1.6;
    color: #2C2C2C;
    word-break: keep-all;
    margin: 0;
}

/* -------------------------------------------
   [🦉 방명록(Owl Post) 전용 스타일]
------------------------------------------- */
.guestbook-box-wrapper {
    height: 407px; 
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Pretendard', sans-serif;
}

/* Owl Post 제목 */
.guestbook-main-title {
    text-align: center;
    font-size: 20px;
    color: #1A472A;
    margin: 0 0 15px 0;
    font-family: 'Georgia', serif;
    border-bottom: 2px solid #C8DF59;
    padding-bottom: 10px;
    letter-spacing: 2px;
}

/* 📝 편지 쓰는 곳 (입력 폼) */
.guestbook-write-form {
    background-color: #FAFAFA;
    border: 1px dashed #2C2C2C;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.guest-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* 이름, 비밀번호 입력칸 (밑줄만 있는 깔끔한 스타일) */
.gb-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #2C2C2C;
    background: transparent;
    padding: 5px;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    outline: none;
}
.gb-input:focus { border-bottom: 2px solid #C8DF59; }

/* 편지 내용 입력칸 */
.gb-textarea {
    width: 100%;
    height: 50px;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    resize: none; /* 크기 조절 막기 */
    outline: none;
    margin-bottom: 10px;
}
.gb-textarea:focus { border: 1px solid #C8DF59; }

/* 편지 보내기 버튼 */
.gb-submit-btn {
    width: 100%;
    background-color: #2C2C2C;
    color: #FAFAFA;
    border: none;
    padding: 8px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gb-submit-btn:hover { background-color: #1A472A; }
.gb-submit-btn:active { transform: scale(0.98); } /* 누를 때 쏙 들어가는 효과 */

/* 📬 남겨진 편지들 목록 (스크롤 영역) */
.guestbook-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
}

/* 방명록 스크롤바 커스텀 (타임라인과 동일) */
.guestbook-list::-webkit-scrollbar { width: 6px; }
.guestbook-list::-webkit-scrollbar-track { background: transparent; }
.guestbook-list::-webkit-scrollbar-thumb { background: #C8DF59; border-radius: 10px; }
.guestbook-list::-webkit-scrollbar-thumb:hover { background: #1A472A; }

/* 개별 편지 박스 */
.gb-reply {
    background-color: #FAFAFA;
    border-left: 3px solid #C8DF59; /* 황녹색 띠 포인트 */
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 0 5px 5px 0;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}

.gb-reply-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 11px;
}
.gb-name { font-weight: bold; color: #1A472A; }
.gb-date { color: #999; }
.gb-reply-content {
    font-size: 12px;
    color: #2C2C2C;
    line-height: 1.5;
}



/* 2. 수정/삭제 버튼 및 날짜 정렬 */
.gb-right-info {
    display: flex;
    align-items: center;
    gap: 8px; /* 날짜와 버튼 사이 간격 */
}

/* 수정/삭제 버튼 디자인 (깔끔한 라인 버튼) */
.gb-action-btn {
    font-size: 10px;
    color: #999;
    text-decoration: none;
    border: 1px solid #ccc;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.gb-action-btn:hover {
    color: #1A472A;
    border-color: #1A472A;
    background-color: #FAFAFA;
}


/* -------------------------------------------
   [🛠️ 방명록 튀어나감 완벽 방지 (최종 해결!)]
------------------------------------------- */
/* 티스토리 태그의 방해를 피하기 위해 스크롤 영역을 가장 바깥으로 뺐습니다 */
.guestbook-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    min-height: 0;
}

/* 방명록 전체 스크롤바 커스텀 */
.guestbook-scroll-area::-webkit-scrollbar { width: 6px; }
.guestbook-scroll-area::-webkit-scrollbar-track { background: transparent; }
.guestbook-scroll-area::-webkit-scrollbar-thumb { background: #C8DF59; border-radius: 10px; }
.guestbook-scroll-area::-webkit-scrollbar-thumb:hover { background: #1A472A; }

/* 기존에 좁게 스크롤 되던 글 목록은 스크롤을 끄고 자연스럽게 늘어나게 합니다 */
.guestbook-list {
    flex: none !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
}

/* 수정/삭제 버튼 및 날짜 정렬 */
.gb-right-info {
    display: flex;
    align-items: center;
    gap: 8px; 
}

/* 수정/삭제 버튼 디자인 */
.gb-action-btn {
    font-size: 10px;
    color: #999;
    text-decoration: none;
    border: 1px solid #ccc;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.gb-action-btn:hover {
    color: #1A472A;
    border-color: #1A472A;
    background-color: #FAFAFA;
}

/* -------------------------------------------
   [📝 방명록 글씨 양쪽 정렬 교정]
------------------------------------------- */
/* 1. 남겨진 편지 내용 양쪽 정렬 */
.gb-reply-content {
    text-align: justify !important; /* 양쪽 정렬 마법! */
    word-break: keep-all; /* 단어가 중간에 뚝 끊기지 않게 보호 */
    margin-top: 8px; /* 이름/날짜와 글 내용 사이 간격 살짝 띄우기 */
}

/* 2. 편지 쓰는 곳(입력칸) 글씨는 왼쪽부터 써지도록 교정 */
.gb-input, .gb-textarea {
    text-align: left !important;
}

/* 3. 이름과 날짜 부분도 왼쪽/오른쪽 끝으로 쫙 펴지게 확실히 고정 */
.gb-reply-header {
    text-align: left;
}

/* -------------------------------------------
   [📜 캐릭터 팝업 글씨 양쪽 정렬 교정]
------------------------------------------- */
.info-desc {
    text-align: justify !important; /* 양쪽 정렬 쫙! */
}

/* -------------------------------------------
   [🖼️ 갤러리 리스트(페이징) 전용 스타일]
------------------------------------------- */
.gallery-box-wrapper {
    height: 407px; 
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

.gallery-main-title {
    text-align: center;
    font-size: 20px;
    color: #1A472A;
    margin: 0 0 15px 0;
    font-family: 'Georgia', serif;
    border-bottom: 2px solid #C8DF59;
    padding-bottom: 10px;
    letter-spacing: 2px;
}

/* 스크롤 없애고 컨텐츠를 한가운데로! */
.gallery-content-area {
    flex: 1;
    display: flex;
    align-items: center; /* 3개의 썸네일이 박스 중앙에 오도록 */
}

/* 💡 1. 새로 추가! 갤러리를 감싸는 겉 상자부터 100%로 시원하게 쫙 펴줍니다! */
.gallery-content-area {
    width: 100% !important;
}

/* 💡 2. 수정된 부분! 기존 그리드에 마법의 '대못(!important)'을 박아서 티스토리가 못 찌그러뜨리게 방어! */
.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 1px !important; /* 원래 15px였는데, 3칸이 넓어지면 30px 정도가 훨씬 시원하고 예뻐서 살짝 늘렸습니다! */
    width: 100% !important;
}

.gallery-item {
    background-color: #FAFAFA;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px); 
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    border-color: #C8DF59; 
}

.gallery-link {
    display: block;
    text-decoration: none;
    color: #2C2C2C;
}

.thumb-box {
    width: 100%;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    border-bottom: 1px dashed #ccc;
}

.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.4s ease;
}

.gallery-item:hover .thumb-box img { transform: scale(1.08); }

.item-info {
    padding: 10px;
    text-align: center;
    font-family: 'Pretendard', sans-serif;
}

.item-title {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.item-date { display: block; font-size: 10px; color: #999; }

/* 📖 책장 넘기기 (페이징) 디자인 */
.vintage-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 15px;
    border-top: 1px dotted #2C2C2C; /* 낡은 절취선 느낌 */
    font-family: 'Pretendard', serif;
}

.vintage-pagination a, 
.vintage-pagination span {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #2C2C2C;
    transition: 0.2s;
    cursor: pointer;
}

/* 마우스 올렸을 때 */
.vintage-pagination a:hover {
    color: #1A472A; /* 슬리데린 그린 */
}

/* 현재 내가 보고 있는 페이지 번호 (티스토리가 자동으로 span으로 바꿔줍니다) */
.vintage-pagination span.selected,
.vintage-pagination span {
    color: #C8DF59; /* 현재 페이지는 황녹색 포인트! */
    text-decoration: underline;
}

.page-arrow {
    font-size: 11px !important;
    letter-spacing: 1px;
}
.page-numbers {
    display: flex;
    gap: 15px;
}

/* -------------------------------------------
   [📝 게시글 & 공지사항 본문 전용 스타일]
------------------------------------------- */
.article-box-wrapper {
    height: 407px; 
    padding: 25px 40px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

/* 상단 제목과 날짜 영역 */
.article-header {
    border-bottom: 2px solid #C8DF59; /* 황녹색 밑줄 */
    padding-bottom: 15px;
    margin-bottom: 15px;
    text-align: center;
    flex-shrink: 0;
}

.article-category a {
    font-size: 11px;
    color: #1A472A; /* 슬리데린 그린 */
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Pretendard', sans-serif;
}

.article-title {
    font-size: 24px;
    color: #2C2C2C;
    margin: 10px 0;
    font-family: 'Pretendard', serif; /* 제목은 고전적인 명조체 */
    word-break: keep-all;
}

.article-meta {
    font-size: 11px;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-family: 'Pretendard', sans-serif;
}

.meta-divider { color: #ccc; font-size: 10px; }
.action-btn { color: #999; text-decoration: none; transition: 0.2s; }
.action-btn:hover { color: #1A472A; font-weight: bold; }

/* 본문 스크롤 영역 */
.article-content-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #2C2C2C;
    font-family: 'Pretendard', sans-serif; /* 본문은 깔끔한 고딕 */
    
    text-align: justify !important; /* ★ 양쪽 정렬 교정! */
    word-break: break-all;
}

/* 본문 안의 이미지가 박스를 뚫고 나가지 않게 꽉 잡아주기 */
.article-content-area img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 5px;
    margin: 10px 0;
}

/* 본문 스크롤바 커스텀 */
.article-content-area::-webkit-scrollbar { width: 6px; }
.article-content-area::-webkit-scrollbar-track { background: transparent; }
.article-content-area::-webkit-scrollbar-thumb { background: #C8DF59; border-radius: 10px; }
.article-content-area::-webkit-scrollbar-thumb:hover { background: #1A472A; }

/* -------------------------------------------
   [🔒 비밀글(Protected) 전용 스타일]
------------------------------------------- */
.protected-content-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* 다이어리 박스 정중앙에 오도록 꽉 채움 */
    text-align: center;
    animation: fadeIn 0.4s ease;
}

.lock-icon {
    font-size: 35px;
    margin-bottom: 10px;
    filter: drop-shadow(2px 2px 0px #C8DF59); /* 황녹색 그림자로 귀엽게! */
}

.protected-title {
    font-size: 20px;
    font-weight: bold;
    color: #1A472A; /* 슬리데린 그린 */
    margin-bottom: 15px;
    font-family: 'Pretendard', serif;
}

.protected-desc {
    font-size: 13px;
    line-height: 1.8;
    color: #2C2C2C;
    margin-bottom: 25px;
    font-family: 'Pretendard', sans-serif;
}

.protected-desc strong {
    color: #1A472A;
    font-size: 14px;
}

/* 비밀번호 입력칸 & 버튼 묶음 */
.protected-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.protected-input {
    border: none;
    border-bottom: 2px solid #2C2C2C;
    background: transparent;
    padding: 8px 15px;
    outline: none;
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    letter-spacing: 2px; /* 비밀번호 별표(*)가 널찍하게 찍히도록 */
    width: 150px;
    transition: all 0.3s ease;
}

.protected-input:focus {
    border-bottom-color: #C8DF59; /* 클릭하면 황녹색으로 변함 */
}

.protected-btn {
    background-color: #2C2C2C;
    color: #FAFAFA;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Pretendard', sans-serif;
    transition: all 0.2s ease;
}

.protected-btn:hover {
    background-color: #1A472A; /* 마우스 올리면 슬리데린 그린 */
    transform: translateY(-2px); /* 살짝 위로 뜨는 효과 */
}
.protected-btn:active {
    transform: translateY(0); /* 누를 때 쏙 들어가는 느낌 */
}

/* -------------------------------------------
   [👣 마루더즈 맵 발자국 마법]
------------------------------------------- */
.marauder-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* 발자국 때문에 클릭이 안 되는 일 방지! */
    z-index: -1; /* 배경색 바로 위, 다이어리 상자들보다 아래에 깔림 */
    overflow: hidden;
}

.footprint {
    position: absolute;
    width: 15px; /* 발자국 크기 (원하시면 숫자를 키워도 됩니다) */
    height: 35px;
    
    /* ★ 여기에 업로드하실 발자국 이미지(png) 주소를 넣어주세요! */
    background-image: url('https://tistory1.daumcdn.net/tistory/8553795/skin/images/footprint1.png'); 
    
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0; /* 처음엔 투명하게 숨김 */
    transition: opacity 1.5s ease-in-out; /* 잉크가 스며들듯 스르륵 나타남 */
}

/* -------------------------------------------
   [✨ 부드러운 화면 전환 마법 (페이드인)]
------------------------------------------- */
@keyframes smoothFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(8px); /* 살짝 아래에서 */
    }
    to { 
        opacity: 1; 
        transform: translateY(0);   /* 제자리로 스르륵 */
    }
}

/* 우리가 만든 모든 카테고리 화면에 애니메이션 일괄 적용! */
#main-home-view, 
#character-category-view, 
#timeline-category-view, 
#guestbook-category-view, 
#gallery-list-view, 
#article-read-view {
    animation: smoothFadeIn 0.5s ease-out forwards;
}

/* -------------------------------------------
   [✨ 난이도 1: 드래그 색상 & 마법 커서]
------------------------------------------- */

/* 1. 글씨를 드래그할 때 나오는 형광펜 색상 (후플푸프 웜옐로우 💛) */
::selection {
    background-color: #F0C75E; 
    color: #2C2C2C; /* 드래그된 글씨는 깔끔한 차콜색으로 */
}

/* (파이어폭스 브라우저 호환용) */
::-moz-selection {
    background-color: #F0C75E;
    color: #2C2C2C;
}

/* =======================================
   [🚀 위로 가기 (↑) 동글동글 스크랩북 버튼!]
   ======================================= */
.top-btn {
    position: fixed;
    bottom: 50px; /* 버튼 높이 살짝 올림 */
    right: 50px;
    cursor: pointer;
    z-index: 1000;
    
    /* 처음엔 투명하게 숨겨둠 (기존 유지) */
    opacity: 0; 
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;

    /* 💡 [수정됨] 사용자님이 원하신 동글동글 캡슐 버튼 디자인! */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 45px; /* 버튼 크기 */
    height: 45px;
    background-color: #FAFAFA !important; /* 다이어리 기본 배경색 */
    border: 1px solid #1A472A !important; /* 슬리데린 그린 테두리 */
    border-radius: 50% !important; /* 💡 캡슐보다 더 동그랗고 귀여운 원형 버튼! */
    
    /* 이미지가 배경에 묻히지 않게 예쁜 입체 그림자 추가 */
    box-shadow: 2px 4px 6px rgba(0,0,0,0.1) !important;
}

/* 💡 동글동글 화살표(↑) 글씨 디자인 */
.top-arrow {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 800; /* 아주 굵게 */
    color: #1A472A !important; /* 슬리데린 그린 */
    margin-top: -2px; /* 화살표 위치 미세 조정 */
}

/* 마법(JS)이 걸리면 화면에 스르륵 나타남 */
.top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 마우스를 올리면 날아갈 준비 완료! (후플푸프 빛으로 변신!) */
.top-btn:hover {
    background-color: #F0C75E !important; /* 후플푸프 옐로우 포인트! */
    border-color: #F0C75E !important;
    transform: scale(1.1) !important; /* 살짝 떠오르며 까딱! */
    filter: drop-shadow(0px 0px 10px #C8DF59) !important; 
}
.top-btn:hover .top-arrow {
    color: #2C2C2C !important;
}

/* -------------------------------------------
   [🎵 BGM 플레이어 전용 스타일]
------------------------------------------- */
.bgm-player-wrap {
    position: fixed;
    bottom: 40px;
    left: 40px; /* 탑 버튼과 반대인 왼쪽 아래에 배치! */
    z-index: 1000;
}

/* 스위치 기본 디자인 */
.bgm-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #FAFAFA; /* 다이어리 기본 배경색 */
    border: 2px solid #2C2C2C;
    padding: 8px 15px;
    border-radius: 20px; /* 알약 모양으로 둥글게 */
    box-shadow: 2px 2px 0px #C8DF59; /* 황녹색 그림자 포인트 */
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #2C2C2C;
    user-select: none; /* 글씨 드래그 방지 */
}

/* 마우스 올렸을 때 살짝 뜨는 효과 */
.bgm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px 0px #1A472A; /* 슬리데린 그린으로 그림자 변신! */
}

.music-icon {
    font-size: 14px;
    display: inline-block;
}

/* 🎧 음악 재생 중일 때의 변화 마법! */
.bgm-btn.playing {
    background-color: #F0C75E; /* 스위치가 켜지면 후플푸프 색상으로! */
    box-shadow: 2px 2px 0px #1A472A; 
}

/* 재생 중일 때 음표가 둠칫둠칫 춤추는 애니메이션 */
.bgm-btn.playing .music-icon {
    animation: bounceMusic 0.8s infinite alternate ease-in-out;
}

@keyframes bounceMusic {
    from { transform: translateY(0) rotate(-10deg); }
    to { transform: translateY(-3px) rotate(15deg); }
}


/* =======================================
   [PC/공통] 공지사항 & 게시글 넓게 쓰기! (스크롤바 바깥으로 밀어내기)
   ======================================= */
.article-box-wrapper {
    width: 100%; 
    margin: 0 auto; 
    
    /* 💡 여기가 핵심! 양옆 80px이었던 두꺼운 여백을 30px로 확 깎아냈습니다! 
       (이제 스크롤바가 상자 바깥쪽으로 시원하게 밀려납니다) */
    padding: 50px 30px; 
    
    box-sizing: border-box;
    min-height: 400px; 
}

/* 게시글 제목 부분 다듬기 */
.article-header {
    text-align: center; 
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #D4C5B9; 
}

/* 💡 내용물 영역도 좁아지지 않게 강제로 넓혀줍니다! */
.article-content-area {
    width: 100% !important; 
    box-sizing: border-box;
    padding-right: 15px; /* 스크롤바와 본문 글씨가 너무 바짝 붙지 않게 숨구멍 내기 */
    
    /* 본문을 가운데 정렬로 쓰시려면 아래 줄 유지, 왼쪽 정렬이 좋으면 지우세요! */
    text-align: center; 
    line-height: 1.8; 
    font-size: 15px;
}

/* -------------------------------------------
   [✨ 루모스/녹스 이스터에그 스타일]
------------------------------------------- */
.lumos-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    pointer-events: none; /* 불빛 아래에 있는 버튼이나 글씨를 정상적으로 클릭할 수 있게 해줌! */
    z-index: 9999; /* 화면의 가장 맨 위로 올라옴 */
    
    /* 처음에는 투명하게 숨겨둠 */
    opacity: 0;
    transition: opacity 1s ease; /* 1초 동안 스르륵 켜지고 꺼지는 부드러운 효과 */
    
    /* 마우스 좌표(var)를 따라다니는 손전등 불빛 효과 */
    background: radial-gradient(circle 250px at var(--cursor-x, 50%) var(--cursor-y, 50%), transparent 0%, rgba(0, 0, 0, 0.9) 80%);
}

/* 루모스 주문이 성공해서 active 클래스가 붙으면 화면이 어두워짐! */
.lumos-overlay.active {
    opacity: 1; 
}

/* -------------------------------------------
   [🦌 패트로누스 이스터에그 (푸른빛 + 테두리 제거!)]
------------------------------------------- */
.patronus-anim {
    position: fixed;
    bottom: 25%; 
    left: -300px; 
    height: 300px; 
    z-index: 9998;
    pointer-events: none;
    opacity: 0;

    /* 1. 검은 배경 투명하게 */
    mix-blend-mode: screen;

    /* ✨ 방어 마법 1: 테두리를 안개처럼 부드럽게 지워버리는 마스크! */
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 50%, transparent 100%);

    /* ✨ 방어 마법 2: contrast(300%)로 회색 찌꺼기를 까맣게 태워버리기! */
    filter: contrast(300%) brightness(80%) sepia(100%) hue-rotate(200deg) saturate(300%) drop-shadow(0 0 15px rgba(100, 220, 255, 0.8));
}

/* (아래 애니메이션 코드는 그대로 둡니다!) */
.patronus-run {
    animation: patronusMove 4.5s linear forwards;
}

@keyframes patronusMove {
    0% { left: -300px; opacity: 0; }
    10% { opacity: 1; } /* 나타날 땐 선명하게! */
    50% { transform: translateY(-30px); } /* 살짝 위로 둥실 */
    90% { opacity: 1; }
    100% { left: 100vw; opacity: 0; } /* 화면 오른쪽 밖으로 퇴장 */
}

/* -------------------------------------------
   [🌑 디멘터의 어둠 (가장자리 그라데이션)]
------------------------------------------- */
.patronus-dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* 💡 마법 핵심: 중앙은 투명하고, 가장자리로 갈수록 칠흑같이 어두워지는 그라데이션! */
    /* - transparent 20%: 중앙 원형 부분은 완전히 투명하게 비워둠 (패트로누스 길) */
    /* - rgba(...) 70%: 중간 부분부터 스산한 남색 어둠이 깔리기 시작 */
    /* - rgba(...) 100%: 가장자리는 거의 빛이 없는 검은색으로 만듦 */
    background: radial-gradient(circle at 50% 50%, 
                transparent 20%, 
                rgba(10, 15, 30, 0.7) 60%, 
                rgba(0, 0, 5, 0.95) 100%);

    z-index: 9997;
    pointer-events: none;
    animation: darkFadeInOut 4.5s ease forwards; /* 스르륵 나타났다 사라지는 효과 유지 */
}

/* (아래 darkFadeInOut 애니메이션 코드는 그대로 두시면 됩니다!) */
@keyframes darkFadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

/* 어둠이 스르륵 깔렸다가 패트로누스와 함께 사라지는 애니메이션 */
@keyframes darkFadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

/* -------------------------------------------
   [💖 아모텐시아 (Amortentia) 이스터에그]
------------------------------------------- */
.amortentia-bubble {
    position: fixed;
    bottom: -50px;
    font-size: 24px;
    z-index: 9999;
    pointer-events: none; /* 클릭 방해 금지 */
    /* ease-in 대신 linear를 써야 브레이크 없이 일정하게 쭉 올라가! */
    animation: floatUp 5s linear forwards; 
    opacity: 0; /* 처음엔 투명하게 대기 */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

/* 아래에서 위로 살랑살랑 흔들리며 멈춤 없이 올라가는 애니메이션 */
@keyframes floatUp {
    0% { 
        transform: translateY(0) translateX(0) scale(0.5); 
        opacity: 0; 
    }
    20% { 
        /* 총 거리(120vh)의 딱 20% 지점(-24vh)을 계산해서 넣었어! */
        transform: translateY(-24vh) translateX(20px) scale(0.8); 
        opacity: 1; 
    }
    50% { 
        transform: translateY(-60vh) translateX(-15px) scale(1.1); 
        opacity: 1;
    }
    80% {
        transform: translateY(-96vh) translateX(15px) scale(1.3);
        opacity: 1;
    }
    100% { 
        transform: translateY(-120vh) translateX(-20px) scale(1.5); 
        opacity: 0; 
    }
}

/* -------------------------------------------
   [💨 날쌘 골든 스니치 미니게임 이스터에그]
------------------------------------------- */
.golden-snitch-game {
    position: fixed;
    width: 60px; /* 스니치 크기 */
    height: auto;
    z-index: 10000;
    cursor: crosshair; /* 마우스 커서가 사냥용 십자선으로 변합니다! */
    transition: top 0.5s ease-out, left 0.5s ease-out; /* 0.5초마다 부드럽고 빠르게 이동! */
    filter: drop-shadow(0 0 10px #F0C75E); /* 후플푸프 금빛 그림자 */
}

/* -------------------------------------------
   [🤫 필요의 방 전용: 제목/날짜 숨기기 마법]
------------------------------------------- */
/* 'room-of-requirement' 꼬리표가 붙은 몸통 안에 있는 헤더는 숨겨라! */
body.room-of-requirement .article-header {
    display: none !important;
}

/* 헤더가 사라진 만큼 본문 내용을 위로 올려서 꽉 차게 보여줍니다 */
body.room-of-requirement .article-content-area {
    padding-top: 0 !important;
    height: 100% !important; /* 박스 높이에 딱 맞게 */
}

/* ==========================================
   🚪 [필요의 방] 나갔다 들어와도 찌그러짐 철벽 방어 마법!
   ========================================== */
body.room-of-requirement .article-content-area,
body.room-of-requirement .tt_article_useless_p_margin {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.room-of-requirement .cyworld-wrapper-new {
    width: 100% !important;
    min-width: 100% !important;
}

/* -------------------------------------------
   [🔒 비밀글 기본 썸네일 덮어쓰기 마법!]
------------------------------------------- */
.gallery-link {
    position: relative;
    display: block; 
}

/* 썸네일 상자 기본 설정 (찌그러짐 방지) */
.thumb-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* 1:1 정사각 비율 */
    overflow: hidden;
    border-radius: 4px; /* 테두리 살짝 둥글게 */
    background-color: #FDFBF7; /* 이미지 로딩 전 양피지 색 */
}

.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 꽉 차게 예쁘게 잘림 */
}

/* 💡 진짜 썸네일이 있으면 기본 썸네일 위로 올라와서 덮어버림! */
.real-thumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* 기본 썸네일보다 높은 권력! */
    background-color: #fff; /* 투명한 png가 올라와도 아래가 안 비치게 철벽 방어 */
}

/* =======================================
   [📝 본문 영역 쫙 펴기: 제목은 작게, 왼쪽 구석으로!]
   ======================================= */

/* 1. 상자 안쪽의 낭비되던 위아래 여백(padding)을 깎아냅니다! */
.article-box-wrapper {
    padding: 30px 30px !important; /* 기존 50px에서 30px로 확 줄여서 본문 공간 확보! */
}

/* 2. 한가운데서 자리 차지하던 헤더(제목 구역)를 왼쪽으로 밀고 압축! */
.article-header {
    text-align: left !important; /* 💡 글씨를 전부 왼쪽 정렬! */
    margin-bottom: 15px !important; /* 본문과의 거리를 대폭 줄임 (기존 40px -> 15px) */
    padding-bottom: 0 !important; /* 불필요한 패딩 제거 */
    border-bottom: none !important; /* 💡 작은 글씨 밑에 점선이 있으면 이상해서 지웠습니다! */
}

/* 3. 카테고리 글씨 아주 작게 */
.article-category a {
    font-size: 10px !important; 
}

/* 4. 거대했던 제목 글씨를 작고 단정하게 축소! */
.article-title {
    font-size: 17px !important; /* 기존 24px -> 17px로 축소 */
    margin: 3px 0 5px 0 !important; /* 위아래 여백 거의 없애기 */
}

/* 5. 날짜와 수정/삭제 버튼도 왼쪽으로 붙이고 작게! */
.article-meta {
    justify-content: flex-start !important; /* 💡 가운데 모여있던 걸 왼쪽 끝으로 밀어줍니다 */
    font-size: 10px !important; 
}

/* 본문은 건드리지 않고 넓게 유지! */
.article-content-area {
    text-align: justify !important; /* 본문은 깔끔하게 양쪽 정렬 */
}

/* =======================================
   [📝 제목 고정 해제 & 전체 스크롤로 변경!]
   ======================================= */

/* 1. 하얀색 겉 상자가 스크롤되도록 설정 */
.article-box-wrapper {
    overflow-y: auto !important; 
    padding-right: 15px !important; 
    
    /* 💡 핵심 마법: 수직 중앙 정렬을 강제로 해제하고 맨 위(top)에서부터 시작하게 만듭니다! */
    justify-content: flex-start !important; 
    align-items: stretch !important;
}

/* 2. 안쪽 본문 글씨 구역의 답답한 스크롤 기능 끄기 */
.article-content-area {
    overflow-y: visible !important; 
    flex: none !important; 
    height: auto !important; 
}

/* 3. 예쁜 황녹색 스크롤바 겉 상자로 이사 */
.article-box-wrapper::-webkit-scrollbar { width: 6px; }
.article-box-wrapper::-webkit-scrollbar-track { background: transparent; }
.article-box-wrapper::-webkit-scrollbar-thumb { background: #C8DF59; border-radius: 10px; }
.article-box-wrapper::-webkit-scrollbar-thumb:hover { background: #1A472A; }

/* 기존 안쪽 스크롤바는 투명하게 숨기기 */
.article-content-area::-webkit-scrollbar { display: none; }

/* =======================================
   [📖 동글동글 귀여운 버튼 & 스르륵 접은글 마법!]
   ======================================= */

/* 1. 겉 상자 투명하게 (커다란 박스 제거) */
div[data-ke-type="moreLess"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}

/* 2. 동글동글 작고 귀여운 캡슐 토글 버튼 */
div[data-ke-type="moreLess"] .btn-toggle-moreless {
    display: inline-flex !important; /* 💡 화면을 꽉 채우지 않고 글씨 크기에 맞춰 쏙 작아집니다! */
    align-items: center !important;
    gap: 8px !important; /* 화살표와 글씨 사이 간격 */
    
    background-color: #fff !important;
    background-image: none !important; /* 기본 못생긴 아이콘 제거 */
    border: 1px solid #1A472A !important; /* 슬리데린 그린 테두리 */
    border-radius: 20px !important; /* 올려주신 사진처럼 동글동글 캡슐 모양! */
    padding: 5px 15px !important; /* 버튼 안쪽 여백 다이어트 */
    
    font-family: 'Pretendard', sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #1A472A !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.04) !important;
}

/* 3. 화살표(▼) 버튼 '왼쪽'에 귀엽게 달아주기 */
div[data-ke-type="moreLess"] .btn-toggle-moreless::before {
    content: '▼' !important;
    font-size: 8px !important;
    color: #1A472A !important;
    transition: transform 0.4s ease !important;
}

/* (예전 코드의 오른쪽 화살표는 삭제) */
div[data-ke-type="moreLess"] .btn-toggle-moreless::after { display: none !important; }

/* 4. 마우스 올리거나 버튼이 열렸을 때의 색상 반전 (감성 폭발!) */
div[data-ke-type="moreLess"]:hover .btn-toggle-moreless,
div[data-ke-type="moreLess"].open .btn-toggle-moreless {
    background-color: #1A472A !important;
    color: #FAFAFA !important;
    box-shadow: 2px 4px 8px rgba(26,71,42,0.2) !important;
}
div[data-ke-type="moreLess"]:hover .btn-toggle-moreless::before,
div[data-ke-type="moreLess"].open .btn-toggle-moreless::before {
    color: #C8DF59 !important; /* 열리면 화살표가 황녹색 포인트로 짠! */
}

/* 열렸을 때 화살표 위로 휙! */
div[data-ke-type="moreLess"].open .btn-toggle-moreless::before {
    transform: rotate(180deg) !important;
}

/* 5. 열렸을 때 스르륵~ 부드럽게 내려오는 본문 상자 */
div[data-ke-type="moreLess"] .moreless-content {
    margin-top: 10px !important; /* 버튼과 상자 사이 숨구멍 */
    padding: 20px !important;
    background-color: #FAFAFA !important; /* 양피지 배경 */
    border: 1px dashed #D4C5B9 !important; /* 다이어리 점선 테두리 */
    border-radius: 8px !important;
    
    font-family: 'Pretendard', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #2C2C2C !important;
    
    /* 💡 핵심 마법! 그냥 뚝 켜지는 게 아니라, 위에서 아래로 스르륵 내려오는 효과! */
    display: none;
}

div[data-ke-type="moreLess"].open .moreless-content {
    display: block !important;
    animation: unfoldContent 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

@keyframes unfoldContent {
    0% {
        opacity: 0;
        transform: translateY(-10px); 
        clip-path: inset(0 0 100% 0); /* 윗부분만 얇게 보이다가... */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0); /* 스르륵 아래까지 종이가 펼쳐집니다! */
    }
}




/* =======================================
   [🔮 세나리아 오늘의 운세 마법]
   ======================================= */
/* 왼쪽 아래 BGM 플레이어 바로 위에 배치 */
.fortune-btn-wrap {
    position: fixed;
    bottom: 90px; 
    left: 40px;
    z-index: 1000;
}

/* 운세 팝업창 전체 화면 덮기 */
.fortune-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(26, 71, 42, 0.85); /* 슬리데린 그린 반투명 */
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity 0.4s ease;
}

.fortune-overlay.hidden {
    opacity: 0; pointer-events: none;
}

/* 예쁜 양피지 느낌의 운세 결과 상자 */
.fortune-box {
    background: #FAFAFA;
    padding: 30px; 
    border-radius: 12px;
    border: 2px dashed #C8DF59; /* 황녹색 점선 포인트 */
    text-align: center; 
    width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    animation: fadeIn 0.4s ease;
}

.fortune-title { 
    font-family: 'Georgia', serif; 
    color: #1A472A; 
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
}

.fortune-text { 
    font-size: 13.5px; 
    line-height: 1.8; 
    color: #2C2C2C; 
    margin: 20px 0; 
    word-break: keep-all;
}

.fortune-close-btn {
    background: #2C2C2C; color: #FCFBF7;
    border: none; padding: 8px 25px; border-radius: 5px; 
    cursor: pointer; font-weight: bold; font-family: 'Pretendard', sans-serif;
    transition: all 0.2s ease;
}

.fortune-close-btn:hover { background: #1A472A; transform: translateY(-2px); }


/* =======================================
   [✨ 커스텀 마법 알림창]
   ======================================= */
.custom-alert-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(26, 71, 42, 0.4); /* 배경은 슬리데린 그린 반투명 */
    z-index: 9999999; /* 화면 최상단으로! */
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity 0.3s ease;
}

.custom-alert-overlay.hidden {
    opacity: 0; pointer-events: none;
}

.custom-alert-box {
    background: #FCFBF7; /* 양피지 배경 */
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #C8DF59; /* 황녹색 테두리 포인트 */
    text-align: center;
    width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    /* 뿅! 하고 튀어나오는 귀여운 등장 효과 */
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-alert-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #2C2C2C;
    margin: 0 0 20px 0;
    word-break: keep-all;
}

.custom-alert-btn {
    background: #2C2C2C; color: #FCFBF7;
    border: none; padding: 8px 30px; border-radius: 5px;
    cursor: pointer; font-weight: bold;
    font-family: 'Pretendard', sans-serif;
    transition: all 0.2s ease;
}

.custom-alert-btn:hover { 
    background: #1A472A; 
    transform: translateY(-2px); 
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* 모바일 화면 위치 조정 */
@media screen and (max-width: 800px) {
    .fortune-btn-wrap {
        bottom: 70px !important;
        left: 14px !important;
    }
}

/* =======================================
   [📱 모바일 메인 홈 뷰 픽셀 단위 위치 조절 마법]
   ======================================= */
@media screen and (max-width: 800px) {
    #main-home-view {
        flex-direction: column !important;
        
        /* 💡 핵심 마법! 위에서부터 얼만큼 밀어내서 띄울지 픽셀(px)로 직접 정합니다 */
        /* 숫자가 커지면 아래로 더 내려가고, 작아지면 위로 올라가요! */
        margin-top: 120px !important; 
        
        /* 아래쪽 여백은 깔끔하게 기본으로 되돌림 */
        min-height: auto !important; 
        justify-content: flex-start !important;
        padding-bottom: 20px !important; 
    }
}

@keyframes magicPulse {
    0% { opacity: 0.3; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1.05); text-shadow: 0 0 15px rgba(200, 223, 89, 0.8); }
}

/* =======================================
       [📱 모바일 전용: 게시글 착착! 시간차 등장 마법]
       ======================================= */
       
    /* 1. 하얀 배경 상자는 살짝 더 경쾌하고 빠르게 등장! */
    #article-read-view .article-box-wrapper {
        animation: mobileBoxAppear 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
    }

    /* 2. 상자 안의 내용물(제목, 본문)은 일단 투명하게 숨겨두기 */
    #article-read-view .article-header,
    #article-read-view .article-content-area {
        opacity: 0; /* 처음엔 안 보이게 숨김 */
        animation: mobileContentAppear 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
    }

    /* 3. 💡 핵심 마법! 등장하는 시간(딜레이)을 서로 다르게 줍니다! */
    #article-read-view .article-header {
        animation-delay: 0.25s !important; /* 상자가 깔리고 0.25초 뒤 제목 등장! */
    }
    
    #article-read-view .article-content-area {
        animation-delay: 0.45s !important; /* 제목 나오고 0.2초 더 뒤에 본문 등장! */
    }

    /* 4. 착착 등장하는 전용 애니메이션 움직임 설정 */
    @keyframes mobileBoxAppear {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes mobileContentAppear {
        from { opacity: 0; transform: translateY(15px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ============================================================
   ✅ 수정된 CSS 패치
   
   적용 방법:
   기존 style.css에서 아래 두 블록을 찾아서 통째로 지우세요:
   
   1) /* 📱 모바일 반응형 변신 마법 (햄버거 메뉴 도입!) 으로 시작하는
      @media screen and (max-width: 800px) { ... } 블록 전체
   
   2) 이전에 제가 준 /* 📱 모바일 스타일 패치 로 시작하는 블록 전체
   
   그리고 이 파일 내용을 style.css 맨 아래에 붙여넣기 하세요.
   ============================================================ */


/* ──────────────────────────────────────────
   📰 게시글 헤더 — 썸네일 배경 + 어둠 레이어
   (PC/모바일 공통 적용)
   ────────────────────────────────────────── */

.article-header {
    position: relative !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: #1A472A !important;
    text-align: left !important;
    flex-shrink: 0 !important;
}

/* 어둠 그라데이션 오버레이 */
.article-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.5) 55%,
        rgba(0,0,0,0.78) 100%
    );
    z-index: 1;
    border-radius: inherit;
}

/* 헤더 안 모든 요소를 어둠 위로 */
.article-header > * {
    position: relative;
    z-index: 2;
}

/* JS가 만들어주는 inner wrapper */
.article-header-inner {
    padding: 20px 28px 24px;
}

/* 카테고리 */
.article-header .article-category a {
    font-size: 10px !important;
    color: #C8DF59 !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    text-decoration: none;
}

/* 제목 */
.article-header .article-title {
    font-size: 22px !important;
    color: #FAFAFA !important;
    margin: 8px 0 10px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    word-break: keep-all;
}

/* 날짜/메타 */
.article-header .article-meta {
    justify-content: flex-start !important;
    font-size: 11px !important;
    color: rgba(252,251,247,0.65) !important;
}
.article-header .article-meta .action-btn {
    color: rgba(252,251,247,0.55) !important;
}
.article-header .article-meta .meta-divider {
    color: rgba(252,251,247,0.3) !important;
}

/* 공지사항 헤더도 동일하게 */
#article-read-view .article-header {
    min-height: 200px !important;
}


/* =======================================
   [🖋️ 다이어리 감성: 폰트 비율 유지하며 10% 축소!]
   ======================================= */

/* 1. 블로그 기본 글씨 (메뉴, 날짜 등) 10% 축소 */
body, button, input, textarea {
    font-size: 14px !important;
}

/* 2. 에디터 [제목] 크기 비율 유지하며 축소! */
.article-content-area h1 { font-size: 24px !important; } /* 제목1 */
.article-content-area h2 { font-size: 22px !important; } /* 제목2 */
.article-content-area h3 { font-size: 18px !important; } /* 제목3 */
.article-content-area h4 { font-size: 16px !important; } /* 본문보다 살짝 큰 제목 */

/* 3. 에디터 [본문] 크기 단계별로 10~15%씩 정교하게 축소! */
.article-content-area [data-ke-size="size14"] { font-size: 12px !important; }
.article-content-area [data-ke-size="size16"] { font-size: 13px !important; } /* 💡 본문 기본 크기 (가장 많이 씀) */
.article-content-area [data-ke-size="size18"] { font-size: 16px !important; }
.article-content-area [data-ke-size="size20"] { font-size: 18px !important; }
.article-content-area [data-ke-size="size23"] { font-size: 20px !important; }
.article-content-area [data-ke-size="size26"] { font-size: 23px !important; }

/* 4. 글씨가 작아져도 답답하지 않게 줄간격 최적화 */
.article-content-area p,
.protected-content-area p,
.guestbook-reply-content {
    line-height: 1.7 !important;
}

/* =======================================
   [🕊️ 비밀 쪽지 팝업 마법 (CSS 온리!)]
   ======================================= */

/* 1. 구석에서 파닥거리며 나타나는 알림창 (토스트) */
.secret-toast {
    position: fixed;
    bottom: -100px; /* 처음엔 화면 아래 숨어있음 */
    right: 40px;
    background-color: #FAFAFA;
    border: 2px solid #C8DF59; /* 황녹색 테두리 */
    border-radius: 30px; /* 동글동글 캡슐 모양 */
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 10000;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 통통 튀어오르는 애니메이션 */
}

/* 마법(JS)이 걸리면 위로 뿅! 나타남 */
.secret-toast.show {
    bottom: 40px;
}

.secret-toast:hover {
    background-color: #1A472A; /* 마우스 올리면 슬리데린 그린으로! */
    color: #FAFAFA;
    transform: translateY(-5px);
}

.toast-icon {
    font-size: 18px;
    animation: flapWings 1s infinite alternate ease-in-out; /* 파닥거리는 효과 */
}

@keyframes flapWings {
    0% { transform: translateY(0px) rotate(-10deg); }
    100% { transform: translateY(-3px) rotate(10deg); }
}

.toast-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: inherit;
}

/* 2. 클릭하면 열리는 양피지 메모장 창 */
.secret-window-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999999;
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity 0.3s ease;
}

.secret-window-overlay.hidden {
    opacity: 0; pointer-events: none;
}

/* 낡은 종이 느낌의 네모난 메모장 */
.secret-window-box {
    background-color: #FDFBF7; /* 아주 연한 양피지색 */
    width: 280px;
    border: 1px solid #D4C5B9;
    box-shadow: 5px 5px 0px rgba(26, 71, 42, 0.2); /* 슬리데린 색상의 거친 그림자 */
    border-radius: 2px;
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.secret-window-overlay.hidden .secret-window-box {
    transform: scale(0.9);
}

/* 메모장 윗부분 (집게나 파일 느낌) */
.window-header {
    background-color: #1A472A; /* 슬리데린 그린 */
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #C8DF59;
}

.window-title {
    color: #C8DF59;
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}

.window-close-btn {
    background: transparent;
    border: none;
    color: #FAFAFA;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
}
.window-close-btn:hover { color: #F0C75E; }

/* 메모 내용 (손글씨 느낌 살짝 내기) */
.window-content {
    padding: 25px 20px;
    background-image: repeating-linear-gradient(transparent, transparent 29px, #eee 30px); /* 노트 줄무늬 마법! */
    line-height: 30px;
    min-height: 120px;
}

.secret-message-text {
    font-family: 'Pretendard', sans-serif; /* 손글씨 폰트가 있다면 바꾸면 더 예뻐요! */
    font-size: 14px;
    color: #2C2C2C;
    margin: 0;
    word-break: keep-all;
    text-align: center;
}

/* 모바일 위치 조정 */
@media screen and (max-width: 800px) {
    .secret-toast { right: 20px; }
}

/* =======================================
   [📸 커스텀 사진 확대(라이트박스) 마법]
   ======================================= */
.article-content-area img {
    cursor: zoom-in !important;
}

#custom-lightbox {
    display: none; position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(26, 71, 42, 0.85); 
    z-index: 99999;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
    cursor: zoom-out;
}
#custom-lightbox.show {
    display: flex; opacity: 1;
}
#custom-lightbox img {
    max-width: 90%; max-height: 90%;
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: scale(0.95); transition: transform 0.3s ease;
}
#custom-lightbox.show img {
    transform: scale(1);
}


/* ──────────────────────────────────────────
   📱 모바일 전용 (@media 800px 이하)
   ────────────────────────────────────────── */
@media screen and (max-width: 800px) {

    /* 기본 레이아웃 */
    body {
        padding: 0 0 80px !important;
    }
    .blog-container {
        width: 100%;
        display: block;
        gap: 0;
    }
    .sidebar { display: none !important; }
    .content { margin-top: 0 !important; gap: 0 !important; }

    /* PC 로고 숨김 (JS 헤더바로 대체) */
    .header-logo { display: none !important; }

    /* 기존 햄버거/패널 숨김 */
    .mobile-hamburger { display: none !important; }
    #mobile-overlay { display: none !important; }
    #mobile-menu-panel { display: none !important; }

    /* ── 새 헤더바 (JS가 삽입) ── */
    #mobile-header-bar {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: #FAFAFA;
        border-bottom: 1px solid rgba(44,44,44,0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        z-index: 900;
        box-shadow: 0 1px 8px rgba(0,0,0,0.05);
        box-sizing: border-box;
    }
    #mobile-header-bar .mh-logo {
        font-size: 11px;
        font-weight: 700;
        color: #1A472A;
        letter-spacing: 1.5px;
        text-decoration: none;
    }
    #mobile-header-bar .mh-ham {
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        padding: 6px;
        border-radius: 8px;
        transition: background 0.2s;
    }
    #mobile-header-bar .mh-ham:active {
        background: rgba(44,44,44,0.06);
    }
    #mobile-header-bar .mh-ham span {
        display: block;
        width: 20px;
        height: 2px;
        background: #2C2C2C;
        border-radius: 2px;
    }

    /* ── 팝업 메뉴 (JS가 삽입) ── */
    #mobile-popup-menu {
        position: fixed;
        top: 52px;
        right: 14px;
        width: 160px;
        background: #FAFAFA;
        border: 1.5px solid #2C2C2C;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 3px 3px 0 #C8DF59;
        z-index: 950;
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
        pointer-events: none;
        transform-origin: top right;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    #mobile-popup-menu.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    #mobile-popup-menu .pm-head {
        background: #1A472A;
        padding: 9px 14px;
    }
    #mobile-popup-menu .pm-head-t {
        font-size: 9px;
        color: #C8DF59;
        letter-spacing: 3px;
        font-weight: 700;
        font-family: 'Pretendard', sans-serif;
    }
    #mobile-popup-menu a {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #1A472A;
        text-decoration: none;
        padding: 9px 14px;
        border-bottom: 1px dashed rgba(44,44,44,0.1);
        letter-spacing: 0.5px;
        font-family: 'Pretendard', sans-serif;
        transition: background 0.15s;
    }
    #mobile-popup-menu a:last-child { border-bottom: none; }
    #mobile-popup-menu a:active { background: rgba(200,223,89,0.18); }
    #mobile-popup-menu .pm-sub {
        font-size: 10px !important;
        color: #aaa !important;
        font-weight: 500 !important;
        padding: 7px 14px 7px 22px !important;
        letter-spacing: 0.3px !important;
    }

    /* 팝업 딤 (투명 클릭 영역) */
    #mobile-popup-dim {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 940;
        background: transparent;
    }
    #mobile-popup-dim.open { display: block; }

    /* ── 공지사항 복구 ── */
    .notice-box {
        display: flex !important;
        height: 160px !important;
        margin: 14px 14px 0 !important;
        border-radius: 14px !important;
        border: 1px solid rgba(44,44,44,0.1) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* ── 위젯 행 (시계 + D-day) 가로 배치 ── */
    .widget-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        height: auto !important;
        margin: 10px 14px 0 !important;
        padding: 0 !important;   
    }
    .widget-row .box {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 110px !important;
        height: auto !important;
        padding: 14px 10px !important;
        margin: 0 !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        border-radius: 14px !important;
        border: 1px solid rgba(44,44,44,0.1) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    }

    /* ── 메인 홈 뷰 ── */
    #main-home-view {
        flex-direction: column !important;
        gap: 0 !important;
        padding-bottom: 20px !important;
    }

    /* ── 공통 박스 그림자 부드럽게 ── */
    .box {
        border-radius: 14px !important;
        border: 1px solid rgba(44,44,44,0.1) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        margin: 10px 14px 0 !important;
    }

    /* ── 각 뷰 컨테이너 ── */
    .notice-box-wrapper,
    .character-box-wrapper,
    .timeline-box-wrapper,
    .guestbook-box-wrapper,
    .gallery-box-wrapper,
    .article-box-wrapper {
        width: calc(100% - 28px) !important;
        margin: 14px auto !important;
        height: auto !important;
        min-height: 300px !important;
        padding: 20px 18px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(44,44,44,0.1) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        position: static !important;
        left: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* 게시글 헤더 모바일 조정 */
    .article-header {
        min-height: 150px !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
    }
    .article-header .article-title {
        font-size: 17px !important;
    }
    .article-header-inner {
        padding: 14px 16px 16px !important;
    }

    .notice-header {
        min-height: 150px !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
    }
    .notice-header .notice-title {
        font-size: 17px !important;
    }
    .notice-header-inner {
        padding: 14px 16px 16px !important;
    }

    /* ── 타임라인 1열 ── */
    .timeline-track::before { left: 15px !important; }
    .timeline-item {
        width: 100% !important;
        padding-left: 40px !important;
        text-align: left !important;
        left: 0 !important;
    }
    .timeline-item::after { left: 9px !important; right: auto !important; }

    /* ── 갤러리 2열 ── */
    .gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ── 방명록 ── */
    .guest-inputs { flex-direction: column !important; }

    /* ── 학년 리본 상단 가로 배치 ── */
    .year-ribbons {
        position: absolute !important;
        top: -15px !important;
        left: 15px !important;
        right: auto !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        z-index: 50 !important;
    }
    .year-btn {
        writing-mode: horizontal-tb !important;
        font-size: 11px !important;
        padding: 8px 8px 18px 8px !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%) !important;
        border-radius: 0 !important;
    }

     /* ── 캐릭터 세로 배치 ── */
    .character-box-wrapper {
        padding: 40px 75px 30px !important;
        min-height: 500px !important;
    }
    .character-display {
        flex-direction: column !important;
        min-height: 500px !important;
        padding: 40px 75px 30px !important;
        gap: 30px !important;
        align-items: center !important;
    }
    .chara-col {
        width: 200% !important;
        max-width: 300px !important;
        gap: 24px !important;
    }
    .profile-info-box {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* ── BGM / 위로가기 버튼 위치 ── */
    .bgm-player-wrap { bottom: 20px !important; left: 14px !important; }
    .top-btn { bottom: 20px !important; right: 14px !important; }

} /* ← @media 닫기 */

/* 모바일에서 캐릭터 박스 보정 */
@media screen and (max-width: 800px) {
    
    /* D+day 글자 크기 */
    .dday-counter {
        font-size: 20px !important;
        letter-spacing: 1px !important;
    }
    .quill-btn {
        width: 32px !important;
        height: 32px !important;
        bottom: 8px !important;
        right: 8px !important;
    }
    .calendar-content {
        font-size: 16px !important;
    }
    .view-title {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

/* =======================================
       🚨 [모바일 공지사항/게시글 강제 확장 마법] 🚨
       ======================================= */

    /* 1. 최상위 부모 컨테이너들 숨통 다 틔워주기 (찌그러짐 방지) */
    body, .blog-container, .content, #pjax-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important; 
    }

    /* 💡 [수정됨] 게시글/공지 구역은 자바스크립트가 숨길 수 있도록 display 강제 명령을 뺐습니다! */
    #article-read-view, #gallery-list-view {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. 게시글/공지사항 하얀색 겉 상자 무조건 화면 꽉 채우기 */
    #article-read-view .article-box-wrapper {
        width: calc(100% - 28px) !important;
        min-width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important; /* 어떤 일이 있어도 이 크기 유지! */
        margin: 14px auto !important;
        
        /* 💡 120px 패딩 족쇄 풀기 (상자는 안 작아지니 안심하세요!) */
        padding: 30px 25px !important; 
        box-sizing: border-box !important;
    }

    /* 3. 안쪽 글씨 구역 100% 꽉 채우기 */
    #article-read-view s_notice_rep .article-content-area,
    #article-read-view .article-content-area {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

 
 
}

/* =======================================
   [📱 모바일 전용 타임라인 완벽 교정 마법]
   ======================================= */
@media screen and (max-width: 800px) {
    /* 1. 타임라인 중심선 위치 확실하게 고정 */
    .timeline-track::before {
        left: 15px !important;
    }

    /* 2. 어긋났던 동그라미(노드) 위치를 선 정중앙에 딱 맞추기! */
    .timeline-item::after {
        left: 7px !important; /* 수학적 계산으로 선과 완벽하게 일치시켰어요! */
        top: 22px !important; /* 메모장 박스 높이에 어울리도록 살짝 아래로 */
        right: auto !important;
    }

    /* 3. 메모장이 선을 덮지 않도록 안전거리 확보 */
    .timeline-item {
        width: 100% !important;
        padding-left: 42px !important; 
        padding-right: 0 !important;
        left: 0 !important;
    }

    /* 4. 제각각이던 박스 크기를 일정하게 통일 & 예쁜 글씨 정렬 */
    .timeline-content {
        width: 100% !important; /* 모바일에서는 모든 박스가 화면에 꽉 차게 동일한 크기를 가집니다 */
        display: block !important;
        box-sizing: border-box !important;
        padding: 18px 20px !important;
        
        /* 텍스트 네모 반듯하게 정렬 */
        text-align: justify !important;
        word-break: keep-all !important;
        line-height: 1.8 !important;
    }
}