.esg24-page {
    background: var(--esg-color-white);
}

    .esg24-page .esg24-wrap-plain {
        padding: 0;
        border: none;
    }

    .esg24-page .esg-figure-panel {
        padding: 24px 26px;
        background: var(--esg-color-white);
    }

        .esg24-page .esg-figure-panel h5,
        .esg-intensity-card h5 {
            margin: 0 0 18px 0;
            font-size: 20px;
            line-height: 1.5;
            font-weight: 700;
            color: #000;
            text-align: center;
        }

    .esg24-page .esg24-row-sm {
        padding-top: 5px;
    }

    .esg24-page .esg24-row-md {
        padding-top: 20px;
    }

    .esg24-page .esg24-row-lg {
        padding-top: 30px;
    }

    .esg24-page .esg24-heading-col {
        font-size: large;
    }

    .esg24-page .esg24-center-col {
        text-align: center;
    }

    .esg24-page .esg24-centered-heading {
        text-align: center;
    }

    .esg24-page .esg-plan-table td.esg24-plan-list ol {
        list-style-type: decimal;
        list-style-position: outside;
        padding-left: 1.4em;
    }

    .esg24-page .esg-plan-table th,
    .esg24-page .esg-plan-table td {
        text-align: left;
        vertical-align: middle;
    }

        .esg24-page .esg-plan-table td.esg24-plan-list {
            text-align: left;
        }

    .esg24-page ul,
    .esg24-page .esg24-management-table ul {
        list-style: disc;
        list-style-position: outside;
        padding-left: 1.2em;
    }

        .esg24-page ul li,
        .esg24-page .esg24-management-table ul li {
            list-style: disc;
            display: list-item;
        }

    .esg24-page .esg24-framework-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 14px;
        line-height: 1.7;
    }

        .esg24-page .esg24-framework-table th {
            background: #f3f4f7;
            color: var(--esg-color-heading);
            font-weight: 700;
            text-align: center;
            padding: 12px 10px;
            border: 1px solid #e0e3e8;
        }

        .esg24-page .esg24-framework-table thead th:nth-child(2) {
            border-right: none;
        }

        .esg24-page .esg24-framework-table thead th:nth-child(3) {
            border-left: none;
        }

        .esg24-page .esg24-framework-table td {
            border: 1px solid #e0e3e8;
            vertical-align: top;
            background: var(--esg-color-white);
            text-indent: 0;
        }

            .esg24-page .esg24-framework-table td.cat {
                text-align: center;
                vertical-align: middle;
                color: var(--esg-color-white);
                font-weight: 700;
                font-size: 20px;
                letter-spacing: 1px;
                padding: 10px;
            }

        .esg24-page .esg24-framework-table .cat-governance {
            background: var(--esg-color-green);
        }

        .esg24-page .esg24-framework-table .cat-strategy {
            background: var(--esg-color-chart-orange);
        }

        .esg24-page .esg24-framework-table .cat-risk {
            background: var(--esg-color-teal);
        }

        .esg24-page .esg24-framework-table .cat-target {
            background: var(--esg-color-purple);
        }

        .esg24-page .esg24-framework-table td.key-col {
            font-weight: 700;
            background: transparent;
            border-right: none;
        }

        .esg24-page .esg24-framework-table td.key-governance {
            color: var(--esg-color-green-text);
        }

        .esg24-page .esg24-framework-table td.key-strategy {
            color: var(--esg-color-orange-text);
        }

        .esg24-page .esg24-framework-table td.key-risk {
            color: var(--esg-color-teal-text);
        }

        .esg24-page .esg24-framework-table td.key-target {
            color: var(--esg-color-purple);
        }

        .esg24-page .esg24-framework-table td.action-col {
            color: var(--esg-color-text);
            border-left: none;
        }

        .esg24-page .esg24-framework-table .framework-list {
            margin: 0;
            padding: 12px 10px;
            list-style: none;
        }

            .esg24-page .esg24-framework-table .framework-list li {
                margin-bottom: 6px;
                text-indent: 0;
                padding-left: 0;
            }

                .esg24-page .esg24-framework-table .framework-list li:last-child {
                    margin-bottom: 0;
                }

        .esg24-page .esg24-framework-table .arrow-row td {
            border-left: none;
            border-right: none;
            border-bottom: none;
            background: transparent;
            text-align: center;
            font-size: 28px;
            line-height: 1;
            padding: 6px 0;
            color: var(--esg-process-gray);
        }

    .esg24-page .esg24-ifrs-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 14px;
        line-height: 1.65;
    }

        .esg24-page .esg24-ifrs-table th,
        .esg24-page .esg24-ifrs-table td {
            border: 1px solid var(--esg-border-green-soft);
            text-indent: 0;
        }

        .esg24-page .esg24-ifrs-table th {
            font-weight: 700;
            text-align: center;
            vertical-align: middle;
        }

        .esg24-page .esg24-ifrs-table td {
            padding: 18px 16px;
            vertical-align: top;
            background: var(--esg-color-white);
        }

    .esg24-page .table-wrap .esg24-ifrs-table ul {
        margin: 0;
        padding-left: 0;
        list-style: none;
        text-indent: 0;
    }

    .esg24-page .table-wrap .esg24-ifrs-table li {
        display: grid;
        grid-template-columns: 0.65em minmax(0, 1fr);
        column-gap: 0.3em;
        margin-bottom: 8px;
        margin-left: 0;
        padding-left: 0;
        text-indent: 0;
    }

        .esg24-page .table-wrap .esg24-ifrs-table li::before {
            content: "•";
            color: var(--esg-color-text);
            line-height: inherit;
        }

        .esg24-page .table-wrap .esg24-ifrs-table li:last-child {
            margin-bottom: 0;
        }

    .esg24-page .esg24-ifrs-table .ifrs-side-head {
        background: var(--esg-color-green);
        color: #1f1f1f;
        font-size: 18px;
        line-height: 1.45;
        padding: 14px 10px;
    }

    .esg24-page .esg24-ifrs-table .ifrs-stage {
        color: var(--esg-color-white);
        font-size: 21px;
        line-height: 1.45;
        padding: 18px 12px;
    }

    .esg24-page .esg24-ifrs-table .ifrs-stage-one {
        background: var(--esg-color-blue);
    }

    .esg24-page .esg24-ifrs-table .ifrs-stage-two {
        background: var(--esg-color-orange);
    }

    .esg24-page .esg24-ifrs-table .ifrs-stage-three {
        background: var(--esg-color-teal);
    }

    .esg24-page .esg24-ifrs-table .ifrs-stage-four {
        background: var(--esg-color-purple);
    }

    .esg24-page .esg24-ifrs-table .ifrs-time {
        background: var(--esg-color-white);
        font-size: 20px;
        padding: 16px 10px;
        font-variant-numeric: tabular-nums;
    }

    .esg24-page .esg24-ifrs-table .ifrs-time-one {
        color: var(--esg-color-blue);
    }

    .esg24-page .esg24-ifrs-table .ifrs-time-two {
        color: var(--esg-color-orange-text);
    }

    .esg24-page .esg24-ifrs-table .ifrs-time-three {
        color: var(--esg-color-teal-text);
    }

    .esg24-page .esg24-ifrs-table .ifrs-time-four {
        color: var(--esg-color-purple);
    }

