/* ══════════════════════════════════════════════
   CSS Variables — Light / Dark
══════════════════════════════════════════════ */
:root {
  --primary: #667eea;
  --primary-d: #5a67d8;
  --secondary: #764ba2;
  --accent: #f093fb;
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;

  --bg:       #f8fafc;
  --bg2:      #f1f5f9;
  --card-bg:  #ffffff;
  --nav-bg:   rgba(255, 255, 255, 0.88);
  --nav-tier1-bg: rgba(241, 245, 249, 0.95);  /* 1단: 현재보다 10% 어두운 톤 */
  --text:     #1e293b;
  --text-muted: #64748b;
  --border:   #e2e8f0;
  --shadow:   0 4px 24px rgba(0, 0, 0, 0.07);
  --shadow-lg:0 12px 40px rgba(0, 0, 0, 0.12);
  --radius:   16px;
  --nav-h:    64px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg:       #0f172a;
  --bg2:      #1e293b;
  --card-bg:  #1e293b;
  --nav-bg:   rgba(15, 23, 42, 0.92);
  --nav-tier1-bg: rgba(15, 23, 42, 0.98);  /* 1단: 10% 어두운 톤 */
  --text:     #e2e8f0;
  --text-muted: #94a3b8;
  --border:   #334155;
  --shadow:   0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:0 12px 48px rgba(0, 0, 0, 0.45);
}

/* ══ Reset ══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  padding-top: 0;
  transition: background var(--transition), color var(--transition);
}
/* 본문 가독성: 한국어 친화적 폰트 크기·간격 */
.section p, .usage-page p, .board-body p { font-size: clamp(.9375rem, 1vw + .8rem, 1rem); line-height: 1.7; }
.section h2, .usage-page h2 { font-size: 1.15rem; letter-spacing: -0.02em; }
.section h3 { font-size: 1.05rem; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ══ Utility ══ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section { padding: 5rem 0; }
/* 카테고리별 섹션: 가독성을 위한 여백 강화 */
.section-category { padding: 5.5rem 0; }
.section-category + .section-category { margin-top: 0; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: .6rem;
}
.section-sub { color: var(--text-muted); font-size: 1rem; }

/* ══ Badge ══ */
.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.badge-primary { background: rgba(102,126,234,.15); color: var(--primary); }
.badge-purple  { background: rgba(118,75,162,.15);  color: var(--secondary); }
.badge-success { background: rgba(16,185,129,.15);  color: var(--success); }
.badge-soon    { background: rgba(100,116,139,.12); color: var(--text-muted); }
.badge-new    { background: rgba(239,68,68,.18); color: #dc2626; font-weight: 700; }
/* 주황색 '준비 중' 배지 — 네비·카드·요금표 등 준비 중 기능 표시 */
.badge-ready {
  background: rgba(249,115,22,.16);
  color: #ea580c;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: .4rem;
}

/* ══ Buttons ══ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.5rem;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 4px 16px rgba(102,126,234,.35);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(102,126,234,.5); }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-ghost {
  background: var(--bg2);
  color: var(--text);
}
.btn-ghost:hover { background: var(--border); }
.btn-disabled {
  background: var(--bg3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: default;
  box-shadow: none;
}
.btn-disabled:hover { box-shadow: none; background: var(--bg3); color: var(--text-muted); }

/* ══ Card ══ */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition);
}

/* ══════════════════════════════════════════════
   Navigation
══════════════════════════════════════════════ */
/* 상단 헤더: 스크롤 시에도 고정(sticky) 표시 */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--nav-h);
  border-bottom: 1px solid transparent;
  z-index: 900;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* ── 3단 네비게이션 (1단 유틸 36px / 2단 관리자·토큰 40px / 3단 메인 52px) ── */
