/* 사용자 지정 픽셀 폰트 가져오기 */
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

/* --- 기본 설정 --- */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #000;
    font-family: 'galmuri9', 'Galmuri11', monospace;
    overflow: hidden;
    word-break: keep-all;
}

/* 카테고리 색상 변수 */
:root {
    --category-color-1: #80deea; /* Light Cyan */
    --category-color-2: #ce93d8; /* Light Purple */
    --category-color-3: #a5d6a7; /* Light Green */
    --category-color-4: #90caf9; /* Light Blue */
    --category-color-5: #b39ddb; /* Medium Purple */
    --category-color-6: #8c9eff; /* Indigo Accent */
    --current-category-color: #80deea; /* Default color */
    --ch5-warm-color: #ffd54f; /* 웜톤 금빛 (Golden Yellow) */
    --ch5-warm-color-darker: #ffb300; /* 웜톤 호박색 (Amber) */
    --ch5-warm-color-hover: rgba(255, 213, 79, 0.15); /* 호버 배경 (15%) */
    --ch5-warm-color-focus-bg: rgba(30, 20, 0, 0.95); /* 입력창 포커스 (어둡게) */
}

/* --- 로딩 화면 --- */
#loader {
    position: fixed; width: 100%; height: 100%; top: 0; left: 0;
    background-color: #000;
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
}
.loader-text {
    font-weight: 700; font-size: 1.5em; color: #3DCD56;
    text-shadow: 0 0 8px #3DCD56;
    animation: flicker 1.5s infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- 오프닝: 조종석 --- */
.cockpit-container {
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 100%;
    background-image: url('https://lh3.googleusercontent.com/d/1sIpbZzBC_roHnDF3dliaUTsGtHVuAgwv');
    background-size: auto; image-rendering: pixelated;
    position: relative; /* 자식 요소 포지셔닝 기준 */
    z-index: 100; /* 다른 요소들 위에 있도록 */
}
.terminal-monitor {
    width: 90%; max-width: 500px; padding: 30px;
    border: 3px solid #3DCD56; background-color: rgba(0, 15, 0, 0.85);
    text-align: center; box-shadow: 0 0 20px #3DCD56, inset 0 0 10px rgba(0, 255, 65, 0.5);
    margin: 20px;
}
.title {
    font-family: 'Galmuri11', monospace;
    font-weight: 700; font-size: clamp(1.8em, 7vw, 2.2em);
    white-space: nowrap; letter-spacing: 2px;
    margin-top: 0; margin-bottom: 15px; color: #3DCD56;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 8px #3DCD56;
}
.prompt { font-family: 'GalmuriMono9', monospace; font-size: 0.9em; color: #c0c0c0; margin-bottom: 15px; line-height: 1.6; }
.hint { font-family: 'GalmuriMono9', monospace; font-size: 0.8em; color: #888; display: block; margin-top: 15px; margin-bottom: 10px;} /* 힌트 스타일 및 위치  */
.password-group { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
#password-input {
    background-color: #000; border: 2px solid #3DCD56; color: #3DCD56;
    padding: 10px; font-size: 1.5em; font-family: 'Galmuri11', monospace;
    width: 120px; text-align: center;
    font-weight: 700;
}
#password-input::placeholder { color: rgba(0, 255, 65, 0.4); }
#password-input:focus { outline: none; background-color: #002b00; }
#enter-button {
    background-color: #3DCD56; color: #000; border: 2px solid #3DCD56;
    padding: 10px 20px; font-size: 1.5em; font-weight: 700; cursor: pointer;
    font-family: 'Galmuri11', monospace;
}
#enter-button:active { background-color: #000; color: #3DCD56; }
/* 상태 메시지: 기본적으로 비어있도록 */
#status-message { color: #888; margin-top: 10px; height: 20px; font-size: 0.9em; }

/* --- 스토리 오버레이 --- */
#story-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 12, 0.95);
    display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
    text-align: center; color: #e0e1dd;
    font-size: 1.1em;
    line-height: 1.8;
    z-index: 9000; /* 항해 지도 위에 */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    cursor: pointer; /* 클릭 가능 표시 */
}
#story-text-container {
    max-width: 90%;
    font-family: 'Galmuri11', monospace;
}
#story-text-container p {
    margin: 7px 0;
    display: block;
    word-break: keep-all;
}

/* --- 챕터 5 시네마틱 텍스트 별빛 효과 --- */
/* @keyframes: 별 입자가 흐르는 애니메이션 */
@keyframes text-starlight-flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; } /* 대각선 방향으로 흐르도록 */
}

/* 커서 깜빡임 애니메이션 정의 확인 */
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 커서 스타일 (기존 유지) */
.story-cursor {
    margin-left: 5px;
    width: 3px;
    height: 1.2em; 
    display: none;
    animation: blink-cursor 0.8s infinite steps(1);
}
/* --- 항해 지도 & 챕터 공통 배경 --- */
.galaxy-map-container, .chapter-container {
    background: #00000c;
    position: relative;
    overflow: hidden;
}
.galaxy-map-container::before, .chapter-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    --bg-image: url('https://lh3.googleusercontent.com/d/1sIpbZzBC_roHnDF3dliaUTsGtHVuAgwv');
    background-image: var(--bg-image);
    background-size: cover;
    image-rendering: pixelated;
    animation: pan-background 60s linear infinite;
    z-index: 0;
    
    background-repeat: no-repeat;
}
@keyframes pan-background {
    0% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(100px) translateY(50px); }
    100% { transform: translateX(0) translateY(0); }
}

/* 콘텐츠 가독성을 위한 어두운 오버레이 */
.galaxy-map-container::after, .chapter-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* --- 항해 지도 --- */
.galaxy-map-container {
    display: none;
    flex-direction: column; justify-content: center; align-items: center;
    width: 100%; height: 100%;
    color: #fff;
    padding: 20px; box-sizing: border-box;
}

.map-title {
    font-family: 'Galmuri11', monospace;
    font-size: clamp(1.5em, 5vw, 2em);
    color: #f5f5f5;
    text-shadow:
        0 0 5px #40c4ff,
        0 0 10px #40c4ff,
        0 0 15px #40c4ff,
        2px 2px 2px rgba(0,0,0,0.5);
    -webkit-text-stroke: 0.5px #fff;
    margin-bottom: 20px;
    z-index: 3;
    letter-spacing: 2px;
}

.map-area {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 3;
    cursor: grab;
}
.map-area::-webkit-scrollbar { display: none; }
.map-area:active {cursor: grabbing;}
@media (min-width: 950px) {
  .map-area {
    display: flex;
    justify-content: center;
  }
}

