/* 모바일 탭 시 파란 하이라이트 박스 제거 */
        *, .bgcopy *::before, .bgcopy *::after{ -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }
.bgcopy a, .bgcopy button, .bgcopy [role="button"], .bgcopy [onclick], .bgcopy input, .bgcopy select, .bgcopy textarea, .bgcopy label{
            -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        }
.bgcopy /* 강제 다크모드 차단 — 자사몰은 라이트 전용 (크롬 auto-dark·삼성 강제다크 대응) */
        html{ color-scheme: light; background: #ffffff; }
.bgcopy{ color-scheme: light; }
@media (prefers-color-scheme: dark){.bgcopy, .bgcopy{ background: #ffffff !important; color: #111111 !important; color-scheme: light !important; }}
.bgcopy *, .bgcopy *::before, .bgcopy *::after{ box-sizing: border-box; margin: 0; padding: 0; }
.bgcopy{
            --bg: #ffffff;
            --surface: #f7f7f7;
            --surface2: #eeeeee;
            --border: #e5e5e5;
            --text: #111111;
            --text-muted: #999999;
            --text-dim: #cccccc;
            --brand: #FFDE59;
            --white: #ffffff;
        }
.bgcopy{ scroll-behavior: smooth; overflow-x: hidden; }
.bgcopy{
            background: var(--bg);
            color: var(--text);
            font-family: "Pretendard Variable", Pretendard, "Montserrat", sans-serif;
            font-size: 14px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }
.bgcopy .en{ font-family: "Montserrat", sans-serif; }
.bgcopy a{ color: inherit; text-decoration: none; }
.bgcopy img{ display: block; max-width: 100%; }
.bgcopy button{ cursor: pointer; border: none; background: none; font-family: inherit; }
.bgcopy /* ── NOTICE BAR ── */
        .notice-bar{
            background: #fffbdd;
            border-bottom: 1px solid #f0e88a;
            text-align: center;
            padding: 10px 20px;
            font-size: 11px;
            font-weight: 600;
            color: #555;
            letter-spacing: 0.08em;
        }
.bgcopy .notice-bar em{ color: #9a7c00; font-style: normal; font-weight: 800; }
.bgcopy /* ── HEADER ── */
        .site-header{
            position: sticky;
            top: 0;
            z-index: 200;
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
        }
.bgcopy .header-top{
            max-width: 1480px;
            margin: 0 auto;
            padding: 0 24px;
            height: 56px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 16px;
        }
.bgcopy .header-logo{ display: flex; align-items: center; flex-shrink: 0; }
.bgcopy .header-logo img{ height: 26px; filter: brightness(0); }
.bgcopy .header-gnb{
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: auto;
            scrollbar-width: none;
        }
.bgcopy .header-gnb::-webkit-scrollbar{ display: none; }
.bgcopy .header-gnb a{
            font-size: 13px;
            font-weight: 600;
            color: #555;
            padding: 8px 14px;
            white-space: nowrap;
            transition: color 0.18s;
            flex-shrink: 0;
        }
.bgcopy .header-gnb a:hover, .bgcopy .header-gnb a.is-active{ color: #111; }
.bgcopy .header-gnb .gnb-divider{ width: 1px; height: 12px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
.bgcopy .header-gnb .gnb-season{ color: #f59e0b; font-weight: 700; }
.bgcopy .header-gnb .gnb-special{ color: #e63946; font-weight: 700; }
.bgcopy .header-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bgcopy .header-actions .icon-btn{
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            color: var(--text-muted);
            font-size: 15px;
            transition: color 0.2s, background 0.2s;
        }
.bgcopy .header-actions .icon-btn:hover{ color: #111; background: var(--surface); }
.bgcopy .header-actions .cart-btn{ position: relative; }
.bgcopy .cart-count:empty, .bgcopy .cart-count[data-empty="1"]{ display: none !important; }
.bgcopy .cart-count{
            position: absolute;
            top: 2px; right: 2px;
            width: 14px; height: 14px;
            background: #111;
            color: #fff;
            font-size: 8px;
            font-weight: 900;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }
.bgcopy .btn-login-header{
            font-family: "Montserrat", sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            padding: 7px 14px;
            border: 1px solid var(--border);
            border-radius: 4px;
            transition: all 0.2s;
            text-transform: uppercase;
        }
.bgcopy .btn-login-header:hover{ color: #111; border-color: #999; }
.bgcopy /* ── 햄버거 + 모바일 메뉴 (메인과 동일) ── */
        .hamburger-btn{
            display: none;
            width: 36px; height: 36px;
            align-items: center; justify-content: center;
            border-radius: 50%; color: var(--text-muted);
            font-size: 15px; transition: color 0.2s, background 0.2s;
            background: none; border: none; cursor: pointer;
        }
.bgcopy .hamburger-btn:hover{ color: #111; background: var(--surface); }
.bgcopy .mobile-menu-overlay{
            position: fixed; inset: 0; z-index: 400;
            background: rgba(0,0,0,0.38);
            visibility: hidden; opacity: 0; pointer-events: none;
            transition: opacity 0.28s ease, visibility 0s linear 0.28s;
            /* 🚧 닫힌 메뉴 패널이 문서 폭을 늘려 앱에서 화면이 밀리던 문제 — 잘라냄 */
            overflow: hidden;
        }
.bgcopy .mobile-menu-overlay.open{
            visibility: visible; opacity: 1; pointer-events: auto;
            transition: opacity 0.28s ease, visibility 0s linear 0s;
        }
.bgcopy .mobile-menu-panel{
            position: absolute; top: 0; right: 0; bottom: 0; width: 285px;
            background: #fff; display: flex; flex-direction: column;
            overflow: hidden; transform: translateX(100%);
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: -6px 0 28px rgba(0,0,0,0.13);
            will-change: transform;
        }
.bgcopy .mobile-menu-overlay.open .mobile-menu-panel{ transform: translateX(0); }
.bgcopy .mm-top{
            display: flex; align-items: center; justify-content: space-between;
            padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
        }
.bgcopy .mm-user-name{ font-size: 15px; font-weight: 800; color: #111; }
.bgcopy .mm-user-sub{ font-size: 11px; font-weight: 600; color: #bbb; margin-top: 2px; }
.bgcopy .mm-close{
            width: 32px; height: 32px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #aaa; font-size: 17px; transition: background 0.15s;
            background: none; border: none; cursor: pointer;
        }
.bgcopy .mm-close:hover{ background: var(--surface); color: #111; }
.bgcopy .mm-nav{ padding: 10px 12px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.bgcopy .mm-nav a{
            display: block; padding: 10px 8px; font-size: 14px; font-weight: 700;
            color: #333; border-radius: 8px; transition: background 0.15s, color 0.15s;
            text-decoration: none;
        }
.bgcopy .mm-nav a:hover, .bgcopy .mm-nav a.is-active{ background: var(--surface); color: #111; }
.bgcopy .mm-nav a.mm-season{ color: #f59e0b; }
.bgcopy .mm-nav a.mm-special{ color: #e63946; }
.bgcopy .mm-nav hr{ border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.bgcopy .mm-bottom{ padding: 14px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; background: #fff; box-shadow: 0 -6px 16px rgba(0,0,0,0.06); }
.bgcopy .mm-btn{
            width: 100%; padding: 12px 16px; border-radius: 8px;
            font-size: 13px; font-weight: 700; display: flex; align-items: center;
            gap: 10px; transition: background 0.15s; text-decoration: none; border: none;
            font-family: inherit; cursor: pointer;
        }
.bgcopy .mm-btn-mypage{ background: var(--surface); color: #333; }
.bgcopy .mm-btn-logout{ background: #fef2f2; color: #dc2626; border: 1.5px solid #f87171; font-weight: 800; }
.bgcopy .mm-btn-logout:hover{ background: #fee2e2; }
.bgcopy .mm-btn-logout:active{ background: #fecaca; }
.bgcopy /* ── CATEGORY HERO ── */
        .cat-hero{
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 40px 0 36px;
        }
.bgcopy .cat-hero-inner{
            max-width: 1480px;
            margin: 0 auto;
            padding: 0 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
        }
.bgcopy .cat-hero-breadcrumb{
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            margin-bottom: 14px;
        }
.bgcopy .cat-hero-breadcrumb a:hover{ color: #111; }
.bgcopy .cat-hero-breadcrumb i{ font-size: 9px; }
.bgcopy .cat-hero-title{
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #111;
        }
.bgcopy .cat-hero-count{
            font-family: "Montserrat", sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            margin-top: 6px;
        }
.bgcopy .cat-hero-count span{ color: #111; font-weight: 900; }
.bgcopy /* 공통헤더는 #mall-header-root 래퍼 안에 있어 sticky가 래퍼 높이에 갇혀
           스크롤하면 떠내려가 사라진다. 그래서 카테고리 바는 헤더에 의존하지 않고
           화면 최상단(top:0)에 직접 고정한다 → 갭 없이 항상 맨 위에 붙음. */
        .cat-hero-icons-wrap{
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 6px 14px rgba(0,0,0,0.06);   /* 스크롤되는 내용물과 구분 */
            position: sticky;
            top: 0;
            z-index: 210;   /* 헤더(200)보다 위 — 혹시 겹쳐도 바가 보이게 */
        }
.bgcopy .cat-hero-icons{
            display: flex;
            gap: 10px;
            max-width: 1480px;
            margin: 0 auto;
            padding: 12px 32px;
            overflow-x: auto;
            scrollbar-width: none;
        }
.bgcopy .cat-hero-icons::-webkit-scrollbar{ display: none; }
.bgcopy .cat-hero-icon-btn{
            display: flex;
            flex-direction: column;
            align-items: center;
            /* ⚠️ 실사 아이콘(has-photo)은 이미지 88px 가 박스 76px 밖으로 위아래 6px씩
                  삐져나온다(overflow:visible). flex 는 '박스'만 기준으로 잡아서
                  gap 이 작으면 세로로 꽉 찬 이미지가 라벨에 닿아버린다.
                  → 넘치는 6px 을 감안해 gap 을 넉넉히 준다.
                  (메인페이지 .quick-cat-item 과 같은 이유·같은 규칙, 2026-08-27) */
            gap: 26px;
            padding: 12px 16px 14px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.18s, transform 0.18s;
            text-decoration: none;
            min-width: 96px;
        }
.bgcopy .cat-hero-icon-btn:hover{ background: #f0f0f0; transform: translateY(-2px); }
.bgcopy .cat-hero-icon-btn.is-active{ background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid #e5e5e5; }
.bgcopy .cat-hero-icon-btn .icon{
            width: 76px; height: 76px;
            border-radius: 22px;
            background: #e8e8e8;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px;
            color: #555;
            transition: background 0.18s, color 0.18s;
            overflow: hidden;
        }
.bgcopy .cat-hero-icon-btn .icon img{ width: 54px; height: 54px; object-fit: contain; }
.bgcopy .cat-hero-icon-btn.is-active .icon{ background: transparent; color: #000; }
.bgcopy /* 메인페이지처럼 실사 썸네일(투명 3D 컷아웃) — 배경 없애고 크게 띄움 */
        .cat-hero-icon-btn .icon.has-photo{ background: transparent !important; overflow: visible; }
.bgcopy .cat-hero-icon-btn .icon.has-photo img{ width: 88px; height: 88px; }
.bgcopy .cat-hero-icon-btn:hover .icon.has-photo img{ transform: scale(1.1); transition: transform 0.18s; }
.bgcopy .cat-hero-icon-btn .label{
            font-size: 12px;
            font-weight: 700;
            color: #555;
            white-space: nowrap;
            letter-spacing: -0.02em;
        }
.bgcopy .cat-hero-icon-btn.is-active .label{ color: #e63946; font-weight: 800; }
 /* ── MOBILE: 모든 영역 컴팩트 정리 ── */
        @media (max-width: 768px){
            /* 공지 띠: 숨김 (메인페이지와 통일) */
            .bgcopy .notice-bar { display: none; }
            /* 헤더: 메인 페이지와 동일하게 */
            .bgcopy .header-top {
                padding: 0 7px 0 14px;
                height: 52px;
                gap: 8px;
            }
            .bgcopy .header-logo img { height: 22px; }
            .bgcopy .header-gnb { display: none; }
            .bgcopy .header-actions { gap: 2px; }
            .bgcopy .header-actions .icon-btn { width: 38px; height: 38px; font-size: 16px; }
            .bgcopy .header-actions [title="위시리스트"] { display: none !important; }
            .bgcopy .btn-login-header { display: none !important; }
            .bgcopy .hamburger-btn { display: flex !important; width: 38px; height: 38px; font-size: 16px; margin-left: -4px; margin-right: -4px; }
            .bgcopy .cart-count {
                top: 4px; right: 4px;
            }
            .bgcopy .cart-count:empty,.bgcopy .cart-count[data-empty="1"] { display: none; }
            /* 카테고리 히어로: 축소 */
            .bgcopy .cat-hero {
                padding: 18px 0 0;
                overflow: visible;
                border-bottom: none;
            }
            .bgcopy .cat-hero-inner {
                padding: 0;
                gap: 12px;
                flex-direction: column;
                align-items: stretch;
                max-width: 100%;
                overflow: visible;
            }
            .bgcopy .cat-hero-inner > div:first-child {
                padding: 0 16px;
            }
            .bgcopy .cat-hero-breadcrumb {
                font-size: 10px;
                margin-bottom: 6px;
            }
            .bgcopy .cat-hero-title { font-size: 22px; }
            .bgcopy .cat-hero-count { font-size: 11px; margin-top: 2px; }
            /* 아이콘 영역: 가로 스크롤 + 알약 형태 + sticky (모바일도 최상단 고정) */
            .bgcopy .cat-hero-icons-wrap {
                position: sticky;
                top: 0;
                z-index: 210;
                background: var(--surface);
                border-bottom: 1px solid var(--border);
            }
            .bgcopy .cat-hero-icons {
                flex-wrap: nowrap;
                gap: 4px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding: 8px 16px 8px 8px;
                max-width: 100%;
            }
            .bgcopy .cat-hero-icons::-webkit-scrollbar { display: none; }
            .bgcopy .cat-hero-icon-btn {
                flex: 0 0 auto;
                min-width: 70px;
                padding: 8px 6px 10px;
                /* 실사 이미지(60px)가 박스(52px) 밖으로 4px씩 넘쳐서 gap 4px 은
                   사실상 0 — 라벨이 아이콘에 붙어버린다. 넘침만큼 더 준다. */
                gap: 13px;
                border-radius: 10px;
            }
            .bgcopy .cat-hero-icon-btn .icon {
                width: 52px; height: 52px;
                border-radius: 14px;
                font-size: 18px;
            }
            .bgcopy .cat-hero-icon-btn .icon img { width: 38px; height: 38px; }
            .bgcopy .cat-hero-icon-btn .icon.has-photo img { width: 60px; height: 60px; }
            .bgcopy .cat-hero-icon-btn .label { font-size: 11px; }
        }
 /* ── LAYOUT ── */
        .bgcopy .container{ max-width: 1480px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px){.bgcopy .container{ padding: 0 16px; }}
.bgcopy .page-layout{
            display: grid;
            grid-template-columns: 220px 1fr;
            gap: 32px;
            padding: 40px 0 80px;
        }
@media (max-width: 1024px){.bgcopy .page-layout{ grid-template-columns: 1fr; }}
.bgcopy /* ── SIDEBAR ── */
        .sidebar{
            position: sticky;
            top: 166px;   /* 최상단 고정된 카테고리 바(약 148px) 아래로 여유공간 두고 고정 */
            height: fit-content;
        }
@media (max-width: 1024px){.bgcopy .sidebar{ display: none; }}
.bgcopy .sidebar-section{ margin-bottom: 32px; }
.bgcopy .sidebar-title{
            font-family: "Montserrat", sans-serif;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #111;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }
.bgcopy .sidebar-menu{ display: flex; flex-direction: column; }
.bgcopy .sidebar-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            color: #666;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
.bgcopy .sidebar-item:hover{ background: var(--surface); color: #111; }
.bgcopy /* 🔥 테마 아이콘/이모지 (관리자 [진열관리 > 테마 관리]에서 등록)
           .sidebar-item 이 space-between 이라 아이콘을 그냥 넣으면 개수 뱃지와 벌어진다
           → margin-right:auto 인 .item-count 대신 아이콘은 이름 앞에 딱 붙여둔다. */
        .sidebar-item .theme-ico{
            width: 18px; height: 18px; object-fit: contain;
            margin-right: 7px; flex-shrink: 0; vertical-align: middle;
        }
.bgcopy .sidebar-item .theme-emoji{
            font-size: 14px; margin-right: 6px; flex-shrink: 0; line-height: 1;
        }
.bgcopy /* 이름+아이콘 묶음이 왼쪽, .bgcopy 개수는 오른쪽 끝에 남도록 */
        .sidebar-item .item-count{ margin-left: auto; }
.bgcopy .sidebar-item.is-active{ background: #111; color: #fff; font-weight: 700; }
.bgcopy .sidebar-item .item-count{
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            font-family: "Montserrat", sans-serif;
        }
.bgcopy .sidebar-item.is-active .item-count{ color: rgba(255,255,255,0.5); }
.bgcopy /* 대분류(식품/공산품) 머리행 + 그 아래 중분류 들여쓰기 */
        .sidebar-item.is-group{
            margin-top: 14px;
            font-size: 13px;
            font-weight: 800;
            color: #111;
        }
.bgcopy .sidebar-item.is-child{ padding-left: 22px; font-size: 12.5px; }
.bgcopy /* 🔴 선택 상태는 항상 흰 글자.
              ⚠️ .is-group(color:#111)이 .is-active(color:#fff)보다 뒤에 정의돼 있어
                 명시도가 같으면 나중 것이 이긴다 → 검은 배경에 검은 글자로 안 보였다.
                 (대분류 '식품/공산품'을 선택했을 때 발생) */
        .sidebar-item.is-active, .bgcopy .sidebar-item.is-group.is-active, .bgcopy .sidebar-item.is-child.is-active{ color: #fff; }
.bgcopy /* ── TOOLBAR ── */
        .toolbar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 12px;
            flex-wrap: wrap;
        }
.bgcopy .toolbar-left{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bgcopy .toolbar-right{ display: flex; align-items: center; gap: 8px; }
.bgcopy .sort-select{
            appearance: none;
            font-family: inherit;
            font-size: 12px;
            font-weight: 600;
            color: #555;
            background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 7px 28px 7px 12px;
            cursor: pointer;
            transition: border-color 0.2s;
        }
.bgcopy .sort-select:hover{ border-color: #999; }
.bgcopy .view-btn{
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 13px;
            transition: all 0.2s;
            padding: 0;
            line-height: 1;
        }
.bgcopy .view-btn i{ line-height: 1; display: block; }
.bgcopy .view-btn:hover, .bgcopy .view-btn.is-active{ border-color: #111; color: #111; background: var(--surface); }
.bgcopy .filter-chip{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 10px;
            border: 1px solid var(--border);
            border-radius: 20px;
            color: #555;
            background: #fff;
            cursor: pointer;
            transition: all 0.2s;
        }
.bgcopy .filter-chip.is-active{ background: #111; color: #fff; border-color: #111; }
.bgcopy .filter-chip i{ font-size: 9px; }
@media (max-width: 768px){.bgcopy .page-layout{ padding: 16px 0 60px; gap: 16px; }
.bgcopy .toolbar{
                margin-bottom: 12px;
                gap: 6px;
                padding: 0 2px;
            }
.bgcopy .toolbar-left{ gap: 5px; flex: 1; }
.bgcopy .toolbar-right{ gap: 4px; }
.bgcopy .sort-select{
                font-size: 11px;
                padding: 6px 24px 6px 10px;
            }
.bgcopy .filter-chip{
                font-size: 10px;
                padding: 4px 8px;
                gap: 4px;
            }
.bgcopy .view-btn{ width: 28px; height: 28px; font-size: 11px; }}
.bgcopy /* ── PRODUCT GRID ── */
        .product-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
        }
@media (max-width: 1280px){.bgcopy .product-grid{ grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 768px){.bgcopy .product-grid{ grid-template-columns: repeat(2, 1fr); margin-left: -16px; margin-right: -16px; border-left: none; border-right: none; }}
.bgcopy .product-grid.list-view{
            grid-template-columns: 1fr;
            gap: 0;
        }
.bgcopy .product-card{ background: var(--bg); position: relative; transition: background 0.2s; }
.bgcopy .product-card:hover{ background: #fafafa; }
.bgcopy .product-thumb{
            aspect-ratio: 3/4;
            overflow: hidden;
            background: var(--surface2);
            position: relative;
            cursor: pointer;
        }
.bgcopy .product-grid.list-view .product-thumb{
            aspect-ratio: 1/1;
            width: 120px;
            height: 120px;
            flex-shrink: 0;
        }
.bgcopy .product-grid.list-view .product-card{
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }
.bgcopy .product-grid.list-view .product-info{
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 16px 20px;
        }
.bgcopy .product-grid.list-view .product-name{
            flex: 1;
            min-width: 0;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
.bgcopy .product-grid.list-view .product-pricing{ margin-left: auto; flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 768px){.bgcopy .product-grid.list-view .product-thumb{ width: 88px; height: 88px; }
.bgcopy .product-grid.list-view .product-info{
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
                padding: 10px 12px;
                min-width: 0;
            }
.bgcopy .product-grid.list-view .product-name{
                font-size: 13px;
                white-space: normal;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                flex: none;
            }
.bgcopy .product-grid.list-view .product-pricing{
                margin-left: 0;
                font-size: 13px;
            }
.bgcopy .product-grid.list-view .product-brand{ display: none; }}
.bgcopy .product-thumb img{
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
.bgcopy .product-card:hover .product-thumb img{ transform: scale(1.04); }
.bgcopy /* 썸네일 영상 (메인페이지와 동일) — 호버(PC)/뷰포트진입(모바일) 시 재생 */
        .thumb-video{
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; display: block;
            opacity: 0; transition: opacity 0.35s ease;
            pointer-events: none; z-index: 1;
        }
.bgcopy .product-thumb:hover .thumb-video, .bgcopy .thumb-playing .thumb-video{ opacity: 1; }
.bgcopy .thumb-has-video::after{
            content: '\f04b';   /* fa-play */
            font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; right: 7px; bottom: 7px; z-index: 2;
            width: 20px; height: 20px; border-radius: 50%;
            background: rgba(0,0,0,0.5); color: #fff;
            font-size: 8px; display: flex; align-items: center; justify-content: center;
            padding-left: 1px;
            opacity: 0.85; transition: opacity 0.25s ease; pointer-events: none;
        }
.bgcopy .product-thumb:hover .thumb-has-video::after, .bgcopy .thumb-playing .thumb-has-video::after{ opacity: 0; }
.bgcopy /* 품절 도장 (메인페이지와 동일) — 썸네일 밝게 바래고 빨간 도장 쾅 */

        /* 품절 도장 아래 재입고 카운트다운 뱃지 (mall-restock.js) */
        .soldout-restock{ position:absolute; left:0; right:0; bottom:7px; z-index:9; display:flex; justify-content:center; pointer-events:none; }
.bgcopy .soldout-restock .restock-badge{ box-shadow:0 2px 6px rgba(0,0,0,0.13); }
@media (max-width:768px){.bgcopy .soldout-restock .restock-badge{ font-size:9px; padding:2px 6px; }}
.bgcopy .soldout-stamp{
            position: absolute; inset: 0; z-index: 8; pointer-events: none;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.66);
        }
.bgcopy .soldout-stamp img{
            width: 88% !important; height: auto !important; max-width: 240px !important;
            aspect-ratio: 1 / 1; object-fit: contain !important;
            transform: rotate(-9deg);
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
        }
.bgcopy .product-thumb-actions{
            position: absolute;
            top: 12px; right: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            opacity: 0;
            transform: translateX(6px);
            transition: opacity 0.2s, transform 0.2s;
        }
.bgcopy .product-card:hover .product-thumb-actions{ opacity: 1; transform: translateX(0); }
.bgcopy .thumb-action-btn{
            width: 32px; height: 32px;
            border-radius: 50%;
            background: rgba(12,12,12,0.85);
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 13px;
            display: flex; align-items: center; justify-content: center;
            transition: color 0.2s;
            padding: 0;
            line-height: 1;
        }
.bgcopy .thumb-action-btn i{ line-height: 1; display: block; }
.bgcopy .thumb-action-btn:hover, .bgcopy .thumb-action-btn.is-liked{ color: #ef4444; }
.bgcopy .product-badges{
            position: absolute;
            top: 10px; left: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            max-width: calc(100% - 20px);
            z-index: 2;
        }
.bgcopy .product-badge{
            position: relative;
            font-family: "Montserrat", sans-serif;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 5px 9px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            overflow: hidden;
            white-space: nowrap;
            background: #555; color: #fff;
        }
@media (max-width: 768px){.bgcopy .product-badges{ top: 6px; left: 6px; gap: 3px; }
.bgcopy .product-badge{ font-size: 8px; padding: 3px 6px; letter-spacing: 0.08em; }}
.bgcopy /* ── NEW: 홀로그램 영롱 재질 ── */
        .badge-new{
            background: linear-gradient(105deg,
                #e8c6ff 0%, #c2e4ff 15%, #b8ffd8 30%, #fffab8 45%,
                #ffd6b8 58%, #ffb8d6 70%, #d6b8ff 82%, #b8e8ff 95%, #c8ffea 100%);
            background-size: 300% 100%;
            color: #1a1a1a;
            border: 1px solid rgba(255,255,255,0.85);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.9),
                inset 0 -1px 0 rgba(0,0,0,0.06),
                0 2px 12px rgba(180,140,255,0.35),
                0 0 0 0.5px rgba(0,0,0,0.05);
            animation: holoSlide 4s ease-in-out infinite;
        }
.bgcopy .badge-new::before{
            content: '✦';
            font-size: 7px;
            color: rgba(80,40,120,0.7);
            display: inline-block;
            animation: holoStar 2s ease-in-out infinite;
        }
.bgcopy .badge-new::after{
            content: '';
            position: absolute;
            top: -10%; left: -90%;
            width: 50%; height: 120%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
            transform: skewX(-22deg);
            animation: holoGlint 4s ease-in-out infinite;
        }
@keyframes holoSlide{
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
@keyframes holoStar{
            0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
            50%       { opacity: 1;   transform: scale(1.4) rotate(90deg); }
        }
@keyframes holoGlint{
            0%, 30%  { left: -90%; opacity: 0; }
            35%       { opacity: 1; }
            65%       { opacity: 1; }
            70%, 100% { left: 160%; opacity: 0; }
        }
.bgcopy /* ── HOT: 불꽃 이펙트 ── */
        .badge-hot{
            background: linear-gradient(150deg, #ffb300 0%, #ff5e00 45%, #ff1f00 100%);
            color: #fff;
            border: none;
            text-shadow: 0 1px 3px rgba(0,0,0,0.35);
            animation: hotFlicker 0.85s ease-in-out infinite alternate;
            box-shadow:
                0 0 6px  rgba(255,100,0,0.9),
                0 0 16px rgba(255,60,0,0.55),
                0 0 30px rgba(255,30,0,0.25);
        }
.bgcopy .badge-hot::before{
            content: '🔥';
            font-size: 10px;
            line-height: 1;
            display: inline-block;
            animation: hotBounce 0.85s ease-in-out infinite alternate;
        }
.bgcopy .badge-hot::after{
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, rgba(255,255,180,0.18) 0%, transparent 55%);
            animation: hotShine 1.7s ease-in-out infinite;
        }
@keyframes hotFlicker{
            from {
                box-shadow: 0 0 6px rgba(255,100,0,0.9), 0 0 16px rgba(255,60,0,0.55), 0 0 30px rgba(255,30,0,0.25);
                filter: brightness(1);
            }
            to {
                box-shadow: 0 0 10px rgba(255,140,0,1), 0 0 24px rgba(255,80,0,0.85), 0 0 44px rgba(255,50,0,0.5), 0 0 64px rgba(255,20,0,0.2);
                filter: brightness(1.13);
            }
        }
@keyframes hotBounce{
            from { transform: scale(1)    rotate(-6deg); }
            to   { transform: scale(1.18) rotate(6deg); }
        }
@keyframes hotShine{
            0%, 100% { opacity: 0.4; }
            50%       { opacity: 1; }
        }
.bgcopy /* ── SALE: 레이더 펄스 ── */
        .badge-sale{
            background: linear-gradient(135deg, #ff3b3b 0%, #e63946 100%);
            color: #fff;
            animation: salePulse 1.7s ease-out infinite;
            box-shadow: 0 2px 8px rgba(230,57,70,0.5);
        }
.bgcopy .badge-sale::before{
            content: '−';
            font-size: 12px;
            font-weight: 900;
            line-height: 0.85;
            display: inline-block;
        }
@keyframes salePulse{
            0%   { box-shadow: 0 0 0 0   rgba(230,57,70,0.75), 0 2px 8px rgba(230,57,70,0.5); }
            70%  { box-shadow: 0 0 0 8px rgba(230,57,70,0),    0 2px 8px rgba(230,57,70,0.5); }
            100% { box-shadow: 0 0 0 0   rgba(230,57,70,0),    0 2px 8px rgba(230,57,70,0.5); }
        }
.bgcopy /* ── 덤핑: 번개 이펙트 ── */
        .badge-dump{
            background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #4c1d95 100%);
            color: #fff;
            text-shadow: 0 1px 3px rgba(0,0,0,0.35);
            animation: dumpZap 2s ease-in-out infinite;
            box-shadow:
                0 0 8px  rgba(124,58,237,0.85),
                0 0 20px rgba(124,58,237,0.45);
        }
.bgcopy .badge-dump::before{
            content: '⚡';
            font-size: 9px;
            display: inline-block;
            animation: dumpBolt 0.5s ease-in-out infinite alternate;
        }
@keyframes dumpZap{
            0%, 100% {
                box-shadow: 0 0 8px rgba(124,58,237,0.85), 0 0 20px rgba(124,58,237,0.45);
                filter: brightness(1);
            }
            50% {
                box-shadow: 0 0 14px rgba(139,92,246,1), 0 0 32px rgba(124,58,237,0.8), 0 0 54px rgba(109,40,217,0.35);
                filter: brightness(1.16);
            }
        }
@keyframes dumpBolt{
            from { transform: scale(1)    rotate(-8deg); opacity: 0.85; }
            to   { transform: scale(1.25) rotate(8deg);  opacity: 1; }
        }
.bgcopy .product-info{ padding: 14px 16px 18px; }
 /* 모바일 그리드뷰는 좌우 패딩 제거 — 상품명·가격이 썸네일 왼쪽선에 딱 맞게.
           list-view 는 썸네일 옆에 글자가 붙으므로 기존 패딩 유지(아래 규칙이 덮어씀). */
        @media (max-width: 768px){
            /* 그리드가 margin:-16px 로 화면 끝까지 나가므로 글자는 살짝만 안쪽으로
               (0 이면 화면 가장자리에 딱 붙어 답답함) */
            .bgcopy .product-grid:not(.list-view) .product-info { padding: 9px 10px 12px; }
            /* 모바일 글자 간격 정리 — 이름↔가격은 좁히고, 가격·뱃지는 살짝 띄움 */
            .bgcopy .product-grid:not(.list-view) .product-name { margin-bottom: 5px; line-height: 1.4; }
            .bgcopy .product-grid:not(.list-view) .price-current { font-size: 15px; }
            .bgcopy .product-grid:not(.list-view) .free-ship-badge { margin-top: 6px; }
            /* 네이버최저가 뱃지 자리 — 값 없을 땐 빈 공간이 남지 않게 */
            .bgcopy .product-grid:not(.list-view) .product-info > [id^="nbadge-"] { min-height: 0 !important; }
            .bgcopy .product-grid:not(.list-view) .product-info > [id^="nbadge-"]:empty { margin-top: 0 !important; }
        }
.bgcopy .product-brand{
            font-family: "Montserrat", sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 5px;
        }
.bgcopy .product-name{
            font-size: 12px;
            font-weight: 500;
            color: #333;
            line-height: 1.5;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
.bgcopy .product-pricing{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bgcopy .price-current{ font-size: 14px; font-weight: 800; color: #111; }
.bgcopy .free-ship-badge{ display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; line-height:1.4; color:#0a7d3c; background:#e6f7ee; border:1px solid #b6e6cb; }
.bgcopy .free-ship-badge i{ font-size:9px; }
.bgcopy .price-unit-tag{ margin-top:3px; font-size:11px; font-weight:700; color:#2563eb; line-height:1.3; }
.bgcopy .price-original{ font-size: 11px; font-weight: 500; color: #bbb; text-decoration: line-through; }
.bgcopy .price-rate{ font-size: 11px; font-weight: 800; color: #e63946; }
 /* ── LOAD MORE ── */
        .bgcopy .more-wrap{ text-align: center; padding: 48px 0 0; }
.bgcopy .btn-more{
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: "Montserrat", sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
            border: 1px solid var(--border);
            padding: 14px 48px;
            border-radius: 2px;
            transition: all 0.2s;
        }
.bgcopy .btn-more:hover{ color: #111; border-color: #999; background: var(--surface); }
.bgcopy /* ── EMPTY STATE ── */
        .empty-state{
            text-align: center;
            padding: 80px 20px;
            color: var(--text-muted);
        }
.bgcopy .empty-state i{ font-size: 48px; margin-bottom: 16px; color: var(--text-dim); }
.bgcopy .empty-state p{ font-size: 14px; font-weight: 600; }
.bgcopy /* ── FOOTER ── */
        .site-footer{ background: #f7f7f7; border-top: 1px solid var(--border); }
.bgcopy .footer-top-bar{
            border-bottom: 1px solid var(--border);
            padding: 20px 32px;
            max-width: 1480px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }
.bgcopy .footer-top-bar span{ font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
.bgcopy .footer-cs-group{ display: flex; flex-direction: column; gap: 2px; }
.bgcopy .footer-cs-label{ font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; }
.bgcopy .footer-cs{ font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 800; color: #111; }
.bgcopy .footer-main{
            max-width: 1480px;
            margin: 0 auto;
            padding: 40px 32px;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
            gap: 40px;
        }
@media (max-width: 1024px){.bgcopy .footer-main{ grid-template-columns: 1fr 1fr; }}
@media (max-width: 600px){.bgcopy .footer-main{ grid-template-columns: 1fr 1fr; gap: 24px; }
.bgcopy .footer-brand-col{ grid-column: 1 / -1; }}
.bgcopy .footer-col-title{ font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: #111; margin-bottom: 16px; }
.bgcopy .footer-col-links{ display: flex; flex-direction: column; gap: 10px; }
.bgcopy .footer-col-links a{ font-size: 12px; font-weight: 500; color: var(--text-muted); transition: color 0.2s; }
.bgcopy .footer-col-links a:hover{ color: #111; }
.bgcopy .footer-brand-col .footer-logo{ font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 800; color: #111; letter-spacing: 0.1em; margin-bottom: 16px; }
.bgcopy .footer-brand-col .footer-desc{ font-size: 12px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.bgcopy .footer-sns{ display: flex; gap: 10px; }
.bgcopy .footer-sns a{ width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; transition: color 0.2s, border-color 0.2s; }
.bgcopy .footer-sns a:hover{ color: #111; border-color: #999; }
.bgcopy .footer-bottom{
            border-top: 1px solid var(--border);
            padding: 20px 32px;
            max-width: 1480px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }
.bgcopy .footer-bottom p{ font-size: 11px; color: #aaa; font-weight: 500; line-height: 1.7; }
.bgcopy .footer-bottom-links{ display: flex; gap: 16px; }
.bgcopy .footer-bottom-links a{ font-size: 11px; font-weight: 600; color: #aaa; transition: color 0.2s; }
.bgcopy .footer-bottom-links a:hover{ color: #666; }
.bgcopy ::-webkit-scrollbar{ width: 5px; }
.bgcopy ::-webkit-scrollbar-track{ background: #fff; }
.bgcopy ::-webkit-scrollbar-thumb{ background: #ddd; border-radius: 10px; }
.bgcopy ::-webkit-scrollbar-thumb:hover{ background: #bbb; }
.bgcopy /* ── QUICK VIEW BUTTON ON CARD ── */
        .quick-view-btn{
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%) translateY(8px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: rgba(17,17,17,0.88);
            color: #fff;
            border: none;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            padding: 7px 14px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s, transform 0.2s, background 0.2s;
            white-space: nowrap;
            backdrop-filter: blur(6px);
            line-height: 1.2;
        }
.bgcopy .quick-view-btn i{ line-height: 1; display: inline-block; vertical-align: middle; }
.bgcopy .quick-view-btn:hover{ background: #111; }
.bgcopy .product-card:hover .quick-view-btn{ opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 768px){.bgcopy .quick-view-btn{
                opacity: 1;
                transform: translateX(-50%) translateY(0);
                font-size: 10px;
                padding: 0 12px;
                bottom: 6px;
                height: 26px;
                line-height: 26px;
                display: inline-flex;
                align-items: center;
            }
.bgcopy .quick-view-btn i{ line-height: 1; transform: translateY(-0.5px); }
.bgcopy .product-grid.list-view .quick-view-btn{ display: none; }}
.bgcopy /* ── QUICK VIEW MODAL ── */
        .qv-overlay{
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 20px;
        }
.bgcopy .qv-overlay.is-open{ display: flex; }
.bgcopy .qv-modal{
            background: #fff;
            border-radius: 16px;
            width: 100%;
            max-width: 480px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: qvPop 0.2s ease;
        }
@keyframes qvPop{ from { opacity:0; transform: scale(0.95); } to { opacity:1; transform: scale(1); } }
.bgcopy .qv-head{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            border-bottom: 1px solid var(--border);
        }
.bgcopy .qv-head-title{ font-size: 13px; font-weight: 800; color: #111; letter-spacing: 0.02em; }
.bgcopy .qv-close{
            width: 32px; height: 32px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #555;
            background: var(--surface);
            font-size: 13px;
        }
.bgcopy .qv-close:hover{ background: #e5e5e5; color: #111; }
.bgcopy .qv-body{ overflow-y: auto; padding: 18px; }
.bgcopy .qv-product{
            display: flex; gap: 14px; align-items: center;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 16px;
        }
.bgcopy /* 📐 세로로 긴 상품(선물세트 등)이 잘리지 않게 4:5 세로형 — 메인 간단보기와 동일 */
        .qv-thumb{
            width: 88px; aspect-ratio: 4/5;
            border-radius: 10px;
            background: var(--surface2);
            overflow: hidden;
            flex-shrink: 0;
        }
.bgcopy .qv-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.bgcopy .qv-info{ flex: 1; min-width: 0; }
.bgcopy /* 📦 간단보기 '한개씩도 출고 가능' 배너 — 상세페이지와 같은 초록 톤.
           정보표 바로 위에 두어 스펙을 훑기 전에 먼저 눈에 들어오게 한다. */
        .qv-freeqty{
            display:flex; align-items:center; justify-content:center; gap:9px;
            margin: 4px 0 14px; padding: 13px 16px;
            border-radius: 12px;
            background: linear-gradient(135deg, #eafaf1, #e2f6ec);
            border: 1px solid #b8e6cd;
            color: #0b6b3f;
            font-size: 14px; font-weight: 600; letter-spacing:-0.01em;
            text-align:center; line-height:1.45;
        }
.bgcopy .qv-freeqty b{ font-weight: 800; }
.bgcopy /* 💊 간단보기 건강기능식품 배너 — 낱개출고(초록)와 구분되게 보라 계열. */
        .qv-health{
            display:flex; align-items:center; justify-content:center; gap:9px;
            margin: 4px 0 14px; padding: 13px 16px;
            border-radius: 12px;
            background: linear-gradient(135deg, #f6f0ff, #efe6fd);
            border: 1px solid #d8c5f7;
            color: #5b21b6;
            font-size: 14px; font-weight: 600; letter-spacing:-0.01em;
            text-align:center; line-height:1.45;
        }
.bgcopy .qv-health b{ font-weight: 800; }
.bgcopy .qv-health i{ font-size: 15px; flex-shrink:0; }
@media (max-width: 768px){.bgcopy .qv-health{ font-size: 12.5px; padding: 11px 13px; gap:7px; }
.bgcopy .qv-health i{ font-size: 13px; }}
.bgcopy .qv-freeqty i{ font-size: 15px; flex-shrink:0; }
@media (max-width: 768px){.bgcopy .qv-freeqty{ font-size: 12.5px; padding: 11px 13px; gap:7px; }
.bgcopy .qv-freeqty i{ font-size: 13px; }}
.bgcopy .qv-cat{
            font-size: 10px;
            color: var(--text-muted);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
.bgcopy .qv-name{
            font-size: 14px;
            font-weight: 700;
            color: #111;
            line-height: 1.4;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
.bgcopy .qv-price{ font-size: 16px; font-weight: 900; color: #111; }
.bgcopy .qv-info-grid{
            display: grid;
            grid-template-columns: 90px 1fr;
            gap: 10px 14px;
            font-size: 12px;
        }
.bgcopy .qv-info-grid .lbl{ color: var(--text-muted); font-weight: 700; }
.bgcopy .qv-info-grid .val{ color: #111; font-weight: 600; word-break: break-word; }
.bgcopy .qv-options{
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
        }
.bgcopy .qv-options-title{ font-size: 11px; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; letter-spacing: 0.06em; }
.bgcopy .qv-options-list{ display: flex; flex-wrap: wrap; gap: 5px; }
.bgcopy .qv-option-pill{
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 9px;
            border: 1px solid var(--border);
            border-radius: 4px;
            color: #555;
            background: var(--surface);
        }
.bgcopy .qv-foot{
            display: flex;
            gap: 8px;
            padding: 14px 18px;
            border-top: 1px solid var(--border);
            background: var(--surface);
        }
.bgcopy .qv-foot button{
            flex: 1;
            padding: 12px;
            font-size: 13px;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
        }
.bgcopy .qv-foot .qv-detail-btn{ background: #fff; border: 1px solid #111; color: #111; }
.bgcopy .qv-foot .qv-go-btn{ background: #111; border: 1px solid #111; color: #fff; }
.bgcopy .qv-loading, .bgcopy .qv-error{
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
            font-size: 13px;
        }
.bgcopy .qv-loading i{ font-size: 22px; display: block; margin-bottom: 10px; }
.bgcopy /* ── 공통 하단 탭바 ── */
        .common-tabbar{ position:fixed; bottom:calc(env(safe-area-inset-bottom) + 12px); left:12px; right:12px; z-index:1100; background:rgba(255,255,255,0.28); -webkit-backdrop-filter:blur(28px) saturate(190%); backdrop-filter:blur(28px) saturate(190%); border:1px solid rgba(255,255,255,0.45); border-radius:26px; height:62px; display:flex; align-items:stretch; box-shadow:0 8px 30px rgba(0,0,0,0.16), inset 0 1px 1px rgba(255,255,255,0.7); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; }
.bgcopy .common-tabbar.tb-hidden{ transform:translateY(160%); opacity:0; pointer-events:none; }
 /* PC(≥769px)에서는 하단 탭바 숨김 — 모바일 전용 네비 */
        @media (min-width: 769px){ .bgcopy .common-tabbar { display: none !important; } }
.bgcopy .common-tabbar a{ color:#2a2a2e; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:4px; transition:color 0.2s; }
.bgcopy .common-tabbar a i{ font-size:24px; line-height:1; }
.bgcopy .common-tabbar a span{ font-size:11px; font-weight:700; letter-spacing:0.02em; }
 /* 탭바 장바구니 탭 — 아이콘 우상단 개수 배지 */
        .bgcopy .common-tabbar a{ position:relative; }
.bgcopy .common-tabbar .cart-count{
            position:absolute; top:1px; left:calc(50% + 7px);
            min-width:15px; height:15px; padding:0 4px;
            background:#ff3b30; color:#fff; font-size:9px; font-weight:900;
            border-radius:8px; display:flex; align-items:center; justify-content:center;
            line-height:1; box-shadow:0 1px 3px rgba(0,0,0,0.25);
        }
.bgcopy .common-tabbar .cart-count:empty, .bgcopy .common-tabbar .cart-count[data-empty="1"]{ display:none !important; }
.bgcopy .common-tabbar a.is-active{ color:#000; }
.bgcopy .common-tabbar a.is-active i{ transform:translateY(-1px); }
.bgcopy .common-tabbar a.is-active .tb-heart{ color:#ed4956; }
@media (max-width:768px){.bgcopy{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }}
.bgcopy /* ── 헤더 스크롤 숨김 ── */
        .site-header{ transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.bgcopy .site-header.header-hidden{ transform: translateY(-100%); }
.bgcopy /* ═══ 🥩 2026-09-02 한우 등급 뱃지 (추석 선물세트용) ═══
           1++ = 금박, .bgcopy 1+ = 은박.
           ⚠️ 3차 수정 — "고급스럽게" 요청.
              · 펄스 글로우(번쩍이는 노란 후광) 제거. 발광은 싸구려로 보이는 1순위 요인이고, .bgcopy 썸네일 위에서 뱃지 윤곽까지 흐리게 만들었다. 형태는 그림자와 테두리로 잡는다.
              · 광택 스윗은 남기되 느리고(5.5s) 옅게(0.55) — 있는 줄 모르게 지나가야 금속 느낌이 난다.
              · 앤티크 골드(#a97f2e) 테두리 + 안쪽 하이라이트 1줄로 금속판 두께를 준다.
           ⚠️ ::after 광택은 부모(.product-badge / .g-badge)의
              position:relative + overflow:hidden 에 기대고 있다. */
        .badge-g2p{
            background: linear-gradient(135deg,
                #c9992f 0%, #f6e3a4 17%, #e3c05a 36%, #fffaea 52%,
                #e3c05a 68%, #f6e3a4 85%, #c9992f 100%);
            color: #402808;
            border: 1px solid #a97f2e;
            justify-content: center;
            letter-spacing: 0.04em;
            text-shadow: 0 1px 0 rgba(255,255,255,0.55);
            box-shadow: 0 1px 3px rgba(0,0,0,0.3),
                        inset 0 1px 0 rgba(255,255,255,0.55);
        }
.bgcopy .badge-g2p::before{
            content: '★'; font-size: 7px; line-height: 1;
            display: inline-block; color: #8a6414;
        }
.bgcopy .badge-g2p::after{
            content: ''; position: absolute;
            top: -10%; left: -90%; width: 40%; height: 120%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
            transform: skewX(-22deg);
            animation: g2pGlint 5.5s ease-in-out infinite;
        }
@keyframes g2pGlint{
            0%, 72%, 100% { left: -90%; opacity: 0; }
            78%  { opacity: 1; }
            94%  { left: 150%; opacity: 0; }
        }
.bgcopy .badge-g1p{
            background: linear-gradient(135deg,
                #b3ac9c 0%, #f7f4ec 20%, #cec7b5 44%, #fdfcf8 56%,
                #cec7b5 72%, #f7f4ec 88%, #b3ac9c 100%);
            color: #35301f;
            border: 1px solid #8e8672;
            justify-content: center;
            letter-spacing: 0.04em;
            text-shadow: 0 1px 0 rgba(255,255,255,0.6);
            box-shadow: 0 1px 3px rgba(0,0,0,0.24),
                        inset 0 1px 0 rgba(255,255,255,0.6);
        }
.bgcopy .badge-g1p::before{
            content: '★'; font-size: 7px; line-height: 1;
            display: inline-block; color: #6f6753;
        }
@media (prefers-reduced-motion: reduce){.bgcopy .badge-g2p::after{ animation: none; opacity: 0; }}
.bgcopy /* 모바일 탭 시 파란 하이라이트 박스 제거 */
        *, .bgcopy *::before, .bgcopy *::after{ -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }
.bgcopy a, .bgcopy button, .bgcopy [role="button"], .bgcopy [onclick], .bgcopy input, .bgcopy select, .bgcopy textarea, .bgcopy label{
            -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        }
.bgcopy /* 강제 다크모드 차단 — 자사몰은 라이트 전용 (크롬 auto-dark·삼성 강제다크 대응) */
        html{ color-scheme: light; background: #ffffff; }
.bgcopy{ color-scheme: light; }
@media (prefers-color-scheme: dark){.bgcopy, .bgcopy{ background: #ffffff !important; color: #111111 !important; color-scheme: light !important; }}
.bgcopy *, .bgcopy *::before, .bgcopy *::after{ box-sizing: border-box; margin: 0; padding: 0; }
.bgcopy{
            --bg: #ffffff; --surface: #f7f7f7; --surface2: #eeeeee;
            --border: #e5e5e5; --text: #111111; --text-muted: #999999;
            --brand: #FFDE59; --white: #ffffff;
        }
.bgcopy{ scroll-behavior: smooth; overflow-x: clip; }
.bgcopy{
            background: var(--bg); color: var(--text);
            font-family: "Pretendard Variable", Pretendard, "Montserrat", sans-serif;
            font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
            overflow-x: clip;
        }
 /* ⚠️ PC에서는 html/body 의 overflow-x 를 반드시 풀어야 한다.
           조상에 overflow 가 visible 이 아니면 그 안의 position:sticky 는 스크롤 컨테이너를 잃어
           오른쪽 구매패널 고정(좌우 독립 스크롤)이 통째로 작동하지 않는다 (2026-08-13 겪음).
           모바일은 sticky 를 안 쓰고 가로 넘침 방지가 더 중요하므로 clip 을 그대로 둔다. */
        @media (min-width: 1025px){
            .bgcopy,.bgcopy { overflow-x: visible; }
        }
.bgcopy a{ color: inherit; text-decoration: none; }
.bgcopy img{ display: block; max-width: 100%; }
.bgcopy button{ cursor: pointer; border: none; background: none; font-family: inherit; }
 /* ── NOTICE BAR ── */
        .bgcopy .notice-bar{
            background: #fffbdd; border-bottom: 1px solid #f0e88a;
            text-align: center; padding: 10px 20px;
            font-size: 11px; font-weight: 600; color: #555; letter-spacing: 0.08em;
        }
.bgcopy .notice-bar em{ color: #9a7c00; font-style: normal; font-weight: 800; }
.bgcopy /* ── HEADER ── */
        .site-header{
            position: sticky; top: 0; z-index: 200;
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
        }
.bgcopy .header-top{
            max-width: 1480px; margin: 0 auto; padding: 0 24px; height: 56px;
            display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
        }
.bgcopy .header-logo{ display: flex; align-items: center; }
.bgcopy .header-logo img{ height: 26px; filter: brightness(0); }
.bgcopy .header-gnb{ display: flex; align-items: center; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.bgcopy .header-gnb::-webkit-scrollbar{ display: none; }
.bgcopy .header-gnb a{ font-size: 13px; font-weight: 600; color: #555; padding: 8px 14px; white-space: nowrap; transition: color 0.18s; }
.bgcopy .header-gnb a:hover{ color: #111; }
.bgcopy .header-gnb .gnb-divider{ width: 1px; height: 12px; background: var(--border); margin: 0 2px; }
.bgcopy .header-gnb .gnb-season{ color: #f59e0b; font-weight: 700; }
.bgcopy .header-gnb .gnb-special{ color: #e63946; font-weight: 700; }
.bgcopy .header-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bgcopy .icon-btn{
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; color: var(--text-muted); font-size: 15px; transition: color 0.2s, background 0.2s;
        }
.bgcopy .icon-btn:hover{ color: #111; background: var(--surface); }
.bgcopy .cart-btn{ position: relative; }
.bgcopy .cart-count:empty, .bgcopy .cart-count[data-empty="1"]{ display: none !important; }
.bgcopy .cart-count{
            position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
            background: #111; color: #fff; font-size: 8px; font-weight: 900;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }
.bgcopy .btn-login-header{
            font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 700;
            letter-spacing: 0.08em; color: var(--text-muted); padding: 7px 14px;
            border: 1px solid var(--border); border-radius: 4px; transition: all 0.2s; text-transform: uppercase;
        }
.bgcopy .btn-login-header:hover{ color: #111; border-color: #999; }
.bgcopy .grade-view-select{
            font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
            padding: 7px 32px 7px 13px; border-radius: 6px;
            border: 1px solid #ddd;
            background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 11px center;
            background-size: 9px;
            cursor: pointer; color: #333;
            outline: none; appearance: none; -webkit-appearance: none;
            transition: border-color 0.18s, box-shadow 0.18s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
.bgcopy .grade-view-select:hover{ border-color: #bbb; }
.bgcopy .grade-view-select:focus{ border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
.bgcopy /* ── 햄버거 버튼 ── */
        .hamburger-btn{
            display: none;
            width: 36px; height: 36px;
            align-items: center; justify-content: center;
            border-radius: 50%; color: var(--text-muted);
            font-size: 15px; transition: color 0.2s, background 0.2s;
        }
.bgcopy .hamburger-btn:hover{ color: #111; background: var(--surface); }
.bgcopy /* ── 모바일 드로어 메뉴 ── */
        .mobile-menu-overlay{
            position: fixed; inset: 0; z-index: 1200;
            background: rgba(0,0,0,0.38);
            visibility: hidden; opacity: 0; pointer-events: none;
            transition: opacity 0.28s ease, visibility 0s linear 0.28s;
            /* 🚧 닫힌 메뉴 패널이 문서 폭을 늘려 앱에서 화면이 밀리던 문제 — 잘라냄 */
            overflow: hidden;
        }
.bgcopy .mobile-menu-overlay.open{
            visibility: visible; opacity: 1; pointer-events: auto;
            transition: opacity 0.28s ease, visibility 0s linear 0s;
        }
.bgcopy .mobile-menu-panel{
            position: absolute; top: 0; right: 0; bottom: 0; width: 285px;
            background: #fff; display: flex; flex-direction: column;
            overflow: hidden; transform: translateX(100%);
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: -6px 0 28px rgba(0,0,0,0.13);
        }
.bgcopy .mobile-menu-overlay.open .mobile-menu-panel{ transform: translateX(0); }
.bgcopy .mm-top{ display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bgcopy .mm-user-name{ font-size: 15px; font-weight: 800; color: #111; }
.bgcopy .mm-user-sub{ font-size: 11px; font-weight: 600; color: #bbb; margin-top: 2px; }
.bgcopy .mm-close{ width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 17px; transition: background 0.15s; }
.bgcopy .mm-close:hover{ background: var(--surface); color: #111; }
.bgcopy .mm-section{ padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bgcopy .mm-section-label{ font-size: 9px; font-weight: 900; color: #ccc; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 9px; }
.bgcopy .mm-grade-sel{ width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 700; color: #333; background: #fff; appearance: none; cursor: pointer; outline: none; font-family: inherit; }
.bgcopy .mm-nav{ padding: 10px 12px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.bgcopy .mm-nav a{ display: block; padding: 10px 8px; font-size: 14px; font-weight: 700; color: #333; border-radius: 8px; transition: background 0.15s, color 0.15s; text-decoration: none; }
.bgcopy .mm-nav a:hover{ background: var(--surface); color: #111; }
.bgcopy .mm-nav a.mm-season{ color: #f59e0b; }
.bgcopy .mm-nav a.mm-special{ color: #e63946; }
.bgcopy .mm-nav hr{ border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.bgcopy .mm-bottom{ padding: 14px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; background: #fff; box-shadow: 0 -6px 16px rgba(0,0,0,0.06); }
.bgcopy .mm-btn{ width: 100%; padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 10px; transition: background 0.15s; text-decoration: none; border: none; font-family: inherit; cursor: pointer; }
.bgcopy .mm-btn-admin{ background: #111; color: #fff; }
.bgcopy .mm-btn-admin:hover{ background: #333; }
.bgcopy .mm-btn-mypage{ background: var(--surface); color: #333; }
.bgcopy .mm-btn-mypage:hover{ background: var(--surface2); }
.bgcopy .mm-btn-logout{ background: #fef2f2; color: #dc2626; border: 1.5px solid #f87171; font-weight: 800; }
.bgcopy .mm-btn-logout:hover{ background: #fee2e2; }
.bgcopy .mm-btn-logout:active{ background: #fecaca; }
.bgcopy /* ── BREADCRUMB ── */
        .breadcrumb-bar{
            border-bottom: 1px solid var(--border);
            padding: 12px 0;
        }
.bgcopy .breadcrumb{
            max-width: 1480px; margin: 0 auto; padding: 0 32px;
            display: flex; align-items: center; gap: 6px;
            font-size: 11px; font-weight: 600; color: var(--text-muted);
        }
.bgcopy .breadcrumb a:hover{ color: #111; }
.bgcopy .breadcrumb i{ font-size: 9px; }
@media (max-width: 768px){.bgcopy .breadcrumb{ padding: 0 16px; }}
.bgcopy /* ── CONTAINER ── */
        .container{ max-width: 1480px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px){.bgcopy .container{ padding: 0 16px; }}
.bgcopy /* ── PRODUCT DETAIL LAYOUT ── */
        .product-detail{
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 0 64px;
            padding: 48px 0 80px;
            align-items: start;
        }
 /* ══ PC: 왼쪽은 전체 노출 · 오른쪽만 고정(sticky) ══
           왼쪽(갤러리+상세이미지)은 잘리지 않고 처음부터 끝까지 그대로 흐른다 → 페이지가 스크롤된다.
           오른쪽(구매정보)은 헤더 아래에 sticky 로 붙어서 따라다닌다.
           ⚠️ 갤러리와 상세이미지는 원래 형제라 하나로 못 묶는다
              → HTML 에 .pd-left 래퍼를 두고 왼쪽 열 하나로 묶는다.
           ⚠️ 셀렉터에 .product-detail 를 붙여 명시도를 올릴 것 —
              아래 PRODUCT INFO 섹션의 .product-info-wrap{display:flex}
.bgcopy 가 나중에 나와서
              그냥 쓰면 그 규칙에 덮인다. */
        @media (min-width: 1025px){
            .bgcopy .product-detail {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                padding: 40px 0 80px;
                align-items: start;           /* stretch 면 sticky 가 안 먹는다 */
            }
            /* 왼쪽 컬럼 — 높이 제한 없이 내용 전체가 그대로 보인다 */
            .bgcopy .product-detail .pd-left {
                grid-column: 1;
                min-width: 0;
            }
            /* 오른쪽 컬럼 — position:fixed 로 화면에 완전 고정.
               ⚠️ sticky 는 조상 overflow 에 계속 깨져서(mall-app-feel.css 등) fixed 로 못 박는다.
               ⚠️ fixed 는 흐름에서 빠지지만 grid-template-columns 가 2트랙이라
                  오른쪽 자리(빈 트랙)는 그대로 유지된다 → 왼쪽이 넓어지지 않는다.
               좌표(left/width/top)는 아래 JS(pdFixPanel)가 잡아준다. */
            .bgcopy .product-detail .product-info-wrap {
                display: flex; flex-direction: column;
                min-width: 0;
                position: fixed;
                top: 76px;                    /* 76px = 상단 헤더(sticky) 높이. JS가 보정 */
                max-height: calc(100vh - 100px);
                overflow-y: auto; overflow-x: hidden;
                overscroll-behavior: contain; /* 패널 안 스크롤이 페이지로 새지 않게 */
                z-index: 5;
                /* 스크롤바가 내용에 딱 붙지 않도록 오른쪽에 여백 */
                padding-right: 20px;
            }
            /* 패널이 화면보다 길 때를 대비해 스크롤바를 '보이게' 둔다
               — 숨기면 아래 내용이 있는 줄 모른다 */
            .bgcopy .product-detail .product-info-wrap { scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent; }
            .bgcopy .product-detail .product-info-wrap::-webkit-scrollbar { width: 6px; }
            .bgcopy .product-detail .product-info-wrap::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
            .bgcopy .product-detail .product-info-wrap::-webkit-scrollbar-track { background: transparent; }
            .bgcopy .product-detail .product-info-wrap > * { flex-shrink: 0; }
            /* 왼쪽 안에서는 갤러리/상세가 위아래로 자연스럽게 이어진다 */
            .bgcopy .product-detail .pd-left .gallery { overflow: visible; }
            .bgcopy .product-detail .pd-left .product-detail-body {
                margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border);
            }
            /* 스크롤바 숨김(Chrome/Safari) */
            .bgcopy .product-detail .product-info-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }
        }
@media (max-width: 1024px){.bgcopy .product-detail{ grid-template-columns: 1fr; gap: 32px; }
 .bgcopy /* 모바일에선 .pd-left 래퍼를 '없는 것처럼' 만들어(display:contents)
               갤러리 / 상품정보 / 상세이미지가 예전처럼 한 줄로 배치되게 한다.
               그런 뒤 order 로 원래 순서(갤러리 → 상품정보 → 상세이미지)를 되돌린다.
               ⚠️ 래퍼를 넣기 전엔 DOM 순서가 갤러리 → 상품정보 → 상세였는데, .bgcopy PC 독립스크롤을 위해 상세를 갤러리 뒤로 옮겼기 때문에 필요하다. */
            .bgcopy .product-detail{ display: flex; flex-direction: column; }
.bgcopy .pd-left{ display: contents; }
.bgcopy /* ⚠️2026-08-19 대표이미지 폭 터짐 수정.
               .pd-left 가 display:contents 라 .gallery 가 곧바로 flex 아이템이 된다.
               flex-direction:column 에서는 가로가 '교차축'이라 폭이 stretch 되지 않고
               내용(원본 이미지 1400px)만큼 부풀어 화면을 뚫고 나갔다.
               → 플렉스 아이템들의 폭을 컨테이너에 명시적으로 묶는다. */
            .bgcopy .product-detail > *, .bgcopy .product-detail .gallery, .bgcopy .product-detail .product-info-wrap, .bgcopy .product-detail .product-detail-body{
                width: 100%;
                max-width: 100%;
                min-width: 0;
                align-self: stretch;
            }
.bgcopy .product-detail .gallery{ order: 1; }
.bgcopy .product-detail .product-info-wrap{ order: 2; }
.bgcopy .product-detail .product-detail-body{ order: 3; }}
.bgcopy /* ── GALLERY ── */
        .gallery{ min-width: 0; overflow: hidden; }
.bgcopy /* 상세 본문 블록 (모바일에선 상품정보 아래 full) */
        .product-detail-body{ min-width: 0; }
@media (max-width: 1024px){.bgcopy .product-detail-body{ margin-top: 8px; padding-top: 40px; border-top: 1px solid var(--border); }}
.bgcopy .gallery-main{
            aspect-ratio: 1 / 1;
            background: var(--surface2);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            cursor: zoom-in;
            margin-bottom: 12px;
            width: 100%;
        }
.bgcopy .gallery-main img{
            width: 100%; height: 100%;
            object-fit: contain;
            transition: transform 0.4s ease;
            display: block;
        }
.bgcopy .gallery-main:hover img{ transform: scale(1.06); }
.bgcopy .gallery-main video{
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; background: #000; cursor: zoom-in; z-index: 2;
        }
.bgcopy /* 영상 썸네일 표시 (▶ 배지) */
        .thumb-video-badge{
            position: absolute; right: 5px; bottom: 5px; z-index: 3;
            width: 18px; height: 18px; border-radius: 50%;
            background: rgba(0,0,0,0.6); color: #fff; font-size: 8px;
            display: flex; align-items: center; justify-content: center;
            pointer-events: none;
        }
.bgcopy .gallery-badge{
            position: absolute; top: 16px; left: 16px; z-index: 3;
            display: flex; flex-wrap: wrap; gap: 5px;
        }
.bgcopy .gallery-badge .g-badge{
            position: relative; overflow: hidden;
            display: inline-flex; align-items: center; gap: 3px;
            font-family: "Montserrat", sans-serif;
            font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
            text-transform: uppercase; padding: 5px 10px; border-radius: 4px;
            line-height: 1;
        }
.bgcopy /* ── NEW: 홀로그램 영롱 재질 ── */
        .badge-new{
            background: linear-gradient(105deg,#e8c6ff 0%,#c2e4ff 15%,#b8ffd8 30%,#fffab8 45%,#ffd6b8 58%,#ffb8d6 70%,#d6b8ff 82%,#b8e8ff 95%,#c8ffea 100%);
            background-size: 300% 100%; color: #1a1a1a; border: 1px solid rgba(255,255,255,0.85);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.06), 0 2px 12px rgba(180,140,255,0.35);
            animation: holoSlide 4s ease-in-out infinite;
        }
.bgcopy .badge-new::before{ content: '✦'; font-size: 7px; color: rgba(80,40,120,0.7); display: inline-block; animation: holoStar 2s ease-in-out infinite; }
.bgcopy .badge-new::after{ content: ''; position: absolute; top: -10%; left: -90%; width: 50%; height: 120%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent); transform: skewX(-22deg); animation: holoGlint 4s ease-in-out infinite; }
@keyframes holoSlide{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes holoStar{ 0%,100%{opacity:.6;transform:scale(1) rotate(0)} 50%{opacity:1;transform:scale(1.4) rotate(90deg)} }
@keyframes holoGlint{ 0%,30%{left:-90%;opacity:0} 35%{opacity:1} 65%{opacity:1} 70%,100%{left:160%;opacity:0} }
.bgcopy /* ── HOT: 불꽃 ── */
        .badge-hot{
            background: linear-gradient(150deg,#ffb300 0%,#ff5e00 45%,#ff1f00 100%); color: #fff; border: none;
            text-shadow: 0 1px 3px rgba(0,0,0,0.35); animation: hotFlicker 0.85s ease-in-out infinite alternate;
            box-shadow: 0 0 6px rgba(255,100,0,0.9), 0 0 16px rgba(255,60,0,0.55), 0 0 30px rgba(255,30,0,0.25);
        }
.bgcopy .badge-hot::before{ content: '🔥'; font-size: 10px; line-height: 1; display: inline-block; animation: hotBounce 0.85s ease-in-out infinite alternate; }
.bgcopy .badge-hot::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,180,0.18) 0%, transparent 55%); animation: hotShine 1.7s ease-in-out infinite; }
@keyframes hotFlicker{ from{box-shadow:0 0 6px rgba(255,100,0,.9),0 0 16px rgba(255,60,0,.55),0 0 30px rgba(255,30,0,.25);filter:brightness(1)} to{box-shadow:0 0 10px rgba(255,140,0,1),0 0 24px rgba(255,80,0,.85),0 0 44px rgba(255,50,0,.5);filter:brightness(1.13)} }
@keyframes hotBounce{ from{transform:scale(1) rotate(-6deg)} to{transform:scale(1.18) rotate(6deg)} }
@keyframes hotShine{ 0%,100%{opacity:.4} 50%{opacity:1} }
.bgcopy /* ── SALE: 펄스 ── */
        .badge-sale{ background: linear-gradient(135deg,#ff3b3b 0%,#e63946 100%); color: #fff; animation: salePulse 1.7s ease-out infinite; box-shadow: 0 2px 8px rgba(230,57,70,0.5); }
.bgcopy .badge-sale::before{ content: '−'; font-size: 12px; font-weight: 900; line-height: .85; display: inline-block; }
@keyframes salePulse{ 0%{box-shadow:0 0 0 0 rgba(230,57,70,.75),0 2px 8px rgba(230,57,70,.5)} 70%{box-shadow:0 0 0 8px rgba(230,57,70,0),0 2px 8px rgba(230,57,70,.5)} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0),0 2px 8px rgba(230,57,70,.5)} }
.bgcopy /* ── 덤핑: 번개 ── */
        .badge-dump{ background: linear-gradient(135deg,#5b21b6 0%,#7c3aed 50%,#4c1d95 100%); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.35); animation: dumpZap 2s ease-in-out infinite; box-shadow: 0 0 8px rgba(124,58,237,0.85), 0 0 20px rgba(124,58,237,0.45); }
.bgcopy .badge-dump::before{ content: '⚡'; font-size: 9px; display: inline-block; animation: dumpBolt 0.5s ease-in-out infinite alternate; }
@keyframes dumpZap{ 0%,100%{box-shadow:0 0 8px rgba(124,58,237,.85),0 0 20px rgba(124,58,237,.45);filter:brightness(1)} 50%{box-shadow:0 0 14px rgba(139,92,246,1),0 0 32px rgba(124,58,237,.8),0 0 54px rgba(109,40,217,.35);filter:brightness(1.16)} }
@keyframes dumpBolt{ from{transform:scale(1) rotate(-8deg);opacity:.85} to{transform:scale(1.25) rotate(8deg);opacity:1} }
.bgcopy .gallery-nav{
            position: absolute; bottom: 16px; right: 16px;
            display: flex; gap: 8px; z-index: 4;
        }
.bgcopy .gallery-nav-btn{
            width: 36px; height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: #555;
            transition: all 0.2s;
        }
.bgcopy .gallery-nav-btn:hover{ background: #fff; color: #111; border-color: #999; }
.bgcopy .gallery-thumbs{
            display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
        }
.bgcopy .gallery-thumbs::-webkit-scrollbar{ display: none; }
.bgcopy .gallery-thumb{
            width: 72px; height: 72px; flex-shrink: 0;
            border-radius: 3px;
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            transition: border-color 0.2s;
        }
.bgcopy .gallery-thumb.is-active{ border-color: #111; }
.bgcopy .gallery-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.bgcopy /* ── 이미지 라이트박스(풀스크린 뷰어) ── */
        #imgLightbox{ position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.93); display: none; align-items: center; justify-content: center; }
.bgcopy #imgLightbox.open{ display: flex; }
.bgcopy #imgLightbox .lb-img{ max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 50px rgba(0,0,0,0.5); user-select: none; -webkit-user-drag: none; }
.bgcopy #imgLightbox .lb-close{ position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.13); color: #fff; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.bgcopy #imgLightbox .lb-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.bgcopy #imgLightbox .lb-prev{ left: 16px; }
.bgcopy #imgLightbox .lb-next{ right: 16px; }
.bgcopy #imgLightbox .lb-close:hover, .bgcopy #imgLightbox .lb-nav:hover{ background: rgba(255,255,255,0.3); }
.bgcopy #imgLightbox .lb-counter{ position: absolute; top: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-weight: 700; background: rgba(0,0,0,0.45); padding: 5px 13px; border-radius: 20px; }
.bgcopy #imgLightbox .lb-thumbs{ position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; max-width: 92vw; overflow-x: auto; padding: 6px; scrollbar-width: none; }
.bgcopy #imgLightbox .lb-thumbs::-webkit-scrollbar{ display: none; }
.bgcopy #imgLightbox .lb-thumbs img{ width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: 6px; opacity: 0.45; cursor: pointer; border: 2px solid transparent; transition: opacity .15s; }
.bgcopy #imgLightbox .lb-thumbs img.on{ opacity: 1; border-color: #fff; }
.bgcopy .gallery-main img{ cursor: zoom-in; }
.bgcopy /* ── 품절 도장 (목록·메인과 동일한 sold_out_sm.png) ── */
        .soldout-stamp{
            position: absolute; inset: 0; z-index: 9; pointer-events: none;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.66);
        }
.bgcopy .soldout-stamp img{
            width: 62% !important; height: auto !important; max-width: 260px !important;
            aspect-ratio: 1 / 1; object-fit: contain !important;
            transform: rotate(-9deg);
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
            cursor: default;
        }
.bgcopy /* 품절이면 발주 버튼을 못 누르게 (회색 처리) */
        .is-soldout-btn, .bgcopy .is-soldout-btn:hover{
            background: #e9e9ec !important; color: #9a9aa2 !important;
            border-color: #e0e0e5 !important; cursor: not-allowed !important;
            box-shadow: none !important; transform: none !important;
        }
.bgcopy .soldout-notice{
            display: flex; align-items: center; gap: 8px;
            margin: 10px 0 4px; padding: 12px 14px;
            background: #fff1f2; border: 1px solid #fecdd3; border-radius: 8px;
            font-size: 13px; font-weight: 800; color: #be123c; line-height: 1.5;
        }
@media (max-width: 768px){.bgcopy #imgLightbox .lb-nav{ width: 40px; height: 40px; font-size: 16px; }
.bgcopy #imgLightbox .lb-img{ max-height: 70vh; }
.bgcopy #imgLightbox .lb-thumbs img{ width: 44px; height: 44px; }}
.bgcopy /* ── PRODUCT INFO ── */
        .product-info-wrap{ display: flex; flex-direction: column; gap: 0; }
.bgcopy .product-brand-tag{
            font-family: "Montserrat", sans-serif;
            font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--text-muted);
            margin-bottom: 10px;
        }
.bgcopy .product-title{
            font-size: clamp(20px, 2.5vw, 28px);
            font-weight: 800; letter-spacing: -0.03em;
            color: #111; line-height: 1.3; margin-bottom: 24px;
        }
.bgcopy .product-meta{
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 10px; flex-wrap: wrap;
        }
.bgcopy .star-row{ display: flex; align-items: center; gap: 4px; }
.bgcopy .stars{ color: var(--brand); font-size: 12px; letter-spacing: 1px; }
.bgcopy .review-count{ font-size: 11px; color: var(--text-muted); font-weight: 600; }
.bgcopy .meta-divider{ width: 1px; height: 12px; background: var(--border); }
.bgcopy .meta-tag{
            font-size: 10px; font-weight: 700; padding: 3px 8px;
            border: 1px solid var(--border); border-radius: 20px;
            color: var(--text-muted); letter-spacing: 0.04em;
        }
.bgcopy /* 📦 '한개씩도 출고 가능' 뱃지 — 입수량 자유(free_qty_mode) 상품 전용.
           소구점이라 눈에 띄어야 하지만, .bgcopy 바로 아래 상품명보다 세면 안 되니
           채도만 주고 크기는 meta-tag 급으로 유지한다. */
        .free-qty-badge{
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11px; font-weight: 800; letter-spacing: -0.01em;
            padding: 4px 10px; border-radius: 20px;
            color: #0b6b3f;
            background: #e7f7ee;
            border: 1px solid #b8e6cd;
            white-space: nowrap;
        }
.bgcopy .free-qty-badge i{ font-size: 10px; }
.bgcopy /* 💊 건강기능식품 뱃지 — 낱개출고(초록)와 나란히 서도 구분되게 보라 계열. */
        .health-badge{
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11px; font-weight: 800; letter-spacing: -0.01em;
            padding: 4px 10px; border-radius: 20px;
            color: #5b21b6;
            background: #f3ecff;
            border: 1px solid #d8c5f7;
            white-space: nowrap;
        }
.bgcopy .health-badge i{ font-size: 10px; }
@media (max-width: 768px){.bgcopy .health-badge{ font-size: 10.5px; padding: 3px 9px; }}
.bgcopy /* 💊 상세설명 맨 위 배너 */
        .health-banner{
            display: flex; align-items: center; justify-content: center; gap: 9px;
            margin: 6px 0 0; padding: 14px 18px;
            border-radius: 14px;
            background: linear-gradient(135deg, #f6f0ff, #efe6fd);
            border: 1px solid #d8c5f7;
            color: #5b21b6;
            font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
            text-align: center; line-height: 1.5;
        }
.bgcopy .health-banner b{ font-weight: 800; }
.bgcopy .health-banner i{ font-size: 16px; flex-shrink: 0; }
@media (max-width: 768px){.bgcopy .health-banner{ font-size: 13px; padding: 12px 14px; gap: 7px; }
.bgcopy .health-banner i{ font-size: 14px; }}
.bgcopy /* 📦 상세설명 맨 위 배너 — 위 meta 뱃지의 '크게 한 번 더' 버전.
           설명을 정독하는 자리라 문장으로 풀어 쓴다. */
        .free-qty-banner{
            display: flex; align-items: center; justify-content: center; gap: 9px;
            margin: 6px 0 0; padding: 14px 18px;
            border-radius: 14px;
            background: linear-gradient(135deg, #eafaf1, #e2f6ec);
            border: 1px solid #b8e6cd;
            color: #0b6b3f;
            font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
            text-align: center; line-height: 1.5;
        }
.bgcopy .free-qty-banner b{ font-weight: 800; }
.bgcopy .free-qty-banner i{ font-size: 16px; flex-shrink: 0; }
@media (max-width: 768px){.bgcopy .free-qty-banner{ font-size: 13px; padding: 12px 14px; gap: 7px; }
.bgcopy .free-qty-banner i{ font-size: 14px; }}
@media (max-width: 768px){.bgcopy .free-qty-badge{ font-size: 10.5px; padding: 3px 9px; }}
.bgcopy .price-block{
            background: linear-gradient(180deg, #ffffff, #fafbfc);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 22px 24px;
            margin-bottom: 28px;
            box-shadow: 0 6px 22px rgba(17, 24, 39, 0.05);
        }
.bgcopy /* 메인 공급가 (hero) */
        .price-row{ display: flex; align-items: center; gap: 11px; }
.bgcopy .price-label{
            font-size: 12px; font-weight: 800; color: var(--text-muted);
            width: 74px; flex-shrink: 0; letter-spacing: 0.01em; white-space: nowrap;
        }
.bgcopy .price-current-lg{ font-size: 34px; font-weight: 900; color: #111; letter-spacing: -0.035em; line-height: 1; }
.bgcopy /* 가격 단위 표시 문구 (공급가 밑) */
        .price-unit-label{ margin-top: 7px; font-size: 13px; font-weight: 800; color: #2563eb; letter-spacing: -0.01em; }
.bgcopy .price-rate-lg{ font-size: 18px; font-weight: 900; color: #e63946; }
.bgcopy .price-original-sm{ font-size: 13px; color: #bbb; text-decoration: line-through; font-weight: 500; }
.bgcopy .price-save{
            font-size: 11px; font-weight: 700; color: #e63946;
            background: #fef2f2; padding: 3px 8px; border-radius: 20px;
        }
.bgcopy /* 정보 행 (최저판매가 / 배송비) */
        .price-sub-row{
            display: flex; align-items: center; gap: 11px;
            padding-top: 13px; margin-top: 13px;
            border-top: 1px dashed #e9e9ee;
        }
.bgcopy .price-sub-label{ font-size: 12px; font-weight: 700; color: var(--text-muted); width: 74px; flex-shrink: 0; white-space: nowrap; }
.bgcopy .price-sub-val{ font-size: 19px; font-weight: 800; color: #222; letter-spacing: -0.02em; }
.bgcopy .price-pending{ color: var(--text-muted) !important; font-size: 20px !important; letter-spacing: -0.01em; }
.bgcopy /* 판매가가이드 = 중요 정보, .bgcopy 강조 박스 */
        #minSellRow{
            align-items: center;
            margin: 14px -14px 0; padding: 12px 14px;
            background: linear-gradient(135deg, #fff5f6 0%, #ffe9ec 60%, #ffe1e6 100%);
            border: 1px solid #fbcdd5; border-top: 1px solid #fbcdd5;
            border-radius: 13px;
            box-shadow: 0 4px 14px rgba(225, 29, 72, 0.08), inset 0 1px 0 rgba(255,255,255,0.5);
        }
.bgcopy #minSellRow .price-sub-label{
            color: #e11d48; font-weight: 800; letter-spacing: -0.01em;
        }
.bgcopy #minSellVal{ font-size: 23px !important; color: #e11d48 !important; font-weight: 900; display: inline-flex; align-items: center; }
.bgcopy #minSellVal .ms-unit{ display: inline-flex; margin-left: 4px; }
.bgcopy #minSellVal .ms-unit svg{ width: 19px; height: 19px; fill: #e11d48; }
.bgcopy .ship-free{ color: #16a34a; }
.bgcopy /* 네이버 최저가 비교 박스 */
        .naver-compare{
            position: relative; overflow: hidden;
            margin: 16px -14px 0; padding: 14px 16px;
            background:
                linear-gradient(135deg, #e9fbef 0%, #f3fdf6 38%, #e4f9ee 70%, #d9f6e6 100%);
            border: 1px solid #bbf7d0; border-radius: 14px;
            box-shadow: 0 6px 20px rgba(3, 199, 90, 0.10), inset 0 1px 0 rgba(255,255,255,0.6);
        }
.bgcopy /* 은은한 체크무늬 패턴 (그라데이션 위로 살짝 비침) */
        .naver-compare::before{
            content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
            background-image:
                linear-gradient(rgba(3,199,90,0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(3,199,90,0.06) 1px, transparent 1px);
            background-size: 22px 22px, 22px 22px;
            mask-image: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 70%, transparent);
            -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 70%, transparent);
        }
.bgcopy /* 은은한 광택 하이라이트 */
        .naver-compare::after{
            content: ""; position: absolute; top: -40%; right: -10%; width: 55%; height: 180%;
            pointer-events: none; z-index: 0; transform: rotate(18deg);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
        }
.bgcopy .naver-compare > *{ position: relative; z-index: 1; }
.bgcopy .naver-compare-head{ display: flex; align-items: center; gap: 8px; }
.bgcopy .nc-logo{
            width: 21px; height: 21px; border-radius: 6px; background: #03c75a; color: #fff;
            font-size: 13px; font-weight: 900; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
        }
.bgcopy .nc-lbl{ font-size: 12px; font-weight: 800; color: #15803d; letter-spacing: -0.01em; }
.bgcopy .nc-price{ margin-left: auto; text-decoration: none; display: flex; align-items: center; gap: 3px; }
.bgcopy #naverPriceVal{ font-size: 20px; font-weight: 900; color: #03c75a; letter-spacing: -0.02em; }
.bgcopy .nc-arrow{ font-size: 12px; color: #03c75a; font-weight: 900; }
.bgcopy .nc-item{ display: block; font-size: 11px; color: #5b8c72; line-height: 1.4; margin-top: 7px; }
.bgcopy #naverCheapBadge{ margin-top: 10px !important; }
.bgcopy /* ── ORDER LIST ── */
        .order-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bgcopy .order-item{
            display: flex; align-items: center; gap: 10px;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 8px; padding: 10px 14px;
        }
.bgcopy .order-item-name{ flex: 1; font-size: 13px; font-weight: 700; color: #111; }
.bgcopy .order-item-qty{ display: flex; align-items: center; gap: 6px; }
.bgcopy .order-qty-btn{
            width: 26px; height: 26px; border: 1px solid var(--border);
            border-radius: 4px; font-size: 11px; color: #555;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.15s;
        }
.bgcopy .order-qty-btn:hover{ border-color: #111; color: #111; }
.bgcopy .order-qty-input{
            width: 44px; height: 26px; text-align: center;
            border: 1px solid var(--border); border-radius: 4px;
            font-size: 13px; font-weight: 700; outline: none;
        }
.bgcopy .order-item-price{ font-size: 12px; font-weight: 700; color: #111; white-space: nowrap; }
.bgcopy .order-item-remove{
            width: 22px; height: 22px; border-radius: 50%; border: none;
            background: #eee; color: #999; font-size: 11px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s; flex-shrink: 0;
        }
.bgcopy .order-item-remove:hover{ background: #111; color: #fff; }
.bgcopy .order-total{
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 4px 0; margin-top: 4px;
            font-size: 13px; font-weight: 700;
        }
.bgcopy .order-total-price{ font-size: 16px; font-weight: 900; color: #111; }
.bgcopy /* ── KEY INFO ── */
        .key-info-block{
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 0; border: 1px solid var(--border); border-radius: 8px;
            overflow: hidden; margin-bottom: 24px; font-size: 12px;
        }
.bgcopy .key-info-item{
            display: flex; flex-direction: column;
            padding: 10px 14px; border-bottom: 1px solid var(--border);
            border-right: 1px solid var(--border);
        }
.bgcopy .key-info-item:nth-child(even){ border-right: none; }
.bgcopy .key-info-item:nth-last-child(-n+2){ border-bottom: none; }
.bgcopy .key-info-label{ font-size: 10px; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; letter-spacing: 0.04em; }
.bgcopy .key-info-val{ font-weight: 700; color: #111; }
.bgcopy /* ── 발송일 안내 ── */
        .dispatch-block{ margin: 4px 0 24px; }
.bgcopy .dispatch-label{ font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bgcopy .dispatch-label i{ color: #f59e0b; font-size: 12px; }
.bgcopy .dispatch-box{ border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 13px; font-weight: 700; color: #333; line-height: 1.6; white-space: pre-line; background: var(--surface); }
.bgcopy /* 자사몰 비고 (안내문구) — 눈에 띄게 파란 카드 */
        .mall-note-box{ margin: 4px 0 20px; border: 1px solid #bfe0f2; background: #f0f8fd; border-radius: 12px; padding: 13px 15px; font-size: 13px; font-weight: 700; color: #14506e; line-height: 1.55; display: flex; align-items: flex-start; gap: 9px; white-space: pre-line; }
.bgcopy .mall-note-box i{ color: #2b8fc7; font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.bgcopy /* ── OPTIONS ── */
        .option-section{ margin-bottom: 24px; }
.bgcopy .option-label{
            font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
            text-transform: uppercase; color: #555; margin-bottom: 10px;
        }
.bgcopy .option-chips{ display: flex; gap: 8px; flex-wrap: wrap; }
.bgcopy .option-chip{
            padding: 8px 16px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 12px; font-weight: 600; color: #555;
            cursor: pointer; transition: all 0.2s;
        }
.bgcopy .option-chip:hover{ border-color: #999; color: #111; }
.bgcopy .option-chip.is-active{ border-color: #111; background: #111; color: #fff; }
.bgcopy .option-chip.is-disabled{ opacity: 0.35; cursor: not-allowed; }
.bgcopy .option-chip.is-soldout{
            color: #b0b0b0; background: #f4f4f5; border-color: #e4e4e7;
            text-decoration: line-through; cursor: not-allowed; opacity: 0.9;
        }
.bgcopy .option-chip.is-soldout:hover{ border-color: #e4e4e7; color: #b0b0b0; }
.bgcopy /* 옵션 안 고르고 발주 눌렀을 때 옵션 영역을 흔들어 알려준다 */
        @keyframes optionShake{
            0%, 100% { transform: translateX(0); }
            15%, 45%, 75% { transform: translateX(-6px); }
            30%, 60%, 90% { transform: translateX(6px); }
        }
.bgcopy .option-shake{ animation: optionShake 0.45s ease; }
.bgcopy .option-shake .option-label{ color: #e02b2b; }
.bgcopy /* ── QUANTITY ── */
        .qty-section{ margin-bottom: 28px; }
.bgcopy .qty-wrap{
            display: inline-flex; align-items: center;
            border: 1px solid var(--border); border-radius: 4px;
            overflow: hidden;
        }
.bgcopy .qty-btn{
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; color: #555;
            transition: background 0.2s, color 0.2s;
        }
.bgcopy .qty-btn:hover{ background: var(--surface); color: #111; }
.bgcopy .qty-input{
            width: 52px; height: 40px;
            border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
            text-align: center; font-family: inherit;
            font-size: 14px; font-weight: 700; color: #111;
            outline: none; background: #fff;
        }
.bgcopy /* ── CTA BUTTONS ── */
        .cta-row{ display: flex; gap: 8px; margin-bottom: 8px; }
.bgcopy /* 발주 버튼 2열 배치 */
        .cta-grid{ display: flex; gap: 8px; margin-bottom: 8px; }
.bgcopy .cta-grid > *{ flex: 1; width: auto; min-width: 0; margin-bottom: 0; }
.bgcopy .btn-brand-buy, .bgcopy .btn-kakao, .bgcopy .btn-buy, .bgcopy .btn-cart, .bgcopy .btn-band-download, .bgcopy .sub-action-btn{
            height: 52px; border-radius: 10px;
            font-size: 13px; font-weight: 800;
            display: flex; align-items: center; justify-content: center; gap: 7px;
            transition: background 0.15s, transform 0.15s, color 0.15s, border-color 0.15s;
            letter-spacing: -0.01em;
        }
.bgcopy .btn-brand-buy{
            width: 100%; background: var(--brand); border: none;
            color: #111; margin-bottom: 8px;
        }
.bgcopy .btn-brand-buy:hover{ background: #f5d43a; transform: translateY(-1px); }
.bgcopy .btn-brand-buy:active{ transform: translateY(0); }
.bgcopy .btn-kakao{
            width: 100%; background: #111; border: none;
            color: #fff; margin-bottom: 8px;
        }
.bgcopy .btn-kakao:hover{ background: #2a2a2a; transform: translateY(-1px); }
.bgcopy .btn-kakao:active{ transform: translateY(0); }
.bgcopy .btn-buy{
            flex: 1; background: #fff; border: 1.5px solid #ddd; color: #555;
        }
.bgcopy .btn-buy:hover{ border-color: #111; color: #111; }
.bgcopy .btn-cart{
            flex: 1; background: #fff; border: 1.5px solid #ddd; color: #555;
        }
.bgcopy .btn-cart:hover{ background: #111; color: #fff; border-color: #111; }
.bgcopy .btn-band-download{
            display: none; width: 100%;
            background: #1EBC70; border: none; color: #fff;
            margin-bottom: 8px;
        }
.bgcopy .btn-band-download:hover{ background: #18a362; }
.bgcopy .btn-band-download.visible{ display: flex; }
.bgcopy /* 보조 버튼은 가로로 나란히 두면 글자 긴 버튼이 두 줄로 접혀 깨졌다.
           → 한 줄에 하나씩 세로로 쌓는다(실제 표시는 이미지 버튼 1 + 링크 공유 = 2줄). */
        .sub-actions{ display: flex; flex-direction: column; gap: 8px; }
.bgcopy .sub-action-btn{
            width: 100%;
            background: #fff; border: 1.5px solid #e8e8e8; color: #aaa;
            font-weight: 700; white-space: nowrap;
        }
.bgcopy .sub-action-btn:hover{ border-color: #bbb; color: #555; }
.bgcopy .sub-action-btn.is-liked{ color: #ef4444; border-color: #fca5a5; background: #fff5f5; }
.bgcopy /* ── DELIVERY INFO ── */
        .delivery-info{
            border: 1px solid var(--border); border-radius: 8px;
            padding: 16px 18px; margin-bottom: 24px;
        }
.bgcopy .delivery-row{
            display: flex; gap: 12px; align-items: flex-start;
            padding: 8px 0;
        }
.bgcopy .delivery-row + .delivery-row{ border-top: 1px solid var(--border); }
.bgcopy .delivery-icon{ font-size: 13px; color: var(--text-muted); width: 20px; flex-shrink: 0; padding-top: 1px; }
.bgcopy .delivery-key{ font-size: 11px; font-weight: 700; color: var(--text-muted); width: 56px; flex-shrink: 0; padding-top: 1px; }
.bgcopy .delivery-val{ font-size: 12px; font-weight: 600; color: #333; line-height: 1.6; }
.bgcopy .delivery-val em{ font-style: normal; color: #111; font-weight: 800; }
.bgcopy /* ── TABS ── */
        .tabs-section{ padding: 64px 0; border-top: 1px solid var(--border); }
.bgcopy .tab-bar{
            display: flex; border-bottom: 1px solid var(--border);
            margin-bottom: 48px; overflow-x: auto; scrollbar-width: none;
        }
.bgcopy .tab-bar::-webkit-scrollbar{ display: none; }
.bgcopy .tab-btn{
            font-size: 13px; font-weight: 700; color: var(--text-muted);
            padding: 14px 28px; white-space: nowrap;
            position: relative; transition: color 0.2s;
        }
.bgcopy .tab-btn::after{
            content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
            height: 2px; background: #111; transform: scaleX(0); transition: transform 0.2s;
        }
.bgcopy .tab-btn:hover{ color: #111; }
.bgcopy .tab-btn.is-active{ color: #111; }
.bgcopy .tab-btn.is-active::after{ transform: scaleX(1); }
.bgcopy .tab-panel{ display: none; }
.bgcopy .tab-panel.is-active{ display: block; }
.bgcopy /* ── DETAIL CONTENT ── */
        .detail-content{ max-width: 800px; margin: 0 auto; }
.bgcopy .detail-section{ margin-bottom: 48px; }
.bgcopy /* 상세 이미지/설명 폭 제한 — PC에서 너무 커지지 않게 가운데 정렬 */
        #detailImgsWrap{ max-width: 620px; margin: 0 auto; }
.bgcopy .detail-section-title{
            font-size: 16px; font-weight: 800; color: #111;
            margin-bottom: 16px; padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }
.bgcopy .detail-img-wrap{
            background: var(--surface); border-radius: 8px;
            overflow: hidden; margin-bottom: 16px;
            aspect-ratio: 4/3;
        }
.bgcopy .detail-img-wrap img{ width: 100%; height: 100%; object-fit: cover; }
.bgcopy .detail-text{ font-size: 14px; color: #444; line-height: 1.8; }
.bgcopy /* ═══════ 소구점(상세 설명) — 카페24 원본처럼 깔끔한 문단 띄우기 ═══════ */
        .appeal-wrap{ max-width: 600px; margin: 0 auto; padding: 18px 22px 44px; text-align: center; }
.bgcopy /* 문단 = 빈 줄로 띄움 (카드/박스 없음, .bgcopy 원본 느낌) */
        .appeal-block{
            margin: 0 0 30px;            /* 문단 사이 여백 = 원본의 빈 줄 */
            opacity: 0; transform: translateY(10px);
            animation: appealUp 0.5s ease forwards;
        }
.bgcopy .appeal-block:last-child{ margin-bottom: 0; }
@keyframes appealUp{ to { opacity: 1; transform: translateY(0); } }
.bgcopy /* 헤드라인(이모지로 시작하는 줄) — 살짝 굵게 강조 */
        /* 상세 맨 위 = 상품명 타이틀 (강조) */
        .appeal-title{ margin: 2px 0 40px !important; text-align: center; }
.bgcopy .appeal-title .at-text{
            display: inline-block; position: relative;
            font-size: 28px; font-weight: 900; color: #1a1a1a;
            letter-spacing: -0.025em; line-height: 1.4; padding-bottom: 15px;
        }
.bgcopy .appeal-title .at-text::after{
            content: ""; position: absolute; left: 50%; bottom: 0;
            transform: translateX(-50%);
            width: 58px; height: 4px; border-radius: 4px;
            background: linear-gradient(90deg, #ff8a3d, #ff5ea0);
        }
.bgcopy .appeal-title .at-eyebrow{
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
            color: #ff6b35; background: #fff2ec; border: 1px solid #ffd9c7;
            padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
        }
.bgcopy .appeal-headline{
            font-size: 19px; font-weight: 800; color: #111; line-height: 1.7;
            letter-spacing: -0.01em; margin-bottom: 2px;
        }
.bgcopy .appeal-headline .ap-emoji{ font-size: 20px; }
.bgcopy /* 본문 줄 */
        .appeal-body{ font-size: 17.5px; color: #333; line-height: 1.9; font-weight: 500; }
.bgcopy .appeal-body .ap-line{ display: block; }
.bgcopy /* 핵심 강조 줄(= 로 시작하거나 ! 로 끝나는) — 살짝 진하게 */
        .appeal-body .ap-line.ap-strong{ color: #111; font-weight: 700; }
.bgcopy /* 헤드라인 + 본문 붙는 간격 */
        .appeal-block.has-head .appeal-body{ margin-top: 0; }
.bgcopy /* 판매가 안내 — 한 줄로 쭉, .bgcopy 눈에 띄게 */
        .appeal-block.appeal-price{ margin-top: 34px; }
.bgcopy .ap-price-pill{
            display: inline-flex; align-items: center; gap: 7px;
            background: #fff3f3; border: 1.5px solid #ffd0d0; color: #e03131;
            font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em;
            padding: 11px 22px; border-radius: 50px;
            /* ⚠️ 예전엔 white-space:nowrap 이라 문구가 길면 모바일에서 화면 밖으로 삐져나갔다.
               가로폭을 넘지 않게 하고, 넘칠 때만 줄바꿈되게 한다. */
            max-width: 100%; white-space: normal; word-break: keep-all;
            text-align: center; line-height: 1.5;
        }
@media (max-width: 480px){.bgcopy .ap-price-pill{
                font-size: 13.5px; padding: 10px 16px; border-radius: 20px;
            }}
.bgcopy .spec-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.bgcopy .spec-table tr{ border-bottom: 1px solid var(--border); }
.bgcopy .spec-table tr:first-child{ border-top: 1px solid var(--border); }
.bgcopy .spec-table th{ width: 30%; background: var(--surface); padding: 12px 16px; font-weight: 700; color: #555; text-align: left; }
.bgcopy .spec-table td{ padding: 12px 16px; color: #333; font-weight: 500; }
.bgcopy /* ── REVIEWS ── */
        .review-summary{
            display: flex; gap: 48px; align-items: center;
            background: var(--surface); border-radius: 12px;
            padding: 32px; margin-bottom: 32px;
            flex-wrap: wrap;
        }
.bgcopy .review-score-big{ text-align: center; }
.bgcopy .score-num{ font-family: "Montserrat", sans-serif; font-size: 56px; font-weight: 900; color: #111; line-height: 1; }
.bgcopy .score-stars{ color: var(--brand); font-size: 18px; letter-spacing: 2px; margin: 8px 0 4px; }
.bgcopy .score-total{ font-size: 12px; color: var(--text-muted); font-weight: 600; }
.bgcopy .review-bars{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bgcopy .bar-row{ display: flex; align-items: center; gap: 10px; }
.bgcopy .bar-label{ font-size: 11px; font-weight: 700; color: var(--text-muted); width: 16px; text-align: right; }
.bgcopy .bar-track{ flex: 1; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.bgcopy .bar-fill{ height: 100%; background: var(--brand); border-radius: 3px; transition: width 0.6s ease; }
.bgcopy .bar-count{ font-size: 11px; font-weight: 600; color: var(--text-muted); width: 24px; }
.bgcopy .review-card{
            padding: 24px 0; border-bottom: 1px solid var(--border);
        }
.bgcopy .review-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.bgcopy .reviewer{ display: flex; align-items: center; gap: 10px; }
.bgcopy .reviewer-avatar{
            width: 36px; height: 36px; border-radius: 50%;
            background: var(--surface2); display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 800; color: var(--text-muted);
        }
.bgcopy .reviewer-name{ font-size: 13px; font-weight: 700; color: #111; }
.bgcopy .review-stars{ color: var(--brand); font-size: 11px; }
.bgcopy .review-date{ font-size: 11px; color: var(--text-muted); }
.bgcopy .review-body{ font-size: 13px; color: #555; line-height: 1.7; margin-top: 8px; }
.bgcopy .review-option{ font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.bgcopy /* ── RELATED PRODUCTS ── */
        .related-section{ padding: 64px 0; border-top: 8px solid var(--surface); }
.bgcopy .section-head{
            display: flex; align-items: baseline; justify-content: space-between;
            margin-bottom: 32px; border-bottom: 1px solid var(--border); padding-bottom: 20px;
        }
.bgcopy .section-title{ font-size: 22px; font-weight: 800; color: #111; letter-spacing: -0.03em; }
.bgcopy .section-more{
            font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
            display: flex; align-items: center; gap: 6px; transition: color 0.2s;
        }
.bgcopy .section-more:hover{ color: #111; }
.bgcopy .related-grid{
            display: grid; grid-template-columns: repeat(5, 1fr);
            gap: 1px; background: var(--border); border: 1px solid var(--border);
        }
@media (max-width: 1024px){.bgcopy .related-grid{ grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 600px){.bgcopy .related-grid{ grid-template-columns: repeat(2, 1fr); }}
.bgcopy .rel-card{ background: var(--bg); transition: background 0.2s; cursor: pointer; }
.bgcopy .rel-card:hover{ background: #fafafa; }
.bgcopy .rel-thumb{ aspect-ratio: 3/4; overflow: hidden; background: var(--surface2); }
.bgcopy .rel-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.bgcopy .rel-card:hover .rel-thumb img{ transform: scale(1.04); }
.bgcopy .rel-info{ padding: 12px 14px 16px; }
.bgcopy .rel-brand{ font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.bgcopy .rel-name{ font-size: 12px; font-weight: 500; color: #333; line-height: 1.5; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bgcopy .rel-price{ font-size: 14px; font-weight: 800; color: #111; }
.bgcopy .rel-orig{ font-size: 11px; color: #bbb; text-decoration: line-through; margin-left: 4px; font-weight: 500; }
.bgcopy .rel-rate{ font-size: 11px; font-weight: 800; color: #e63946; margin-left: 4px; }
.bgcopy /* ── FOOTER ── */
        .site-footer{ background: #f7f7f7; border-top: 1px solid var(--border); }
.bgcopy .footer-top-bar{ border-bottom: 1px solid var(--border); padding: 20px 32px; max-width: 1480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bgcopy .footer-top-bar span{ font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
.bgcopy .footer-cs-group{ display: flex; flex-direction: column; gap: 2px; }
.bgcopy .footer-cs-label{ font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; }
.bgcopy .footer-cs{ font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 800; color: #111; }
.bgcopy .footer-main{ max-width: 1480px; margin: 0 auto; padding: 40px 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 1024px){.bgcopy .footer-main{ grid-template-columns: 1fr 1fr; }}
@media (max-width: 600px){.bgcopy .footer-main{ grid-template-columns: 1fr 1fr; gap: 24px; }
.bgcopy .footer-brand-col{ grid-column: 1/-1; }}
.bgcopy .footer-col-title{ font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: #111; margin-bottom: 16px; }
.bgcopy .footer-col-links{ display: flex; flex-direction: column; gap: 10px; }
.bgcopy .footer-col-links a{ font-size: 12px; font-weight: 500; color: var(--text-muted); transition: color 0.2s; }
.bgcopy .footer-col-links a:hover{ color: #111; }
.bgcopy .footer-brand-col .footer-logo{ font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 800; color: #111; letter-spacing: 0.1em; margin-bottom: 16px; }
.bgcopy .footer-brand-col .footer-desc{ font-size: 12px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.bgcopy .footer-sns{ display: flex; gap: 10px; }
.bgcopy .footer-sns a{ width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; transition: color 0.2s, border-color 0.2s; }
.bgcopy .footer-sns a:hover{ color: #111; border-color: #999; }
.bgcopy .footer-bottom{ border-top: 1px solid var(--border); padding: 20px 32px; max-width: 1480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.bgcopy .footer-bottom p{ font-size: 11px; color: #aaa; font-weight: 500; line-height: 1.7; }
.bgcopy .footer-bottom-links{ display: flex; gap: 16px; }
.bgcopy .footer-bottom-links a{ font-size: 11px; font-weight: 600; color: #aaa; transition: color 0.2s; }
.bgcopy .footer-bottom-links a:hover{ color: #666; }
.bgcopy /* ── 이미지 스켈레톤 로딩 ── */
        @keyframes shimmer{
            0% { background-position: -600px 0; }
            100% { background-position: 600px 0; }
        }
.bgcopy .img-skeleton{
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 600px 100%;
            animation: shimmer 1.4s infinite linear;
        }
.bgcopy .img-wrap{ position: relative; }
.bgcopy .img-wrap img{ transition: opacity 0.3s ease; }
.bgcopy .img-wrap img.loading{ opacity: 0; position: absolute; inset: 0; }
.bgcopy .img-wrap img.loaded{ opacity: 1; position: static; }
.bgcopy .img-skeleton-layer{
            position: absolute; inset: 0; border-radius: inherit;
            background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
            background-size: 600px 100%;
            animation: shimmer 1.4s infinite linear;
            transition: opacity 0.3s ease;
        }
.bgcopy .img-skeleton-layer.hidden{ opacity: 0; pointer-events: none; }
.bgcopy ::-webkit-scrollbar{ width: 5px; }
.bgcopy ::-webkit-scrollbar-track{ background: #fff; }
.bgcopy ::-webkit-scrollbar-thumb{ background: #ddd; border-radius: 10px; }
 /* ── 모바일 헤더/레이아웃 ── */
        @media (max-width: 768px){
            .bgcopy .header-top {
                padding: 0 7px 0 14px !important;
                height: 52px;
                grid-template-columns: auto auto;
                gap: 8px;
            }
            .bgcopy .header-logo img { height: 22px; }
            .bgcopy .header-gnb { display: none; }
            .bgcopy .grade-view-select { display: none !important; }
            .bgcopy #header-auth { display: none !important; }
            .bgcopy .hamburger-btn { display: flex !important; }
            .bgcopy .header-actions { gap: 2px; }
            .bgcopy .header-actions .icon-btn { width: 38px; height: 38px; font-size: 16px; }
            .bgcopy .hamburger-btn { width: 38px; height: 38px; font-size: 16px; margin-left: -4px; margin-right: -4px; }

            /* 상품 상세 모바일 */
            .bgcopy .product-detail { padding: 20px 0 60px; gap: 20px; }
            .bgcopy .gallery-thumb { width: 60px; height: 60px; }
            .bgcopy .price-block { padding: 16px; }
            .bgcopy .price-current-lg { font-size: 22px; }
            .bgcopy .price-sub-val { font-size: 22px; }

            /* 상세 텍스트 모바일 */
            .bgcopy #detailTextContent { font-size: 14px !important; line-height: 1.7 !important; padding: 12px 16px 28px !important; }
            .bgcopy .appeal-headline { font-size: 16px; }
            .bgcopy .appeal-headline .ap-emoji { font-size: 17px; }
            .bgcopy .appeal-body { font-size: 15px; line-height: 1.85; }
            .bgcopy .appeal-title .at-text { font-size: 22px; }

            /* 이미지 저장 버튼 모바일 숨김 */
            .bgcopy #imgDownloadBtn { display: none !important; }

            /* 브레드크럼 */
            .bgcopy .breadcrumb-bar { display: none; }

            /* 연관상품 */
            .bgcopy .related-section { padding: 32px 0; }
            .bgcopy .section-title { font-size: 16px; }
        }
 /* ── 공통 하단 탭바 ── */
        .bgcopy .common-tabbar{ position:fixed; bottom:calc(env(safe-area-inset-bottom) + 12px); left:12px; right:12px; z-index:1100; background:rgba(255,255,255,0.28); -webkit-backdrop-filter:blur(28px) saturate(190%); backdrop-filter:blur(28px) saturate(190%); border:1px solid rgba(255,255,255,0.45); border-radius:26px; height:62px; display:flex; align-items:stretch; box-shadow:0 8px 30px rgba(0,0,0,0.16), inset 0 1px 1px rgba(255,255,255,0.7); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; }
.bgcopy .common-tabbar.tb-hidden{ transform:translateY(160%); opacity:0; pointer-events:none; }
 /* PC(≥769px)에서는 하단 탭바 숨김 — 모바일 전용 네비 */
        @media (min-width: 769px){ .bgcopy .common-tabbar { display: none !important; } }
.bgcopy .common-tabbar a{ color:#2a2a2e; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:4px; transition:color 0.2s; }
.bgcopy .common-tabbar a i{ font-size:24px; line-height:1; }
.bgcopy .common-tabbar a span{ font-size:11px; font-weight:700; letter-spacing:0.02em; }
.bgcopy /* 탭바 장바구니 탭 — 아이콘 우상단 개수 배지 */
        .common-tabbar a{ position:relative; }
.bgcopy .common-tabbar .cart-count{
            position:absolute; top:1px; left:calc(50% + 7px);
            min-width:15px; height:15px; padding:0 4px;
            background:#ff3b30; color:#fff; font-size:9px; font-weight:900;
            border-radius:8px; display:flex; align-items:center; justify-content:center;
            line-height:1; box-shadow:0 1px 3px rgba(0,0,0,0.25);
        }
.bgcopy .common-tabbar .cart-count:empty, .bgcopy .common-tabbar .cart-count[data-empty="1"]{ display:none !important; }
.bgcopy .common-tabbar a.is-active{ color:#000; }
.bgcopy .common-tabbar a.is-active i{ transform:translateY(-1px); }
.bgcopy .common-tabbar a.is-active .tb-heart{ color:#ed4956; }
@media (max-width:768px){.bgcopy{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }}
.bgcopy /* ── 헤더 스크롤 숨김 ── */
        .site-header{ transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.bgcopy .site-header.header-hidden{ transform: translateY(-100%); }
.bgcopy /* ── TOP / BOTTOM 스크롤 버튼 ── */
        .scroll-fab{
            position: fixed; right: 22px; bottom: 30px; z-index: 1050;
            display: flex; flex-direction: column; gap: 9px;
        }
.bgcopy .scroll-fab button{
            width: 46px; height: 46px; border-radius: 50%;
            background: rgba(255,255,255,0.92); border: 1px solid #e3e3ea;
            box-shadow: 0 5px 16px rgba(0,0,0,0.13);
            color: #333; font-size: 15px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            transition: all 0.2s ease;
        }
.bgcopy .scroll-fab button:hover{ background: #111; color: #fff; border-color: #111; transform: translateY(-2px); }
.bgcopy .scroll-fab button:active{ transform: scale(0.94); }
@media (max-width: 768px){.bgcopy .scroll-fab{ right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); }}
.bgcopy /* ═══ 🥩 2026-09-02 한우 등급 뱃지 (추석 선물세트용) ═══
           1++ = 금박, .bgcopy 1+ = 은박.
           ⚠️ 3차 수정 — "고급스럽게" 요청.
              · 펄스 글로우(번쩍이는 노란 후광) 제거. 발광은 싸구려로 보이는 1순위 요인이고, .bgcopy 썸네일 위에서 뱃지 윤곽까지 흐리게 만들었다. 형태는 그림자와 테두리로 잡는다.
              · 광택 스윗은 남기되 느리고(5.5s) 옅게(0.55) — 있는 줄 모르게 지나가야 금속 느낌이 난다.
              · 앤티크 골드(#a97f2e) 테두리 + 안쪽 하이라이트 1줄로 금속판 두께를 준다.
           ⚠️ ::after 광택은 부모(.product-badge / .g-badge)의
              position:relative + overflow:hidden 에 기대고 있다. */
        .badge-g2p{
            background: linear-gradient(135deg,
                #c9992f 0%, #f6e3a4 17%, #e3c05a 36%, #fffaea 52%,
                #e3c05a 68%, #f6e3a4 85%, #c9992f 100%);
            color: #402808;
            border: 1px solid #a97f2e;
            justify-content: center;
            letter-spacing: 0.04em;
            text-shadow: 0 1px 0 rgba(255,255,255,0.55);
            box-shadow: 0 1px 3px rgba(0,0,0,0.3),
                        inset 0 1px 0 rgba(255,255,255,0.55);
        }
.bgcopy .badge-g2p::before{
            content: '★'; font-size: 7px; line-height: 1;
            display: inline-block; color: #8a6414;
        }
.bgcopy .badge-g2p::after{
            content: ''; position: absolute;
            top: -10%; left: -90%; width: 40%; height: 120%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
            transform: skewX(-22deg);
            animation: g2pGlint 5.5s ease-in-out infinite;
        }
@keyframes g2pGlint{
            0%, 72%, 100% { left: -90%; opacity: 0; }
            78%  { opacity: 1; }
            94%  { left: 150%; opacity: 0; }
        }
.bgcopy .badge-g1p{
            background: linear-gradient(135deg,
                #b3ac9c 0%, #f7f4ec 20%, #cec7b5 44%, #fdfcf8 56%,
                #cec7b5 72%, #f7f4ec 88%, #b3ac9c 100%);
            color: #35301f;
            border: 1px solid #8e8672;
            justify-content: center;
            letter-spacing: 0.04em;
            text-shadow: 0 1px 0 rgba(255,255,255,0.6);
            box-shadow: 0 1px 3px rgba(0,0,0,0.24),
                        inset 0 1px 0 rgba(255,255,255,0.6);
        }
.bgcopy .badge-g1p::before{
            content: '★'; font-size: 7px; line-height: 1;
            display: inline-block; color: #6f6753;
        }
@media (prefers-reduced-motion: reduce){.bgcopy .badge-g2p::after{ animation: none; opacity: 0; }}
@media (min-width: 1025px){.bgcopy, .bgcopy{ overflow-x: visible !important; max-width: none !important; }}
@keyframes slideUp{ from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* ── 우리가 보태는 것 ─────────────────────────────────────────────
   ★★ **참고 CSS 에 이미 있는 것은 여기서 다시 쓰지 말 것.** 전에 사진 크기
     (`.icon img`·`.product-thumb img`)와 간단보기 정보표(`.qv-info-grid`)를
     덮어써서 아이콘이 늘어나 보이고 값이 오른쪽으로 붙었다(2026-09-09 실측).
     참고에 없는 것만 여기 둔다. */
.bgcopy .thumb-action-btn.is-on{background:#111;color:#fff;border-color:#111}
/* ★★★ 예전에 여기 `.product-badge{position:absolute;left:8px;top:8px}` 을 써 뒀는데,
   그게 참고 화면의 `position:relative` 를 덮어 **뱃지 둘이 정확히 겹쳐 쌓였고**
   NEW 의 반짝임·HOT 의 불꽃도 죽었다(2026-09-09 실측). 자리는 참고 화면의
   `.product-badges`(flex) 가 잡는다 — **여기서 다시 잡지 말 것.** */

/* ★★ 큰 머리말(hero)은 **참고 메인의 <style> 을 그대로** 가져와 아래에 붙였다.
   내가 손으로 쓴 옛 규칙은 걷어냈다 — 겹치면 참고 것이 죽는다. */

/* 리뷰 뱃지 — 참고 화면 것은 바깥 js(mall-review-badge.js)에 있어 못 가져왔다.
   생김새만 같게 짠다. **개수는 사장님이 상품마다 손으로 적는다**(우리는 리뷰를
   받는 몰이 아니라 세어 줄 것이 없다). */
.bgcopy .review-badge{display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(90deg,#ff8a3d,#ff6b2c);line-height:1.4}
/* ★★★ **여기에 `.product-badge` 규칙을 다시 쓰지 말 것.** 참고 화면 것은
   `position:relative` + `overflow:hidden` 인데, 내가 `position:static` 으로 덮어
   **NEW 의 반짝임(`::after` 로 지나가는 빛)과 HOT 의 불꽃이 통째로 죽었다**.
   그 효과는 뱃지 안에서 잘려야 보이는데, static 이면 기준이 썸네일로 올라간다. */
/* 공급처 표시(A·B·C). ★ **`.g-badge` 라고 짓지 말 것** — 참고 화면에는 그 이름이
   한우 등급 뱃지로 이미 있다(`badge-g1p`·`badge-g2p` 과 한 묶음). */
.bgcopy .src-badge{background:#111;color:#fff;letter-spacing:.06em}

/* ── 참고 메인 화면의 가로 슬라이드 칸(이번주 TOP · 신제품 NEW) ──
   bg_main.html 의 <style> 에서 그대로 뽑아 `.bgcopy` 로 감쌌다.
   ★ 연기 애니메이션(smoke)·불꽃 제목은 뺐다 — 우리 화면에 없는 것이다. */
.bgcopy .section-head{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 32px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 20px;
        }
.bgcopy .section-title{
            font-family: "Pretendard Variable", Pretendard, sans-serif;
            font-size: 22px;
            font-weight: 800;
            color: #111;
            letter-spacing: -0.03em;
        }
.bgcopy .section-title span{ color: #111; }
.bgcopy .section-more{
            font-family: "Montserrat", sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
        }
.bgcopy .section-more:hover{ color: #111; }
.bgcopy .section-more i{ font-size: 10px; }
@media (min-width:768px){
.bgcopy .weekly-card-thumb .soldout-stamp img, .bgcopy .foryou-thumb .soldout-stamp img, .bgcopy .fz-thumb .soldout-stamp img{
                width: 50% !important; max-width: 110px !important;
            }
}
.bgcopy .weekly-section{
            padding: 60px 0 48px;
            background: #fff;
        }
.bgcopy #weeklySection .section-head{ border-bottom: none; padding-bottom: 6px; }
.bgcopy .np-row + .np-row{ margin-top: 22px; }
.bgcopy .np-row-label{
            display: flex; align-items: center; gap: 6px;
            font-size: 13px; font-weight: 800; color: #333;
            margin: 0 0 10px 2px; letter-spacing: -0.01em;
        }
@media (max-width: 768px){
.bgcopy .np-row + .np-row{ margin-top: 16px; }
.bgcopy .np-row-label{ font-size: 12px; margin-bottom: 8px; }
}
.bgcopy .newproduct-section .np-row-label{
            font-size: 14px; color: #1a1a1a;
            gap: 7px; margin: 0 0 12px 0;
            padding-left: 10px; position: relative;
        }
.bgcopy .newproduct-section .np-row-label::before{
            content: ''; position: absolute; left: 0; top: 50%;
            transform: translateY(-50%);
            width: 3px; height: 14px; border-radius: 2px;
            background: #f59e0b;
        }
.bgcopy .newproduct-section #newRowGoods .np-row-label::before{ background: #38bdf8; }
.bgcopy .newproduct-section .np-row + .np-row{ margin-top: 34px; }
.bgcopy .newproduct-section .weekly-scroll{ gap: 10px; padding: 10px 0 18px; }
.bgcopy .weekly-card.np-below{
            border-radius: 0;
            border: none;
            background: none;
            box-shadow: none;
            overflow: visible;
        }
.bgcopy .newproduct-section .weekly-card{ flex: 0 0 calc((100% - 50px) / 5.5); }
.bgcopy .weekly-card.np-below .weekly-card-thumb{
            aspect-ratio: 3 / 4;
            border-radius: 8px;
            overflow: hidden;
        }
.bgcopy .weekly-card.np-below .wk-review-top{
            position: absolute; top: 9px; right: 9px; z-index: 3;
            pointer-events: none;
            display: flex; justify-content: flex-end;
            max-width: calc(100% - 18px);
        }
.bgcopy .weekly-card.np-below .wk-review-top .mall-review-badge{ margin-bottom: 0; }
.bgcopy .weekly-card.np-below:hover{ transform: none; box-shadow: none; border-color: transparent; }
.bgcopy .weekly-card.np-below:hover .weekly-card-thumb img{ transform: scale(1.04); }
.bgcopy .np-below .np-info{ padding: 11px 2px 4px; }
.bgcopy .np-below .weekly-card-name{
            color: #333;
            /* 가격과 딱 붙게 (2026-08-21 요청) — margin 제거 + line-height 축소.
               1.35 는 상품명이 2줄일 때 줄간격이 답답하지 않은 최소선. */
            font-size: 13px; line-height: 1.35; font-weight: 500;
            margin: 0; letter-spacing: -0.01em;
            text-shadow: none;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
.bgcopy .np-below .weekly-card-price{
            color: #111;
            font-size: 16px; font-weight: 800; letter-spacing: -0.02em;
            margin: 0; text-shadow: none;
            line-height: 1.25;   /* 상품명 바로 아래에 붙게 */
        }
.bgcopy .newproduct-section .weekly-arrow{ width: 46px; height: 46px; font-size: 15px; }
.bgcopy .newproduct-section .weekly-scroll-wrap{ padding: 0 52px; }
.bgcopy .newproduct-section .weekly-scroll-wrap .weekly-arrow.prev{ left: 0; }
.bgcopy .newproduct-section .weekly-scroll-wrap .weekly-arrow.next{ right: 0; }
@media (min-width: 1560px){
.bgcopy .newproduct-section .weekly-scroll-wrap{ padding: 0; }
.bgcopy .newproduct-section .weekly-scroll-wrap .weekly-arrow.prev{ left: -54px; }
.bgcopy .newproduct-section .weekly-scroll-wrap .weekly-arrow.next{ right: -54px; }
}
.bgcopy .newproduct-section .weekly-scroll-wrap .weekly-scroll{ scroll-padding: 0; }
.bgcopy .newproduct-section .weekly-scroll{ scroll-snap-type: x proximity; }
@media (max-width: 768px){
.bgcopy .newproduct-section .weekly-scroll-wrap{ padding: 0; }
.bgcopy .newproduct-section .weekly-scroll{ gap: 7px; padding: 8px 10px 16px !important; }
.bgcopy .newproduct-section .weekly-card{ flex: 0 0 62% !important; border-radius: 7px; }
.bgcopy .newproduct-section .np-row + .np-row{ margin-top: 24px; }
.bgcopy .newproduct-section .np-row-label{ font-size: 13px; margin-bottom: 9px; padding-left: 9px; }
.bgcopy .weekly-card.np-below .weekly-card-thumb{ border-radius: 7px; }
.bgcopy .weekly-card.np-below .wk-review-top{ top: 6px; right: 6px; max-width: calc(100% - 12px); }
.bgcopy .np-below .np-info{ padding: 9px 1px 2px; }
.bgcopy .np-below .weekly-card-name{ font-size: 12.5px; margin-bottom: 0; }
.bgcopy .np-below .weekly-card-price{ font-size: 15.5px; }
}
.bgcopy .cat-section .section-head{ border-bottom: none; padding-bottom: 8px; margin-bottom: 14px; }
.bgcopy .weekly-section .section-title{ color: #111; }
.bgcopy .weekly-section .section-title span{ color: #111; }
.bgcopy .product-thumb:hover .thumb-video, .bgcopy .weekly-card-thumb:hover .thumb-video, .bgcopy .foryou-thumb:hover .thumb-video, .bgcopy .summer-product-thumb:hover .thumb-video, .bgcopy .thumb-playing .thumb-video{ opacity: 1; }
.bgcopy .product-thumb:hover .thumb-has-video::after, .bgcopy .weekly-card-thumb:hover .thumb-has-video::after, .bgcopy .foryou-thumb:hover .thumb-has-video::after, .bgcopy .summer-product-thumb:hover .thumb-has-video::after, .bgcopy .thumb-playing .thumb-has-video::after{ opacity: 0; }
.bgcopy .weekly-section .section-more{ color: #aaa; }
.bgcopy .weekly-section .section-more:hover{ color: #111; }
.bgcopy .weekly-header-meta{
            display: flex; align-items: center; gap: 12px;
        }
@media (max-width: 768px){
.bgcopy .weekly-section{ padding: 28px 0 24px; }
.bgcopy .weekly-section .section-head{
                align-items: flex-start;
                margin-bottom: 16px;
                padding-bottom: 12px;
            }
.bgcopy .weekly-section .weekly-header-meta{
                flex-wrap: wrap;
                gap: 8px;
                row-gap: 10px;
                flex: 1;
            }
.bgcopy .weekly-section .section-title{
                flex: 1 1 100%;
                font-size: 17px;
                white-space: nowrap;
            }
.bgcopy .weekly-section .section-more{
                font-size: 11px;
                white-space: nowrap;
                margin-top: 4px;
            }
.bgcopy .weekly-section .weekly-live-badge{
                font-size: 9px;
                padding: 3px 8px;
            }
.bgcopy .weekly-section .weekly-countdown{ font-size: 11px; }
.bgcopy #weeklySection .section-more{ display: none; }
.bgcopy #weeklySection .weekly-live-badge{ display: none; }
.bgcopy #weeklySection .weekly-hot-flash{ display: inline-flex; }
}
.bgcopy .weekly-live-badge{
            display: inline-flex; align-items: center; gap: 6px;
            background: #e63946; color: #fff;
            font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
            padding: 4px 10px; border-radius: 20px;
            animation: pulse-red 1.4s ease-in-out infinite;
        }
.bgcopy .weekly-live-badge::before{
            content: ''; width: 6px; height: 6px;
            background: #fff; border-radius: 50%;
            animation: blink 1.4s ease-in-out infinite;
        }
.bgcopy .weekly-hot-flash{
            display: none;   /* 데스크탑 숨김 */
            align-items: center; gap: 5px;
            background: linear-gradient(135deg, #ff6a3d 0%, #e6172e 100%);
            color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.08em;
            padding: 6px 13px; border-radius: 20px;
            position: relative; overflow: hidden; flex-shrink: 0;
            box-shadow: 0 3px 10px rgba(230,23,46,0.4);
            animation: pulse-red 1.5s ease-in-out infinite;
        }
.bgcopy .weekly-hot-flash i{ font-size: 11px; }
.bgcopy .weekly-hot-flash::before{   /* 보석 글린트 슥 (transform 기반) */
            content: ""; position: absolute; top: 0; bottom: 0; left: 0;
            width: 50%;
            background: linear-gradient(100deg, transparent 0%,
                rgba(255,255,255,0.9) 50%, transparent 100%);
            will-change: transform;
            transform: translateX(-180%) skewX(-18deg);
            animation: rankShine 2.6s cubic-bezier(0.4,0,0.2,1) infinite;
        }
.bgcopy .weekly-countdown{
            font-size: 12px; font-weight: 800; color: #555;
            font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
        }
.bgcopy .weekly-countdown span{ color: #e63946; }
.bgcopy .weekly-scroll-wrap{ position: relative; padding: 0 56px; }
.bgcopy .weekly-scroll-wrap .weekly-arrow.prev{ left: 4px; }
.bgcopy .weekly-scroll-wrap .weekly-arrow.next{ right: 4px; }
.bgcopy .weekly-scroll-wrap .weekly-scroll, .bgcopy .weekly-scroll-wrap .foryou-list{ scroll-padding: 0 4px; }
.bgcopy .weekly-scroll{
            display: flex; gap: 10px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            /* 카드 그림자가 가로스크롤 컨테이너에 세로로 잘리지 않게 위·아래 여백 확보 */
            padding: 8px 2px 20px;
            margin-bottom: -10px;   /* 늘린 아래 패딩만큼 다음 섹션과의 간격 보정 */
            scrollbar-width: none;
            cursor: grab;
            user-select: none;
        }
.bgcopy .weekly-scroll.is-dragging{ cursor: grabbing; scroll-behavior: auto; }
.bgcopy .weekly-scroll::-webkit-scrollbar{ display: none; }
.bgcopy .weekly-arrow{
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 44px; height: 44px; border-radius: 50%;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(0,0,0,0.06);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 3;
            font-size: 14px; color: #222;
            transition: background 0.22s ease, box-shadow 0.22s ease,
                        color 0.22s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
.bgcopy .weekly-arrow i{ transition: transform 0.22s ease; }
.bgcopy .weekly-arrow:hover{
            background: #111; color: #fff;
            border-color: #111;
            box-shadow: 0 10px 28px rgba(0,0,0,0.22);
            transform: translateY(-50%) scale(1.08);
        }
.bgcopy .weekly-arrow:active{ transform: translateY(-50%) scale(0.95); }
.bgcopy .weekly-arrow.prev:hover i{ transform: translateX(-2px); }
.bgcopy .weekly-arrow.next:hover i{ transform: translateX(2px); }
.bgcopy .weekly-arrow.prev{ left: -22px; }
.bgcopy .weekly-arrow.next{ right: -22px; }
@media (max-width: 768px){
.bgcopy .weekly-scroll-wrap{ padding: 0; }
.bgcopy .weekly-arrow{ display: none !important; }
.bgcopy .weekly-scroll--5 .weekly-card{ flex: 0 0 88% !important; }
}
.bgcopy .weekly-scroll--5 .weekly-card{
            flex: 0 0 calc((100% - 40px) / 5);
        }
.bgcopy #weeklySection .weekly-scroll-wrap{ padding: 0 52px; }
.bgcopy #weeklySection .weekly-scroll{ gap: 10px; padding: 10px 0 18px; }
.bgcopy #weeklySection .weekly-scroll--5 .weekly-card{
            flex: 0 0 calc((100% - 40px) / 5);
        }
.bgcopy #weeklySection .weekly-scroll-wrap .weekly-arrow.prev{ left: 0; }
.bgcopy #weeklySection .weekly-scroll-wrap .weekly-arrow.next{ right: 0; }
@media (min-width: 1560px){
.bgcopy #weeklySection .weekly-scroll-wrap{ padding: 0; }
.bgcopy #weeklySection .weekly-scroll-wrap .weekly-arrow.prev{ left: -54px; }
.bgcopy #weeklySection .weekly-scroll-wrap .weekly-arrow.next{ right: -54px; }
}
.bgcopy #weeklySection .weekly-scroll-wrap .weekly-scroll{ scroll-padding: 0; }
@media (max-width: 768px){
.bgcopy #weeklySection .weekly-scroll-wrap{ padding: 0; }
.bgcopy #weeklySection .weekly-scroll{ gap: 10px; padding: 8px 12px 20px; }
}
.bgcopy .weekly-card{
            flex: 0 0 190px; scroll-snap-align: start;
            background: #fff; border: 1px solid #f0e3c8;
            border-radius: 6px; overflow: hidden;
            cursor: pointer; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
            pointer-events: auto;
            /* 흰 배경에서 떠 보이게 따뜻한 톤 그림자 */
            box-shadow: 0 6px 18px rgba(255,140,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
        }
.bgcopy .weekly-card:hover{
            box-shadow: 0 10px 28px rgba(255,140,0,0.20), 0 4px 10px rgba(0,0,0,0.08);
            transform: translateY(-3px);
            border-color: #ffcf80;
        }
.bgcopy .weekly-card-thumb{
            width: 100%; aspect-ratio: 1/1;
            overflow: hidden; position: relative; background: #f5f5f5;
        }
.bgcopy .weekly-card-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.bgcopy .weekly-card:hover .weekly-card-thumb img{ transform: scale(1.05); }
.bgcopy .weekly-rank{
            position: absolute; top: 9px; left: 9px; z-index: 3;
            width: auto; min-width: 24px; height: 24px; padding: 0 8px;
            border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 800;
            font-style: normal; color: #fff; line-height: 1; letter-spacing: 0.02em;
            background: rgba(18,18,20,0.46);
            -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
            border: 1px solid rgba(255,255,255,0.28);
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            overflow: visible;
        }
.bgcopy .weekly-rank .wr-num::before{ content: "#"; opacity: 0.55; font-weight: 700; margin-right: 1px; }
.bgcopy .weekly-rank .wr-num{ position: relative; z-index: 1; padding: 0 1px; line-height: 1; }
.bgcopy .weekly-rank.r1{ color: #ffe08a; border-color: rgba(255,209,102,0.75); background: rgba(120,86,10,0.4); }
.bgcopy .weekly-rank.r2{ color: #eef3ff; border-color: rgba(220,228,240,0.7);  background: rgba(60,72,92,0.4); }
.bgcopy .weekly-rank.r3{ color: #ffcda3; border-color: rgba(245,158,107,0.7);  background: rgba(120,60,26,0.4); }
.bgcopy .weekly-info-panel{
            position: absolute; z-index: 9000; width: 256px;
            background: #fff; border-radius: 14px; padding: 16px 16px 14px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
            border: 1px solid #f0f0f0;
            opacity: 0; visibility: hidden; transform: translateY(4px) scale(0.98);
            transition: opacity .16s ease, transform .16s ease, visibility .16s;
            pointer-events: none;
        }
.bgcopy .weekly-info-panel.is-open{ opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.bgcopy .weekly-info-panel::before{ content: ''; position: absolute; top: 0; bottom: 0; width: 18px; }
.bgcopy .weekly-info-panel.bridge-left::before{ right: 100%; }
.bgcopy .weekly-info-panel.bridge-right::before{ left: 100%; }
.bgcopy .weekly-info-panel .wip-img{
            position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px;
            overflow: hidden; background: #f5f5f5; margin-bottom: 12px;
        }
.bgcopy .weekly-info-panel .wip-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.bgcopy .weekly-info-panel .wip-cat{ font-size: 10px; color: #999; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.bgcopy .weekly-info-panel .wip-name{ font-size: 15px; font-weight: 800; color: #111; line-height: 1.35; margin-bottom: 7px; }
.bgcopy .weekly-info-panel .wip-price{ font-size: 21px; font-weight: 900; color: #111; }
.bgcopy .weekly-info-panel .wip-price span{ font-size: 13px; font-weight: 700; margin-left: 2px; }
.bgcopy .weekly-info-panel .wip-naver{ margin-top: 6px; }
.bgcopy .weekly-info-panel .wip-rows{
            display: grid; grid-template-columns: auto 1fr; gap: 6px 12px;
            margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid #f0f0f0;
            font-size: 12px;
        }
.bgcopy .weekly-info-panel .wip-l{ color: #999; font-weight: 700; white-space: nowrap; }
.bgcopy .weekly-info-panel .wip-v{ color: #333; font-weight: 600; text-align: right; }
.bgcopy .weekly-info-panel .wip-go{
            width: 100%; margin-top: 13px; padding: 11px; border: none; border-radius: 10px;
            background: #111; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            transition: background .15s, gap .15s;
        }
.bgcopy .weekly-info-panel .wip-go:hover{ background: #333; gap: 9px; }
@media (hover: none), (max-width: 768px){
.bgcopy .weekly-info-panel{ display: none !important; }
}
.bgcopy .weekly-card-info{ padding: 12px 14px 16px; }
.bgcopy .weekly-card-cat{
            font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
            text-transform: uppercase; color: #aaa; margin-bottom: 4px;
        }
.bgcopy .weekly-card-name{
            font-size: 14.5px; font-weight: 700; color: #1a1a1a;
            line-height: 1.45; display: -webkit-box;
            -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
.bgcopy .weekly-card-price{
            font-size: 19px; font-weight: 900; color: #e8400a; margin-top: 7px;
            letter-spacing: -0.02em;
        }
.bgcopy .weekly-card-price em{
            font-style: normal; font-size: 13px; font-weight: 700;
            color: #333; margin-left: 1px;
        }
.bgcopy .weekly-hot-dot{
            position: absolute; top: 10px; left: 10px;
            background: #e63946; color: #fff;
            font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
            text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
        }
@media (max-width: 768px){
.bgcopy .weekly-scroll{ gap: 10px; scroll-snap-type: x mandatory; scroll-padding-left: 12px; padding: 8px 12px 20px !important; }
.bgcopy .weekly-card{ flex: 0 0 88%; scroll-snap-stop: always; }
.bgcopy .weekly-card:hover{ box-shadow: none; transform: none; }
.bgcopy .weekly-card:hover .weekly-card-thumb img{ transform: none; }
}
@media (max-width: 768px){
.bgcopy .search-weekly{ margin: 0 -18px 26px; padding: 2px 18px 6px; }
}
.bgcopy .search-section-title{
            font-size: 15px; font-weight: 800; letter-spacing: 0;
            color: #111; margin-bottom: 12px;
        }
.bgcopy .search-weekly{
            display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: none; margin: 0 -24px 26px; padding: 2px 24px 6px;
        }
.bgcopy .search-weekly::-webkit-scrollbar{ display: none; }
.bgcopy .sw-rank{
            position: absolute; top: -1px; left: -1px;
            width: 22px; height: 22px; border-radius: 50%;
            background: #111; color: #fff; font-size: 11px; font-weight: 900;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        }
.bgcopy .sw-rank.r1{ background: #f5c518; color: #1a1a1a; }
.bgcopy .sw-rank.r2{ background: #c7ccd1; color: #1a1a1a; }
.bgcopy .sw-rank.r3{ background: #e1996b; color: #1a1a1a; }
.bgcopy .popular-rank{
            display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto);
            grid-auto-flow: column; gap: 6px 14px; margin-bottom: 26px;
        }
.bgcopy .pr-rank{ width: 16px; flex-shrink: 0; text-align: center; font-size: 14px; font-weight: 800; color: #888; }
.bgcopy .pr-rank.pr-rank-top{ color: #ff3b5c; }
.bgcopy .search-section-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bgcopy .search-section-head .search-section-title{ margin-bottom: 0; }

/* ★★ **사진을 자르지 않는다.** 참고 화면은 자기가 찍은 사진이라 `cover` 로 채워도
   되지만, 우리 사진은 공급처가 준 것이라 가로·세로가 제각각이다 — `cover` 로 두니
   물걸레 자루도 후라이팬 손잡이도 잘렸다(실측). `contain` 이면 아무것도 안 잘린다. */
.bgcopy .product-thumb img,
.bgcopy .weekly-card-thumb img,
.bgcopy .rel-thumb img,
.bgcopy .qv-thumb img,
.bgcopy .gallery-thumb img{object-fit:contain;background:#fff}
.bgcopy .gallery-main img{object-fit:contain;background:#fff}

/* 못 받아 온 사진 자리. 깨진 그림 아이콘이 뜨면 고장 난 화면처럼 보인다. */
.bgcopy img.img-gone{object-fit:contain;background:#f4f4f4}

/* 머리줄의 작은 점 — 참고 화면의 HOT·NEW 표시. */
.bgcopy .hot-dot{display:inline-block;margin-left:8px;vertical-align:middle;
  background:#ffe9e5;color:#e8482c;border-radius:999px;padding:3px 10px;
  font-size:11px;font-weight:800;letter-spacing:0}
.bgcopy .new-dot{display:inline-block;margin-left:8px;vertical-align:middle;
  background:#e7f7ec;color:#0a7d3c;border-radius:999px;padding:3px 10px;
  font-size:11px;font-weight:800;letter-spacing:0}

/* 참고 화면의 'TOP' 제목은 빨강이다(불꽃 효과는 뺐다). 신제품 제목은 검정 그대로. */
.bgcopy .section-title.top-title{color:#e8482c}

/* ── 참고 메인의 큰 머리말·모바일 검색바 ── bg_main.html 의 <style> 에서
   그대로 뽑아 `.bgcopy` 로 감쌌다. 물결 장식(squiggle)·배경 영상은 뺐다. */
.bgcopy .m-searchbar{ display: none; }
@media (max-width: 768px){
.bgcopy .search-btn{ display: none !important; }
.bgcopy .m-searchbar{
                display: flex; align-items: center; gap: 9px;
                flex: 1; min-width: 0; height: 42px;
                padding: 0 16px; border-radius: 21px;
                background: #f1f2f4; color: #9aa0a6;
                font-size: 14px; font-weight: 500; cursor: pointer;
                opacity: 0; transform: scaleX(.82); transform-origin: right center;
            }
.bgcopy .m-searchbar i{ font-size: 15px; color: #b0b4ba; }
.bgcopy .m-searchbar span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgcopy .site-header.header-intro .m-searchbar{ animation: mSearchIn .55s cubic-bezier(.22,1,.36,1) .6s forwards; }
}
.bgcopy .hero{
            position: relative;
            height: 580px;
            overflow: hidden;
            background: var(--surface);
        }
@media (max-width: 768px){
.bgcopy .hero{ height: 380px; }
}
.bgcopy .hero.hero-loading .hero-slides, .bgcopy .hero.hero-loading .hero-counter, .bgcopy .hero.hero-loading .hero-nav{ opacity: 0; pointer-events: none; }
.bgcopy .hero .hero-counter, .bgcopy .hero .hero-nav{ transition: opacity 0.45s ease; }
.bgcopy .hero.hero-loading{
            background: linear-gradient(100deg, #e9e9e9 20%, #f5f5f5 42%, #fafafa 50%, #f5f5f5 58%, #e9e9e9 80%);
            background-size: 220% 100%;
            animation: heroShimmer 1.5s linear infinite;
        }
.bgcopy .hero-slides{ position: relative; height: 100%; }
.bgcopy .hero-slide{
            position: absolute;
            inset: 0;
            height: 100%;
            display: flex;
            align-items: flex-end;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.9s ease;
        }
.bgcopy .hero-slide.is-active{
            opacity: 1;
            pointer-events: auto;
            z-index: 1;
        }
.bgcopy .hero-slide-bg{
            position: absolute; inset: 0;
            background-size: cover;
            background-position: center;
            transition: transform 8s ease;
        }
.bgcopy .hero-slide.is-active .hero-slide-bg{ transform: scale(1.05); }
.bgcopy .hero-slide-overlay{
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.16) 34%, rgba(0,0,0,0) 58%);
            opacity: 0;
            transition: opacity .7s ease;
        }
.bgcopy .hero-slide-overlay.overlay-left{
            background: linear-gradient(to right, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.30) 22%, rgba(0,0,0,0.08) 38%, rgba(0,0,0,0) 50%);
        }
.bgcopy .hero-slide.is-active .hero-slide-overlay{ opacity: 1; transition-delay: .15s; }
.bgcopy .hero-slide-inner{
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1480px;
            margin: 0 auto;
            padding: 0 24px;
            height: 100%;
            display: flex;
            align-items: center;
        }
.bgcopy .hero-slide-content{
            max-width: 620px;
            padding: 56px 0;
        }
.bgcopy .hero-slide-content > *{ opacity: 0; }
.bgcopy.hero-revealed .hero-slide.is-active .hero-slide-content > *{
            animation: heroContentIn .6s cubic-bezier(.22,1,.36,1) both;
        }
.bgcopy.hero-revealed .hero-slide.is-active .hero-slide-content > *:nth-child(1){ animation-delay: .15s; }
.bgcopy.hero-revealed .hero-slide.is-active .hero-slide-content > *:nth-child(2){ animation-delay: .27s; }
.bgcopy.hero-revealed .hero-slide.is-active .hero-slide-content > *:nth-child(3){ animation-delay: .39s; }
.bgcopy.hero-revealed .hero-slide.is-active .hero-slide-content > *:nth-child(4){ animation-delay: .51s; }
@media (max-width: 768px){
.bgcopy .hero-slide-inner{ padding: 0 24px; }
.bgcopy .hero-slide-content{ padding: 32px 0; }
}
.bgcopy .hero-eyebrow{
            font-family: "Montserrat", sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--brand);
            margin-bottom: 16px;
            text-shadow: 0 1px 6px rgba(0,0,0,0.45);
        }
.bgcopy .hero-title{
            font-family: "Pretendard Variable", Pretendard, sans-serif;
            font-size: clamp(30px, 4.5vw, 56px);
            font-weight: 900;
            line-height: 1.15;
            color: var(--white);
            margin-bottom: 16px;
            letter-spacing: -0.03em;
            /* 오버레이를 옅게 줄인 대신 글자에 그림자 — 밝은 사진 위에서도 또렷하게 */
            text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
        }
.bgcopy .hero-title em{ font-style: normal; color: var(--brand); }
.bgcopy .hero-sub{
            font-size: 13px;
            /* 0.55 는 밝은 배경에서 잘 안 읽혀 0.8 로 (오버레이를 줄였기 때문) */
            color: rgba(255,255,255,0.8);
            font-weight: 500;
            margin-bottom: 32px;
            line-height: 1.6;
            text-shadow: 0 1px 8px rgba(0,0,0,0.5);
        }
.bgcopy .hero-cta{
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: "Montserrat", sans-serif;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--white);
            /* 오버레이를 옅게 줄였으므로 버튼 자체 대비를 살짝 높인다 */
            border: 1.5px solid rgba(255,255,255,0.7);
            border-radius: 10px;
            padding: 13px 26px;
            background: rgba(0,0,0,0.28);
            transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
        }
.bgcopy .hero-cta:hover{
            background: #fff;
            color: #1a1a1a !important;
            border-color: #fff !important;
            transform: translateY(-2px);
        }
@media (max-width: 768px){
.bgcopy .hero-cta{ font-size: 12px; padding: 11px 22px; }
}
.bgcopy .hero-nav{
            position: absolute;
            bottom: 32px;
            /* 콘텐츠 라인(.container: max 1480 + 좌우 32px)에 맞춰 안쪽 정렬 */
            right: max(32px, calc((100% - 1480px) / 2 + 32px));
            display: flex;
            align-items: center;
            gap: 16px;
            z-index: 10;
        }
@media (max-width: 768px){
.bgcopy .hero-nav{ display: none; }
}
.bgcopy .hero-counter{
            position: absolute; bottom: 24px;
            /* 콘텐츠 라인(.container)에 맞춰 안쪽 정렬 */
            left: max(32px, calc((100% - 1480px) / 2 + 32px)); z-index: 10;
            display: inline-flex; align-items: center; gap: 7px;
            padding: 6px 13px; border-radius: 999px;
            background: rgba(20,20,22,0.42);
            -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
            border: 1px solid rgba(255,255,255,0.28);
            color: #fff; font-family: "Montserrat", sans-serif;
            font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
            line-height: 1; cursor: pointer; user-select: none;
        }
.bgcopy .hero-counter .hc-cur{ font-weight: 800; }
.bgcopy .hero-counter .hc-sep{ opacity: 0.5; margin: 0 1px; }
.bgcopy .hero-counter i{ font-size: 9px; opacity: 0.85; margin-left: 2px; }
@media (max-width: 768px){
.bgcopy .hero-counter{ bottom: 20px; left: 24px; }
}
.bgcopy .hero-arrow{
            width: 36px; height: 36px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.6);
            font-size: 12px;
            transition: all 0.2s;
        }
.bgcopy .hero-arrow:hover{ border-color: var(--brand); color: var(--brand); }
.bgcopy .quick-cats{
            border-bottom: 1px solid var(--border);
            padding: 28px 0;
            background: #fff;
        }
.bgcopy .quick-cat-grid.is-pending > *{
            visibility: hidden;
            /* 안전장치: JS가 죽어서 is-pending 이 안 풀려도 2.5초 뒤엔 폴백이라도 보이게.
               (카테고리 줄이 영영 빈 채로 남는 것보다는 낫다) */
            animation: quickCatReveal 0s linear 2.5s forwards;
        }
.bgcopy .quick-cat-grid{
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            justify-items: center;
            gap: 0;
            /* 아래 TOP7·상품 섹션(.container)과 좌우 시작점 통일 */
            max-width: 1480px;
            margin: 0 auto;
            padding: 0 32px;
        }
.bgcopy .quick-cat-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            /* ⚠️ 실사 아이콘(has-photo)은 이미지 124px 가 박스 104px 밖으로 위아래 10px씩
                  삐져나온다(overflow:visible). 그런데 flex 는 '박스'만 기준으로 잡아서
                  gap 이 작으면 세로로 꽉 찬 이미지(예: 면류)가 라벨에 닿아버린다.
                  → 넘치는 10px 을 감안해 gap 을 넉넉히 준다(2026-08-21).
                  기준: 세로로 가장 긴 아이콘(면류)에서도 라벨과 충분히 떨어질 것.
                  2026-08-25: 아직 라벨이 아이콘에 붙어 보인다는 요청으로 28→36. */
            gap: 36px;
            padding: 12px 2px 14px;
            border-radius: 14px;
            cursor: pointer;
            transition: background 0.18s, transform 0.18s;
            min-width: 0;
            width: 100%;
            text-decoration: none;
        }
.bgcopy .quick-cat-item:hover{ background: #f5f5f5; transform: translateY(-2px); }
.bgcopy .quick-cat-icon{
            width: 104px; height: 104px;
            max-width: 100%;
            border-radius: 26px;
            background: #f5f5f5;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.18s, background 0.18s;
        }
.bgcopy .quick-cat-icon img{ width: 68px; height: 68px; object-fit: contain; transition: transform 0.18s; }
.bgcopy .quick-cat-icon.has-photo{ background: transparent !important; overflow: visible; }
.bgcopy .quick-cat-icon.has-photo img{
            width: 124px; height: 124px; max-width: 100%;
            object-fit: contain;
        }
.bgcopy .quick-cat-icon.is-all{
            background: linear-gradient(145deg, #FFE97A 0%, #FFD43B 100%);
            box-shadow: 0 3px 10px rgba(245,197,24,0.35);
        }
.bgcopy .quick-cat-icon.is-all i{ font-size: 38px; color: #7a5c00; transition: transform 0.18s; }
.bgcopy .quick-cat-item:hover .quick-cat-icon.is-all{
            background: linear-gradient(145deg, #FFE255 0%, #FFC800 100%);
            box-shadow: 0 5px 16px rgba(245,197,24,0.45);
        }
.bgcopy .quick-cat-item:hover .quick-cat-icon.is-all i{ transform: scale(1.12); }
.bgcopy .quick-cat-item:hover .quick-cat-icon.has-photo{ background: transparent !important; }
.bgcopy .quick-cat-item:hover .quick-cat-icon{ background: #eee; }
.bgcopy .quick-cat-item:hover .quick-cat-icon img{ transform: scale(1.15); }
.bgcopy .quick-cat-label{
            font-size: 13px;
            font-weight: 700;
            color: #444;
            white-space: nowrap;
            letter-spacing: -0.02em;
        }
@media (max-width: 768px){
.bgcopy .quick-cats{ padding: 14px 0 10px; }
.bgcopy .quick-cat-carousel{ padding: 0; max-width: none; }
.bgcopy .quick-cat-viewport{ overflow: visible; }
.bgcopy .quick-cat-grid{
                display: grid;
                grid-auto-flow: row;          /* PC의 column 흐름 리셋 */
                grid-auto-columns: auto;
                grid-template-columns: repeat(5, 1fr);
                gap: 4px 0;
                max-width: none;
                margin: 0;
                padding: 0 6px;
            }
.bgcopy .quick-cat-item{
                /* 실사 이미지(72px)가 박스(56px) 밖으로 8px씩 넘치므로 gap 으로 라벨과 벌려준다.
                   2026-08-24: 모바일에서 너무 크다는 요청으로 한 단계 줄임
                   (박스 66→56, 실사 84→72, 기본아이콘 42→36) */
                padding: 6px 2px 8px;
                /* 2026-08-25: PC와 같이 라벨을 조금 더 내림(13→17) */
                gap: 17px;
                min-width: 0;
                border-radius: 8px;
            }
.bgcopy .quick-cat-icon{
                width: 56px; height: 56px;
                border-radius: 15px;
            }
.bgcopy .quick-cat-icon img{ width: 36px; height: 36px; }
.bgcopy .quick-cat-icon.has-photo img{ width: 72px; height: 72px; }
.bgcopy .quick-cat-icon.is-all i{ font-size: 24px; }
.bgcopy .quick-cat-item:hover .quick-cat-icon.is-all i{ transform: none; }
.bgcopy .quick-cat-label{ font-size: 10px; }
.bgcopy .quick-cat-item:hover{ background: transparent; transform: none; }
.bgcopy .quick-cat-item:hover .quick-cat-icon{ background: #f5f5f5; }
.bgcopy .quick-cat-item:hover .quick-cat-icon img{ transform: none; }
}
@keyframes heroShimmer{
            0%   { background-position: 130% 0; }
            100% { background-position: -130% 0; }
        }
@keyframes heroContentIn{
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

/* ── 모바일: 참고 화면과 같은 머리말 ──────────────────────────────
   ★★ 참고는 좁은 화면에서 **로고를 감추고 검색바 + 햄버거 한 줄**이다.
     우리는 로고를 그대로 둔 채 검색바를 하나 더 넣어 **두 줄로 접혔다**. */
@media (max-width: 768px){
  .bgcopy .header-top{grid-template-columns:1fr auto;gap:10px;padding:0 12px}
  .bgcopy .header-logo{display:none}
  /* 검색바는 참고에서 '로고가 사라지며 쇽 등장' 하는 것이라 기본이 opacity:0 이다.
     우리는 로고를 아예 감추므로 **처음부터 보여야** 한다. */
  .bgcopy .m-searchbar{opacity:1;visibility:visible;pointer-events:auto;
    transform:none;position:static;width:auto}
  .bgcopy .header-actions .search-btn{display:none}
  /* ④ 메인(거르지 않은 첫 화면)에서는 빵부스러기·큰 제목을 접는다 —
     참고 메인에는 없다. 분류를 고른 화면에는 그대로 둔다. */
  .bgcopy .cat-hero.is-main .cat-hero-breadcrumb,
  .bgcopy .cat-hero.is-main .cat-hero-title,
  .bgcopy .cat-hero.is-main .cat-hero-count{display:none}
  .bgcopy .cat-hero.is-main .cat-hero-inner{padding:0}
}

/* 아래 탭띠 아이콘 — 참고는 아이콘 글꼴(`i` 태그)이라 `font-size:24px` 가 걸려
   있는데 우리는 이모지(`span.ti`)를 쓴다. 같은 크기를 따로 준다. */
.bgcopy .common-tabbar a .ti{font-size:23px;line-height:1}

/* 비율이 심하게 어긋난 사진만 잘라 채운다(위쪽을 보여준다 — 상품이 대개 위에 있다). */
.bgcopy img.fit-cover{object-fit:cover !important;object-position:top center}

/* ★★★ 큰 머리말 배경은 **깨끗한 단색**이다.
   예전에는 상품 사진을 크게 흐리게 깔았는데, 300px 짜리를 화면 폭으로 늘린 것이라
   **모자이크로 보였다**(사장님 지적). 배너용으로 찍은 큰 그림이 우리에겐 없으므로
   흉내내지 않는다 — 배경은 비우고 상품 사진 한 장만 또렷하게 세운다. */
.bgcopy .hero-slide-bg{filter:none;transform:none;background-image:none !important;
  background:linear-gradient(115deg,#fbfbfa 0%,#f1f0ee 52%,#e6e5e2 100%)}
.bgcopy .hero-slide.is-active .hero-slide-bg{transform:none}
/* 배경이 밝아졌으니 **글자는 검정**이다. 흰 글자를 그대로 두면 통째로 안 보인다. */
.bgcopy .hero-slide-overlay{display:none}
.bgcopy .hero-eyebrow{color:#8a8a86}
.bgcopy .hero-title{color:#111;text-shadow:none}
.bgcopy .hero-sub{color:#555;text-shadow:none}
.bgcopy .hero-cta{color:#111;border-color:#111}
.bgcopy .hero-counter,.bgcopy .hero-arrow{color:#111}
/* ★★★ **애니메이션이 안 돌아도 글자는 보여야 한다.** 참고 화면은 등장 효과의
   시작 상태를 `opacity:0` 으로 두는데, 그 애니메이션이 한 번이라도 안 돌면
   (탭이 숨겨져 타임라인이 멈춤 · JS 가 `hero-revealed` 를 못 붙임 · 움직임 줄이기
   설정) **큰 머리말이 통째로 빈 칸**이 된다. 실측으로 그 상태를 만났다.
   그래서 지금 보이는 슬라이드는 **기본이 보이는 것**이고, 등장 효과는 그 위에 얹는다. */
.bgcopy .hero-slide.is-active .hero-slide-content > *{opacity:1}
/* ★★ **원본보다 크게 늘리지 않는다.** `<img>` 에 `max-*` 만 걸면 작은 사진은
   제 크기 그대로 나온다 — 300px 짜리를 560px 로 늘리던 것이 흐림의 원인이었다.
   크게 보이는 것보다 **또렷한 것**이 낫다. */
.bgcopy .hero-photo{position:absolute;right:7%;top:50%;transform:translateY(-50%);
  z-index:1;width:auto;height:auto;max-height:78%;max-width:44%;
  border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  background:#fff;object-fit:contain;pointer-events:none}
@media (max-width:768px){
  /* 좁은 화면은 글자가 사진 위에 얹힌다 — 오른쪽 아래로 작게 내린다. */
  .bgcopy .hero-photo{right:4%;top:auto;bottom:8%;transform:none;
    max-height:44%;max-width:40%;box-shadow:0 10px 26px rgba(0,0,0,.3)}
}