area:hover {
  cursor: pointer;
}
/* 모달 스타일 */
        .modal {
          display: none;
          position: fixed;
          z-index: 9999;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          justify-content: center;
          align-items: center;
      }

      /* 모달 컨텐츠 */
      .modal-content {
          position: relative;
          background: white;
          padding: 20px;
          border-radius: 12px;
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
          max-width: 90%;
          max-height: 90%;
          text-align: center;
      }

      /* 이미지 스타일 */
      .modal-content img {
          max-width: 100%;
          max-height: 80vh;
          border-radius: 8px;
      }

      /* 닫기 버튼 */
      .close-btn {
          position: absolute;
          width: 32px;
          height: 32px;
          top: 10px;
          right: 10px;
          background: black;
          color: white;
          border: none;
          padding: 5px 10px;
          border-radius: 50%;
          font-size: 16px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .close-btn:hover {
          background: blue;
      }