body {
    background: linear-gradient(to bottom, rgba(249, 239, 206, 0.1), rgba(248, 221, 178, 0.4), rgba(232, 194, 82, 0.7), rgba(246, 179, 50, 0.9));
    display: flex;
    flex-direction: column;
}

:root {
    --product-accent-text: rgba(255, 240, 200, 0.95);
    --product-accent-bg: rgba(120, 70, 30, 0.9);
}

a {
    display: inline;
}

.note {
    color: brown;
    font-size: 1.1vw;
    letter-spacing: 1px;
    font-weight: 500;
}



/* """""""""""""""""""""""""""""""""""""""""""" */


/* =========================
   Lists: 對齊現有區塊規格
   適用：.product-card__description / .product-feature__description
   ========================= */

/* 清單容器：控制左右留白與段落節奏 */
.product-card__description ul,
.product-feature__description ul,
.product-feature__description ol {
    margin: 3% 0 0;
    padding-left: 1.4em;
    /* 控制項目符號縮排 */
}

/* 項目間距：讓長句讀起來不卡 */
.product-card__description li,
.product-feature__description li {
    margin: 1.2% 0;
    line-height: 1.7;
    font-weight: 300;
    font-size: 1.2vw;
    /* 跟你 p 的 1.2vw 對齊 */
    letter-spacing: 0.2vw;
    /* 跟你 p 的 0.2vw 對齊 */
}

/* 讓每個 li 內的「粗體標籤」更像你 h3 的灰階語氣 */
.product-card__description li strong,
.product-feature__description li strong {
    font-weight: 700;
    letter-spacing: 0.1vw;
}

/* ✅ 針對「操作步驟」那種長句：縮小項目符號與文字距離，提升可讀性 */
.product-card__description ul,
.product-feature__description ul {
    list-style: disc;
}

.product-card__description li::marker,
.product-feature__description li::marker {
    font-size: 0.9em;
    color: rgb(101, 101, 101);
}

/* ✅ 如果你把 5 步用 ol：更像 SOP 的節奏 */
.product-feature__description ol {
    list-style: decimal;
}

.product-feature__description ol li {
    padding-left: 0.2em;
    /* 讓數字後面的文字不要太貼 */
}

/* ✅ 小螢幕：避免 vw 太小難讀（不改你原本 p，只針對清單保底） */
@media (max-width: 768px) {

    .product-card__description li,
    .product-feature__description li {
        font-size: 16px;
        letter-spacing: 0.3px;
        line-height: 1.75;
        margin: 10px 0;
    }

    .product-card__description ul,
    .product-feature__description ul,
    .product-feature__description ol {
        margin-top: 12px;
        padding-left: 1.2em;
    }
}

/* """""""""""""" */







/* =========================
   SK-111｜SK-100 × SK-111 workflow block
   對應 HTML：.product-relative.product-relative__guide.product-relative__workflow
   ========================= */

.product-relative__workflow {
    margin: 6vh auto;
    padding: 4.5vh 4vw;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.7);
}

.product-relative__guide-title {
    margin: 0 0 2vh;
    font-size: 1.8vw;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 3px;
}

.product-relative__guide-intro {
    margin: 0 auto 3vh;
    font-weight: 300;
    font-size: 1.2vw;
    letter-spacing: 0.2vw;
    line-height: 1.8;
}



.product-relative__workflow-steps {
    margin: 2.5vh 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2.5vh;
}

/* 每個步驟卡片 */
.product-relative__workflow-step {
    padding: 2.2vh 2vw;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* step title */
.product-relative__workflow-step-title {
    margin: 0 0 1vh;
    font-size: 1.6vw;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgb(101, 101, 101);
    text-align: left;
}

/* step description */
.product-relative__workflow-step-desc {
    margin: 0 0 1.2vh;
    font-weight: 300;
    font-size: 1.2vw;
    letter-spacing: 0.2vw;
    line-height: 1.7;
}


/* step ul list */
.product-relative__workflow-list {
    margin: 1vh 0 0;
    padding-left: 1.4em;
}

.product-relative__workflow-list li {
    margin: 0.8vh 0;
    font-weight: 300;
    font-size: 1.2vw;
    letter-spacing: 0.2vw;
    line-height: 1.7;
}

.product-relative__workflow-list li strong {
    font-weight: 700;
    color: rgb(101, 101, 101);
    letter-spacing: 0.1vw;
}

/* decision grid */
.product-relative__decision {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2vw;
    margin: 1.5vh 0 1vh;
}

.product-relative__decision-item {
    padding: 1.6vh 1.2vw;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(250, 250, 250, 0.9);
}

.product-relative__decision-title {
    margin: 0 0 0.8vh;
    font-size: 1.2vw;
    font-weight: 700;
    letter-spacing: 0.15vw;
    color: rgb(60, 60, 60);
}

.product-relative__decision-desc {
    margin: 0;
    font-weight: 300;
    font-size: 1.1vw;
    letter-spacing: 0.15vw;
    line-height: 1.7;
}

/* hint + link + note */
.product-relative__hint,
.product-relative__link {
    margin: 1.2vh 0 0;
    font-weight: 300;
    font-size: 1.1vw;
    letter-spacing: 0.15vw;
    line-height: 1.7;
    opacity: 0.92;
}


/* note (你全站可能已有 .note，這裡只做區塊內微調，不破壞全站) */
.product-relative__workflow .note {
    margin-top: 2vh;
    padding: 1.6vh 1.4vw;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

/* =========================
   RWD
   ========================= */
@media (max-width: 1024px) {
    .product-relative__guide-title {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .product-relative__guide-intro {
        font-size: 16px;
        letter-spacing: 0.3px;
    }

    .product-relative__workflow-step-title {
        font-size: 18px;
    }

    .product-relative__workflow-step-desc,
    .product-relative__workflow-list li {
        font-size: 16px;
        letter-spacing: 0.3px;
    }

    .product-relative__decision-title {
        font-size: 16px;
    }

    .product-relative__decision-desc,
    .product-relative__hint,
    .product-relative__link {
        font-size: 15px;
        letter-spacing: 0.3px;
    }

    .product-relative__decision {
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .product-relative__workflow {
        padding: 18px 16px;
    }

    .product-relative__decision {
        grid-template-columns: 1fr;
    }

    .product-relative__workflow-step {
        padding: 14px 12px;
    }
}