/* ── Design tokens ───────────────────────────────────────────── */
:root {
    --camel-navy:      #193364;
    --camel-navy-d:    #0f2145;
    --camel-red:       #ff4343;
    --camel-yellow:    #f5c102;
    --camel-alice:     #e8eff4;
    --camel-img-bg:    #f2f7fc;
    --camel-muted:     #60708e;
    --radius:          12px;
    --section-gap:     40px;
    --tab-h:           64px;

    --bs-primary:          #193364;
    --bs-primary-rgb:      25, 51, 100;
    --bs-link-color:       #193364;
    --bs-link-hover-color: #0f2145;
}

/* ── Base ────────────────────────────────────────────────────── */
html { font-size: 15px; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Apple SD Gothic Neo', sans-serif;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

@media (max-width: 767.98px) {
    main.container { padding-bottom: calc(var(--tab-h) + 12px) !important; }
}

/* ── Navbar ──────────────────────────────────────────────────── */
.camel-navbar { background-color: var(--camel-navy) !important; }
.camel-navbar .navbar-brand,
.camel-navbar .nav-link         { color: rgba(255,255,255,.88) !important; }
.camel-navbar .navbar-brand:hover { color: #fff !important; }
.camel-navbar .nav-link:hover,
.camel-navbar .nav-link.active  { color: var(--camel-yellow) !important; }
.camel-navbar .navbar-toggler   { border-color: rgba(255,255,255,.3) !important; }
.camel-navbar .navbar-toggler-icon { filter: invert(1); }
.camel-navbar .form-control {
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.camel-navbar .form-control::placeholder { color: rgba(255,255,255,.45); }
.camel-navbar .form-control:focus {
    background-color: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.4);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(245,193,2,.25);
}
.camel-navbar .btn-search {
    background-color: var(--camel-yellow);
    border-color: var(--camel-yellow);
    color: var(--camel-navy);
    font-weight: 700;
}
.camel-navbar .btn-search:hover { background-color: #e5ae00; border-color: #e5ae00; }
.camel-navbar .btn-theme {
    border-color: rgba(255,255,255,.3) !important;
    color: rgba(255,255,255,.8) !important;
}
.camel-navbar .btn-theme:hover {
    background-color: rgba(255,255,255,.1) !important;
    color: #fff !important;
}
.camel-navbar .dropdown-menu {
    border: 0;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15);
    border-radius: var(--radius);
    padding: 8px;
}
.camel-navbar .dropdown-item { border-radius: 8px; }
.camel-navbar .dropdown-item:hover { background-color: var(--camel-img-bg); }
.camel-navbar .navbar-brand { letter-spacing: -.5px; }

@media (max-width: 767.98px) { .navbar-toggler { display: none !important; } }

/* ── Bottom tab bar (mobile only) ───────────────────────────── */
.camel-tab-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--tab-h);
    background-color: var(--camel-navy);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    z-index: 1040;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
}
@media (max-width: 767.98px) { .camel-tab-bar { display: flex; } }
.camel-tab-bar ul {
    display: flex; justify-content: space-around; align-items: center;
    height: 100%; list-style: none; margin: 0; padding: 0 4px; width: 100%;
}
.camel-tab-bar li { flex: 1; }
.camel-tab-bar a.tab-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: rgba(255,255,255,.55); text-decoration: none;
    font-size: 10px; font-weight: 600; height: 100%; padding: 8px 4px;
    transition: color .15s; letter-spacing: .02em;
}
.camel-tab-bar a.tab-link:hover,
.camel-tab-bar a.tab-link.active  { color: var(--camel-yellow); }
.camel-tab-bar .tab-icon { font-size: 20px; line-height: 1; display: block; }

