@charset "utf-8";
.flowchart-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 850px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 30px;
}
.flowchart-container p{ width:340px; max-width:100%; margin:0 auto; text-align:center;}
.flowchart-container p + ul{ width:200px; max-width:100%; margin:0 auto;}
.flowchart-container dl{ width:340px; max-width:100%; margin:0 auto;}
.flowchart-prerequisites {
    background-color: #e0f7fa; /* Lighter blue */
    border: 1px solid #b2ebf2;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
}

.flowchart-prerequisites h3 {
    color: #006064;
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
}
.flowchart-prerequisites ul {
    list-style-type: disc;
    padding-left: 25px;
    margin-bottom: 0;
}

.flowchart-prerequisites li {
    margin-bottom: 8px;
}

.flowchart-steps {
    list-style: none; /* Remove default OL numbering */
    padding: 0;
    counter-reset: step-counter; /* Initialize counter for custom numbering */
}

.flowchart-step {
    background-color: #e3f2fd; /* Light blue for steps */
    border: 1px solid #90caf9;
    padding: 25px;
    margin-bottom: 40px; /* Space between steps for arrows */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative; /* For positioning pseudo-elements */
    transition: transform 0.2s ease-in-out;
}

.flowchart-step:hover {
    transform: translateY(-5px);
}

/* Custom step numbering */
.flowchart-step::before {
    counter-increment: step-counter;
    content: "步驟 " counter(step-counter);
    position: absolute;
    top: -15px; /* Position above the box */
    left: 20px; /* Align with the box left */
    background-color: #1976d2; /* Darker blue for the number badge */
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.95em;
    z-index: 1; /* Ensure it's above the step box */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.flowchart-step h4 {
    color: #1565c0; /* Darker blue for step titles */
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.25em;
}

.flowchart-step ul,
.flowchart-step dl {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 20px;
}

.flowchart-step dl dt {
    font-weight: bold;
    margin-top: 10px;
    color: #0d47a1;
}

.flowchart-step dl dd {
    margin-left: 0; /* Remove default indent for DD */
    padding-left: 15px;
}

.flowchart-step dl dd code {
    background-color: #f0f4f7;
    padding: 2px 5px;
    border-radius: 3px;
}

/* Arrow between steps */
.flowchart-step:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -35px; /* Position below the box, half of margin-bottom + arrow head height */
    left: 50%;
    transform: translateX(-50%);
    width: 2px; /* Line thickness */
    height: 20px; /* Line height */
    background-color: #90caf9; /* Arrow line color */
    z-index: 0; /* Below the step box */
}

.flowchart-step:not(:last-child)::before { /* Re-using ::before for the arrow head, need to be careful or use another element */
    /* Let's add a separate arrow element for simplicity, or use another pseudo-element for the arrow head if :before is used for numbering */
}

/* For the arrow head, let's add a separate pseudo-element or use a simple div between list items in HTML */
/* A simple CSS arrow for visual appeal */
.flowchart-step:not(:last-child)::after {
    content: ''; /* Main line */
    position: absolute;
    bottom: -30px; /* Adjust based on margin between steps */
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 20px;
    background-color: #90caf9;
    z-index: 0;
}

.flowchart-step:not(:last-child)::before {
    /* This :before is already used for step numbering.
       Let's create the arrow head using another element or by adjusting the existing :after */
    /* A trick for the arrow head using another element or simple markup is often easier */
}

/* Alternative for arrow (simple line and triangle between steps using HTML structure) */
/* In HTML: <li class="flowchart-step">...</li> <div class="flowchart-arrow-connector"></div> <li class="flowchart-step">...</li> */
.flowchart-arrow-connector {
    display: block;
    margin: 0 auto; /* Center the arrow */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #90caf9; /* Arrow color */
    margin-top: -15px; /* Adjust to overlap slightly with prev step box */
    margin-bottom: -15px; /* Adjust to overlap slightly with next step box */
    z-index: 2; /* Ensure arrow is visible */
    position: relative;
}
/* Re-evaluating arrow CSS for clarity */
.flowchart-step {
    /* ... existing styles ... */
    position: relative;
    margin-bottom: 60px; /* Increase margin to accommodate arrow */
}

/* Custom step numbering (as before) */
.flowchart-step::before {
    counter-increment: step-counter;
    content: "步驟 " counter(step-counter);
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #1976d2;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.95em;
    z-index: 2; /* Ensure it's above the box and arrow */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Arrow line and head */
.flowchart-step:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -40px; /* Position below the box */
    left: 50%;
    transform: translateX(-50%);
    width: 3px; /* Line thickness */
    height: 30px; /* Line height */
    background-color: #90caf9; /* Line color */
    z-index: 1; /* Below the step box, above numbering */
}

.flowchart-step:not(:last-child)::before { /* Overwriting the numbering ::before for this purpose */
    /* This means you can't use ::before for numbering AND the arrow head on the same element.
       A common solution is to use a wrapper div around the step content and apply :before/:after to the wrapper,
       OR use simple HTML elements for arrows between the steps.
       For a clean "step-by-step" list, relying on the numbering for flow and clear spacing might be sufficient.
       If visual arrows are critical, consider a dedicated `div` for arrows between `<li>` elements or a SVG icon.
    */
}

/* Simplest approach for visual flow: rely on margins and numbering */
/* Remove the complex arrow CSS above. */
.flowchart-step {
    margin-bottom: 30px; /* Just space between steps */
}