:root {
    --bg-lineW: #e5e7eb;
    --bg-lineY: #ebeb7f;
} 
/* ===== Flowchart mini templates (for if 結構) ===== */
/* 這個檔案獨立於 op.css，只負責畫小型流程圖元件 */

.fc-flow {
    display: flex;
    justify-content: center;
    margin: 12px 0 6px;
}

/* 單一路徑：由上到下的垂直流程 -------------------------------- */

.fc-vert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* 終端 / 處理 */

.fc-term,
.fc-proc {
    background: #020617;
    color: #e5e7eb;
    border: 2px solid #e5e7eb;
    padding: 6px 18px;
    border-radius: 999px;
    min-width: 120px;
    text-align: center;
    font-size: 14px;
}

.fc-proc {
    border-radius: 8px;
}

/* 垂直箭頭 */

.fc-arrow {
    width: 2px;
    height: 20px;
    background: #e5e7eb;
    position: relative;
}

.fc-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-width: 5px 4px 0 4px;
    border-style: solid;
    border-color: #e5e7eb transparent transparent transparent;
}

/* 判斷菱形（共用） --------------------------------------------- */

.fc-decision {
    width: 90px;
    height: 90px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 用 ::before 畫出菱形，裡面文字不旋轉 */

.fc-decision::before {
    content: "";
    position: absolute;
    inset: 8px;                 /* 調整菱形大小可改這裡 */
    background: #020617;
    border: 2px solid #e5e7eb;
    transform: rotate(45deg);
}

/* 中間的判斷文字 */

.fc-decision span.fc-text {
    position: relative;
    z-index: 1;
    color: #e5e7eb;
    font-size: 14px;
}

/* Y / N 標示 */

.fc-decision span.fc-yes,
.fc-decision span.fc-no {
    position: absolute;
    font-size: 14px;
    color: #e5e7eb;
    z-index: 1;
}

/* Yes 在菱形下方 */

.fc-decision span.fc-yes {
    bottom: -40%;
    left: 60%;
    transform: translateX(-50%);
}

/* No 在菱形右側 */

.fc-decision span.fc-no {
    top: 40%;
    right: -30%;
    transform: translateY(-50%);
}

/* 左右箭頭文字（例如：條件為真 / 假） */

.fc-label {
    font-size: 14px;
    color: #e5e7eb;
    text-align: center;
}

/* ===== if-else 兩條支路專用模板 ================================ */
/* 版型：菱形在左側偏中間，Y 往下到左邊方塊，N 往右再往下到右邊方塊 */
.fc-if-else {
    position: relative;
    width: 360px;   /* 整個流程圖寬度，可依需要調整 */
    height: 190px;  /* 整個流程圖高度，可依需要調整 */
}

/* 菱形位置：靠上、偏左，留右邊給 N 支路 */
.fc-if-else .fc-decision {
    position: absolute;
    top: 0;
    left: 25%;
    transform: translateX(-50%);
}

/* 左邊（Yes）方塊 */
.fc-if-else .fc-yes-block {
    position: absolute;
    top: 200px;
    left: 25%;
    transform: translateX(-50%);
}

/* 右邊（No）方塊 */
.fc-if-else .fc-no-block {
    position: absolute;
    top: 200px;
    left: 75%;
    transform: translateX(-50%);
}

/* Yes 垂直箭頭（從菱形下方到左方塊） */

.fc-if-else .fc-yes-line {
    position: absolute;
    left: 25%;
    transform: translateX(-2px);
    width: 2px;
    background: #e5e7eb;
}
.fc-if-else .fc-yes-line {
    top: 51%;          /* 約略在菱形下緣 */
    height: 96px;
}
.fc-if-else .fc-yes-line::after,
.fc-if-else .fc-yes-line2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-width: 5px 4px 0 4px;
    border-style: solid;
    border-color: #e5e7eb transparent transparent transparent;
}

/* No 水平線（從菱形右邊伸出） */

.fc-if-else .fc-no-line-h {
    position: absolute;
    top: 23.2%;          /* 菱形中線高度附近 */
    left: 39.4%;
    width: 35.8%;         /* 到圖中央 */
    height: 2px;
    background: #e5e7eb;
}

/* No 垂直線（從中間往下到右方塊上方） */

.fc-if-else .fc-no-line-v {
    position: absolute;
    top: 45px;
    left: 75%;
    transform: translateX(-1px);
    width: 2px;
    height: 122.6%;
    background: #e5e7eb;
}
/* Yes 往下接到程式碼 C 的那一條垂直線 */
.fc-if-else .fc-yes-line2 {
    position: absolute;
    left: 25%;
    transform: translateX(-2px);
    width: 2px;
    background: #e5e7eb;
    top: 236px;       /* 大約在程式碼 A 底下 */
    height: 80px;     /* 往下到接近 C 的位置 */
}

/* B 底下垂直到水平線的那一段 */
.fc-if-else .fc-no-line2-v {
    position: absolute;
    left: 75%;
    transform: translateX(-1px);
    width: 2px;
    height: 40px;     /* 從 B 底下往下拉一點 */
    top: 236px;       /* 對齊程式碼 B 的底部附近 */
    background: #e5e7eb;
}

/* 從 B 那邊拉回到 A 的垂直線的水平線（帶箭頭，指向左邊） */
.fc-if-else .fc-no-line2-h {
    position: absolute;
    left: 25%;
    width: 50%;       /* 從 25% 拉到 75% */
    height: 2px;
    top: 276px;       /* 對齊上面的 no-line2-v 底部 */
    background: #e5e7eb;
}

.fc-if-else .fc-no-line2-h::before {
    content: "";
    position: absolute;
    left: -1px;       /* 箭頭在左端，指向左（往 A 的方向） */
    top: 50%;
    transform: translateY(-50%);
    border-width: 4px 4px 4px 0;
    border-style: solid;
    border-color: transparent #e5e7eb transparent transparent;
}

/* 最下面的「程式碼 C」方塊 */
.fc-if-else .fc-next-block {
    position: absolute;
    top: 320px;       /* 在整個圖的最底下 */
    left: 25%;
    transform: translateX(-50%);
}