/* modal.css */

/* ==== UI Color Tokens (mapped from `색상.txt` roles) ==== */
#fd-fab-container,
#fd-panel,
#fd-mass-search-overlay,
#fd-my-cathedral-modal {
    /* page base / surfaces */
    --bg: #FAFAF5;
    --surface: #FFFFFF;
    --muted: rgba(143, 168, 143, 0.18);
    --line: #8FA88F;

    /* text */
    --text-strong: #332E2A;
    --text-muted: #706962;
    --text-inverse: #FFFFFF;
    --text-inverse-muted: rgba(255, 255, 255, 0.78);

    /* brand / roles */
    --wood: #231F20;         /* Onyx / Dark Charcoal - Deep & Luxurious */
    --gold: #D4AF37;         /* Metallic Gold - Catholic Tradition */
    --gold-btn: #660000;     /* Deep Crimson / Blood Red - Passion/Martyrdom */
    --gold-hover: #800000;   /* Slightly lighter crimson */

    /* functional */
    --link: #800000;
    --accent: #D4AF37;
    --focus: #660000;
    --success: #5F7D1F;
    --info: #677584;
    --error: #B22222;

    /* legacy aliases (keep for compatibility) */
    --violet: var(--link);
    --green: var(--success);
    --red: var(--error);
    --rose: var(--accent);

    /* FAB specific variables */
    --fab-bg-color: #660000; /* Deep Crimson Background */
    --fab-icon-color: #D4AF37; /* Gold Icon */
    --fab-text-color: #FAFAF5; /* Light Text */
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap&subset=korean');

/* ==== Accessibility: Reduced Motion Support ==== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==== Enhanced UX: Custom Scrollbar ==== */
#fd-panel::-webkit-scrollbar,
#fd-searchResult::-webkit-scrollbar {
    width: 8px;
}

#fd-panel::-webkit-scrollbar-track,
#fd-searchResult::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#fd-panel::-webkit-scrollbar-thumb,
#fd-searchResult::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 4px;
    transition: background 0.2s ease;
}

#fd-panel::-webkit-scrollbar-thumb:hover,
#fd-searchResult::-webkit-scrollbar-thumb:hover {
    background: var(--gold-hover);
}

/* ==== Enhanced UX: Text Selection ==== */
::selection {
    background-color: var(--gold);
    color: var(--text-inverse);
}

::-moz-selection {
    background-color: var(--gold);
    color: var(--text-inverse);
}

/* Keyframes remain the same */
@keyframes fdPulseGlow {0%{box-shadow:0 0 15px rgba(198,166,100,.7),0 0 5px rgba(198,166,100,.4) inset}50%{box-shadow:0 0 30px rgba(198,166,100,1),0 0 10px rgba(198,166,100,.8) inset}100%{box-shadow:0 0 15px rgba(198,166,100,.7),0 0 5px rgba(198,166,100,.4) inset}}
@keyframes fdFadeIn{from{opacity:0}to{opacity:1}}
        @keyframes fdFadeOut{from{opacity:1}to{opacity:0}}
        @keyframes fdScaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

        /* New animation for the FAB to make it more visible */
        @keyframes fab-pulse {
            50% {
                transform: scale(1.04);
            }
        }

        /* --- New Floating Action Button (FAB) Styles --- */
        #fd-fab-container {
            position: fixed;
            bottom: 35px;
            right: 35px;
            width: 64px;
            height: 64px;
            cursor: pointer;
            z-index: 9999;
            border-radius: 32px; /* Make the container a circle/pill */
            filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12));
            /* Animate the scale instead of filter to avoid conflicts */
            animation: fab-pulse 2.5s infinite ease-in-out;
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                        filter 0.3s ease,
                        width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        #fd-fab-container .fab-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: opacity 0.3s ease-in-out;
        }

        #fd-fab-container .fab-expanded {
            opacity: 0;
            pointer-events: none; /* Prevents interaction when hidden */
        }

        #fd-fab-container:hover {
            /* Disable the pulse animation and set a static hover scale */
            animation: none;
            transform: scale(1.1);
            filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12)) brightness(1.03);
            width: 180px; /* Adjust container size on hover */
        }

