/* ============================================================
   마사지로그 — 2026 트렌드 리디자인
   Pretendard · AOS · Swiper · 글래스모피즘 · 마이크로 인터랙션
   라이트(기본) / 다크 모드 | 완전 반응형
   ============================================================ */

/* ─── CSS 변수: 라이트 모드 (기본) ─── */
/* theme.css 에서 완전한 토큰 문서를 확인하세요 */
:root {
  /* 브랜드 컬러 — Teal 테마 */
  --primary:           #0D9488;   /* Teal-600 */
  --primary-dark:      #0F766E;   /* Teal-700 */
  --primary-hover:     #0E8A7E;   /* Teal-650 */
  --primary-light:     #CCFBF1;   /* Teal-100 */
  --primary-glow:      rgba(13,148,136,0.22);
  --secondary:         #F97316;   /* Orange-500 */
  --secondary-light:   #FFF7ED;   /* Orange-50  */
  --accent:            #f59e0b;
  --accent-light:      #fffbeb;
  --success:           #16a34a;
  --danger:            #dc2626;

  /* 배경 */
  --bg:                #F5F5F5;   /* 플랫폼 라이트 그레이 (heally 벤치마크) */
  --bg-card:           #ffffff;
  --bg-card2:          #F9F9F9;   /* 중립 */
  --bg-glass:          rgba(255,255,255,0.92);
  --bg-glass-dark:     rgba(255,255,255,0.8);
  --bg-header:         #ffffff;   /* 화이트 헤더 */
  --bg-topbar:         #ffffff;
  --bg-mainnav:        #f8f8f8;
  --bg-sidebar:        #ffffff;
  --bg-input:          #ffffff;

  /* 텍스트 */
  --text-primary:      #111827;   /* Slate-900 */
  --text-secondary:    #374151;   /* Slate-700 */
  --text-muted:        #6B7280;   /* Slate-500 */
  --text-on-primary:   #ffffff;

  /* 테두리 */
  --border:            #E8E8E8;   /* 중립 그레이 */
  --border-hover:      #0D9488;
  --border-input:      #D1D5DB;   /* 중립 그레이 */

  /* 그림자 — 중립 (틸 컬러 제거) */
  --shadow-xs:         0 1px 2px  rgba(0,0,0,0.05);
  --shadow-sm:         0 2px 8px  rgba(0,0,0,0.08);
  --shadow-md:         0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:         0 16px 48px rgba(0,0,0,0.15);
  --shadow-card:       0 2px 8px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.14);

  /* 사이드바 섹션 컬러 */
  --sb-login-bg:       #0D9488;
  --sb-region-bg:      #F97316;
  --sb-cat-bg:         #f59e0b;
  --sb-comm-bg:        #16a34a;
  --sb-vip-bg:         #dc2626;

  /* 레이아웃 치수 */
  --topbar-h:          0px;
  --header-h:          64px;
  --mainnav-h:         44px;
  --total-header-h:    108px;
  --sidebar-left-w:    224px;
  --sidebar-right-w:   185px;
  --max-w:             1400px;

  /* 디자인 토큰 */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-2xl: 32px;
  --transition: 0.20s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.40s cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: 0.35s cubic-bezier(0.34,1.56,0.64,1);
  --font: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 2026 Aurora 디자인 토큰 — Teal 팔레트 */
  --aurora-1: #0D9488;   /* Teal-600 */
  --aurora-2: #14B8A6;   /* Teal-500 */
  --aurora-3: #F97316;   /* Orange-500 */
  --aurora-4: #2DD4BF;   /* Teal-300 */
  --glow-primary:   rgba(13,148,136,0.35);
  --glow-secondary: rgba(20,184,166,0.25);
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --glass-blur: blur(20px) saturate(180%);
  --noise-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --sidebar-w: 224px;
  /* 히어로 배경 — 솔리드 다크 (그라데이션 없음) */
  --hero-gradient: #111827;
}

/* ─── 다크 모드 — Teal 기반 ─── */
[data-theme="dark"] {
  --bg:                #071311;
  --bg-card:           #0D1F1E;
  --bg-card2:          #091817;
  --bg-glass:          rgba(13,31,30,0.80);
  --bg-glass-dark:     rgba(7,19,17,0.85);
  --bg-header:         #0B1F1E;
  --bg-topbar:         #041110;
  --bg-mainnav:        #082320;
  --bg-sidebar:        #091817;
  --bg-input:          #102524;

  --text-primary:      #E2FAF8;
  --text-secondary:    #7DB8B5;
  --text-muted:        #3D6D6A;
  --text-on-primary:   #ffffff;

  --border:            rgba(13,148,136,0.18);
  --border-hover:      #2DD4BF;
  --border-input:      rgba(13,148,136,0.32);

  --shadow-xs:         0 1px 2px  rgba(0,0,0,0.45);
  --shadow-sm:         0 2px 8px  rgba(0,0,0,0.50);
  --shadow-md:         0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.60);
  --shadow-xl:         0 16px 48px rgba(0,0,0,0.65);
  --shadow-card:       0 2px 12px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-card-hover: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(45,212,191,0.25);

  --sb-login-bg:       #0A3330;
  --sb-region-bg:      #9A3412;
  --sb-cat-bg:         #92400E;
  --sb-comm-bg:        #065F46;
  --sb-vip-bg:         #7F1D1D;

  --primary-light:     rgba(13,148,136,0.15);
  --secondary-light:   rgba(249,115,22,0.15);
  --accent-light:      rgba(245,158,11,0.15);

  /* 다크모드 글래스 오버라이드 */
  --glass-bg:          rgba(13,31,30,0.60);
  --glass-border:      rgba(255,255,255,0.08);
  --hero-gradient:     linear-gradient(135deg, #021A19 0%, #063530 35%, #042F2E 65%, #010D0C 100%);
}

/* ─── 리셋 & 기본 ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: clip;
  transition: background 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, textarea, select { font-family: var(--font); font-size: 0.95rem; }

/* ─── 공통 컴포넌트 ─── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 16px; }

/* ─── 버튼 ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer; border: none;
  transition: all var(--transition);
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition);
}
.btn:hover::after { background: rgba(255,255,255,0.12); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 10px var(--primary-glow);
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 5px 16px var(--primary-glow);
  transform: translateY(-1px);
  color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline:hover { background: var(--primary-light); }
.btn-sm  { padding: 6px 14px; font-size: 0.82rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* ─── 폼 컨트롤 ─── */
.form-control {
  display: block; width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  background: var(--bg-card);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label {
  display: block; margin-bottom: 6px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
}
.form-group { margin-bottom: 18px; }

/* ─── 뱃지 ─── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.5;
}
.badge-new      { background: #16a34a; color: #fff; }
.badge-vip      { background: #f59e0b; color:#fff; }
.badge-notice   { background: var(--primary); color:#fff; }
.badge-hot      { background: #ef4444; color:#fff; }

/* ─── 알림/플래시 ─── */
.alert {
  padding: 14px 18px; border-radius: var(--radius-md);
  font-size: 0.9rem; line-height: 1.5;
}
.alert-error { background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.3); color:#dc2626; }
.alert-success { background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3); color:#16a34a; }

/* ============================================================
   상단 유틸리티 바
   ============================================================ */
.top-utility-bar {
  background: var(--bg-topbar);
  height: var(--topbar-h);
  position: sticky; top: 0; z-index: 103;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.top-utility-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 16px;
  height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 18px;
}
.top-utility-inner a {
  font-size: 0.75rem; color: rgba(255,255,255,0.52);
  transition: color var(--transition);
  white-space: nowrap; letter-spacing: 0.01em;
}
.top-utility-inner a:hover { color: rgba(255,255,255,0.88); }

/* ============================================================
   사이트 헤더
   ============================================================ */
.site-header {
  background: var(--bg-header);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 102;
  height: var(--header-h);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body {
  padding-top: calc(var(--header-h) + 46px);
}
@media (max-width: 1099px) {
  body { padding-top: var(--header-h); }
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 20px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0;
}

/* 로고 */
.site-logo a {
  display: flex; flex-direction: column; line-height: 1.1;
  gap: 1px; flex-shrink: 0;
}
.logo-text {
  font-size: 1.45rem; font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  filter: drop-shadow(0 2px 8px rgba(13,148,136,0.40));
}
.logo-sub {
  display: block; font-size: 0.68rem; font-weight: 400;
  color: rgba(153,246,228,0.65); letter-spacing: 0.4px;
}

/* 헤더 검색 */
.header-search {
  flex: 1; max-width: 520px;
  display: flex; align-items: center;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  overflow: hidden;
  transition: all var(--transition);
}
.header-search:focus-within {
  background: rgba(255,255,255,0.13);
  border-color: rgba(13,148,136,0.70);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18), 0 0 20px rgba(13,148,136,0.12);
}
.header-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: 0.92rem; padding: 0 10px;
  height: 40px;
}
.header-search input::placeholder { color: rgba(255,255,255,0.40); }
.header-search button {
  padding: 0 18px; height: 40px;
  background: rgba(13,148,136,0.25);
  color: #fff; font-size: 0.85rem; font-weight: 600;
  border-left: 1px solid rgba(13,148,136,0.30);
  display: flex; align-items: center; gap: 5px;
  transition: background var(--transition);
  flex-shrink: 0;
}
.header-search button:hover { background: rgba(13,148,136,0.45); }

