/* ============================================================
   SBY 수배연 라이더스 — 공용 디자인 시스템 v1  (2026-08-11)
   ============================================================
   원칙
   · 주 색상: 로고 실측 레드 #C8161E (자료/수배연 라이더스 로고.png 픽셀 평균 #BE151D~#C41720의 화면 표준화)
   · 색은 레드 외 3가지만: 잉크(먹색 계열), 뉴트럴 회색 계열, 성공 그린. 그 외(파랑·보라·와인색) 금지
   · 글씨체: SUIT (기하학적·데이터 가독성, 한글 최경량급)
   · 로고: logo-sby.png (빨간 SBY 워드마크) 단 하나만 사용
   · 모든 페이지가 이 파일을 먼저 링크하고, 페이지 고유 스타일은 토큰만 참조한다
   ============================================================ */

/* ── 글씨체: SUIT ── */
@font-face { font-family: 'SUIT'; src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SUIT'; src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'SUIT'; src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'SUIT'; src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'SUIT'; src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'SUIT'; src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT-Heavy.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ── 디자인 토큰 ── */
:root {
  /* 1. 브랜드 레드 (로고 색) — 진하기 변형은 같은 색의 셰이드/틴트 */
  --sby-red:        #C8161E;
  --sby-red-deep:   #A31118;   /* hover·pressed */
  --sby-red-soft:   #FBECED;   /* 배경 틴트 */
  --sby-red-line:   #F3CFD1;   /* 틴트 경계 */

  /* 2. 잉크 (텍스트 계열) — 2026-08-11 가독성 피드백으로 한 단계씩 진하게 */
  --sby-ink:        #131417;
  --sby-ink-2:      #3B3D42;   /* 보조 텍스트 (구 #55575C) */
  --sby-ink-3:      #5F6268;   /* 힌트·메타 (구 #8A8D93, 흰 배경 대비 5.9:1) */

  /* 뉴트럴 (잉크의 틴트 — 배경·표면·경계) */
  --sby-bg:         #F6F6F7;
  --sby-surface:    #FFFFFF;
  --sby-line:       #E6E7E9;
  --sby-line-2:     #D7D9DC;   /* 입력창 등 진한 경계 */

  /* 3. 성공 그린 (달성·정상·최적 상태 전용) */
  --sby-ok:         #0E8A46;
  --sby-ok-soft:    #E7F4EC;

  /* 타이포 */
  --sby-font: 'SUIT', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 형태 */
  --sby-radius:     12px;      /* 카드 */
  --sby-radius-s:   8px;       /* 버튼·입력·배지 */
  --sby-shadow:     0 1px 2px rgba(23,24,26,.05), 0 6px 20px rgba(23,24,26,.06);
  --sby-shadow-lift:0 2px 4px rgba(23,24,26,.06), 0 10px 28px rgba(23,24,26,.10);

  /* 로고 기울기 — SBY 워드마크의 이탤릭 각도에서 따온 시그니처 */
  --sby-skew:       -12deg;
}

/* ── 베이스 ── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sby-font);
  background: var(--sby-bg);
  color: var(--sby-ink);
  font-variant-numeric: tabular-nums;   /* 숫자 정렬 — 데이터 화면 필수 */
  /* SUIT 400은 Pretendard보다 가늘게 보여서 기본을 500으로 올린다 (가독성 피드백) */
  font-weight: 500;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sby-red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--sby-red);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 상단바 (전 페이지 공통 헤더) ── */
.sby-topbar {
  background: var(--sby-surface);
  border-bottom: 1px solid var(--sby-line);
  position: sticky; top: 0; z-index: 50;
}
.sby-topbar-in {
  max-width: 1080px; margin: 0 auto; padding: 0 20px;
  height: 60px; display: flex; align-items: center; gap: 14px;
}
.sby-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.sby-logo img { height: 20px; display: block; }
.sby-logo .sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--sby-ink-3); text-transform: uppercase; white-space: nowrap;
}
.sby-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 페이지 제목줄 (상단바 아래) */
.sby-pagehead { max-width: 1080px; margin: 0 auto; padding: 26px 20px 18px; }
.sby-pagehead h1 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px; margin: 0;
}
.sby-pagehead .desc { font-size: 14.5px; color: var(--sby-ink-2); font-weight: 500; margin-top: 6px; }

/* 시그니처 틱 — 로고 기울기의 빨간 평행사변형 (제목 옆 포인트) */
.sby-tick {
  display: inline-block; width: 8px; height: 18px;
  background: var(--sby-red); transform: skewX(var(--sby-skew));
  border-radius: 1.5px; flex-shrink: 0;
}

