/* ─────────────────────────────────────────────────────────────
   Smart Battery 사이트 공용 스타일 (sb-*)
   - Claude Design 런타임(.dc.html, x-import) 없이 만드는 일반 HTML 페이지용
   - 색·글꼴·간격 값은 모두 디자인 시스템 토큰(tokens/*.css)에서 가져옴
   - 사용법: <link rel="stylesheet" href="/_ds/site.css"> 한 줄 (토큰까지 함께 불러옴)
   - 규칙 전체는 저장소 루트의 DESIGN.md 참고
   ───────────────────────────────────────────────────────────── */
@import url("smart-battery-design-system-a75bbbdc-1c7c-4d50-b543-27b9136fd049/tokens/fonts.css");
@import url("smart-battery-design-system-a75bbbdc-1c7c-4d50-b543-27b9136fd049/tokens/colors.css");
@import url("smart-battery-design-system-a75bbbdc-1c7c-4d50-b543-27b9136fd049/tokens/typography.css");
@import url("smart-battery-design-system-a75bbbdc-1c7c-4d50-b543-27b9136fd049/tokens/spacing.css");
@import url("smart-battery-design-system-a75bbbdc-1c7c-4d50-b543-27b9136fd049/tokens/effects.css");

/* 사이트 전용 추가 토큰 — 행사 구분색(연구자 민트 / 기업 네이비) 등 */
:root{
  --mint-500:#14B8A6; --mint-600:#0D9488; --mint-100:#CCFBF1; --mint-50:#F0FDFA;
  --kind-researcher:var(--mint-600); --kind-researcher-ink:#0F766E; --kind-researcher-soft:var(--mint-100);
  --kind-company:var(--navy-900); --kind-company-ink:var(--navy-900); --kind-company-soft:var(--light-100);
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font-body);color:var(--text-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;word-break:keep-all}
body{margin:0;background:var(--bg-light);color:var(--text-body)}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-strong);text-decoration:underline}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
[hidden]{display:none!important}

/* ── 레이아웃 ── */
.sb-wrap{max-width:var(--page-max);margin:0 auto;padding-inline:max(16px,min(var(--page-gutter),4vw))}
.sb-stack{display:flex;flex-direction:column;gap:var(--sb-gap,16px)}
.sb-row{display:flex;align-items:center;gap:var(--sb-gap,12px);flex-wrap:wrap}
.sb-grid{display:grid;gap:var(--sb-gap,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--sb-min,260px)),1fr))}
.sb-spacer{flex:1 1 auto}

/* ── 상단 바 (홈페이지·관리자 공통 남색 그라데이션) ── */
.sb-header{background:var(--bg-gradient);color:#fff}
.sb-header__inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:16px}
.sb-header__brand{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sb-header__eyebrow{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--cyan-400)}
.sb-header__title{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.01em}
.sb-header__meta{font-size:13px;color:var(--text-on-dark-muted);text-align:right}
.sb-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.sb-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 16px 10px;border-bottom:3px solid transparent;color:var(--text-on-dark-muted);font-family:var(--font-display);font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none}
.sb-tab:hover{color:#fff;text-decoration:none}
.sb-tab[aria-current="page"]{color:#fff;border-bottom-color:var(--cyan-400)}

/* ── 글자 ── */
.sb-eyebrow{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:var(--tracking-label);color:var(--accent)}
.sb-h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,36px);line-height:1.2;letter-spacing:var(--tracking-display);text-wrap:balance}
.sb-h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-0.01em}
.sb-h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.35}
.sb-muted{color:var(--text-muted)}
.sb-small{font-size:13px;line-height:1.5}
.sb-num{font-family:var(--font-numeric);font-weight:700;letter-spacing:var(--tracking-numeric);font-variant-numeric:tabular-nums}