/* 헤더 우측 네비 */
.header-right-nav {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.header-right-nav a {
  font-size: 0.85rem; font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: 6px 10px; border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.header-right-nav a:hover { color: #fff; background: rgba(255,255,255,0.12); }
.hnav-inquiry {
  background: rgba(13,148,136,0.20) !important;
  border: 1px solid rgba(13,148,136,0.40) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  color: rgba(153,246,228,0.92) !important;
}
.hnav-inquiry:hover { background: rgba(13,148,136,0.35) !important; color: #fff !important; }
.hnav-join {
  background: var(--secondary) !important;
  color: #fff !important; border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(249,115,22,0.40) !important;
}
.hnav-join:hover { box-shadow: 0 4px 20px rgba(249,115,22,0.55) !important; transform: translateY(-1px); }

/* 테마 토글 */
.theme-toggle {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.20);
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.22); color: #fff; transform: rotate(15deg); }
[data-theme="light"] .icon-moon,
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="light"] .icon-sun,
[data-theme="dark"]  .icon-moon { display: none; }

/* 모바일 메뉴 버튼 */
.mobile-menu-btn {
  display: none; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.mobile-menu-btn span {
  display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: all var(--transition);
}

/* ============================================================
   메인 탭 네비게이션
   ============================================================ */
.top-tab-nav {
  background: var(--bg-mainnav);
  position: sticky;
  top: calc(var(--topbar-h) + var(--header-h));
  z-index: 101;
  height: var(--mainnav-h);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 2px 16px rgba(0,0,0,0.30);
}
.top-tab-nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 16px;
  height: 100%; display: flex; align-items: stretch;
}
.top-tab-nav-inner a {
  display: flex; align-items: center; padding: 0 20px;
  font-size: 0.88rem; font-weight: 600;
  color: rgba(255,255,255,0.60);
  border-bottom: 2.5px solid transparent;
  transition: all var(--transition);
  white-space: nowrap; letter-spacing: 0.01em;
}
.top-tab-nav-inner a:hover { color: rgba(255,255,255,0.90); background: rgba(255,255,255,0.06); }
.top-tab-nav-inner a.active { color: #fff; border-bottom-color: #2DD4BF; }
.top-tab-nav-inner .tab-inquiry {
  margin-left: auto;
  color: #fff;
  background: var(--secondary);
  border-bottom: none;
  padding: 0 18px;
  font-size: 0.84rem; font-weight: 700;
  border-radius: var(--radius-sm);
  margin-top: 5px; margin-bottom: 5px;
  height: calc(100% - 10px);
  box-shadow: 0 2px 10px rgba(249,115,22,0.35);
  letter-spacing: 0.01em;
}
.top-tab-nav-inner .tab-inquiry:hover {
  background: var(--secondary-dark);
  box-shadow: 0 4px 16px rgba(249,115,22,0.50);
  transform: translateY(-1px);
}

/* ============================================================
   페이지 레이아웃 (1단 풀와이드 — 사이드바 제거)
   ============================================================ */
.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  max-width: var(--max-w); margin: 0 auto;
}

/* 사이드바 전역 숨김 */
.sidebar-left,
.sidebar-right { display: none !important; }

/* ============================================================
   지역 퀵바 — 사이드바 대체 수평 스크롤 지역 네비 (fixed)
   ============================================================ */
.region-qbar {
  background: var(--primary);
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(13,148,136,.25);
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 91;
  height: 46px;
  overflow: hidden;
  transition: height .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.region-qbar.collapsed {
  height: 0;
  box-shadow: none;
}
.region-qbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  height: 46px;
}
.region-qbar-inner::-webkit-scrollbar { display: none; }
.region-qbar-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,.3);
  margin-right: 4px;
}
.region-qbar-a {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.25);
  transition: all .15s;
  flex-shrink: 0;
}
.region-qbar-a:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.region-qbar-a.active {
  background: rgba(255,255,255,.25);
  color: #fff;
  border-color: rgba(255,255,255,.7);
  font-weight: 700;
}
/* ── 토글 버튼 ── */
.region-qbar-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.region-qbar-toggle:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.6); }
.region-qbar-toggle svg { transition: transform .25s; }
.region-qbar.collapsed .region-qbar-toggle svg { transform: rotate(180deg); }

/* ── 지역바 접힘 알림 탭 ── */
.region-qbar-tab {
  position: fixed;
  top: var(--header-h);
  right: 16px;
  z-index: 90;
  height: 0;
  overflow: hidden;
  transition: height .25s cubic-bezier(.4,0,.2,1);
}
.region-qbar-tab.show {
  height: 22px;
}
.region-qbar-tab-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: var(--primary);
  border: none; border-radius: 0 0 8px 8px;
  color: rgba(255,255,255,.9);
  font-size: .68rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(13,148,136,.3);
  transition: opacity .15s;
}
.region-qbar-tab-btn:hover { opacity: .88; }

@media (max-width: 1099px) {
  .region-qbar { display: none; }
  .region-qbar-tab { display: none; }
}

/* ============================================================
   왼쪽 사이드바
   ============================================================ */
.sidebar-left {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  transition: background var(--transition);
}
.sidebar-left::-webkit-scrollbar { width: 3px; }
.sidebar-left::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* 사이드바 섹션 */
.sb-section { border-bottom: 1px solid var(--border); }
.sb-section-hd {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  font-size: 0.8rem; font-weight: 700;
  color: #fff; letter-spacing: 0.3px;
}
.sb-hd-login  { background: var(--sb-login-bg); }
.sb-hd-region { background: var(--sb-region-bg); }
.sb-hd-cat    { background: var(--sb-cat-bg); color: #1a1a1a !important; }
.sb-hd-comm   { background: var(--sb-comm-bg); }
.sb-hd-vip    { background: var(--sb-vip-bg); }

/* 로그인 패널 */
.sb-login-panel { padding: 12px; }
.sb-login-form { display: flex; flex-direction: column; gap: 7px; }
.sb-login-form .form-control {
  padding: 9px 11px;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
}
.sb-login-links {
  display: flex; justify-content: space-between;
  padding: 6px 0 2px;
  font-size: 0.78rem;
}
.sb-login-links a { color: var(--text-muted); transition: color var(--transition); }
.sb-login-links a:hover { color: var(--primary); }
.sb-logged-panel { padding: 12px; }
.sb-user-name { font-size: 0.85rem; margin-bottom: 8px; color: var(--text-secondary); }
.sb-user-name strong { color: var(--primary); }
.sb-login-btns { display: flex; gap: 6px; }

/* 광고 슬롯 */
.sb-ad-wrap { padding: 8px; }
.sb-ad-banner img { border-radius: var(--radius-md); }

/* 지역 그리드 */
.sb-region-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; padding: 8px;
}
.sb-region-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.sb-region-link:hover,
.sb-region-link.active {
  background: var(--primary-light); color: var(--primary); font-weight: 700;
}
.sb-region-link .cnt { font-size: 0.7rem; color: var(--secondary); font-weight: 700; }

/* 카테고리 / 커뮤니티 리스트 */
.sb-nav-list { padding: 6px 8px; }
.sb-nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  font-size: 0.88rem; font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.sb-nav-link:hover,
.sb-nav-link.active {
  background: var(--primary-light); color: var(--primary); font-weight: 600;
  padding-left: 14px;
}

/* ============================================================
   메인 콘텐츠
   ============================================================ */
.main-content {
  min-width: 0;
  background: var(--bg);
  padding: 0 20px;
}
@media (max-width: 899px) {
  .main-content { padding: 0 12px; }
}
.mc-section { border-bottom: 1px solid var(--border); }
.mc-section:last-child { border-bottom: none; }

/* ─── 메인 배너 ─── */
.main-banner-wrap { background: var(--bg-card); }
.main-banner {
  width: 100%; aspect-ratio: 16/6;
  background: #042F2E;
  position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* 배너 장식 파티클 */
.main-banner::before {
  content: none;
}
.main-banner img { width: 100%; height: 100%; object-fit: cover; position: absolute; }
.main-banner-text {
  position: relative; z-index: 1;
  text-align: center; color: #fff; padding: 20px;
}
.main-banner-text h2 {
  font-size: 1.7rem; font-weight: 900; margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.30);
  letter-spacing: -0.5px;
}
.main-banner-text p { font-size: 0.95rem; opacity: 0.88; }

/* ─── 검색 드롭다운 영역 ─── */
.search-dropdowns-wrap {
  margin: 14px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.search-dropdowns-title {
  font-size: 0.92rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.search-dropdowns-title::before {
  content: '';
  display: inline-block; width: 3px; height: 16px;
  background: var(--primary); border-radius: 2px;
}
.search-dropdowns-row {
  display: flex; gap: 8px; align-items: stretch;
}
.search-dropdowns-row .form-control {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  background: var(--bg-input);
}
.btn-search-full {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: var(--primary);
  color: #fff; border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 700;
  white-space: nowrap; cursor: pointer; border: none;
  transition: all var(--transition);
  box-shadow: 0 4px 12px var(--primary-glow);
  flex-shrink: 0;
}
.btn-search-full:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--primary-glow);
}

/* ─── 퀵링크 ─── */
.quick-links-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px 10px;
}
.quick-link-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
  transition: all var(--transition);
}
.quick-link-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ─── 섹션 헤더 ─── */
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 8px;
}
.section-hd-left { display: flex; align-items: center; gap: 10px; }
.section-hd-bar  { width: 4px; height: 18px; background: var(--primary); border-radius: 2px; }
.section-hd-title {
  font-size: 0.95rem; font-weight: 800; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.section-hd-more {
  font-size: 0.8rem; color: var(--primary); font-weight: 600;
  transition: all var(--transition);
}
.section-hd-more:hover { text-decoration: underline; gap: 4px; }

/* ─── 업소 그리드 ─── */
.shop-grid-mc {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 10px 14px;
}

/* ─── 업소 카드 ─── */
.shop-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  box-shadow: var(--shadow-xs);
}
.shop-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.shop-card-vip { border-color: var(--secondary); }
.shop-card-vip::before {
  content: '';  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--secondary);
  z-index: 1;
}
.shop-thumb {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--bg-card2);
}
.shop-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.shop-card:hover .shop-thumb img { transform: scale(1.06); }
.shop-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 2rem;
}
.shop-thumb-badges {
  position: absolute; top: 6px; left: 6px;
  display: flex; flex-wrap: wrap; gap: 3px; z-index: 1;
}
.shop-info { padding: 10px 10px; }
.shop-name {
  font-size: 0.88rem; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 3px;
}
.shop-meta {
  font-size: 0.78rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.shop-price { font-size: 0.8rem; color: var(--secondary); font-weight: 700; margin-top: 4px; }

/* ─── 지역 카드 그리드 ─── */
.region-grid-home {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px; padding: 10px 14px;
}
.region-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition); text-align: center; cursor: pointer;
}
.region-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.region-card .r-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.region-card .r-count { font-size: 0.72rem; color: var(--secondary); font-weight: 700; }

