:root { 
  --adm-sidebar-w: 16rem; 
  --brand-start: #a78bfa; /* purple-400 */
  --brand-end:   #7c3aed; /* purple-600 */
}
html, body { height: 100%; }
body { background:#f9fafb; color:#111827; }
.no-scroll{ overflow:hidden; }

/* ===== 기본 카드/컴포넌트 토큰 ===== */
.zine-card{ background:#fff; border:1px solid rgba(17,24,39,.08); border-radius:16px; box-shadow:0 10px 28px rgba(17,24,39,.07); }
.adm-content-card{ max-width:90rem; }

/* ===== 레이아웃 ===== */
.adm-grid{ display:block; width:100%; }
.adm-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s; }
.adm-overlay.show{ opacity:1; pointer-events:auto; }

/* 모바일 오프캔버스 */
.drawer{ position:fixed; top:0; bottom:0; left:-110%; width:var(--adm-sidebar-w); transition:left .25s ease; z-index:40; }
.drawer.open{ left:0; }

/* 데스크탑(>=1000px) */
@media (min-width:1000px){
  #admRoot.adm-grid{ display:grid; grid-template-columns:var(--adm-sidebar-w) 1fr; min-height:100vh; }
  .adm-sidebar{ position:sticky !important; top:0; height:100vh; width:var(--adm-sidebar-w) !important; }
  .drawer{ position:sticky !important; left:auto !important; right:auto !important; transform:none !important; }
  .adm-overlay{ display:none !important; }
  .hide-at-1000{ display:none !important; }
}

/* ===== Sidebar theme ===== */
.adm-sidebar{
  background:
    radial-gradient(900px 420px at -10% -20%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(700px 360px at 120% 110%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(180deg, #faf5ff, #ffffff);
  border-right: 1px solid rgba(17,24,39,.08);
  box-shadow: 8px 0 28px rgba(17,24,39,.06);
  backdrop-filter: saturate(130%) blur(6px);
  -webkit-backdrop-filter: saturate(130%) blur(6px);
}
.adm-sidehead{ background: linear-gradient(90deg, var(--brand-start), var(--brand-end)); color:#fff; border-bottom:1px solid rgba(255,255,255,.35); box-shadow:0 8px 18px rgba(124,58,237,.22); }

.adm-nav-item{
  position:relative; display:flex; align-items:center; gap:.75rem;
  padding:.55rem .75rem; border-radius:14px; background: rgba(255,255,255,.90);
  border:1px solid rgba(17,24,39,.08); box-shadow:0 8px 22px rgba(17,24,39,.10);
  transition: background-color .18s ease, box-shadow .18s ease, transform .08s ease, border-color .18s ease;
}
.adm-nav-item:hover{ background:#fff; box-shadow: 0 12px 28px rgba(17,24,39,.12); }
.adm-nav-item:active{ transform: translateY(1px); }
.adm-nav-item.is-active{ background: linear-gradient(180deg, #faf5ff, #ffffff); border-color: rgba(124,58,237,.35); box-shadow: 0 14px 34px rgba(124,58,237,.22); }
.adm-bullet{ width:8px; height:8px; border-radius:9999px; background:#e5e7eb; flex:0 0 auto; }

/* 그룹/서브메뉴 */
.adm-group{ margin-bottom:.5rem; }
.adm-group-toggle{
  display:flex; align-items:center; gap:.6rem; width:100%; padding:.55rem .75rem; border-radius:14px; cursor:pointer;
  background: rgba(255,255,255,.90); border:1px solid rgba(17,24,39,.08); box-shadow: 0 8px 22px rgba(17,24,39,.10);
  transition: background-color .18s, box-shadow .18s, border-color .18s;
}
.adm-group-toggle:hover{ background:#fff; box-shadow: 0 12px 28px rgba(17,24,39,.12); }
.adm-group-toggle.is-active{ border-color: rgba(124,58,237,.35); box-shadow: 0 14px 34px rgba(124,58,237,.22); }
.adm-sub{ margin-left: .5rem; padding-left: .5rem; border-left: 2px solid rgba(17,24,39,.06); margin-top:.4rem; margin-bottom:.2rem; }
.adm-sub a.adm-nav-item{ border-radius:10px; padding:.45rem .6rem; box-shadow:none; background:#fff; }

/* ===== Topbar ===== */
.topbar{ height: 3.5rem; background:#fff; border-bottom: 1px solid rgba(17,24,39,.08); }
.topbar .topbar-inner{ display:flex; align-items:center; height: 3.5rem; gap:.75rem; padding: 0 1rem; }
.topbar-title{ font-weight:700; font-size:1rem; line-height:1; }
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }

/* ===== Table presets ===== */
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td { padding:.75rem; text-align:left; }
.table thead th { background:#fafafa; font-weight:600; color:#374151; border-bottom:1px solid #e5e7eb; }
.table tbody tr + tr td { border-top:1px solid #f3f4f6; }

/* ===== Badges ===== */
.badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; padding:.125rem .5rem; border-radius:999px; }
.badge.gray { background:#f3f4f6; color:#374151; }
.badge.green{ background:#ecfdf5; color:#065f46; }
.badge.blue { background:#eff6ff; color:#1e40af; }
.badge.purple{ background:#f5f3ff; color:#5b21b6; }
.badge.red  { background:#fef2f2; color:#991b1b; }

/* ===== Rating (5-star) ===== */
.rating { display:inline-flex; gap:2px; }
.rating .star { width:18px; height:18px; display:inline-block; mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>') no-repeat center / contain; background:#e5e7eb; }
.rating .star.on { background:var(--brand-end); }

/* ===== Scrollbar ===== */
.scrollbar-thin { scrollbar-width:thin; }
.scrollbar-thin::-webkit-scrollbar { height:8px; width:8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:999px; }

/* ======================
   공통 버튼 스타일 (순수 CSS)
====================== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; height:3rem; padding:0 1rem; border:0; border-radius:1rem;
  color:#fff; font-weight:600; letter-spacing:.01em; cursor:pointer;
  background:linear-gradient(90deg,#8b5cf6,#7c3aed);
  box-shadow:0 10px 24px rgba(124,58,237,.25);
  transition:box-shadow .2s ease, transform .06s ease, filter .2s ease;
}
.btn-primary:hover{ box-shadow:0 12px 30px rgba(124,58,237,.32); filter:brightness(1.02); }
.btn-primary:active{ transform:translateY(.5px) scale(.99); }
.btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(167,139,250,.35), 0 12px 30px rgba(124,58,237,.32); }
.btn-primary[disabled]{ opacity:.6; cursor:not-allowed; }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.625rem 1rem; border-radius:.75rem; border:1px solid #d1d5db;
  background:#fff; color:#374151; text-decoration:none;
  transition:background-color .15s ease, box-shadow .2s ease;
}
.btn-secondary:hover{ background:#f9fafb; }

/* ===== 인풋 + 트레일링 아이콘 공통 ===== */
.input-wrap{ position:relative; }
.input-wrap .icon{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#9ca3af; pointer-events:none;
}

/* 공통 버튼: 줄바꿈 방지 */
.btn-primary,
.btn-secondary {
  white-space: nowrap;   /* 한 줄 고정 */
}

/* flex 컨테이너에서 줄바꿈을 막고 싶을 때 사용하는 유틸 */
.no-flex-wrap { flex-wrap: nowrap; }
.nowrap { white-space: nowrap; }