/* 輸入 / 輸出方塊 - 矩形樣式 */
:root{
    --condLeft: 20%;/*左排菱形 left*/
}
.IOBlock {
    padding: 12px 24px;
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid rgba(56, 189, 248, 0.85);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
    transform: none;
    width: auto;
    height: auto;
    min-width: 100px;
}

/* 處理方塊 - 矩形樣式 */
.processBlock {
    padding: 12px 24px;
    background: var(--bg-background);
    border: 2px solid var(--bg-borderColor);
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(125, 211, 252, 0.5);
    transform: none;
    width: auto;
    height: auto;
    min-width: 100px;
}

/* 流程線的基礎樣式 */
.lineStatus {
    position: absolute;
    background: var(--text-main);
}

/* 箭頭 - 向下（垂直線預設箭頭） */
.lineStatus::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: var(--text-main) transparent transparent transparent;
}

/* 水平線預設不顯示箭頭（避免和垂直線箭頭混用） */
.lineStatus.horizontal:not(.arrow-left):not(.arrow-right)::after {
    display: none;
}

/* 箭頭 - 向左（用在水平線左端） */
.lineStatus.arrow-left::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 10px 8px 0;
    border-style: solid;
    border-color: transparent var(--text-main) transparent transparent;
}

/* 箭頭 - 向右
   調整位置，避免受原本依靠 left / bottom 的設定影響 */
.lineStatus.arrow-right::after {
    content: "";
    position: absolute;
    /* 改用 top / right 控制，不再用 left / bottom 以免互相干擾 */
    top: 50%;
    right: -7px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);

    border-width: 8px 0 8px 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--text-main);
}

/* 垂直流程線 */
.lineStatus.vertical {
    width: 2px;
}

/* 水平流程線 */
.lineStatus.horizontal {
    height: 2px;
}
#letXzero1,#condition1,#codeA,#codeB,#codeXpp,#xZero-cond1,#cond1-No-A,#A-xpp,
#condition2,#code2A,#code2B,#xZero-cond2,#cond2-Yes-A,
#condition3,#code3A,#code3B,#xZero-A3,#A3-cond3,#cond3-No-v-B3,
#condition4_1,#code4A,#code4B,#code4C,#condition4_2,#xZero-cond4_1,#cond4_1-Yes-A4,#A4-cond4_2,#cond4_2-No-B4,#cond4_2-No-v-A4,
#condition5_1,#code5A,#code5B,#code5C,#condition5_2,#xZero-cond5_1,#cond5_1-Yes-A5,#A5-cond5_2,#cond5_2-No-B5,#cond5_2-No-v-A5,
#condition6_1,#code6A,#code6B,#code6C,#code6D,#condition6_2,#xZero-cond6_1,#cond6_1-Yes-A6,#A6-cond6_2,#cond6_2-Yes-B6
{
    left: 50%;
}

#cond1-No-A,#xZero-cond1,#A-xpp,#cond1-yes-v-B,#xpp-v-cond1,
#cond2-Yes-A,#xZero-cond2,#cond2-No-v-B,#A-v-cond2,
#A3-cond3,#xZero-A3,#cond3-No-v-B3,#cond3-Yes-v-A3,
#xZero-cond4_1,#cond4_1-Yes-A4,#A4-cond4_2,#cond4_2-No-B4,#cond4_1-No-v-C4,#cond4_1-v-A4,#B4-v-cond4_1,
#xZero-cond5_1,#cond5_1-Yes-A5,#A5-cond5_2,#cond5_2-No-B5,#cond5_1-No-v-C5,#cond5_1-v-A5,#B5-v-cond5_1,
#xZero-cond6_1,#cond6_1-Yes-A6,#A6-cond6_2,#cond6_2-No-B6,#cond6_2-No-v-C6,#cond6_1-v-D6,
#cond6_2-Yes-B6,#C6-v-cond6_1,#B6-v-cond6_2 {
    width: 2px;
}

#cond1-yes-h1-B,#cond1-yes-h2-B,#xpp-h1-cond1,#xpp-h2-cond1,
#cond2-No-h1-B,#cond2-No-h2-B,#A-h1-cond2,#A-h2-cond2,
#cond3-Yes-h1-A3,#cond3-Yes-h2-A3,
#cond4_1-No-h1-C4,#cond4_1-No-h2-C4,#B4-h1-cond4_1,#B4-h2-cond4_1,#cond4_2-Yes-cond4_1,
#cond5_1-No-h1-C5,#cond5_1-No-h2-C5,#B5-h1-cond5_1,#B5-h2-cond5_1,#cond5_2-Yes-C,
#cond6_1-No-h1-D6,#cond6_1-No-h2-D6,#cond6_2-No-h1-C6,#C6-h2-cond6_1,#cond6_2-No-h2-C6,#C6-h1-cond6_1,#B6-h1-cond6_2,#B6-h2-cond6_2 {
    height: 2px;
}