/* ─── 카테고리 그리드 ─── */
.category-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; padding: 10px 14px;
}
.category-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.22s ease; text-align: center; cursor: pointer;
  position: relative; overflow: hidden;
}
.category-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--primary);
  transform: scaleX(0); transition: transform var(--transition);
}
.category-card:hover {
  border-color: var(--primary); background: var(--primary-light);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.category-card:hover::before { transform: scaleX(1); }
.category-icon { font-size: 1.5rem; line-height: 1; }
.category-name { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }

/* ─── 게시판 ─── */
.board-tabs {
  display: flex; gap: 2px;
  padding: 10px 14px 0; background: var(--bg);
}
.board-tabs .tab {
  padding: 7px 16px; font-size: 0.875rem; font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid transparent; border-bottom: none;
  transition: all var(--transition); cursor: pointer;
}
.board-tabs .tab.active {
  color: var(--primary);
  background: var(--bg-card);
  border-color: var(--border);
  border-bottom-color: var(--bg-card);
  margin-bottom: -1px;
}
.board-panel {
  margin: 0 14px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  overflow: hidden;
}
.board-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.board-item:last-child { border-bottom: none; }
.board-item:hover { background: var(--bg-card2); }
.board-item a {
  font-size: 0.88rem; color: var(--text-secondary); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-item a:hover { color: var(--primary); }
.board-item time {
  font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; margin-left: 10px;
}

/* ─── CTA 섹션 ─── */
.cta-box {
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  padding: 24px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 14px;
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute; top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}
.cta-text { color: #fff; position: relative; z-index: 1; }
.cta-text h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.2px; }
.cta-text p  { font-size: 0.85rem; opacity: 0.85; }
.cta-btns { display: flex; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.cta-btns .btn { font-size: 0.85rem; padding: 9px 18px; }
.btn-cta-primary { background: #fff; color: var(--primary); font-weight: 700; }
.btn-cta-primary:hover { background: #f0fffd; transform: translateY(-1px); color: var(--primary); }
.btn-cta-outline {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-cta-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ============================================================
   오른쪽 사이드바 (VIP 업소)
   ============================================================ */
.sidebar-right {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden; background: var(--bg-sidebar);
  border-left: 1px solid var(--border);
}
.sidebar-right::-webkit-scrollbar { width: 3px; }
.sidebar-right::-webkit-scrollbar-thumb { background: var(--border); }
.sr-section { border-bottom: 1px solid var(--border); }

.sr-shop-card {
  display: flex; flex-direction: column;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  cursor: pointer;
}
.sr-shop-card:hover { background: var(--primary-light); }
.sr-shop-thumb {
  width: 100%; aspect-ratio: 3/2;
  overflow: hidden; border-radius: var(--radius-md);
  background: var(--bg-card2); margin-bottom: 7px;
}
.sr-shop-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.sr-shop-card:hover .sr-shop-thumb img { transform: scale(1.04); }
.sr-shop-name { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.sr-shop-region { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   상단 배너 (page-wrapper 밖)
   ============================================================ */
.banner-top-wrap {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.banner-top-link img {
  width: 100%; max-height: 100px; object-fit: cover;
  border-radius: var(--radius-md);
}

/* ============================================================
   푸터
   ============================================================ */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 32px 16px 20px; }
.footer-grid {
  display: grid; grid-template-columns: 1.8fr 1fr;
  gap: 32px; margin-bottom: 28px;
}
.footer-brand a {
  font-size: 1.2rem; font-weight: 900; color: var(--primary);
  display: block; margin-bottom: 8px;
}
.footer-brand p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; }
.footer-links h3 { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.footer-links ul { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 0.85rem; color: var(--text-muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--primary); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--border);
}
.footer-copy { font-size: 0.82rem; color: var(--text-muted); }
.footer-notice { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================================
   플로팅 버튼 (FAB)
   ============================================================ */
.floating-btns {
  position: fixed; bottom: 24px; right: 20px;
  display: flex; flex-direction: column; gap: 8px; z-index: 50;
}
.fab {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition);
}
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-xl); }
.fab:active { transform: scale(0.95); }
.fab-inquiry { background: var(--secondary); color: #fff; }
.fab-sidebar  { background: var(--primary); color: #fff; display: none; }
.fab-top {
  background: var(--bg-card); border: 1.5px solid var(--border);
  color: var(--text-secondary);
}
.fab-top:hover { border-color: var(--primary); color: var(--primary); }

/* 사이드바 오버레이 */
#sidebarOverlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 149;
  backdrop-filter: blur(3px);
}

/* ============================================================
   모바일 메뉴 오버레이
   ============================================================ */
.mobile-menu-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); z-index: 200;
  opacity: 0; transition: opacity var(--transition);
  backdrop-filter: blur(4px);
}
.mobile-menu-overlay.active { opacity: 1; }
.mobile-menu {
  position: absolute; top: 0; right: 0;
  width: min(320px, 85vw); height: 100%;
  background: var(--bg-card);
  overflow-y: auto; transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu-overlay.active .mobile-menu { transform: translateX(0); }
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 1rem; color: var(--text-primary);
}
.mobile-menu-close {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--bg-card2);
  font-size: 1rem; color: var(--text-muted); transition: all var(--transition);
}
.mobile-menu-close:hover { background: var(--border); color: var(--text-primary); }
.mobile-menu ul li a {
  display: block; padding: 12px 16px;
  font-size: 0.92rem; font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  transition: all var(--transition);
}
.mobile-menu ul li a:hover { background: var(--primary-light); color: var(--primary); padding-left: 22px; }
.mobile-region-section { padding: 16px; }
.mobile-region-section strong { font-size: 0.9rem; color: var(--text-muted); display: block; margin-bottom: 10px; }
.mobile-region-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mobile-region-grid a {
  padding: 8px 4px; text-align: center;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.mobile-region-grid a:hover { background: var(--primary-light); color: var(--primary); }

/* ============================================================
   어드민 레이아웃 (공통)
   ============================================================ */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 210px; background: var(--bg-card);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-content { flex: 1; padding: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; text-align: center;
}

/* ============================================================
   검색 자동완성 드롭다운
   ============================================================ */
.search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); margin-top: 4px;
  box-shadow: var(--shadow-xl); overflow: hidden;
  list-style: none; padding: 4px 0;
}
.search-dropdown li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 0.88rem; color: var(--text-secondary);
  transition: background var(--transition);
}
.search-dropdown li a:hover { background: var(--primary-light); color: var(--primary); }

/* ============================================================
   애드센스 / 광고
   ============================================================ */
.adsense-wrap { padding: 10px 0; text-align: center; }

/* ============================================================
   업소 상세 페이지
   ============================================================ */
.shop-detail-layout { padding: 14px; }
.form-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   AOS 커스텀 오버라이드
   ============================================================ */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* ============================================================
   반응형: 태블릿 (1199px 이하)
   ============================================================ */
@media (max-width: 1199px) {
  :root {
    --max-w: 100%;
  }
  .shop-grid-mc { grid-template-columns: repeat(3, 1fr); }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   반응형: 모바일 (899px 이하)  — 2026-04 전면 개편
   ============================================================ */
@media (max-width: 899px) {
  /* 레이아웃 */
  /* 히어로 배너 등 전폭 요소는 패딩 돌파 */
  .hero-banner-wrap { margin-left: -12px; margin-right: -12px; border-radius: 0; }
  .mc-section { margin-left: -12px; margin-right: -12px; }

  /* 상단 유틸리티 바 + 헤더 우측 네비 숨김 */
  .top-utility-bar  { display: none; }
  .header-right-nav { display: none; }

  /* 그리드 */
  .search-dropdowns-row { flex-direction: column; }
  .search-dropdowns-row .form-control { width: 100%; }
  .shop-grid-mc { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .region-grid-home { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   반응형: 소형 모바일 (767px 이하)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --topbar-h:       0px;
    --header-h:       54px;
    --mainnav-h:      40px;
    --total-header-h: 94px;
  }
  html { font-size: 15px; }
  .top-utility-bar { display: none; }
  .header-search { max-width: none; flex: 1; }
  .header-right-nav { display: none; }
  /* 하단 탭바가 메뉴 역할을 대체하므로 햄버거 버튼 숨김 */
  .mobile-menu-btn { display: none; }
  /* 탭 네비 업소등록 숨김 (하단 탭바 입점으로 대체) */
  .top-tab-nav-inner .tab-inquiry { display: none !important; }
  .top-tab-nav-inner a { padding: 0 12px; font-size: 0.85rem; }
  .main-banner-text h2 { font-size: 1.2rem; }
  .search-dropdowns-wrap { margin: 8px; }
  .shop-grid-mc { grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 8px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .region-grid-home { padding: 8px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .footer-brand p { font-size: 0.8rem; }
  .floating-btns { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 14px; }
  .fab { width: 42px; height: 42px; }
  .cta-box { flex-direction: column; text-align: center; }
  .cta-btns { width: 100%; justify-content: center; }
}

/* ============================================================
   반응형: 극소형 (479px 이하)
   ============================================================ */
@media (max-width: 479px) {
  /* 극소형: 탭 4개만 표시 */
  .top-tab-nav-inner a:not(:nth-child(-n+4)) { display: none; }
  .shop-grid-mc { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 중간 모바일 (768–899px): 하단 탭바 없음 → 햄버거 표시 ── */
@media (min-width: 768px) and (max-width: 899px) {
  .mobile-menu-btn { display: flex; }
}

/* ============================================================
   2026 트렌드 — 특수 효과
   ============================================================ */

/* 글로우 효과 */
.glow-primary { box-shadow: 0 0 20px var(--primary-glow); }

/* 유리효과 카드 */
.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.30);
}
[data-theme="dark"] .glass-card {
  background: var(--bg-glass);
  border-color: rgba(255,255,255,0.07);
}

/* 그라디언트 텍스트 */
.text-gradient {
  color: var(--primary);
}

/* 맥박 애니메이션 (뱃지 등에 활용) */
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 var(--primary-glow); }
  50%      { box-shadow: 0 0 0 8px rgba(13,148,136,0); }
}
.badge-new { animation: pulse-glow 2.5s ease infinite; }

/* 스켈레톤 로딩 */
@keyframes shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card2) 25%, var(--border) 50%, var(--bg-card2) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* 호버시 테두리 빛 효과 */
.shop-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow 0.25s ease;
  pointer-events: none;
}
.shop-card:hover::after {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* 상단 진입 애니메이션 오버라이드 (AOS 보완) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 0.5s ease both; }

/* Swiper 커스텀 */
.swiper-pagination-bullet { background: rgba(255,255,255,0.6); opacity: 1; }
.swiper-pagination-bullet-active { background: #fff; transform: scale(1.2); }
.swiper-button-next,
.swiper-button-prev {
  width: 38px !important; height: 38px !important;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border-radius: 50% !important;
  color: #fff !important;
}
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 14px !important; font-weight: 900 !important; }

/* ─────────────────────────────────────────────
   gl-card: 업소 카드 (gunmalove style 2026)
   사용: home, region-list, search, theme-list
   ───────────────────────────────────────────── */
.gl-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-base);
  transition: box-shadow .2s, transform .2s, border-color .2s;
  position: relative;
}
.gl-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transform: translateY(-3px);
  border-color: var(--primary);
}
/* 이미지 영역 */
.gl-img-wrap {
  position: relative;
  aspect-ratio: 258/198;
  background: #0B1F1E;
  overflow: hidden;
}
.gl-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gl-card:hover .gl-img-wrap img { transform: scale(1.05); }
/* 배지 */
.gl-badges {
  position: absolute; top: 6px; left: 6px;
  display: flex; flex-direction: column; gap: 3px; z-index: 2;
}
.gl-badge {
  display: inline-block; padding: 2px 7px;
  border-radius: 3px; font-size: .6rem; font-weight: 800;
  line-height: 1.4; letter-spacing: .03em;
}
.gl-badge-vip  { background: #d97706; color:#fff; }
.gl-badge-rec  { background: var(--primary); color: #fff; }
.gl-badge-new  { background: var(--secondary); color: #fff; }
.gl-badge-top  { background: var(--primary); color: #fff; }
/* 이미지 하단 오버레이 */
.gl-img-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 100%);
  padding: 28px 8px 7px; z-index: 2;
}
.gl-overlay-region {
  font-size: .88rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  line-height: 1.2; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gl-overlay-addr {
  font-size: .62rem; color: rgba(255,255,255,.75); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
/* 플레이스홀더 */
.gl-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 12px;
  background: #0B1F1E;
}
.gl-placeholder-region {
  font-size: 1.05rem; font-weight: 900; color: #fff;
  text-align: center; line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.gl-placeholder-cat { font-size: .68rem; color: rgba(255,255,255,.55); margin-top: 5px; }
/* 카드 하단 정보 */
.gl-info { padding: 8px 10px 9px; }
.gl-name {
  font-size: .85rem; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px; line-height: 1.3;
}
.gl-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.gl-region-tag {
  font-size: .72rem; font-weight: 700;
  color: var(--primary); background: rgba(13,148,136,.1);
  padding: 2px 7px; border-radius: 4px;
}
.gl-cat-tag {
  font-size: .72rem; color: var(--text-muted);
  background: var(--bg-card2); padding: 2px 7px; border-radius: 4px;
}
.gl-addr-row {
  font-size: .75rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 5px; display: flex; align-items: center; gap: 3px;
}
.gl-footer { display: flex; align-items: center; justify-content: space-between; }
.gl-stars { display: flex; align-items: center; gap: 1px; }
.gl-stars .s  { font-size: .75rem; color: #f5a623; }
.gl-stars .s-e{ font-size: .75rem; color: var(--border); }
.gl-rating-val { font-size: .75rem; font-weight: 700; color: var(--text-secondary); margin-left: 3px; }
.gl-review-cnt { font-size: .7rem; color: var(--text-muted); }
.gl-views      { font-size: .7rem; color: var(--text-muted); }
/* 카드 그리드 레이아웃 (gl-grid, shop-grid 공통) — 4열 기준 */
.gl-grid, .shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; list-style: none; padding: 0; margin: 0;
}
@media (max-width: 1199px) { .gl-grid, .shop-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 860px)  { .gl-grid, .shop-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px)  { .gl-grid, .shop-grid { grid-template-columns: repeat(2,1fr); gap: 7px; } }

/* ============================================================
   모바일 반응형 종합 보완 (2026-04)
   ============================================================ */

/* ── 탭 네비 가로 스크롤 ── */
.top-tab-nav-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.top-tab-nav-inner::-webkit-scrollbar { display: none; }
.top-tab-nav-inner a { white-space: nowrap; flex-shrink: 0; }

/* ── 헤더 로고 모바일 ── */
@media (max-width: 480px) {
  .logo-sub { display: none; }
  .logo-text { font-size: 1.2rem; }
  .logo-icon { width: 30px; height: 30px; font-size: 0.95rem; }
}

/* ── 모바일 바텀 네비 (로그인 상태) ── */
@media (max-width: 767px) {
  /* 바텀 플로팅 버튼: 하단 탭바 위로 (이미 767px 블록에서 설정됨, 여기서는 생략) */

  /* 댓글 폼 세로 스택 */
  .cmt-input-row { flex-direction: column; gap: 8px; }
  .cmt-submit { width: 100%; padding: 12px; }

  /* 별점 폼 줄바꿈 */
  .star-rating-row { flex-wrap: wrap; gap: 6px; }

  /* 검색 드롭다운 모바일 */
  .search-dropdown {
    position: fixed !important;
    top: var(--total-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 0 12px 12px !important;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 200;
  }

  /* CTA 버튼 크기 */
  .ct-btn { padding: 14px; font-size: 1rem; min-height: 48px; }

  /* 사이드바 sticky 해제 */
  .sidebar-sticky { position: static !important; }

  /* 연관 업소 그리드 */
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* 통계 행 (출근부) */
  .att-stats-row { grid-template-columns: repeat(2, 1fr); }

  /* 출근부 월 네비 */
  .att-nav span { min-width: 100px; font-size: 0.9rem; }
  .att-nav a { padding: 10px 12px; font-size: 0.8rem; }

  /* 출근부 헤더 */
  .att-header { margin-bottom: 16px; }
  .att-title { font-size: 1.1rem; }

  /* 출근부 캘린더 셀 */
  .cal-day { min-height: 68px; padding: 5px 4px 4px; }
  .cal-date { font-size: 0.75rem; }
  .staff-bubble { width: 18px; height: 18px; font-size: 0.5rem; }
  .cal-dow { font-size: 0.72rem; padding: 7px 2px; }
  .day-modal { max-width: 100% !important; margin: 0 12px; }

  /* 직원 카드 그리드 */
  .att-staff-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  /* 대시보드 카드 */
  .member-stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* 업소 상세: 연락 버튼 */
  .ct-btn-wrap { gap: 6px; }

  /* 블러 게이트 버튼 */
  .gate-btns { flex-direction: column; align-items: stretch; }
  .gate-login-btn, .gate-reg-btn { text-align: center; }

  /* 폼 그룹 */
  .form-group { margin-bottom: 14px; }
  .form-control { padding: 11px 13px; font-size: 0.9rem; }
}

/* ── 극소형 모바일 (479px 이하) ── */
@media (max-width: 479px) {
  /* 출근부 캘린더 셀 극소화 */
  .cal-day { min-height: 56px; padding: 4px 3px; gap: 2px; }
  .cal-date { font-size: 0.7rem; margin-bottom: 1px; }
  .staff-bubble { width: 15px; height: 15px; font-size: 0.45rem; border-width: 1px; }
  .cal-staff-bubbles { gap: 2px; }
  .cal-dow { padding: 6px 1px; font-size: 0.68rem; }

  /* 직원 카드 */
  .att-staff-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .staff-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
  .staff-name { font-size: 0.82rem; }

  /* 출근부 통계 */
  .att-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 12px; gap: 8px; }
  .stat-days { font-size: 1rem; }

  /* 출근부 액션 바 */
  .att-action-bar { width: 100%; justify-content: flex-end; }
  .btn-copy { font-size: 0.78rem; padding: 8px 10px; }
  .btn-add-staff { font-size: 0.82rem; padding: 8px 12px; }

  /* 이모지 피커 패널 */
  .emoji-panel { width: 200px; }
  .emoji-btn { font-size: 1rem; padding: 3px; }

  /* 날짜 메모 모달 */
  .day-note-textarea { min-height: 60px; }

  /* 헤더 검색 숨김 (극소형) */
  .header-search { flex: 1; min-width: 0; }
  .header-search button span { display: none; }

  /* 사이트 로고 */
  .site-logo a { gap: 6px; }

  /* 관련 태그 숨김 */
  .gl-cat-tag { display: none; }

  /* 탭 네비 폰트 */
  .top-tab-nav-inner a { padding: 0 10px; font-size: 0.8rem; }

  /* 플로팅 버튼 */
  .fab { width: 40px; height: 40px; }
  .fab svg { width: 16px; height: 16px; }

  /* 페이지 패딩 */
  .att-wrap { padding: 16px 10px 80px; }
}

/* ── 터치 타겟 최소 크기 보장 ── */
@media (hover: none) and (pointer: coarse) {
  .ct-btn, .sb2-login-btn, .btn-modal-submit, .btn-add-staff,
  .btn-copy, .btn-note-save, .day-modal-close,
  .att-nav a, button, .fab {
    min-height: 44px;
  }
  .day-staff-row { padding: 13px 14px; }
  .sb2-region-a, .sb2-cat-a { padding: 10px 8px; }
  /* 달력 셀 클릭 영역 확대 */
  .cal-day { cursor: pointer; -webkit-tap-highlight-color: rgba(13,148,136,0.15); }
}

/* ── 접힌 모바일 사이드바 스크롤 ── */
/* 사이드바 모바일 닫기 버튼 스타일 */
@media (max-width: 899px) {
  /* 닫기 버튼 (헤더에서 삽입) */
  .sidebar-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 2;
  }
  .sidebar-mobile-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background .15s, color .15s;
    flex-shrink: 0;
  }
  .sidebar-close-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
  }
}

/* ── 안전 영역 (iPhone X+ 노치/홈바) ── */
@media (max-width: 767px) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .floating-btns {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
  }
}