.planets-wrapper {
    display: flex;
    align-items: center;
    width: max-content;
    height: 400px;
    padding: 0 50px;
    position: relative;
}

.voyage-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 850px;
    height: 100%;
    z-index: 2; /* 오버레이와 행성 사이 */
    overflow: visible;
}
.voyage-path {
    stroke: url(#path-gradient);
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: draw-path 7s ease-in-out forwards;
    filter: drop-shadow(0 0 5px #80d8ff) drop-shadow(0 0 10px #ea80fc);
}
@keyframes draw-path {
    to { stroke-dashoffset: 0; }
}

.planet-orbit {
    position: relative;
    width: 170px;
    height: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
}
#orbit1 { align-items: center; }
#orbit2 { align-items: flex-start; margin-top: 30px; }
#orbit3 { align-items: flex-end; margin-bottom: 60px; }
#orbit4 { align-items: center; margin-top: -40px; }
#orbit5 { align-items: center; }

.planet {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; transition: transform 0.3s ease;
    animation: float 3s infinite ease-in-out;
}
.planet:hover { transform: scale(1.15); animation-play-state: paused; }
#orbit2 .planet { animation-delay: 0.5s; }
#orbit3 .planet { animation-delay: 1s; }
#orbit4 .planet { animation-delay: 1.5s; }
#orbit5 .planet { animation-delay: 0.8s; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.planet img {
    border-radius: 50%;
    margin-bottom: 15px;
    -webkit-user-drag: none;
    animation: pulse-img 2s infinite ease-in-out;
    image-rendering: pixelated;
}
#planet1 img { width: 80px; height: 80px; box-shadow: 0 0 15px #ff8a80; color: #ff8a80; }
#planet2 img { width: 70px; height: 70px; box-shadow: 0 0 15px #ffd180; color: #ffd180; }
#planet3 img { width: 90px; height: 90px; box-shadow: 0 0 20px #80d8ff; color: #80d8ff; }
#planet4 img { width: 80px; height: 80px; box-shadow: 0 0 15px #b9f6ca; color: #b9f6ca; }
#planet5 img { width: 100px; height: 100px; box-shadow: 0 0 25px #ea80fc; color: #ea80fc; }

.planet-name {
    font-size: 0.9em; font-weight: 700; text-align: center;
    line-height: 1.2;
    text-shadow: 0 0 5px #000;
}

@keyframes pulse-img {
    0% { box-shadow: 0 0 15px currentColor; }
    50% { box-shadow: 0 0 25px currentColor; }
    100% { box-shadow: 0 0 15px currentColor; }
}

.map-hint {
    color: #9ab;
    font-size: 0.8em; margin-top: 10px; margin-bottom: 25px;
    text-align: center; line-height: 1.5;
    z-index: 3;
}

.mode-selection { display: flex; justify-content: center; z-index: 3; }

.mode-btn {
    background-image: linear-gradient(145deg, #4facfe 0%, #00f2fe 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: 'Galmuri11', monospace;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    box-shadow:
        0 0 10px #4facfe,
        0 0 20px #00f2fe,
        inset 0 0 5px rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease-in-out;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.mode-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 5px 15px #4facfe,
        0 5px 30px #00f2fe,
        inset 0 0 8px rgba(255, 255, 255, 0.7);
}
.mode-btn:active {
    transform: translateY(0);
}

/* --- 팝업 모달 --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); display: none;
    justify-content: center; align-items: center;
    z-index: 10000; padding: 20px; box-sizing: border-box;
    padding: 10px; 
    box-sizing: border-box;
    overflow-y: auto;
}
.modal-content {
    width: 100%; max-width: 400px;
    padding: 25px 20px; 
    border: 3px solid #40c4ff; background-color: rgba(0, 10, 20, 0.95);
    text-align: center; box-shadow: 0 0 25px #40c4ff;
    color: #fff; position: relative; border-radius: 5px;
    margin-top: auto;
    margin-bottom: auto;
    box-sizing: border-box;
}
.modal-close-btn {
    position: absolute; top: 5px; right: 15px; font-size: 2em;
    font-weight: bold; color: #40c4ff; cursor: pointer; transition: transform 0.2s;
}
.modal-close-btn:hover { transform: scale(1.2); }
/* 팝업 텍스트 아래 여백 */
.modal-text {
    font-size: 1em;
    line-height: 1.3;
    color: #E0E1DD;
    word-break: keep-all;
    margin-bottom: 0;
}
#modal-button-container {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
/* 모달 버튼 공통 스타일 */
.modal-action-btn {
    background: transparent;
    border: 2px solid; /* 테두리 사용 */
    border-radius: 50px;
    padding: 8px 20px;
    font-family: 'Galmuri11', monospace;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-shadow: none;
}
/* 게임 시작 / 재시도 / 확인 / 다음 챕터 버튼 스타일 (노란색) */
.modal-start-btn, .modal-next-btn {
    border-color: #feca57;
    color: #feca57;
    box-shadow: 0 0 8px #feca57;
}
.modal-start-btn:hover, .modal-next-btn:hover {
    background-color: rgba(254, 202, 87, 0.2);
    box-shadow: 0 0 15px #ff9f43;
    transform: scale(1.05);
}
/* 넘어가기 / 닫기 / 지도 보기 버튼 스타일 (회색) */
.modal-skip-btn, .modal-map-btn {
    border-color: #747d8c;
    color: #a4b0be;
    box-shadow: 0 0 5px #747d8c;
}
.modal-skip-btn:hover, .modal-map-btn:hover {
    background-color: rgba(116, 125, 140, 0.2);
    box-shadow: 0 0 10px #57606f;
    transform: scale(1.05);
}
/* 테마색 버튼 */
.modal-themed-btn {
    border-color: var(--btn-theme-color, #feca57); /* 기본값은 노란색 */
    color: var(--btn-theme-color, #feca57);
    box-shadow: 0 0 8px var(--btn-theme-color, #feca57);
}
.modal-themed-btn:hover {
    background-color: color-mix(in srgb, var(--btn-theme-color, #feca57) 20%, transparent);
    box-shadow: 0 0 15px var(--btn-theme-color, #feca57);
    transform: scale(1.05);
}
/* --- 시 내용 모달 & 기억 조각 모달 공통 --- */
.poem-content {
    border-color: #feca57;
    box-shadow: 0 0 25px #feca57;
}
.poem-content h3 {
    font-family: 'Galmuri11', monospace;
    color: #feca57;
    margin-bottom: 20px;
}
.poem-text {
    text-align: center;
    white-space: pre-wrap;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 5px;
    font-family: 'Galmuri11', monospace;
    color: #E0E1DD;
    margin-bottom: 0;
    word-break: keep-all;
    font-size: 0.9em;
}
.poem-text::-webkit-scrollbar { width: 5px; }
.poem-text::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); }
.poem-text::-webkit-scrollbar-thumb { background: #feca57; border-radius: 5px;}

/* 챕터 1, 2 모달 닫기 버튼 공통 색상 */
.poem-close-btn { color: #feca57; }
.fragment-close-btn { color: #ffd180; } /* 챕터 2 테마색 */
.select-fragment-close-btn { color: #ffd180; } /* 챕터 2 테마색 */

/* --- 기억 조각 선택 모달 스타일 --- */
.select-fragment-content {
     max-width: 500px;
}
#select-fragment-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 반응형 그리드 */
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
}
#select-fragment-list button { /* 모달 버튼 스타일  */
    border-color: #ffd180; /* 챕터 2 테마색 */
    color: #ffd180;
    box-shadow: 0 0 5px rgba(255, 209, 128, 0.5);
    padding: 8px 10px;
    font-size: 0.85em;
    border-radius: 5px; 
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#select-fragment-list button:hover {
    background-color: rgba(255, 209, 128, 0.2);
    box-shadow: 0 0 10px #ffd180;
}
#selected-fragment-text { 
    border-top: 1px solid rgba(255, 209, 128, 0.3);
    padding-top: 15px;
    text-align: center;
}

/* --- 챕터 공통 스타일 --- */
.chapter-container {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100dvh;
    color: #fff;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: max(3vh, 20px); 
    align-items: center;
    z-index: 5000;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    overflow-y: auto;
    padding-left: 20px; 
    padding-right: 20px;
    padding-bottom: 20px; 
    box-sizing: border-box;
}

#story-intro {
    width: 90%;
    max-width: 600px;
    padding: 30px;
    border: 3px solid #ff4757; /* 경고 느낌 */
    background-color: rgba(30, 0, 0, 0.85);
    text-align: center;
    box-shadow: 0 0 20px #ff4757, inset 0 0 10px rgba(255, 71, 87, 0.5);
    z-index: 6000;
    line-height: 1.8;
    margin-top: auto;
    margin-bottom: auto;
}

.alert-text {
    margin: 10px 0;
    opacity: 0;
    animation: fade-in-text 1s forwards;
    font-size: 0.95em;
    word-break: keep-all;
}
/* WARNING! 텍스트 스타일 */
.warning-title {
    font-family: 'Galmuri11', monospace;
    font-weight: 700;
    color: #ff4757; /* 빨간색 경고 */
    font-size: 1.5em;
    text-shadow: 0 0 8px #ff4757;
    margin-bottom: 15px;
    animation-delay: 0s;
    opacity: 1;
    animation: none;
}
.alert-text.system {
    font-weight: 700;
    color: #e0e1dd;
    animation-delay: 0.5s;
}
.alert-text.warning { /* 기존 warning 클래스는 부가 설명용으로 */
    color: #e0e1dd;
    font-weight: normal;
    font-size: 0.95em;
    animation-delay: 1.0s;
}
.alert-text.objective {
    color: #feca57; /* 노란색 목표 */
    margin-top: 20px;
    font-size: 1em;
    animation-delay: 1.5s;
}

@keyframes fade-in-text {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 인트로 화면의 버튼 스타일 */
#intro-buttons {
    margin-top: 30px;
    opacity: 0;
    animation: fade-in-buttons 1s forwards;
    animation-delay: 2.5s;
}
.intro-instruction {
    color: #9ab;
    font-size: 0.85em;
    margin-bottom: 20px;
    word-break: keep-all;
}
#intro-buttons button {
    margin: 5px 10px;
}
@keyframes fade-in-buttons {
    to { opacity: 1; }
}

/* --- 챕터 1: 별똥별 피하기 게임 --- */
#asteroid-game {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2; /* 오버레이보다 위 */
}

/* 게임 시작 카운트다운 스타일 */
#game-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(4em, 20vw, 6em);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 20px #fff;
    z-index: 15;
    pointer-events: none; /* 클릭 방지 */
    opacity: 1;
    display: none;
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    cursor: none;
}

#game-timer { /* 게임 타이머 스타일 */
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 5px #000;
    z-index: 10;
}

/* 새로운 'CLEAR' 버튼 (픽셀 스타일) */
#exit-portal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 15px;
    background-color: #55efc4;
    color: #001f3f;
    border: 2px solid #001f3f;
    box-shadow: 2px 2px 0px #001f3f;
    font-family: 'Galmuri11', monospace;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    text-shadow: 1px 1px 0px #fff;
    z-index: 10;
    cursor: pointer;
    transition: all 0.1s ease;
    image-rendering: pixelated; /* 픽셀 느낌 강조 */
}
#exit-portal:hover {
    background-color: #7fffd4;
    box-shadow: 3px 3px 0px #001f3f;
    transform: translate(-52%, -52%); 
}
#exit-portal:active {
    background-color: #3ddc84;
    box-shadow: 1px 1px 0px #001f3f;
    transform: translate(-50%, -50%);
}

