body {
    background: #f5f4ef;
}

.abc-ul {
    list-style-type: lower-alpha;
}

.line-style {
    list-style-type: "- ";
}

.dtm-content .container {
    max-width: 1100px;
    font-size: 18px;
}

.dtm-title {
    font-weight: 500;
    font-size: 32px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 0.5px solid #707070;
}

.dtm-steps span {
    display: block;
    font-weight: 500;
    font-size: 26px;
    margin: 30px 0 10px;
}

.dtm-box {
    /* repo ไม่มี global box-sizing reset — กัน width:100% + padding ทำกล่องล้น container */
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 30px 20px;
}

.dtm-box ul {
    margin: 0;
}

.design-link {
    /* ลิงก์อยู่เป็นก้อนเดียวบรรทัดเดียว: ข้อความข้างในไม่ถูกตัดข้ามบรรทัด
       (ถ้าพื้นที่ท้ายบรรทัดไม่พอ ทั้งลิงก์จะไปเริ่มบรรทัดใหม่พร้อมกัน) */
    display: inline-block;
    white-space: nowrap;
    color: #b85813;
}

.dtm-box img {
    display: block;
    /* min(674px, 100%) — จอกว้างให้ใหญ่สุด 674px, จอแคบให้ย่อตามกล่องไม่ล้น */
    max-width: min(674px, 100%);
    margin: 20px auto;
}

.img-bottom-text {
    font-weight: 400;
    font-size: 16px;
    color: #808080;
    text-align: center;
}

.dtm-precautions span {
    color: #c83f2f;
    display: block;
    font-weight: 500;
    font-size: 26px;
    margin: 30px 0 10px;
}

.dtm-precautions-box {
    /* เหตุผลเดียวกับ .dtm-box — ไม่งั้น width:100% + padding 30px ล้น container 60px */
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
}

.dtm-red-box {
    background: #faebe6;
    border: 1px solid #c77759;
    border-radius: 10px;
    padding: 30px 10px;
    font-size: 18px;
}

.dtm-precautions-box strong {
    font-weight: 500;
}

.dtm-precautions-box ul {
    margin: 0;
}

.dtm-precautions-box img {
    display: block;
    max-width: min(674px, 100%);
    margin: 20px auto;
}

@media (max-width: 768px) {
    .dtm-content {
        padding: 0;
    }

    .dtm-content .container {
        font-size: 16px;
    }

    .dtm-title {
        font-size: 27px;
        font-weight: 600;
        border-bottom: 0.5px solid #d9d8d4;
    }

    .dtm-steps span {
        font-size: 20px;
    }

    .dtm-box {
        padding: 20px 10px;
    }

    .dtm-box ul {
        padding-left: 25px;
    }

    .design-link {
        font-size: clamp(16px, 3.8vw, 16px);
        margin-bottom: 10px;
    }
    .dtm-precautions span {
        font-size: 20px;
    }

    .img-bottom-text {
        font-size: 15px;
    }

    .dtm-precautions-box {
        background: none;
        padding: 0;
    }

    .dtm-red-box p {
        font-size: 16px;
    }

    .dtm-precautions-box ul {
        margin-bottom: 20px;
    }

    .dtm-precautions-box ul ul {
        margin-top: 5px;
        padding-left: 0;
    }
}