/* ── 모바일 하단 고정 탭바 ── */
.mobile-bottom-bar {
  display: none;
}
@media (max-width: 767px) {
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: 999;
    box-shadow: 0 -2px 20px rgba(0,0,0,.10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-bottom-bar a,
  .mobile-bottom-bar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 8px 0 6px;
    position: relative;
    transition: color .18s;
    font-family: var(--font);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* 아이콘 컨테이너 */
  .mbb-icon {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 28px;
    border-radius: 10px;
    transition: background .18s, transform .18s;
  }
  .mbb-label { line-height: 1; }
  /* 아이콘 SVG */
  .mobile-bottom-bar a svg,
  .mobile-bottom-bar button svg {
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  /* 액티브 상태 */
  .mobile-bottom-bar a.active,
  .mobile-bottom-bar .mbb-active {
    color: var(--primary);
  }
  .mobile-bottom-bar a.active .mbb-icon,
  .mobile-bottom-bar .mbb-active .mbb-icon {
    background: rgba(13,148,136,.1);
  }
  .mobile-bottom-bar a.active svg {
    transform: scale(1.1) translateY(-1px);
  }
  /* 액티브 상단 인디케이터 */
  .mobile-bottom-bar a.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 2.5px;
    background: var(--primary);
    border-radius: 0 0 4px 4px;
  }
  /* 호버 */
  .mobile-bottom-bar a:hover,
  .mobile-bottom-bar button:hover { color: var(--primary); }
  .mobile-bottom-bar a:hover .mbb-icon,
  .mobile-bottom-bar button:hover .mbb-icon {
    background: rgba(13,148,136,.07);
  }
  /* 탭 클릭 피드백 */
  .mobile-bottom-bar a:active svg,
  .mobile-bottom-bar button:active svg { transform: scale(.9); }
  /* ── 지도 중앙 특별 버튼 ── */
  .mobile-bottom-bar .mbb-map-btn .mbb-icon {
    background: var(--primary);
    width: 36px; height: 34px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(13,148,136,.35);
  }
  .mobile-bottom-bar .mbb-map-btn svg { color: #fff; }
  .mobile-bottom-bar .mbb-map-btn { color: var(--primary); }
  .mobile-bottom-bar .mbb-map-btn:hover .mbb-icon,
  .mobile-bottom-bar .mbb-map-btn.active .mbb-icon {
    background: var(--primary-dark, #0f766e) !important;
    box-shadow: 0 4px 16px rgba(13,148,136,.5);
  }
  .mobile-bottom-bar .mbb-map-btn.active::before { display: none; }
  /* 콘텐츠 하단 여백 (탭바 가림 방지) */
  .page-wrapper { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .att-wrap { padding-bottom: calc(80px + 60px + env(safe-area-inset-bottom, 0px)) !important; }
  /* 푸터/광고 배너 탭바 가림 방지 */
  .site-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 8px)); }
  .sfs { padding-bottom: calc(76px + env(safe-area-inset-bottom, 8px)); }
  .ft26 { padding-bottom: calc(76px + env(safe-area-inset-bottom, 8px)); }
  /* 페이지 맨 아래 여백 보장 (푸터 뒤 스크립트 영역 가림 방지) */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* page-wrapper 이후 광고 배너 여백 */
  .adsense-wrap { margin-bottom: 8px; }
}

/* ── 사이드바 모바일 헤더: 데스크탑에서 숨김 ── */
.sidebar-mobile-header { display: none; }
@media (max-width: 899px) {
  .sidebar-mobile-header { display: flex; }
}

/* ── 모바일 사이드바 슬라이드 오버레이 스타일 ── */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── 헤더 모바일 레이아웃 최적화 ── */
@media (max-width: 767px) {
  .header-inner {
    padding: 0 12px;
    gap: 8px;
  }
  .site-logo a {
    gap: 7px;
  }
  /* 검색창 플레이스홀더 단축 */
  .header-search input::placeholder {
    font-size: 0.8rem;
  }
}

/* ── 모바일에서 페이지 최상단 fixed 헤더 ── */
@media (max-width: 899px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
  }
  .top-tab-nav {
    position: sticky;
    top: var(--header-h, 60px);
    z-index: 199;
  }
}

