/* styles.css */

/* 除外テキスト欄のレスポンシブ対応 */
.excluded-text-panel {
    width: 320px;
    flex-shrink: 0;
}

/* スマホ（768px未満）では除外テキスト欄を非表示 */
@media (max-width: 767px) {
    .excluded-text-panel {
        display: none;
    }
    
    .main-content {
        width: 100%;
    }
}

/* タブレット以上では通常表示 */
@media (min-width: 768px) {
    .container-wrapper {
        display: flex;
        gap: 1rem;
    }
    
    .main-content {
        flex: 1;
    }
}

/* ボタンのデフォルトスタイル（PC） */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.control-panel-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ボタンのスマホ最適化 */
@media (max-width: 640px) {
    .button-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .button-group button {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    
    .control-panel-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .control-panel-buttons button {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
}

/* 画像コンテナの調整 */
.image-container {
    width: 100%;
}

/* 2chアイコングリッドのスマホ対応 */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .icon-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1024px) {
    .icon-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}