.navbar-three-tier {
  display: flex;
  flex-direction: column;
  min-height: unset;
}
.navbar-three-tier::before {
  display: none;
}
.nav-tier1 {
  height: 36px;
  background: var(--nav-tier1-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-tier1-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-tier1 .nav-logo { font-size: 1rem; }
.nav-tier1 .theme-toggle {
  width: 28px; height: 28px;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, background .2s;
}
.nav-tier1 .theme-toggle:hover { color: var(--text); background: var(--bg2); }
.nav-tier1-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-tier1-greeting {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}
.nav-tier1-actions .nav-link-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.nav-tier2 {
  height: 40px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.navbar-three-tier .navbar::before { display: none; }
.nav-tier2-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-tier2-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-tier2 .nav-admin-icon {
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav-tier2 .nav-admin-icon:hover { color: var(--primary); background: var(--bg2); }
.nav-tier2 .nav-admin-icon svg { width: 14px; height: 14px; display: block; }
/* 테스트 버튼: 배경=네비 배경, 글자색=배경과 동일해 기본 숨김, 호버 시에만 희미하게 표시 */
.nav-test-btn {
  font-size: 0.75rem;
  color: var(--nav-bg);
  background: var(--nav-bg);
  border: 1px solid transparent;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: color .2s, background .2s, border-color .2s;
}
.nav-test-btn:hover {
  color: var(--text-muted);
  background: var(--bg2);
  border-color: var(--border);
}
.nav-tier2-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-tier2-user {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8rem;
}
.nav-tier2 .nav-token-badge { font-size: 0.78rem; padding: 2px 8px; }
/* 2단 PC: 마이페이지(텍스트) / 비로그인 시 이용안내|채널 */
.nav-tier2-mypage {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav-tier2-mypage:hover { color: var(--primary); background: var(--bg2); }
.nav-tier2-mypage-icon { display: none; }
.nav-tier2-util {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  transition: color .2s;
}
.nav-tier2-util:hover { color: var(--primary); }
.nav-tier2-sep {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
  margin: 0 0.15rem;
}

.nav-tier3 {
  height: 52px;
  background: var(--nav-bg);
  flex-shrink: 0;
  position: relative;
}
.nav-tier3-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-three-tier .nav-menu {
  margin-left: 0;
  order: unset;
}
.navbar-three-tier .nav-link { padding: 0.5rem 0.85rem; font-size: 0.9rem; }
.navbar-three-tier .nav-dropdown .dropdown-btn { min-height: 44px; padding: 0.5rem 1rem; }
/* 햄버거 버튼: 모바일에서만 표시 */
.nav-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav-hamburger:hover { color: var(--text); background: var(--bg2); }
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* backdrop-filter를 ::before로 분리 —
   backdrop-filter가 navbar에 직접 있으면 position:fixed 자식의
   containing block이 viewport가 아닌 navbar(64px)로 바뀌어
   모바일 슬라이드 패널이 64px에 갇히는 버그 발생 */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background var(--transition);
  pointer-events: none;
  z-index: -1;
}
.navbar.scrolled {
  border-color: var(--border);
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 모바일 2단용: 1행 래퍼 — 데스크톱에서는 contents로 해제하여 [로고][메뉴][액션] 1행 유지 */
.nav-mobile-row1 {
  display: contents;
}
/* 모바일 전용 2행(9종 메뉴): 데스크톱에서 숨김 */
.nav-mobile-row2 {
  display: none;
}
.nav-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
  vertical-align: middle;
}
.nav-user-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6rem;
}

/* Logo */
.nav-logo {
  font-size: 1.15rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 관리자/테스트 로그인: 아주 작게 표시 (PC·모바일 공통) */
.nav-admin-icon,
.nav-test-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  margin-left: .2rem;
  padding: .2rem;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color .2s, background .2s;
  font-size: 0;
}
.nav-admin-icon:hover { color: var(--primary); background: var(--bg2); }
.nav-admin-icon svg,
.nav-test-login-icon svg { display: block; width: 14px; height: 14px; }
/* Zap(테스트 로그인) 아이콘: 클릭 영역 확대 (터치·클릭 편의) */
.nav-test-login-icon {
  min-width: 34px;
  min-height: 34px;
  padding: 6px;
}
.nav-test-login-icon:hover { color: var(--secondary); background: var(--bg2); }
.logo-accent {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav links — 데스크톱 표준 레이아웃: [로고] [메뉴] [사용자 정보] (order로 순서 보장) */
.nav-logo { order: 1; flex-shrink: 0; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  order: 2;
}
.nav-actions { order: 3; flex-shrink: 0; }
.nav-mobile-row2 { order: 4; }
.nav-link {
  padding: .45rem .75rem;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.nav-link:hover,
.nav-link.active { color: var(--text); background: var(--bg2); }
.nav-link.active { color: var(--primary); }

/* Dropdown: 모바일 터치 영역 확보 */
.nav-dropdown { position: relative; }
.nav-dropdown .dropdown-btn {
  min-height: 44px;
  padding: .6rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.dropdown-arrow {
  display: inline-block;
  font-size: .65rem;
  transition: transform var(--transition);
}
.nav-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

/* 드롭다운: 3단 네비 바로 아래에만 표시, position:fixed 미사용(스크롤 시 따라다니지 않음) */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index: 100;
}
/* 항목 10개 초과 시 내부 스크롤 + 커스텀 스크롤바 */
.dropdown-content::-webkit-scrollbar { width: 6px; }
.dropdown-content::-webkit-scrollbar-track { background: var(--bg2); border-radius: 3px; }
.dropdown-content::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; opacity: 0.5; }
.dropdown-content::-webkit-scrollbar-thumb:hover { background: var(--text); }
.nav-dropdown:hover .dropdown-content,
.nav-dropdown.open  .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border-radius: 8px;
  color: var(--text);
  transition: background var(--transition);
}
.dropdown-item:hover { background: var(--bg2); }
.dropdown-item.coming-soon { opacity: .55; cursor: default; pointer-events: none; }
.di-icon { font-size: 1.3rem; flex-shrink: 0; }
.dropdown-item strong { display: block; font-size: .87rem; font-weight: 700; }
.dropdown-item small  { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 1px; }

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nav-token-badge {
  font-size: .8rem; font-weight: 600; color: var(--primary);
  padding: 4px 10px; border-radius: 20px; background: var(--bg2);
  white-space: nowrap;
}
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background var(--transition), transform var(--transition);
}
.theme-toggle:hover { background: var(--border); transform: rotate(20deg); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform .3s ease, opacity .3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav overlay (mobile) */
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 850;
  backdrop-filter: blur(2px);
}
.nav-overlay.show { display: block; }

/* 데스크톱(768px 이상): 1단 가로 메뉴 유지, 모바일 2행·패널 숨김 */
@media (min-width: 769px) {
  .navbar { height: var(--nav-h); }
  .nav-container { height: 100%; }
  .nav-mobile-row2 { display: none !important; }
  .navbar-three-tier .nav-mobile-row2 { display: none !important; }
  .navbar-three-tier .nav-mobile-panel { display: none !important; }
  .navbar-three-tier .nav-tier3 .nav-menu { display: flex !important; }
  .navbar-three-tier .nav-hamburger { display: none !important; }
}

/* ══════════════════════════════════════════════
   Hero Section
══════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 1.25rem 5rem;
  text-align: center;
  background: var(--bg);
}
.hero::before, .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
}
.hero::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(102,126,234,.6), transparent 70%);
  top: -200px; left: -100px;
}
.hero::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(240,147,251,.5), transparent 70%);
  bottom: -150px; right: -100px;
}
[data-theme="dark"] .hero::before { opacity: .25; }
[data-theme="dark"] .hero::after  { opacity: .2; }

.hero-badge {
  display: inline-block;
  background: rgba(102,126,234,.12);
  color: var(--primary);
  border: 1px solid rgba(102,126,234,.25);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: .5px;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -1px;
}
.hero p {
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.75;
}
.hero-btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.hero-btns .btn { padding: .85rem 1.8rem; font-size: .95rem; }

/* Floating feature badges */
.hero-features {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.feature-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 40px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  animation: floatPill 3s ease-in-out infinite;
}
.feature-pill:nth-child(2) { animation-delay: .8s; }
.feature-pill:nth-child(3) { animation-delay: 1.6s; }
.feature-pill .pill-icon { font-size: 1.1rem; }
@keyframes floatPill {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* ══ Hero Main (유튜브 + 신규 10토큰) ══ */
.hero-main { padding: 4rem 0 5rem; text-align: left; }
.hero-main-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.hero-main-left { position: relative; z-index: 1; }
.hero-main-desc { font-size: clamp(.95rem, 2vw, 1.1rem); color: var(--text-muted); margin-bottom: 1.75rem; max-width: 420px; line-height: 1.7; }
.hero-main-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
}
.hero-cta-primary { min-height: 48px; padding: .85rem 1.75rem; font-size: 1rem; }
.hero-cta-register {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .85rem 1.5rem;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  background: rgba(16,185,129,.12);
  color: var(--success);
  border: 1px solid rgba(16,185,129,.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.hero-cta-register:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(16,185,129,.25); }
.hero-cta-register strong { color: #059669; }
.hero-main-right { position: relative; z-index: 1; }
.hero-promo-card { padding: .75rem; overflow: hidden; }
.yt-embed-hero { border-radius: 12px; }
.hero-promo-caption { margin-top: .6rem; font-size: .8rem; color: var(--text-muted); text-align: center; }
.hero-promo-caption-block { margin-top: .6rem; text-align: center; }
.hero-promo-caption-title { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0 0 .5rem; }
.hero-promo-caption-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .75rem;
}
.hero-yt-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  transition: color .2s, background .2s;
}
.hero-yt-link:hover { color: var(--primary); background: rgba(102,126,234,.12); }
.hero-yt-icon { display: inline-flex; line-height: 0; }
.hero-yt-btn {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .55rem;
  border-radius: 6px;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.hero-yt-like { color: var(--text-muted); background: var(--bg2); border: 1px solid var(--border); }
.hero-yt-like:hover { color: var(--text); background: var(--bg3); }
.hero-yt-subscribe { color: #fff; background: #c00; border: 1px solid #c00; }
.hero-yt-subscribe:hover { background: #a00; border-color: #a00; color: #fff; }

/* ══ Main Banner (3종 초대형 카드) ══ */
.main-banner-section { padding: 4rem 0 5rem; }
.main-banner-title { text-align: center; margin-bottom: 2.5rem; }
.main-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}
.main-banner-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.main-banner-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.main-banner-visual {
  aspect-ratio: 4 / 3;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  transition: transform 0.35s ease;
}
.main-banner-card:hover .main-banner-visual,
a.main-banner-card:hover .main-banner-visual {
  transform: scale(1.05);
}
.main-banner-card { overflow: hidden; }
.main-banner-visual-portrait { background: linear-gradient(135deg, rgba(102,126,234,.08), rgba(118,75,162,.08)); }
.main-banner-visual-drawing { background: linear-gradient(135deg, rgba(240,147,251,.08), rgba(102,126,234,.08)); }
.main-banner-visual-animate { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(102,126,234,.08)); }
.main-banner-before, .main-banner-after { padding: .35rem .75rem; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--border); }
.main-banner-arrow { color: var(--primary); font-weight: 900; }
.main-banner-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.main-banner-token {
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .03em;
}
.main-banner-body h3 { font-size: 1.2rem; font-weight: 800; }
.main-banner-body p { font-size: .85rem; color: var(--text-muted); margin: 0; }
.main-banner-body .btn { margin-top: .5rem; min-height: 44px; align-self: flex-start; }
.main-banner-card-locked .main-banner-visual { opacity: .85; }
.main-banner-card-locked { filter: grayscale(.6); opacity: .9; }
.main-banner-card-locked.coming-soon-card {
  cursor: pointer;
  position: relative;
}
.main-banner-card-locked .main-banner-visual {
  filter: grayscale(.7);
  transition: filter .25s ease;
}
.main-banner-coming-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: linear-gradient(to bottom, rgba(15,23,42,.4), rgba(15,23,42,.85));
  color: #f9fafb;
  text-align: center;
  padding: 1.4rem;
  pointer-events: none;
}
.main-banner-coming-overlay .overlay-badge { pointer-events: auto; }

/* 오늘의 인기 AI (히어로 하단 랜덤 카드) */
.hero-today-pick { padding: 1.5rem 0 2rem; }
.today-pick-label { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .75rem; text-align: center; }
.today-pick-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.today-pick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.today-pick-visual {
  width: 120px;
  height: 90px;
  flex-shrink: 0;
  background: var(--bg2);
  border-radius: 12px;
  transition: transform 0.35s ease;
}
.today-pick-card:hover .today-pick-visual { transform: scale(1.06); }
.today-pick-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.today-pick-token { font-size: .75rem; font-weight: 700; color: var(--primary); }
.today-pick-body h3 { font-size: 1.1rem; font-weight: 800; margin: 0; }

/* ══ Home Tabs (3대 카테고리) ══ */
.home-tabs-section { padding: 4rem 0 5rem; }
.home-tabs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.home-tabs-header .section-title { margin-bottom: 0; }
.home-tabs {
  display: flex;
  gap: .35rem;
  background: var(--bg);
  padding: .35rem;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.home-tab {
  min-height: 44px;
  min-width: 44px;
  padding: .65rem 1.4rem;
  border: none;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.home-tab:hover { background: var(--border); color: var(--text); }
.home-tab.active {
  background: var(--card-bg);
  color: var(--primary);
  box-shadow: var(--shadow);
}
.home-tab-panel { display: none; }
.home-tab-panel.active { display: block; }

/* ══ Stats bar ══ */
.stats-bar {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 1.25rem;
}
.stats-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-num {
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.stat-label { font-size: .8rem; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

/* ══════════════════════════════════════════════
   Promo Video (Home)
══════════════════════════════════════════════ */
.promo-video {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3.25rem 0;
}
.promo-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: center;
}
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(16,185,129,.12);
  color: var(--success);
  border: 1px solid rgba(16,185,129,.22);
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: .9rem;
}
.promo-title {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -.5px;
  margin-bottom: .6rem;
}
.promo-sub {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.promo-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.promo-player {
  padding: 1rem;
}
.yt-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  position: relative;
}
.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.promo-player-caption {
  margin-top: .75rem;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.promo-player-caption strong { color: var(--text); font-weight: 800; }
.promo-player-caption span { color: var(--primary); font-weight: 700; }

/* ══════════════════════════════════════════════
   Social Hub Cards (Home/Channel)
══════════════════════════════════════════════ */
.social-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.social-card {
  --social-accent: var(--primary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.6rem 1.6rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.social-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--social-accent), rgba(240,147,251,.85));
}
.social-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklab, var(--social-accent) 35%, var(--border));
}
.social-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--social-accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--social-accent) 28%, var(--border));
  font-size: 1.2rem;
  flex-shrink: 0;
}
.social-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--social-accent);
  background: color-mix(in oklab, var(--social-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--social-accent) 22%, var(--border));
  margin-left: auto;
  white-space: nowrap;
}
.social-card h3 {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.2px;
}
.social-card p {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}
.social-card .btn { margin-top: auto; align-self: flex-start; }