/* ── 모바일 사이드바 열림 시 body 스크롤 방지 ── */
body.sidebar-open {
  overflow: hidden;
}

/* ── 홈 배너 / 섹션 유틸 클래스 ── */
.home-banner-wrap { margin-bottom: 16px; }
.main-banner { border-radius: 16px; overflow: hidden; display: block; }
.main-banner-img { width: 100%; height: auto; display: block; }
.home-banner-default {
  background: #042F2E; border-radius: 16px;
  padding: 28px 24px; text-align: center;
  position: relative; overflow: hidden;
}
.home-banner-default::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px; background: rgba(255,255,255,.05);
  border-radius: 50%; pointer-events: none;
}
.home-banner-title {
  color: #fff; font-size: 1.4rem; font-weight: 900;
  margin-bottom: 6px; letter-spacing: -.02em;
  position: relative; z-index: 1;
}
.home-banner-sub {
  color: rgba(255,255,255,.8); font-size: 0.85rem;
  position: relative; z-index: 1;
}
.home-sec-wrap { margin-bottom: 22px; }
.home-sec-bar--vip    { background: #d97706; }
.home-sec-bar--region { background: var(--secondary); }
.home-sec-bar--theme  { background: var(--accent); }
.home-sec-bar--new    { background: #22c55e; }
.home-sec-bar--comm   { background: var(--sb-comm-bg); }
.badge-sm { font-size: 0.62rem !important; flex-shrink: 0; }
.home-comm-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; box-shadow: var(--shadow-xs);
}
.home-comm-empty {
  padding: 22px; text-align: center;
  font-size: 0.82rem; color: var(--text-muted);
}
/* 헤더 액션 그룹 */
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-nav-sep { width: 1px; height: 18px; background: rgba(255,255,255,.12); flex-shrink: 0; }

/* 헤더 모바일 패딩 보완 */
@media (max-width: 767px) {
  .header-inner { padding: 0 14px; gap: 8px; }
  .top-tab-nav-inner { padding: 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .top-tab-nav-inner::-webkit-scrollbar { display: none; }
}

/* ── 데코 배지 그라데이션 제거 오버라이드 ── */
.deco-extra-badge.deco-badge_hot       { background: #ff4500 !important; }
.deco-extra-badge.deco-badge_exclusive { background: #374151 !important; }
.deco-extra-badge.deco-badge_limited   { background: #991b1b !important; }
.deco-extra-badge.deco-badge_event     { background: #0D9488 !important; }
.deco-extra-badge.deco-badge_sale      { background: #dc2626 !important; }

/* ============================================================
   2026 홈 리디자인 — 히어로 + 글래스모피즘 + 스크롤헤더
   ============================================================ */

/* ── 새 CSS 변수 (theme.css에서 관리 — 여기서는 glass 오버라이드만) ── */
:root {
  --glass-bg:      rgba(255,255,255,0.10);
  --glass-border:  rgba(255,255,255,0.18);
}
/* 라이트 모드 변수 오버라이드 */
[data-theme="light"] {
  --glass-bg:      rgba(255,255,255,0.55);
  --glass-border:  rgba(13,148,136,0.20);
}

/* ── 헤더 스크롤 글래스 효과 ── */
.site-header {
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.scroll-glass {
  background: rgba(7,19,17,0.88) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-theme="light"] .site-header.scroll-glass {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ── 모바일 드로어 ── */
.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 290;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.mobile-drawer-backdrop.open { opacity: 1; }

.mobile-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  max-height: 85vh;
  background: var(--bg-card);
  z-index: 300;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  transform: translateY(-105%);
  transition: transform 0.32s cubic-bezier(0.32, 0, 0.67, 0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.open {
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.mobile-drawer-logo {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.03em;
}
.mobile-drawer-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all .15s;
  flex-shrink: 0;
}
.mobile-drawer-close:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.mobile-drawer-body { padding: 14px 16px 20px; }
.mobile-drawer-section { margin-bottom: 20px; }
.mobile-drawer-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-left: 4px;
}
.mobile-drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.mobile-drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all .15s;
}
.mobile-drawer-nav-item:hover,
.mobile-drawer-nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
}
.mobile-drawer-nav-icon { font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; }
.mobile-drawer-region-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mobile-drawer-region-a {
  padding: 9px 4px;
  background: var(--bg-card2);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  text-align: center;
  transition: all .15s;
}
.mobile-drawer-region-a:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.mobile-drawer-cta { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.mobile-drawer-cta-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: all .18s;
}
.mobile-drawer-cta-btn.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.mobile-drawer-cta-btn.primary:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }
.mobile-drawer-cta-btn.outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.mobile-drawer-cta-btn.outline:hover { background: var(--primary-light); color: var(--primary); }

body.drawer-open { overflow: hidden; }

.mobile-drawer-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background .18s, border-color .18s;
  flex-shrink: 0;
}
.mobile-drawer-trigger:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
[data-theme="light"] .mobile-drawer-trigger {
  background: var(--bg-card2);
  border-color: var(--border);
  color: var(--text-secondary);
}
@media (max-width: 899px) {
  .mobile-drawer-trigger { display: flex; }
  .mobile-menu-btn { display: none !important; }
}
@media (max-width: 899px) {
  .hero-section { margin-left: -12px; margin-right: -12px; }
}

/* ── 4컬럼 푸터 ── */
.site-footer-new {
  background: #0b1120;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 8px;
}
[data-theme="light"] .site-footer-new { background: #f0fffd; border-top: 1px solid var(--border); }
.footer-new-inner { max-width: var(--max-w); margin: 0 auto; padding: 40px 16px 0; }
.footer-new-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 899px) { .footer-new-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px)  { .footer-new-grid { grid-template-columns: 1fr; gap: 20px; } }

.fn-brand-logo {
  font-size: 1.3rem; font-weight: 900;
  color: #5eead4;
  display: block; margin-bottom: 10px; letter-spacing: -0.03em; text-decoration: none;
}
[data-theme="light"] .fn-brand-logo {
  color: var(--primary);
}
.fn-brand-desc { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 14px; }
[data-theme="light"] .fn-brand-desc { color: var(--text-muted); }
.fn-brand-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-brand-tag {
  font-size: 0.72rem; color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 3px 10px; text-decoration: none; transition: all .15s;
}
.fn-brand-tag:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }
[data-theme="light"] .fn-brand-tag { color: var(--text-muted); background: var(--bg-card2); border-color: var(--border); }
[data-theme="light"] .fn-brand-tag:hover { color: var(--primary); background: var(--primary-light); border-color: var(--primary); }

.fn-col-title {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px;
}
[data-theme="light"] .fn-col-title { color: var(--text-muted); }
.fn-col-list { display: flex; flex-direction: column; gap: 8px; }
.fn-col-list a { font-size: 0.83rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color .15s; }
.fn-col-list a:hover { color: rgba(255,255,255,0.9); }
[data-theme="light"] .fn-col-list a { color: var(--text-secondary); }
[data-theme="light"] .fn-col-list a:hover { color: var(--primary); }

.footer-new-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
[data-theme="light"] .footer-new-bottom { border-top-color: var(--border); }
.footer-new-copy { font-size: 0.78rem; color: rgba(255,255,255,0.3); }
[data-theme="light"] .footer-new-copy { color: var(--text-muted); }
.footer-new-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-new-links a { font-size: 0.75rem; color: rgba(255,255,255,0.35); text-decoration: none; transition: color .15s; }
.footer-new-links a:hover { color: rgba(255,255,255,0.7); }
[data-theme="light"] .footer-new-links a { color: var(--text-muted); }
[data-theme="light"] .footer-new-links a:hover { color: var(--primary); }
.footer-new-notice {
  font-size: 0.72rem; color: rgba(255,255,255,0.22);
  width: 100%; text-align: center; padding-bottom: 12px;
}
[data-theme="light"] .footer-new-notice { color: var(--text-muted); opacity: 0.7; }

/* ── 푸터 모바일 탭바 여백 ── */
@media (max-width: 767px) {
  .site-footer-new { padding-bottom: calc(56px + env(safe-area-inset-bottom, 8px)); }
}

/* ============================================================
   전체 반응형 보완 패치 (2026-04-12)
   — 테스트 후 발견된 overflow, grid, 터치 이슈 일괄 수정
   ============================================================ */

/* ── 전역 overflow 방지 ── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
.container { padding: 0 16px; max-width: 100%; }

/* ── 이미지/미디어 최대폭 보호 ── */
img, video, iframe, canvas { max-width: 100%; }

/* ── 검색 결과 카드 (gl-grid / shop-grid) — 모바일 2열 유지 ── */
@media (max-width: 400px) {
  .gl-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ── 업소 카드 그리드 (shop-grid-mc) ── */
@media (max-width: 640px) {
  .shop-grid-mc { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; padding: 6px; }
}

/* ── 카테고리 그리드 극소형 ── */
@media (max-width: 400px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
@media (max-width: 360px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

/* ── 검색 폼 (지역/카테고리 드롭다운) ── */
@media (max-width: 640px) {
  .search-dropdowns-wrap { margin: 6px 0; padding: 12px 10px; }
  .search-dropdowns-row { flex-direction: column; gap: 6px; }
  .search-dropdowns-row .form-control { width: 100%; }
  .srch-form { flex-direction: column; }
  .srch-form input, .srch-form-btn { width: 100%; }
}

/* ── 커뮤니티 벤토: 640px에서도 단열 ── */
@media (max-width: 640px) {
  .community-bento { grid-template-columns: 1fr !important; }
  .comm-feed-grid   { grid-template-columns: 1fr !important; }
}

/* ── 지역 그리드: 아주 작은 화면에서 2열 유지 ── */
@media (max-width: 360px) {
  .region-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 헤더 크레딧 뱃지 극소형 ── */
@media (max-width: 420px) {
  .hdr-credits { padding: 5px 8px; font-size: 0.72rem; gap: 3px; }
}

/* ── 데스크탑에서 탭네비 없음 → --mainnav-h: 0 ── */
@media (min-width: 1100px) {
  :root { --mainnav-h: 0px; }
}

/* ── 탑탭 네비 극소형 ── */
@media (max-width: 360px) {
  .top-tab-nav-inner a { padding: 0 8px; font-size: 0.75rem; }
}

/* ── 업소 상세 (det-grid): 600px에서도 단열 ── */
@media (max-width: 600px) {
  .det-grid { grid-template-columns: 1fr !important; }
  .img-sub-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .shop-map-box { height: 220px; }
}

/* ── 부스트 안내 카드 그리드 ── */
.boost-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .boost-info-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* ── 대시보드 테이블 ── */
@media (max-width: 640px) {
  .db2-table { font-size: 0.75rem; }
  .db2-table th, .db2-table td { padding: 7px 6px; }
  .db2-table .db2-truncate { max-width: 80px; }
}
@media (max-width: 420px) {
  /* 광고 관리 테이블 — 부가 컬럼 숨김 */
  .db2-table .db2-col-hide-xs { display: none; }
}

/* ── 대시보드 헤더 버튼 (400px 이하) ── */
@media (max-width: 400px) {
  .db2-hbtn span { display: none; }
  .db2-hbtn { padding: 7px 10px; }
}

/* ── 검색 오버레이 내부 최대폭 ── */
.search-overlay-inner-wrap {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

/* ── 플로팅 버튼 노치 안전 영역 (추가 보완) ── */
@supports (bottom: env(safe-area-inset-bottom)) {
  .floating-btns {
    bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* ── 탭바/퀵네비 가로 스크롤 스냅 ── */
.hm-quick-inner,
.top-tab-nav-inner,
.tab-bar {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hm-qn-pill,
.top-tab-nav-inner a,
.tab-btn { scroll-snap-align: start; }

/* ── 터치 기기 호버 비활성화 (iOS 링크 지연 방지) ── */
@media (hover: none) {
  .shop-card:hover,
  .region-card:hover,
  .hm-qn-pill:hover { transform: none; }
}

/* ── 가로 모드 (landscape) 극소형 대응 ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section { min-height: 280px; padding: 24px 16px 32px; }
  .hero-orb-1, .hero-orb-2, .hero-orb-3 { display: none; }
  .mobile-bottom-bar { display: none; }
}

/* ══════════════════════════════════════════════════
   슬림 푸터 (.sfs)
══════════════════════════════════════════════════ */
.sfs {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
  margin-top: 0;
}
.sfs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sfs-logo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.sfs-logo:hover { color: var(--primary); }
.sfs-nav {
  display: flex;
  align-items: center;
  gap: 4px 14px;
  flex-wrap: wrap;
  flex: 1;
}
.sfs-nav a {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.sfs-nav a:hover { color: var(--text-primary); }
.sfs-copy {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 600px) {
  .sfs-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sfs-nav { gap: 3px 12px; }
}

/* ══════════════════════════════════════════════════
   업그레이드 탭/버튼 강조
══════════════════════════════════════════════════ */
.tab-upgrade { color: var(--primary) !important; font-weight: 600; }
.fab-upgrade { background: var(--primary) !important; }

/* ══════════════════════════════════════════════════
   대시보드 레벨 위젯 (.db2-level-widget)
══════════════════════════════════════════════════ */
.db2-level-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 16px;
}
.db2-lv-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.db2-lv-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid transparent;
  flex-shrink: 0;
  gap: 2px;
}
.db2-lv-icon { font-size: 1.4rem; line-height: 1; }
.db2-lv-num { font-size: 0.65rem; font-weight: 800; line-height: 1; }
.db2-lv-info { flex: 1; min-width: 0; }
.db2-lv-tier { font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; }
.db2-lv-bar-wrap { display: flex; flex-direction: column; gap: 3px; }
.db2-lv-bar-bg {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  width: 100%;
  max-width: 260px;
}
.db2-lv-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
}
.db2-lv-bar-txt { font-size: 0.7rem; color: var(--text-muted); }
.db2-lv-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.db2-lv-streak {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f97316;
  display: flex;
  align-items: center;
  gap: 3px;
}
.db2-lv-streak-fire { font-size: 1rem; }
.db2-lv-rank-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  white-space: nowrap;
}
.db2-lv-rank-btn:hover { background: var(--primary); color: #fff; }
.db2-lv-checkin-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.db2-lv-checkin-btn:hover { opacity: 0.88; }
.db2-lv-checkin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.db2-lv-checked {
  font-size: 0.75rem;
  color: #10b981;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .db2-level-widget { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
  .db2-lv-right { width: 100%; justify-content: flex-end; }
  .db2-lv-bar-bg { max-width: 100%; }
}
@media (max-width: 400px) {
  .db2-lv-right { flex-wrap: wrap; gap: 6px; }
}

/* ══════════════════════════════════════════════════
   레벨 랭킹 페이지 (.lvp-*)
══════════════════════════════════════════════════ */
.lvp-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }
.lvp-hero {
  background: #021A19;
  border-radius: 18px;
  padding: 32px 28px;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
[data-theme="light"] .lvp-hero {
  background: var(--primary);
}
.lvp-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(13,148,136,.25);
}
.lvp-hero-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; }
.lvp-hero-sub { font-size: 0.85rem; opacity: .75; margin-bottom: 20px; }
.lvp-my-card {
  background: rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lvp-my-badge {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; background: rgba(255,255,255,.15);
  border-radius: 10px; padding: 8px 14px;
}
.lvp-my-badge .lv-icon { font-size: 1.5rem; }
.lvp-my-badge .lv-num { font-size: 0.7rem; font-weight: 800; }
.lvp-my-info { flex: 1; min-width: 160px; }
.lvp-my-tier { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.lvp-my-bar-bg { height: 8px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.lvp-my-bar-fill { height: 100%; border-radius: 99px; }
.lvp-my-exp { font-size: 0.72rem; opacity: .7; }
.lvp-my-rank { text-align: right; }
.lvp-my-rank-num { font-size: 2rem; font-weight: 900; line-height: 1; }
.lvp-my-rank-lbl { font-size: 0.72rem; opacity: .7; }
.lvp-checkin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding: 9px 20px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px; color: #fff; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background .2s;
}
.lvp-checkin-btn:hover { background: rgba(255,255,255,.3); }
.lvp-checkin-btn:disabled { opacity: .5; cursor: not-allowed; }
.lvp-checked-txt { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.82rem; color: #86efac; font-weight: 600; }

/* 계급 가이드 */
.lvp-section-title { font-size: 1rem; font-weight: 700; margin: 28px 0 14px; color: var(--text-primary); }
.lvp-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.lvp-tier-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  background: var(--bg-card);
  transition: transform .15s, box-shadow .15s;
}
.lvp-tier-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.lvp-tier-icon { font-size: 1.8rem; margin-bottom: 6px; }
.lvp-tier-name { font-size: 0.8rem; font-weight: 700; margin-bottom: 3px; }
.lvp-tier-range { font-size: 0.7rem; color: var(--text-muted); }

/* 리더보드 */
.lvp-leaderboard { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-card); margin-bottom: 28px; }
.lvp-lb-hd {
  display: grid;
  grid-template-columns: 56px 1fr 120px 100px;
  gap: 0;
  padding: 10px 16px;
  background: var(--bg-sidebar);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.lvp-lb-row {
  display: grid;
  grid-template-columns: 56px 1fr 120px 100px;
  gap: 0;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background .15s;
}
.lvp-lb-row:last-child { border-bottom: none; }
.lvp-lb-row:hover { background: var(--bg-hover); }
.lvp-lb-row.top3 { background: rgba(13,148,136,.06); }
.lvp-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.8rem; font-weight: 800;
}
.lvp-rank-badge.r1 { background: #fef08a; color: #92400e; }
.lvp-rank-badge.r2 { background: #e2e8f0; color: #475569; }
.lvp-rank-badge.r3 { background: #fed7aa; color: #9a3412; }
.lvp-rank-num { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.lvp-user-col { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lvp-user-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.lvp-user-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvp-tier-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; border: 1px solid;
}
.lvp-exp-txt { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
@media (max-width: 600px) {
  .lvp-lb-hd, .lvp-lb-row { grid-template-columns: 44px 1fr 80px; }
  .lvp-lb-hd > *:last-child, .lvp-lb-row > *:last-child { display: none; }
  .lvp-hero-title { font-size: 1.2rem; }
  .lvp-tier-grid { grid-template-columns: repeat(3, 1fr); }
}

/* EXP 획득 가이드 */
.lvp-exp-guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.lvp-exp-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lvp-exp-item-icon { font-size: 1.3rem; flex-shrink: 0; }
.lvp-exp-item-body { }
.lvp-exp-item-name { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.lvp-exp-item-val { font-size: 0.7rem; color: var(--primary); font-weight: 700; }

/* 페이지네이션 */
.lvp-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 8px 0; }
.lvp-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 7px;
  font-size: 0.82rem; font-weight: 500; text-decoration: none;
  color: var(--text-primary); background: var(--bg-card);
  transition: all .15s;
}
.lvp-page-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.lvp-page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }

/* ══════════════════════════════════════════════════
   업그레이드 플랜 페이지 (.ugp-*)
══════════════════════════════════════════════════ */
.ugp-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }
.ugp-hero {
  background: #021A19;
  border-radius: 18px; padding: 28px 28px 24px; color: #fff; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
[data-theme="light"] .ugp-hero {
  background: var(--primary-dark);
}
.ugp-hero-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.ugp-hero-sub { font-size: 0.85rem; opacity: .75; }
.ugp-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ugp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12);
}
.ugp-badge.active { background: rgba(13,148,136,.4); border-color: var(--aurora-4); }
.ugp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.ugp-stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; text-align: center;
}
.ugp-stat-val { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.ugp-stat-lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.ugp-section-title { font-size: 1rem; font-weight: 700; margin: 24px 0 12px; }
.ugp-active-orders { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ugp-order-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; flex-wrap: wrap;
}
.ugp-order-name { font-size: 0.85rem; font-weight: 600; }
.ugp-order-dates { font-size: 0.72rem; color: var(--text-muted); }
.ugp-order-status {
  font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  background: #dcfce7; color: #166534;
}
.ugp-plans {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
  margin-bottom: 28px;
}
.ugp-plan-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column;
  gap: 10px; transition: border-color .2s, box-shadow .2s;
}
.ugp-plan-card:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(13,148,136,.15); }
.ugp-plan-card.featured { border-color: var(--primary); background: rgba(13,148,136,.06); }
.ugp-plan-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 99px; font-size: 0.7rem; font-weight: 700;
  background: var(--primary); color: #fff; width: fit-content;
}
.ugp-plan-name { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.ugp-plan-price { font-size: 1.3rem; font-weight: 900; color: var(--primary); }
.ugp-plan-price span { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }
.ugp-plan-features { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.7; flex: 1; }
.ugp-plan-cta {
  display: block; text-align: center; padding: 9px 16px;
  border-radius: 8px; font-size: 0.82rem; font-weight: 700; text-decoration: none;
  background: var(--primary); color: #fff; transition: opacity .2s;
}
.ugp-plan-cta:hover { opacity: .85; }
.ugp-feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.ugp-feat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.ugp-feat-icon { font-size: 1.6rem; margin-bottom: 8px; }
.ugp-feat-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.ugp-feat-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }
.ugp-feat-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; font-size: 0.75rem; font-weight: 700;
  color: var(--primary); text-decoration: none;
}
@media (max-width: 700px) {
  .ugp-stats { grid-template-columns: repeat(2, 1fr); }
  .ugp-feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ugp-hero { padding: 20px 16px 18px; }
  .ugp-hero-title { font-size: 1.15rem; }
  .ugp-plans { grid-template-columns: 1fr; }
  .ugp-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================================
   공통 페이지 컴포넌트 (listing 페이지 통일)
   — breadcrumb / page-hero / page-filter-nav
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   게시판 공통 컴포넌트 통합
   — bd-nav-tabs / page-bc / bd-hd
   모든 스킨에서 동일하게 렌더링
   ═══════════════════════════════════════════════════════════════ */

/* ── 브레드크럼 ── */
.page-bc {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 2px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-bottom: 14px;
}
.page-bc a { color: var(--text-muted); text-decoration: none; transition: color .15s; }
.page-bc a:hover { color: var(--primary); }
.page-bc .sep { color: var(--border); margin: 0 3px; user-select: none; }
.page-bc .cur { color: var(--text-primary); font-weight: 600; }

/* ── 게시판 탭 네비 (전 스킨 공통, --bd-color 변수로 활성 색 제어) ── */
.bd-nav-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* 스크롤: 모바일·데스크탑 모두 동작 */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge */
  -webkit-overflow-scrolling: touch; /* iOS */
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.bd-nav-tabs::-webkit-scrollbar { display: none; }

.bd-nav-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700;
  color: var(--text-muted); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.bd-nav-tab:hover { background: var(--bg-card2); color: var(--text-primary); }
.bd-nav-tab.active {
  background: var(--bd-color, var(--primary));
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
/* 게시글 수 뱃지 */
.bd-nav-tab-cnt {
  font-size: 0.67rem; font-weight: 700;
  background: rgba(255,255,255,.26);
  padding: 1px 6px; border-radius: 999px;
}
.bd-nav-tab:not(.active) .bd-nav-tab-cnt {
  background: var(--bg-card2);
  color: var(--text-muted);
}
/* 데스크탑: 탭이 많을 때 가로 스크롤 강제 */
@media (min-width: 768px) {
  .bd-nav-tabs {
    overflow-x: auto;
  }
  /* 탭이 적으면 wrap 없이 한 줄 유지 */
  .bd-nav-tab { padding: 8px 18px; }
}

/* ── 게시판 헤더 배너 (통합 .bd-hd 컴포넌트) ── */
.bd-hd {
  background: var(--bd-color, var(--primary));
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* 장식 원형 */
.bd-hd::before {
  content: '';
  position: absolute; top: -55px; right: -55px;
  width: 190px; height: 190px;
  background: rgba(255,255,255,.07);
  border-radius: 50%; pointer-events: none;
}
.bd-hd::after {
  content: '';
  position: absolute; bottom: -40px; left: 30px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,.04);
  border-radius: 50%; pointer-events: none;
}
.bd-hd-left  { position: relative; z-index: 1; min-width: 0; }
.bd-hd-label {
  font-size: 0.65rem; font-weight: 800;
  color: rgba(255,255,255,.62);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.bd-hd-title {
  font-size: 1.2rem; font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1.25;
}
.bd-hd-desc  { font-size: 0.78rem; color: rgba(255,255,255,.78); margin-top: 3px; }
/* 오른쪽 아이콘 장식 */
.bd-hd-icon  {
  position: relative; z-index: 1;
  font-size: 2.8rem; opacity: .22;
  flex-shrink: 0; pointer-events: none;
}
/* 글쓰기 버튼 */
.bd-hd-btn {
  padding: 9px 20px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.36);
  color: #fff; border-radius: 10px;
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s; white-space: nowrap;
  position: relative; z-index: 1;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.bd-hd-btn:hover  { background: rgba(255,255,255,.34); color: #fff; }
.bd-hd-stats      { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.bd-hd-stat       { display: flex; align-items: baseline; gap: 4px; }
.bd-hd-stat-num   { font-size: 1.2rem; font-weight: 900; color: #fff; }
.bd-hd-stat-label { font-size: 0.7rem; color: rgba(255,255,255,.72); }
@media (max-width: 480px) {
  .bd-hd        { padding: 16px 18px; }
  .bd-hd-icon   { display: none; }
  .bd-hd-title  { font-size: 1.05rem; }
}

/* ── 공통 페이지 히어로 ── */
.page-hero {
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
}
/* 그라디언트 variant (테마별 등) */
.page-hero--gradient {
  background: var(--primary);
}
/* 카드 variant (인기순위, 신규 등) */
.page-hero--card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
/* 아이콘 */
.page-hero-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  position: relative; z-index: 1;
  background: rgba(255,255,255,.18);
}
.page-hero--card .page-hero-icon {
  background: var(--primary-light);
  border: 1.5px solid rgba(13,148,136,.18);
}
/* 텍스트 */
.page-hero-info { flex: 1; position: relative; z-index: 1; min-width: 0; }
.page-hero-title {
  font-size: 1.2rem; font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.page-hero--card .page-hero-title {
  color: var(--text-primary);
  font-size: 1.05rem;
}
.page-hero-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,.78);
}
.page-hero--card .page-hero-sub { color: var(--text-muted); }
/* 우측 뱃지/버튼 */
.page-hero-badge {
  margin-left: auto;
  flex-shrink: 0;
  position: relative; z-index: 1;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.72rem; font-weight: 700;
  padding: 5px 13px; border-radius: 999px;
  white-space: nowrap;
}
.page-hero--card .page-hero-badge {
  background: #0D9488;
  color: #fff;
  backdrop-filter: none;
}
@media (max-width: 600px) {
  .page-hero { padding: 16px 18px; }
  .page-hero-title { font-size: 1.05rem; }
  .page-hero--card .page-hero-title { font-size: 0.95rem; }
  .page-hero-icon { width: 42px; height: 42px; font-size: 1.25rem; }
}

/* ── 공통 필터/탭 네비 ── */
.page-filter-nav {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
}
.page-filter-tab {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--border);
  background: var(--bg-card2);
  color: var(--text-secondary);
  transition: all .18s;
  white-space: nowrap;
  cursor: pointer;
}
.page-filter-tab:hover,
.page-filter-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(13,148,136,.25);
}
.page-filter-tab .cnt {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.68rem;
}
.page-filter-tab:not(.active) .cnt {
  background: rgba(13,148,136,.1);
  color: var(--primary);
}
/* ── 공통 정렬 바 ── */
.page-sort-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  gap: 8px; flex-wrap: wrap;
}
.page-sort-label { font-size: 0.78rem; color: var(--text-muted); }
.page-sort-label strong { color: var(--primary); }
.page-sort-btns { display: flex; gap: 4px; }
.page-sort-btn {
  padding: 4px 11px;
  font-size: 0.74rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card2);
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: all .13s;
}
.page-sort-btn:hover,
.page-sort-btn.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ═══════════════════════════════════════════════════
   공통 페이지 콘텐츠 섹션 박스 (.pg-section)
   rank, new-list, search 등 공통 사용
   ═══════════════════════════════════════════════════ */
.pg-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
}
.pg-section-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  font-size: 0.84rem; font-weight: 800;
  letter-spacing: -.01em;
}
.pg-section-hd svg { flex-shrink: 0; opacity: .9; }
.pg-section-hd-right {
  margin-left: auto;
  font-size: 0.72rem; font-weight: 500;
  opacity: .88; white-space: nowrap;
}
.pg-section-body { padding: 12px 14px; }
/* 4열 카드 그리드 — section 내부용 */
.pg-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
}
@media (max-width: 1199px) { .pg-section-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .pg-section-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .pg-section-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 8px; } }
/* section 내부 정렬 바 */
.pg-section-sort {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; gap: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card2);
  flex-wrap: wrap;
}
.pg-section-sort-label { font-size: 0.78rem; color: var(--text-muted); }
.pg-section-sort-label strong { color: var(--primary); font-weight: 700; }
.pg-section-sort-btns { display: flex; gap: 3px; }
.pg-section-sort-btn {
  padding: 4px 10px; border-radius: 5px;
  font-size: 0.73rem; font-weight: 600;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  text-decoration: none; cursor: pointer;
  transition: all .13s; font-family: var(--font);
}
.pg-section-sort-btn:hover, .pg-section-sort-btn.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
/* 페이지네이션 공통 */
.pg-pagination {
  display: flex; gap: 3px; justify-content: center;
  flex-wrap: wrap; margin-top: 18px;
}
.pg-pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  text-decoration: none; transition: all .13s;
}
.pg-pg-btn:hover, .pg-pg-btn.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.pg-pg-btn.active { font-weight: 800; }