/* --- 챕터 전환 화면 --- */
#chapter-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9000;
    opacity: 0;
}
/* 챕터 전환 화면 이미지 스타일  */
#transition-image {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    animation: transition-pulse-glow 2s infinite ease-in-out;
}

#transition-title {
    color: #fff;
    font-size: clamp(2em, 8vw, 3em);
    font-weight: 700;
    text-align: center;
    letter-spacing: 3px;
    animation: transition-pulse-glow 2s infinite ease-in-out;
    animation-delay: 0.2s;
}

/* 새로운 챕터 전환 애니메이션 */
@keyframes transition-pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
        text-shadow: 0 0 10px #80d8ff, 0 0 20px #80d8ff;
        filter: drop-shadow(0 0 10px #80d8ff);
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
        text-shadow: 0 0 15px #ea80fc, 0 0 25px #ea80fc, 0 0 35px #fff;
        filter: drop-shadow(0 0 15px #ea80fc);
    }
}


/* ===== 챕터 2: 탐색 (십자말풀이) --- */
.puzzle-hub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px;
    padding: 20px;
    box-sizing: border-box;
    z-index: 3;
    margin-top: auto;
    margin-bottom: auto;
}

.puzzle-grid { /* 모바일: 2열 / PC: 3열 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 400px; /* 그리드 최대 너비 고정 */
}
/* PC 화면 (폭 600px 이상)*/
@media (min-width: 600px) {
    .puzzle-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 600px; /* 3열일 때 최대 너비 */
    }
}
.puzzle-category {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid #ffd180; 
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 209, 128, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* 클리어 시 테두리 색상  */
.puzzle-category.cleared {
    border-color: #55efc4;
}
.puzzle-category:hover {
    transform: scale(1.05);
    background-color: rgba(255, 209, 128, 0.2);
    box-shadow: 0 0 15px #ffd180;
}
.puzzle-title {
    font-size: 0.9em;
    font-weight: 700;
    color: #fff;
}

/* 십자말풀이 게임 영역 디자인 개선 */
#crossword-game-container {
    width: 100%;
    max-width: 850px;
    padding: 16px;
    background-color: rgba(0, 5, 10, 0.97);
    border: 3px solid var(--current-category-color);
    border-radius: 10px;
    box-shadow: 0 0 25px var(--current-category-color), inset 0 0 8px rgba(0,0,0, 0.4);
    z-index: 3;
    color: #fff;
    text-align: center;
    display: none;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
#crossword-game-container h3 {
    font-family: 'Galmuri11', monospace;
    color: var(--current-category-color);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    text-shadow: 0 0 8px var(--current-category-color);
}

