/* sjhF0101.css — 사주 메인 허브 (Material 3 · 교차 톤 · 캐릭터 슬롯 · 스크롤 리빌)
   토큰 SoT: sjcF0101_tokens.css (묵색·황등·아이보리·강철 + 오행5색). 신규 컬러 금지.
   구성: 라이트 지배 + 다크 밴드 3곳(Hero / moat / 원장감수 / 푸터)로 교차. */

.hub { background: var(--color-white); color: var(--color-text-ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.hub * { box-sizing: border-box; }
.hub__wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter-m); }
@media (min-width: 768px){ .hub__wrap{ padding: 0 var(--gutter); } }

/* ── 섹션 공통 ──
   ★ 여백 재정비(CEO 2026-08-07, 경쟁사 청월당 대비): 종전 52/80px 은 배경이 같은 섹션이
     연달을 때 104~160px 짜리 빈 아이보리 띠를 만들었다("지금 추천" 카드 아래 ~ "무엇이 궁금하세요?").
     청월당은 섹션 구분에 mb-10(40px)/py-10(40px) 대를 쓴다. 44/56px 로 낮추고,
     배경이 같아 경계선이 없는 연속 섹션은 아래 규칙으로 위 여백을 지운다. */
.hub-sec { padding: 44px 0; }
@media (min-width: 768px){ .hub-sec{ padding: 56px 0; } }
.hub-sec--ivory { background: var(--color-bg-base); }   /* 아이보리 라이트 밴드 */
/* 같은 아이보리끼리 붙으면 두 패딩이 더해져 두 배로 벌어진다.
   색이 안 바뀌어 '경계'가 아니라 그냥 빈 공간으로 읽히므로, 위 섹션의 하단 패딩만 남긴다. */
.hub-sec--ivory + .hub-sec--ivory { padding-top: 0; }
.hub-sec__title { font-family: var(--font-serif); font-weight: 700;
  font-size: 22px; margin: 0 0 6px; color: var(--color-text-ink); }
.hub-sec__sub { font-size: 14px; color: var(--color-steel); margin: 0 0 20px; }
@media (min-width: 768px){ .hub-sec__title{ font-size: 26px; } }

/* ── 다크 밴드 (교차 액센트: 묵색) ── */
.hub-band-dark { background: var(--color-deep-navy); }
.hub-band-dark .hub-sec__title { color: var(--color-bg-base); }
.hub-band-dark .hub-sec__sub   { color: rgba(242,237,227,.68); }

/* 캐릭터/상품 이미지 플레이스홀더는 공용 컴포넌트로 이전 → web/root/css/saju-imgph.css (.imgph)
   이미지 ID 명명체계 SoT: docs/saju/이미지_ID_명명체계.md. 아래 *__img/__fig 는 슬롯 크기만 정의. */

