.left_category_tab{
    position: absolute;
    top: 0;
    z-index: 10;
    width: 44px;
    border: 1px solid #e5e7eb;
    background: #fff;
    margin-top: 10px;
    display: block;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    overflow: hidden;
    padding: 4px 0;
}

/* ── left_fixed_tab — 현재 보이는 카테고리 active 상태 ── */
.left_category_tab .cat.active {
    background-color: var(--cat-accent, #f8b500);
    box-shadow: inset 4px 0 0 rgba(0,0,0,0.18);
    transform: scale(1.05);
}
.left_category_tab .cat.active::before {
    content: '';
    position: absolute;
    left: -4px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 24px;
    background: var(--cat-accent, #f8b500);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 8px var(--cat-accent, #f8b500);
}
.left_category_tab .cat.active::after {
    visibility: visible;
    opacity: 1;
    color: #fff;
    background-color: var(--cat-accent, #f8b500);
}
/* active 시 흰색 아이콘으로 교체 */
.left_category_tab .cat_01.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_01.png"); --cat-accent: #83be41; }
.left_category_tab .cat_02.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_02.png"); --cat-accent: #fbae17; }
.left_category_tab .cat_03.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_03.png"); --cat-accent: #1992df; }
.left_category_tab .cat_04.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_04.png"); --cat-accent: #7e57c2; }
.left_category_tab .cat_05.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_05.png"); --cat-accent: #e2583e; }
.left_category_tab .cat_06.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_06.png"); --cat-accent: #00aada; }
.left_category_tab .cat_07.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_07.png"); --cat-accent: #d22e60; }
.left_category_tab .cat_08.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_08.png"); --cat-accent: #9d7a6d; }
.left_category_tab .cat_09.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_09.png"); --cat-accent: #2b388f; }
.left_category_tab .cat_10.active { background-image: url("../mobile/shop/img/new_img/tab_icon_wh_10.png"); --cat-accent: #17d095; }


.fixed_tab{
    position: fixed;
    top: 50%;
    /* container(max 1170px) 좌측 가장자리 바로 바깥에 위치 — viewport 끝에 안 붙도록 */
    left: 30px;
    transform: translateY(-50%);
    margin-top: 0;
}

/* viewport 가 충분히 넓으면 (1400px↑) container 좌측 외곽 50px 위치로 동적 정렬 */
@media (min-width: 1400px){
    .fixed_tab{ left: calc((100vw - 1170px) / 2 - 50px); }
}

@media (max-width: 991px){
    .left_category_tab.fixed_tab{ display: none !important; }
}
.cat {
    width: 35px;
    height: 35px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease-in-out; /* 배경색에 트랜지션 설정 */
    position: relative; /* Add this line */

}
.cat::after {
    content: attr(data-text); /* Use an attribute for the text content */
    position: absolute;
    left: 100%; /* Position to the right of the icon */
    top: 0;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    padding: 7px;
    transition: visibility 0s, opacity 0.5s linear; /* Smooth transition for opacity */
    height: 35px;
    width: 180px;
    text-align: center;
    /* Further styling (padding, font, color, etc.) */
}

.cat:hover::after, .cat:hover {
    visibility: visible;
    opacity: 1; /* Show the text */
    color: white;
}

.cat_01{ background-image: url("../mobile/shop/img/new_img/tab_icon_01.png"); }
.cat_02{ background-image: url("../mobile/shop/img/new_img/tab_icon_02.png"); }
.cat_03{ background-image: url("../mobile/shop/img/new_img/tab_icon_03.png"); }
.cat_04{ background-image: url("../mobile/shop/img/new_img/tab_icon_04.png"); }
.cat_05{ background-image: url("../mobile/shop/img/new_img/tab_icon_05.png"); }
.cat_06{ background-image: url("../mobile/shop/img/new_img/tab_icon_06.png"); }
.cat_07{ background-image: url("../mobile/shop/img/new_img/tab_icon_07.png"); }
.cat_08{ background-image: url("../mobile/shop/img/new_img/tab_icon_08.png"); }
.cat_09{ background-image: url("../mobile/shop/img/new_img/tab_icon_09.png"); }
.cat_10{ background-image: url("../mobile/shop/img/new_img/tab_icon_10.png"); }


.cat_01:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_01.png");
    background-color: #83be41 ;
}
.cat_01:hover::after{
    background-color: #83be41 ;
}
.cat_02:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_02.png");
    background-color: #fbae17;
}
.cat_02:hover::after{
    background-color: #fbae17 ;
}
.cat_03:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_03.png");
    background-color: #1992df;
}
.cat_03:hover::after{
    background-color: #1992df ;
}
.cat_04:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_04.png");
    background-color: #7e57c2;
}
.cat_04:hover::after{
    background-color: #7e57c2 ;
}
.cat_05:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_05.png");
    background-color: #e2583e;
}
.cat_05:hover::after{
    background-color: #e2583e;
}
.cat_06:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_06.png");
    background-color: #00aada;
}
.cat_06:hover::after{
    background-color: #00aada ;
}
.cat_07:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_07.png");
    background-color: #d22e60;
}
.cat_07:hover::after{
    background-color: #d22e60 ;
}
.cat_08:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_08.png");
    background-color: #9d7a6d;
}
.cat_08:hover::after{
    background-color: #9d7a6d ;
}
.cat_09:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_09.png");
    background-color: #2b388f;
}
.cat_09:hover::after{
    background-color: #2b388f ;
}
.cat_10:hover{
    background-image: url("../mobile/shop/img/new_img/tab_icon_wh_10.png");
    background-color: #17d095;
}
.cat_10:hover::after{
    background-color: #17d095 ;
}
/*Fixed Category End*/


