/* ============================================================
   TDS-inspired design system (Toss Design System 스타일)
   - 컬러 토큰: grey/blue 등 TDS 팔레트
   - 타이포: Typography 1~7 스케일 (30/26/22/20/17/15/13)
   - 컴포넌트: NavBar · Top · Tab · ListRow · ListHeader ·
               Badge · Button · BottomCTA · Border(divider)
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ---- Grey scale ---- */
  --grey-50: #f9fafb;
  --grey-100: #f2f4f6;
  --grey-200: #e5e8eb;
  --grey-300: #d1d6db;
  --grey-400: #b0b8c1;
  --grey-500: #8b95a1;
  --grey-600: #6b7684;
  --grey-700: #4e5968;
  --grey-800: #333d4b;
  --grey-900: #191f28;

  /* ---- Blue (Toss Blue) ---- */
  --blue-50: #e8f3ff;
  --blue-100: #c9e2ff;
  --blue-200: #90c2ff;
  --blue-300: #64a8ff;
  --blue-400: #4593fc;
  --blue-500: #3182f6;
  --blue-600: #2272eb;
  --blue-700: #1b64da;
  --blue-800: #1957c2;
  --blue-900: #194aa6;

  /* ---- Accent palette (Badge 등) ---- */
  --red-50: #ffeeee;   --red-500: #f04452;   --red-700: #d22030;
  --green-50: #f0faf6; --green-500: #05c072; --green-700: #029359;
  --teal-50: #edf8f8;  --teal-500: #18b9b9;  --teal-700: #0f8585;
  --yellow-50: #fff9e7;--yellow-500: #ffc342;--yellow-700: #dd7d02;
  --purple-50: #f9f0fc;--purple-500: #b163d1;--purple-700: #8a3db1;

  /* ---- Semantic ---- */
  --background: #ffffff;
  --grey-background: var(--grey-100);
  --text: var(--grey-900);
  --text-sub: var(--grey-600);
  --text-muted: var(--grey-500);
  --primary: var(--blue-500);

  --font: 'Toss Product Sans', 'Pretendard', -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--grey-background);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; }
a { text-decoration: none; color: inherit; }
.hidden { display: none !important; }

/* ============================================================
   Typography 1~7
   ============================================================ */
.tds-t1 { font-size: 30px; line-height: 40px;   letter-spacing: -0.6px; }
.tds-t2 { font-size: 26px; line-height: 35px;   letter-spacing: -0.5px; }
.tds-t3 { font-size: 22px; line-height: 31px;   letter-spacing: -0.4px; }
.tds-t4 { font-size: 20px; line-height: 29px;   letter-spacing: -0.3px; }
.tds-t5 { font-size: 17px; line-height: 25.5px; letter-spacing: -0.2px; }
.tds-t6 { font-size: 15px; line-height: 22.5px; letter-spacing: -0.1px; }
.tds-t7 { font-size: 13px; line-height: 19.5px; }

.tds-bold     { font-weight: 700; }
.tds-semibold { font-weight: 600; }
.tds-medium   { font-weight: 500; }
.tds-regular  { font-weight: 400; }

/* ============================================================
   NavigationBar
   ============================================================ */
.tds-navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  height: 56px; padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tds-navbar-title { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.tds-navbar-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -8px;
  border-radius: 50%; color: var(--grey-800); font-size: 22px;
  transition: background 0.12s;
}
.tds-navbar-back:active { background: var(--grey-100); }
.tds-navbar-right { margin-left: auto; display: flex; gap: 4px; }

/* ============================================================
   Top (타이틀 영역)
   ============================================================ */
.tds-top { padding: 24px 24px 8px; }
.tds-top-title {
  font-size: 24px; line-height: 33px; font-weight: 700;
  letter-spacing: -0.4px; color: var(--text);
}
.tds-top-desc { margin-top: 6px; font-size: 15px; color: var(--text-sub); }

/* ============================================================
   Tab (언더라인 스타일 · fluid 스크롤)
   ============================================================ */
.tds-tab {
  display: flex; position: relative;
  padding: 0 20px;
  border-bottom: 1px solid var(--grey-200);
}
.tds-tab--fluid {
  overflow-x: auto; scrollbar-width: none;
}
.tds-tab--fluid::-webkit-scrollbar { display: none; }
.tds-tab-item {
  position: relative; flex-shrink: 0;
  padding: 12px 4px; margin: 0 10px;
  font-size: 15px; font-weight: 500; color: var(--grey-600);
  transition: color 0.15s;
  white-space: nowrap;
}
.tds-tab-item[aria-selected="true"] {
  color: var(--grey-900); font-weight: 700;
}
.tds-tab-item[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--grey-900); border-radius: 1px;
}
.tds-tab--small .tds-tab-item { padding: 10px 2px; font-size: 13px; }
/* redBean — 우상단 알림 점 */
.tds-tab-item.red-bean::before {
  content: ''; position: absolute; top: 10px; right: -4px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--red-500);
}

/* ============================================================
   ListHeader
   ============================================================ */
.tds-list-header {
  display: flex; align-items: baseline; gap: 6px;
  padding: 20px 24px 8px;
}
.tds-list-header h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.tds-list-header .count { font-size: 15px; font-weight: 600; color: var(--primary); }
.tds-list-header .right { margin-left: auto; font-size: 13px; color: var(--text-muted); }

/* ============================================================
   ListRow — Left / Contents / Right 3분할
   ============================================================ */
