<!-- &#9989; 스타일 전체 -->


  #event {
    font-family: 'Pretendard', 'Arial', sans-serif;
    text-align: center;
  }


  /* &#9989; 버튼 (배경은 고정, 텍스트만 깜박임) */
  #event .event-toggle {
    display: inline-block;              /* 글자 크기만큼 너비 */
    margin: 24px auto;
    padding: 12px 30px;
    background: linear-gradient(90deg, #b9fbc0 0%, #3ca878 100%); /* &#9989; 녹색 그라디언트 */
     color: #0f2e20;   
    font-size: 1.8rem;
    font-weight: 800;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  }


  /* &#9989; 텍스트만 깜박임 */
  #event .blink-text {
    animation: blink 1.2s infinite;
  }


  @keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
  }


  /* &#9989; 이벤트 상세 박스 */
  #event .event-box {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 20px;
    background: #fffce8;
    border: 2px solid #ffd54f;
    border-radius: 10px;
    padding: 30px 20px;
    display: none; /* 처음에는 숨김 */
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }


  #event .event-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
  }


  #event .event-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
  }


  #event .event-item img {
    width: 110px;
  }


  #event .event-note {
    font-size: 0.9rem;
    color: #666;
  }


  /* &#9989; 반응형 처리 */
  @media (max-width: 480px) {
    #event .event-toggle {
      font-size: 1.4rem;
      padding: 10px 24px;
      margin: 20px auto;
    }


    #event .event-box {
      padding: 24px 16px;
    }


    #event .event-title {
      font-size: 1.4rem;
    }


    #event .event-item img {
      width: 90px;
    }
  }