.left_category_area{
    float:left;
    margin: 20px 24px 20px 0;
    width: 16%;
    min-width: 150px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;                     /* 타이틀-더보기-키워드 사이 일관된 여백 */
}

/* ── 카테고리 타이틀 — 가시성 강화 (큰 폰트 + 아이콘 + accent bar) ── */
.left_category_area h2{
    position: relative;
    font-size: 22px;
    font-weight: 900;
    text-align: right;
    line-height: 1.25;
    word-break: keep-all;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    padding: 0 0 12px;
    width: 100%;
}
.left_category_area h2::after {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 48px; height: 4px;
    background: currentColor;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

@media (max-width: 768px) {
    .left_category_area h2 { font-size: 18px; padding-bottom: 10px; }
    .left_category_area h2::after { right: 50%; transform: translateX(50%); width: 40px; }
}

/* 카테고리 섹션 — 좌측 float 와 우측 product grid clearfix */
.top_border {
    overflow: hidden;          /* float clearfix */
}
.top_border::after {
    content: ''; display: block; clear: both;
}
.top_border .grid {
    overflow: hidden;          /* product grid 내부 정리 */
}

/* 좁은 화면 — 카테고리 column 위로, products 아래로 stack */
@media (max-width: 768px) {
    .left_category_area {
        float: none;
        width: 100%;
        margin: 10px 0;
        min-width: 0;
    }
    .left_category_area h2 {
        text-align: center;
        font-size: 1.3em;
    }
    .keyword-div { margin-top: 10px !important; }
}


/* ── 카테고리별 더보기 버튼 — 모던 다이나믹 (전 카테고리 통일 톤) ── */
.more_link_a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;       /* 우측 정렬 (좌측 카테고리 칼럼 안에서) */
    margin: 0;
    padding: 10px 22px;
    border-radius: 999px;
    background: #fff;
    color: #1f2937 !important;
    border: 1.5px solid #e5e7eb;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.2px;
    text-decoration: none !important;
    transition: all .2s cubic-bezier(.2,.6,.3,1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.more_link_a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cat-accent, #f8b500), color-mix(in srgb, var(--cat-accent, #f8b500) 70%, #000));
    opacity: 0;
    transition: opacity .2s ease;
    z-index: -1;
}
.more_link_a label {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cat-accent, #f8b500);
    color: #fff !important;
    font-weight: 900; font-size: 14px;
    transition: transform .2s ease;
    cursor: pointer;
}
.more_link_a:hover {
    color: #fff !important;
    border-color: var(--cat-accent, #f8b500);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.more_link_a:hover::before { opacity: 1; }
.more_link_a:hover label {
    background: rgba(255,255,255,0.95);
    color: var(--cat-accent, #f8b500) !important;
    transform: rotate(90deg) scale(1.1);
}
/* 카테고리별 액센트 색 — CSS variable 로 주입 */
#cat_0 .more_link_a { --cat-accent: #83be41; }
#cat_1 .more_link_a { --cat-accent: #fbae17; }
#cat_2 .more_link_a { --cat-accent: #1992df; }
#cat_3 .more_link_a { --cat-accent: #7e57c2; }
#cat_4 .more_link_a { --cat-accent: #e2583e; }
#cat_5 .more_link_a { --cat-accent: #00aada; }
#cat_6 .more_link_a { --cat-accent: #d22e60; }
#cat_7 .more_link_a { --cat-accent: #9d7a6d; }
#cat_8 .more_link_a { --cat-accent: #2b388f; }
#cat_9 .more_link_a { --cat-accent: #17d095; }

@media (max-width: 640px){
    .grid-item1, .grid-item2 , .grid-item3 {
        border: none;
    }

}


.color_1{ color: #83be41 !important;}
.color_2{ color:#fbae17 !important;}
.color_3{ color:#1992df !important;}
.color_4{ color:#7e57c2 !important;}
.color_5{ color:#e2583e !important;}
.color_6{ color:#00aada !important;}
.color_7{ color:#d22e60 !important;}
.color_8{ color:#9d7a6d !important;}
.color_9{ color:#2b388f !important;}
.color_10{ color:#17d095 !important;}


.bt-0 { border-top: 3px solid #83be41; }
.bt-1 { border-top: 3px solid #fbae17; }
.bt-2 { border-top: 3px solid #1992df; }
.bt-3 { border-top: 3px solid #7e57c2; }
.bt-4 { border-top: 3px solid #e2583e; }
.bt-5 {border-top: 3px solid #00aada; }
.bt-6 { border-top: 3px solid #d22e60; }
.bt-7 { border-top: 3px solid #9d7a6d; }
.bt-8 { border-top: 3px solid #2b388f; }
.bt-9 { border-top: 3px solid #17d095; }

.key_bg_0{ background-color: #83be41;}
.key_bg_1{ background-color:#fbae17;}
.key_bg_2{ background-color:#1992df;}
.key_bg_3{ background-color:#7e57c2;}
.key_bg_4{ background-color:#e2583e;}
.key_bg_5{ background-color:#00aada;}
.key_bg_6{ background-color:#d22e60;}
.key_bg_7{ background-color:#9d7a6d;}
.key_bg_8{ background-color:#2b388f;}
.key_bg_9{ background-color:#17d095;}


.key_bg{
    display: inline-block;
    padding: 6px 14px;
    color: white !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s ease, filter .2s ease;
    text-decoration: none !important;
    /* 텍스트 overflow 방지 */
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    box-sizing: border-box;
}
/* shimmer hover band */
.key_bg::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transition: left .55s ease;
    pointer-events: none;
}
.key_bg:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    filter: brightness(1.10);
    color: white !important;
}
.key_bg:hover::after { left: 100%; }

/* HOT 키워드 — staggered fade-in 진입 애니메이션 */
.keyword-ul li {
    opacity: 0;
    transform: translateY(8px);
    animation: kpKeyFadeIn 0.5s ease forwards;
}
.keyword-ul li:nth-child(1) { animation-delay: 0.05s; }
.keyword-ul li:nth-child(2) { animation-delay: 0.10s; }
.keyword-ul li:nth-child(3) { animation-delay: 0.15s; }
.keyword-ul li:nth-child(4) { animation-delay: 0.20s; }
.keyword-ul li:nth-child(5) { animation-delay: 0.25s; }
.keyword-ul li:nth-child(6) { animation-delay: 0.30s; }
.keyword-ul li:nth-child(7) { animation-delay: 0.35s; }
@keyframes kpKeyFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

.keyword-div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: center;
    width: 100%;
    margin-top: 28px;            /* 더보기 버튼과 키워드 사이 여백 */
    padding: 16px 14px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}
.keyword-div > .keyword-ul > p {
    margin: 0 0 6px !important;
    font-size: 14px !important;
    letter-spacing: 0.3px;
}
.keyword-div hr {
    margin: 6px 0 14px;
    border: 0;
    height: 2px;
    border-radius: 2px;
    opacity: 0.5;
}

.keyword-ul {
    list-style: none;
    padding: 0; /* 내부 패딩 제거 */
}

/* .keyword-ul 내부 li 요소에 대한 스타일 */
.keyword-ul li {
    margin: 10px 0;
    overflow: hidden;       /* 배지가 li를 넘어가지 않도록 */
    max-width: 100%;
    display: flex;
    justify-content: center;
}


.my-col-6 img{
    display: inline-block !important;
}



.blog_banner{
    background-color:white;
    background-size: cover;
}

.blog_logo_area{
    width: 100%;
    display: block;
}

.my-card{
    width: 29.5%;
    display: inline-grid;
    background-color: white;
    height: 380px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top:0 !important;

    border: 1px solid transparent; /* 초기에는 보더가 없음 */
    transition: border 0.3s, transform 0.3s; /* 보더와 변형에 대한 전환 효과 */

    /* 컨텐츠의 초기 스타일 */
    transform: scale(1); /* 초기에는 확대가 없음 */
    padding: 10px;
}

.my-card:hover {
    /* 마우스 호버 시의 스타일 변경 */
    border: 1px solid rgba(250, 195, 85, 0.62); /* 보더 추가 */
    transform: scale(1.05); /* 컨텐츠 확대 */
}

.my-card-img{
    height: 180px;
    width: 100%;
    text-align: center;
    margin: 15px 0 15px 0;
}

.my-card h2{
    text-align: left;
    font-size: 1.5em;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.my-card p {
    margin: 0 10px;
    color: gray;
}

.my-card a{
    margin: 20px;
}

.blog-title{
    font-size: 3em;
    padding: 10px 30px 0;
    letter-spacing: 2px;
    font-family: fantasy;

}

.blog-title span{
    color: #fac355;
    font-family: fantasy;
}

.blog-title span strong{
    font-size: 1.3em;
}


.bg-gray{
    background-color: #f7f7f7;
    padding: 20px;
}

.delivery-item-tag{
    /* 가시성 강화 — amber 그라데이션 pill (전 페이지 통일) */
    display: inline-block;
    background: linear-gradient(135deg, #fff8e6 0%, #fde68a 100%);
    color: #92400e;
    font-size: 12.5px;
    font-weight: 800;
    height: auto;
    line-height: 1.4;
    padding: 5px 14px;
    margin: 10px auto 6px;
    border: 1.5px solid #f8b500;
    border-radius: 999px;
    text-align: center;
    align-self: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 90% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(248, 181, 0, 0.15);
    text-shadow: none;
    -webkit-text-stroke: 0;
}

/* ════════════════════════════════════════════════════
   긴 브랜드명/상품명이 카드 컬럼 폭 밀지 않도록 — min-width 0 강제
   문제: CSS Grid 자식 default min-width:auto + flex 자식 default min-width:auto
         + nowrap 텍스트 → min-content = 텍스트 전체 폭 → 컬럼 확장 → 옆 카드와 겹침
   해결: grid 자식 + flex 자식 모두 min-width 0 으로
   ════════════════════════════════════════════════════ */

/* (1) Tailwind grid 자식 — 컬럼 폭 = 1fr 유지 */
[class*="grid-cols-"] > *,
.grid[class*="grid-cols"] > * {
    min-width: 0 !important;
}

/* (2) sct_div (grid item) — width 100% 강제로 컬럼 폭에 묶음 (자식 콘텐츠가 cell 밖으로 못 넘어가게) */
.sct_div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
}
.sct_div > a.delivery-items,
.sct_div .delivery-items {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* (3) flex column 자식들 — width 강제 + min-width:auto default 무력화 */
.sct_div .delivery-items > *,
.sct_div .delivery-items > p,
.sct_div .delivery-items > div {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* (4) delivery-item-tag — mx-6(좌우 24px) 무력화. 폭은 콘텐츠 기준(inline-block) + 가운데 정렬 */
.sct_div .delivery-items > p.delivery-item-tag {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 90% !important;
    padding: 4px 14px !important;
}
/* 부모 a/div가 inline-block 의 가운데 정렬을 보장하도록 — text-align center */
.sct_div .delivery-items {
    text-align: center;
}

/* ════════════════════════════════════════════════════
   인덱스 카드 가격 영역 — 할인/정상가 높이 통일 (min-height 60px)
   list.10 스킨과 동일한 톤으로 통일
   ════════════════════════════════════════════════════ */
.sct_div .delivery-items > .rec_price,
.sct_div .delivery-items p.rec_price {
    margin: auto 0 0 !important;        /* mx-6 등 좌우 마진 무력화 */
    padding: 10px 8px 8px !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.sct_div .delivery-items .rec_price > *,
.sct_div .delivery-items .rec_price .kp-price,
.sct_div .delivery-items .rec_price .kp-price-list,
.sct_div .delivery-items .rec_price .kp-price-final,
.sct_div .delivery-items .rec_price .kp-price-orig,
.sct_div .delivery-items .rec_price .kp-price-row-final,
.sct_div .delivery-items .rec_price .kp-price-quote-badge {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}
.sct_div .delivery-items .rec_price .kp-price-list {
    display: flex !important;
    align-items: center !important;
}

/* ── 인덱스 카드 가격 강조 — 작게 보이는 문제 해결 ── */
.sct_div .delivery-items .rec_price {
    font-size: 16px !important;
}
.sct_div .delivery-items .rec_price .kp-price-final {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    line-height: 1.25 !important;
}
.sct_div .delivery-items .rec_price .kp-price-orig {
    font-size: 13px !important;
    color: #9ca3af !important;
}
.sct_div .delivery-items .rec_price .kp-discount-badge {
    font-size: 14px !important;
    font-weight: 800 !important;
}
.sct_div .delivery-items .rec_price .kp-price-quote-badge {
    font-size: 13px !important;
    padding: 6px 14px !important;
}
.sct_div .delivery-items .rec_price .kp-price-row-final {
    gap: 8px !important;
}

/* ── 카테고리별 베스트 그리드 간격 (top_border 안의 grid) ── */
.top_border .grid {
    gap: 18px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
@media (max-width: 768px) {
    .top_border .grid { gap: 12px !important; }
}
@media (max-width: 480px) {
    .top_border .grid { gap: 10px !important; }
}

/**
마우스 효과 추가.
 */
/*.delivery-items:hover img {*/
/*    transform: scale(1); !* 확대 비율을 조정할 수 있습니다. *!*/
/*    transition: transform 0.3s ease; !* 스무스한 트랜지션 효과를 적용합니다. *!*/
/*}*/

/*.delivery-items:hover*/
/* {*/
/*    border: 1px solid #fac355; !* 보더 라인 스타일 및 색상을 지정합니다. *!*/
/*    transition: border-bottom 0.3s ease; !* 보더 라인의 변화를 부드럽게 만듭니다. *!*/
/*}*/


.my-nav-item{
    /*line-height: 0 !important;*/
}


.weekly_reco_container p.sub-p{
    text-align: center;
    color: #B0B0B0;
}

/* 상품명 — 3줄 고정 + 넘치면 ... (텍스트 길이 무관 일관 높이) */
.recommend_item_name{
    height: 60px;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 10px 0 4px;     /* 브랜드 pill 과 간격 확보 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: keep-all;
}
/* 카드 hover 시 상품명 amber 색 — 클릭 가능 인지 단서 */
.sct_div:hover .recommend_item_name,
.brand_item:hover .recommend_item_name { color: #b45309; }

/* 카드 내부 — 텍스트 영역 고정으로 hover 시 layout shift 방지 */
.sct_div .delivery-items,
.sct_div > a.delivery-items {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sct_div { height: 100%; }
/* ════════════════════════════════════════════════════
   인덱스 카드 — visual 을 .sct_div 로 이동 (장바구니/위시 버튼 sibling 가능하게)
   ════════════════════════════════════════════════════ */
.sct_div {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    cursor: pointer;
}
.sct_div:hover {
    border-color: #f8b500 !important;
    box-shadow: 0 8px 24px rgba(248, 181, 0, 0.25) !important;
}
/* .delivery-items 는 inner 링크로만 — border/bg/그림자 제거 */
.sct_div .delivery-items {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}
.sct_div .delivery-items:hover {
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* 장바구니 / 위시리스트 버튼 — 전 페이지 통일 */
.sct_div .kp-idx-actions {
    display: flex !important;
    gap: 6px !important;
    margin: 10px 0 0 !important;
    width: 100% !important;
    justify-content: center !important;
    position: relative;
    z-index: 5;
}
.sct_div .kp-idx-actions button,
.sct_div .kp-idx-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    max-width: 56px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: border-color .12s ease, color .12s ease, background .12s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.sct_div .kp-idx-actions .btn_cart:hover,
.sct_div .kp-idx-actions .kp-idx-btn-cart:hover {
    color: #16a34a !important; border-color: #16a34a !important; background: #f0fdf4 !important;
}
.sct_div .kp-idx-actions .btn_wish:hover,
.sct_div .kp-idx-actions .kp-idx-btn-wish:hover {
    color: #ef4444 !important; border-color: #ef4444 !important; background: #fef2f2 !important;
}
/* 그리드 컨테이너 — 첫 줄 호버 잘림 방지 */
.top_border > .grid,
[class*="grid-cols-"] { padding-top: 6px !important; padding-bottom: 6px !important; }

/* 가격 줄도 고정 영역 (할인있/없 길이 차이 흡수) */
.rec_price {
    min-height: 24px;
    line-height: 1.3;
    margin-top: auto !important;  /* 카드 하단 고정 */
}



.recommand_bd{
    border: 1px solid rgba(229,231,235);
    max-width: 46%;
    margin: 10px;
}



#blog_more_btn{
    margin-left:40px;
    margin-right: 40px;
    text-align: right;
    color: #B0B0B0;
    display: block;
    transition: color .15s ease, transform .15s ease, letter-spacing .15s ease;
    cursor: pointer;
}
#blog_more_btn:hover {
    color: #f8b500;
    transform: translateX(4px);
    letter-spacing: 1px;
    text-decoration: none;
}
#blog_more_btn:active {
    transform: translateX(2px);
}

@media (max-width: 1280px){
    .my-card {
        width: 28.5%;

    }

}


@media (max-width: 1023px){
    .my-card {
        width: 44%;

    }

    #blog-id-2{
        display: none;
    }

}




@media (max-width: 768px){
    .my-card {
        width: 46%;
        margin: 20px 10px;
    }

    #blog-id-2{
        display: none;
    }

    .main-banner-wrap{
        margin-top: 0;
    }

    .recommand_bd {
        max-width: 47%;
        margin: 3px;
    }
}

@media (max-width: 820px) {
    .my-card {
        width: 46%;
        margin: 20px 10px;
    }
    #blog-id-2{
        display: none;
    }
}


@media (max-width: 468px){
    .my-card {
        width: 100%;
        margin: 10px auto;
    }
    #blog-id-2{
        display: block;
    }
}

.now_img{
    width: 180px;
    height: 180px;
    max-width: 100%;
    object-fit: contain;
}

/* ══════════════════════════════════════════════
   모바일 인덱스 종합 픽스 — overflow·정렬·패딩
   ══════════════════════════════════════════════ */

/* 가로 스크롤: body 전체 금지 제거 — kp-qnav-strip 터치 스크롤 보장 */

@media (max-width: 768px) {

    /* 슬라이더 과도한 패딩 축소 (Tailwind p-12=48px → 16px) */
    .right_slider_border { padding: 12px !important; }
    .recommend_slider_container { overflow: hidden !important; }

    /* bxSlider 내부 이미지 넘침 방지 */
    .bx-wrapper { overflow: hidden !important; max-width: 100% !important; }
    .bxslider .r_slider_content { overflow: hidden !important; }
    .bxslider .r_slider_img  { max-width: 100% !important; height: auto !important; display: block; margin: 0 auto; }

    /* 상품 이미지 반응형 */
    .now_img {
        width: 100% !important;
        max-width: 140px !important;
        height: 140px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* 블로그 더보기 버튼 여백 축소 */
    #blog_more_btn { margin-left: 14px !important; margin-right: 14px !important; }

    /* 섹션 헤더 — 모바일에서 무조건 column + center
       (blog section의 flex-direction:row 전역 오염 방지) */
    .kp-section-head {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .kp-section-head-left {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .kp-section-eyebrow {
        display: inline-flex !important;
        margin: 0 auto 12px !important;
        max-width: 95% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .kp-section-title {
        font-size: 24px !important;
        text-align: center !important;
        word-break: keep-all;
    }
    .kp-section-sub {
        text-align: center !important;
        word-break: keep-all;
    }
    .kp-section-more {
        position: static !important;
        margin: 12px auto 0 !important;
        display: inline-flex !important;
    }

    /* my-card blog 박스 box-sizing 보완 */
    .my-card { box-sizing: border-box !important; max-width: 100%; }

    /* Tailwind container 패딩 축소 */
    .container { padding-left: 12px !important; padding-right: 12px !important; }

    /* kp-section-wrap overflow 차단 */
    .kp-section-wrap { overflow: hidden !important; }
}