/* ── Hero search ─────────────────────────────────────────────── */
.camel-hero {
    text-align: center;
    padding: 36px 20px 32px;
    margin-bottom: var(--section-gap);
}
.camel-hero__title {
    font-size: clamp(22px, 5vw, 34px);
    font-weight: 800;
    color: var(--camel-navy);
    margin-bottom: 6px;
    line-height: 1.2;
}
[data-bs-theme="dark"] .camel-hero__title { color: #dce8ff; }
.camel-hero__sub {
    font-size: 14px;
    color: var(--camel-muted);
    margin-bottom: 22px;
}
.camel-hero__form {
    max-width: 520px;
    margin: 0 auto;
}
.camel-hero__form .form-control {
    height: 50px;
    border-radius: var(--radius) 0 0 var(--radius) !important;
    border: 1.5px solid var(--camel-alice);
    font-size: 15px;
    color: var(--camel-navy);
    background: #fff;
}
[data-bs-theme="dark"] .camel-hero__form .form-control {
    background: #1a2337; border-color: #2e3d58; color: #c8d8f0;
}
.camel-hero__form .form-control:focus {
    border-color: var(--camel-navy);
    box-shadow: 0 0 0 .2rem rgba(25,51,100,.15);
}
.camel-hero__form .btn-hero-search {
    height: 50px; padding: 0 22px;
    background-color: var(--camel-navy);
    border-color: var(--camel-navy);
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    color: #fff; font-weight: 700;
}
.camel-hero__form .btn-hero-search:hover { background-color: var(--camel-navy-d); }

/* ── Block heading (stephub 패턴) ───────────────────────────── */
.block-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.block-heading__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--camel-navy);
    margin: 0;
}
[data-bs-theme="dark"] .block-heading__title { color: #dce8ff; }
.block-heading__all {
    font-size: 13px;
    font-weight: 600;
    color: var(--camel-muted);
    text-decoration: none;
    display: flex; align-items: center; gap: 4px;
}
.block-heading__all:hover { color: var(--camel-navy); }
[data-bs-theme="dark"] .block-heading__all { color: #8fa4c8; }

/* ── Section spacing ─────────────────────────────────────────── */
.camel-section { margin-bottom: var(--section-gap); }

/* ─────────────────────────────────────────────────────────────
   ★ Flat product tile (핵심 컴포넌트 — Bootstrap .card 없음)
   ───────────────────────────────────────────────────────────── */
.prd-tile {
    display: flex;
    flex-direction: column;
    /* min-width:0 : 그리드/플렉스 아이템 기본값 min-width:auto 면 내부 긴 콘텐츠가
       카드를 50%보다 넓게 밀어내 열이 불균등해진다. 0으로 내려 항상 균등 폭 유지. */
    min-width: 0;
    min-height: 0;
}
.prd-tile__link {
    display: block;
    text-decoration: none;
    margin-bottom: 10px;
    flex-shrink: 0;   /* 이미지 영역이 flex 여백으로 줄어들지 않도록 */
}
/* 이미지 타일: #f2f7fc 연파랑 배경, 라운드, 그림자 없음.
   padding-top:100% 방식 = flex/grid/aspect-ratio 상호작용 버그 완전 회피.
   컨테이너 높이 = padding-top = 너비의 100% → 항상 정확한 1:1 정사각형.
   img는 position:absolute;inset:0 으로 채움 → 이미지 로딩 전후 레이아웃 불변(CLS=0). */
.prd-tile__img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;          /* 높이 = 너비 → 1:1 비율 */
    height: 0;                  /* padding-top 만으로 높이 결정 */
    background-color: var(--camel-img-bg);
    border-radius: var(--radius);
    overflow: hidden;
}
[data-bs-theme="dark"] .prd-tile__img-wrap { background-color: #1a2540; }
.prd-tile__img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8px;
    transition: transform .22s ease;
    display: block;
    mix-blend-mode: multiply;
}
.prd-tile:hover .prd-tile__img-wrap img { transform: scale(1.05); }

/* 다크모드: 흰 타일 배경으로 전환 + 블렌드 해제 */
[data-bs-theme="dark"] .prd-tile__img-wrap {
    background-color: #ffffff;
}
[data-bs-theme="dark"] .prd-tile__img-wrap img {
    mix-blend-mode: normal;
}

/* 오버레이 배지들 */
.prd-tile__sale {
    position: absolute; top: 8px; left: 8px;
    background-color: var(--camel-red); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 3px 7px; border-radius: 6px; line-height: 1.4;
    pointer-events: none; white-space: nowrap;
    max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
}
.prd-tile__amazon {
    position: absolute; top: 10px; right: 10px;
    background-color: var(--camel-yellow); color: var(--camel-navy);
    font-size: 10px; font-weight: 800;
    padding: 2px 7px; border-radius: 6px; line-height: 1.5;
    pointer-events: none;
}
.prd-tile__soldout {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.42);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
    border-radius: var(--radius);
}