/* ══════════════════════════════════════════════════════════════
   계절별 테마 — CSS 변수 오버라이드
   ══════════════════════════════════════════════════════════════ */
/* 봄 — 체리블라썸 핑크 × 민트그린 */
[data-season="spring"] {
  --aurora-1: #f472b6;
  --aurora-2: #fb7185;
  --aurora-3: #4ade80;
  --aurora-4: #86efac;
}
[data-season="spring"] .h26-badge-dot { background: #f472b6; }
[data-season="spring"] .h26-stat-num span { color: #f9a8d4; }
/* 봄 파티클 */
[data-season="spring"] .h26-hero::before {
  content: '🌸'; font-size: 1rem; pointer-events: none;
  position: absolute; top: 15%; left: 8%; opacity: .25; animation: floatPetal 6s ease-in-out infinite;
}
@keyframes floatPetal {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-18px) rotate(12deg); }
  66%      { transform: translateY(8px) rotate(-8deg); }
}

/* 여름 — 오션 블루 × 선셋 오렌지 */
[data-season="summer"] {
  --aurora-1: #38bdf8;
  --aurora-2: #0ea5e9;
  --aurora-3: #fb923c;
  --aurora-4: #fbbf24;
}
[data-season="summer"] .h26-badge-dot { background: #fbbf24; }
[data-season="summer"] .h26-stat-num span { color: #7dd3fc; }

/* 가을 — 앰버 × 크림슨 */
[data-season="autumn"] {
  --aurora-1: #f59e0b;
  --aurora-2: #d97706;
  --aurora-3: #dc2626;
  --aurora-4: #f97316;
}
[data-season="autumn"] .h26-badge-dot { background: #f59e0b; }
[data-season="autumn"] .h26-stat-num span { color: #fcd34d; }
/* 가을 단풍 파티클 */
[data-season="autumn"] .h26-hero::before {
  content: '🍂'; font-size: .9rem; pointer-events: none;
  position: absolute; top: 12%; right: 10%; opacity: .22; animation: floatLeaf 7s ease-in-out infinite;
}
@keyframes floatLeaf {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(20px) rotate(25deg); }
}

/* 겨울 — 아이스 블루 × 인디고 퍼플 */
[data-season="winter"] {
  --aurora-1: #93c5fd;
  --aurora-2: #60a5fa;
  --aurora-3: #818cf8;
  --aurora-4: #a5b4fc;
}
[data-season="winter"] .h26-badge-dot { background: #93c5fd; }
[data-season="winter"] .h26-stat-num span { color: #bfdbfe; }
/* 겨울 눈 파티클 */
[data-season="winter"] .h26-hero::before {
  content: '❄️'; font-size: 1rem; pointer-events: none;
  position: absolute; top: 10%; left: 15%; opacity: .2; animation: floatSnow 8s ease-in-out infinite;
}
@keyframes floatSnow {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-14px) rotate(180deg) scale(1.1); }
}

/* ══════════════════════════════════════════════════════════════
   히어로 배경 — 이미지 / 영상 모드
   ══════════════════════════════════════════════════════════════ */
.h26-hero--image,
.h26-hero--video,
.h26-hero--youtube {
  background: #060c14 !important;
}
.h26-hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
  transition: transform .8s ease;
}
.h26-hero--image:hover .h26-hero-bg-img { transform: scale(1.03); }
.h26-hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
}
/* YouTube iframe — letterbox-free full cover via scale trick */
.h26-hero-bg-youtube {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh; /* 16/9 × 100vh */
  height: 56.25vw; /* 9/16 × 100vw */
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none; border: 0;
}
.h26-hero-bg-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0,0,0,.6);
}
/* grain + orbs sit above overlay */
.h26-hero--image .h26-hero-grain,
.h26-hero--video .h26-hero-grain,
.h26-hero--youtube .h26-hero-grain { z-index: 2; }
.h26-hero--image .h26-orb,
.h26-hero--video .h26-orb,
.h26-hero--youtube .h26-orb { z-index: 2; opacity: .2; }
.h26-hero--image .h26-hero-inner,
.h26-hero--video .h26-hero-inner,
.h26-hero--youtube .h26-hero-inner { z-index: 3; }

