/* ========================================
   教科・学年 カスタムドロップダウン
   site.css 末尾に追記
======================================== */

/* subject-filter-area 内のラッパー */
#sgSubjectDropdown,
#sgGradeDropdown {
    flex: 1;
    position: relative;
}

/* トリガーボタン（sf-sort-trigger と同パターン） */
.sg-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 12px 12px; /* ← 縦を広めに */
    background: #f8f9fa;
    border: 1.5px solid #d0d0d0;
    border-radius: 8px;
    cursor: pointer;
    font-size: clamp(13px, 3.2vw, 15px);
    font-weight: 600;
    color: #444;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    font-family: inherit;
}

    .sg-trigger:hover {
        background: #f0f4ff; /* f1f8f1 → */
        border-color: #90caf9; /* a5d6a7 → */
    }

    .sg-trigger:active {
        transform: scale(0.97);
    }

    .sg-trigger.active {
        background: #e3f2fd; /* e8f5e9 → */
        border-color: #1565C0; /* 4CAF50 → */
        color: #1565C0; /* 2e7d32 → */
    }

.sg-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-arrow {
    font-size: 10px;
    transition: transform 0.25s ease;
    color: #999;
    flex-shrink: 0;
}

.sg-trigger.active .sg-arrow {
    color: #1565C0; /* 2e7d32 → */
}

/* ドロップダウンメニュー */
.sg-menu {
    display: none;
    position: fixed; /* fixed でボタン等に隠れない */
    background: white;
    border: 1.5px solid #90caf9; /* a5d6a7 → */
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    animation: sgMenuSlideDown 0.2s ease;
    min-width: 140px;
}

    .sg-menu.open {
        display: block;
    }

@keyframes sgMenuSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* メニュー項目（縦幅を広めに） */
.sg-option {
    display: flex;
    align-items: center;
    padding: 14px 18px; /* ← 通常より広め */
    font-size: clamp(13px, 3.2vw, 15px);
    color: #333;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-weight: 400;
    border-bottom: 1px solid #f0f0f0;
    font-family: inherit;
    transition: background 0.15s ease;
}

    .sg-option:last-child {
        border-bottom: none;
    }

    .sg-option:hover {
        background: #f0f4ff; /* f1f8f1 → */
    }

    .sg-option:active {
        background: #e3f2fd; /* e8f5e9 → */
    }

    .sg-option.selected {
        color: #1565C0; /* 2e7d32 → */
        background: #e3f2fd; /* e8f5e9 → */
    }

        .sg-option.selected::before {
            content: '✓';
            margin-right: 8px;
            font-weight: bold;
            color: #1565C0; /* 4CAF50 → */
        }