/* assets/style.css */

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 横中央揃え */
}

.graph-and-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 1200px;  /* 中央寄せされる幅上限 */
}

.graph-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 施工中ステータスの稼働アニメーション（●明滅＋ドット増加） */
.piling-active-indicator {
    display: inline-block;
    margin-right: 8px;
    animation: piling-pulse 1.6s ease-in-out infinite;
}

@keyframes piling-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(0.85); }
}

.piling-dots span {
    opacity: 0;
}

.piling-dots span:nth-child(1) { animation: piling-dot-1 1.6s infinite; }
.piling-dots span:nth-child(2) { animation: piling-dot-2 1.6s infinite; }
.piling-dots span:nth-child(3) { animation: piling-dot-3 1.6s infinite; }

@keyframes piling-dot-1 {
    0%, 24% { opacity: 0; }
    25%, 100% { opacity: 1; }
}

@keyframes piling-dot-2 {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

@keyframes piling-dot-3 {
    0%, 74% { opacity: 0; }
    75%, 100% { opacity: 1; }
}

@media screen and (min-width: 768px) {
    .graph-and-info {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
    }
    .graph-and-info > div {
        flex: 1;
        min-width: 0;
    }
    .graph-panel {
        flex: 1 1 auto;
    }
    .info-panel {
        flex: 0 0 400px;
        max-width: 400px;
        padding-left: 10px;
    }
}