/* ==========================================================================
  [insio Admin] customStyle 추가 css
  [초기작성 날짜] = 2025.06.02
  [마지막 업데이트 날짜] = 2025.06.02
  ※ 수정 시 코드 삭제 ✕ (주석 처리로 진행)
  
  ※ === 나머지 custom color는 core.css에서 확인 === ※
  ㄴ [insio Admin] Global CSS Color Variables 검색
  1) 주 컬러 : #051736
  2) 포인트 컬러: #E91E63
========================================================================== */

/* ==========================================================================
  기타
========================================================================== */
input.inputTxt-No{border: 0 !important; background: transparent !important;}
input.inputTxt-No2{border: 0 !important; background: transparent !important; font-size: 1.3rem !important; padding: 0.375rem 0 !important;}
input.inputTxt-No3{border: 0 !important; background: transparent !important; font-size: 1rem !important; padding: 0.375rem 0 !important;}
input.inputTxt-No2[disabled]{color: #064acb !important; font-weight: 500;}
input.inputTxt-No3[disabled]{color: #35609b !important; font-weight: 500;}

/* table 위에 버튼 정렬 */
#btn-wrap{display: flex; align-items: center; gap: 0.75rem;}

.w-min-120px{min-width: 120px !important;}

/* 미리보기 영역을 가로 정렬 (한 줄) */
#preview-area{flex-wrap: nowrap; gap: 10px; align-items: center; min-height: 100px;}

/* 미리보기 이미지 스타일 */
.preview-item{
  display: inline-block;
  width: 120px; height: 120px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.preview-item img{max-width: 100%; max-height: 100%}

/* 삭제 버튼 */
.remove-btn{
  position: absolute; top: 5px; right: 5px;
  background: red; color: white; border: none; cursor: pointer;
  font-size: 22px; width: 25px; height: 25px; line-height: 25px;
  text-align: center; border-radius: 50%;
}

/* ==========================================================================
  color 관련
========================================================================== */
.cl01{color: #051736 !important;}
.cl02{color: #E91E63 !important;}
.cl03{color: #444050 !important;}
.cl04{color: #b3b3b3 !important;}
.clbg01{background: #757575 !important;}
.clbg02{background-color: #b3b3b3 !important;}
.clbg03{background: #9e9e9e !important;}

.login-linl-color{color: var(--bs-accent-pink) !important; transition: color 0.2s ease;}
.login-linl-color:hover{
  color: color-mix(in sRGB, var(--bs-hover-accent-pink) 80%, var(--bs-base-color)) !important;
}

/* 상품 > 카테고리 관리 */
.hover-icon i:hover{background-color:#051736 !important;}
.hover-icon02 i:hover{background-color:#E91E63 !important;}
.hover-group-item{cursor: pointer;}
.hover-group-item:hover{background-color:#eeeeef;}  
.hover-group-item.active{background-color:#eeeeef;}

/* ==========================================================================
  border 관련
========================================================================== */
.border-line{border-bottom: 2px solid #051736;}
.border-top-2px{border-top: 2px solid #051736;}
.border-basics-b1px{border-bottom: 1px solid #051736;}
.border-righ-table{border-right: 1px solid #dfdfdf !important;}
.border-bottom-table{border-bottom: 1px solid #dfdfdf !important;}

/* ==========================================================================
  text 관련
========================================================================== */
.text-keep-all{word-break: keep-all !important;}

/* ==========================================================================
  login page
========================================================================== */
.login-shadow{box-shadow: none !important; background-color: transparent !important;}

/* ==========================================================================
  login page : input 관련(수정작업X)
========================================================================== */
/* ─── placeholder 스타일 지정───===== */
.login-page input.form-control{background-color: var(--input-bg) !important; transition: background-color 0.2s ease; border: 2px solid #FFF !important;}
.login-page input.form-control::placeholder{opacity: 1; background-color: transparent; font-size: 1rem !important;}
.login-page input.form-control:focus, .login-page input.form-control:not(:placeholder-shown){background-color: var(--input-bg) !important;}
.login-page input.form-control:invalid{background-color: var(--input-bg) !important; box-shadow: none !important;}
.login-page input.form-control:focus{box-shadow: 0 0.125rem 0.375rem 0 rgb(227 200 204) !important;}

/* ─── 자동완성 상태 대응 ─── */
.login-page input.form-control:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  background-color: var(--input-bg) !important;
  background-clip: border-box !important;
}

/* ─── 기본 배경 ─── */
.login-page input.form-control{
  background-color: var(--input-bg) !important;
  transition: background-color 0.2s ease;
}

/* ─── 입력값이 있는 경우에만 흰색으로 변경 ─── */
.login-page input.form-control:not(:placeholder-shown){background-color: var(--input-bg) !important;}


/* ==========================================================================
  aside 하단 고정부분
========================================================================== */
#layout-menu{height: 100%;}
.menu-scrollable-area{overflow-y: auto; flex-grow: 1;}
.user-fixed-label{
  font-weight: 600; padding: 17px 0;
  background-color: #f8f9fa;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}
.icon-base {font-size: 16px;}
.user-fixed-label .icon-base{color: #6c757d; transition: color 0.3s ease; cursor: pointer;}
.user-fixed-label .icon-base:hover{color: #051736; }

/* ==========================================================================
  M-navbar
========================================================================== */
#responsive-navbar{display: none;}
.fixed-top{position: fixed; top: 0; right: 0; left: 0; z-index: 1030;}
.nav-align-top .nav-tabs .nav-link.active{font-weight: 700;}

/* ==========================================================================
  반응형 info-box(반응형 table 대체)
========================================================================== */
.info-box{border-top:2px solid #adb5bd; border-bottom:1px solid #ced4da;}
.info-row{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border:none;}

.info-item-group{display:grid; grid-template-columns:auto 1fr; align-items:center;}
.info-item-group>.info-label,.info-item-group>.info-value{height:38px; padding:0.7rem; display:flex; align-items:center;}
.info-item-group>.info-label{white-space:nowrap; background-color:#f4f6f8; font-weight:600;}
.info-item-group>.info-value{min-width:0;}
.info-item-group>.info-value input:not([type=radio]):not([type=checkbox]), .info-item-group>.info-value select{width:100%;}
.info-row:not(:last-child) .info-item-group>.info-label, .info-row:not(:last-child) .info-item-group>.info-value{border-bottom:1px solid #ced4da;}
.info-row>.info-item-group.full-row{grid-column:1/3;}

.item-border-bottom{border-bottom:1px solid #ced4da!important;}
.zip-group>.info-label, .zip-group>.info-value{border-bottom: none !important;}
.info-item-group.zip-group>.info-value{display:flex; gap:0.5rem;}
.info-item-group.zip-group>.info-value input{flex:1 1 auto; width:auto !important;}
.info-item-group.zip-group>.info-value button{flex:0 0 auto;}

.btn-input-group{display:flex; width:100%;}
.btn-input-group input{flex:1 1 auto; min-width:0; width:auto!important;}
.btn-input-group .btn{flex-shrink:0; width:auto!important; white-space:nowrap; padding:0.375rem 0.9rem!important;}

.form-control.plain-input{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:0 !important; color:var(--bs-info);
}

/* 옵션설정 table */
.custom-th-bg th{background-color: #F5F5F5 !important; border: none; font-size: 0.9rem !important;}
.value-table-height{height: 100% !important;}
.option-th-4col{width: 19%;}

/* ─── editor-wrapper(textarea/) ─── */
.editor-box{border-top:2px solid #adb5bd;}
.editor-row{border-bottom:1px solid #e1e4ea;}
.editor-label{
  background:#f5f7fa; font-weight:600; text-align: center;
  border-left: 1px solid #e1e4ea; border-right: #e1e4ea;
}
.editor-value textarea{height:auto !important; min-height:280px;}

/* ─── info-box & editor-box 그룹 반응형 줄바꿈(절대 수정 및 삭제 X) ─── */
.info-label, .editor-label{white-space: normal; word-break: keep-all; border-right:1px solid #e1e4ea;}
.padding-3{padding-top: 2.5rem !important; padding-bottom: 2.5rem !important;}
.padding-4{padding-top: 3.2rem !important; padding-bottom: 3.2rem !important;}
.padding-5{padding-top: 3.7rem !important; padding-bottom: 3.7rem !important;}

/* ==========================================================================
  상품 > 카테고리 관리 prat
========================================================================== */
.ui-overflow-scroll{max-height: 500px; overflow-y: scroll;}
.borderR-x-none{
  --bs-list-group-border-radius: none !important;
  border-left-width: 0 !important; border-right-width: 0 !important;
  border-left-width: 0 !important; border-right-width: 0 !important;
}
.border-x-none{
  border-left: 0 !important; border-right: 0 !important; 
  padding-left: 1rem !important; padding-right: 1rem !important;
}

/* ==========================================================================
  상품 > 상품등록 > 이미지 등록 prat
========================================================================== */
.meta-area{display: none;}
.meta-area input{width: auto;}
#upload-area{width: 50px; height: 50px; background: #F5F5F5; cursor: pointer;}

/* ==========================================================================
  쇼핑몰 > 배너설정 prat
========================================================================== */
.banner-thumb{
  width: 80px; height: 50px; background-color: #f9f9f9; 
  border: 1px dashed #d8d8d8; border-radius: 4px; background-image: url(''); 
  background-size: cover; background-position: center;
}
.hover-icon03:hover{background-color: #ff4b4b !important;}

/* ─── 이미지 업로드 ─── */
.upload-dropbox{
  border: 2px dashed #dee2e6; border-radius: 0.5rem; 
  padding: 2.5rem 1rem; text-align: center; 
  position: relative; transition: background-color 0.2s;
}
.upload-dropbox:hover{background-color: #f8f9fa;}
.upload-dropbox input[type="file"]{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.upload-icon{
  display: inline-flex; align-items: center; justify-content: center; 
  background-color: #f1f3f5; border-radius: 0.5rem; 
  width: 40px; height: 40px; margin-bottom: 1rem;
}
.upload-icon svg{width: 20px; height: 20px; color: #6c757d;}

/* ─── 배너추가 btn ─── */
.banner-addBtn{width: 100%; border: 2px dashed #d7dadf; border-radius: 0.5rem;}
.add-banner-btn{
  display: block; width: 100%; 
  padding: 1.5rem 0; text-align: center; 
  color: #051736; font-weight: 500;
}
.banner-addBtn:hover{background-color: #d7dadf52; text-decoration: none;}
.banner-addBtn:hover .add-banner-btn{color: #051736 !important;}

/* ==========================================================================
  carousel tabs
========================================================================== */
/* ─── 캐러셀 공통 style ─── */
/* ─── 캐러셀 모드 ON ─── */ 
.tab-wrap{position: relative; overflow: hidden;} 
.tab-wrap.is-carousel .tab-track{
  display: flex; overflow-x: auto; overflow-y: hidden; 
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  flex-wrap: nowrap !important; gap: inherit; padding: 0 22px;
} 

.tab-wrap.is-carousel .tab-track::-webkit-scrollbar{height: 0;} 
.tab-wrap.is-carousel .tab-track>.nav-item{flex: 0 0 auto; scroll-snap-align: center;} 
.tab-wrap.is-carousel .tab-track .nav-link{display: inline-flex !important; align-items: center; justify-content: center; width: auto !important;} 
.tab-wrap.is-carousel .tab-track .tab-name{white-space: nowrap;} 


/* ─── 화살표 버튼(PC)  ─── */
.tab-prev,.tab-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.9); border: none; border-radius: 50%;
  width: 32px; height: 32px; display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.15); z-index: 2;
  display:none;
}
.tab-prev i,.tab-next i{pointer-events:none;}
.tab-prev{left: 4px;}
.tab-next{right: 4px;}
.tab-wrap.is-carousel .tab-prev, .tab-wrap.is-carousel .tab-next{display: flex; align-items: center; justify-content: center;}
.tab-prev:disabled,.tab-next:disabled{opacity: .35; cursor: default;}


/* 기본적으로 버튼 숨김 → 스와이프 유도 */
@media (pointer: coarse){
  .tab-wrap.is-carousel:not([data-mobile-arrows="true"]) .tab-prev,
  .tab-wrap.is-carousel:not([data-mobile-arrows="true"]) .tab-next{display:none;}
}

/* ─── 가장자리 페이드(모바일) ─── */
.tab-wrap.is-carousel::before,.tab-wrap.is-carousel::after{
  content: ""; position: absolute; top: 0; bottom: 0; 
  width: 22px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .18s;
  background:linear-gradient(to right, rgba(245,246,248,1), rgba(245,246,248,0));
}
.tab-wrap.is-carousel::after{right: 0; left: auto; transform: scaleX(-1);}
.tab-wrap.is-carousel.edge-left::before{opacity:1;}
.tab-wrap.is-carousel.edge-right::after{opacity:1;}




/* ==========================================================================
  ▶▶▶ 추가 반응형 css style
========================================================================== */
@media (max-width: 1199.98px) {
  /* ─── M-navbar ─── */
  #responsive-navbar{display: flex !important;}

  /* ─── aside 추가 커스텀 ─── */
  aside#layout-menu{
    left: auto !important; right: 0 !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  aside#layout-menu.layout-menu-expanded{transform: translateX(0);}
  .layout-menu-fixed.layout-menu-collapsed ~ .layout-page,
  .layout-menu-fixed:not(.layout-menu-collapsed) ~ .layout-page {
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

@media (max-width:991.98px){
  /* ─── info-box(반응형 table 대체) ─── */
  .info-row{grid-template-columns:1fr;} 
  .info-item-group>.info-label,.info-item-group>.info-value{border-bottom:1px solid #ced4da;} 
  .info-row:last-child>.info-item-group:last-child>.info-label,.info-row:last-child>.info-item-group:last-child>.info-value{border-bottom:none!important;}
  .item-border-top{border-top:none !important;}
  .column-h-260px{height: 260px !important;}

  .md-w-100{width: 100% !important;}
}

@media (min-width: 577px) {
  /* ─── width값 조절 ─── */
  .w-sm-auto{width: auto !important;}
}

@media (min-width: 576px) {
  /* ─── width값 조절 ─── */
  .w-sm-auto{width: auto !important;}
  .wrap-sm-block{margin-top: 0.25rem; width: 100%;}
}

@media (min-width: 576px) and (max-width: 576px) {
  .w-sm-576{max-width: 110px !important;}
}

@media(max-width:576px){
  /* ─── info-box(반응형 table 대체) ─── */
  .info-item-group.h-sm-auto{height:auto!important; align-items:start;}
  .info-item-group.h-sm-auto>.info-label, .info-item-group.h-sm-auto>.info-value{height:auto !important; padding:0.7rem !important; align-self:stretch;}
  .info-item-group .info-label{text-align: left;}

  .btn-input-group{display:flex; gap:0.5rem; flex-wrap:wrap;}
  .btn-input-group button:first-of-type{margin:0 !important;}
  .btn-input-group input{flex:1 1 100%; width:100% !important;}
  .btn-input-group .btn{flex:1 1 calc((100% - 6.5rem)/2); width:calc((100% - 6.5rem)/2) !important;}
  .sm-w-100{width: 100% !important;}

  .info-item-group.zip-group{height:auto!important; align-items:start;}
  .info-item-group.zip-group>.info-label, .info-item-group.zip-group>.info-value{height:auto !important; padding:0.7rem !important; align-self:stretch;}
  .info-item-group.zip-group>.info-value{display:flex !important;}
  .info-item-group.zip-group>.info-value input{flex:1 1 auto !important; min-width:0 !important; width:100% !important;}
  .info-item-group.zip-group>.info-value button{flex:1 1 auto!important;}

  .icon-lg-sm{
    block-size: var(--bs-icon-size-lg) !important;
    font-size: var(--bs-icon-size-lg) !important;
    inline-size: var(--bs-icon-size-lg) !important;
  }
}