#fd-fab-container:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    #fd-fab-container {
        /* Slightly larger tap target on touch devices */
        width: 68px;
        height: 68px;
    }
}

#fd-fab-container:hover .fab-default {
    opacity: 0;
}

#fd-fab-container:hover .fab-expanded {
    opacity: 1;
    pointer-events: auto;
}

/* Loading indicator style */
#fd-fab-container.loading {
    animation: fdPulseGlow 1.5s ease-in-out infinite;
}

/* SVG internal parts styling */
.fab-background {
    fill: var(--fab-bg-color);
}
.fab-icon, .fab-icon-halo {
    stroke: var(--fab-icon-color);
}
.fab-text {
    fill: var(--fab-text-color);
}
.fab-edge-halo {
    stroke: rgba(255, 255, 255, 0.35);
}


/* --- Panel (dark tool panel) --- */
#fd-panel{position:fixed;bottom:105px;right:35px;background:var(--wood);color:var(--text-inverse);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 16px 40px rgba(51,46,42,.32);width:380px;max-height:0;overflow-y:auto;transition:max-height .4s,opacity .4s;opacity:0;z-index:9999;font-family:'Noto Sans KR',sans-serif}

/* dark-context overrides (keeps panel controls consistent) */
#fd-panel{--muted:rgba(255,255,255,.08);--line:rgba(255,255,255,.16);--text-muted:rgba(255,255,255,.78)}
#fd-panel.open{max-height:90vh;opacity:1}
#fd-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
#fd-panel li{margin:0}

/* menu list items (Clean & Elegant) */
#fd-panel li > button,
#fd-panel li > a {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    border-radius: 0;
    background: transparent;
    border: none;
    /* border-bottom removed for cleaner look */
    color: var(--text-inverse);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#fd-panel li > button:hover,
#fd-panel li > a:hover {
    color: var(--gold);
    background: rgba(255, 255, 255, 0.02);
    padding-left: 26px; /* Elegant slide effect */
}

#fd-panel li > button:active,
#fd-panel li > a:active {
    background: rgba(255, 255, 255, 0.05);
}

/* icons */
#fd-panel .fd-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;color:currentColor}
#fd-panel .fd-icon svg{width:18px;height:18px;display:block}
#fd-panel .fd-icon--empty{opacity:0}

/* text wrapper */
#fd-panel .fd-item-text{flex:1;min-width:0}

/* allow icon+text in titles too */
#fd-panel .fd-main-search-title{display:flex;align-items:center;gap:8px}

/* separators inside the flex list */
.fd-list-separator{height:1px;background-color:rgba(255,255,255,.15);margin:0}

#fd-panel a{text-decoration:none;}
.fd-rosary-mystery{background-color:rgba(255,255,255,.10);color:var(--text-inverse);padding:2px 6px;border-radius:4px;font-weight:500;font-size:.85em;margin-left:5px;display:inline-block}
#fd-panel-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid rgba(255,255,255,.12)}
#fd-source{font-size:.75rem;color:rgba(255,255,255,.78)}
#fd-panel mark{background-color:rgba(255,255,255,.14);color:var(--text-inverse);padding:0 .2em;border-radius:2px}

/* small meta label inside items */
#fd-panel .fd-item-type{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.82);font-size:.75em;opacity:1}

