/* ============================================================
   Progress — 待ち時間
   線は署名色 --brand、回転とドットは控えめに。急かす点滅はしない。
   確定的な進捗＝バー、不確定＝回転かドット。
   ============================================================ */

.bar { width: 100%; max-width: 360px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar .v { height: 100%; width: 62%; background: var(--brand); border-radius: 2px; }

.spin { width: 26px; height: 26px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dots { display: flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ash); animation: pulse 1.2s var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }