body {
      font-family: sans-serif;
      padding: 2em;
      background: #f8f8f8;
    }
    #faq-list, #faq-detail {
      max-width: 600px;
      margin: auto;
      background: #fff;
      padding: 1em;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    h2 {
      margin-top: 0;
    }
    .question {
      cursor: pointer;
      margin-bottom: 1em;
      padding: 0.5em;
      border: 1px solid #ddd;
      border-radius: 5px;
      background: #f9f9f9;
    }
    .question:hover {
      background: #eef7ff;
    }
    #search {
      width: 100%;
      padding: 0.6em;
      margin-bottom: 1em;
      box-sizing: border-box;
    }
    #faq-detail {
      display: none;
    }
    .related a {
      display: block;
      margin: 0.3em 0;
      color: #007aff;
      text-decoration: underline;
      cursor: pointer;
    }
    #load-more {
      text-align: center;
      margin-top: 1em;
      cursor: pointer;
      color: #666;
      font-size: 0.9em;
      user-select: none;
    }
    #load-more:hover {
      color: #007aff;
      text-decoration: underline;
    }
   .faq-header {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
   }

   .faq-header h2 {
     margin: 0;
   }

   .faq-links {
     margin-left: auto;
     display: flex;
     gap: 1em;
   }
    
   @media screen and (max-width: 768px) {
     body {
       padding: 1em;
     }

     #faq-list, #faq-detail {
       padding: 1em;
       border-radius: 0;
       box-shadow: none;
     }

     .question {
       font-size: 1em;
       padding: 1em;
     }

     #search {
       font-size: 1em;
       padding: 0.8em;
     }

     #load-more {
       font-size: 1em;
     }

     h2, h4 {
       font-size: 1.2em;
     }

     button {
       font-size: 1em;
       padding: 0.5em 1em;
     }
   }