@media (max-width: 900px) {
    .esg24-page .esg24-ifrs-table {
        min-width: 1180px;
    }

    .esg24-page .esg24-risk-table td:nth-child(1)::before {
        content: "氣候變遷議題";
    }

    .esg24-page .esg24-risk-table td:nth-child(2)::before {
        content: "議題類別／發生衝擊時間";
    }

    .esg24-page .esg24-risk-table td:nth-child(3)::before {
        content: "風險與機會項目說明";
    }

    .esg24-page .esg24-risk-table td:nth-child(4)::before {
        content: "潛在財務影響";
    }

    .esg24-page .esg24-risk-table td:nth-child(5)::before {
        content: "因應措施";
    }
}

.esg24-note-list,
.esg24-note-list ol {
    list-style-type: decimal;
    padding-left: 2em;
}

    .esg24-note-list li {
        display: list-item;
        margin-bottom: 6px;
    }

.step-title-wrap {
    display: flex;
    align-items: center;
}

.circle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #b2be97;
    color: #000;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 12px;
    font-size: 16px;
    flex-shrink: 0;
}

.esg-result-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .esg-result-list li {
        display: flex;
        margin-bottom: 8px;
    }

        .esg-result-list li:last-child {
            margin-bottom: 0;
        }

    .esg-result-list .bullet {
        margin-right: 8px;
    }