.social-blog { --social-accent: var(--primary); }
.social-fb   { --social-accent: #1877f2; }
.social-x    { --social-accent: #111827; }
[data-theme="dark"] .social-x { --social-accent: #e2e8f0; }

/* ══════════════════════════════════════════════
   Restore Formula (Usage)
══════════════════════════════════════════════ */
.restore-formula {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2rem 2rem 1.6rem;
  margin-bottom: 2.25rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.restore-formula::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(102,126,234,.12), transparent 55%),
              radial-gradient(circle at 80% 0%, rgba(240,147,251,.10), transparent 55%);
  pointer-events: none;
}
.restore-formula-head {
  position: relative;
  z-index: 1;
}
.restore-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(118,75,162,.12);
  color: var(--secondary);
  border: 1px solid rgba(118,75,162,.22);
  font-size: .78rem;
  font-weight: 900;
  margin-bottom: .85rem;
}
.restore-formula h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -.6px;
  margin-bottom: .55rem;
}
.restore-formula p {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.75;
}
.restore-steps {
  margin-top: 1.35rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.restore-step {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
[data-theme="dark"] .restore-step { background: rgba(15,23,42,.20); }
.restore-step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(102,126,234,.10), transparent 55%);
  opacity: .55;
  pointer-events: none;
}
.restore-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(102,126,234,.35);
}
.restore-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  position: relative;
  z-index: 1;
}
.restore-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.restore-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: 1.15rem;
  position: relative;
  z-index: 1;
}
.restore-step h3 {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.2px;
  position: relative;
  z-index: 1;
}
.restore-step p {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
  position: relative;
  z-index: 1;
}
.restore-step .btn {
  position: relative;
  z-index: 1;
  align-self: flex-start;
}
.restore-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(102,126,234,.25);
}

.restore-chain {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.restore-chain-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 900;
  color: var(--text);
  background: rgba(102,126,234,.10);
  border: 1px solid rgba(102,126,234,.22);
  padding: .25rem .55rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}
.restore-chain-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.restore-chain-arrow {
  color: var(--text-muted);
  font-weight: 900;
}