/* --- Search Group --- */
.fd-search-group{padding:12px;border-top:1px solid rgba(255,255,255,.12)}
.fd-main-search-title{font-size:.9rem;font-weight:500;color:var(--gold);margin:0 0 10px 0;text-align:left}
#fd-search-wrap{padding:0;margin-bottom:8px}
.fd-search-input-container{display:flex;align-items:center;padding:0}
.fd-search-icon{font-size:0.9rem;color:var(--text-muted);margin-right:8px;flex-shrink:0;background:var(--muted);padding:.5rem;border-radius:6px 0 0 6px;border:1px solid var(--line);border-right:none}
#fd-searchBar,
#fd-catechism-input,
#fd-cathedral-search-input{flex-grow:1;width:100%;padding:.5rem .8rem;border:1px solid var(--line);font-size:.95rem;background:var(--surface);color:var(--text-strong);box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease}
#fd-searchBar{border-radius:0 6px 6px 0}
#fd-catechism-input{border-radius:0;padding:.4rem .5rem;font-size:.9rem}
#fd-cathedral-search-input{border-right:none;border-radius:0;height:40px}
#fd-searchBar:focus,
#fd-catechism-input:focus,
#fd-cathedral-search-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.15);z-index:1}
#fd-searchResult{margin-top:8px;max-height:200px;overflow-y:auto}

/* --- Mass search status styles (avoid inline colors) --- */
#fd-cathedral-search-result .fd-status{margin:.5rem 0}
#fd-cathedral-search-result .fd-status--loading{color:var(--info)}
#fd-cathedral-search-result .fd-status--success{color:var(--success);font-weight:600}
#fd-cathedral-search-result .fd-status--time{color:var(--text-strong);font-size:1.5rem;margin-top:.5rem}
#fd-cathedral-search-result .fd-status--note{color:var(--text-muted);font-size:.85rem;margin-top:1rem}
#fd-cathedral-search-result .fd-status--muted{color:var(--text-muted)}
#fd-cathedral-search-result .fd-status--error{color:var(--text-strong);border-left:3px solid var(--error);padding-left:10px}

#fd-cathedral-search-result .fd-secondary-link-btn{display:inline-block;margin-top:1.5rem;padding:.6rem 1.2rem;background-color:var(--surface);color:var(--link);text-decoration:underline;text-underline-offset:3px;border-radius:8px;border:1px solid rgba(143,168,143,.6);transition:background-color .2s,color .2s}
#fd-cathedral-search-result .fd-secondary-link-btn:hover{background-color:var(--muted);color:var(--accent)}

/* --- Catechism Search --- */
#fd-catechism-wrap{padding:0}
.fd-catechism-control{display:flex;align-items:center;gap:0}
#fd-catechism-control .fd-search-icon{border-radius:6px 0 0 6px}
#fd-catechism-btn,
#fd-cathedral-search-btn,
#fd-bible-card #goBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--gold-btn);color:var(--text-inverse);padding:4px 12px;font-weight:500;font-size:.9rem;border:none;cursor:pointer;transition:all .3s ease;font-family:'Noto Sans KR',sans-serif}
#fd-catechism-btn{border-radius:0 6px 6px 0;height:35px}
#fd-cathedral-search-btn{height:40px;border:1px solid var(--line);border-left:none;border-radius:0 6px 6px 0;padding:0 16px}
#fd-catechism-btn:hover,
#fd-cathedral-search-btn:hover,
#fd-bible-card #goBtn:hover{background:var(--gold-hover);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.2)}
#fd-catechism-btn:active,
#fd-cathedral-search-btn:active,
#fd-bible-card #goBtn:active{transform:translateY(0);box-shadow:none}

/* --- Item Type Span --- */
.fd-item-type{color:var(--gold);font-size:.8em;opacity:.8;margin-left:6px}

/* --- Responsive --- */
@media(max-width:768px){
    #fd-fab-container{
        width: 60px;
        height: 60px;
        right: 15px;
        bottom: 85px;
    }
    #fd-fab-container:hover {
        width: 60px; /* No expansion on mobile */
    }
    #fd-fab-container:hover .fab-default {
        opacity: 1; /* Keep default visible */
    }
    #fd-fab-container:hover .fab-expanded {
        opacity: 0; /* Keep expanded hidden */
    }
    #fd-panel{right:10px;bottom:75px;width:calc(100vw - 20px)}
}

