:root {
    /* コネクトの魂の色：暖かなサンセットオレンジ */
    --primary-color: #FFA726; 
    --background-color: #fffaf0; /* 背景は、陽だまりのような優しいアイボリーに */

    --dark-blue: #424242; /* 少し柔らかいダークグレイに変更 */
    --text-color: #333;

    --font-family-main: 'Noto Sans JP', sans-serif;
    --font-family-mono: 'Roboto Mono', monospace;
}

body { 
    margin: 0; 
    font-family: var(--font-family-main); 
    background-color: var(--background-color); 
    color: var(--text-color); 
    line-height: 1.8; 
    padding-bottom: 100px; /* フローティング表示用のスペース */ 
}

.container { max-width: 900px; margin: 40px auto; padding: 0 20px; }

h1, h2, h3 { 
    font-family: var(--font-family-mono); 
    color: var(--dark-blue); 
}
h2 { 
    border-bottom: 2px solid var(--primary-color); 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
}
a { 
    color: var(--primary-color); 
    text-decoration: none; 
}

/* Navigation */
.global-nav { 
    background-color: #fff; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    padding: 0 20px; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}
.nav-container { 
    max-width: 900px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.nav-logo { 
    font-family: var(--font-family-mono); 
    font-weight: bold; 
    font-size: 1.2em; 
    color: var(--dark-blue); 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
}
.nav-logo img { 
    height: 30px; 
    margin-right: 10px; 
}
.nav-links { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
}
.nav-links li a { 
    padding: 20px 15px; 
    display: block; 
    text-decoration: none; 
    color: var(--text-color); 
    font-weight: bold; 
    transition: color 0.3s ease, background-color 0.3s ease; 
}
.nav-links li a:hover, 
.nav-links li a.active { 
    color: var(--primary-color); 
    background-color: #fff8e1; /* ホバー時の背景色も暖色系に */
}

/* Header */
.hero-header { 
    /* 背景を、コレクトのダークブルーと対になる、明るく優しいオレンジに */
    background-color: #FFECB3; 
    color: var(--dark-blue); /* テキストはダークグレイで可読性を確保 */
    text-align: center; 
    padding: 40px 20px; 
}
.hero-header h1 { 
    color: var(--dark-blue); 
    margin: 0; 
} 
.hero-header p { 
    margin: 5px 0 0; 
    opacity: 0.8; 
}

/* Cards */
.card { 
    background: white; 
    padding: 20px; 
    margin-bottom: 20px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}
.card strong { 
    font-family: var(--font-family-mono); 
}

/* Gallery */
.gallery-main-viewer { 
    text-align: center; 
    margin-bottom: 20px; 
    background: white; 
    padding: 20px; 
}
#gallery-main-svg { 
    max-width: 200px; 
    height: 200px; 
}
#gallery-caption { 
    font-family: var(--font-family-mono); 
    font-weight: bold; 
    font-size: 1.2em; 
}
.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 10px; 
}
.gallery-thumb { 
    background: white; 
    padding: 10px; 
    cursor: pointer; 
    border: 2px solid transparent; 
    transition: border-color 0.3s ease; 
    text-align: center; 
}
.gallery-thumb:hover, 
.gallery-thumb.active { 
    border-color: var(--primary-color); 
}
.gallery-thumb img { 
    width: 80px; 
    height: 80px; 
    display: block; 
    margin: 0 auto 5px; 
}
.gallery-thumb p { 
    font-size: 0.8em; 
    margin: 0; 
    font-family: var(--font-family-mono); 
}

/* [MODIFIED] Interaction Log */
.interaction-log .dialogue { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 20px; 
}
.interaction-log .dialogue img { 
    width: 60px; 
    height: 60px; 
    margin-right: 15px; 
}
.interaction-log .dialogue .bubble { 
    background: #fff; 
    padding: 15px; 
    border-radius: 10px; 
    position: relative; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
/* コネクトの吹き出しは、彼のプライマリカラーで */
.interaction-log .dialogue.connect .bubble { 
    border-top: 4px solid var(--primary-color); 
}
/* コレクトの吹き出し（青）を追加 */
.interaction-log .dialogue.correct .bubble { 
    border-top: 4px solid #00e5ff; 
}
/* ちさまるの吹き出し（優しい赤）を追加 */
.interaction-log .dialogue.chisamaru .bubble { 
    border-top: 4px solid #ff8a80; 
}
.interaction-log .dialogue p { 
    margin: 0; 
}
.interaction-log .dialogue strong { 
    font-family: var(--font-family-mono); 
}

/* [MODIFIED] Floating Connect */
#floating-connect { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 999; 
    cursor: pointer; 
}
#floating-connect img { 
    height: 80px; 
    transition: transform 0.3s ease; 
}
#floating-connect:hover img { 
    transform: scale(1.1) rotate(10deg); /* ホバー時に少し傾けて、彼の陽気さを表現 */
}

/* Footer */
footer { 
    text-align: center; 
    padding: 20px; 
    margin-top: 40px; 
    background: #fff3e0; /* フッターも暖色系に */
    color: #6c757d; 
    font-size: 0.9em; 
}
.footer-links { 
    margin-bottom: 15px; 
}
.footer-links a { 
    margin: 0 10px; 
    color: var(--dark-blue); 
    text-decoration: underline; 
}