#cond1-yes-h1-B::after,#cond1-yes-v-B::after,#xpp-v-cond1::after,#xpp-h1-cond1::after,
#cond2-No-h1-B::after,#cond2-No-v-B::after,#A-v-cond2::after,#A-h1-cond2::after,
#cond3-Yes-v-A3::after,
#cond4_1-v-A4::after,#cond4_1-No-v-C4::after,#B4-v-cond4_1::after,
#cond5_1-v-A5::after,#cond5_1-No-v-C5::after,#B5-v-cond5_1::after,
#cond6_1-v-A6::after,#cond6_1-No-v-D6::after,#cond6_2-No-v-C6::after,#C6-v-cond6_1::after,#B6-v-cond6_2::after {
    display: none;
}
#condition1-Yes,#condition5_2-Yes  {
    top: -38%;
    right: -3%;
}
#condition1-No,#condition5_2-No {
    bottom: -14%;
    left: 120%;
}
#condition2-Yes,#condition4_1-Yes,#condition5_1-Yes,#condition6_1-Yes,#condition6_2-Yes {
    top: 90%;
    left: 115%;
}
#condition2-No,#condition4_1-No,#condition5_1-No,#condition6_1-No,#condition6_2-No {
    top: -65%;
    left: 155%;
}
#condition3-Yes,#condition4_2-Yes{
    top: 85%;
    left: -90%;
}
#condition3-No,#condition4_2-No {
    top: 80%;
    left: 135%;
}
/***************************************************/
/************  巢狀流程圖 1. 單一 if 結構   **************/
/***************************************************/
.fc-nested4-1 {
    position: relative;
    width: 400px;
    height: 700px;
    margin: 0 auto;
}
#letXzero1 {
    top: 2%;
    transform: translateX(-50%);
}
#condition1 {
    top: 22.4%;
    transform: translateX(-50%) rotate(45deg);
}
#letXzero1,#codeA,#codeXpp,#codeB,#code2A,#code2B,#code3A,#code3B,
#code4A,#code4B,#code4C,#code5A,#code5B,#code5C,#code6A,#code6B,#code6C,#code6D
{
    transform: translateX(-50%);
}
#codeA {top: 47.6%;}
#codeXpp {top: 66%;}
#codeB {top: 85%;}
#xZero-cond1 {top: 9.2%;}
#cond1-yes-h1-B {
    top: 28%;
    left: 64.5%;
    width: 15.7%;
}
#cond1-yes-v-B {
    top: 28%;
    left: 80%;
    height: 60.6%;
}
#cond1-yes-h2-B {
    top: 88.5%;
    left: 65.4%;
    width: 15.2%;
}
#xZero-cond1,#cond1-No-A,#A-xpp{height: 9.8%;}
#cond1-No-A {top: 36.4%;}
#A-xpp {top: 55%;}
#xpp-h1-cond1 {
    top: 69.4%;
    left: 20%;
    width: 15.5%;
}
#xpp-v-cond1 {
    top: 14%;
    left: 20%;
    height: 55.7%;
}
#xpp-h2-cond1 {
    top: 14%;
    left: 20%;
    width: 27.5%;
}


/***************************************************/
/********  巢狀流程圖 2. while 先測試型迴圈  ********/
/***************************************************/
.fc-nested4-2 {
    position: relative;
    width: 400px;
    height: 500px;
    margin: 0 auto;
}
#condition2 {
    top: 17.4%;
    transform: translateX(-50%) rotate(45deg);
}
#code2A {top: 49.6%;}
#code2B {top: 72%;}
#xZero-cond2 {
    top: 2.2%;
    transform: translateX(-50%);
    height: 10%;
}
#cond2-No-h1-B {
    top: 25.2%;
    left: 64.5%;
    width: 15.5%;
}
#cond2-No-v-B {
    top: 25.2%;
    left: 80%;
    height: 51.6%;
}
#cond2-No-h2-B {
    top: 76.6%;
    left: 65.4%;
    width: 15.2%;
}
#cond2-Yes-A {
    top: 37%;
    transform: translateX(-50%);
    height: 11%;
}
#A-h1-cond2 {
    top: 55%;
    left: 20%;
    width: 15.5%;
}
#A-v-cond2 {
    top: 7%;
    left: 20%;
    height: 48%;
}
#A-h2-cond2 {
    top: 7%;
    left: 20%;
    width: 27.5%;
}
/***************************************************/
/********  巢狀流程圖 3. do-while（先做後測）  *******/
/***************************************************/
.fc-nested4-3 {
    position: relative;
    width: 400px;
    height: 500px;
    margin: 0 auto;
}
#code3A {
    top: 14%;
}
#condition3 {
    top: 42.5%;
    transform: translateX(-50%) rotate(45deg);
}
#code3B {
    top: 72%;
}
#xZero-A3 {
    top: 2.2%;
    height: 10%;
    left: 50.2%;
}
#cond3-No-v-B3 {
    top: 62%;
    height: 8%;
    left: 50.2%;
}
#A3-cond3{
    top: 24.4%;
    height: 13%;
    left: 50.2%;
}
#cond3-Yes-h1-A3 {
    top: 50%;
    left: 20%;
    width: 15%;
}
#cond3-Yes-v-A3 {
    top: 7%;
    left: 20.2%;
    height: 43%;
}
#cond3-Yes-h2-A3{
    top: 7%;
    left: 20.2%;
    width: 28%;
}
#A-h2-cond3 {
    top: 7%;
    left: 20%;
    width: 27.5%;
}
/***************************************************/
/***  巢狀流程圖 4. while 迴圈 + 額外條件判斷  *****/
/***************************************************/
.fc-nested4-4,.fc-nested4-5,.fc-nested4-6 {
    position: relative;
    width: 400px;
    height: 800px;
    margin: 0 auto;
}
#condition4_1,#condition4_2,#condition5_1,#condition5_2,#condition6_1,#condition6_2 {
    top: 11.5%;
    transform: translateX(-50%) rotate(45deg);
}
#code4A,#code5A,#code6A {top: 30%;}
#condition4_2,#condition5_2,#condition6_2 {top: 46%;}
#code4B,#code5B,#code6B {top: 65%;}
#code4C,#code5C,#code6C {top: 79%;}
#xZero-cond4_1,#xZero-cond5_1,#xZero-cond6_1 {
  top: 2.2%;
  height: 6%;
}
/***************************************************/
/***********  巢狀流程圖 5. 兩段條件的 while 迴圈  **********/
/***************************************************/