.esg-data-card {
    border: 2px solid #C4DEB4;
    border-radius: 16px;
    background-color: #FFFFFF;
    padding: 0 24px;
    max-width: 960px;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    margin: 0 auto;
}

.esg-data-item {
    display: flex;
    padding: 24px 0;
    border-bottom: 1.5px solid #C4DEB4;
    align-items: flex-start;
}

    .esg-data-item:last-child {
        border-bottom: none;
    }

.esg-data-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    .esg-data-icon svg {
        width: 44px;
        height: 44px;
        stroke: #87B777;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.esg-data-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.esg-data-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.esg-data-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1A1A1A;
}

.esg-sasb-tag {
    border: 1px solid #EFA04F;
    color: #EFA04F;
    padding: 2px 14px;
    border-radius: 99px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.esg-data-highlight {
    font-size: 16px;
    font-weight: 700;
    color: #555555;
    margin-bottom: 8px;
}

.esg-text-green {
    color: #87B777;
}

.esg-data-desc {
    margin: 4px 0 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}

.esg-data-row-text {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1A1A1A;
}

.esg-intensity-chart {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0 40px;
}

.esg-intensity-axis-title {
    position: absolute;
    top: 50%;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    writing-mode: vertical-rl;
    white-space: nowrap;
    transform: translateY(-50%);
}
    .esg-intensity-axis-title.left {
        left: 0 ;
    }

    .esg-intensity-axis-title.right {
        right: 0;
    }

.esg-intensity-plot {
    position: relative;
    height: 280px;
    margin: 0 65px;
    background-color: #f2f8ee;
    border-bottom: 2px solid #82b882;
}

.esg-intensity-y-axis {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

    .esg-intensity-y-axis.left {
        left: -50px;
        text-align: right;
        width: 42px;
    }

    .esg-intensity-y-axis.right {
        right: -48px;
        text-align: left;
        width: 40px;
    }

.esg-intensity-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

    .esg-intensity-grid span {
        width: 100%;
        border-top: 1px solid #c2e0b6;
    }

.esg-intensity-line {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.esg-custom-val {
    position: absolute;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 10;
}

.val-orange {
    color: #e8973e;
}

.val-green {
    color: #82b882;
}

.esg-intensity-points {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.esg-intensity-point {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
}

    .esg-intensity-point.point-orange {
        background-color: #e8973e;
    }

    .esg-intensity-point.point-green {
        background-color: #82b882;
    }

.esg-intensity-groups {
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
    height: 30px;
}

.esg-intensity-group {
    position: absolute;
    transform: translateX(-50%);
}

    .esg-intensity-group p {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #333;
    }

@media (max-width: 600px) {
    .esg-data-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .esg-sasb-tag {
        margin-bottom: 8px;
        order: -1;
    }

    .esg-data-icon {
        width: 45px;
        margin-right: 12px;
    }

        .esg-data-icon svg {
            width: 36px;
            height: 36px;
        }
}