@font-face {
  font-family: 'TTLaundryGothicB';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
* { font-family: 'TTLaundryGothicB', sans-serif; }
body { border:none; box-shadow: none; }

/* ===== 기존 스타일 ===== */
.menu-btn{padding:18% 20px;background-position:center;color:black;cursor:pointer;font-size:16px;width:100%;margin:10px auto;display:block;box-sizing:border-box;margin:2% 1%;font-weight:bold;box-shadow:none;}
.brand-btn{width:33.3333%;padding:15% 0;background-color:#fff;color:#989898;border:none;cursor:pointer;font-size:16px;margin:2% 1%;text-align:center;box-sizing:border-box;}
.first-btn{width:65%;padding:15% 0;background-color:#fff;color:#989898;border:none;cursor:pointer;font-size:14px;margin:2% 1%;text-align:center;box-sizing:border-box;}
.sec-btn{width:35%;padding:15% 0;background-color:#F6F6FA;color:#989898;border:none;cursor:pointer;font-size:14px;margin:2% 1%;text-align:center;box-sizing:border-box;background:url('https://we.safeean.com/wp-content/uploads/sites/3/2024/08/Frame55.png') no-repeat center;background-size:contain;}
.menu-content-region{padding:10px;font-size:12px;background-color:#f9f9f900;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;}
.menu-content-region button{background-color:#FFFFFF;color:#989898;border:1px solid #989898;padding:10px 15px;margin:0;margin-top:-2px;cursor:pointer;font-size:16px;border-radius:0;transition:background-color .3s ease;flex:1;text-align:center;}
.menu-content-region button:hover,
.menu-content-region button.active{background-color:#3bde7c;color:#fff;}
.menu-panel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:70%;padding:0;border-right:none;overflow-y:auto;max-height:80vh;}
.menu-panel-region{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:25%;padding:0;}
.menu-content1,.menu-content2{padding:10px;font-size:12px;width:100%;}
.menu-content ul{list-style-type:none;padding:0;}
.menu-content ul li{padding:10px;cursor:pointer;border-bottom:1px solid #ddd;}
.menu-content ul li:hover{background-color:#f0f0f000;}
.close-btn{position:absolute;top:10px;left:-10px;background:none;background-color:#ffffff00;border:none;font-size:36px;cursor:pointer;z-index:1001;box-shadow:none;}
.close-btn:hover,.close-btn:focus,.close-btn:active{background-color:#ffffff00;box-shadow:none;}
.menu-close-container{position:relative;height:10%;background-color:#fff;}
.menu-row{display:flex;height:100%;}
.slider-div{width:100%;display:flex;justify-content:space-between;padding:10px 2%;box-sizing:border-box;margin-top:4%;}
.message-text{width:66.6666%;padding:10% 0;}
.tabs{display:flex;justify-content:center;margin-top:10px;margin-bottom:10px;}
.tab{padding:10px 20px;cursor:pointer;background-color:black;color:white;margin:0 5px;border:1px solid #ddd;border-radius:5px;font-weight:bold;}
.tab.active{background-color:#3bde7c;color:white;}
.recommendation{margin:20px;}
.recommendation h2{font-size:20px;margin-bottom:10px;}
.recommendation-btn{font-size:12px;width:45%;padding:0 0;background-color:#fff;color:#989898;border:none;cursor:pointer;margin:2% 1%;text-align:center;box-sizing:border-box;border-radius:20px;box-shadow:none;}
.small-btn{padding:10px;background-color:#F6F6FA;color:#989898;border:1px solid #ccc;cursor:pointer;font-size:12px;margin-left:10px;}
.brand-btns{width:100%;display:flex;justify-content:space-between;background-color:#fff;padding:1% 0%;box-sizing:border-box;margin-bottom:10px;}
.brand-section{width:95%;display:flex;justify-content:space-between;background-color:#fff;padding:1% 1%;box-sizing:border-box;border-radius:10px;border:1px solid #d0d0d0;margin:0 auto;box-shadow:0 0 15px rgba(0,0,0,.095);}
.brand-section-content{display:flex;flex-direction:column;align-items:flex-start;width:100%;}
.button-group{width:95%;display:flex;margin-left:5%;margin-bottom:3%;background-color:#fff;border:none;}
.image-btn{width:60%;height:auto;color:rgba(255,255,255,0);padding:5px;background-color:#ffffff00;background-size:contain;background-position:center left;background-repeat:no-repeat;border:none;cursor:pointer;text-align:center;margin-top:3%;margin-left:7%;box-shadow:none;}
.image-btn:hover,.image-btn:focus{width:60%;height:auto;color:white;padding:5px;background-color:#55c04f00;background-size:contain;background-position:center left;background-repeat:no-repeat;border:none;cursor:pointer;text-align:center;margin-top:3%;margin-left:7%;box-shadow:none;}
.text-span{margin-bottom:2px;margin-left:8%;text-align:left;font-size:21px;font-weight:bold;color:#535353;}
.right-btn,.left-btn{width:45%;padding:0;border:none;cursor:pointer;font-size:12px;box-sizing:border-box;background-color:transparent;text-align:center;}
.right-btn img,.left-btn img{width:100%;height:auto;display:block;}
.left-btn:focus,.left-btn:hover,.right-btn:focus,.right-btn:hover{background-color:white!important;}
.menu-container{position: fixed;top: 0; right: 0;width: 100%; height: 100%;background-color: #fff;overflow-y: hidden;z-index: 1000;transform: translateX(150%);opacity: 0;visibility: hidden;will-change: transform, opacity;}
.menu-container.show{transform: translateX(0);opacity: 1;visibility: visible;}
.menu-container.ready{ transition: transform .6s ease, opacity .2s ease;}
@media (min-width:1024px){
  .menu-container{position:fixed;bottom:-100%;left:30%;width:60%;height:100%;background-color:#fff;transition:bottom .3s ease;z-index:1000;display:flex;flex-direction:column;}
  .menu-row{display:flex;height:100%;width:30%;text-align:center;background-color:#fff;margin-left:10%;}
  .menu-panel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:80%;padding:0;border-right:none;overflow-y:auto;max-height:80vh;}
  .menu-content2{padding:10px;font-size:12px;width:40%;margin-left:10%;}
  .menu-close-container{position:relative;height:10%;background-color:#fff;margin-left:10%;}
}
.brand-item{width:100%;padding:10px;background-color:#FFFFFF;border:1px solid #989898;color:#3C3C3C;cursor:pointer;font-size:18px;text-align:left;margin-bottom:5px;border-radius:16px;}
.branch-list{display:none;padding:10px;background-color:#f9f9f900;margin-left:10px;font-size:16px;color:#3C3C3C;}
.brand-item.active .branch-list{display:block;}
.brand-item:hover{border:1px solid #469C28;}
.branch-list div:hover{background-color:#e3e3e3;}
.search-wrapper{position:relative;width:80%;margin:20px auto;border:2px solid #24ca22;border-radius:5px;padding:0;}
.search-bar{display:flex;align-items:center;width:100%;background-color:#1f2029;border-radius:5px;overflow:hidden;position:relative;}
.close-btn{background:none;border:none;cursor:pointer;margin:0 10px;display:flex;align-items:center;justify-content:center;position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:1;}
.search-input{flex:1;height:60px!important;padding:0 50px;border:none;box-sizing:border-box;font-size:21px!important;font-weight:500;outline:none;color:#c4c3ca;background-color:#1f2029;box-shadow:none;padding-left:50px;}
.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;}
.search-wrapper img{position:absolute;left:87%;top:50%;transform:translateY(-50%);width:30px;height:30px;pointer-events:none;}
.search-wrapper button{position:absolute;left:-10%;top:50%;transform:translateY(-50%);width:30px;height:30px;pointer-events:none;}
.search-input::placeholder{color:#c4c3ca;opacity:.7;transition:all 200ms linear;}
.search-input:focus::placeholder{opacity:0;transition:all 200ms linear;}
.search-input:focus{outline:none;box-shadow:none;background-color:#2a2b38;color:#ffeba7;}
.search-list{max-height:50vh;overflow-y:auto;margin-top:20px;width:100%;padding:0;list-style-type:none;}
.frist-btn{border-top-left-radius:10px;border-top-right-radius:10px;}
.last-btn{border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.tooltip{position:relative;display:inline-block;}
.tooltip .tooltiptext{visibility:visible!important;opacity:1!important;display:block!important;width:180px;background-color:#333;color:#fff;text-align:center;border-radius:5px;padding:5px 10px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translateX(-50%);font-size:12px;pointer-events:none;}
.btn{margin:0;}
.btn-jelly{animation:jelly 4.0s infinite;animation-delay:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards;animation-play-state:running;transition:right .3s ease;background-color:#469C28;color:#fff;width:80%;font-size:16px;font-weight:bold;text-align:left;}
@keyframes jelly{0%,100%{transform:scale(1);}25%{transform:scale(1.04);}50%{transform:scale(1);}75%{transform:scale(1.04);}}
#defaultContent img{width:48%;height:auto;margin-bottom:10px;}
#defaultContent{display:flex;flex-wrap:wrap;justify-content:space-between;}
.recommendation-btn-container{display:flex;flex-wrap:wrap;justify-content:space-between;}
.recommendation-btn{width:48%;margin-bottom:10px;display:flex;flex-direction:column;align-items:center;text-align:center;}
/* ---- Tooltip smooth fade-out ---- */
#tooltip{opacity: 1;visibility: visible !important;   /* 기존 !important 덮기 */transform: translateY(0);transition: opacity .6s ease, transform .6s ease;will-change: opacity, transform;}
/* 1단계: 페이드 중 (visibility는 유지) */
#tooltip.fade-out{opacity: 0;transform: translateY(-6px);}
/* 2단계: 애니메이션 끝난 뒤 완전 비활성 */
#tooltip.inert{visibility: hidden !important;pointer-events: none;}
.searchbar{display:flex; align-items:center; gap:10px;width:80%; margin:20px auto 8px;}
.sb-back{display:flex; align-items:center; justify-content:center;width:28px; height:28px; border:0; background:transparent; padding:0; cursor:pointer;}
.sb-field{position:relative;flex:1;border:2px solid #25c34f; border-radius:12px;padding:8px 12px; background:#fff;padding-right:88px;}
.sb-input{width:100%; border:0; outline:0; background:transparent;font-size:16px; line-height:22px; color:#222;}
.sb-input::placeholder{ color:#999; }
.sb-clear{position:absolute; right:48px; top:50%; transform:translateY(-50%);border:0; background:#eee; color:#666; cursor:pointer;width:22px; height:22px; border-radius:50%;display:flex; align-items:center; justify-content:center;font-size:14px; line-height:1;}
.sb-go{position:absolute; right:8px; top:50%; transform:translateY(-50%);width:34px; height:34px; border-radius:50%;border:0; cursor:pointer; background:#25c34f;display:flex; align-items:center; justify-content:center;}
.suggest-list{ list-style:none; margin:12px auto 0; padding:0; width:80%; }
.suggest-list li{  display:flex; align-items:center; justify-content:space-between;padding:12px 6px; border-bottom:1px solid #eee; cursor:pointer;}
.suggest-list li:active{ background:#fafafa; }
.sug-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.sug-pin{width:18px; height:18px; flex:0 0 18px; opacity:.7;background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s7-5.686 7-12a7 7 0 10-14 0c0 6.314 7 12 7 12z' stroke='%23999' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='%23999'/%3E%3C/svg%3E") center/contain no-repeat;}
.sug-title{font-size:15px; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sug-brand{display:flex; align-items:center; justify-content:space-between;padding:12px 6px; border-bottom:1px solid #eee;font-weight:700; color:#111;cursor:default; user-select:none;}
.sug-brand .sug-title{ font-size:15px; }
.sug-item{ cursor:pointer; }

/*  Safeean 상단 헤더 */
:root{ --ws-header-h:66px; }
.ws-header{position: sticky; top: 0; z-index: 900;background:#fff;border-bottom:1px solid #eee;box-shadow: 0 1px 6px rgba(0,0,0,.06);}
.ws-header__inner{max-width: 1200px;margin: 0 auto;height: var(--ws-header-h);display:flex; align-items:center; justify-content:space-between;padding: 0 14px;}
.ws-logo img{display:block; height:66px; width:auto;}
.ws-header__right{ display:flex; align-items:center; gap:8px; }
/* 버튼(마이페이지) */
.ws-btn{display:inline-flex; align-items:center; justify-content:center;height:34px; padding:0 12px; border-radius:8px;font-size:14px; font-weight:600; text-decoration:none !important;}
.ws-btn--ghost{color:#25c34f; border:1px solid #25c34f; background:#fff;}
.ws-btn--ghost:hover{ background:#f6fff9; }
@media (min-width:1024px){
  .ws-header__inner{ padding:0 20px; }
  .ws-logo img{ height:32px; }
}
.ws-header__right .ws-mypage-btn {display:inline-flex; align-items:center; justify-content:center;width:36px; height:36px; border-radius:50%;}
.ws-header__right .ws-mypage-btn img{display:block; width:100%; height:100%; border-radius:50%;}
.ws-header__right .ws-mypage-btn:hover img{box-shadow:0 0 0 3px rgba(59,222,124,.25);transform:scale(1.02);transition:all .2s ease;}


/* === WS Slider === */
.ws-slider{ position:relative; width:100%; max-width:100%; }
.ws-slider__viewport{
  overflow:hidden; border-radius:12px;
  /* 배너 비율(원하는 비율로 조정) */
  aspect-ratio: 16 / 6;
  background:#f7f7f7;
}
.ws-slider__track{
  display:flex; will-change:transform;
  transition: transform .5s ease-in-out;
}
.ws-slide{
  flex:0 0 100%;
  display:block; position:relative; user-select:none;
}
.ws-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 좌/우 네비게이션 */
.ws-slider__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; border-radius:9999px;
  background:#ffffffcc; backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  color:#111; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.ws-slider__nav:hover{ background:#fff; }
.ws-slider__prev{ left:10px; }
.ws-slider__next{ right:10px; }

/* 점(Dots) */
.ws-slider__dots{
  position:absolute; right:10px; bottom:10px; display:flex; gap:6px;
  background:transparent;
}
.ws-slider__dots button{
  width:8px; height:8px; border-radius:50%; border:0; cursor:pointer;
  background:#ffffffaa; box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.ws-slider__dots button[aria-current="true"]{ background:#111; }

/* 접근성: 포커스 */
.ws-slider__nav:focus-visible, .ws-slider__dots button:focus-visible{
  outline:2px solid #3bde7c; outline-offset:2px;
}

/* 드래그 중 커서 힌트(데스크톱) */
.ws-slider.grabbing { cursor:grabbing; }

/* viewport: 브라우저 가로 제스처 차단, 세로 스크롤은 허용 */
.ws-slider__viewport{
  overflow: hidden;
  touch-action: pan-y;       
  -ms-touch-action: pan-y;
  position: relative;
}

/* 트랙과 슬라이드: 가로 플렉스 + 한 장씩 100% */
.ws-slider__track{
  display: flex;
  width: 100%;
  transition: transform .35s ease;
  will-change: transform;
}

.ws-slide{
  flex: 0 0 100%;             /* ← 한 장 = viewport 너비 */
}

.ws-slide img{
  width: 100%;
  height: auto;
  pointer-events: none;       /* 드래그 중 이미지가 이벤트 가로채지 않게 */
  user-select: none;
  -webkit-user-drag: none;
}

.ws-slider.grabbing .ws-slider__track{ cursor: grabbing; }

/* 화살표 숨김을 유지하고 싶다면 */
.ws-slider__nav{ display:none !important; }