/* ── 카드 ── */
.sby-card {
  background: var(--sby-surface);
  border: 1px solid var(--sby-line);
  border-radius: var(--sby-radius);
  box-shadow: var(--sby-shadow);
}

/* ── 버튼 ── */
.sby-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 18px;
  border: none; border-radius: var(--sby-radius-s);
  font-family: var(--sby-font); font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sby-btn:disabled { opacity: .5; cursor: not-allowed; }
.sby-btn.primary { background: var(--sby-red); color: #fff; }
.sby-btn.primary:hover:not(:disabled) { background: var(--sby-red-deep); }
.sby-btn.ghost {
  background: var(--sby-surface); color: var(--sby-ink);
  border: 1.5px solid var(--sby-line-2);
}
.sby-btn.ghost:hover:not(:disabled) { border-color: var(--sby-ink); }
.sby-btn.danger {
  background: var(--sby-surface); color: var(--sby-red);
  border: 1.5px solid var(--sby-red-line);
}
.sby-btn.danger:hover:not(:disabled) { background: var(--sby-red-soft); border-color: var(--sby-red); }
.sby-btn.ok { background: var(--sby-ok); color: #fff; }
.sby-btn.sm { min-height: 34px; padding: 0 13px; font-size: 13px; border-radius: 7px; }

/* ── 배지 ── */
.sby-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0;
}
.sby-badge.red  { background: var(--sby-red-soft); color: var(--sby-red); }
.sby-badge.ink  { background: var(--sby-bg); color: var(--sby-ink-2); border: 1px solid var(--sby-line); }
.sby-badge.ok   { background: var(--sby-ok-soft); color: var(--sby-ok); }
.sby-badge.fill { background: var(--sby-red); color: #fff; }

/* ── 입력 ── */
.sby-input, .sby-select {
  font-family: var(--sby-font); font-size: 14px; font-weight: 500;
  color: var(--sby-ink); background: var(--sby-surface);
  border: 1.5px solid var(--sby-line-2); border-radius: var(--sby-radius-s);
  min-height: 42px; padding: 0 13px; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sby-input:focus, .sby-select:focus {
  outline: none; border-color: var(--sby-red);
  box-shadow: 0 0 0 3px var(--sby-red-soft);
}
.sby-input::placeholder { color: var(--sby-ink-3); font-weight: 500; }

/* ── 사용자 칩 ── */
.sby-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--sby-ink);
}
.sby-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* 상단바 요소는 절대 줄바꿈하지 않는다 (모바일에서 세로 뭉개짐 방지) */
.sby-topbar .sby-btn, .sby-topbar .sby-chip, .sby-topbar a,
.sby-chip, .sby-badge, .sby-btn { white-space: nowrap; }

@media (max-width: 560px) {
  .sby-logo .sub { display: none; }          /* SUBAYEON RIDERS 서브라벨 숨김 */
  .sby-topbar-in { padding: 0 14px; gap: 8px; }
  .sby-topbar .role-tag { display: none; }   /* 좁은 화면에선 역할 태그 생략 */
  .sby-chip { max-width: 96px; }
  .sby-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sby-pagehead { padding: 20px 14px 14px; }
  .sby-pagehead h1 { font-size: 20px; }
  .sby-pagehead .desc { font-size: 14px; }

  /* 모바일 가독성·조작성 */
  .sby-btn { min-height: 44px; }             /* 터치 타깃 */
  .sby-btn.sm { min-height: 38px; }
  .sby-input, .sby-select { font-size: 16px; min-height: 46px; }  /* 16px 미만이면 아이폰이 화면을 확대해버림 */
  .sby-table { font-size: 13px; }
}

/* ── 아이콘 (인라인 SVG 공통) ── */
.sby-ico { width: 20px; height: 20px; flex-shrink: 0; }
.sby-ico.s { width: 16px; height: 16px; }

/* ── 표 ── */
.sby-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sby-table th {
  text-align: left; font-size: 12px; font-weight: 800; color: var(--sby-ink-3);
  letter-spacing: .04em; padding: 10px 12px; border-bottom: 1.5px solid var(--sby-line-2);
  white-space: nowrap;
}
.sby-table td { padding: 11px 12px; border-bottom: 1px solid var(--sby-line); font-weight: 500; }
.sby-table tbody tr { transition: background .12s ease; }
.sby-table tbody tr:hover { background: var(--sby-bg); }

/* ── 푸터 ── */
.sby-foot {
  max-width: 1080px; margin: 0 auto; padding: 28px 20px 36px;
  font-size: 12px; color: var(--sby-ink-3); font-weight: 500; text-align: center;
}