/* --- 変数と基本設定 --- */
:root {
    --color-primary: #5865F2; /* Discord Purple */
    --color-background: #edf1f7;
    --color-card: #ffffff;
    --color-text: #2e3338;
    --color-text-muted: #5c6773;
    --color-border: #e0e0e0;
    --color-online: #28a745;
    --color-offline: #dc3545;
    --color-loading: #ffc107;
    --color-copy-button: #e0e0e0;
    --border-radius: 8px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --font-base: 1rem;
    --font-small: 0.9rem;
    --font-large: 1.5rem;
}

body {
    display: none; 
    font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-base);
}

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

section {
    margin-bottom: 30px;
}

h1 {
    font-size: 2rem;
    margin-bottom: 25px;
    color: var(--color-text);
    font-weight: 700;
}
h2 {
    font-size: 1.6rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 25px;
    color: var(--color-text);
}
h3 {
    font-size: 1.2rem; /* h3のサイズを統一 */
    color: var(--color-text);
    margin-top: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* --- ヘッダー / ナビゲーション --- */
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: var(--color-card);
    box-shadow: var(--shadow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.header-nav .logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
}
.header-nav .logo-link {
    text-decoration: none;
    color: inherit;
}
.header-nav nav {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-nav .nav-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-small);
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.2s;
}
.header-nav .nav-link:hover { background-color: rgba(var(--color-primary), 0.1); }
#logout-button {
    padding: 8px 15px;
    font-size: var(--font-small);
    font-weight: 600;
    background-color: #f2f3f5;
    color: var(--color-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#logout-button:hover { background-color: #e3e5e8; }


/* --- index.html (メニュー) 専用 --- */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.link-card {
    display: block;
    background-color: var(--color-card);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.2s, box-shadow 0.2s;
}
.link-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.link-card h3 { margin: 0 0 5px 0; color: var(--color-primary); font-size: 1.2rem; border: none; padding: 0; }
.link-card p { margin: 0; color: var(--color-text-muted); font-size: var(--font-small); }

.menu-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 10px;
}
.menu-item {
    display: block;
    background-color: var(--color-card);
    padding: 15px 20px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    box-shadow: var(--shadow);
    transition: background-color 0.2s, transform 0.2s;
}
.menu-item:hover { background-color: #f9f9f9; transform: translateX(3px); }


/* --- server-template.html (詳細) 専用 --- */
.card {
    background-color: var(--color-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 20px;
}
.card p { margin: 8px 0; color: var(--color-text-muted); }
.card p span { color: var(--color-text); font-weight: 500; }

/* 稼働状況カード */
.status-card {
    background-color: #fdfdfd;
    margin-bottom: 30px;
    padding: 20px;
}
.card-status {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
}
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}
.status-indicator.loading { background-color: var(--color-loading); }
.status-indicator.online { background-color: var(--color-online); }
.status-indicator.offline { background-color: var(--color-offline); }
.status-text.loading { color: var(--color-loading); }
.status-text.online { color: var(--color-online); }
.status-text.offline { color: var(--color-offline); }

/* アドレスカード */
.address-card {
    padding: 20px;
}
.address-copy-group {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 8px 10px;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.address-text {
    flex-grow: 1;
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--color-text);
    word-break: break-all;
}
.copy-button {
    padding: 8px 15px;
    font-size: var(--font-small);
    font-weight: 600;
    background-color: var(--color-copy-button);
    color: var(--color-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.copy-button:hover { background-color: #d0d0d0; }
.copy-button:active { background-color: #c0c0c0; }
.copy-button.copied {
    background-color: var(--color-online);
    color: white;
}


/* Mod一覧 */
.mod-list {
    list-style: none; /* デフォルトのリストスタイルを解除 */
    padding: 0;
    margin: 0;
    display: grid; /* グリッドレイアウト */
    grid-template-columns: 1fr; /* 1列に設定 */
    gap: 10px; /* 項目間の隙間 */
}
.mod-list li {
    background-color: #f8f8f8;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #eee;
    font-size: var(--font-small);
    color: var(--color-text);
    word-break: break-all; /* 長いファイル名も折り返す */
}

/* 読み込み・エラーテキスト */
.loading-text, .error-text, .info-text {
    font-size: var(--font-small);
    color: var(--color-text-muted);
    text-align: center;
    padding: 10px;
}
.error-text { color: var(--color-offline); }


/* --- レスポンシブ対応 (大画面) --- */
@media (min-width: 768px) {
    .container { padding: 20px 30px; }
    
    .quick-links { flex-direction: row; }
    .link-card { flex: 1; }

    .menu-grid { grid-template-columns: repeat(3, 1fr); }
    
    /* ★Mod一覧を2列にする (PCの場合)★ */
    .mod-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .container { padding: 20px 0; }
}

/* ★Botコマンド一覧用のスタイル★ */
.command-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 各コマンド間の隙間 */
}
.command-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.command-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.command-name {
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 3px 8px;
    font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
    font-size: 0.95rem;
    color: #333;
}
.command-description {
    margin: 8px 0 0 5px;
    color: var(--color-text-muted);
}