/* 십자말풀이 보드 (그리드 + 열쇠) */
#crossword-board {
    display: flex;
    flex-direction: column; /* 모바일 기본: 세로 배치 */
    align-items: center;
    gap: 25px; 
    width: 100%;
}

/* 십자말풀이 판 디자인 개선 */
#crossword-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 6), 1fr);
    grid-template-rows: repeat(var(--grid-rows, 6), 1fr);
    border: 2px solid var(--current-category-color);
    background-color: #111; 
    width: 90vw;
    max-width: 380px;
    aspect-ratio: var(--grid-cols, 6) / var(--grid-rows, 6);
    image-rendering: pixelated;
    padding: 4px;
    gap: 1px; /* 셀 사이 간격 */
    border-radius: 3px; /* 모서리 각지게 */
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}

/* 셀 디자인 개선 */
.cell {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #e8e8e8; /* 셀 배경 밝게 */
    border: 1px solid #bbb; /* 셀 테두리 */
    box-sizing: border-box;
    border-radius: 1px; /* 셀 모서리 각지게 */
}
.cell.empty {
    background-color: #222; /* 빈칸 색상 */
    border-color: #333;
}
/* 열쇠 번호 */
.cell-label {
    position: absolute;
    top: 1px;
    left: 2px;
	font-family: 'galmuri9', 'Galmuri11', monospace; 
    font-size: clamp(0.5em, 2vw, 0.65em);
    color: #444;
    font-weight: bold;
}
/* 입력 칸  */
.cell-input {
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    padding: 0;
    font-family: 'Galmuri11', monospace;
    font-size: clamp(0.9em, 4vw, 1.3em);
    color: #000;
    background: transparent;
    caret-color: #007bff;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 1px;
    line-height: 1;
}
.cell-input:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--current-category-color) 30%, transparent);
    box-shadow: 0 0 5px var(--current-category-color);
}
/* 열쇠 목록  */
#crossword-clues-container {
    text-align: left;
    line-height: 1.7;
    font-size: 0.8em;
    width: 100%;
    max-width: 380px; /* 그리드 너비와 맞춤 (모바일) */
    color: #ddd;
}
#crossword-clues-container h4 {
    font-family: 'Galmuri11', monospace;
    color: var(--current-category-color);
    margin-top: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--current-category-color) 40%, transparent); /* 구분선 */
    padding-bottom: 6px;
    font-size: 1em;
}
#crossword-clues-container ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
#crossword-clues-container li {
    margin-bottom: 4px;
    padding-left: 3px;
}
#crossword-clues-container li b {
    /* 카테고리 색상 변수 사용 */
    color: var(--current-category-color);
    display: inline-block;
    width: 1.4em;
    text-align: right;
    margin-right: 6px;
}
/* PC 화면 (폭 850px 이상)에서는 그리드/열쇠 가로 배치 */
@media (min-width: 850px) {
    #crossword-board {
        flex-direction: row;
        align-items: flex-start;
        max-width: none;
        gap: 35px;
    }
    #crossword-grid {
        width: 380px;
        max-width: 380px;
        height: auto;
        flex-shrink: 0;
    }
    #crossword-clues-container {
        max-width: none;
        width: auto;
        flex-grow: 1;
        padding-left: 0;
    }
     #crossword-clues-container h4 {
        margin-top: 0;
     }
}
/* 십자말풀이 하단 버튼 */
#crossword-buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