/* ══════════════════════════════════════════════
   App Cards Grid
══════════════════════════════════════════════ */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.app-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}
.app-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.app-card-icon { font-size: 2.5rem; }
/* 앱 썸네일: static/app_thumbnails/app_img_NN.webp */
.app-card-thumb {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-card-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.app-card:hover .app-card-thumb-img {
  transform: scale(1.08);
}
.app-card-thumb-icon {
  display: none;
  font-size: 2.5rem;
}
.app-card-thumb[data-fallback="1"] .app-card-thumb-img { display: none; }
.app-card-thumb[data-fallback="1"] .app-card-thumb-icon { display: flex; }
.app-card-meta { display: flex; align-items: center; gap: .5rem; }
.app-card h3 { font-size: 1.1rem; font-weight: 800; }
.app-card p  { font-size: .85rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.app-card .btn { margin-top: auto; align-self: flex-start; }
/* 카드 우측 상단 토큰 소모량 배지 */
.app-card-token-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .35rem .75rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(102,126,234,.12);
  color: var(--primary);
  z-index: 1;
}
.app-card-locked .app-card-token-badge { opacity: .85; }

/* Coming soon card (클릭 시 사전 예약 모달) */
.app-card.soon {
  opacity: .92;
  cursor: pointer;
}
.app-card.soon:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* 단계적 오픈: 잠금 카드 상태 */
.app-card-locked {
  position: relative;
  filter: grayscale(.85);
  opacity: .9;
  cursor: pointer;
}
.app-card-locked:hover {
  transform: none;
  box-shadow: var(--shadow);
}
.app-card-locked.coming-soon-card .app-card-thumb {
  filter: grayscale(.9);
  transition: filter .25s ease;
}
.app-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: linear-gradient(to bottom, rgba(15,23,42,.45), rgba(15,23,42,.9));
  color: #f9fafb;
  text-align: center;
  padding: 1.4rem;
}
.overlay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem 1rem;
  border-radius: 999px;
  background: rgba(249,115,22,.98);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.overlay-text {
  font-size: .82rem;
  color: rgba(241,245,249,.9);
}

/* ══════════════════════════════════════════════
   Coming Soon Pre-order Modal
══════════════════════════════════════════════ */
.preorder-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 950;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.preorder-modal-backdrop.show {
  display: flex;
}
.preorder-modal {
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  padding: 1.8rem 1.75rem 1.6rem;
  position: relative;
}
.preorder-modal-header {
  margin-bottom: 1.25rem;
}
.preorder-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .8rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(249,115,22,.18);
  color: #ea580c;
  margin-bottom: .6rem;
}
.preorder-modal-header h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: .4rem;
}
.preorder-modal-sub {
  font-size: .87rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.preorder-modal-close {
  position: absolute;
  top: .9rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.preorder-modal-close:hover {
  background: var(--bg2);
  color: var(--text);
  transform: rotate(8deg);
}
.preorder-modal-body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.preorder-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.preorder-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: .7rem .9rem;
  font-size: .9rem;
  background: var(--bg2);
  color: var(--text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.preorder-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(102,126,234,.25);
  background: var(--card-bg);
}
.preorder-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: .35rem;
}
.preorder-message {
  min-height: 1.2em;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .25rem;
}
.preorder-message.success {
  color: var(--success);
}
.preorder-message.error {
  color: var(--error);
}

/* ══════════════════════════════════════════════
   전역: 토큰 부족 모달
══════════════════════════════════════════════ */
.token-shortage-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 960;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.token-shortage-overlay.show {
  display: flex;
}
.token-shortage-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 2rem 1.75rem;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.token-shortage-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.token-shortage-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: .35rem;
}
.token-shortage-sub {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.token-shortage-actions {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 1rem;
}
.token-shortage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1.25rem;
  border-radius: 12px;
  font-size: .93rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: opacity .2s, transform .15s;
}
.token-shortage-charge {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
}
.token-shortage-mission {
  background: var(--bg2);
  color: var(--text);
  border: 2px solid var(--border);
}
.token-shortage-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
}
.token-shortage-close {
  min-height: 44px;
  padding: .55rem 1.25rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.token-shortage-close:hover {
  background: var(--bg2);
}

/* ══════════════════════════════════════════════
   전역: AI 작업 중 로딩 오버레이
══════════════════════════════════════════════ */
.ai-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 970;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.5rem;
}
.ai-loading-overlay.show {
  display: flex;
}
.ai-loading-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.ai-loading-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.25rem;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: aiLoadingSpin .9s linear infinite;
}
@keyframes aiLoadingSpin {
  to { transform: rotate(360deg); }
}
.ai-loading-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.ai-loading-progress-wrap {
  height: 6px;
  background: var(--bg2);
  border-radius: 999px;
  overflow: hidden;
}
.ai-loading-progress {
  height: 100%;
  width: 0;
  max-width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 999px;
  animation: aiLoadingProgress 10s linear forwards;
}
@keyframes aiLoadingProgress {
  0% { width: 0; }
  95% { width: 95%; }
  100% { width: 95%; }
}
.ai-loading-overlay.hide-anim .ai-loading-progress { animation: none; width: 100%; }

/* 기능 페이지 tokenShortHint 내 미션 이동 버튼 */
.btn-mission-go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
}
.btn-mission-go:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════
   토큰 소모 안내 팝업 (기능 페이지 공통)