/* ── 역대 최저가 카드 (LowestPriceCard) ─────────────────────────── */
/* 이미지 위 "역대최저" 배지 */
.lp-badge {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center;
    background: #16a34a; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 7px; line-height: 1.4;
    box-shadow: 0 1px 4px rgba(22,163,74,.35);
    pointer-events: none;
}

/* 가격 + 하락률 칩 한 줄 */
.lp-price-row {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    margin-top: 2px;
}
.prd-tile__price.is-low { color: #111; }
.lp-won { font-size: 12px; font-weight: 600; margin-left: 1px; }
.lp-drop {
    font-size: 11px; color: #16a34a; font-weight: 600;
    background: rgba(22,163,74,.10);
    padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}
.lp-drop b { font-weight: 800; }

/* 역대 최저↔최고 가격 범위 바 */
.lp-range { margin-top: 7px; }
.lp-range__track {
    position: relative; height: 5px; border-radius: 3px;
    /* 왼쪽(저렴) 차분한 세이지그린 → 가운데 뮤트 → 오른쪽(비쌈) 더스티로즈.
       채도를 낮춰 네이비 기반 테마와 조화. */
    background: linear-gradient(90deg, #7bab92 0%, #b7c0cf 52%, #cf9a9a 100%);
}
.lp-range__dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 2px solid var(--camel-navy);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.lp-range__ends {
    display: flex; justify-content: space-between;
    margin-top: 3px; font-size: 10px; color: var(--camel-muted);
}
.lp-range__min { color: #16a34a; font-weight: 600; }

[data-bs-theme="dark"] .lp-drop { background: rgba(74,222,128,.14); color: #4ade80; }
[data-bs-theme="dark"] .prd-tile__price.is-low { color: #f0f0f0; }
[data-bs-theme="dark"] .lp-range__min { color: #4ade80; }
[data-bs-theme="dark"] .lp-range__dot { border-color: #8fb4ff; }
[data-bs-theme="dark"] .lp-range__track {
    background: linear-gradient(90deg, #5c8e76 0%, #5e6a82 52%, #a87878 100%);
}

/* 베스트 카드: 가격 위치 판정 칩 (지금 저렴 / 고점) */
.lp-verdict {
    font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: 6px; white-space: nowrap;
}
.lp-v--low  { background: rgba(22,163,74,.12);  color: #16a34a; }
.lp-v--high { background: rgba(148,163,184,.18); color: #64748b; }
[data-bs-theme="dark"] .lp-v--low  { background: rgba(74,222,128,.16); color: #4ade80; }
[data-bs-theme="dark"] .lp-v--high { background: rgba(148,163,184,.20); color: #94a3b8; }

/* 최저가 카드: 절약 금액 + 역대 이력 */
.lp-save {
    display: flex; align-items: center; flex-wrap: wrap;
    margin-top: 4px; font-size: 11.5px; color: #16a34a; font-weight: 600;
    line-height: 1.4;
}
.lp-save b { font-weight: 800; margin: 0 2px; }
.lp-save .bi { font-size: 15px; margin-right: -1px; }
.lp-save__pct {
    margin-left: 5px; font-weight: 800;
    background: rgba(22,163,74,.10); padding: 0 5px; border-radius: 5px;
}
.lp-hist {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 4px; font-size: 11px; color: var(--camel-muted);
}
.lp-hist b { font-weight: 700; color: var(--camel-navy); }
[data-bs-theme="dark"] .lp-save { color: #4ade80; }
[data-bs-theme="dark"] .lp-save__pct { background: rgba(74,222,128,.16); }
[data-bs-theme="dark"] .lp-hist b { color: #dce8ff; }

/* (구) 드롭 지표 — 하위 호환용 잔존, 신규 카드는 미사용 */
.prd-tile__drop-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
}
.prd-tile__drop-bar {
    flex: 1; height: 5px; border-radius: 3px;
    background: var(--camel-alice); overflow: hidden;
}
[data-bs-theme="dark"] .prd-tile__drop-bar { background: #2a3550; }
.prd-tile__drop-fill { height: 100%; background: #22c55e; border-radius: 3px; }
.prd-tile__drop-label {
    font-size: 11px; color: #22c55e; font-weight: 600; white-space: nowrap;
}

/* 이름 (배경 없는 텍스트, 카드 본문 없음) */
.prd-tile__name {
    font-size: 13px; font-weight: 400;
    color: var(--camel-muted);
    line-height: 1.45;
    margin: 0 0 4px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 줄바꿈 안 되는 긴 영문/모델번호가 카드 폭을 밀어내지 않도록 강제 줄바꿈 */
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 현재가 */
.prd-tile__price {
    font-size: 15px; font-weight: 700;
    color: #111;
    display: inline;
}
[data-bs-theme="dark"] .prd-tile__price { color: #f0f0f0; }
.prd-tile__price.is-sale { color: #111; }
[data-bs-theme="dark"] .prd-tile__price.is-sale { color: #f0f0f0; }
/* 정가 (취소선) */
.prd-tile__old-price {
    font-size: 12px; color: var(--camel-muted);
    text-decoration: line-through;
    margin-left: 5px;
}
.prd-tile.is-soldout { opacity: .55; }

/* ── Horizontal product rail ─────────────────────────────────── */
.prd-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    /* 컨테이너 패딩 무력화해 엣지-투-엣지 스크롤 */
    margin-left: -12px;
    margin-right: -12px;
    padding: 4px 12px 12px;
    scrollbar-width: none;
    cursor: grab;
}
.prd-rail:active { cursor: grabbing; }
.prd-rail::-webkit-scrollbar { display: none; }
/* 드래그 중: hover 이미지 확대 및 자식 이벤트 완전 차단 */
.prd-rail.is-dragging { cursor: grabbing; }
.prd-rail.is-dragging .prd-tile__img-wrap img {
    transform: none !important;
    transition: none !important;
}
.prd-rail__slide {
    flex: 0 0 46vw;
    max-width: 200px;
    scroll-snap-align: start;
}
@media (min-width: 576px) { .prd-rail__slide { flex: 0 0 180px; max-width: 180px; } }
@media (min-width: 768px) { .prd-rail__slide { flex: 0 0 200px; max-width: 200px; } }
@media (min-width: 1200px) { .prd-rail__slide { flex: 0 0 220px; max-width: 220px; } }

/* ── Product grid (목록 페이지) ──────────────────────────────── */
/* ★ minmax(0, 1fr): 그냥 1fr(=minmax(auto,1fr))이면 카드 안의 줄바꿈 안 되는
   긴 토큰(영문 아마존 제목·모델번호 등)이 열의 min-content를 키워 두 열 너비가
   불균등해지고 → 정사각형 이미지 박스 크기도 달라진다. minmax(0,...)로 강제 균등. */
.prd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    align-items: start;  /* 카드를 콘텐츠 높이대로 독립 배치(stretch 제거) */
}
@media (min-width: 768px)  { .prd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 992px)  { .prd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .prd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ── Filter / sort chips ─────────────────────────────────────── */
.chip-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.chip-label { font-size: 12px; font-weight: 600; color: var(--camel-muted); white-space: nowrap; }
.filter-chip {
    display: inline-block;
    padding: 5px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 600;
    border: 1.5px solid var(--camel-alice);
    background: transparent; color: var(--camel-muted);
    cursor: pointer; transition: all .14s;
    text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.filter-chip:hover { color: var(--camel-navy); border-color: var(--camel-navy); }
.filter-chip.active { background: var(--camel-navy); border-color: var(--camel-navy); color: #fff; }
[data-bs-theme="dark"] .filter-chip { border-color: #2e3d58; color: #8fa4c8; }
[data-bs-theme="dark"] .filter-chip:hover { color: #dce8ff; border-color: #5b9bd5; }
[data-bs-theme="dark"] .filter-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* 카테고리 칩 안의 건수 배지 */
.chip-count {
    display: inline-block; margin-left: 6px;
    padding: 0 7px; border-radius: 10px;
    font-size: 11px; font-weight: 700; line-height: 18px;
    background: var(--camel-alice); color: var(--camel-muted);
    vertical-align: baseline;
}
.filter-chip.active .chip-count { background: rgba(255,255,255,.25); color: #fff; }
[data-bs-theme="dark"] .chip-count { background: #2e3d58; color: #b9c7e2; }
[data-bs-theme="dark"] .filter-chip.active .chip-count { background: rgba(255,255,255,.22); color: #fff; }

/* ── Category aside sticky (md+) ────────────────────────────── */
@media (min-width: 768px) {
    .camel-category-aside {
        position: sticky;
        top: 68px;          /* sticky navbar 높이 + 여백 */
        align-self: flex-start;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        scrollbar-width: none;
    }
    .camel-category-aside::-webkit-scrollbar { display: none; }
}

/* ── Category sidebar ────────────────────────────────────────── */
.camel-sidebar {
    border-radius: var(--radius);
    border: 1.5px solid var(--camel-alice);
    overflow: hidden;
    margin-bottom: 20px;
}
[data-bs-theme="dark"] .camel-sidebar { border-color: #2e3d58; }
.camel-sidebar__head {
    padding: 10px 16px;
    font-size: 12px; font-weight: 700;
    color: var(--camel-muted);
    text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1.5px solid var(--camel-alice);
    background: var(--camel-img-bg);
}
[data-bs-theme="dark"] .camel-sidebar__head { border-color: #2e3d58; background: #1a2337; }
.camel-sidebar a {
    display: block; padding: 10px 16px;
    font-size: 14px; color: var(--camel-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--camel-alice);
    transition: background .12s, color .12s;
}
.camel-sidebar a:last-child { border-bottom: none; }
[data-bs-theme="dark"] .camel-sidebar a { border-color: #2a3550; color: #8fa4c8; }
.camel-sidebar a:hover { background: var(--camel-img-bg); color: var(--camel-navy); }
.camel-sidebar a.active { background: var(--camel-navy); color: var(--camel-yellow); font-weight: 600; }

/* ── 페이지 제목 줄 ──────────────────────────────────────────── */
.page-heading {
    font-size: 20px; font-weight: 700;
    color: var(--camel-navy);
    margin-bottom: 16px;
}
[data-bs-theme="dark"] .page-heading { color: #dce8ff; }
.page-heading__count { font-size: 13px; font-weight: 400; color: var(--camel-muted); margin-left: 8px; }

/* ── Footer ───────────────────────────────────────────────────── */
.camel-footer {
    background-color: var(--camel-img-bg);
}
[data-bs-theme="dark"] .camel-footer { background-color: #131c2e; }
.camel-footer__brand {
    font-size: 19px; font-weight: 800;
    color: var(--camel-navy);
    letter-spacing: -.5px;
    transition: color .12s;
}
.camel-footer__brand span { color: var(--camel-muted); font-weight: 600; }
.camel-footer__brand:hover { color: var(--camel-navy-d); }
[data-bs-theme="dark"] .camel-footer__brand { color: #dce8ff; }
[data-bs-theme="dark"] .camel-footer__brand span { color: #8fa4c8; }
.camel-footer__tag { font-size: 13px; color: var(--camel-muted); }
.camel-footer__note { font-size: 12px; color: var(--camel-muted); line-height: 1.5; }
.camel-footer__legal {
    font-size: .7rem; color: var(--camel-muted); line-height: 1.6;
    border-color: var(--camel-alice) !important;
}
[data-bs-theme="dark"] .camel-footer__legal { border-color: #2a3550 !important; }
.camel-footer__copy {
    font-size: .72rem; color: var(--camel-muted);
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.camel-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: '›';
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    align-items: center;
}
.camel-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--camel-alice);
    font-size: 16px;
    line-height: 1;
    vertical-align: -1px;
    padding: 0 6px;
}
.camel-breadcrumb .breadcrumb-item a {
    color: var(--camel-muted);
    text-decoration: none;
    transition: color .12s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.camel-breadcrumb .breadcrumb-item a:hover {
    color: var(--camel-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.camel-breadcrumb .breadcrumb-item.active {
    color: var(--camel-navy);
    font-weight: 600;
}
[data-bs-theme="dark"] .camel-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #2e3d58;
}
[data-bs-theme="dark"] .camel-breadcrumb .breadcrumb-item a {
    color: #8fa4c8;
}
[data-bs-theme="dark"] .camel-breadcrumb .breadcrumb-item a:hover {
    color: #dce8ff;
}
[data-bs-theme="dark"] .camel-breadcrumb .breadcrumb-item.active {
    color: #dce8ff;
}

/* ── Product detail ──────────────────────────────────────────── */
.detail-img-wrap {
    background-color: var(--camel-img-bg);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    min-height: 280px;
}
[data-bs-theme="dark"] .detail-img-wrap { background-color: #ffffff; }
.detail-img-wrap img {
    max-height: 320px; object-fit: contain; display: block;
    mix-blend-mode: multiply;
}
[data-bs-theme="dark"] .detail-img-wrap img { mix-blend-mode: normal; }

.detail-price {
    font-size: 32px; font-weight: 800;
    color: var(--camel-navy); line-height: 1;
}
[data-bs-theme="dark"] .detail-price { color: #8fb4ff; }

.detail-stat-box {
    background: var(--camel-img-bg);
    border-radius: var(--radius);
    padding: 12px 16px; text-align: center;
}
[data-bs-theme="dark"] .detail-stat-box { background: #1a2337; }
.detail-stat-box__label { font-size: 11px; font-weight: 600; color: var(--camel-muted); text-transform: uppercase; letter-spacing: .05em; }
.detail-stat-box__value { font-size: 18px; font-weight: 700; color: var(--camel-navy); margin-top: 2px; }
[data-bs-theme="dark"] .detail-stat-box__value { color: #c8d8f0; }

/* ── Price chart ──────────────────────────────────────────────── */
#priceChart, #compareChart { height: clamp(320px, 60vh, 640px); }
.chart-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--camel-img-bg);
    padding: 12px;
}
[data-bs-theme="dark"] .chart-wrap { background: #1a2337; }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination .page-link {
    border-radius: var(--radius) !important;
    margin: 0 2px;
    border-color: var(--camel-alice);
    color: var(--camel-navy);
}
[data-bs-theme="dark"] .pagination .page-link {
    border-color: #2e3d58; color: #8fa4c8; background: transparent;
}
.pagination .page-item.active .page-link {
    background-color: var(--camel-navy); border-color: var(--camel-navy); color: #fff;
}
.pagination .page-link:hover { background-color: var(--camel-img-bg); color: var(--camel-navy); }

/* ── Price verdict badge ("지금이 살 때?") ────────────────────── */
.price-verdict {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700;
    padding: 7px 14px; border-radius: 999px; margin-bottom: 14px;
}
.price-verdict:empty { display: none; }          /* 데이터 없으면 표시 안 함 */
.verdict--best { background: #dcfce7; color: #15803d; }
.verdict--good { background: #dcfce7; color: #16a34a; }
.verdict--ok   { background: #eff6ff; color: #2563eb; }
.verdict--high { background: #f1f5f9; color: #64748b; }
[data-bs-theme="dark"] .verdict--best,
[data-bs-theme="dark"] .verdict--good { background: rgba(34,197,94,.16);  color: #4ade80; }
[data-bs-theme="dark"] .verdict--ok   { background: rgba(59,130,246,.16); color: #7aa7ff; }
[data-bs-theme="dark"] .verdict--high { background: rgba(148,163,184,.16); color: #94a3b8; }

/* ── Infinite scroll loader ───────────────────────────────────── */
.infinite-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;       /* IntersectionObserver 가 감지할 영역 확보 */
    margin-top: 8px;
}
.infinite-loader__spinner {
    width: 26px; height: 26px;
    border: 3px solid var(--camel-alice);
    border-top-color: var(--camel-navy);
    border-radius: 50%;
    animation: camel-spin .7s linear infinite;
    opacity: 0;             /* 평소엔 숨김, 로딩 중에만 표시 */
    transition: opacity .15s;
}
[data-bs-theme="dark"] .infinite-loader__spinner {
    border-color: #2e3d58; border-top-color: #5b9bd5;
}
.infinite-loader.is-loading .infinite-loader__spinner { opacity: 1; }
@keyframes camel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .infinite-loader__spinner { animation-duration: 1.6s; }
}

/* ── Utilities ────────────────────────────────────────────────── */
.text-truncate-2 {
    overflow: hidden; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
:focus-visible { outline: 2px solid var(--camel-navy); outline-offset: 2px; }

/* ── Skeleton loader ──────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: .375rem;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── 최근 본 상품 / 찜 섹션 ──────────────────────────────────── */
.recent-section-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 700; color: var(--camel-navy);
    margin-bottom: 12px;
}
.recent-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--camel-alice); color: var(--camel-muted);
    font-size: 11px; font-weight: 600;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px;
}

/* 찜된 카드: 상단에 빨간 선 강조 */
.prd-tile--pinned .prd-tile__img-wrap {
    outline: 2px solid var(--camel-red);
    outline-offset: -2px;
}
.favorite-btn { transition: background .15s, color .15s, border-color .15s; }
.favorite-btn--active { font-weight: 600; }

[data-bs-theme="dark"] .recent-section-head { color: #dce8ff; }
[data-bs-theme="dark"] .recent-section-count { background: #1a2337; color: #8fa4c8; }

/* ── 미국 아마존 가격 비교 패널 ───────────────────────────────── */
.amz-panel {
    border: 1px solid var(--camel-alice);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: #fff;
    /* 판정별 강조선(기본: 중립) */
    border-left: 4px solid var(--camel-alice);
}
.amz-panel--cheaper { border-left-color: #22c55e; background: #f3fbf6; }
.amz-panel--similar { border-left-color: var(--camel-yellow); }
.amz-panel--pricier { border-left-color: var(--camel-muted); }
.amz-panel--unknown { border-left-color: var(--camel-alice); }

.amz-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.amz-panel__brand   { font-weight: 700; font-size: 14px; color: var(--camel-navy); }
.amz-panel__verdict { font-size: 13px; font-weight: 600; }
.amz-panel--cheaper .amz-panel__verdict { color: #16a34a; }
.amz-panel--pricier .amz-panel__verdict { color: var(--camel-muted); }
.amz-panel--similar .amz-panel__verdict { color: #b8890b; }

.amz-panel__prices {
    display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px;
}
.amz-panel__price {
    flex: 1; text-align: center;
    background: var(--camel-img-bg); border-radius: 10px; padding: 8px 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.amz-panel__label { font-size: 11px; color: var(--camel-muted); }
.amz-panel__krw   { font-size: 17px; font-weight: 800; color: var(--camel-navy); line-height: 1.2; }
.amz-panel__usd   { font-size: 11px; color: var(--camel-muted); }
.amz-panel__vs    { align-self: center; font-size: 11px; font-weight: 700; color: var(--camel-muted); }
.amz-panel--cheaper .amz-panel__price--amazon .amz-panel__krw { color: #16a34a; }

.amz-panel__nodata { font-size: 13px; color: var(--camel-muted); margin: 0 0 12px; }
.amz-panel__cta    { color: var(--camel-navy); }

.amz-panel__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.amz-panel__camel { font-size: 12px; font-weight: 600; text-decoration: none; }
.amz-panel__note  { font-size: 11px; color: var(--camel-muted); }

[data-bs-theme="dark"] .amz-panel        { background: #1a2337; border-color: #2e3d58; }
[data-bs-theme="dark"] .amz-panel--cheaper { background: #14241c; }
[data-bs-theme="dark"] .amz-panel__brand { color: #dce8ff; }
[data-bs-theme="dark"] .amz-panel__price { background: #11192b; }
[data-bs-theme="dark"] .amz-panel__krw   { color: #8fb4ff; }
[data-bs-theme="dark"] .amz-panel--cheaper .amz-panel__price--amazon .amz-panel__krw { color: #4ade80; }

.amz-panel__disclosure {
    margin: 8px 0 0;
    font-size: .68rem;
    color: var(--camel-muted);
    font-style: italic;
}

/* ── 11번가 구매 버튼 ─────────────────────────────────────────── */
.btn-camel-buy {
    background-color: #ffc107;
    border-color: #ffc107;
    color: var(--camel-navy);
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-camel-buy:hover,
.btn-camel-buy:focus {
    background-color: #ffca2c;
    border-color: #ffc720;
    color: var(--camel-navy);
}
.btn-camel-buy:active {
    background-color: #ffcd39;
    border-color: #ffca2c;
    color: var(--camel-navy);
}