/***************************************************/
/***********  巢狀流程圖 6. 複合條件的 while 練習  **********/
/***************************************************/
#code6D {top: 91%;}
#cond4_1-Yes-A4,#cond5_1-Yes-A5,#cond6_1-Yes-A6 {
  top: 23.5%;
  height: 5.4%;
}
#A4-cond4_2,#A5-cond5_2,#A6-cond6_2 {
  top: 36.4%;
  height: 6.7%;
}
#cond4_2-No-B4,#cond5_2-No-B5 {
  top: 58%;
  height: 5.6%;  
}
#cond6_2-Yes-B6{
    top: 58.2%;
    height: 5.7%;
}
#cond4_1-No-h1-C4,#cond5_1-No-h1-C5,#cond6_1-No-h1-D6 {
  top: 16.3%;
  left: 64.2%;
  width: 20.7%;
}
#cond6_1-No-h1-D6 {
    top: 16.4%;
    width: 30%;
}

#cond4_1-No-h2-C4,#cond5_1-No-h2-C5,#cond6_1-No-h2-D6 {
  top: 82%;
  left: 65.5%;
  width: 20%;
}
#cond4_1-No-v-C4,#cond5_1-No-v-C5 {
    top: 16.3%;
    height: 65.8%;
    left:85%;
}
#cond6_1-No-v-D6 {
    top: 16.4%;
    height: 77.8%;
    left: 94%;
}
#cond6_1-No-h2-D6 {
    top: 94%;
    width: 29%;
}
#B4-h1-cond4_1,#B5-h1-cond5_1,#B6-h1-cond6_1 {
  top: 68%;
  left: 14%;
  width: 23%;
}
#B4-v-cond4_1,#B5-v-cond5_1,#B6-v-cond6_1 {
  top: 5%;
  height: 63%;
  left: 14%;
}
#B4-h2-cond4_1,#B5-h2-cond5_1,#B6-h2-cond6_1 {
  top: 5%;
  left: 14.5%;
  width: 33%;
}
#cond4_2-Yes-cond4_1,#cond5_2-Yes-C5 {
  top: 50.9%;
  left: 16.5%;
  width: 18.4%;
}
#cond5_2-Yes-C5 {
    left: 64.2%;
}
#cond6_2-No-h1-C6 {
    top: 50.9%;
    left: 64.2%;
    width: 13%;
}
#cond6_2-No-v-C6{
    top: 51%;
    left:77%;
    height: 31%;
}
#cond6_2-No-h2-C6,#C6-h1-cond6_1 {
    top: 82%;
    left: 65.4%;
    width: 12%;
}
#B6-h1-cond6_2{
    top: 68%;
    width: 14%;
    left: 23%;
}
#B6-v-cond6_2{
    top: 40%;
    height: 28%;
    left: 23%;
}
#B6-h2-cond6_2{
    top: 40%;
    width: 25%;
    left: 23%;
}
#C6-h1-cond6_1,#C6-h2-cond6_1 {
    left: 10%;
    width: 27%;
}
#C6-v-cond6_1{
    top: 5%;
    left: 10%;
    height: 77%;
}
#C6-h2-cond6_1{
    top: 5%;
    width: 38%;
    left: 10%;
}