/* ── CTA 위계: 황등 Filled = 주CTA / Tonal(연황) = 그 외 ── */
.hub-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 48px; padding: 0 24px; border-radius: 8px;
  /* ★nowrap 필수 — 좁은 카드에서 "지금 보기"가 "지금 보"/"기" 로 끊겨 나왔다.
     inline-flex 자식이라 폭이 부족하면 글자 단위로 접힌다. */
  white-space: nowrap;
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  border: none; transition: filter var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }
.hub-btn--filled { background: var(--color-amber); color: var(--color-text-ink); box-shadow: var(--shadow-md); }
.hub-btn--filled:hover { filter: brightness(1.05); }
.hub-btn--tonal { background: var(--md-sys-color-primary-container); color: var(--color-text-ink); }
.hub-btn--tonal:hover { filter: brightness(0.97); }
.hub-btn--ghost { background: transparent; color: #F2EDE3; border: 1px solid rgba(242,237,227,.5); }
.hub-btn--ghost:hover { background: rgba(242,237,227,.10); }
.hub-btn--disabled { background: var(--md-sys-color-surface-variant); color: var(--color-steel);
  cursor: default; box-shadow: none; }
/* 미준비 상품의 '미리보기' — 클릭 가능하지만 구매 CTA(필/토널)와는 시각적으로 구분(절제된 아웃라인) */
.hub-btn--outline { background: transparent; color: var(--color-steel);
  border: 1.5px solid var(--md-sys-color-outline); }
.hub-btn--outline:hover { background: var(--md-sys-color-surface-variant); color: var(--color-text-ink); }

/* ── 교차 경계 그라데이션 ──
   다크 밴드의 위/아래 '패딩 영역' 안에서만 이보리(#F2EDE3)↔묵색으로 페이드 → 섹션 경계가 매끄럽게 blend.
   FADE=48px(중간 다크 밴드) / Hero 하단만 40px. 콘텐츠는 패딩(≥64px) 덕에 항상 solid 묵색 위에 놓여 가독성 유지.
   Hero 를 40px 로 줄인 이유는 아래 .hub-hero 주석 참조(빈 그라데이션 띠 축소). */

/* ── ① Hero (다크 밴드: 묵색 — 아래로 이보리 페이드) ── */
/* 페이드 40px + 하단 패딩 64px — 콘텐츠(신뢰 배지 줄) 아래로 24px 은 solid 묵색이 남는다.
   ★ 종전 88px 패딩 + 다음 섹션 52/80px = 140~168px 이 통째로 빈 그라데이션 띠로 보였다.
     M3 4dp 그리드에서 섹션 간 큰 구분은 96~104px 이면 충분해 아래 .hub-hero + .hub-sec 와 함께 조인다. */
.hub-hero { background: linear-gradient(180deg,
    var(--color-deep-navy) 0%, #16121f 55%, #16121f calc(100% - 40px), var(--color-bg-base) 100%);
  color: var(--color-bg-base); text-align: center; padding: 64px 0; }
/* Hero 바로 다음 섹션만 위 여백을 줄인다(페이드가 이미 시각적 구분을 만든다).
   섹션끼리의 기본 간격 52/80px 은 건드리지 않는다. */
.hub-hero + .hub-sec { padding-top: 32px; }
@media (min-width: 768px){ .hub-hero + .hub-sec{ padding-top: 40px; } }
.hub-hero__grid { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hub-hero__fig { width: min(100%, 320px); aspect-ratio: 1232 / 928; border-radius: 18px; flex: none; overflow: hidden;
  background: rgba(242,237,227,.06); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.hub-hero__img { width: 100%; height: auto; display: block; }
@media (min-width: 768px){
  .hub-hero__grid{ flex-direction: row; justify-content: center; text-align: left; gap: 40px; }
  .hub-hero__fig{ width: min(40vw, 420px); }
  .hub-hero__body{ max-width: 30em; }
}
.hub-hero__brand { font-family: var(--font-serif); font-weight: 700; font-size: 30px; margin: 0 0 12px; color: var(--color-bg-base); }
.hub-hero__brand b { color: var(--color-amber); }
.hub-hero__lead { font-size: 16px; line-height: 1.7; margin: 0 0 24px; color: rgba(242,237,227,.82); }
.hub-hero__cta { display: flex; flex-direction: column; gap: 10px; align-items: center; }
@media (min-width: 480px){ .hub-hero__cta{ flex-direction: row; } }
@media (min-width: 768px){ .hub-hero__cta{ justify-content: flex-start; } }
.hub-hero__trust { margin: 22px 0 0; display: flex; gap: 16px; flex-wrap: wrap;
  justify-content: center; font-size: 13px; color: rgba(242,237,227,.7); }
@media (min-width: 768px){ .hub-hero__trust{ justify-content: flex-start; } }
.hub-hero__trust span::before { content: "✓ "; color: var(--color-success); font-weight: 700; }

/* ── ② 시즌/인기 캐러셀 ── */
.hub-reco { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 10px; scroll-snap-type: x mandatory; }
.hub-reco::-webkit-scrollbar { height: 6px; } .hub-reco::-webkit-scrollbar-thumb{ background:#dcd5c8; border-radius:3px; }
.hub-reco__card { scroll-snap-align: start; flex: 0 0 78%; max-width: 300px;
  background: var(--color-white); border-radius: var(--card-radius); box-shadow: var(--shadow-md);
  padding: 14px; display: flex; flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base); }
.hub-reco__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
@media (min-width: 768px){ .hub-reco__card{ flex-basis: 300px; } }
.hub-reco__img { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 12px; }
.hub-reco__badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--color-ohaeng-fire); color: #fff; margin-bottom: 10px; }
.hub-reco__name { font-family: var(--font-serif); font-weight: 700; font-size: 18px; margin: 0 0 4px; }
.hub-reco__hook { font-size: 13px; color: var(--color-steel); margin: 0 0 14px; flex: 1; }
.hub-reco__foot { display: flex; align-items: center; justify-content: space-between; }
.hub-reco__price { font-weight: 800; color: var(--color-amber); font-size: 15px; }

/* ── ③ 상품 카드 — 축 그룹 (캐릭터 슬롯 포함) ── */
.hub-axis { margin-bottom: 24px; }
.hub-axis__head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.hub-axis__dot { width: 12px; height: 12px; border-radius: 50%; }
.hub-axis--종합 .hub-axis__dot{ background: var(--color-ohaeng-water); }
.hub-axis--관계운 .hub-axis__dot{ background: var(--color-ohaeng-wood); }
.hub-axis--자기운 .hub-axis__dot{ background: var(--color-ohaeng-metal); }
.hub-axis__name { font-family: var(--font-serif); font-weight: 700; font-size: 17px; }
/* ── 카드 3단 위계 (CEO 2026-08-07) ────────────────────────────────────
   경쟁사 청월당은 스포트라이트/추천/목록 3단으로 카드 '크기'를 달리해 주력을 티나게 한다.
   우리는 8종이 전부 같은 크기라 무엇이 주력인지 화면이 말해주지 않았다.

   ★ 비율은 세 단계 모두 3:4 로 고정하고 '크기(열 수)'만 바꾼다.
     청월당도 aspect-[295/370](=0.797) 하나를 61곳에 그대로 쓴다 — 비율까지 흔들면
     한 화면에서 카드가 제각각이 되어 위계가 아니라 산만함이 된다.

   단계 ↔ 사업 우선순위(수익 기준):
     lg  지금 추천   = 결제 가능 + 제철  → 3열, 가장 크게
     sm  둘러보기(축) = 일반 목록        → 4열
     xs  시즌 상품   = 비수기·후순위     → 5열, 가장 작게
   ────────────────────────────────────────────────────────────────── */
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px){ .hub-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .hub-grid{ grid-template-columns: 1fr 1fr 1fr; } }

/* 둘러보기 — 모바일부터 2열. 종전 1열은 카드가 화면을 꽉 채워
   한 번에 한 상품밖에 못 보고 스크롤만 길어졌다(전환율 손해). */
.hub-grid--browse { gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 560px){ .hub-grid--browse{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .hub-grid--browse{ grid-template-columns: repeat(4, 1fr); } }

/* 시즌 상품 — 목록에서 빼지 않되 가장 작게. 지금 살 사람이 적은 상품이 자리를 덜 차지한다. */
.hub-grid--season { gap: 10px; grid-template-columns: 1fr 1fr; }
@media (min-width: 560px){ .hub-grid--season{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .hub-grid--season{ grid-template-columns: repeat(5, 1fr); } }
.hub-card { background: #fff; border: 1px solid #EFEAE0; border-radius: var(--card-radius);
  padding: 14px; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(26,31,46,.05);
  transition: box-shadow var(--transition-base), transform var(--transition-base); }
.hub-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.hub-card:hover .hub-card__img { transform: scale(1.03); }
/* 카드 이미지 슬롯 = 3:4.
   ★ 2:3(0.667) → 3:4(0.75) 로 낮췄다(CEO 2026-08-07). 같은 폭에서 이미지 높이가 11% 줄어
     카드가 눈에 띄게 작아지고, 경쟁사 청월당의 0.797 과도 비슷한 대역이 된다.
     4:5(0.8)까지 가지 않은 이유: 우리 앞표지 원본이 620x945(≈0.66)라 contain 시
     좌우 레터박스가 8%씩 생겨 액자처럼 보인다. 3:4 면 5% 남짓이라 사실상 눈에 안 띈다.
   (구 4:3 가로 슬롯은 2:3 표지를 심하게 잘라내 제목·인물이 날아갔다 — 가로 슬롯 금지는 유효.)
   한 줄 안에서 카드 높이가 들쭉날쭉해지지 않도록 표지·오브제 모두 같은 슬롯을 쓴다. */
.hub-card__img { width: 100%; aspect-ratio: 3 / 4; margin-bottom: 12px;
  transition: transform var(--transition-slow); }
/* 에셋 반입된 카드 — .imgph(div) 대신 실제 <img>. .imgph 가 주던 radius/overflow 를 <img> 자신이 갖는다.
   오브제 삽화(원본 4:5)는 cover 로 좌우를 살짝 덜어낸다 — 소재가 가운데 있어 손실이 없다. */
img.hub-card__img { display: block; object-fit: cover; border-radius: 12px; }
/* 결과지 앞표지 — 전체가 보여야 하므로 contain. 표지가 2:3 근방이라 여백은 사실상 생기지 않고,
   혹시 비율이 어긋난 표지가 들어와도 잘리지 않고 letterbox 로 안전하게 처리된다. */
img.hub-card__img--cover { object-fit: contain; background: #F5F1E8; }
.hub-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* 플래그십 = 전체폭 배너(가운데 공백) 대신 '강조형 일반 카드'. 2px 황등 테두리+그라데이션+그림자로 위계. */
.hub-card--flagship { border-color: var(--color-amber); border-width: 2px;
  background: linear-gradient(180deg,#FFFDF7,#fff); box-shadow: var(--shadow-md); }
.hub-card--flagship .hub-card__name::after { content: "대표"; margin-left: 8px;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; vertical-align: middle;
  padding: 2px 7px; border-radius: 999px; background: var(--color-amber); color: var(--color-text-ink); }
.hub-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hub-card__badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--md-sys-color-primary-container); color: #7a5b12; }
.hub-card__badge--NEW { background:#E7F1EA; color: var(--color-ohaeng-wood); }
.hub-card__badge--시즌 { background:#E7ECF6; color: var(--color-ohaeng-water); }
.hub-card__name { font-family: var(--font-serif); font-weight: 700; font-size: 18px; margin: 0; }
.hub-card__hook { font-size: 13.5px; line-height: 1.5; color: #4a4f59; margin: 6px 0 14px; flex: 1; }
/* 가격을 노출하지 않으므로 푸터에는 CTA 만 남는다 → 전폭으로 클릭 면적을 키운다
   (space-between 로 두면 버튼이 왼쪽에 치우쳐 카드가 비어 보인다) */
.hub-card__foot { display: flex; align-items: center; gap: 10px; }
.hub-card__foot .hub-btn { flex: 1 1 auto; }
.hub-card__price { font-weight: 800; font-size: 15px; }
.hub-card__price--ready { color: var(--color-amber); }
.hub-card__price--soon { color: var(--color-steel); font-weight: 600; font-size: 13px; }

/* ── 카드 크기 단계 ──────────────────────────────────────────────
   기본(.hub-card)은 lg = 지금 추천. 아래 두 단계가 그 위에서 값을 줄인다.
   후킹 문구는 sm/xs 에서 2줄로 자른다 — 카드마다 문장 길이가 달라
   한 줄에서 카드 높이가 제각각이 되면 그리드가 어긋나 보인다. */
.hub-card--lg .hub-card__name { font-size: 19px; }

.hub-card--sm { padding: 10px; }
.hub-card--sm .hub-card__img   { margin-bottom: 9px; border-radius: 10px; }
.hub-card--sm .hub-card__top   { gap: 6px; margin-bottom: 6px; }
.hub-card--sm .hub-card__name  { font-size: 15px; }
.hub-card--sm .hub-card__badge { font-size: 9.5px; padding: 1px 6px; }
.hub-card--sm .hub-card__hook  { font-size: 12.5px; line-height: 1.45; margin: 4px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-card--sm .hub-card__foot  { gap: 6px; }
.hub-card--sm .hub-card__price { font-size: 13.5px; }
.hub-card--sm .hub-btn { padding: 7px 11px; font-size: 12.5px; }

.hub-card--xs { padding: 8px; }
.hub-card--xs .hub-card__img   { margin-bottom: 8px; border-radius: 9px; }
.hub-card--xs .hub-card__top   { gap: 5px; margin-bottom: 5px; }
.hub-card--xs .hub-card__name  { font-size: 13.5px; }
.hub-card--xs .hub-card__badge { font-size: 9px; padding: 1px 5px; }
.hub-card--xs .hub-card__hook  { font-size: 11.5px; line-height: 1.4; margin: 3px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-card--xs .hub-card__foot  { gap: 5px; }
.hub-card--xs .hub-card__price { font-size: 12.5px; }
.hub-card--xs .hub-card__price--soon { font-size: 11.5px; }
.hub-card--xs .hub-btn { padding: 6px 9px; font-size: 11.5px; }
/* 작은 카드에서 hover 로 6px 이나 뜨면 이웃 카드와 겹쳐 보인다 */
.hub-card--xs:hover { transform: translateY(-3px); }

/* 5열(≥900px)에서 카드 폭이 ~200px 라 가격+버튼이 한 줄에 안 들어간다 → 세로로 쌓는다. */
@media (min-width: 900px){
  .hub-card--xs .hub-card__foot { flex-direction: column; align-items: stretch; }
  .hub-card--xs .hub-btn { text-align: center; }
}

/* ── ④ 정직 moat (다크 밴드: 위·아래 모두 이보리 페이드) ── */
.hub-moat { padding: 72px 0; background: linear-gradient(180deg,
    var(--color-bg-base) 0%, var(--color-deep-navy) 48px,
    var(--color-deep-navy) calc(100% - 48px), var(--color-bg-base) 100%); }
.hub-moat .hub-sec__title { color: var(--color-bg-base); }
.hub-moat .hub-sec__sub   { color: rgba(242,237,227,.68); }
.hub-moat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 768px){ .hub-moat__grid{ grid-template-columns: repeat(5,1fr); } }
.hub-moat__item { background: rgba(242,237,227,.06); border: 1px solid rgba(242,237,227,.14);
  border-radius: 12px; padding: 18px 12px; text-align: center; }
.hub-moat__ic { font-size: 24px; margin-bottom: 6px; }
.hub-moat__t { font-size: 13.5px; font-weight: 700; color: var(--color-bg-base); }
.hub-moat__d { font-size: 11.5px; color: rgba(242,237,227,.62); margin-top: 4px; }

/* ── ⑤ 무료 미끼 ── */
.hub-free { background: #F7F2E7; text-align: center; border-radius: var(--card-radius); padding: 30px 20px; }
.hub-free__t { font-family: var(--font-serif); font-weight: 700; font-size: 20px; margin: 0 0 8px; }
.hub-free__d { font-size: 14px; color: var(--color-steel); margin: 0 0 18px; }

/* ── ⑥ 후기 ── */
.hub-rev { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.hub-rev__card { scroll-snap-align: start; flex: 0 0 82%; max-width: 320px; background:#fff;
  border-radius: var(--card-radius); box-shadow: var(--shadow-md); padding: 16px; }
@media (min-width: 768px){ .hub-rev__card{ flex-basis: 300px; } }

/* ── ⑦ 원장 감수 / 신뢰 (다크 밴드: 위는 이보리 페이드, 아래는 다크 유지→푸터 연속) ── */
.hub-trust-band { padding: 72px 0 64px; background: linear-gradient(180deg,
    var(--color-bg-base) 0%, var(--color-deep-navy) 48px, var(--color-deep-navy) 100%); }
.hub-trust { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
@media (min-width: 768px){ .hub-trust{ flex-direction: row; text-align: left; gap: 32px; } }
.hub-trust__fig { width: min(100%, 220px); aspect-ratio: 1232 / 928; flex: none; border-radius: 16px; overflow: hidden;
  background: rgba(242,237,227,.06); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.hub-trust__img { width: 100%; height: auto; display: block; }
.hub-trust__t { font-family: var(--font-serif); font-weight: 700; font-size: 20px; margin: 0 0 10px; color: var(--color-bg-base); }
.hub-trust__d { font-size: 14px; line-height: 1.7; color: rgba(242,237,227,.75); margin: 0; }

/* ── ⑧ 푸터 (다크) ── */
.hub-foot { background: #16121f; color: rgba(242,237,227,.7); font-size: 12.5px; padding: 28px 0; }
.hub-foot a { color: rgba(242,237,227,.85); text-decoration: none; margin-right: 14px; }
.hub-foot__refund { color: var(--color-amber); font-weight: 700; margin-bottom: 10px; }

/* ── 스크롤 리빌 (fade-up + 스태거) ── */
/* 모션 허용 시에만 숨김→등장. JS(.reveal-ready) 없거나 reduce면 항상 보임(최종상태). */
@media (prefers-reduced-motion: no-preference){
  .hub.reveal-ready .reveal { opacity: 0; transform: translateY(24px);
    transition: opacity var(--transition-slow), transform var(--transition-slow); }
  .hub.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
  /* 그리드/캐러셀 내부 스태거 */
  .hub.reveal-ready .hub-grid > .reveal:nth-child(2){ transition-delay: 70ms; }
  .hub.reveal-ready .hub-grid > .reveal:nth-child(3){ transition-delay: 140ms; }
  .hub.reveal-ready .hub-grid > .reveal:nth-child(4){ transition-delay: 210ms; }
  .hub.reveal-ready .hub-reco > .reveal:nth-child(2){ transition-delay: 70ms; }
  .hub.reveal-ready .hub-reco > .reveal:nth-child(3){ transition-delay: 140ms; }
  .hub.reveal-ready .hub-moat__grid > .reveal:nth-child(2){ transition-delay: 60ms; }
  .hub.reveal-ready .hub-moat__grid > .reveal:nth-child(3){ transition-delay: 120ms; }
  .hub.reveal-ready .hub-moat__grid > .reveal:nth-child(4){ transition-delay: 180ms; }
  .hub.reveal-ready .hub-moat__grid > .reveal:nth-child(5){ transition-delay: 240ms; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){ .hub *{ transition: none !important; } }


/* ============================================================================
   관리자 전용 최근 7일 통계 레이어 (좌상단)
   화면: sjhF0101 · 데이터: sjhF0131.ajax (관리자 아니면 서버가 안 준다)

   ★ 브랜드 색만 쓴다 — 묵색 바탕 + 황등 강조. 허브 히어로가 묵색 밴드라
     그 위에 얹혀도 이물감이 없다.
   ★ 관리자만 보는 도구다. 고객 화면 요소보다 튀면 안 되므로 채도를 낮추고
     기본은 접힌 상태를 기억한다.
   ============================================================================ */
/* 위치: 상단 네비(.sjtop, 모바일 56px / PC 64px sticky) 바로 아래 한 줄.
   top:12px 이면 네비와 겹쳐 브랜드·메뉴를 가렸다. 네비 높이가 바뀌면 여기도 같이 고칠 것. */
.sjh-adminstat {
  position: fixed; top: calc(56px + 8px); left: 12px; z-index: 900;
  min-width: 196px; max-width: 260px;
  background: rgba(26, 31, 46, 0.94);
  border: 1px solid rgba(212, 162, 76, 0.35);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  font-size: 13px; line-height: 1.45; color: #F2EDE3;
  backdrop-filter: blur(6px);
}
.sjh-adminstat[hidden] { display: none; }

.sjh-adminstat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #D4A24C;
}
.sjh-adminstat__caret { color: rgba(242, 237, 227, 0.55); font-size: 11px; }

.sjh-adminstat__body { padding: 0 12px 10px; }
.sjh-adminstat__body[hidden] { display: none; }

.sjh-adminstat__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 2px 0;
}
.sjh-adminstat__row span   { color: rgba(242, 237, 227, 0.62); }
.sjh-adminstat__row strong { font-weight: 700; }
/* 보조 수치(오늘·비율)는 한 단계 죽여 주 수치를 먼저 읽게 한다 */
.sjh-adminstat__row em {
  font-style: normal; font-weight: 400; font-size: 12px;
  color: rgba(242, 237, 227, 0.55);
}

.sjh-adminstat__more {
  display: block; margin-top: 7px; padding-top: 7px; text-align: right;
  border-top: 1px solid rgba(242, 237, 227, 0.14);
  color: #D4A24C; text-decoration: none; font-size: 12px;
}
.sjh-adminstat__more:hover { text-decoration: underline; }

/* PC 는 네비가 64px */
@media (min-width: 768px) {
  .sjh-adminstat { top: calc(64px + 8px); }
}

/* 모바일에서는 화면을 가리지 않게 더 작게 */
@media (max-width: 640px) {
  .sjh-adminstat { top: calc(56px + 6px); left: 8px; min-width: 168px; font-size: 12px; }
  .sjh-adminstat__head { padding: 7px 10px; font-size: 12px; }
  .sjh-adminstat__body { padding: 0 10px 8px; }
}