/* ── 카드·패널 ── */
.sb-card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:20px 22px}
.sb-card--flat{box-shadow:none}
.sb-card--glass{background:var(--surface-glass);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:none;color:#fff;backdrop-filter:var(--glass-blur)}
.sb-stat{display:flex;flex-direction:column;gap:4px}
.sb-stat__label{font-size:13px;font-weight:600;color:var(--text-muted)}
.sb-stat__value{font-family:var(--font-numeric);font-weight:700;font-size:34px;line-height:1;letter-spacing:var(--tracking-numeric);color:var(--accent)}
.sb-stat__value small{font-size:15px;font-weight:500;margin-left:2px;color:var(--text-body)}

/* ── 버튼 ── */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 18px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast)}
.sb-btn:hover{background:var(--accent-hover);color:#fff;text-decoration:none}
.sb-btn:active{background:var(--accent-press);transform:scale(.98)}
.sb-btn:disabled{opacity:.45;cursor:not-allowed}
.sb-btn--ghost{background:#fff;color:var(--accent);border-color:var(--border-card)}
.sb-btn--ghost:hover{background:var(--light-100);color:var(--accent)}
.sb-btn--sm{height:var(--control-h-sm);padding:0 12px;font-size:13.5px}
.sb-btn--lg{height:var(--control-h-lg);padding:0 24px;font-size:17px}
.sb-btn--glow{background:#fff;color:var(--navy-900);border:2px solid var(--cyan-400);box-shadow:0 0 0 4px var(--cyan-glow-soft),0 8px 24px rgba(0,209,255,.28)}
.sb-btn--glow:hover{background:var(--light-100);color:var(--navy-900)}
.sb-btn--ok{background:var(--success);border-color:var(--success)}
.sb-btn--ok:hover{background:#0E9F70}

/* ── 입력 ── */
.sb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-label{font-size:13px;font-weight:600;color:var(--ink-700)}
.sb-label .req{color:var(--danger);margin-left:2px}
.sb-input,.sb-select,.sb-textarea{width:100%;height:var(--control-h-md);padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-card);background:#fff;font-size:15px;color:var(--text-body)}
.sb-textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
.sb-input:focus,.sb-select:focus,.sb-textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.sb-search{position:relative}
.sb-search .sb-input{padding-left:38px}
.sb-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint)}

/* 다크 배경 위 입력 */
.sb-dark .sb-label{color:rgba(255,255,255,.85)}
.sb-dark .sb-input,.sb-dark .sb-textarea,.sb-dark .sb-select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.sb-dark .sb-input::placeholder,.sb-dark .sb-textarea::placeholder{color:rgba(255,255,255,.45)}

/* ── 칩·배지 ── */
.sb-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border-card);background:#fff;color:var(--ink-700);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.sb-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sb-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;white-space:nowrap;background:var(--light-100);color:var(--ink-700)}
.sb-badge--researcher{background:var(--kind-researcher-soft);color:var(--kind-researcher-ink)}
.sb-badge--company{background:var(--kind-company);color:#fff}
.sb-badge--ok{background:#D1FAE5;color:#047857}
.sb-badge--off{background:#F3F4F8;color:var(--text-faint);text-decoration:line-through}

/* ── 표 ── */
.sb-table-wrap{overflow-x:auto;border:1px solid var(--border-card);border-radius:var(--radius-md);background:#fff}
.sb-table{width:100%;border-collapse:collapse;font-size:14px}
.sb-table th{position:sticky;top:0;background:var(--light-100);text-align:left;font-size:12.5px;font-weight:700;color:var(--ink-500);padding:10px 12px;white-space:nowrap}
.sb-table td{padding:10px 12px;border-top:1px solid var(--line-100);vertical-align:middle}
.sb-table tr:hover td{background:var(--light-50)}
.sb-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 알림 ── */
.sb-note{padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;background:var(--light-100);border:1px solid var(--border-card)}
.sb-note--warn{background:rgba(240,97,17,.10);border-color:rgba(240,97,17,.45)}
.sb-note--ok{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.45)}
.sb-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:100;padding:12px 18px;border-radius:10px;background:var(--navy-900);color:#fff;font-size:14px;box-shadow:var(--shadow-dialog)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.sb-noprint{display:none!important}body{background:#fff}}