══════════════════════════════════════════════ */
.token-info-box {
  background: linear-gradient(135deg, rgba(102,126,234,.08), rgba(118,75,162,.08));
  border: 1.5px solid rgba(102,126,234,.2);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.token-info-box .token-cost-text {
  font-size: .95rem;
  color: var(--text);
  line-height: 1.6;
}
.token-info-box .token-cost-text strong {
  color: var(--primary);
}
.popup-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.popup-btn-start {
  width: 100%;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.popup-btn-start:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(102,126,234,.4);
}
.popup-btn-start:disabled {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  cursor: not-allowed;
  opacity: .9;
}
.popup-btn-start.token-short {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}
.popup-btn-mission {
  width: 100%;
  padding: .9rem 1.25rem;
  background: var(--bg2);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.popup-btn-mission:hover {
  background: var(--border);
  border-color: var(--text-muted);
}
.popup-mission-panel {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.popup-mission-panel.show {
  display: block;
}
.popup-claim-row {
  margin-top: 1rem;
  text-align: center;
}
.popup-claim-btn {
  padding: .75rem 1.5rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.popup-claim-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,185,129,.4);
}
.popup-claim-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════
   Channel Page
══════════════════════════════════════════════ */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.channel-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.channel-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ch-color, var(--primary));
}
.channel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.channel-card-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ch-color, var(--primary));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}
.channel-card h3  { font-size: 1.1rem; font-weight: 800; margin-bottom: .4rem; }
.channel-card p   { font-size: .83rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55; }
.channel-card .btn{ width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════
   Usage / Board
══════════════════════════════════════════════ */
.board-wrap { display: flex; flex-direction: column; gap: .75rem; }
.board-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.board-item:hover { box-shadow: var(--shadow); }
.board-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  user-select: none;
}
.board-num {
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 24px;
}
.board-icon { font-size: 1.4rem; flex-shrink: 0; }
.board-title { font-weight: 700; font-size: .95rem; flex: 1; }
.board-arrow {
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.board-item.open .board-arrow { transform: rotate(180deg); }

.board-content {
  display: none;
  padding: 0 1.4rem 1.4rem;
  border-top: 1px solid var(--border);
}
.board-item.open .board-content { display: block; }

.guide-intro {
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.65;
  padding: 1rem 0 .75rem;
}
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-top: .5rem;
}
.guide-step {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.gs-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.gs-body h5 { font-size: .9rem; font-weight: 700; margin-bottom: .2rem; }
.gs-body p  { font-size: .83rem; color: var(--text-muted); line-height: 1.55; }

/* ══════════════════════════════════════════════
   Footer
══════════════════════════════════════════════ */
.footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 3rem 1.25rem 2rem;
  text-align: center;
  margin-top: auto;
}
.footer-logo {
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.25rem;
}
.footer-sns {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.sns-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform var(--transition), opacity var(--transition);
}
.sns-btn:hover { transform: translateY(-3px) scale(1.1); }
.sns-btn svg { width: 18px; height: 18px; fill: currentColor; }
.sns-yt   { background: #FF0000; }
.sns-blog { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.sns-fb   { background: #1877F2; }
.sns-x    { background: #000; }
[data-theme="dark"] .sns-x { background: #fff; color: #000; }
.footer-copy { font-size: .8rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   Page Hero (sub-pages)
══════════════════════════════════════════════ */
.page-hero {
  padding: 3.5rem 1.25rem 3rem;
  text-align: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(102,126,234,.12), transparent 70%);
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: .5rem; }
.page-hero p  { font-size: .95rem; color: var(--text-muted); }
.page-hero-token {
  display: inline-block;
  margin-top: .5rem;
  padding: .35rem .9rem;
  background: rgba(102,126,234,.12);
  color: var(--primary);
  font-size: .9rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(102,126,234,.25);
}

/* ══════════════════════════════════════════════
   Scroll Reveal
══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ══════════════════════════════════════════════
   Responsive — Tablet (≤ 900px)
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .stats-inner { gap: 2rem; }
  .promo-inner { grid-template-columns: 1fr; }
  .promo-player { order: -1; }
  .social-cards { grid-template-columns: 1fr; }
  .restore-steps { grid-template-columns: 1fr; }
  .restore-step:not(:last-child)::after { display: none; }
  .hero-main-inner { grid-template-columns: 1fr; }
  .main-banner-grid { grid-template-columns: repeat(2, 1fr); }
  .home-tabs-header { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════
   Responsive — Mobile (≤ 768px)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 모바일 전용 2단 구조: 1행 = 로고 + 유틸리티, 2행 = 9종 메뉴 가로 스크롤 */
  .nav-container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .nav-mobile-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    order: 1;
    min-height: var(--nav-h);
  }
  .nav-logo { order: unset; }
  .nav-actions {
    order: unset;
    margin-left: 0;
    gap: .5rem;
  }

  /* 데스크톱 메뉴(드롭다운): 모바일에서 숨김 */
  .nav-menu {
    display: none !important;
  }

  /* ── 3단 네비 모바일: 1단 1줄 압축 / 2단 테스트 숨김·조건부 / 3단 햄버거 패널 ── */
  .navbar-three-tier .nav-tier1 {
    height: 36px;
    min-height: 36px;
  }
  .navbar-three-tier .nav-tier1-inner {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0.5rem;
  }
  .navbar-three-tier .nav-tier1 .nav-logo {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navbar-three-tier .nav-tier1-greeting { display: none !important; }
  .navbar-three-tier .nav-tier1-actions {
    flex-shrink: 0;
    overflow: hidden;
  }
  .navbar-three-tier .nav-tier1-actions .nav-link-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
  }

  .navbar-three-tier .nav-test-btn { display: none !important; }
  .navbar-three-tier .nav-tier2-user { display: none !important; }
  .navbar-three-tier .nav-tier2-mypage-text { display: none !important; }
  .navbar-three-tier .nav-tier2-mypage-icon {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
  }
  .navbar-three-tier .nav-tier2-mypage {
    padding: 0.35rem;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
  }

  .navbar-three-tier .nav-tier3 .nav-menu { display: none !important; }
  .navbar-three-tier .nav-hamburger { display: flex; }

  /* 모바일 햄버거 버튼: 44x44px 터치 영역, 흰색 아이콘 + 진한 배경 원형, 열림/닫힘 애니메이션 */
  .navbar-three-tier .nav-hamburger {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: #1a1a2e;
    color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .navbar-three-tier .nav-hamburger:hover {
    background: #2a2a4e;
    color: #ffffff;
  }
  .navbar-three-tier .nav-hamburger span {
    background: currentColor;
  }
  .navbar-three-tier .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar-three-tier .nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .navbar-three-tier .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 모바일 햄버거 풀다운 패널: 진한 다크 배경 #1a1a2e, 가시성 개선, 위→아래 슬라이드 0.25s ease */
  .navbar-three-tier .nav-mobile-panel {
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transform-origin: top;
    transition: max-height 0.25s ease;
  }
  .navbar-three-tier.mobile-nav-open .nav-mobile-panel {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .navbar-three-tier .nav-mobile-panel .nav-mobile-panel-link,
  .navbar-three-tier .nav-mobile-panel .nav-mobile-link {
    min-height: 52px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0;
    transition: background .2s, color .2s;
  }
  .navbar-three-tier .nav-mobile-panel .nav-mobile-panel-link:hover,
  .navbar-three-tier .nav-mobile-panel .nav-mobile-link:hover {
    background: #2a2a4e;
    color: #e8e8ff;
  }
  .navbar-three-tier .nav-mobile-panel .mob-acc-icon {
    font-size: 1.1rem;
  }
  .nav-mobile-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.15);
    margin: 0.5rem 1rem;
  }
  .mob-acc {
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .mob-acc-head {
    width: 100%;
    min-height: 52px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .2s, color .2s;
  }
  .mob-acc-head:hover,
  .mob-acc-head:active { background: #2a2a4e; color: #e8e8ff; }
  .mob-acc-icon { font-size: 1.1rem; flex-shrink: 0; }
  .mob-acc-arrow {
    transition: transform 0.25s ease;
    font-size: 0.7rem;
    color: rgba(255,255,255,.8);
  }
  .mob-acc.open .mob-acc-arrow { transform: rotate(180deg); }
  .mob-acc-body {
    display: none;
    padding: 0 0 0.5rem 0;
    background: #12122a;
  }
  .mob-acc.open .mob-acc-body { display: block; }
  .mob-acc-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem 0 24px;
    min-height: 44px;
    font-size: 14px;
    color: #ccccff;
    text-decoration: none;
    transition: background .2s, color .2s;
    position: relative;
  }
  .mob-acc-link::before {
    content: '›';
    position: absolute;
    left: 12px;
    color: rgba(204,204,255,.6);
    font-size: 12px;
  }
  .mob-acc-link:hover {
    background: rgba(42,42,78,.6);
    color: #ffffff;
  }
  .mob-acc-link .mcp-icon { font-size: 0.95rem; }
  .mob-acc-link small { color: rgba(204,204,255,.8); font-weight: 500; margin-left: auto; }
  .mob-acc-footer { font-weight: 600; color: #a78bfa; }
  .mob-acc-footer::before { content: none; }

  /* [2행] 카테고리 가로 스크롤 (기존 1단 네비용) — overflow-y: visible 로 드롭다운이 아래로 펼쳐지도록 함 */
  .nav-container .nav-mobile-row2 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: 0 1rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
  .nav-mobile-row2::-webkit-scrollbar { display: none; }
  .nav-mobile-link {
    flex-shrink: 0;
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 10px;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  .nav-mobile-link:hover { color: var(--text); background: var(--bg2); }

  .nav-link { padding: .5rem .65rem; font-size: .9rem; }

  .hero { padding: 3.5rem 1rem 3rem; }
  .hero-main { padding: 3rem 1rem 4rem; }
  .hero-main-inner { text-align: center; gap: 2rem; }
  .hero-main-left .hero-badge { margin-left: auto; margin-right: auto; }
  .hero-main-desc { margin-left: auto; margin-right: auto; }
  .hero-main-cta { justify-content: center; }
  .hero-main-right { order: -1; }
  .hero-features { gap: .6rem; }
  .feature-pill { font-size: .78rem; padding: .5rem .9rem; }

  .main-banner-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .main-banner-section { padding: 3rem 0 4rem; }

  .home-tabs-header { flex-direction: column; align-items: stretch; }
  .home-tabs { justify-content: center; }

  .apps-grid    { grid-template-columns: 1fr; }
  .channel-grid { grid-template-columns: 1fr 1fr; }

  .stats-inner { gap: 1.5rem; }
  .stat-num    { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .channel-grid { grid-template-columns: 1fr; }
  .hero-btns .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════
   3대 카테고리 서비스 카드 (홈)
══════════════════════════════════════════════ */
.category-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.category-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.category-card-icon { font-size: 3rem; margin-bottom: 1rem; }
.category-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: .5rem; }
.category-card p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; flex: 1; }
@media (max-width: 768px) {
  .category-cards-grid { grid-template-columns: 1fr; }
}

/* 이용안내 드롭다운 하단 링크 */
.dropdown-footer {
  border-top: 1px solid var(--border);
  margin-top: .25rem;
  padding-top: .5rem;
  font-size: .85rem;
  color: var(--primary);
}

/* 네비 액션: 로그인/마이페이지 링크 */
.nav-link-btn {
  padding: .35rem .75rem;
  font-size: .9rem;
  border-radius: 8px;
}
.nav-link-btn:hover { background: var(--bg2); }

/* ══════════════════════════════════════════════
   인증 페이지 (로그인/가입/마이페이지) — 공통
   카드 중앙 정렬 max-width 480px, 넉넉한 여백, 52px 입력, 풀버튼
══════════════════════════════════════════════ */
.auth-section {
  padding: 2.5rem 1rem 5rem;
  min-height: 60vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.auth-wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.auth-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.auth-card .card-body {
  padding: 2rem 1.75rem;
}
@media (min-width: 480px) {
  .auth-card .card-body { padding: 2.5rem 2rem; }
}
.auth-card .form-label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  margin-bottom: .5rem;
  display: block;
}
.auth-card .form-control,
.auth-card .auth-input {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem 0 3rem;
  font-size: 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.auth-card .form-control:focus,
.auth-card .auth-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, .15);
}
.auth-card .form-control::placeholder,
.auth-card .auth-input::placeholder {
  color: var(--text-muted);
}
.auth-input-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}
.auth-input-wrap:last-of-type { margin-bottom: 1.5rem; }
.auth-input-wrap .auth-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-muted);
  pointer-events: none;
}
.auth-input-wrap .auth-toggle-pw {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  font-size: 1.1rem;
  transition: color .2s, background .2s;
}
.auth-input-wrap .auth-toggle-pw:hover { color: var(--primary); background: var(--bg2); }
.auth-input-wrap:has(.auth-toggle-pw) .form-control { padding-right: 3rem; }
.auth-card .btn {
  border-radius: 12px;
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  justify-content: center;
  margin-bottom: .75rem;
}
.auth-card .btn:last-child { margin-bottom: 0; }
.auth-msg {
  padding: .85rem 1rem;
  border-radius: 12px;
  font-size: .9rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.auth-msg.error {
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .25);
  color: var(--error);
}
.auth-msg.success {
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .25);
  color: var(--success);
}
.auth-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}
.auth-logo .auth-logo-title {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.auth-logo .auth-logo-sub {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: .35rem;
}
/* 이메일 로그인/가입 폼 요소 */
.auth-form-group {
  margin-bottom: 1rem;
}
.auth-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.auth-submit-btn {
  width: 100%;
  margin-top: .5rem;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
}
.auth-divider {
  text-align: center;
  margin: 1.25rem 0;
  font-size: .8rem;
  color: var(--text-muted);
}
.auth-footer-link {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--primary);
  transition: opacity .2s;
}
.auth-footer-link:hover { opacity: .85; color: var(--primary); }
.auth-guest-hint {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg2);
  border-radius: 12px;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.auth-sns-buttons { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.btn-sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 1.25rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  transition: border-color .2s, box-shadow .2s;
  text-decoration: none;
  color: var(--text);
}
.btn-sns:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(102,126,234,.15); color: var(--text); }
.btn-sns .btn-sns-icon { flex-shrink: 0; width: 20px; height: 20px; margin-right: 10px; }
/* Google 공식 가이드: G 로고 + 흰 배경 */
.btn-google { background: #fff; color: #3c4043; }
.btn-google:hover { color: #3c4043; }
.btn-sns-icon-google { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='20' height='20'%3E%3Cpath fill='%234285F4' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%2334A853' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.14 7.09-10.22 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%23EA4335' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Kakao 공식: 노란 배경 + 검정 텍스트 */
.btn-kakao { background: #FEE500; color: #191919; border-color: #FEE500; }
.btn-kakao:hover { border-color: #e6d000; color: #191919; }
.btn-sns-icon-kakao { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath fill='%23191919' d='M12 3c-5.8 0-10.5 3.66-10.5 8.18 0 3.09 2.08 5.8 5.2 7.34-.27.98-.98 3.64-1.13 4.22-.16.63.24.61.5.45.18-.12 2.82-1.9 3.96-2.66 1.66.24 3.39.37 5.17.37 5.8 0 10.5-3.66 10.5-8.18S17.8 3 12 3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-phone { background: var(--bg2); }
.auth-benefit-banner {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(102,126,234,.12), rgba(118,75,162,.12));
  border: 1px solid rgba(102,126,234,.25);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  font-size: .9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .65rem;
}
.auth-benefit-banner strong { color: var(--primary); }

/* 마이페이지 전용 */
.mypage-wrap { max-width: 480px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.mypage-profile-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.mypage-profile-avatar-wrap { margin-bottom: 1rem; }
.mypage-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.mypage-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.mypage-profile-row:last-child { border-bottom: none; }
.mypage-profile-row .label { color: var(--text-muted); font-weight: 500; }
.mypage-profile-row .value { font-weight: 600; color: var(--text); }
.mypage-token-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
  margin-bottom: 1.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(102,126,234,.06) 0%, transparent 100%);
}
.mypage-token-amount {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.mypage-token-unit { font-size: 1rem; font-weight: 600; color: var(--text-muted); margin-left: .25rem; }
.mypage-token-desc { font-size: .85rem; color: var(--text-muted); margin-top: .75rem; line-height: 1.5; }
.mypage-section-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.mypage-youtube-card .mypage-section-title { margin-bottom: .75rem; }
.mypage-youtube-links { display: flex; flex-direction: column; gap: .5rem; }
.mypage-youtube-link { display: inline-block; font-size: .9rem; font-weight: 600; color: var(--primary); text-decoration: none; padding: .5rem 0; border-radius: 8px; transition: background .2s, color .2s; }
.mypage-youtube-link:hover { color: var(--primary-d); background: var(--bg2); }
.mypage-mission-status { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.mypage-mission-list { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .9rem; color: var(--text); }
.mypage-mission-list li { padding: .35rem 0; }
.mypage-mission-list span { font-weight: 600; }
.mypage-mission-tip { font-size: .82rem; color: var(--text-muted); margin-top: .75rem; line-height: 1.5; padding: .5rem; background: var(--bg2); border-radius: 8px; }
.mypage-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.mypage-actions .btn { width: 100%; justify-content: center; min-height: 48px; font-size: .95rem; }
.mypage-logout { margin-top: 1rem; display: block; text-align: center; font-size: .9rem; font-weight: 600; color: var(--text-muted); padding: .75rem; border-radius: 10px; transition: background .2s, color .2s; }
.mypage-logout:hover { background: var(--bg2); color: var(--error); }
.mypage-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .75rem; }
.mypage-mission-btn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; box-shadow: 0 4px 16px rgba(102,126,234,.35); }
.mypage-mission-btn:hover { box-shadow: 0 6px 24px rgba(102,126,234,.45); color: #fff; }

/* ══ Coming Soon (emoticon / animate) ─═ */
.coming-soon-wrap { max-width: 520px; margin: 2rem auto 4rem; }
.coming-soon-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.coming-soon-card-standalone { filter: none; }
.coming-soon-form .auth-input-wrap { max-width: 320px; margin-left: auto; margin-right: auto; }
.coming-soon-msg.success { color: var(--success); font-weight: 600; }
.coming-soon-msg.error { color: var(--error); }
.coming-soon-icon { font-size: 3rem; margin-bottom: 1rem; }
.coming-soon-title { font-size: 1.25rem; font-weight: 800; margin-bottom: .75rem; }
.coming-soon-desc { font-size: .95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; }
.coming-soon-cta { min-height: 52px; font-size: 1rem; }
.coming-soon-popup { max-width: 400px; }
.coming-soon-popup-title { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.coming-soon-popup-desc { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55; }
.coming-soon-msg { font-size: .9rem; }

/* ══════════════════════════════════════════════
   이용안내 서브페이지 (summary, fees, tips, guide, faq)
   블록형 카드 레이아웃 · 반응형
══════════════════════════════════════════════ */
.usage-sub {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}
.usage-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  transition: box-shadow .2s;
}
.usage-block:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.usage-block-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.usage-block-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(102,126,234,.12), rgba(118,75,162,.1));
}
.usage-block-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--text);
}
.usage-block-desc {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.usage-block p { font-size: .95rem; line-height: 1.7; color: var(--text); margin: 0 0 .75rem; }
.usage-block p:last-child { margin-bottom: 0; }
.usage-block ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.usage-block li { margin-bottom: .35rem; font-size: .95rem; line-height: 1.6; color: var(--text-muted); }

/* 요금표 카드 그리드 */
.usage-fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.usage-fee-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.usage-fee-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(102,126,234,.12); }
.usage-fee-card.coming-soon { opacity: .85; }
.usage-fee-card .fee-icon { font-size: 1.75rem; margin-bottom: .5rem; }
.usage-fee-card .fee-name { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; line-height: 1.35; }
.usage-fee-card .fee-token { font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.usage-fee-card .fee-won { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.usage-fee-card .fee-badge { display: inline-block; margin-top: .5rem; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: rgba(249,115,22,.15); color: #ea580c; }

/* 3단계 순서도 (tips) */
.usage-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--bg2);
  border-radius: 16px;
  border: 1px solid var(--border);
}
.usage-flow-step {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
a.usage-flow-step:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(102,126,234,.15);
  color: var(--text);
}
.usage-flow-step .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.usage-flow-arrow { font-size: 1.25rem; color: var(--text-muted); flex-shrink: 0; }
@media (max-width: 600px) {
  .usage-flow { flex-direction: column; }
  .usage-flow-arrow { transform: rotate(90deg); }
}

/* FAQ 아코디언 스타일 */
.usage-faq-list { display: flex; flex-direction: column; gap: .75rem; }
.usage-faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.usage-faq-q {
  padding: 1.1rem 1.25rem;
  font-size: .98rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  transition: background .2s;
}
.usage-faq-q:hover { background: var(--bg2); }
.usage-faq-q .faq-icon { font-size: 1.2rem; flex-shrink: 0; }
.usage-faq-a {
  padding: 0 1.25rem 1.1rem;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.usage-faq-a p { margin: 0 0 .5rem; }
.usage-faq-a p:last-child { margin-bottom: 0; }

/* 상단 강조 배너 */
.usage-hero-banner {
  background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.08));
  border: 1px solid rgba(102,126,234,.2);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.usage-hero-banner .banner-icon { font-size: 2rem; flex-shrink: 0; }
.usage-hero-banner .banner-text { font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.5; }
.usage-hero-banner .banner-text strong { color: var(--primary); }

@media (max-width: 600px) {
  .usage-sub { padding: 0 1rem 3rem; }
  .usage-block { padding: 1.25rem 1.25rem; }
  .usage-fee-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}

/* ══════════════════════════════════════════════
   Mobile Category Dropdown Panels
   (nav-mobile-row2 의 드롭다운: position:fixed 로
    overflow-x:auto 컨테이너 밖으로 탈출)
══════════════════════════════════════════════ */
.mobile-cat-item { flex-shrink: 0; }

/* 버튼 내 화살표 */
.mobile-cat-arrow {
  display: inline-block;
  font-size: .62rem;
  line-height: 1;
  transition: transform var(--transition);
}
.mobile-cat-btn.open .mobile-cat-arrow { transform: rotate(180deg); }

/* 버튼 열림 상태 */
.mobile-cat-btn.open {
  color: var(--primary);
  background: rgba(102, 126, 234, .09);
}
/* 현재 페이지가 속한 카테고리 강조 */
.mobile-cat-btn.current { color: var(--primary); font-weight: 700; }

/* ── 패널 공통 (기본: 숨김, 모바일에서만 활성화) ── */
.mobile-cat-panel {
  position: fixed;        /* overflow 컨테이너 밖으로 탈출 */
  left: 0;
  right: 0;
  z-index: 895;           /* navbar(900) 바로 아래 */
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  padding: .5rem 1rem .7rem;
  /* 애니메이션 초기 상태 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
/* 열림 상태 */
.mobile-cat-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 데스크톱에서 완전 숨김 */
@media (min-width: 769px) {
  .mobile-cat-panel { display: none !important; }
}

/* ── 패널 내부 그리드 (2열) ── */
.mobile-cat-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
}

/* ── 패널 아이템 ── */
.mobile-cat-panel-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  color: var(--text);
  transition: background var(--transition);
}
.mobile-cat-panel-item:hover,
.mobile-cat-panel-item:active { background: var(--bg2); }
.mcp-icon { font-size: 1.15rem; flex-shrink: 0; }
.mcp-text strong { display: block; font-size: .82rem; font-weight: 700; }
.mcp-text small  { display: block; font-size: .71rem; color: var(--text-muted); margin-top: 1px; }

/* ── 패널 하단 전체보기 링크 ── */
.mobile-cat-panel-footer {
  display: block;
  margin-top: .35rem;
  padding: .5rem .65rem;
  border-top: 1px solid var(--border);
  padding-top: .6rem;
  text-align: center;
  font-size: .83rem;
  font-weight: 600;
  color: var(--primary);
  border-radius: 8px;
  transition: background var(--transition);
}
.mobile-cat-panel-footer:hover { background: var(--bg2); }

/* =============================================
   관리자 페이지 — 공통 레이아웃 (PC)
   ============================================= */
.admin-layout-wrap {
  display: flex;
  min-height: 100vh;
}

.admin-sb {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.admin-page-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
  overflow-x: hidden;
}

/* 관리자 페이지 상단·카드·테이블 가독성 (다크 테마) */
.admin-page-content h1,
.admin-page-content h2,
.admin-page-content h4,
.admin-page-content .page-title {
  color: #ffffff !important;
}
.admin-page-content .text-muted,
.admin-page-content small:not(.badge),
.admin-page-content .card-header small {
  color: #cbd5e1 !important;
}
.admin-page-content .card-header {
  background-color: #1e2a3a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
.admin-page-content .card {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
.admin-page-content .card-body,
.admin-page-content .card .table {
  color: #e2e8f0 !important;
}
.admin-page-content .table thead th {
  background-color: #1e3a5f !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}
.admin-page-content .table td {
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}
.admin-page-content .badge {
  color: #fff !important;
}
.admin-page-content .bg-light {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}
.admin-layout-wrap .admin-page-content .form-control,
.admin-layout-wrap .admin-page-content .form-select {
  background-color: #1e2a3a;
  border-color: #334155;
  color: #e2e8f0;
}
.admin-layout-wrap .admin-page-content .nav-tabs .nav-link {
  color: #cbd5e1 !important;
}
.admin-layout-wrap .admin-page-content .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background-color: #1e2a3a;
  border-color: #334155 #334155 transparent;
}

/* =============================================
   관리자 페이지 — 모바일 (768px 이하)
   ============================================= */
@media (max-width: 768px) {

  .admin-layout-wrap,
  #adminMainLayout,
  .d-flex.admin-wrap,
  .admin-wrap {
    display: block !important;
  }

  .admin-sb {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 75vw !important;
    max-width: 280px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    transform: translateX(-110%) !important;
    visibility: hidden !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                visibility 0.28s !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #1a1a2e !important;
    padding-top: 16px !important;
    padding-bottom: 120px !important;
  }

  .admin-sb.open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .admin-sb a,
  .admin-sb .nav-link,
  .admin-sb .admin-menu-item,
  .admin-sb .sb-link {
    color: #e2e8f0 !important;
    font-size: 15px !important;
    padding: 13px 20px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  .admin-sb a:hover,
  .admin-sb .nav-link:hover,
  .admin-sb .sb-link:hover {
    background: #2a2a4e !important;
    color: #a78bfa !important;
  }

  .admin-sb .nav-section,
  .admin-sb .sidebar-section-title,
  .admin-sb h6,
  .admin-sb small,
  .admin-sb .sb-hr {
    color: #a78bfa !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 16px 20px 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    border: none !important;
  }

  .admin-sb .submenu,
  .admin-sb .collapse,
  .admin-sb [class*="sub"] {
    background: #12122a !important;
  }
  .admin-sb #pick-submenu {
    background: #12122a !important;
    display: none;
  }
  .admin-sb #pick-submenu.pick-open {
    display: block !important;
  }

  .admin-sb .submenu a,
  .admin-sb .collapse a,
  .admin-sb .sb-sub {
    padding-left: 36px !important;
    font-size: 14px !important;
    color: #94a3b8 !important;
  }

  .admin-page-content,
  .admin-sb + div,
  .admin-sb ~ div,
  .admin-sb + main,
  .flex-grow-1,
  #adminMainLayout > div:last-child {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    display: block !important;
  }

  .admin-sidebar-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.65) !important;
    z-index: 1000 !important;
  }

  .admin-sidebar-overlay.active {
    display: block !important;
  }

  .admin-sidebar-fab {
    display: flex !important;
    position: fixed !important;
    bottom: 24px !important;
    left: 16px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #7c3aed !important;
    color: #ffffff !important;
    font-size: 22px !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 16px rgba(124,58,237,0.5) !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
  }

  .admin-sidebar-fab:active {
    transform: scale(0.92) !important;
  }
}

