/* BASIC css start */
/* 좌측 사이드 메뉴 */
.snb-wrap{position:fixed;left:45%;top:40px;transform: translateX(-700px);z-index:10;width:160px;}  /* .snb-wrap{position:fixed;left:8%;top:4%;z-index:10;width:160px;} */
.snb-wrap h1{margin-bottom:50px;}
.snb-wrap a{display:block;padding:3px 0;color:#000;font-family:'Noto Sans KR', sans-serif;}
.snb-wrap a.on,
.snb-wrap a:hover{font-weight:bold;}
.snb-depth2, .snb-depth3{display:none;overflow:hidden;}
.snb-depth2.on, .snb-depth3.on{display:block;}
.snb-wrap .snb-depth1 > li{margin-bottom:17px; margin-left:30px;}  /*   margin-left:30px;   */
.snb-wrap .snb-depth1 > li > a{padding:6px 0;font-size:14px;}
.snb-wrap .snb-depth2{padding-top:10px;border-top:1px solid #000;}
.snb-wrap .snb-depth2 > li{margin-bottom:12px;}
.snb-wrap .snb-depth2 > li > a{font-size:13px;}
.snb-wrap .snb-depth2 > li > a:before{content:'';display:inline-block;width:8px;height:8px;margin-right:4px;border:1px solid #000;}
.snb-wrap .snb-depth2 > li > a.on:before{background:#000;}
.snb-wrap .snb-depth3{padding:8px 0 0 15px;}
.snb-wrap .snb-depth3 > li > a{font-size:12px;line-height:1.6;}
.tlogo{width: 100px; height:100px; margin-top:30px; margin-left:20px;}  /*  margin-left:20px;  */

/* 상단 타이틀 영역*/
.g_title_area {clear:both; position:fixed;margin-left:180px; top:0; background-color: #fff; width:1340px; height:170px; z-index:100;} 

.g_title01 {font-weight:500; font-size:22px;  color:#222; text-align:left; padding-left:10px; margin-top:100px; line-height:28px; font-family: 'Noto Sans KR'; background:url(/design/redbrown/0705wishblack/guide_title_bg.gif) no-repeat; background-position:0px 2px; margin-left:50px;}

/* 음료 리스트 영역 */
.buffet_area{
  margin-left:230px;
  margin-top:160px;
}

.buffet_area ul{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.buffet_area li{
  width:300px;
  position:relative;
}

.buffet_area2{
  margin-left:230px;
  margin-top:-40px;
}

.buffet_area2 ul{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.buffet_area2 li{
  width:300px;
  position:relative;
}
.buffet_area3{
  margin-left:230px;
  margin-top:10px;
}

.buffet_area3 ul{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.buffet_area3 li{
  width:300px;
  position:relative;
}

.buffet_area4{
  margin-left:230px;
  margin-top:-40px;
}

.buffet_area4 ul{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.buffet_area4 li{
  width:300px;
  position:relative;
}

.buffet_area5{
  margin-left:230px;
  margin-top:-40px;
}

.buffet_area5 ul{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.buffet_area5 li{
  width:300px;
  position:relative;
}
.buffet_area6{
  margin-left:230px;
  margin-top:-40px;
}

.buffet_area6 ul{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.buffet_area6 li{
  width:300px;
  position:relative;
}


/* 이미지 */
.buffet_area .thumb figure{
  width:250px;
  height:250px;
  overflow:hidden;
  border:0px solid #b6b6b6;
}
.buffet_area .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.buffet_area .thumb:hover img{
  transform:scale(1.1);
}

/* 이미지2 */
.buffet_area2 .thumb figure{
  width:250px;
  height:250px;
  overflow:hidden;
  border:0px solid #b6b6b6;
}
.buffet_area2 .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.buffet_area2 .thumb:hover img{
  transform:scale(1.1);
}
/* 이미지3 */
.buffet_area3 .thumb figure{
  width:250px;
  height:250px;
  overflow:hidden;
  border:0px solid #b6b6b6;
}
.buffet_area3 .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.buffet_area3 .thumb:hover img{
  transform:scale(1.1);
}

/* 이미지4 */
.buffet_area4 .thumb figure{
  width:250px;
  height:250px;
  overflow:hidden;
  border:0px solid #b6b6b6;
}
.buffet_area4 .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.buffet_area4 .thumb:hover img{
  transform:scale(1.1);
}
/* 이미지5 */
.buffet_area3 .thumb figure{
  width:250px;
  height:250px;
  overflow:hidden;
  border:0px solid #b6b6b6;
}
.buffet_area3 .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.buffet_area3 .thumb:hover img{
  transform:scale(1.1);
}

/* 이미지6 */
.buffet_area4 .thumb figure{
  width:250px;
  height:250px;
  overflow:hidden;
  border:0px solid #b6b6b6;
}
.buffet_area4 .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.buffet_area4 .thumb:hover img{
  transform:scale(1.1);
}

/* 텍스트 */
.buffet_text01{
  font-size:15px;
  font-weight:bold;
  margin-top:0px;
  text-align:center;
  margin-left:80px;
  font-family:'Noto Sans KR';
}
.buffet_text02{
  font-size:13px;
  margin-top:6px;
  margin-bottom:100px; 
  text-align:center;
  margin-right:80px;
  font-family:'Noto Sans KR';
}
.buffet_text03{
  font-size:13px;
  color:#444;
  margin-top:0px;
  line-height:1.5;
  font-family:'Noto Sans KR';
}

/* 팝업 */
.drink-item{
  position:relative;
}

.popup-title{font-size:18px; font-family:'Noto Sans KR'; font-weight:500; margin-top:-50px;}
.popup-desc{font-size:13px; color:#808080; font-family:'Noto Sans KR'; margin-top:20px; font-weight:bold; line-height:18px;}
.popup-desc02{font-size:12px; font-family:'Noto Sans KR'; text-align:left; margin-left:20px; margin-right:15px;  margin-top:20px; letter-spacing:0.5px; line-height:19px;}


.popup-close{
  position:absolute;
  top:12px;
  right:12px;
  background:none;
  border:none;
  font-size:22px;
  font-family:"Nanum Gothic";
  cursor:pointer;
}


.thumb{
  position: relative;
  left: 0; 
}

/* 교체 */
.thumb{
  transform: translateX(-40px);
}
.thumb figure{
  transform: none;
}


.popup-close{
  transition:opacity .3s ease, transform .3s ease;
}
.popup-close:hover{
  opacity:0.6;
  transform:rotate(90deg);
}


/* =========================
   DRINK POPUP (FINAL)
========================= */

.drink-popup{
  position:absolute;
  inset:-2px;
  background:#fff;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  opacity:0;
  pointer-events:none;
  transform:scale(0.95);

  transition:all .45s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index:99;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.08);

  border-radius:2px;
}

.drink-item.open .drink-popup{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}


.drink-link {
  pointer-events: auto;
}


.prdList li {
  position: relative;
}

.prdList li .thumb {
  position: relative;
}

.prdList li .thumb figure {
  position: relative;
  width: 260px;   /* 실제 카드 폭 */
  margin: 0 auto;
}

.drink-link {
  pointer-events: auto;
}

.drink-trigger {
  cursor: default;
}

.drink-trigger img {
  cursor: pointer;
}

.buffet_text01 {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.buffet_text01::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;   /* 텍스트 아래 간격 */
  width: 0;
  height: 1px;
  background: #000;
  transition: width 0.3s ease;
}

.buffet_text01:hover::after {
  width: 100%;
}


/* 전체 래퍼 */
.ms-more-wrap{
  max-width: 100%;
  margin: 0 auto;
}

/* 접힌 상태 높이 (원하는 만큼 조절) */
:root{
  --ms-more-collapsed-height: 420px; /* 접혔을 때 보여줄 높이 */
}

/* 숨김/펼침 대상 */
.ms-more-content{
  position: relative;
  max-height: var(--ms-more-collapsed-height);
  overflow: hidden;
  transition: max-height .45s ease;
}

/* 아래 그라데이션 마스크 */
.ms-more-content::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
  opacity:1;
  transition: opacity .25s ease;
}

/* 펼친 상태 */
.ms-more-wrap.is-open .ms-more-content{
  max-height: 99999px; /* 충분히 크게 */
}
.ms-more-wrap.is-open .ms-more-content::after{
  opacity:0; /* 펼치면 마스크 제거 */
}

/* 버튼 */
.ms-more-btn{
  display: block;
  margin: 26px auto 0;
  min-width: 220px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: #101820; /* 진한 블랙톤 */
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, opacity .2s ease;
}
.ms-more-btn:hover{ opacity: .92; }
.ms-more-btn:active{ transform: scale(.98); }

/* 버튼 텍스트 변경(접기) */
.ms-more-wrap.is-open .ms-more-btn::after{
  content:"";
}

/* 접근성 포커스 */
.ms-more-btn:focus{
  outline: 2px solid rgba(16,24,32,.35);
  outline-offset: 3px;
}

.ms-more-btn{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

/* BASIC css end */