/* ===== 챕터 3: 확장  ===== */
/* 챕터 3 컨테이너 (스크롤 가능하게 설정) */
#chapter3-container {
    height: 100dvh; /* 모바일 스크롤 범위 */
    overflow: scroll; /* 맵을 스크롤/드래그하기 위함 */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding: 0 !important; /* 챕터3 스크롤맵은 여백이 없어야 함 */
}
/* 챕터 3가 '게임 시작'되면 공통 padding을 제거 */
#chapter3-container.game-started {
    justify-content: flex-start;
    align-items: flex-start;
}
#chapter3-container:active {
    cursor: grabbing;
}
/* 1. 상단 제시어 (화면에 고정) */
#ch3-prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 12, 0.9), rgba(0, 0, 12, 0));
    z-index: 101; /* 스캐너보다 위 */
    pointer-events: none; /* 클릭 방지 */
    text-align: center;
    box-sizing: border-box;
}
#ch3-prompt-text {
    font-size: 1em;
    color: #fff;
    margin: 0;
}
#ch3-prompt-text span {
    color: #80d8ff;
    font-weight: 700;
}
/* 맵 래퍼가 맵 콘텐츠만큼 커지도록 설정 */
#ch3-map-wrapper {
    width: 2400px;
    height: 2500px;
    display: none;
    flex-shrink: 0; /* 맵이 수직으로 수축하는 것을 방지 */
}
/* 3. 거대한 맵 (실제 콘텐츠 영역) */
#ch3-map-area {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: var(--ch3-bg-image, var(--bg-image)); 
    background-size: var(--ch3-bg-size, auto); 
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation: var(--ch3-bg-animation, pan-background 60s linear infinite);
    overflow: hidden;
    z-index: 2; /* 챕터 컨테이너의 ::after 오버레이(z-index: 1)보다 위로 올림 */
}
/* 4. 안개 레이어 */
#ch3-fog-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 5, 20, 0.7);
    z-index: 5;
    pointer-events: none; /* 클릭이 통과되도록 */
}
/* 5. 스캐너 (손전등) 효과 (화면에 고정) */
#ch3-scanner {
    position: fixed;
    top: 0; left: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* 가운데는 투명하고, 바깥은 어두워지는 그라데이션 */
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.15) 0%, /* 중앙의 희미한 빛 */
        transparent 80px, /* 빛 범위 */
        rgba(0, 5, 20, 0.85) 120px /* 안개와 자연스럽게 연결 */
    );
    z-index: 100;
    pointer-events: none; /* 클릭 방지 */
    transform: translate(-50%, -50%);
    display: none;
}
/* 모바일(터치)에서는 스캐너 숨김 (터치로 바로 클릭) */
@media (hover: none) {
    #ch3-scanner {
        display: none !important;
    }
}
/* 6. 넘어가기 버튼 (화면에 고정) */
#ch3-skip-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
}
/* 7. JS가 추가할 아이템 스타일 */
.ch3-item {
    position: absolute;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 10; /* 안개(5)보다 위 */
    transition: transform 0.3s ease, opacity 0.3s;
    opacity: 0.35; /* 안개 속에 있는 듯 희미하게 */
    filter: drop-shadow(0 0 5px #80d8ff);
}
.ch3-item:hover {
    transform: scale(1.15);
    opacity: 1;
}
.ch3-item.found {
    opacity: 1;
    transform: scale(1.1);
    pointer-events: none; /* 찾은 아이템은 다시 클릭 X */
    filter: drop-shadow(0 0 15px #55efc4);
}
/* 8. JS가 추가할 '안개 걷힌 영역' 스타일 */
.ch3-clear-spot {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    z-index: 6; /* 안개(5) 바로 위, 아이템(10) 바로 아래 */
}
.ch3-clear-spot .ch3-item-image-revealed {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 8;
    opacity: 1;
    filter: drop-shadow(0 0 15px #55efc4);
}

/* 9. 챕터 3 게임 방법 안내 */
#ch3-story-intro {
    width: 90%;
    max-width: 600px;
    padding: 30px;
    border: 3px solid #80d8ff; 
    background-color: rgba(0, 10, 30, 0.9);
    text-align: center;
    box-shadow: 0 0 20px #80d8ff, inset 0 0 10px rgba(128, 216, 255, 0.5);
    z-index: 200; /* 맵/스캐너(101)보다 위에 표시 */
    line-height: 1.8;
    margin-top: auto;
    margin-bottom: auto;
    box-sizing: border-box;
}
#ch3-start-btn:hover {
    background-color: rgba(128, 216, 255, 0.2);
    box-shadow: 0 0 15px #80d8ff;
}
/* ===== 챕터 3 인트로 버튼 ===== */
#ch3-intro-buttons {
    margin-top: 30px;
    opacity: 0; /* 초기 숨김 */
    animation: fade-in-buttons 1s forwards;
    animation-delay: 2.5s; 
}
#ch3-intro-buttons button {
    margin: 5px 10px;
}
/* ===== 챕터 3 미니맵 스타일 (홀로그램) ===== */
#ch3-mini-map {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(128, 216, 255, 0.5); /* 연한 테두리 */
    background-color: transparent;
    box-shadow: none;
    z-index: 200;
    overflow: hidden;
    display: none;
    pointer-events: none; /* 클릭 안 되게 막음 */
}
/* 미니맵 안의 '현재 시야' 박스 (연하게) */
#ch3-mini-map-viewport {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.7);
}
/* 미니맵 안의 '아이템 위치' 점 */
.ch3-mini-map-item-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}
/* 현재 '목표 아이템' 점 (깜빡임 효과) */
.ch3-mini-map-item-dot.target {
    background-color: #ff8a80; /* 빨간색 경고 */
    box-shadow: 0 0 8px #ff4757, 0 0 12px #ff4757;
    animation: pulse-target 1s infinite;
    transform: translate(-50%, -50%) scale(1.5);
}
@keyframes pulse-target {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 미니맵 안의 '찾은 아이템' 점 (더 밝게 빛남) */
.ch3-mini-map-item-dot.found {
    background-color: #55efc4; /* 클리어 색상 */
    box-shadow: 0 0 8px #55efc4, 0 0 12px #55efc4; /* 빛나는 효과 */
    transform: translate(-50%, -50%) scale(1.5); /* 찾으면 더 커짐 */
    animation: none; /* 깜빡임 중지 */
}

/* --- 챕터 4: 기억 낙하 --- */
#ch4-story-intro {
    width: 90%;
    max-width: 600px;
    padding: 30px;
    border: 3px solid #90caf9; 
    background-color: rgba(0, 10, 30, 0.9);
    text-align: center;
    box-shadow: 0 0 20px #90caf9, inset 0 0 10px rgba(144, 202, 249, 0.5);
    z-index: 200; /* 게임 요소들(HUD, 캔버스)보다 위에 표시 */
    line-height: 1.8;
    margin-top: auto;
    margin-bottom: auto;
    box-sizing: border-box;
    display: none;
}
#ch4-start-btn:hover {
    background-color: rgba(128, 216, 255, 0.2);
    box-shadow: 0 0 15px #80d8ff;
}
#ch4-intro-buttons {
    margin-top: 30px;
    opacity: 0; /* 초기 숨김 */
    animation: fade-in-buttons 1s forwards;
    animation-delay: 2.5s; 
}
#ch4-intro-buttons button {
    margin: 5px 10px;
}
#chapter4-container {
    --current-category-color: var(--category-color-4);
    justify-content: center;
    overflow-y: hidden !important; 
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100dvh; 
    color: #fff;
    flex-direction: column;
    align-items: center;
    z-index: 5000;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px; 
    padding-top: max(3vh, 20px);
}
#chapter4-container.ch4-intro-visible {
    padding: 0 !important;
}
/* 1. HUD 메인 컨테이너: 아이템들을 중앙으로 모읍니다. */
#ch4-hud {
    display: flex;
    justify-content: center;
    gap: 40px; /* 점수와 다음 아이템 사이의 간격 */
    align-items: flex-start; 
    width: 100%;
    max-width: 300px; 
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    z-index: 3;
    position: relative;
}
.hud-item {
    text-align: center;
    min-width: 80px; 
}