/* ══════════════════════════════════════════════════════════════
   이벤트 팝업 모달
   ══════════════════════════════════════════════════════════════ */
.ev-popup-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: evFadeIn .28s ease forwards;
}
@keyframes evFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ev-popup-backdrop.ev-closing {
  animation: evFadeOut .22s ease forwards;
}
@keyframes evFadeOut { from { opacity: 1; } to { opacity: 0; } }

.ev-popup {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 22px;
  overflow: hidden;
  width: 100%; max-width: 420px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
  animation: evSlideUp .32s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes evSlideUp {
  from { transform: translateY(40px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}
.ev-popup-img {
  width: 100%; max-height: 200px; object-fit: cover; display: block;
}
.ev-popup-body { padding: 22px 22px 18px; }
.ev-popup-title {
  font-size: 1.1rem; font-weight: 900; color: var(--text-primary, #0f172a);
  margin-bottom: 10px; letter-spacing: -.025em; line-height: 1.35;
}
.ev-popup-content {
  font-size: .875rem; color: var(--text-secondary, #475569);
  line-height: 1.7; margin-bottom: 18px; white-space: pre-line;
}
.ev-popup-cta {
  display: block; width: 100%; padding: 13px;
  background: #0D9488;
  color: #fff; border: none; border-radius: 12px;
  font-size: .9rem; font-weight: 800; font-family: var(--font, sans-serif);
  cursor: pointer; text-decoration: none; text-align: center;
  box-shadow: 0 5px 18px rgba(13,148,136,.38);
  transition: opacity .15s, transform .15s;
}
.ev-popup-cta:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
.ev-popup-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 22px 16px; border-top: 1px solid var(--border, #e2e8f0);
  margin-top: 12px;
}
.ev-popup-no-today {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--text-muted, #94a3b8); cursor: pointer;
  user-select: none;
}
.ev-popup-no-today input { accent-color: var(--primary, #0D9488); cursor: pointer; }
.ev-popup-close-btn {
  background: none; border: none; cursor: pointer;
  font-size: .8rem; color: var(--text-muted, #94a3b8);
  font-family: var(--font, sans-serif);
  transition: color .15s;
}
.ev-popup-close-btn:hover { color: var(--text-primary, #0f172a); }
/* 상단 X 버튼 */
.ev-popup-x {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .85rem; line-height: 1;
  transition: background .15s;
}
.ev-popup-x:hover { background: rgba(0,0,0,.7); }