/* --- [1. 가로 스크롤 방지 및 PC 원본 보호] --- */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Noto Sans KR", sans-serif;
  background: #fff;
  overflow-x: hidden;
  touch-action: manipulation; /* [추가] 더블클릭 확대 방지 */
}

#wrapper {
  width: 100% !important;
  min-width: 1200px;
  position: relative;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
#hd,
#ft,
#container_title {
  display: none !important;
}

/* --- [2. PC Header - 원본 스타일 유지] --- */
.br_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0);
}
.br_header.scrolled {
  background: rgba(255, 255, 255, 1);
  height: 80px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}
.br_header .inner {
  width: 100%;
  max-width: 1600px;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  padding:0px 20px;
}

.br_header nav {
  margin-left: auto;
  margin-right: 20px;
  height: 100%;
}
.br_header nav > ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.br_header nav > ul > li {
  position: relative;
  height: 100%;
}
.br_header nav > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 35px;
  height: 100%;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  font-size: 17px;
  transition: 0.2s;
}
.br_header nav > ul > li:hover > a {
  background: #f2728b;
  color: #fff;
}

.sub_menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 15px 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  display: none;
  text-align: center; /* ⭐ 로딩 시 번쩍임 방지 핵심 설정 */
  display: none;
  transition: opacity 0.3s ease; /* 마우스 올릴 때 부드럽게 나타나게 함 */
}
.br_header nav > ul > li:hover .sub_menu {
  display: block;
}
.sub_menu li a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: #666;
  font-size: 15px;
  font-weight: 500;
  transition: 0.2s;
}
.sub_menu li a:hover {
  color: #f2728b;
  font-weight: 700;
}

.br_header .header_btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.br_header .header_btns a {
  padding: 10px 25px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.btn_find {
  background: #f2728b;
  color: #fff;
}
.btn_inquiry {
  background: #222;
  color: #fff;
}

/* --- [3. 모바일 토글 & 사이드바 (원본 보존 + 아코디언 추가)] --- */
.m_menu_btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10001;
}
.m_menu_btn span {
  display: block;
  width: 30px;
  height: 2px;
  background: #222;
  margin: 7px 0;
  transition: 0.3s;
}
.m_menu_btn.active span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}
.m_menu_btn.active span:nth-child(2) {
  opacity: 0;
}
.m_menu_btn.active span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.mobile_aside {
  position: fixed;
  top: 0;
  right: -90%;
  width: 85%;
  height: 100%;
  background: #fff;
  z-index: 10000;
  transition: 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
}
.mobile_aside.active {
  right: 0;
  visibility: visible;
  opacity: 1;
}
.aside_header {
  padding: 30px 25px;
  border-bottom: 1px solid #f0f0f0;
}
.aside_header img {
  height: 30px;
}

.aside_body {
  flex: 1;
  padding: 15px 0;
  overflow-y: auto;
}
.aside_body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* [추가] 모바일 전용 아코디언 메뉴 스타일 */
.m_cate_tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 25px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
  border-bottom: 1px solid #f8f8f8;
  cursor: pointer;
}
.m_cate_tit::after {
  content: "+";
  font-size: 1.5rem;
  color: #ccc;
}
.m_cate_tit.active {
  color: #f2728b;
}
.m_cate_tit.active::after {
  content: "-";
  color: #f2728b;
}

.m_sub_list {
  display: none;
  background: #fafafa;
}
.m_sub_list li a {
  display: block;
  padding: 18px 40px;
  font-size: 1rem;
  color: #666;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.aside_footer {
  padding: 25px;
  background: #fafafa;
}
.aside_btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aside_btns a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.aside_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