/* 2. 점수 아이템: 내부 텍스트도 중앙 정렬합니다. */
.hud-item.score {
    display: flex;
    flex-direction: column; 
    align-items: center;
    flex-shrink: 0;
    gap: 5px;
}

/* 3. 다음 아이템 */
.hud-item.next {
    display: flex; 
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 5px;
}

.hud-label {
    font-size: 0.8em;
    color: #9ab;
    line-height: 1.2;
}

/* 5. 점수 숫자 */
#ch4-score {
    font-size: 2.2em;
    font-weight: 700;
    color: #fff;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#ch4-next-preview {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7); 
    border: 2px solid;
    border-color: #5b7a9a #c4e0ff; 
    border-radius: 3px; 
    overflow: hidden; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
/* 캔버스 자체가 박스에 꽉 차도록 */
#ch4-next-preview canvas {
    width: 100%;
    height: 100%;
}
#memory-drop-canvas {
    background-color: rgba(0, 0, 0, 0.7);
    border: 3px solid;
    border-color: #5b7a9a #c4e0ff;
    border-radius: 5px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 15px #90caf9; 
    image-rendering: pixelated;
    z-index: 3;
    position: relative;
}
/* 챕터 4 인트로 버튼 */
#ch4-intro-buttons {
    margin-top: 30px;
    opacity: 0; 
    animation: fade-in-buttons 1s forwards;
    animation-delay: 2.5s; 
}
#ch4-intro-buttons button {
    margin: 5px 10px; 
}

/* 챕터 4 버튼 호버 */
#ch4-start-btn:hover {
    background-color: rgba(144, 202, 249, 0.2);
    box-shadow: 0 0 15px #90caf9;
}
/* 챕터 3, 4 인트로 버튼 래퍼  */
.ch3-button-wrapper, .ch4-button-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; 
}
/* 챕터 3, 4 버튼  */
#ch3-intro-buttons button,
#ch4-intro-buttons button {
    margin: 0;
}
/* --- 챕터 4 일시정지 버튼--- */
#ch4-pause-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    width: 26px;
    height: 26px; 
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 0;
    color: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease-out;
    text-shadow: none;
    font-weight: normal;
    line-height: 1;
}
/* '||' 아이콘의 왼쪽 막대 */
#ch4-pause-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%); 
    width: 3px;
    height: 10px;
    background-color: #fff;
    border-radius: 1px;
    transition: all 0.2s ease-out;
}

/* '||' 아이콘의 오른쪽 막대 */
#ch4-pause-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 3px; /* 막대 두께 */
    height: 10px; /* 막대 높이 */
    background-color: #fff;
    border-radius: 1px;
    transition: all 0.2s ease-out;
}
/* 호버 효과 */
#ch4-pause-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    color: transparent;
    text-shadow: none;
    opacity: 1;
}
/* 클릭 효과 */
#ch4-pause-btn:active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: transparent;
    text-shadow: none;
    opacity: 0.8;
}

/* ===== 챕터 5: 우주 (방명록) - 웜톤 테마 적용 ===== */
/* 챕터 5는 자체 캔버스 배경을 사용하므로, 공통 배경/오버레이를 숨깁니다. */
#chapter5-container::before,
#chapter5-container::after {
    display: none;
}
/* 챕터 5 컨테이너 (기존과 동일) */
#chapter5-container {
	height: 100dvh; 
    overflow-y: scroll; /* 세로 스크롤만 허용 */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding: 0 !important;
    background-color: #00000c;
}
#chapter5-container.game-started {
    justify-content: flex-start;
    align-items: flex-start;
}
#chapter5-container:active {
    cursor: grabbing;
}

/* 0. 뷰 전환 토글 (깔끔한 와이어프레임 스타일) */
#ch5-view-toggle {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    
    gap: 10px;
}

/* 0. 뷰 전환 토글  */
#ch5-view-toggle {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    
    /* 캡슐 '트랙' 디자인 */
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--ch5-warm-color-darker);
    border-radius: 50px; /* 캡슐 모양 */
    padding: 4px;
    box-shadow: 0 0 15px rgba(255, 213, 79, 0.3); /* 웜톤 그림자 */
    gap: 0;
}

/* 비활성 버튼: 투명 (트랙 배경색이 비침) */
.ch5-toggle-btn {
    background-color: transparent; 
    border: none;
    color: #a4b0be;
    padding: 6px;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px; /* 캡슐 모양 */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 비활성 버튼 호버*/
.ch5-toggle-btn:not(.active):hover {
    background-color: transparent;
    color: #fff;
}

/* 활성 버튼: '웜톤 캡슐'로 채우기 */
.ch5-toggle-btn.active {
    background-color: var(--ch5-warm-color);
    border: none;
    color: #000;
    box-shadow: 0 0 10px var(--ch5-warm-color);
}

/* 1. 우주 공간 래퍼 (기존과 동일) */
#ch5-universe-wrapper {
    width: 100%; 
    height: 2000px; 
    position: relative;
    display: block; 
    flex-shrink: 0; 
    background-image: url('https://lh3.googleusercontent.com/d/1sIpbZzBC_roHnDF3dliaUTsGtHVuAgwv'); 
    background-repeat: no-repeat;
    filter: brightness(0.8);
}
#ch5-starfield-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
#ch5-constellation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* 1c. 메시지 별 스타일 (웜톤 적용) */
.ch5-star {
    position: absolute;
    font-size: 2.5em;
    cursor: pointer;
    transform-origin: center center;
    animation: twinkle 3s infinite ease-in-out;
    /* 웜톤 그림자 */
    filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 15px var(--ch5-warm-color));
    transition: transform 0.3s ease;
}
.ch5-star:hover {
    transform: scale(1.5) !important;
    animation-play-state: paused;
}
@keyframes twinkle {
    0%, 100% {
        opacity: 0.7;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}
/* 2. 캐러셀 */
#ch5-list-view-wrapper {
    display: none;
    width: 100%;
    max-width: 400px; /* 카드 1개 크기에 맞춤 */
    position: relative;
    z-index: 5;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 120px; /* 하단 '별 띄우기' 버튼 여유 공간 */
    overflow: hidden; /* 좌우로 넘치는 트랙 숨김 */
}
/* 2a. 캐러셀 트랙 (실제 움직이는 긴 막대) */
#ch5-list-track {
    display: flex; /* 아이템을 가로로 나열 */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 2b. 캐러셀 슬라이드 (카드 1개) */
