/*.progress-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: nowrap;

    padding: 20px;

}



.step-item {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.step-pin {

    width: 50px;

    height: 60px;

    clip-path: path("M25,0 C38,0 50,12 50,25 C50,38 25,60 25,60 C25,60 0,38 0,25 C0,12 12,0 25,0 Z");

    background-color: #ccc;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



    .step-pin.active .step-inner {

        background-color: white;

        color: inherit;

    }



.step-inner {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background-color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 16px;

    z-index: 1;

}



.step-label {

    margin-top: 5px;

    font-size: 13px;

    white-space: nowrap;

    text-align: center;

}



.step-arrow {

    width: 20px;

    height: 2px;

    background-image: linear-gradient(to right, #ccc 50%, rgba(255,255,255,0) 0%);

    background-size: 6px 2px;

    background-repeat: repeat-x;

    margin: 0 5px;

}*/



/* 顏色設定，依據步驟 */

/*.step-1.active {

    background-color: #004f66;

}



.step-2.active {

    background-color: #006a8e;

}



.step-3.active {

    background-color: #007fae;

}



.step-4.active {

    background-color: #1595a9;

}



.step-5.active {

    background-color: #1db9ba;

}



.step-6.active {

    background-color: #36d1ce;

}



.step-7.active {

    background-color: #90ced2;

}



.step-pin.inactive {

    background-color: #d1dce3;

}*/



/* 容器 */

.progress-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 20px;

    flex-wrap: nowrap;

}



/* 每一節點 */

.step-item {

    display: flex;

    flex-direction: column;

    align-items: center;

}



/* 地圖釘外框 */

.step-pin {

    width: 50px;

    height: 60px;

    clip-path: path("M25,0 C38,0 50,12 50,25 C50,38 25,60 25,60 C25,60 0,38 0,25 C0,12 12,0 25,0 Z");

    background-color: #ccc;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* 白色中心圈圈 */

.step-inner {

    width: 30px;

    height: 30px;

    background-color: white;

    border-radius: 50%;

    font-weight: bold;

    font-size: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1;

}



/* 標籤 */

.step-label {

    margin-top: 5px;

    font-size: 13px;

    white-space: nowrap;

    text-align: center;

}



/* 虛線 + 箭頭 */

.step-arrow-line {

    display: flex;

    align-items: center;

    gap: 4px;

}



    .step-arrow-line::before {

        content: "";

        width: 40px;

        height: 2px;

        background-image: radial-gradient(circle, #b0c4d9 1.5px, transparent 1.5px);

        background-size: 8px 2px;

        background-repeat: repeat-x;

        background-position: center;

    }



    .step-arrow-line::after {

        content: "";

        width: 0;

        height: 0;

        border-top: 6px solid transparent;

        border-bottom: 6px solid transparent;

        border-left: 10px solid #b0c4d9;

    }



/* 不同節點顏色 */

.step-pin.inactive {

    background-color: #d1dce3;

}



.step-1.active {

    background-color: #004f66;

}



.step-2.active {

    background-color: #006a8e;

}



.step-3.active {

    background-color: #007fae;

}



.step-4.active {

    background-color: #1595a9;

}



.step-5.active {

    background-color: #1db9ba;

}



.step-6.active {

    background-color: #36d1ce;

}



.step-7.active {

    background-color: #90ced2;

}