/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

.displaynone{ display:none; }

#sit_hhtml img,
#sit_thtml img { width:100%; height:auto; }

/* 상품상세 공유 부분 */

#shareDimmedLayer {
	display:none;
    position: fixed;
    top: 0px;
    left: 50%;
    width: 100%;
    max-width: 575px;
    height: 100%;
    transform: translateX(-50%);
    margin: 0px;
    padding: 0px;
    transition: background 0.2s;
    z-index: 9998;
    background: rgba(73, 80, 87, 0.7);
}

#shareDimmedLayer .share-layer {
    position: absolute;
    z-index: 9999;
    margin: 0px;
    padding-top: 16px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom:16px;
    width: 100%;
    background: rgb(255, 255, 255);
    left: 0px;
    bottom: 0;
    border-radius: 8px 8px 0px 0px;
    transition: transform 0.5s;
    transform: translateY(300px);
}

#shareDimmedLayer .share-layer.show {
  transform: translateY(0px);
}

#shareDimmedLayer .share-header {
    margin: 0px;
    padding: 0px;
    height: 44px;
    line-height: 44px;
    font-weight: 800;
    font-size: 17px;
    text-align: center;
    letter-spacing: -0.3px;
    color: #242729;
}

#shareDimmedLayer .share-options {
    padding-top: 0px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom:0;
}

#shareDimmedLayer .share-options li + li { border-top:1px solid #f5f6f8; }

#shareDimmedLayer .share-options button {
    width: 100%;
    height: 55px;
	border:0;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    text-align: left;
    color: #121212;
    background: transparent;
	gap:15px;
	font-size:16px;
}

#shareDimmedLayer .share-options button i { font-size:16px; }


/* 로고및 메뉴바에 잠시 나타나는거 */
/* ==================================================
   Blue Hint Bubble (Brand / Category)
   - 표시용(링크, 닫기 없음)
   - PC / Mobile 공통 노출
================================================== */

/* 헤더 기준 위치 */
.header .header-inner {
  position: relative;
}

/* 공통 말풍선 */
.brand-hint{
  position: absolute;
  display: inline-flex;
  align-items: center;
  z-index: 99;

  max-width: 260px;
  padding: 8px 12px;

  background: #e60000;
  color: #ffffff;

  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;

  white-space: nowrap;
  user-select: none;
}

/* 기본 꼬리 초기화 */
.brand-hint:after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:7px solid transparent;
}

/* ==================================================
   1️⃣ 로고 우측 말풍선 (화살표: 좌측)
================================================== */
.brand-hint--logo{
  left: 14px;   /* 로고 오른쪽 위치 (조절) */
  top: 60px;     /* 헤더 상단 기준 위치 (조절) */
  background:#000;
}

.brand-hint--logo:after{
  left:50%;   /* 말풍선 밖으로 */
  top:-14px;
  transform:translateX(-50%);
  border-bottom-color: #000; /* 좌측 화살표 */
}

/* ==================================================
   2️⃣ 모바일 메뉴 버튼 하단 말풍선 (화살표: 위)
================================================== */
.mobile-nav-trigger {
  position: relative; /* 기준점 */
}

.brand-hint--menu{
  right: 0;
  top: 44px;     /* 버튼 아래 */
  left: auto;
}

.brand-hint--menu:after{
  right: 14px;
  top: -14px;
  border-bottom-color: #e60000; /* 위쪽 화살표 */
}

/* ✅ 페이드 전환 */
.brand-hint{
  opacity: 1;
  transition: opacity 1s ease, transform 1s ease; 
  will-change: opacity, transform;
}

/* ✅ 사라질 때 */
.brand-hint.is-hide{
  opacity: 0;
  transform: translateY(6px); 
  pointer-events: none;
}


/* ================================
   Index 브랜드 섹션 말풍선 (상단 중앙 / 화살표 아래)
   - 배경: 검정(#000), 글자: 흰색(#fff)
================================ */

/* 말풍선 기준점(섹션 안에서 absolute 잡기) */
.section-m-tb .container.brand-hint-host{
  position: relative;
}