/* --- [4. PC 컨텐츠 및 슬라이더 - 원본 유지] --- */
.main_visual {
  width: 100%;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.slide_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1. 컨트롤러 전체 바구니 (알약 모양 배경) */
.slider_controls {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;

  display: flex;
  flex-direction: row; /* 가로 정렬 */
  align-items: center;
  justify-content: center;
  gap: 20px; /* 점들과 버튼들 사이의 간격 */

  background: rgba(0, 0, 0, 0.3); /* 반투명 검정 배경 */
  padding: 10px 25px;
  border-radius: 50px;
}

/* 2. 왼쪽 점(Pagination) 영역 */
.swiper-pagination-custom {
  display: flex !important;
  align-items: center;
  gap: 8px;
  position: relative !important; /* Swiper 기본 absolute 무시 */
  width: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

/* 기본 점 모양 */
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 50%;
  opacity: 1 !important;
  margin: 0 !important;
}

/* 활성화된 긴 알약 모양 점 */
.swiper-pagination-bullet-active {
  background: #fff8be !important;
  width: 35px !important;
  border-radius: 10px !important;
}

/* 3. 오른쪽 버튼(< || >) 영역 */
.nav_btns {
  display: flex;
  flex-direction: row; /* 가로 정렬 */
  align-items: center;
  gap: 15px; /* 버튼들 사이의 간격 */
  color: #fff;
  font-size: 16px; /* 화살표 크기 */
  font-weight: bold;
}

.nav_btns div {
  cursor: pointer;
  transition: 0.3s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_btns div:hover {
  opacity: 0.7;
}

/* 재생 버튼 모양 미세 조정 */
.sw_play {
  font-size: 14px !important;
  margin: 0 5px; /* 양옆 여백 */
}
/* 섹션 전체 */



.best_menu_sec { 
    padding: 120px 0 0px; 
    background: url('https://miraclize01.mycafe24.com/franchise2/img/pc/item_bg.png') no-repeat center bottom / cover; 
    text-align: center; 
    overflow: hidden; 
	padding-bottom:150px;
  margin-left: auto;
  margin-right: auto;
}

/* ★ 수정한 부분: inline-block을 빼고 flex column으로 변경 ★ */
.sec_title_box { 
    margin: 0 auto 70px; /* margin: 0 auto로 중앙 배치 */
    display: flex; 
    flex-direction: column; 
    align-items: center; /* 자식 요소들을 가로 중앙으로 정렬 */
    width: 100%; 
}

.title_top { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 10px; 
    width: 100%; 
    max-width: 500px; /* 라인이 너무 길어지지 않게 최대 너비 설정 */
}

.title_top .line { 
    flex: 1; 
    height: 1px; 
    background: #f2728b; 
}

.title_top span { 
    padding: 4px 18px; 
    border: 1.5px solid #f2728b; 
    color: #f2728b; 
    border-radius: 30px; 
    font-weight: 700; 
    font-size: 1.3rem; 
    white-space: nowrap; 
}

.sec_title_box h2 { 
    font-size: 60px; 
    font-weight: 900; 
    margin: 0; 
    letter-spacing: -1px; 
    text-align: center; /* 텍스트 중앙 보장 */
}
/* 1. 컨테이너 설정 */
.menu_container {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 아래쪽 라인을 기준으로 정렬 */
  gap: 25px;
  max-width: 1400px;
  margin: 80px auto 0;
  padding: 0 20px;
}

/* ★ 카드 전체 너비 고정: 이미지 크기에 맞춰 조절하세요 ★ */
.menu_card {
  flex: 0 1 330px; /* 카드의 기본 너비를 330px로 설정 */
  position: relative;
  text-align: center;
}

/* 음료 이미지: 카드 너비에 꽉 차게 */
.drink_img {
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* ★ 하단 흰색 박스: 이미지와 너비를 정확히 일치시킴 ★ */
.info_box {
  width: 100%; /* 위쪽 이미지와 동일한 너비 */
  background: #fff;
  padding: 0px 20px 30px;
  border-radius: 0 0 40px 40px; /* 아래쪽만 둥글게 */
  margin-top: -5px; /* 이미지와 텍스트 박스 사이 미세 틈 제거 */
  box-shadow: 0 15px 30px rgba(0,0,0,0.05);
  border:1px solid #e8ded7;
  box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 함 */
}

/* 텍스트 스타일 */
.item_tit {
  font-family: 'SBAggroB';
  font-size: 24px;
  color: #000;
  margin-bottom: 15px;
}
.item_desc {
  font-family: 'SBAggroL';
  font-size: 15px;
  color: #444;
  line-height: 1.5;
  margin-bottom: 30px;
  word-break: keep-all;
}

/* 라벨 공통 */
.item_label {
  display: inline-block;
  padding: 5px 35px;
  border-radius: 50px;
  font-family: 'SBAggroM';
  font-size: 14px;
  color: #fff;
}

.item_label.pink { background-color: #e84c60; }
.item_label.green { background-color: #9ea758; }


.best_badge_img {
    position: absolute;
    right: 00px;       /* 오른쪽 여백 */
    top: 85px;         /* 음료 이미지와 배경 경계 부분에 배치 */
    width: 65px;       /* 배지 크기 (시안 보며 조절) */
    z-index: 20;       /* 음료 이미지(z-index: 5)보다 위로 */
    pointer-events: none; /* 클릭 방해 금지 */
}


/* 반응형 */
@media (max-width: 1024px) {
  .menu_container { flex-wrap: wrap; gap: 50px 15px; }
  .menu_card { flex: 0 1 45%; }
  .info_box { padding: 10px 15px 20px; }
  .item_tit{font-size:15px;}
  .item_desc{font-size:13px;}
    .best_badge_img {
        width: 50px;   /* 모바일에서는 조금 작게 */
        right: -10px;
        top: 40px;
    }
	.best_menu_sec{padding-bottom:0px;}
	.best_menu_sec .title_top{max-width:300px;}
	.item_label{font-size:10px;}
	.menu_container .item_label{    padding: 5px 15px;}
	.menu_container{margin:20px auto 0;}
	.main_visual{ height: fit-content;  }
	.main_visual .slide_img{}
}



/* ========================================
   [Coffee Pure Section] 스타일
======================================== */
.coffee_pure_sec {
  width: 100%;
  padding: 160px 0;
  background: url("/template/franchise2/img/pc/content2_bg.png") no-repeat
    center center;
  background-size: cover;
  background-attachment: fixed; /* 패럴랙스 효과 */
  position: relative;
  overflow: hidden;
}

/* 어두운 배경일 경우를 대비한 오버레이 (선택사항) */
.coffee_pure_sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4); /* 배경 이미지를 살짝 밝게 처리 */
  z-index: 1;
}

.coffee_pure_sec .inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* ========================================
   [Signature Blend Section] 스타일 수정
======================================== */
.sig_blend_sec {
  width: 100%;
  padding: 160px 0;
  background: url("/template/franchise2/img/pc/content3_bg.png") no-repeat
    center center;
  background-size: cover;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* --- 타이틀 영역 정밀 수정 --- */
.sig_blend_sec .sec_title_box {
  text-align: center;
  width: 100%;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 자식 요소들을 가로 정중앙 배치 */
  margin: 0px auto;
  margin-bottom: 5%;
}

.sig_blend_sec .title_top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 800px; /* 선의 전체 길이를 조절하는 값 (시안에 맞춰 조절하세요) */
  gap: 20px;
  margin-bottom: 15px;
}

/* 선(Line) 설정: flex-1을 주어 양쪽이 동일한 너비를 갖게 함 */
.sig_blend_sec .title_top .line {
  flex: 1;
  height: 1px;
  background: #f2728b;
}

/* 가운데 캡슐 배지 */
.sig_blend_sec .title_top span {
  padding: 6px 25px;
  border: 1.5px solid #f2728b;
  color: #f2728b;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap; /* 글자가 한 줄로 유지되도록 함 */
}

/* 메인 타이틀 */
.sig_blend_sec h2 {
  font-size: 72px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -1px;
  line-height: 1.1; /* 텍스트 간격 조정 */
}

/* --- 이하 기존 레이아웃 코드 (유지) --- */
.sig_blend_sec .inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 200px;
}
.sig_blend_sec .menu_graphic_area {
  margin-left: -250px;
}
/* 왼쪽 영역 */
.sig_blend_sec .left_box {
  flex: 1;
  position: relative;
}
.sig_blend_sec .bag_img_wrap {
  position: relative;
  z-index: 2;
  transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sig_blend_sec .bag_img_wrap img {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}
.sig_blend_sec .light_glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  z-index: -1;
  border-radius: 50%;
}
.sig_blend_sec .left_box:hover .bag_img_wrap {
  transform: translateY(-15px) scale(1.05);
}

/* 오른쪽 영역 */
.sig_blend_sec .right_box {
  flex: 1.2;
}
.sig_blend_sec .text_content {
  margin-bottom: 60px;
  text-align: left;
} /* 텍스트 왼쪽 정렬 */
.sig_blend_sec .sub_tit {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f2728b;
  margin-bottom: 25px;
}
.sig_blend_sec .desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #ddd;
  margin-bottom: 35px;
  word-break: keep-all;
}
.sig_blend_sec .more_btn {
  display: inline-block;
  padding: 10px 25px;
  border: 1px solid #f2728b;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: 0.3s;
}
.sig_blend_sec .more_btn span {
  margin-left: 10px;
  color: #f2728b;
}
.sig_blend_sec .more_btn:hover {
  background: #f2728b;
}
.sig_blend_sec .more_btn:hover span {
  color: #fff;
}

.sig_blend_sec .menu_graphic_area img {
  width: 100%;
  max-width: 750px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

/* 반응형 */
@media (max-width: 1200px) {
  .sig_blend_sec .inner {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .sig_blend_sec .text_content {
    text-align: center;
  }
  .sig_blend_sec h2 {
    font-size: 56px;
  }
  .sig_blend_sec .menu_graphic_area {
    margin-left: 0px;
  }
}
@media (max-width: 768px) {
  .sig_blend_sec .title_top {
    max-width: 90%;
    gap: 10px;
  }
  .sig_blend_sec h2 {
    font-size: 42px;
  }
}

/* --- 왼쪽 이미지 효과 --- */
.coffee_pure_sec .left_box {
  flex: 1.2;
}
.coffee_pure_sec .img_wrap {
  width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
  transition: transform 0.5s ease;
  animation: floatAnim 4s infinite ease-in-out; /* 공중 부양 효과 */
}
.coffee_pure_sec .img_wrap img {
  width: 100%;
  border-radius: 0px; /* 시안과 같은 라운딩 */
}
.coffee_pure_sec .left_box:hover .img_wrap {
  transform: scale(1.03);
}

/* --- 오른쪽 텍스트 영역 --- */
.coffee_pure_sec .right_box {
  flex: 1;
}
.coffee_pure_sec .main_tit {
  font-size: 64px;
  font-weight: 900;
  line-height: 1.1;
  color: #111;
  margin-bottom: 40px;
  letter-spacing: -2px;
}

/* 통계 행 레이아웃 */
.coffee_pure_sec .stats_container {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 50px;
}
.coffee_pure_sec .rotating_badge {
  width: 90px;
  height: auto;
  transition: 0.5s;
}
/* 뱃지 살짝 흔들리는 효과 */
.coffee_pure_sec .badge_area:hover .rotating_badge {
  transform: rotate(15deg) scale(1.1);
}

.coffee_pure_sec .divider {
  width: 1px;
  height: 50px;
  background: #ccc;
}

.coffee_pure_sec .stat_info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.coffee_pure_sec .stat_info .label {
  font-size: 18px;
  font-weight: 800;
  color: #222;
}
.coffee_pure_sec .stat_info .sub_label {
  font-size: 14px;
  color: #888;
}
.coffee_pure_sec .stat_info .value {
  font-size: 24px;
  font-weight: 900;
  color: #111;
}

.coffee_pure_sec .desc_txt {
  font-size: 17px;
  line-height: 1.8;
  color: #555;
  word-break: keep-all;
}

/* --- 애니메이션 정의 --- */
@keyframes floatAnim {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* --- 반응형 --- */
@media (max-width: 1024px) {
  .coffee_pure_sec .inner {
    flex-direction: column;
    text-align: center;
  }
  .coffee_pure_sec .stats_container {
    justify-content: center;
  }
  .coffee_pure_sec .main_tit {
    font-size: 48px;
  }
  .coffee_pure_sec .img_wrap img {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 3%;
  }
}
@media (max-width: 768px) {
  .coffee_pure_sec {
    padding: 40px 0;
  }
  .coffee_pure_sec .stats_container {
    flex-wrap: wrap;
    gap: 15px;
  }
  .coffee_pure_sec .divider {
    display: none;
  }
  .coffee_pure_sec .main_tit {
    font-size: 36px;
  }
}

/* --- [5. 모바일 반응형 - 원본 스타일 그대로 보호] --- */
@media (max-width: 1024px) {
  #wrapper {
    min-width: 0 !important;
  }
  .br_header.scrolled {
    height: 55px;
  }
  .br_header {
    height: 55px;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  .br_header nav,
  .br_header .header_btns a {
    display: none;
  }
  .m_menu_btn {
    display: block;
  }
  .br_header .logo img {
    height: 30px;
  }
  .sec_title_box h2 {
    font-size: 1.8rem;
  }
  .sec_title_box {
    margin-bottom: 3%;
  }
  .menu_container {
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 10px 100px;
  }
  .menu_card {
    flex: none;
    width: calc(50% - 10px);
	margin:0px auto;
    margin-bottom: 30px;
  }
  .best_badge {
    width: 45px;
    height: 45px;
    right: 0;
    font-size: 10px;
    display: none;
  }

}