.tds-list-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 12px 24px;
  transition: background 0.12s;
}
.tds-list-row:active { background: var(--grey-100); }
@media (hover: hover) { .tds-list-row:hover { background: var(--grey-50); } }
.tds-list-row .lr-left {
  flex-shrink: 0;
  width: 50px; height: 50px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: var(--grey-100);
}
.tds-list-row .lr-contents { flex: 1; min-width: 0; }
.tds-list-row .lr-title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.tds-list-row .lr-desc {
  margin-top: 2px; font-size: 13px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tds-list-row .lr-right {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
}
.tds-list-row .lr-arrow { color: var(--grey-300); font-size: 18px; font-weight: 600; }
/* indented border — 항목 사이 구분선 */
.tds-list-row + .tds-list-row .lr-border-target,
.tds-list--bordered .tds-list-row:not(:first-child) {
  position: relative;
}
.tds-list--bordered .tds-list-row:not(:first-child)::before {
  content: ''; position: absolute; top: 0; left: 88px; right: 24px;
  height: 1px; background: var(--grey-100);
}
.tds-list--bordered .tds-list-row { position: relative; }

/* ============================================================
   Badge — fill/weak × blue/teal/green/red/yellow/elephant
   ============================================================ */
.tds-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 7px; border-radius: 6px;
  letter-spacing: 0;
}
.tds-badge--xsmall { font-size: 11px; padding: 3px 5px; border-radius: 5px; }
.tds-badge--medium { font-size: 13px; padding: 5px 9px; border-radius: 7px; }
.tds-badge--large  { font-size: 14px; padding: 6px 11px; border-radius: 8px; }

.tds-badge--fill.tds-badge--blue     { background: var(--blue-500);   color: #fff; }
.tds-badge--fill.tds-badge--teal     { background: var(--teal-500);   color: #fff; }
.tds-badge--fill.tds-badge--green    { background: var(--green-500);  color: #fff; }
.tds-badge--fill.tds-badge--red      { background: var(--red-500);    color: #fff; }
.tds-badge--fill.tds-badge--yellow   { background: var(--yellow-500); color: #fff; }
.tds-badge--fill.tds-badge--elephant { background: var(--grey-600);   color: #fff; }

.tds-badge--weak.tds-badge--blue     { background: var(--blue-50);   color: var(--blue-700); }
.tds-badge--weak.tds-badge--teal     { background: var(--teal-50);   color: var(--teal-700); }
.tds-badge--weak.tds-badge--green    { background: var(--green-50);  color: var(--green-700); }
.tds-badge--weak.tds-badge--red      { background: var(--red-50);    color: var(--red-700); }
.tds-badge--weak.tds-badge--yellow   { background: var(--yellow-50); color: var(--yellow-700); }
.tds-badge--weak.tds-badge--elephant { background: var(--grey-100);  color: var(--grey-700); }

/* ============================================================
   Button — fill/weak × primary/light/dark/danger
   ============================================================ */
.tds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; letter-spacing: -0.2px;
  border-radius: 12px;
  transition: transform 0.1s, filter 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.tds-btn:active { transform: scale(0.98); }

/* sizes */
.tds-btn--small  { font-size: 13px; padding: 7px 12px;  border-radius: 8px; }
.tds-btn--medium { font-size: 15px; padding: 9px 16px;  border-radius: 10px; }
.tds-btn--large  { font-size: 16px; padding: 11px 22px; }
.tds-btn--xlarge { font-size: 17px; padding: 15px 24px; border-radius: 14px; }

/* display */
.tds-btn--full { width: 100%; }

/* fill */
.tds-btn--fill.tds-btn--primary { background: var(--blue-500); color: #fff; }
.tds-btn--fill.tds-btn--primary:active { background: var(--blue-600); }
.tds-btn--fill.tds-btn--dark    { background: var(--grey-800); color: #fff; }
.tds-btn--fill.tds-btn--danger  { background: var(--red-500);  color: #fff; }
.tds-btn--fill.tds-btn--light   { background: var(--grey-100); color: var(--grey-800); }

/* weak */
.tds-btn--weak.tds-btn--primary { background: var(--blue-50);  color: var(--blue-600); }
.tds-btn--weak.tds-btn--dark    { background: var(--grey-100); color: var(--grey-800); }
.tds-btn--weak.tds-btn--danger  { background: var(--red-50);   color: var(--red-500); }
.tds-btn--weak.tds-btn--light   { background: var(--grey-50);  color: var(--grey-600); }

.tds-btn:disabled { opacity: 0.4; pointer-events: none; }

/* loading — 점 3개 */
.tds-btn--loading { pointer-events: none; }
.tds-btn--loading .btn-label { visibility: hidden; }
.tds-btn--loading::after {
  content: '· · ·'; position: absolute;
  font-weight: 800; animation: tds-dots 1s infinite;
}
@keyframes tds-dots { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ============================================================
   BottomCTA — 하단 고정 버튼 영역
   ============================================================ */
.tds-bottom-cta {
  position: sticky; bottom: 0; z-index: 10;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--background) 70%, transparent);
}

/* ============================================================
   Border — 섹션 구분 (full-bleed divider)
   ============================================================ */
.tds-divider { height: 12px; background: var(--grey-100); }
.tds-divider--thin { height: 1px; background: var(--grey-200); margin: 0 24px; }

/* ============================================================
   Paragraph
   ============================================================ */
.tds-paragraph { padding: 0 24px; font-size: 15px; color: var(--grey-700); }
.tds-paragraph + .tds-paragraph { margin-top: 10px; }