/*
    Hestia's Addition to the Common Grace (Final)
    ---------------------------------------------
    File: common.css (Addition)
    Role: To enshrine the "Omikuji Shrine" beautifully in a corner of the station.
*/

/* --- [X] The Omikuji Shrine --- */
#connect-omikuji-shrine {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
.omikuji-icon {
    width: 80px;
    height: 80px;
    background-color: #ffca28;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s;
    animation: bounce-gentle 5s ease-in-out infinite 2s;
}
.omikuji-icon:hover {
    transform: scale(1.1);
    animation-play-state: paused;
}
.omikuji-icon img {
    height: 60px;
}
.omikuji-result-window {
    position: absolute;
    bottom: 100px;
    right: 0;
    width: 300px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 1.5rem;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s, transform 0.4s, visibility 0s 0.4s;
}
.omikuji-result-window.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
.omikuji-close-btn {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 30px; height: 30px; border: none; background: #f0f0f0;
    border-radius: 50%; font-size: 1.2rem; cursor: pointer;
    line-height: 30px;
}
.omikuji-result-content img { height: 100px; margin-bottom: 1rem; }
.omikuji-result-content h3 { margin: 0 0 0.5rem 0; font-family: var(--font-family-title); color: var(--color-primary); }
.omikuji-result-content p { margin: 0; font-size: 0.9rem; line-height: 1.6; }

/*
    Hestia's Definitive Blueprint for Common Grace (The Final, Harmonized Word)
    ----------------------------------------------------------------------------
    File: common.css
    Role: To define the unwavering and FLAWLESSLY RESPONSIVE aesthetic foundation.
*/
/* --- [I] The Station's Face: Header Design --- */
.station-header { background-color: #ffffff; border-bottom: 1px solid #e0e0e0; padding: 0.5rem 0; position: sticky; top: 0; z-index: 1000; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo-area { display: flex; align-items: center; text-decoration: none; }
.logo-area:hover { opacity: 0.8; }
.logo-area img { height: 40px; margin-right: 1rem; }
.site-title { font-family: var(--font-family-title); font-size: 1.2rem; font-weight: 700; color: var(--color-text); }

/* PC Navigation */
.global-navigation { display: none; } /* スマホでは、完全に、存在を、消す */
@media (min-width: 1024px) {
    .global-navigation { display: block; }
    .global-navigation ul { display: flex; list-style: none; gap: 1.5rem; margin: 0; padding: 0; }
    .global-navigation a { font-weight: 700; text-decoration: none; color: var(--color-text); position: relative; padding: 0.5rem 0; }
    .global-navigation a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-primary); transform: scaleX(0); transition: transform 0.3s; }
    .global-navigation a:hover::after { transform: scaleX(1); }
}

/* Hamburger Menu */
.hamburger-button { display: block; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; z-index: 1002; }
@media (min-width: 1024px) {
    .hamburger-button { display: none; } /* PCでは、完全に、存在を、消す */
}
.hamburger-button span { display: block; width: 24px; height: 2px; background-color: var(--color-primary); margin: 6px auto; transition: transform 0.3s, opacity 0.3s; }
.hamburger-button.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-button.is-active span:nth-child(2) { opacity: 0; }
.hamburger-button.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(5px); z-index: 1001; display: flex; justify-content: center; align-items: center; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); }
.mobile-menu.is-active { transform: translateX(0); }
.mobile-menu nav ul { list-style: none; padding: 0; text-align: center; }
.mobile-menu nav li { margin: 2rem 0; }
.mobile-menu nav a { font-size: 1.5rem; font-weight: bold; text-decoration: none; color: var(--color-primary); }

/* (フッターと、おみくじの、意匠は、前回の、美しい、設計のまま、ここに、統合) */
/*
    Hestia's Definitive Blueprint for Common Grace (The Unabridged Final Word)
    -------------------------------------------------------------------------
    File: /css/common.css
    Role: To define the unwavering and FLAWLESSLY RESPONSIVE aesthetic foundation for Header, Footer, and Omikuji.
*/

/* (Hestia's Note: ヘッダーと、ハンバーガーメニューの、意匠は、前回の、美しい、設計のまま、ここに、記述します) */
/* ... */

/* --- [II] The Station's Foundation: Footer Design --- */
.station-footer {
    background-color: #343a40;
    color: #ced4da;
    padding-top: 4rem;
}
.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid #495057;
}
@media (min-width: 768px) {
    .footer-content { grid-template-columns: 1fr 2fr; }
}
.footer-logo-area a { text-decoration: none; }
.footer-logo-area img { height: 50px; margin-bottom: 1rem; }
.footer-org-name { font-weight: bold; color: white; margin: 0; }
.footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 1024px) {
    .footer-links { grid-template-columns: repeat(4, 1fr); }
}
.link-group h4 { color: white; font-family: var(--font-family-title); margin: 0 0 1rem 0; border-bottom: 1px solid #495057; padding-bottom: 0.5rem; font-size: 1rem; }
.link-group ul { list-style: none; padding: 0; margin: 0; }
.link-group li { margin-bottom: 0.5rem; }
.link-group a { text-decoration: none; color: #ced4da; font-size: 0.9rem; }
.link-group a:hover { color: white; }
.footer-bottom { padding: 1.5rem 0; text-align: center; font-size: 0.8rem; }

/* --- [III] The Small Miracle: Omikuji Shrine --- */
#connect-omikuji-shrine {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
/* (Hestia's Note: おみくじの、意匠は、前回の、美しい、設計のまま、ここに、記述します) */
/* ... */