body:has(#modal-toggle:not(:checked)) {
     overflow: hidden;
 }

 :root {
     --overlay-bg: rgba(0, 0, 0, .5);
     --modal-bg: #fff;
     --modal-radius: 16px;
     --modal-shadow: 0 20px 50px rgba(0, 0, 0, .25);
     --fade-duration: 300ms;
 }

 /* ซ่อน checkbox ควบคุมสถานะ */
 #modal-toggle {
     position: absolute;
     opacity: 0;
     pointer-events: none;
 }

 /* โครงสร้าง overlay + modal */
 .modal-overlay {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--overlay-bg);
     opacity: 0;
     pointer-events: none;
     z-index: 999;
 }

 .modal {
     width: min(600px, 80vw);
     background: var(--modal-bg);
     border-radius: var(--modal-radius);
     box-shadow: var(--modal-shadow);
     transform: translateY(10px);
     opacity: 0;
     position: relative;
     padding: 24px 20px 20px;
 }

 /* ปุ่มกากบาท (label ผูกกับ checkbox) */
 .modal-close {
     position: absolute;
     top: 10px;
     right: 12px;
     width: 34px;
     height: 34px;
     border-radius: 999px;
     display: grid;
     place-items: center;
     cursor: pointer;
     border: 1px solid #e5e7eb;
     background: #fff;
     transition: background .15s ease, transform .15s ease;
 }

 .modal-close:hover {
     background: #f3f4f6;
     transform: scale(1.04);
 }

 .modal-close:active {
     transform: scale(0.98);
 }

 .modal-close::before {
     content: "✕";
     font-size: 16px;
     line-height: 1;
     color: #111827;
 }

 /* แสดง modal เมื่อ checkbox "ยังไม่ถูกติ๊ก" (โหลดหน้าครั้งแรก) */
 #modal-toggle:not(:checked)~.modal-overlay {
     animation: overlayFadeIn var(--fade-duration) ease forwards;
     pointer-events: auto;
 }

 #modal-toggle:not(:checked)~.modal-overlay .modal {
     animation: modalFadeIn var(--fade-duration) ease forwards;
 }

 /* ซ่อน modal เมื่อ checkbox ถูกติ๊ก (กดปิด) */
 #modal-toggle:checked~.modal-overlay {
     animation: overlayFadeOut var(--fade-duration) ease forwards;
 }

 #modal-toggle:checked~.modal-overlay .modal {
     animation: modalFadeOut var(--fade-duration) ease forwards;
 }

 /* คลิกที่พื้นหลังให้ปิดได้: ใช้ label เต็มหน้าจอชั้นล่าง */
 .overlay-click-area {
     position: fixed;
     inset: 0;
     /* ทำให้คลิกทะลุไปถึง label ได้ */
 }

 /* เนื้อหา demo */

 .modal {
     color: rgba(255, 255, 255, 1);
     background: #37383B;
     background: linear-gradient(0deg, rgba(55, 56, 59, 1) 0%, rgba(159, 160, 161, 1) 100%);
 }

 .modal>figure {
     height: 200px;
     background-image: url(../img/modal-img01.png);
     background-repeat: no-repeat;
     background-position: 38% 0;
     background-size: 430px;
     margin-bottom: 1em;
 }

 .modal>div {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: center;
 }

 .modal>div>div {
     width: 12px;
 }

 .modal>div>h2 {
     font-size: 19px;
     margin: 0 0.5em;
 }


 .modal>h4 {
     font-size: 17px;
     font-weight: 500;
     margin: 1em auto;

 }

 .modal>p {
     margin: 1em auto;
     text-align: center;
 }

 .modal>p span {
     display: block;
 }

 .modal>hr {
     height: 1px;
     margin: 0.5em auto;
     background: linear-gradient(90deg, rgba(249, 215, 201, 1) 0%, rgba(253, 236, 213, 1) 60%, rgba(204, 159, 137, 1) 100%);
 }

 .hr-long {
     width: 80%;
 }

 .hr-short {
     width: 60%;
 }

 @media (min-width: 768px) {

     /*iPad portrait*/

     .modal>figure {
         height: 296px;
         background-position: 12% 18%;
         background-size: 112%;
     }

     .modal>div>h2 {
         font-size: 22px;
         letter-spacing: 0.1em;
     }

     .modal>h4 {
         font-size: 20px;
     }

     .hr-long {
         width: 60%;
     }

     .hr-short {
         width: 40%;
     }

     .modal>p {
        font-size: 20px;
    }
     .modal>p span {
         display: inline-block;
     }

 }

 @media (min-width: 992px) {

     /*iPad landscape*/
     .modal>figure {
         height: 50%;
         background-position: 32% -86%;
         background-size: 132%;
     }

 }

 @media (min-width: 1920px) {

     /* Full HD */
     .modal>figure {
         background-position: 32% 122%;
     }
 }

 /* Animations */
 @keyframes overlayFadeIn {
     from {
         opacity: 0
     }

     to {
         opacity: 1
     }
 }

 @keyframes overlayFadeOut {
     from {
         opacity: 1
     }

     to {
         opacity: 0
     }
 }

 @keyframes modalFadeIn {
     from {
         opacity: 0;
         transform: translateY(12px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes modalFadeOut {
     from {
         opacity: 1;
         transform: translateY(0);
     }

     to {
         opacity: 0;
         transform: translateY(12px);
     }
 }