/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
  /* 기본 설정 */
  html { min-width: unset !important; width: 100%; overflow-x: hidden; }
  body { overflow-x: hidden; width: 100%; height: 100%; position: relative; background:#000; }
  
  /* 햄버거 메뉴 버튼 - 오른쪽에 위치 */
  .hamburger-menu { display: block; position: fixed; top:29px; right: 20px; z-index: 200; width: 30px; height: 25px; cursor: pointer; transition: all 0.3s ease; }
  .hamburger-menu span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
  .hamburger-menu span:nth-child(1) { top: 0px; }
  .hamburger-menu span:nth-child(2) { top: 8px; }
  .hamburger-menu span:nth-child(3) { top: 16px; }
  
  /* 햄버거 메뉴 애니메이션 */
  .hamburger-menu.open span:nth-child(1) { top: 10px; transform: rotate(135deg); }
  .hamburger-menu.open span:nth-child(2) { opacity: 0; left: -60px; }
  .hamburger-menu.open span:nth-child(3) { top: 10px; transform: rotate(-135deg); }
  
  /* 메인 콘텐츠 래퍼 */
  #wrapper { transition: transform 0.3s ease-in-out; min-height: 100vh; position: relative; width: 100%; }
  #wrapper.menu-open { transform: translateX(-80%); }
  
  /* 모바일 메뉴 컨테이너 - 오른쪽에 위치 */
  .mobile-menu { position: fixed; top: 0; right: -80%; width: 80%; height: 100vh; background: #000; z-index: 100; transition: right 0.3s ease-in-out; padding: 70px 20px 20px; overflow-y: auto; }
  .mobile-menu.open { right: 0; }
  
  /* 모바일 메뉴 스타일 */
  .mobile-menu-header { margin-bottom: 30px; text-align: center; }
  .mobile-menu-logo { font-family: "Palanquin Dark", serif; font-size:35px; color: #fff; margin-bottom: 20px; }
  .mobile-menu-logo .under_line { display: inline-block; width: 20px; height: 3px; background: #fff; margin: 0; }
  
  .mobile-menu-nav { margin-bottom: 30px; }
  .mobile-menu-nav a { display: block; padding: 15px 0; color: #fff; font-size:17px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s; }
  .mobile-menu-nav a:hover { color: #ffc900; }
  
  .mobile-menu-nav2 { margin-bottom: 30px; }
  .mobile-menu-nav2 a { display: block; padding: 10px 0; color: #fff; font-size:15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s; }
  .mobile-menu-nav2 a:hover { color: #ffc900; }
  
  .mobile-menu-user { margin-top:0px; border-top: 0px solid rgba(255, 255, 255, 0.1); padding-top:0px; }
  .mobile-menu-user a { display: block; padding: 10px 0; color: #fff; font-size: 16px; transition: all 0.3s; }
  .mobile-menu-user a img { width: 20px; margin-right: 10px; vertical-align: middle; }
  .mobile-menu-user a:hover { color: #ffc900; }
  
  /* 메인 콘텐츠 모바일 스타일 */
  .service_contents { width:95% !important; max-width: 100%; padding: 0 20px; top:43%;}
  .service_contents span.logo_box { margin-bottom:15px; }
  .service_contents span.logo_box span.logo { font-size:40px; }
  .url_input_box span.ui_box { display:inline-block; width:100%; float:left; margin-bottom:10px; }
  .url_input_box span.btn_box { display:inline-block; float:left; }
  .url_input_box span.input_box { width: calc(100% - 60px); }
  .url_input_box span.input_box input.url { font-size:15px; padding:0px; height:30px; }
  .url_input_box button { width:30px; height:30px; }
  .url_input_box button img.create_icon { width:20px; }
  .url_input_box span.title { font-size: 18px; }
  
  /* 팝업 모바일 스타일 */
  .create_url_box span.result_box { width: 90%; max-width: 400px; }
  .create_url_box span.result_box span.url_result { font-size: 30px; word-break: break-all; }
  .create_url_box span.result_box span.btn_box button.btn_url_copy { width: 80%; }
  .member_benefit { flex-direction: column; display: flex; padding: 20px 10px; }
  .member_benefit span.benefit_title, .member_benefit span.benebit_info_box { width: 100%; float: none; }
  
  /* 로그인/회원가입 팝업 모바일 스타일 */
  .mb_acc_box { width: 100%; padding: 30px 20px; }
  .mb_acc_box span.logo_box { font-size: 40px; }
  .mb_acc_box span.dokdo_im_intro { font-size: 16px; }
  
  /* 데스크톱 요소 모바일에서 숨기기 */
  #wrapper li.head .member_si_lo { display: none; }
  #wrapper li.tail { display: none; }

  /* 팝업 모바일 대응 */
  .create_url_box button.btn_close { margin: 15px 15px 0 0; width: 40px; height: 40px; }
  .create_url_box span.result_box span.result_text { font-size: 18px; padding: 10px 20px; }
  
  /* 비디오 배경 조정 */
  .background_box video { object-fit: cover; }
  
  /* 팁 박스 모바일 대응 */
  .tip_box span.explain span.info, .tip_box span.explain span.info2 { font-size: 12px; }
  
  /* 로그인 폼 조정 */
  .mb_login { width: 100%; }
  .mbs_reg_tip { font-size: 12px; }
}

/* PC에서 모바일 요소 숨기기 */
@media screen and (min-width: 769px) {
  .hamburger-menu, .mobile-menu { display: none !important; }
}

/* 모달 표시를 위한 CSS */
.create_url_box { display: block; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.create_url_box.visible { opacity: 1; pointer-events: auto; }
.member_acc_contents { display: block; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.member_acc_contents.visible { opacity: 1; pointer-events: auto; }