@media (min-width: 769px) {
  .admin-sidebar-fab,
  .admin-sidebar-overlay {
    display: none !important;
  }
}

/* ── 관리자 차트 — 다크 배경에서 가시성 확보 ── */
.card-chart {
  background: #1e1e3f !important;
  border-radius: 8px;
}
.card-chart canvas {
  background: transparent;
}

/* ===== 관리자 페이지 가독성 개선 ===== */
.admin-page-content h1,
.admin-page-content h2,
.admin-page-content h3,
.admin-page-content h4,
.admin-page-content h5 {
  color: #ffffff !important;
}
.admin-page-content p,
.admin-page-content label,
.admin-page-content span:not(.badge) {
  color: #cbd5e1 !important;
}
.admin-page-content .card {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
}
.admin-page-content .card-header {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-bottom: 1px solid #334155 !important;
}
.admin-page-content .card-body {
  background-color: #1e293b !important;
}
.admin-page-content table thead {
  background-color: #1e3a5f !important;
}
.admin-page-content table thead th {
  color: #ffffff !important;
  border-color: #334155 !important;
}
.admin-page-content table tbody tr {
  background-color: #1e293b !important;
}
.admin-page-content table tbody td {
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}
.admin-page-content table tbody tr:hover {
  background-color: #263548 !important;
}
.admin-page-content .form-control,
.admin-page-content .form-select {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
.admin-page-content .form-control::placeholder {
  color: #64748b !important;
}
.admin-page-content .nav-tabs .nav-link {
  color: #94a3b8 !important;
}
.admin-page-content .nav-tabs .nav-link.active {
  background-color: #1e3a5f !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}
/* ===== 관리자 가독성 개선 끝 ===== */

/* ===== 관리자 사이드바 PC/공통 보강 ===== */
.admin-layout-wrap {
  display: flex !important;
  min-height: 100vh;
}
.admin-sb.admin-sidebar {
  display: flex !important;
  flex-direction: column;
  background: #1a1a2e;
  min-height: 100vh;
}
.admin-sb.admin-sidebar nav {
  flex: 1;
  overflow-y: auto;
}
.admin-sb .sb-link {
  display: flex !important;
  align-items: center;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  padding: 13px 20px !important;
  min-height: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  font-size: 15px;
}
.admin-sb .sb-link:hover {
  background: #2a2a4e !important;
  color: #a78bfa !important;
}
.admin-sb button.sb-link,
.admin-sb button {
  color: #e2e8f0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 15px !important;
  padding: 13px 20px !important;
  min-height: 48px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.admin-sb button span {
  color: #e2e8f0 !important;
}
.admin-sb button:hover {
  background: #2a2a4e !important;
  color: #a78bfa !important;
}
.admin-sb .sb-hr {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 4px 0;
}
/* ===== 끝 ===== */