.and-gate-template { background-color: #4CAF50; }
.or-gate-template { background-color: #9C27B0; }
.not-gate-template { background-color: #F44336; }
.timer-gate-template { background-color: #00bcd4; } /* シアン */

/* 各論理ゲートの共通サイズとドット配置 */
.and-gate, .or-gate {
    width: 100px;
    height: 80px; /* 少し横長に調整 */
    background-color: #66BB6A; /* Light Green */
    position: absolute;
    /* justify-content, align-items は .component で共通 */
}
.or-gate {
    background-color: #AB47BC; /* Light Purple */
}

.not-gate {
    width: 70px;
    height: 70px;
    background-color: #E57373; /* Light Red */
}

/* タイマーゲートのスタイル */
.timer-gate {
    width: 100px; /* ゲートと同じくらいの幅 */
    height: 80px; /* ゲートと同じくらいの高さ */
    background-color: #d6eaff; /* 水色系など、他のゲートと区別できる色 */
    border: 1px solid #a0c4ff;
}

/* タイマーゲート内の遅延時間表示 */
.timer-gate .delay-display {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}