/* Styling the dialog box itself */
  dialog {
    width: 50%;
    background-color: #f0f0f0; /* Light gray background for the dialog content area */
    border: none;
    border-radius: 0.5rem;
    padding: 1rem;
  }
  
  /* Styling the background overlay when showModal() is used */
  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    /* Optional: Add a blur effect to the background content */
    backdrop-filter: blur(4px); 
  }

  dialog button[id="buttonCloseDialog"] {
    position:absolute; display:block; 
    right:20px; top:20px; width:50px; 
    height:35px; border-style:solid; border-radius:0.5rem;
    border-color:#3333337e;
    color:#333333a0;
  }

  dialog .ContentTermsAndConditions {
    height:500px; width:95%; 
    overflow-y: auto; 
    overflow-x: hidden; 
    border-style:solid; 
    border-width:1px;
    border-color:#23222236;
  }
  
  
  /* 제목 스타일 */
  dialog .ContentTermsAndConditions h1 {
    font-size: 24px;
    margin-left: 3px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
  
  dialog .ContentTermsAndConditions h2 {
    font-size: 18px;
    margin-left: 5px;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #0056b3; /* 포인트 컬러 */
  }
  
  /* 본문 텍스트 */
  dialog .ContentTermsAndConditions p, .ContentTermsAndConditions li {
    font-size: 14px;
    margin-left: 15px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: justify; /* 양쪽 정렬로 깔끔하게 */
  }
  

  /* 수정일 스타일 */
  .last-updated {
    font-size: 12px;
    margin-left: 15px;
    color: #777;
  }
  
  /* 동의 체크박스 */
  .agree-box {
    margin-top: 30px;
    padding: 15px;
    background-color: #eee;
    text-align: center;
    border-radius: 4px;
  }

  @media screen and (max-width: 768px) {

    dialog {
        width: 80%;
        background-color: #f0f0f0; /* Light gray background for the dialog content area */
        border: none;
        border-radius: 0.5rem;
        padding: 1rem;
      }
    
  }