/* 상단 중앙 배치 */
.brand-hint--brand{
  left: 50%;
  top: -38px;                 /* 섹션 상단 */
  transform: translateX(-50%);
  background: #000;
  color:#fff;

  margin-top: 10px;       /* 섹션 상단과 살짝 띄우기(원하면 조절) */
}

/* 화살표: 아래쪽 */
.brand-hint--brand:after{
  left: 50%;
  bottom: -14px;          /* 말풍선 아래로 */
  transform: translateX(-50%);
  border-top-color: #000; /* 아래 화살표 색 */
}


/* ==================================================
   검색 오프캔버스 - 입력창 위 중앙 말풍선 (배경:검정/글자:흰색)
   - offcanvasSearch 안에서만 보임
================================================== */

#offcanvasSearch .search-contents{
  /*position: relative;*/ /* 말풍선 absolute 기준 */
}

/* 입력창 위 가운데 */
#offcanvasSearch .brand-hint--search{
  left: 50%;
  top: 20px;                 /* 검색창 위쪽 여백(필요시 조절) */
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  z-index:9;
  width:100%;
  max-width: 230px;
  word-break:keep-all;
  white-space: normal;       /* 문장 길면 줄바꿈 허용 */
  text-align: center;
}

/* 화살표: 아래쪽(입력창을 가리키게) */
#offcanvasSearch .brand-hint--search:after{
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  border-top-color: #000;
}



/* 상품상세 팝업 버튼 */

/* 상품상세 팝업 버튼 (모바일 기준) */
.shop-product .list-option-info{
  border-bottom:1px solid #EBEBEB;
  margin-bottom:24px;
}

.shop-product .option-info-title{
  font-size:15px;
  padding:20px 0 12px;
  font-weight:700;
}

/* 행 */
.shop-product .option-info-items{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #EBEBEB;
  padding:12px 0;
}


.shop-product .option-info-items .title{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ✅ 체크 아이콘 */
.shop-product .option-info-items .title i {
  font-size:20px;
  line-height:1;
  color:#e60000; 
  opacity:.95;
  flex:0 0 auto;
}


.shop-product .option-info-items .title .tit{
  display:inline-block;
  max-width: calc(100vw - 120px); /* 모바일에서 대충 안전한 폭 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 버튼 초기화(이 영역만) */
.shop-product .option-info-items button{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  padding:0;
}

/* info 버튼 */
.shop-product .info_btn{
  width:16px;
  height:16px;
  display:inline-block;
  margin-left:8px;          /* 글자 옆 간격 */
  vertical-align:middle;
  background:url('../image/icons/icon-exclamation-mark.svg') center/16px no-repeat;
  text-indent:-999em;
  overflow:hidden;
  opacity:.85;
  cursor:pointer;
}

.shop-product .info_btn:hover{ opacity:1; }
.shop-product .info_btn:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}

/* 오른쪽 text는 필요 없으면 숨김(원하면 다시 display:block) */
.shop-product .option-info-items .text{ display:none; }

.img-banner{margin:0 auto; padding-bottom:10px;}
.img-banner img{width:100%;height:auto;}

.modal.modal-bottom.modal-dialog-default .modal-footer{display: flex;padding: 25px;border-bottom-right-radius: 15px;border-bottom-left-radius: 15px;}


/* 모달 전체 높이 제한 + 내부 스크롤 */
.modal-dialog-default .modal-content{
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

/* 헤더를 위에 고정 */
.modal-dialog-default .modal-header{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;          /* 배경 없으면 내용이 비쳐서 지저분 */
  border-bottom: 1px solid #eee; /* 선택 */
}

/* body만 스크롤 */
.modal-dialog-default .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* 기존에 padding 0 주셨으니 유지 가능 */
.modal.modal-bottom.modal-dialog-default .modal-body{padding:0;}


.modal.modal-bottom{z-index: 1401;}
.modal-title{flex: 1 1 auto; min-width: 0; text-align: center;font-size: 30px;font-weight: 700;}
.modal-dialog-default .modal-header .btn-close{width: 25px;height: 25px;background-size: cover;padding: 0;flex: 0 0 auto;margin: 0;}
.modal-dialog-default .modal-header {border-bottom: none;padding: 25px;border-top-right-radius: 15px;border-top-left-radius: 15px;}
.modal-dialog-default-container{padding: 3px 13px 12px;}