/* ======================================================================
   site.css — 쇼핑몰(공개) 화면 공통. 관리자(app.css · cgrid.css)와 섞지 않는다.
   레이아웃은 postring 메인 구성을 따른다(텍스트 띠 · 헤더 · 카테고리 내비 · 히어로 · 섹션 · 푸터).
   ====================================================================== */
:root { --ink: #111111; --accent: #FF5A36; }
html, body { font-family: 'Noto Sans KR', Verdana, 'Malgun Gothic', Dotum, AppleGothic, sans-serif; }
.price-font { font-family: 'Manrope', 'Noto Sans KR', sans-serif; letter-spacing: -0.35px; }

/* ---------- 브랜드 로고 (A 심볼 + 텍스트 로고) ----------
   텍스트 로고는 MemoryBook 과 같은 결 — Black Han Sans · 대문자 · 좁은 자간 · 두 톤(먹색 + 포인트색) */
.brand-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; flex-shrink: 0; }
.brand-logo:hover { opacity: .85; }
.brand-symbol { width: 34px; height: 34px; border-radius: 9px; }
.brand-word { font-family: 'Black Han Sans', 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: -.01em; color: var(--ink); }
.brand-word .accent { color: var(--accent); }
.brand-sm .brand-symbol { width: 28px; height: 28px; border-radius: 7px; }
.brand-sm .brand-word { font-size: 21px; }
.on-dark .brand-word { color: #fff; }
.on-dark .brand-symbol { box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
@media (max-width: 1023px) { .brand-md .brand-symbol { width: 28px; height: 28px; border-radius: 7px; } .brand-md .brand-word { font-size: 21px; } }

/* ---------- 카테고리 내비 ---------- */
.nav-cat { display: inline-block; padding: 8px 12px; border-radius: 8px; }
.nav-cat:hover { color: var(--accent); }
.nav-cat.is-on { color: var(--accent); }

/* ---------- 히어로 ---------- */
.hero-slide { background: var(--hero-bg, #f3ede4); }
.hero-art { width: 300px; height: 300px; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(15,23,42,.35); transform: rotate(2deg); }
@media (min-width: 768px) { .hero-art { width: 380px; height: 380px; } }
.hero-btn { display: inline-block; padding: 11px 24px; border-radius: 9999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; transition: background .2s; }
.hero-btn:hover { background: var(--accent); }
.hero-swiper .swiper-pagination.hero-pagination { left: 50%; transform: translateX(-50%); width: auto; bottom: 16px; background: rgba(15,23,42,.5); color: #fff; border-radius: 9999px; padding: 4px 14px; font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.hero-swiper .swiper-pagination.hero-pagination .swiper-pagination-total { color: rgba(255,255,255,.65); }
/* 활성 슬라이드 진입 시 아래→위 stagger (postring 과 같은 인트로) */
@keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.hero-swiper .hero-anim { opacity: 0; }
.hero-swiper .swiper-slide-active .hero-anim { animation: heroUp 1.1s cubic-bezier(.22,.61,.36,1) both; }
.hero-swiper .swiper-slide-active .hero-anim.d1 { animation-delay: .2s; }
.hero-swiper .swiper-slide-active .hero-anim.d2 { animation-delay: .42s; }
.hero-swiper .swiper-slide-active .hero-anim.d3 { animation-delay: .66s; }
.topbar-swiper { cursor: grab; }

/* ---------- 카테고리 퀵 메뉴 ---------- */
.quick-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quick-dot { width: 64px; height: 64px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    font-family: 'Black Han Sans', 'Noto Sans KR', sans-serif; font-size: 22px; color: #fff; background: var(--dot, #111);
    transition: transform .2s, box-shadow .2s; }
.quick-dot[style*="--dot"] { font-size: 16px; letter-spacing: .04em; }
.quick-cat:hover .quick-dot { transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(0,0,0,.35); }
@media (min-width: 768px) { .quick-dot { width: 84px; height: 84px; font-size: 28px; } }
.quick-c0 { background: #FF5A36; } .quick-c1 { background: #2f6b5e; } .quick-c2 { background: #2f5fd0; }
.quick-c3 { background: #8f7f6c; } .quick-c4 { background: #e8a33a; } .quick-c5 { background: #5b4aa8; }
.quick-label { font-size: 13px; color: #475569; }
@media (min-width: 768px) { .quick-label { font-size: 14px; } }

/* ---------- 중단 배너 ---------- */
.mid-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; border-radius: 20px;
    background: radial-gradient(120% 140% at 100% 0%, #3a2a24 0%, #111111 55%); }
@media (max-width: 640px) { .mid-banner { padding: 28px 24px; } }

/* ---------- 목록 정렬 칩 ---------- */
.sort-chip { padding: 6px 12px; border-radius: 9999px; color: #64748b; border: 1px solid #e2e8f0; }
.sort-chip:hover { color: var(--ink); border-color: #cbd5e1; }
.sort-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 얇은 스크롤(세로 목록) */
.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.35) transparent; }