/* ═══════════════════════════════════════
   주옥(酒玉) — 커스텀 스타일
   Bootstrap 5.3 기반
═══════════════════════════════════════ */

/* ── CSS 변수 (브랜드 컬러) ────────────── */
:root {
  --juok-primary:   #8B2500;   /* 전통 붉은 갈색 (옹기·도자기) */
  --juok-secondary: #C47C35;   /* 황토색  */
  --juok-light:     #FFF3E8;   /* 배경 연한 살구 */
  --juok-dark:      #3D1000;
  --juok-accent:    #E8A050;   /* 막걸리 색 */
  --bs-link-color:  var(--juok-primary);
}

/* ── 네비게이션 ─────────────────────────── */
.bg-juok { background-color: var(--juok-primary) !important; }

/* ── 버튼 ───────────────────────────────── */
.btn-juok {
  background-color: var(--juok-primary);
  border-color:     var(--juok-primary);
  color: #fff;
}
.btn-juok:hover, .btn-juok:focus {
  background-color: var(--juok-dark);
  border-color:     var(--juok-dark);
  color: #fff;
}
.btn-outline-juok {
  border-color: var(--juok-primary);
  color:        var(--juok-primary);
}
.btn-outline-juok:hover {
  background-color: var(--juok-primary);
  color: #fff;
}

/* ── 텍스트 컬러 ────────────────────────── */
.text-juok { color: var(--juok-primary) !important; }

/* ── 배지 ───────────────────────────────── */
.bg-juok-light { background-color: var(--juok-light) !important; }

/* ── 카드 호버 효과 ─────────────────────── */
.card-hover {
  transition: box-shadow .18s, transform .18s;
  cursor: pointer;
}
.card-hover:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
  transform: translateY(-2px);
}

/* ── 히어로 섹션 ────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, var(--juok-light) 0%, #fff 100%);
  border-bottom: 2px solid #f0ddd0;
}
.hero-illust { filter: drop-shadow(0 8px 24px rgba(139,37,0,.15)); }

/* ── 상품 카드 이미지 ───────────────────── */
.object-fit-cover { object-fit: cover; }

/* ── 게시판 테이블 ──────────────────────── */
.table th { font-size:.82rem; }
.table td { font-size:.88rem; vertical-align: middle; }

/* ── 댓글 ───────────────────────────────── */
.comment-block { position: relative; }

/* ── 페이지네이션 ───────────────────────── */
.pagination .page-item.active .page-link {
  background-color: var(--juok-primary);
  border-color:     var(--juok-primary);
}
.pagination .page-link { color: var(--juok-primary); }
.pagination .page-link:hover { color: var(--juok-dark); }

/* ── 뱃지 등급 색상 ─────────────────────── */
.grade-새싹    { background-color: #4CAF50; }
.grade-막걸리  { background-color: #FF9800; }
.grade-청주    { background-color: #2196F3; }
.grade-약주    { background-color: #9C27B0; }

/* ── 반응형 ─────────────────────────────── */
@media (max-width: 576px) {
  .navbar-brand { font-size: 1.1rem !important; }
  h1.display-5  { font-size: 1.6rem; }
}

/* ── 스크롤바 커스텀 ────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--juok-secondary); border-radius: 4px; }

/* ── 로딩 스피너 ────────────────────────── */
.htmx-indicator { display:none; }
.htmx-request .htmx-indicator { display:inline-block; }

/* ── object-fit contain 보완 ────────────── */
.object-fit-contain { object-fit: contain; }

/* ── 버튼 extra-small (btn-xs) ─────────── */
.btn-xs {
  padding: .15rem .4rem;
  font-size: .72rem;
  line-height: 1.3;
  border-radius: .2rem;
}

/* ── 플래시 메시지 위치 ─────────────────── */
.flash-container {
  position: fixed;
  top: 72px;
  right: 1rem;
  z-index: 1090;
  max-width: 340px;
}

/* ── 상품 상세 설명 ─────────────────────── */
.description-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.85;
}

/* ── 네비게이션 링크 컬러 보정 ─────────── */
.navbar-nav .nav-link {
  color: rgba(255,255,255,.85) !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #fff !important;
}

/* ── 어드민 사이드바 nav-link ───────────── */
#admin-sidebar .nav-link {
  color: rgba(255,255,255,.72);
  border-radius: .4rem;
  padding: .5rem .9rem;
  font-size: .87rem;
  transition: background .15s, color .15s;
}
#admin-sidebar .nav-link:hover,
#admin-sidebar .nav-link.active {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* ── 히어로 애니메이션 ─────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.hero-illust { animation: float 4s ease-in-out infinite; }

/* ── 반응형 히어로 이모지 숨김 ─────────── */
@media (max-width: 768px) {
  .hero-illust { display: none !important; }
}