.button-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
justify-items: center;
margin-top: 20px;
}
.bt {
border-radius: 6px;
border: 1px solid #dcdcdc;
cursor: pointer;
color: #666666;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 15px 30px;
text-align: center;
width: 100%;
background: #eaeaea;
}
.bt:hover {
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
}
.bt:active {
position: relative;
top: 1px;
}
.bt-copy {
    font-size: 18px;
    padding: 10px 25px;
}
.copy-button-container {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
}
  
  #textDiv {
    background-color: rgba(68, 68, 68, .4);
    border: 1px solid rgb(77, 77, 77);
    box-sizing: border-box;
    line-height: 1.69;
    margin: 10px 0px 0px;
    padding: 25px;
    text-align: left;
    text-indent: 0px;
    color:#fff;
    
  }
  
  #textDiv p {
    color:#fff;
  }


.main-box {

  margin: 0 auto;
  margin-top:10px;
  background: rgba(0, 0, 0, 0.9); 
  border: 0.2vh solid rgba(104, 91, 68, 0.65);
  border-radius: 0;
  padding: 30px 20px;
  box-shadow: 0vh 2vh 5vh rgba(0, 0, 0, 0.215);
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
}

.main-box::before,
.main-box::after,
.main-box .corner::before,
.main-box .corner::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWf9Pl1WYZNJwZ6rGaY4th63ESPpG_4xW6mQUj9StQQxhi_RExR1K6_n5R5PqdiyiWc8PkynMku7I9PaeuHyMAH9vDd-3PNQesNRKaHPFXpkMEf6LiLEcrBCvNkdCBFKBeEKLKjKVskrpprJdE_BiLfuBl9uoKZOXv7F58AV0_wua_JhkyJkZ0P4MUyDY/s1600/6.png'); /* ✅ ¹®¾ç À̹ÌÁö ÁÖ¼Ò º¯°æ °¡´É */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

/* Á»ó´Ü */
.main-box::before {
  top: 0;
  left: 0;
  transform: rotate(0deg);
}

/* ¿ì»ó´Ü */
.main-box::after {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}

/* ÁÂÇÏ´Ü */
.main-box .corner::before {
  bottom: 0;
  left: 0;
  transform: rotate(270deg);
}

/* ¿ìÇÏ´Ü */
.main-box .corner::after {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
  
  @keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  0% { color: #ff4e4e; }
  50% { color: #fff176; }
  100% { color: #ff4e4e; }
}

.spawn-blink {
  animation: blink 1.5s infinite;
  font-weight: bold;
  cursor: pointer;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 60px;
  margin-bottom: 15px;
  padding-left: 10px;
  color: #fff;
}
  
  .monster-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.monster-card {
  width: 160px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s;
}

.monster-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.monster-card:hover {
  transform: scale(1.05);
  background: #272727;
}