/* ==== Print Styles ==== */
@media print {
    #fd-fab-container,
    #fd-panel,
    #fd-mass-search-overlay,
    #fd-my-cathedral-modal {
        display: none !important;
    }
}

/* --- Collapsible Section --- */
.fd-collapsible-section summary {
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    color: var(--gold);
    padding: 10px 0;
    user-select: none;
    outline: none;
    transition: all 0.3s ease;
}
.fd-collapsible-section summary:hover {
    color: var(--gold-hover);
    padding-left: 10px; /* Slide effect like menu */
    background: rgba(255,255,255,.02);
}
.fd-collapsible-section .fd-collapsible-content {
    padding-top: 10px;
}
.fd-collapsible-section[open] summary {
    border-bottom: 1px solid rgba(250, 249, 246, 0.1);
    margin-bottom: 10px;
}


/* --- Panel Title --- */
#fd-title {
    padding: 12px 16px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gold);
    border-bottom: 1px solid rgba(143,168,143,.45);
    text-align: center;
}

/* --- Bible Search Card --- */
#fd-bible-card {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(143,168,143,.45);
}

/* --- Modal Overlays (Mass Search & My Cathedral) --- */
#fd-mass-search-overlay,
#fd-my-cathedral-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(51,46,42,.68);backdrop-filter:blur(4px) saturate(180%);-webkit-backdrop-filter:blur(4px) saturate(180%);z-index:10002;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
#fd-mass-search-overlay.visible,
#fd-my-cathedral-modal.visible{opacity:1;visibility:visible}
.fd-mass-search-modal,
#fd-my-cathedral-modal .fd-modal-content{background:var(--surface);padding:2rem;border-radius:12px;border:1px solid rgba(143,168,143,.65);border-top:4px solid var(--gold-btn);box-shadow:0 24px 70px rgba(51,46,42,.34);width:fit-content;min-width:350px;max-width:90vw;position:relative;transform:translateY(10px) scale(.95);transition:transform .3s ease;color:var(--text-strong)}
#fd-mass-search-overlay.visible .fd-mass-search-modal,
#fd-my-cathedral-modal.visible .fd-modal-content{transform:translateY(0) scale(1)}
.fd-mass-search-modal .fd-mass-search-close,
#fd-my-cathedral-modal .fd-modal-close{position:absolute;top:10px;right:15px;background:none;border:none;color:var(--text-strong);font-size:1.5rem;cursor:pointer}

/* Ensure the icon in the modal aligns correctly */
.fd-mass-search-modal .fd-search-icon{height:40px;display:flex;align-items:center;box-sizing:border-box;border-color:var(--line)}

/* --- Autocomplete Suggestion List --- */
.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.suggestion-item {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid rgba(143,168,143,.65);
    border-radius: 6px;
    color: var(--text-strong);
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
}

.suggestion-item:hover {
    background-color: var(--muted);
}


#fd-bible-card .toggle-btn {
    background: var(--surface);
    color: var(--text-strong);
    border: 1px solid rgba(143,168,143,.65);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

#fd-bible-card .toggle-btn.active {
    background: var(--gold-btn);
    color: var(--text-inverse);
  font-weight: 700;
}

#fd-bible-card select, #fd-bible-card #goBtn {
  font-size: 0.8rem;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
}

