@font-face {
    font-family: 'DaeAmLeeTaeJun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/DAEAM_LEE_TAE_JOON.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ChilgokHalmaeChuyueul';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/Chilgok_Cye.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SiwonhanSeolreim';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/seolleimcool-SemiBold.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

body {background: url('https://raw.githubusercontent.com/sukki030r/images/main/haru_bg.jpg'); background-repeat: no-repeat; background-size: cover; }


.container2 {width: 100%;
  max-width: 900px;
  margin: 0 auto;}

.hbd_img { max-width: 900px;  margin: 0 auto;}
.hbd_img > img {width: 100%;}

.hbd_box {margin: 0 auto; padding: 20px 10px; width: 100%;   max-width: 900px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.8; color:#fff;}
.hbd_box > p{ font-family: 'ChilgokHalmaeChuyueul';line-height: 2.4; font-size: 24px;}
.sub_tit {padding: 40px 0; text-align: center; font-size: 40px;color: #fff;font-family: 'DaeAmLeeTaeJun'; letter-spacing: 1px; -webkit-text-stroke: 3px #000; paint-order: stroke fill;}
.event_con {border-width:0 10px 10px 10px; }
.event_con > table {margin: 0 auto; width: 90%; border:1px solid #ccc; color:#fff;}
.event_con > table > thead >tr > th {font-size: 30px; line-height: 2.4; background: #ccc;background-repeat: no-repeat; background-size: cover; font-family: 'DaeAmLeeTaeJun';letter-spacing: 1px; -webkit-text-stroke: 3px #000; paint-order: stroke fill; color:#fff}
.event_con > table > tbody > tr > td {width: 50%; text-align: center; line-height: 2.0; border:1px solid #ccc; }
.event_con > p {text-align: center; padding: 40px 0 20px; line-height: 1.8; color:#fff;}
.go_str {width:100%; text-align: center; padding: 20px 0;  border:0px;font-family: 'DaeAmLeeTaeJun'; letter-spacing: 1px; -webkit-text-stroke: 3px #000; paint-order: stroke fill; color:#fff !important; font-size: 40px;  cursor:pointer;  display:block; background: transparent; border: 3px #f7f7f7 dotted; border-radius: 50px; margin: 20px auto; }
.go_str > a {color: #fff;}


/* 모달 전체 */ 
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* 배경 */
.modal_bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}



/* 모달 박스 */
.modal_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 90%;
  max-width: 420px;
  padding: 30px 20px;
  border-radius: 20px;
  text-align: center;
}

/* 제목 */
.modal_title {
  font-size: 20px;
  margin-bottom: 20px;
}

/* 버튼 묶음 */
.stream_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 24px;
}

.str_tit {text-align: left;}

hr {margin: 12px 0; color:#fb92cb;}

/* 버튼 공통 */
.stream_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  transition: 0.2s;
}

.stream_btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* 플랫폼별 컬러 */
.melon { background: #00cd3c; }
.genie { background: #0096ff; }
.flo { background: #6b4eff; }
.bugs { background: #ff4f4f; }
.apple { background: #111; }
.spotify { background: #1db954; }

/* 닫기 버튼 */
.modal_close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;}

  
  @media (max-width: 480px){
    .hbd_box {margin: 0 auto; padding: 10px 10px; width: 100%;
   margin: 0 auto; text-align: center; background-color:#111; font-size: 12px; line-height: 1.6; }
.hbd_box > p{font-family: 'ChilgokHalmaeChuyueul';line-height: 2.4; font-size: 18px;}
  .hbd_img{ border-width: 6px; }
  .event_con{ border-width: 0 6px 6px 6px; padding:20px 10px;}
  .event_con > table > thead >tr > th {font-size: 20px; line-height: 2;}
  .go_str {font-size: 16px;}
}