body {
    font-family1: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-family: 'Pretendard', sans-serif;
    color: #222;
    line-height: 1.6;
    background1: #f9f9f9;
    background1: #f4f4f4;
}

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; color: inherit; }
img1 { width: 100%; height: 100%; object-fit: cover; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.weather-info {
    color: #444;
    font-weight: 500;
}

#air-quality {
    font-weight: bold;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 탑배너 내부에 배치될 경우 */
.top-banner .weather-info {
    margin-right: 20px;
}

/* --- TOP 배너 (42px 높이, 스크롤시 상단 고정) --- */
.top-banner {
    background1: url('../../img/main/banner-top.jpg') center center/cover;
    width: 100%;
    height: 42px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    overflow: hidden; /* 이미지가 넘치지 않게 처리 */
    display: none !important;
}

.top-banner img {
    width: 100% !important;     /* 가로를 무조건 꽉 채움 */
    height: 100% !important;    /* 세로를 컨테이너 높이에 맞춤 */
    object-fit: cover;          /* 비율 유지하며 꽉 채움 (background-size: cover와 동일) */
    object-position: center;    /* 이미지의 중심을 기준으로 정렬 */
    display: block;
}



/* --- 헤더 및 네비게이션 --- */
.top-header {
    background: white; padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-bottom: 1px solid #e5e5e5;
}
.top-header .container {
    max-width: 1200px; margin: 0 auto; padding1: 0 30px;
    display: flex; justify-content: space-between; align-items: center;
}
.logo { font-size: 36px; font-weight: bold; color: #3D8BD9; }

/* 1. 기본 adm-modi 속성 수정 */
.adm-modi {
    position: relative;
    display: block !important;
}
.adm-modi:hover { outline: 2px solid #ff4200; }

.main-product-wrap.adm-modi {
    width: 100%;
    /* 내부의 product-grid가 넘치지 않도록 강제 제어 */
    overflow1: hidden;
    position: relative;
}

.adm-edit-btn {
    position: absolute; bottom: 5px; right: 5px;
    background: rgba(255, 66, 0, 0.8); color: #fff;
    padding: 3px 8px; font-size: 11px; border-radius: 3px;
    z-index: 10; text-decoration: none; cursor: pointer;
}

.hidden { display: none !important}

/* 패널이 열렸을 때 html과 body에 적용할 클래스 */
.no-scroll {
    overflow: hidden !important;
    overflow-y: hidden !important;
    /* 스크롤바가 사라지면서 화면이 옆으로 튀는 현상을 방지하려면 아래 속성 추가 */
    height: 100% !important;
}

.search-area {
    flex: 1; max-width: 450px; margin: 0 30px; position: relative;
}

.search-area input {
    width: 100%; height: 45px; padding: 0 140px 0 20px;
    border: 1px solid #3D8BD9; border-radius: 25px; font-size: 18px;
    transition: all 0.3s;
}
.search-area input:focus {
    outline: none;
    border-color: #1B3F7E;
    box-shadow: 0 4px 12px rgba(61, 139, 217, 0.2);
}
.search-area button:not(.adm-edit-btn) {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;           /* ★ 크기 명시 */
    height: 38px;          /* ★ 크기 명시 */
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.44339 14.378C11.7226 14.3764 14.3796 11.7168 14.3779 8.43756C14.3763 5.15837 11.7167 2.50138 8.4375 2.50301C5.15831 2.50463 2.50132 5.16426 2.50294 8.44345C2.50457 11.7226 5.1642 14.3796 8.44339 14.378Z' stroke='%230071b7' stroke-width='1.5'/%3E%3Cpath d='M16.9623 18.0436C17.2552 18.3365 17.7301 18.3365 18.023 18.0436C18.3159 17.7507 18.3159 17.2758 18.023 16.9829L16.9623 18.0436ZM11.9623 13.0436L16.9623 18.0436L18.023 16.9829L13.023 11.9829L11.9623 13.0436Z' fill='%230071b7'/%3E%3C/svg%3E")
                center / 20px 20px no-repeat;
    background-color: transparent; /* ★ background1 오타 제거, 명시적 투명 */
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}
.search-area button:not(.adm-edit-btn):hover {  /* ★ '::' → ':' 수정 */
    background-color: rgba(0, 113, 183, 0.08);
    transform: translateY(-50%) scale(1.1);
}

#searchSubmit1 {
    flex-shrink: 0;
    width: 40px;
    height: 38px;
    background: url(data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.44339 14.378C11.7226 14.3764 14.3796 11.7168 14.3779 8.43756C14.3763 5.15837 11.7167 2.50138 8.4375 2.50301C5.15831 2.50463 2.50132 5.16426 2.50294 8.44345C2.50457 11.7226 5.1642 14.3796 8.44339 14.378Z' stroke='%23131518' stroke-width='1.5'/%3E%3Cpath d='M16.9623 18.0436C17.2552 18.3365 17.7301 18.3365 18.023 18.0436C18.3159 17.7507 18.3159 17.2758 18.023 16.9829L16.9623 18.0436ZM11.9623 13.0436L16.9623 18.0436L18.023 16.9829L13.023 11.9829L11.9623 13.0436Z' fill='%23131518'/%3E%3C/svg%3E) center / 20px 20px no-repeat;
    text-indent: -9999px;
    margin-right: 4px;
}

/* 검색 드롭다운 */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 450px;
    background: white;
    border: 1px solid #3D8BD9;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(61, 139, 217, 0.25);
    padding: 20px;
    display: none;
    z-index: 1000;
    max-height: 600px;
    overflow-y: auto;
}
.search-dropdown.active {
    width:75%;
    display: block;
    animation: slideDown 0.3s ease;
}



@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-section {
    margin-bottom: 20px;
}
.search-section:last-child {
    margin-bottom: 0;
}
.search-section h4 {
    font-size: 14px;
    font-weight: bold;
    color: #3D8BD9;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #B8D8E8;
}
.search-list {
    list-style: none;
}
.search-list li {
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}
.search-list li:hover {
    background: #E8F4F8;
    color: #3D8BD9;
    padding-left: 16px;
}
.search-list li::before {
    content: attr(data-number);
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #E8F4F8;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    font-weight: bold;
    color: #3D8BD9;
    flex-shrink: 0;
}
.search-list li:hover::before {
    background: #1B3F7E;
    color: white;
}


/* 날씨 위젯 - 검색바 우측 */
.weather-widget {
    height: 75px;
    background: #E8F4F8;
    padding: 8px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #B8D8E8;
    min-width: 180px;
}

.weather-widget .location {
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.weather-widget .temp {
    font-size: 13px;
    font-weight: bold;
    color: #3D8BD9;
}

.weather-widget .info {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}

.main-nav { height:41px; background: white; border-bottom: 2px solid #3D8BD9; }
.main-nav .container {
    max-width: 1200px; margin: 0 auto; padding1: 0 30px;
    display: flex; justify-content: space-between; align-items: center;
}


/* 기본 상태: 배경 화이트, 텍스트 블랙 */
.category-btn {
    width: 190px;
    background: #ffffff;
    color: #333333;
    padding: 9px 25px;
    margin-bottom:2px;
    letter-spacing: 1.5px;
    font-weight: bold;
    border1: 1px solid #e5e5e5; /* 하얀 배경과 구분하기 위한 테두리 */
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

/* 마우스 호버 효과 (선택사항) */
.category-btn:hover {
    background: #E8F4F8;
}

/* 클릭(활성화) 상태: 배경 블루, 텍스트 화이트 */
.category-btn.active {
    background: #3D8BD9;
    color: #ffffff;
    border-color: #3D8BD9;
}

.center-nav, .right-nav { display: flex; list-style: none; gap: 5px; }
.center-nav li a, .right-nav li a {
    display: block; padding: 8px 20px; font-weight: 600; color: #333;font-size: 16px;
}
.center-nav li a:hover, .right-nav li a:hover { color: #3D8BD9; background: #E8F4F8; }

/* 전체 카테고리 메가 메뉴 */
.mega-menu-wrapper {
    position: relative;
}

/* 고정될 때의 스타일 */
.mega-menu-wrapper.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 다른 요소보다 위에 보이도록 설정 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 고정 시 구분선 효과 */
    background: #fff; /* 배경색이 투명할 경우를 대비해 설정 */
}

/* (선택 사항) 고정 시 내부 레이아웃 조정이 필요하다면 추가 */
.mega-menu-wrapper.fixed .main-nav {
    /* 필요에 따라 높이나 패딩 조정 */
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 후 */
    width: calc(100% - 60px);   /* 컨테이너의 padding 30px * 2를 제외 */
    max-width: 1200px;          /* 1400px(컨테이너) - 60px(패딩) */

    background: white;
    border: 1px solid #3D8BD9; /* 테두리 강조 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 999;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}


.mega-menu.active {
    max-height: 500px;
    overflow-y: auto;
}

.mega-menu-content {
    width: 100%;
    max-width1: 1400px;
    margin: 0 auto ;
    padding: 10px 15px 12px 15px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 15px;
}

.mega-menu-content.personal {
  grid-template-columns: repeat(7, 1fr);
}

.mega-category {
    display: flex;
    flex-direction: column;
}

.mega-category-title {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    padding: 5px 5px;
    height: 42px;
    display: flex;
    justify-content: center;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
}
.mega-category-title.personal{
  margin-bottom: 0px;
  font-size: 11pt;
  height: 50px;
}

.mega-category-title:hover {
    background: #E8F4F8;
    color: #3D8BD9;
}

.mega-category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top1: 10px;
    padding-top1: 10px;
    border-top1: 2px solid #3D8BD9;
}

.mega-category-list li {
    font-size: 12px;
    color: #555;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-category-list li.personal {
    font-size: 10.5pt;
}

.mega-category-list li:hover {
    background: #E8F4F8;
    color: #3D8BD9;
    padding-left: 10px;
}

/* --- [Main Layout] Grid System --- */
.main-content {
    max-width: 1200px;
    margin: 15px auto;
    padding1: 0 30px;
    display: grid;
    grid-template-columns: 2.8fr 1fr;
    gap: 10px;
    align-items: stretch;
}

.grid-row2-col1 img,
.grid-row2-col2 img,
.grid-row3-col1 img,
.grid-row3-col2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Row 1 Styles --- */
.grid-row1-col1 { display: flex; gap: 10px; height: 300px; }
.left-banners { width: 300px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.side-banner1 { flex: 1; background: white; border-radius: 8px; overflow: hidden; }


/* 수정 후 */
.side-banner {
    height: 145px;
    flex: none; background: white; border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: all 0.3s ease;
    border1: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.side-banner:hover {
    transform: translateY(-5px);
    box-shadow1: 0 8px 20px rgba(61, 139, 217, 0.3);
    border-color: #3D8BD9;
}
.side-banner img {
    transition: transform 0.3s ease;
}
.side-banner:hover img {
    transform: scale(1.05);
}

.main-banner {
  width: 600px;  /* 명시적 너비 지정 */
  height: 300px;  /* 명시적 높이 지정 */
  margin: 0 auto;       /* 중앙 정렬 (필요시) */
  flex: none; background: white; border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.main-banner-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}
.main-banner-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    min-width: 600px;     /* 부모 너비와 동일하게 고정 */
    width: 600px;
    height: 300px;
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.main-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-banner-arrow {
    font-family: 'Arial', sans-serif !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: var(--basic-blue);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    line-height1: 1;  /* 추가 */
    padding-bottom:5px;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.main-banner-arrow:hover {
    background: rgb(12 115 218 / 90%);
    background1: rgb(109 173 238 / 90%);
    transform: translateY(-50%) scale(1.1);
}
.main-banner-arrow.prev { left: 35px; }
.main-banner-arrow.next { right: 35px; }

.main-banner-indicators {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}
.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid rgba(255, 255, 255, 0.8);
}
.indicator:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}
.indicator.active {
    background: #3D8BD9;
    border-color: white;
    transform: scale(1.3);
}

/* 플로팅 메뉴 */
/* 플로팅 버튼 공통 스타일 */
.floating-buttons .floating-btn {
    background: none !important;    /* 배경색 제거 */
    border: 1px solid #ddd;         /* 연한 테두리 (선택 사항) */
    color: #555 !important;         /* 아이콘/글자 색상 */
    box-shadow: none !important;    /* 그림자 제거 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 45px;                   /* 크기 조절 */
    height: 45px;
    font-size: 20px;               /* 아이콘 크기 */
}

/* 마우스 호버 시 효과 */
.floating-buttons .floating-btn:hover {
    color: #000 !important;
    border-color: #999;
}

/* 그리드 상품 */
.grid-row1-col2 { display: flex; flex-direction: column; gap: 10px; height: 300px; }
.login-box {
  width: 280px;  /* 명시적 너비 지정 */
  height: 145px;  /* 명시적 높이 지정 */
    flex: none;
    background: white; border: 0.5px solid #3D8BD9; border-radius: 8px;
    padding: 20px; display: flex; flex-direction: column; justify-content: center;
}
.login-inputs { display: flex; gap: 8px; margin-bottom: 10px; }
.login-inputs-left { width:70%; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.login-box input { padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.login-btn { width: 80px; background: var(--basic-blue); color: white; border: none; border-radius: 8px; cursor: pointer; }
.login-links { display: flex; justify-content: center; gap: 8px; font-size: 12px; color: #666; }


/* 로그인 박스 - 로그인 후 (통계 표시) */
.login-box.logged-in {
    width: 280px;
    height: 145px;
    background1: linear-gradient(135deg, #E8F4FC 0%, #F0F8FF 100%);
    border: 1.5px solid #aedcf3;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.member-welcome {
    text-align: center;
    margin: -2px 0px 8px 0px;
}

.member-name {
    font-size: 14px;
    font-weight: 700;
    color: #1B3F7E;
}

.member-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom1: 8px;
}

.stat-row {
    display: flex;
    gap: 10px;
    padding: 0px 5px;
}

.stat-item {
    flex: 1;
    background: #fcfcfc;
    border: 1px solid #B8D8E8;
    border-radius: 6px;
    padding: 4px 6px;
    transition: all 0.3s;
}

.stat-item:hover {
    border-color: #3D8BD9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(61, 139, 217, 0.15);
}

.stat-item a {
    display: flex;
    gap:10px;
    flex-direction: row;
    text-decoration: none;
    justify-content:center;
}

.stat-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 0px;
}

.stat-value {
    font-size: 12px;
    font-weight: 700;
    color: #3D8BD9;
}

.member-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top1: 1px solid #D0E8F2;
}

.btn-action {
    font-size: 12px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.btn-action:hover {
    color: #3D8BD9;
}

.member-actions .separator {
    color: #D0E8F2;
    font-size: 12px;
}


.quick-menu {
    width: 280px;  /* 명시적 너비 지정 */
    height: 65px;  /* 명시적 높이 지정 */
    flex: none;
    background: white; border1: 1.0px solid #aedcf3; border-radius: 8px;
    padding1: 12px; display: flex; flex-direction: column; justify-content: center;
}


.quick-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr);
    gap: 8px; height: 100%;
}
.quick-item {
    background: #E8F4F8; border-radius: 8px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer; border: 0.5px solid #B8D8E8;
}
.quick-item:hover { background: #E8F4F8; border-color: #3D8BD9; }
.quick-item .text { font-size: 9pt }
/* 인기 검색어 */
.popular-search {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom1: 40px;
    border : 0.5px solid #e5e5e5;
}

.popular-search h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #3D8BD9;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-tag {
    background: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.3s;
}

.search-tag:hover {
    background: #1B3F7E;
    color: white;
    border-color: #1B3F7E;
}

/* --- Row 2 Styles --- */
.grid-row2-col1 { width:910px; display: flex; flex-direction: column; gap: 10px; }
.grid-row2-col2 { display: flex; flex-direction: column; height: 100%; }
.info-tabs {
    background: white; border: 0.5px solid #3D8BD9; border-radius: 8px;
    padding: 20px; height: 100%; display: flex; flex-direction: column;
}
.tab-headers { display: flex; gap1: 8px; margin: 0 8px 15px 0; flex-shrink: 0; }
.tab-header {
    flex: 1; padding: 10px; background: white; border: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
    text-align: center; cursor: pointer;
    font-weight: bold; font-size: 13px; color: #666;
}
.tab-header.active { background: #3D8BD9; color: white; border-color: #3D8BD9; }
.tab-body-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.vertical-gallery { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; padding-right: 5px; }

.gallery-item {
    flex-shrink: 0; height: 180px; border-radius: 6px; overflow: hidden;
    background: #fafafa; border: 1px solid #f0f0f0;
    cursor: pointer; transition: all 0.3s ease;
    position: relative;
}

.gallery-item:hover {
    transform1: translateX(5px);
    border-color: #3D8BD9;
    box-shadow: 0 5px 15px rgba(61, 139, 217, 0.25);
}

.gallery-item img {
    transition: transform 0.3s ease;
}
.gallery-item:hover img {
    transform: scale(1.05);
}

.more-btn { width: 100%; padding: 12px; background: white; border: 1px solid #ddd; border-radius: 6px; color: #666; font-weight: bold; cursor: pointer; }

/* --- Common Product Section (Updated for Slider) --- */
.product-section {
    height:360px;
    background: white; border-radius: 12px; padding: 22px 24px;
    border: 1px solid #ddd;

    /* 2. 테두리 (아주 옅은 회색 라인으로 경계를 잡아줌) */
    border1: 1px solid rgba(0, 0, 0, 0.04); /* 또는 #e5e5e5 등 */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
}
.section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom1: 12px; border-bottom1: 1px solid #f5a453d4;
}
.section-header h3 { font-size: 22px; color: #3D8BD9; }
.section-tabs { display: flex; gap: 8px; }
.tab {
    padding: 6px 16px; border: 1px solid #ddd; border-radius: 16px; cursor: pointer;
    background: white; font-size: 13px; font-weight: 500; color: #666;
}
.tab.active { background: var(--basic-blue); color: white; border-color: #3D8BD9; }


/* 슬라이더 필수 CSS */
.product-slider-container {
    position: relative;
    overflow1: hidden;
    margin1: 0 40px;
}

.product-slider-arrow {
    font-family: 'Arial', sans-serif !important;
    position: absolute;
    top: 50%;
    padding-bottom: 3px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: #fff;
    background1: #dcedffc7;
    color: #777;
    border: solid 0.5px gray;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgb(154 171 189 / 30%);
}
.product-slider-arrow.prev { left: -17px; }
.product-slider-arrow.next { right: -17px; }


.product-grid {
    display: flex; /* grid에서 flex로 변경 */
    gap: 15px;
    overflow-x: hidden; /* 영역 밖 숨김 */
    scroll-behavior: smooth;
    width: 100%;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

/* 로딩 중 상품 리스트 처리 */
.product-grid.loading {
    filter: blur(2px); /* 약간의 블러 처리가 더 고급스럽습니다 */
    opacity: 0.5;
    pointer-events: none; /* 클릭 방지 */
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 부모의 유동적인 높이를 100% 수용 */
    display: none; /* 기본 숨김 */
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(255, 255, 255, 0.4); /* 배경을 살짝 불투명하게 */
}

/* 수정 후 */
.product-card {
  /* 1. 패딩이 제외된 내부 너비 기준, 정확히 5등분 (100% - 간격 60px) / 5 */
    flex: 0 0 calc((100% - 60px) / 5);

    /* 2. 섹션이 너무 커 보이는 것을 막기 위한 최대 너비 제한 */
    /* 860px(실제공간) / 5개 = 약 160~165px가 적당합니다 */
    max-width: 165px;
    min-width: 140px;

    flex-shrink: 0;
    background: white; border: 1.5px solid #e5e5e5; border-radius: 8px;
    overflow: hidden; cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* 오버라이드 스타일 */
.product-card.personal {
  background: transparent;
  border: 0px;
  border-radius: 0px;
}

.product-card:hover {
    transform1: translateY(-8px);
    border-color: #3D8BD9;
    box-shadow1: 0 12px 24px rgba(61, 139, 217, 0.3);
}
.product-card:hover::after {
    opacity: 1;
}

.product-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* 가로 세로 비율을 1:1로 고정 */
    height: auto;        /* 기존의 height: 140px를 무효화 */
    background1: #fafafa;
    transition: all 0.3s ease;
    position: relative;
}

.product-image.personal {
    border: 1px solid #ccc;
    overflow: hidden;       /* 확대 이미지가 밖으로 안 나가게 */
}


.product-card:hover .product-image.personal{
    filter1: brightness(0.7);
    border: 2px solid #3D8BD9;
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-image img {
    padding:10px;
    height : 100%;
    transition: transform 0.3s ease;
}

.product-image.personal img {
    padding: 0px;
}

.product-info { padding: 15px; text-align:center;}
.product-name {
    font-size: 14px; font-weight: bold; margin-bottom: 6px; height1: 40px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.product-name.personal { font-size: 16px; }

.product-manufacturer { font-size: 12px; color: #333; font-weight: 500; margin: 0 4px 4px 0; }
.product-unit { font-size: 12px; color: #777; font-weight: 500; margin-bottom: 4px; }
.product-unit.personal { font-size: 14px; }

.product-price {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.current-price {
    font-size: 14px;
    font-weight: bold;
    color1: #e74c3c;
}

/* 상품 액션 (수량 입력 + 담기 버튼) */
.product-actions {
    display: flex;
    gap: 5px;
    margin-top1: 10px;
    padding: 0 10px 10px;
}

.qty-input {
    width: 30px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    background: #fff;
}

.qty-input:focus {
    outline: none;
    border-color: #3D8BD9;
}

.add-cart-btn {
    flex: 1;
    height: 32px;
    background: #3D8BD9;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.add-cart-btn:hover {
    background: #1B3F7E;
}

.add-cart-btn:active {
    transform: scale(0.98);
}


.right-bottom-banner { width: 100%; height: 100%; border:1px solid #e5e5e5; border-radius: 8px; }
.right-bottom-banner img { width: 100%; height: 100%; border-radius: 8px; transition: transform 0.3s ease;}
.right-bottom-banner:hover img {
    transform: scale(1.05);
}
/* Footer */
.footer { background: #433433; color: #ccc; padding: 50px 0 30px; margin-top: 50px; }
.footer .container { max-width: 1200px; margin: 0 auto; padding: 0 0px; }
.footer p, .footer a { color:white }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 40px; }
.footer-bottom { border-top: 1px solid #555; padding-top: 25px; text-align: center; }
.footer h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
}

@media1 (max-width: 1200px) {
    .main-content { grid-template-columns: 1fr; }
    .product-card { min-width: calc((100% - 30px) / 5); } /* 태블릿에선 3개 */
}


/* ===== 우측 고정 플로팅 버튼 & 견적 패널 ===== */
.floating-buttons {
    position: fixed; right: 20px; top: 55%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 5px; z-index: 999;
    transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.floating-btn {
    position: relative; width: 60px; height: 60px; background: #3D8BD9; color: white;
    border: none; border-radius: 50%; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 11px; font-weight: bold; box-shadow: 0 4px 12px rgba(61, 139, 217, 0.4);
    transition: all 0.3s;
}
.floating-btn:hover {
    background: #1B3F7E; transform: scale(1.1); box-shadow: 0 6px 16px rgba(61, 139, 217, 0.6);
}
.floating-btn .icon { font-size: 24px; margin-bottom: 2px; color:white;}
.floating-btn.cart-btn { background: #4CAF50; }
.floating-btn.cart-btn:hover { background: #45a049; }
.floating-btn.top-btn { background: #598de5; }
.floating-btn.top-btn:hover { background: #1976D2; }
.quote-badge {
    position: absolute; top: -5px; right: -5px; background: #ff4444; color: white;
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: bold; border: 2px solid white;
}

/* 견적 패널 */
.quote-panel {
    position: fixed; right: -520px; top: 0; width: 500px; height: 100vh; background: white;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15); z-index: 999;
    transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex; flex-direction: column; overflow: hidden;
}
/* 견적 패널 전체 구조 수정 */
.quote-panel1 {
    position: fixed;
    right: -520px; /* 닫혔을 때 위치 */
    top: 50%; /* 세로 중앙 기준 */
    transform: translateY(-50%); /* 세로 중앙 정렬 */
    width: 500px;

    /* [수정] 높이를 브라우저의 80%로 고정 */
    height: 80vh;

    background: white;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px 0 0 12px; /* 왼쪽 모서리 라운드 처리 (박스 느낌) */
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.quote-panel.active { right: 0; }
.quote-panel-header {
    background: linear-gradient(135deg, #3D8BD9 0%, #1B3F7E 100%);
    color: white; padding: 4px; display: flex; justify-content: space-between;
    align-items: center; flex-shrink: 0;
}
.quote-panel-header h3 { font-size: 18px; font-weight: bold; }
.close-panel {
    background: rgba(255,255,255,0.2); border: none; color: white;
    width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center; transition: all 0.3s;
}
.close-panel:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }

/* 견적 패널 본문 영역 스크롤 활성화 */
.quote-content {
    flex: 1;
    overflow-y1: auto; /* 패널 내부에 데이터가 많을 경우 자체 스크롤 */
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}

/* 전체선택 바 스타일 */
.quote-all-select {
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.quote-all-select input {
    width: 18px;
    height: 18px;
    margin-left: 12px;
    cursor: pointer;
}

/* 패널 활성화 시 배경 스크롤 방지 클래스 */
body.panel-open {
    overflow: hidden;
}

/* 폼 높이 제어 */
#frmQuotePanel {
    display: flex;
    height: 100%;
    flex-direction: column;
    flex: 1;
    overflow: auto; /* 내부 content가 스크롤을 가짐 */
}


/* Chrome, Safari, Edge */
#frmQuotePanel::-webkit-scrollbar,
#frmQuotePanel::-webkit-scrollbar {
    display: none;
    width: 0;
}

/* Firefox */
#frmQuotePanel {
    scrollbar-width: none;
}

/* 견적 탭 래퍼 */
/* 견적 탭 래퍼 */
.quote-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-bottom: 2px solid #3D8BD9;
    padding: 0;
    flex-shrink: 0;
}

.quote-tabs {
    display: flex;
    flex: 1;
    padding: 0;
    border-bottom: none;
}

/* 견적 탭 */
.quote-tab {
    flex: 1;
    padding: 11px 8px;
    margin-bottom: -2px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    transition: all 0.3s;
    border-bottom1: 3px solid transparent;
    position: relative;
}

.quote-tab.active {
    color: #227eda;
    border-bottom-color: #3D8BD9;
    background: #cbf2ff;
    border-radius:12px 12px 0px 0px;
}

.quote-tab:hover:not(.active) {
    background: #f5f5f5;
    border-radius:12px 12px 0px 0px;
}

/* 탭 배지 */
.quote-tab-badge {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ff4444;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* 견적 이동 드롭다운 */
.quote-move-dropdown {
    position: relative;
    margin: 5px 10px;
}

.quote-move-btn {
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    transition: all 0.3s;
    white-space: nowrap;
}

.quote-move-btn:hover {
    background: #3D8BD9;
    color: white;
    border-color: #3D8BD9;
}

.quote-move-menu {
    position: absolute;
    top: calc(100% + 0px);
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    min-width: 120px;
    z-index: 100;
    overflow: hidden;
}

.quote-move-dropdown:hover .quote-move-menu {
    display: block;
}

.quote-move-item {
    display: block;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
}

.quote-move-item:last-child {
    border-bottom: none;
}

.quote-move-item:hover {
    background: #E8F4F8;
    color: #3D8BD9;
    padding-left: 20px;
}

/* 상품 아이템 - 4컬럼 그리드 */
.quote-items-list {
    padding: 0;
}

.quote-item {
    display: grid;
    grid-template-columns: 20px 1fr 100px 70px;
    gap: 8px;
    align-items: start;
    padding: 6px 12px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.quote-item:hover {
    border-color: #3D8BD9;
    box-shadow: 0 2px 8px rgba(61, 139, 217, 0.15);
    background: white;
}

/* 1열: 체크박스 */
.quote-item-col1 {
    display: flex;
    align-items: center;
    padding-top: 4px;
}

.quote-item-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3D8BD9;
}

/* 2열: 제품명/단위/옵션/수량조절 */
.quote-item-col2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* 텍스트 오버플로우 방지 */
}

.quote-item-name {
    font-weight: bold;
    font-size: 13px;
    color: #333;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quote-item-unit {
    font-size: 11px;
    color: #999;
}

.quote-item-options {
    font-size: 11px;
    color: #666;
    background1: #f0f0f0;
    padding1: 3px 6px;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space1: nowrap;
    white-space1: pre-wrap;
}

.quote-item-qty-control {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content:center;
    margin-top1: 4px;
}

.qty-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #666;
    font-weight: bold;
}

.qty-btn:hover {
    border-color: #3D8BD9;
    background: #E8F4F8;
    color: #3D8BD9;
}

.qty-input {
  width: 40px;
  height: 30px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-weight: bold;
  font-size: 12px;
  background: white;
}

.qty-input-s {
    width: 30px;
    height: 24px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    background: white;
}

.qty-modify1 {
    background: #666;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.qty-modify:hover {
    background: #444;
}

/* 3열: 단가/수량 정보 */
.quote-item-col3 {
    display: flex;
    flex-direction:column;
    grid-template-columns1: auto 1fr;
    gap1: 4px 6px;
    font-size: 11px;
    align-content1: start;
}

.price-label,
.qty-label {
    color: #999;
    font-size: 10px;
}

.price-value,
.qty-value {
    color: #333;
    font-weight: 600;
    text-align: right;
}

/* 4열: 합계/삭제 */
.quote-item-col4 {
    display: flex;
    flex-direction: column;
    gap1: 6px;
    align-items: flex-end;
}

.item-total {
    font-size: 14px;
    font-weight: bold;
    color: #3D8BD9;
    white-space: nowrap;
}

.item-delete {
    background1: #ff4444;
    color1: white;
    border: 0.5px solid #ccc;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.item-delete:hover {
    background: #cc0000;
    transform: scale(1.05);
}


/* 빈 견적함 */
.empty-quote {
    text-align: center;
    padding: 80px 20px;
    color: #999;
}

.empty-quote .icon {
    font-size: 60px;
    margin-bottom: 15px;
    opacity: 0.3;
}

.empty-quote p {
    font-size: 14px;
    line-height: 1.6;
}

/* 플로팅 버튼 배지 개선 */
.quote-badge {
    display: none; /* 기본적으로 숨김 */
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4444;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid white;
}

.quote-summary { background: #fff; color1: white; padding: 15px; margin1: 0 -15px; flex-shrink: 0; }
.summary-row { display: flex; justify-content: space-between; padding1: 8px 0; font-size: 14px; }
.summary-row.total {
    border-top: 1px solid #555; margin-top: 8px; padding-top: 12px;
    font-size: 16px; font-weight: bold;
}
.summary-row.total .amount { color: #3D8BD9; font-size: 20px; }


.quote-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 15px; background: white; flex-shrink: 0;
}
.quote-action-btn {
    padding: 12px; border: none; border-radius: 6px;
    font-weight: bold; font-size: 14px; cursor: pointer; transition: all 0.3s;
}
.quote-action-btn.primary { background: #333; color: white; }
.quote-action-btn.primary:hover { background: #000; }
.quote-action-btn.secondary { background: white; border: 2px solid #3D8BD9; color: #3D8BD9; }
.quote-action-btn.secondary:hover { background: #3D8BD9; color: white; }
.quote-action-btn.edufine { background: white; border: 2px solid #e91e63; color: #e91e63; }
.quote-action-btn.edufine:hover { background: #e91e63; color: white; }
.quote-action-btn.estimate { background: white; border: 2px solid #4CAF50; color: #4CAF50; }
.quote-action-btn.estimate:hover { background: #4CAF50; color: white; }
.quote-footer {
    background: #f5f5f5; padding: 15px; border-top: 1px solid #e5e5e5; flex-shrink: 0;
}
.quote-footer h4 { color: #3D8BD9; font-size: 16px; margin-bottom: 10px; }
.quote-footer p { font-size: 13px; color: #666; line-height: 1.6; margin: 5px 0; }
.quote-footer .phone { font-size: 18px; font-weight: bold; color: #333; margin: 10px 0; }
.panel-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(0,0,0,0.5); z-index: 998; opacity: 0; visibility: hidden;
    transition: all 0.3s;
}
.panel-overlay.active { opacity: 1; visibility: visible; }
.empty-quote1 { text-align: center; padding: 60px 20px; color: #999; }
.empty-quote1 .icon { font-size: 60px; margin-bottom: 15px; opacity: 0.3; }
.empty-quote1 p { font-size: 14px; line-height: 1.6; }


/* ============================================================
   검색 자동완성 드롭다운  (.search-autocomplete)
   기존 .search-dropdown 스타일 상속 + 자동완성 전용 오버라이드
   ============================================================ */

/* 자동완성 패널 위치 — 기본 드롭다운과 동일 위치 */
.search-autocomplete {
    padding: 8px 0;
}

/* 자동완성 리스트 */
.ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 각 자동완성 항목 */
.ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s;
    color: #333;
    position: relative;
}
.ac-item:first-child  { border-radius: 10px 10px 0 0; }
.ac-item:last-child   { border-radius: 0 0 10px 10px; }
.ac-item:only-child   { border-radius: 10px; }
.ac-item:hover        { background: #f0f7ff; }

/* 왼쪽 검색 아이콘 */
.ac-icon {
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
}

/* 중앙 상품명 — 남은 공간 차지 */
.ac-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 16px;
}

/* 입력 키워드 강조 */
.ac-text strong {
    font-weight: 700;
    color: #1a1a1a;
}

.ac-arrow {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: none;
    background: #e8f0fb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: #3D8BD9;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
    /* transform, opacity 제거 */
}
.ac-item:hover .ac-arrow {
    background: #3D8BD9;
    color: #fff;
}
.ac-arrow:hover {
    background: #1B3F7E !important;
    color: #fff;
}


/* 자동완성 키보드 포커스 항목 */
.ac-item.ac-focused {
    background: #e6f0ff;
}
.ac-item.ac-focused .ac-arrow {
    background: #3D8BD9;
    color: #fff;
}

#searchClear {
    position: absolute;
    right: 45px;        /* 검색 버튼 너비만큼 안쪽 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
#searchClear:hover {
    background: #f0f0f0;
    color: #555;
}

/* ── 품절 장바구니 섹션 ── */
.soldout-cart-section {
    margin-top: 30px;
    border1: 1px dashed #e0a0a0;
    border-radius: 8px;
    padding: 15px 0px;
    background1: #fff8f8;
}
.soldout-cart-title {
    font-size: 12px;
    font-weight: bold;
    color: #707070;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.soldout-cart-title small {
    font-size: 12px;
    color: #888;
    font-weight: normal;
}
.ic-soldout {
    background: #e53935;
    color: #fff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
}
/* 품절 테이블 - 흐릿하게 */
.soldout-tbl table { opacity: 0.72; }
.soldout-row td { background: #fafafa; }

/* 품절 이미지 - 그레이 오버레이 */
.soldout-img-wrap {
    position: relative;
    display: inline-block;
}
.soldout-img-wrap::after {
    content: 'SOLD OUT';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    letter-spacing: 1px;
}
.badge-soldout {
    display: inline-block;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
}
.soldout-name a { color: #999; text-decoration: line-through; }
.soldout-name .soldout-label {
    display: block;
    font-size: 11px;
    color: #e53935;
    margin-top: 4px;
}

/* ── 견적 패널 품절 상품 ── */
.quote-item--soldout {
    opacity: 0.6;
    background: #fafafa;
    position: relative;
}
.quote-item--soldout::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 6px,
        rgba(200,200,200,0.12) 6px, rgba(200,200,200,0.12) 7px
    );
    pointer-events: none;
}
.panel-soldout-badge {
    display: inline-block;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
}
.panel-soldout-chk {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #e53935;
    font-weight: bold;
    font-size: 14px;
}
.qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 이미지 로드 실패 시 회색 플레이스홀더 */
.bcs-img-wrap.bcs-img-missing {
    background: #e5e7eb;
    position: relative;
}
.bcs-img-wrap.bcs-img-missing::after {
    content: 'IMG';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
}