/* Default styles for larger screens */
body {
    padding-left: 60px; /* Matches the width of the fixed nav bar */
}
#openRosaryNav {
    position:fixed; /* 추가 */
    top:0; /* 추가 */
    left:0; /* 추가 */
    height:100vh; /* 추가 */
    z-index:9999; /* 추가 */
    writing-mode: vertical-lr; /* 추가 */
    display: flex; /* 추가 */
    align-items: center; /* 추가 */
    justify-content: center; /* 추가 */
    width: 60px;
    font-size: 18px;
    padding: 20px 0;
    background: #4A2C2A; /* Dark brown */
    border-right: 1px solid #DAA520; /* Gold border */
    box-shadow: 2px 0 10px rgba(0,0,0,0.4); /* Darker shadow */
    color: #FFFFFF; /* White text */
}

/* Styles for smaller screens (e.g., mobile) */
@media (max-width: 768px) {
    body {
        padding-left: 40px; /* Adjust padding for narrower bar */
    }
    #openRosaryNav {
        width: 40px; /* Make the bar narrower */
        font-size: 14px; /* Smaller font size for mobile */
        padding: 10px 0; /* Adjust padding */
    }
}

/* Slide-in Panel Overlay (for closing when clicking outside) */
#rosaryNavOverlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:9999;
}

/* Modal specific styles */
#rosaryNavModal {
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 300px; /* Width of the slide-in panel */
    background: #4A2C2A; /* Dark brown panel background */
    z-index: 10000;
    box-shadow: 2px 0 10px rgba(0,0,0,0.4); /* Darker shadow */
    border-right: 1px solid #DAA520; /* Gold border */
    transform: translateX(-100%); /* Start off-screen to the left */
    transition: transform 0.3s ease-out; /* Smooth slide animation */
    display: flex; /* For content alignment */
    flex-direction: column;
    justify-content: flex-start; /* Changed to flex-start */
    align-items: stretch; /* Added to stretch children horizontally */
    padding: 20px;
    box-sizing: border-box;
}
#rosaryNavModal.is-visible { /* Class added by JS when modal is open */
    transform: translateX(0); /* Slide into view */
}

#rosaryNavModal h2 {
    font-size: 2em;
    color: #FFFFFF; /* White text */
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600; /* Slightly bolder */
    text-align: left;
}
#rosaryNavModal p {
    font-size: 1.1em;
    color: #F5F5DC; /* Light beige for secondary text */
    margin-bottom: 25px;
    text-align: left;
}
#rosaryNavModal .mystery-links {
    text-align: left;
    /* flex-grow: 1; */ /* Allow links section to take available space */
    display: flex;
    flex-direction: column;
    /* Removed justify-content: center to allow natural flow */
}
#rosaryNavModal a {
    font-size: 1.4em; /* Slightly larger font */
    color: #DAA520; /* Gold links */
    text-decoration: none;
    margin: 10px 0; /* Increased vertical margin for links */
    transition: color 0.2s ease;
    font-weight: 500; /* Medium weight */
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack number and declaration vertically */
    align-items: flex-start; /* Center horizontally */
    line-height: 1.3; /* Adjust line height for better spacing */
}
#rosaryNavModal a:hover {
    color: #FFD700; /* Brighter gold on hover */
    text-decoration: underline; /* Add underline on hover */
}

#rosaryNavModal a.is-current {
    background-color: #F5F5DC; /* Light beige background for better contrast */
    color: #4A2C2A; /* Dark brown text for better readability */
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    border: 1px solid #DAA520; /* Gold border */
}

#rosaryNavModal a.is-current .mystery-num,
#rosaryNavModal a.is-current .mystery-declaration {
    color: #4A2C2A; /* Dark brown text for inner spans */
}
#rosaryNavModal .mystery-num {
    font-size: 0.8em; /* Smaller for the number */
    font-weight: 700; /* Bolder for the number */
    margin-bottom: 5px; /* Space between number and declaration */
}
#rosaryNavModal .mystery-declaration {
    font-size: 0.7em; /* Smaller for the declaration */
    color: #F5F5DC; /* Light beige for declaration text */
}
#rosaryNavModal .close-button-container {
    text-align: center;
    margin-top: auto; /* Push close button to the bottom */
    padding-top: 20px; /* Space above button */
}
#rosaryNavModal button#closeRosaryNav {
    background: #DAA520; /* Gold background */
    color: #4A2C2A; /* Dark brown text */
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.3s ease, color 0.3s ease;
}
#rosaryNavModal button#closeRosaryNav:hover {
    background: #FFD700; /* Brighter gold on hover */
    color: #4A2C2A; /* Keep dark brown text */
}

/* Styles for the Rosary Method button */
.rosary-method-button-container {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1); /* Subtle separator */
}

#openRosaryMethod {
    background: #DAA520; /* Gold background */
    color: #4A2C2A; /* Dark brown text */
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s ease, color 0.3s ease;
}

#openRosaryMethod:hover {
    background: #FFD700; /* Brighter gold on hover */
    color: #4A2C2A; /* Keep dark brown text */
}

/* Styles for the Rosary Method content area */
#rosaryMethodContent {
    flex-grow: 1; /* Allow content to take available space */
    overflow-y: auto; /* Enable scrolling for content */
    padding-right: 5px; /* Space for scrollbar */
    display: flex; /* Added flex for its children */
    flex-direction: column; /* Stack children vertically */
    align-items: flex-start; /* Align children to the start (left) */
}

#rosaryMethodContent .rosary-modal-content {
    /* Styles from 묵주도식.html, adapted for modal's dark background */
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.95em;
    line-height: 1.5;
    color: #F5F5DC; /* Light beige for general text */
    padding: 0; /* Already has padding from #rosaryNavModal */
}
#rosaryMethodContent .rosary-line {
    font-family: monospace;
    white-space: pre-wrap; /* Allow wrapping for long lines */
    background: rgba(255,255,255,0.1); /* Slightly transparent white for code blocks */
    border-radius: 6px;
    padding: 0.8rem;
    margin: 0.5rem 0 1rem;
    font-size: 0.9em;
    color: #FFFFFF; /* White text for code */
}
#rosaryMethodContent .section-title {
    font-weight: bold;
    margin: 1rem 0 0.5rem;
    color: #DAA520; /* Gold for section titles */
    font-size: 1.05em;
}
#rosaryMethodContent .note-list {
    font-size: 0.85em;
    color: #F5F5DC; /* Light beige for notes */
    margin-left: 1rem;
}
#rosaryMethodContent .note-list li {
    margin-bottom: 0.3rem;
}
#rosaryMethodContent .highlight {
    color: #FFD700; /* Brighter gold for highlights */
    font-weight: bold;
}

/* Styles for the Back button */
.back-button-container {
    margin-bottom: 15px; /* Space below the button */
    align-self: flex-start; /* Align to the start of the cross axis (left) */
    width: 100%; /* Ensure it takes full width for text-align to work */
    text-align: left; /* Explicitly set text alignment for content within the container */
}

#backToMysteryLinks {
    display: inline-block; /* Changed to inline-block to allow text-align on parent to work */
    /* text-align: left; */ /* Removed as parent's text-align will handle it */
    background: #DAA520; /* Gold background */
    color: #4A2C2A; /* Dark brown text */
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s ease, color 0.3s ease;
}

#backToMysteryLinks:hover {
    background: #FFD700; /* Brighter gold on hover */
    color: #4A2C2A; /* Keep dark brown text */
}