.ch5-list-slide {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 10; 
    user-select: none; /* 스와이프 시 텍스트 선택 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 2c. 슬라이드 내부 콘텐츠  */
.ch5-list-slide-content {
    background-color: var(--ch5-warm-color-hover);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 80%; 
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* 카드 내부 아이콘, 이름, 메시지 */
.ch5-list-item-icon {
    font-size: 2em;
    margin-bottom: 10px;
}

/* 리스트 뷰 아이콘이 이미지일 경우 스타일 */
.ch5-list-item-icon.image-icon {
    font-size: 0;
    width: 32px; 
    height: 32px;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ch5-list-item-name {
    font-family: 'Galmuri11', monospace;
    font-weight: 700;
    color: #9ab;
    font-size: 0.85em;
}
.ch5-list-item-message {
    color: #E0E1DD;
    font-size: 0.95em;
    line-height: 1.7;
    margin-top: 15px;
    word-break: keep-all;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px; /* 스크롤바 공간 */
    font-family: 'Galmuri11', monospace;
    -webkit-overflow-scrolling: touch; 
    
    mask-image: linear-gradient(
        to bottom, 
        black 0%,      /* 상단부터 */
        black 85%,     /* 85% 지점까지는 완전히 불투명 */
        transparent 100% /* 하단 15% 지점에서 완전히 투명하게 페이드 아웃 */
    );
}
/* 스크롤바  */
.ch5-list-item-message::-webkit-scrollbar {
    width: 4px; /* 스크롤바 너비 */
    height: 4px;
    background: transparent; /* 트랙 배경색 투명 설정 */
}
.ch5-list-item-message::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* 트랙 배경 (연하게) */
    border-radius: 4px;
}
.ch5-list-item-message::-webkit-scrollbar-thumb {
    background: #fff; /* 엄지 부분 색상 (웜톤 테마이므로 흰색을 추천) */
    border-radius: 4px;
}

.ch5-list-item-message, 
#ch5-message-modal-text {
    transition: mask-image 0.3s ease-out; /* 부드러운 전환 효과 추가 */
}
/* 스크롤이 바닥에 닿았을 때  */
.at-bottom {
    mask-image: none !important; 
}
/* 2d. 캐러셀 탐색 버튼 (< >) -  */
.ch5-list-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    background-color: transparent;
    border: none;
    font-size: 0;
    text-shadow: none;
    
    /* SVG 아이콘 버튼에 맞는 패딩 */
    padding: 10px; /* 클릭 영역 확보 */
    border-radius: 50%; /* 호버 효과를 위한 원형 */
    width: 44px;  /* (SVG 24px + 패딩 10px*2) */
    height: 44px; /* (SVG 24px + 패딩 10px*2) */
    
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 버튼 안의 SVG 스타일 */
.ch5-list-nav-btn svg {
    width: 24px;
    height: 24px;
}

/* 위치: 래퍼 가장자리에서 5px 안쪽 */
#ch5-list-prev { 
    left: 5px; 
}
#ch5-list-next { 
    right: 5px; 
}
/* 2e. 캐러셀 카운터 (페이지 번호) */
#ch5-list-counter {
    position: absolute;
    bottom: 85px; /* '별 띄우기' 버튼 바로 위 */
    left: 50%;
    transform: translateX(-50%);
    color: #9ab;
    font-size: 0.9em;
    font-weight: 700;
    z-index: 10;
    display: none;
}

/* 2b. 뷰 전환 로직 (기존과 동일) */
/* 목록 뷰일 때, 우주 래퍼를 배경처럼 뒤로 보냅니다. */
#chapter5-container.list-view-active #ch5-universe-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block; /* 숨기지 않고 보이게 둡니다 */
    flex-shrink: 1;
}

#chapter5-container.list-view-active #ch5-constellation {
    /* 캔버스는 놔두고, 인터랙티브 별만 숨깁니다. */
    display: none; 
}
#chapter5-container.list-view-active #ch5-list-view-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh; 
    box-sizing: border-box; 
}
#chapter5-container.list-view-active {
    cursor: default;
    overflow: hidden; /* 목록 뷰일 땐 챕터 5의 스크롤바 숨김 */
}

/* 3. '별 띄우기' 고정 버튼 (웜톤 적용) */
#ch5-write-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    /* 웜톤 버튼 */
    border-color: var(--ch5-warm-color);
    color: var(--ch5-warm-color);
    box-shadow: 0 0 8px var(--ch5-warm-color);
    display: none;
}
#ch5-write-btn:hover {
    /* 웜톤 호버 */
    background-color: var(--ch5-warm-color-hover);
    box-shadow: 0 0 15px var(--ch5-warm-color);
    transform: translateX(-50%) scale(1.05);
}

/* 4. 챕터 5 모달 공통 스타일 (웜톤 적용) */
.ch5-modal-content {
    /* 팝업 레이아웃 (좀 더 컴팩트하게) */
    max-width: 360px;
    /* 테두리: 웜톤 / 그림자: 웜톤 (부드럽게) */
    border-color: var(--ch5-warm-color);
    box-shadow: 0 0 20px rgba(255, 213, 79, 0.5); /* 그림자 살짝 연하게 */
}
.ch5-modal-content h4 {
	margin: 15px 0;
    color: #fff;
    font-family: 'Galmuri11', monospace;
}
.ch5-close-btn {
	color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}
.ch5-close-btn:hover {
    color: #fff; /* 호버 시에만 선명하게 */
}
/* 5. 챕터 5-1: 작성 폼 모달 내부 스타일 (웜톤 적용) */
#ch5-guestbook-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
}
#ch5-guestbook-form label {
    font-size: 0.8em;
    color: #9ab;
    margin-bottom: -10px;
}

/* 별 디자인 선택기 (웜톤 적용) */
#ch5-star-selector {
    display: flex;
    justify-content: flex-start; 
    gap: 15px;
    align-items: center;
    margin: 0;
    padding: 10px; 
    flex-wrap: nowrap;
    overflow-x: auto;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
/* 2. 각 옵션 버튼 내부의 텍스트도 중앙 정렬 및 높이/폭 고정 */
.ch5-star-option {
    font-size: 2em;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; 
    width: 32px; 
    height: 32px; 
}
.ch5-star-option.selected {
    transform: scale(1.3);
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--ch5-warm-color));
}