#fd-bible-card select{background:var(--surface);color:var(--text-strong);border:1px solid rgba(143,168,143,.65);-webkit-appearance:none;appearance:none;min-width:5.5rem;font-size:.8rem;border-radius:4px;padding:.3rem .55rem}
#fd-bible-card select:focus{outline:2px solid var(--gold)}
#fd-bible-card select option{background:var(--surface);color:var(--text-strong)}
#fd-bible-card select option:checked{background:var(--muted);color:var(--text-strong)}
#fd-bible-card select::-webkit-scrollbar{width:8px}
#fd-bible-card select::-webkit-scrollbar-track{background:var(--surface)}
#fd-bible-card select::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}
#fd-bible-card .bar{color:var(--gold);font-weight:bold;margin:0 .5rem}
#fd-bible-card .note{margin-left:auto;color:var(--gold);font-size:.7rem;white-space:nowrap}
#fd-bible-card .mobile-break{display:none}
#fd-bible-card .fd-bible-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
@media (max-width:480px){#fd-bible-card .mobile-break{display:block;width:100%;height:0}}

/* --- My Cathedral Modal (Added by Gemini) --- */
#fd-my-cathedral-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 46, 42, 0.68);
    z-index: 10002; /* Higher than FAB */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#fd-my-cathedral-modal.visible {
    opacity: 1;
    visibility: visible;
}

#fd-my-cathedral-modal .fd-modal-content {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(143,168,143,.65);
    border-top: 4px solid var(--gold-btn);
    box-shadow: 0 24px 70px rgba(51, 46, 42, 0.34);
    width: fit-content;
    min-width: 350px;
    max-width: 90vw;
    position: relative;
    transform: translateY(10px) scale(0.95);
    transition: transform 0.3s ease;
    color: var(--text-strong);
}

#fd-my-cathedral-modal.visible .fd-modal-content {
    transform: translateY(0) scale(1);
}

#fd-my-cathedral-modal .fd-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-strong);
    font-size: 1.5rem;
    cursor: pointer;
}

#my-cathedral-modal-title {
    color: var(--gold);
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
}

#my-cathedral-modal-body p {
    margin: 0.5rem 0;
    border-bottom: 1px solid rgba(143,168,143,.45);
    padding-bottom: 0.5rem;
}

#my-cathedral-modal-body p strong {
    color: var(--gold);
    margin-right: 0.5rem;
}

.my-cathedral-modal-links {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.my-cathedral-modal-links a {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: var(--surface);
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 8px;
    border: 1px solid rgba(143,168,143,.65);
    transition: background-color 0.2s, color 0.2s;
}

.my-cathedral-modal-links a:hover {
    background-color: var(--muted);
    color: var(--accent);
}

/* --- My Cathedral Modal Memo (Added by Gemini) --- */
#my-cathedral-modal-memo-wrap {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(143,168,143,.45);
    padding-top: 1.5rem;
}

#my-cathedral-modal-memo-wrap label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--gold);
    font-weight: 500;
}

#my-cathedral-modal-memo {
    width: 100%;
    background-color: var(--surface);
    border: 1px solid rgba(143,168,143,.65);
    border-radius: 4px;
    color: var(--text-strong);
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
}

#my-cathedral-modal-save-memo {
    display: block;
    margin-top: 0.75rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--gold-btn);
    color: var(--text-inverse);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#my-cathedral-modal-save-memo:hover {
    background-color: var(--gold-hover);
}

#my-cathedral-modal-memo-status {
    display: inline-block;
    margin-left: 1rem;
    font-size: 0.85rem;
    color: var(--gold);
}

/* --- My Cathedral Item Styling (panel tile-aligned) --- */
#fd-panel .my-cathedral-item button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#fd-panel .my-cathedral-item button:hover {
    transform: none;
}

/* --- Rosary Progress Highlight (panel tile-aligned) --- */
#fd-panel .fd-rosary-progress-highlight {margin:0}
#fd-panel .fd-rosary-progress-highlight > a {
    border-left: 4px solid var(--gold);
    background-color: rgba(194, 122, 88, 0.10);
}
#fd-panel .fd-rosary-progress-highlight > a:hover {
    background-color: rgba(194, 122, 88, 0.14);
}

#fd-panel .my-cathedral-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,.78);
    letter-spacing: 0.4px;
}

#fd-panel .my-cathedral-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-inverse);
}

#fd-panel .my-cathedral-name{display:flex;align-items:center;gap:10px}