/* 입력칸 (웜톤 적용) */
#ch5-input-name,
#ch5-input-message {
    background-color: rgba(255, 255, 255, 0.05); 
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    caret-color: var(--ch5-warm-color);
    transition: border-color 0.2s, background-color 0.2s;
    padding: 10px;
    font-size: 0.95em;
    font-family: 'Galmuri11', monospace;
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
}
#ch5-input-message {
    resize: vertical;
    min-height: 80px;
}
#ch5-input-name::placeholder,
#ch5-input-message::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
/* 폼 클릭 시 웜톤으로 반응 */
#ch5-input-name:focus,
#ch5-input-message:focus {
    outline: none;
    border-color: var(--ch5-warm-color);
    background-color: var(--ch5-warm-color-hover);
}

/* 제출 버튼 (웜톤 적용) */
#ch5-form-submit-btn {
    border-color: var(--ch5-warm-color);
    color: var(--ch5-warm-color);
    box-shadow: 0 0 8px var(--ch5-warm-color);
}
#ch5-form-submit-btn:hover {
    background-color: var(--ch5-warm-color-hover);
    box-shadow: 0 0 15px var(--ch5-warm-color);
}


/* 6. 챕터 5-2: 메시지 상세 보기 모달 (웜톤 적용) */
#ch5-message-modal-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
    line-height: 1;
    filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 15px var(--ch5-warm-color));
    display: flex; 
    justify-content: center;
    align-items: center;
}
#ch5-message-modal-text {
    font-size: .95em;
    max-height: 40vh;
    overflow-y: auto;
    text-align: left;
    margin-top: 18px;
    padding-left: 0;
    -webkit-overflow-scrolling: touch; 
    
    /* [스크롤 페이드 속성] */
    mask-image: linear-gradient(
        to bottom, 
        black 0%, 
        black 90%,     /* 90% 지점까지 불투명하게 유지 (모달은 조금 더 길게) */
        transparent 100%
    );
}
#ch5-message-modal-text::-webkit-scrollbar {
    width: 4px; /* 스크롤바 너비 */
    height: 4px;
    background: transparent; /* 트랙 배경색 투명 설정 */
}
#ch5-message-modal-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* 트랙 배경 (연하게) */
    border-radius: 4px;
}
#ch5-message-modal-text::-webkit-scrollbar-thumb {
    background: #fff; /* 엄지 부분 색상 */
    border-radius: 4px;
}
#ch5-message-modal-author {
    margin-top: 15px;
    font-size: 0.85em;
    color: #9ab;
    font-style: italic;
}
/* 챕터 5: 별 아래 닉네임 라벨 스타일 (가시성 및 절대 크기 적용) */
.ch5-star-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; 
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px; 
    text-shadow: 0 0 3px #000; 
    pointer-events: none; 
}
/* 챕터 5: IMG 태그 스타일 (Text-to-Image 전환) */
/* 1. 디자인 선택 모달 및 별자리 뷰의 IMG 크기 */
.ch5-star-option img, 
.ch5-star img {
    width: 35px;
    height: 35px;
    object-fit: contain; 
}
/* 2. 목록 뷰 (캐러셀)의 IMG 크기 */
.ch5-list-item-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
/* 3. 메시지 상세 모달의 IMG 크기 */
#ch5-message-modal-icon img {
    width: 40px; /* 모달 내 아이콘 크기 */
    height: 40px;
    object-fit: contain;
}
/* 챕터 5: 메시지 상세 모달 (편지/왼쪽 정렬 스타일) */
#ch5-message-modal .ch5-modal-content {
    /* 모달 너비 약간 줄여서 편지/카드 느낌 강조 */
    max-width: 450px; 
    text-align: left; 
    padding: 40px 30px; 
}
/* 아이콘 위치 (왼쪽으로 붙이기) */
#ch5-message-modal-icon {
    margin: 0 auto 15px 0;
    width: auto;
}
/* 이미지일 경우 텍스트/이모지 스타일 제거 */
.ch5-star-option[data-star-design^="http"] {
    font-size: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --- 챕터 5: 뒤로가기 버튼  --- */
#ch5-back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10; 

    /* [디자인] 반투명 원형 버튼 */
    width: 26px;
    height: 26px; 
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    
    /* [화살표 스타일] */
    font-size: 1.2em;
    color: #fff; 
    line-height: 1;
    
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease-out;
    display: flex; 
    justify-content: center;
    align-items: center;
}

/* 웜톤 호버/액티브 효과 적용 */
#ch5-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), 0 0 10px var(--ch5-warm-color, #ffd54f); 
}
#ch5-back-btn:active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- 챕터 5 시네마틱 배경 스타일 --- */
#story-overlay {
    background-image: url('https://lh3.googleusercontent.com/d/1sIpbZzBC_roHnDF3dliaUTsGtHVuAgwv');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 텍스트와 배경의 대비를 위해 어둡고 투명한 오버레이 추가 */
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: multiply;
}

/* --- 은하수 축제 시네마틱 효과 --- */
/* 1. 텍스트 컨테이너의 배경 및 패딩 */
.ch5-cinematic-active #story-text-container {
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 15px;
}
/* 2. 텍스트 문단의 크기 및 발광 효과 */
.ch5-cinematic-active #story-text-container p {
    font-family: 'Galmuri11', monospace;
    font-size: 1em;
    color: #FFFFFF; 
    text-shadow: 
        0 0 10px #E0FFFF,   /* 약한 푸른빛 (base) */
        0 0 20px #FFFFFF,   /* 중간 강도 흰색 (core) */
        0 0 35px rgba(50, 150, 255, 0.7); /* 확산되는 푸른빛 (glow) */
    background-color: rgb(0, 0, 0, 0.7);
}
/* 글자 주변에 흐르는 별빛 가상 요소 */
.ch5-cinematic-active #story-text-container p::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    opacity: 0.8;
	background: radial-gradient(circle at 10% 20%, rgb(255 240 220 / 69%) 1px, transparent 1px), /* Pale Gold */ 
				radial-gradient(circle at 30% 70%, rgb(255 220 180 / 64%) 1px, transparent 1px), /* Soft Peach */ 
				radial-gradient(circle at 60% 40%, rgba(255, 245, 210, 0.7) 1px, transparent 1px), /* Light Yellow */ 
				radial-gradient(circle at 80% 90%, rgb(255 235 200 / 60%) 1px, transparent 1px), /* Warm White */ 
				radial-gradient(circle at 45% 10%, rgba(255, 240, 220, 0.5) 1px, transparent 1px), /* Pale Gold */ 
				radial-gradient(circle at 20% 50%, rgb(255 225 190 / 55%) 1px, transparent 1px);
	background-size: 50px 50px; /* 별점 패턴의 크기 */
    background-repeat: repeat;
    animation: text-starlight-flow 90s linear infinite;
    z-index: -1;
}