/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — 공용 컴포넌트층 (코인베이스 룩)
   토큰: style.css 의 --brand* / --ds-* / --r-* / --sp-* / --fs-*
   클래스 프리픽스 `ds-` = 기존 페이지 클래스와 충돌 방지.
   마이그레이션된 페이지·base.html 만 사용. 미사용 시 시각 영향 0.
   ═══════════════════════════════════════════════════════════════ */

.ds-scope { font-family: var(--font-sans); color: var(--ds-ink); }
.ds-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ds-cap  { font-size: var(--fs-cap); font-weight: 500; color: var(--ds-muted); }

/* ── BUTTONS ── */
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; line-height:1;
  padding:12px 20px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:background .15s,border-color .15s,color .15s; white-space:nowrap; }
.ds-btn:disabled { opacity:.5; cursor:not-allowed; }
.ds-btn-primary { background:var(--brand); color:var(--on-brand); }
.ds-btn-primary:hover:not(:disabled) { background:var(--brand-hover); }
.ds-btn-secondary { background:var(--ds-strong); color:var(--ds-ink); }
.ds-btn-secondary:hover:not(:disabled) { background:var(--ds-hairline); }
.ds-btn-ghost { background:transparent; color:var(--ds-ink); border-color:var(--ds-hairline); }
.ds-btn-ghost:hover:not(:disabled) { border-color:var(--brand); color:var(--brand-text); }
.ds-btn-text { background:transparent; color:var(--brand-text); padding:8px 10px; }
.ds-btn-danger { background:var(--down); color:#fff; }
.ds-btn-danger:hover:not(:disabled) { filter:brightness(.92); }
.ds-btn-lg { padding:16px 28px; font-size:var(--fs-body); }
.ds-btn-sm { padding:8px 14px; font-size:var(--fs-cap); }
.ds-btn-icon { width:40px; height:40px; padding:0; border-radius:var(--r-full);
  background:var(--ds-strong); color:var(--ds-ink); border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.ds-btn-icon:hover { background:var(--ds-hairline); }

/* ── CARD ── */
.ds-card { background:var(--ds-canvas); border:1px solid var(--ds-hairline);
  border-radius:var(--r-xl); overflow:hidden; }
.ds-card:hover { box-shadow:var(--ds-shadow); }
.ds-card-pad { padding:var(--sp-lg); }
.ds-card-head { display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-lg) var(--sp-lg) var(--sp-sm); gap:var(--sp-base); }
.ds-card-title { font-size:var(--fs-title); font-weight:600; color:var(--ds-ink); }
.ds-card-link { font-size:var(--fs-sm); font-weight:600; color:var(--brand-text); }
.ds-band { background:var(--ds-dark); color:#fff; border-radius:var(--r-xl); padding:var(--sp-xl);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-lg); flex-wrap:wrap; }
.ds-band h3 { font-size:26px; font-weight:500; letter-spacing:-.6px; line-height:1.15; }
.ds-band p { font-size:var(--fs-sm); color:#a8acb3; margin-top:8px; }

/* ── INPUTS ── */
.ds-field { display:flex; flex-direction:column; gap:6px; }
.ds-label { font-size:var(--fs-sm); font-weight:600; color:var(--ds-ink); }
.ds-help { font-size:var(--fs-cap); color:var(--ds-muted); }
.ds-input, .ds-select, .ds-textarea {
  font-family:var(--font-sans); font-size:var(--fs-body); color:var(--ds-ink);
  background:var(--ds-canvas); border:1px solid var(--ds-hairline); border-radius:var(--r-md);
  padding:12px 14px; width:100%; transition:border-color .15s,box-shadow .15s; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }
.ds-input::placeholder { color:var(--ds-muted); }
.ds-input:disabled { background:var(--ds-soft); color:var(--ds-muted); cursor:not-allowed; }
.ds-field.is-error .ds-input, .ds-field.is-error .ds-select { border-color:var(--down); }
.ds-error-msg { font-size:var(--fs-cap); color:var(--down); }
.ds-search { display:flex; align-items:center; gap:8px; background:var(--ds-strong);
  border-radius:var(--r-pill); padding:10px 16px; color:var(--ds-muted); font-size:var(--fs-sm); }
.ds-search input { border:none; background:transparent; outline:none; flex:1;
  font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--ds-ink); }

/* ── PILLS / SEGMENTED / TABS ── */
.ds-pillrow { display:flex; gap:6px; flex-wrap:wrap; }
.ds-pill { background:transparent; border:1px solid var(--ds-hairline); color:var(--ds-body);
  font-family:var(--font-sans); font-size:var(--fs-cap); font-weight:600;
  padding:7px 14px; border-radius:var(--r-pill); cursor:pointer; transition:all .15s; }
.ds-pill:hover { border-color:var(--ds-muted); color:var(--ds-ink); }
.ds-pill.active { background:var(--ds-ink); color:var(--ds-canvas); border-color:var(--ds-ink); }
.ds-tabs { display:flex; gap:2px; border-bottom:1px solid var(--ds-hairline); }
.ds-tab { padding:12px 16px; font-size:var(--fs-sm); font-weight:600; color:var(--ds-muted);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:none; border-left:none; border-right:none; }
.ds-tab:hover { color:var(--ds-ink); }
.ds-tab.active { color:var(--brand-text); border-bottom-color:var(--brand); }

/* ── BADGE / CHIP ── */
.ds-badge { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-cap);
  font-weight:600; padding:3px 10px; border-radius:var(--r-pill); background:var(--ds-strong); color:var(--ds-ink); }
.ds-badge-up { background:var(--up-tint); color:var(--up); }
.ds-badge-down { background:var(--down-tint); color:var(--down); }
.ds-badge-brand { background:var(--brand-tint); color:var(--brand-text); }

/* ── DATA: asset row / numbers ── */
.ds-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--ds-hairline); }
.ds-row:last-child { border-bottom:none; }
.ds-row-icon { width:36px; height:36px; border-radius:var(--r-full); background:var(--ds-strong);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ds-row-name { font-size:var(--fs-sm); font-weight:600; color:var(--ds-ink); }
.ds-row-sub { font-size:var(--fs-cap); color:var(--ds-muted); }
.ds-row-val { margin-left:auto; font-family:var(--font-mono); font-weight:600; color:var(--ds-ink); }
.ds-up { color:var(--up); } .ds-down { color:var(--down); }
.ds-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ds-ink); }

/* ── TABLE ── */
.ds-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.ds-table th { text-align:left; font-weight:600; color:var(--ds-muted); font-size:var(--fs-cap);
  padding:10px 12px; border-bottom:1px solid var(--ds-hairline); }
.ds-table td { padding:12px; border-bottom:1px solid var(--ds-hairline); color:var(--ds-ink); }
.ds-table tr:last-child td { border-bottom:none; }
.ds-table .num { font-family:var(--font-mono); text-align:right; }

/* ── STATE: loading / empty / error ── */
.ds-state { display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:40px 20px; color:var(--ds-muted); }
.ds-state-icon { font-size:32px; opacity:.6; }
.ds-state-title { font-size:var(--fs-body); font-weight:600; color:var(--ds-ink); }
.ds-state-sub { font-size:var(--fs-sm); color:var(--ds-muted); }
.ds-spinner { width:28px; height:28px; border-radius:var(--r-full);
  border:3px solid var(--ds-hairline); border-top-color:var(--brand); animation:ds-spin .7s linear infinite; }
@keyframes ds-spin { to { transform:rotate(360deg); } }
.ds-skeleton { background:linear-gradient(90deg,var(--ds-soft),var(--ds-strong),var(--ds-soft));
  background-size:200% 100%; animation:ds-shimmer 1.3s infinite; border-radius:var(--r-sm); }
@keyframes ds-shimmer { to { background-position:-200% 0; } }

/* ── MODAL / DIALOG / BOTTOM-SHEET ── */
.ds-overlay { position:fixed; inset:0; background:rgba(10,11,13,.5); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s; }
.ds-overlay.open { opacity:1; pointer-events:auto; }
.ds-modal { background:var(--ds-canvas); border-radius:var(--r-xl); width:100%; max-width:460px;
  max-height:88vh; overflow:auto; box-shadow:var(--ds-shadow-lg); transform:translateY(8px); transition:transform .18s; }
.ds-overlay.open .ds-modal { transform:none; }
.ds-modal-head { display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-lg); border-bottom:1px solid var(--ds-hairline); }
.ds-modal-title { font-size:var(--fs-title); font-weight:600; color:var(--ds-ink); }
.ds-modal-body { padding:var(--sp-lg); color:var(--ds-body); font-size:var(--fs-sm); line-height:1.5; }
.ds-modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:var(--sp-base) var(--sp-lg) var(--sp-lg); }
.ds-modal-x { background:none; border:none; cursor:pointer; font-size:20px; color:var(--ds-muted); line-height:1; }
@media (max-width:560px) {
  .ds-overlay { align-items:flex-end; padding:0; }
  .ds-modal { max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(100%); }
  .ds-overlay.open .ds-modal { transform:none; }
}

/* ── TOAST ── */
.ds-toast-wrap { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:1100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.ds-toast { display:flex; align-items:center; gap:10px; background:var(--ds-ink); color:var(--ds-canvas);
  font-size:var(--fs-sm); font-weight:500; padding:12px 18px; border-radius:var(--r-pill);
  box-shadow:var(--ds-shadow-lg); animation:ds-toast-in .2s; }
.ds-toast-ok { background:var(--up); color:#fff; }
.ds-toast-err { background:var(--down); color:#fff; }
@keyframes ds-toast-in { from { opacity:0; transform:translateY(8px); } }
/* 상단 중앙 슬라이드다운 변형 (mmToast 기본) */
.ds-toast-wrap.top { top:74px; bottom:auto; }
.ds-toast.top { animation:ds-toast-in-top .22s ease; }
@keyframes ds-toast-in-top { from { opacity:0; transform:translateY(-10px); } }

/* ═══════════════════════════════════════════════════════════════
   NAV / SIDEBAR — 코인베이스 셸 (style.css 레거시 오버라이드, 전역)
   ID·기존 클래스 보존, 색·구조만 코인베이스로.
   ═══════════════════════════════════════════════════════════════ */
.navbar { background:var(--ds-canvas); border-bottom:1px solid var(--ds-hairline);
  box-shadow:none; height:64px; font-family:var(--font-sans); }
.nav-hamburger { color:var(--ds-ink); }
.nav-hamburger:hover { background:var(--ds-soft); }
.logo { color:var(--ds-ink); }
.logo span { color:var(--logo); }   /* "Milestone" = 주황 로고 포인트 */

/* 상단 그룹 드롭다운 (5개라 좁은 데스크탑서도 표시 — 레거시 1400 숨김 무력화) */
.mmnav-groups { align-items:center; }
@media (min-width:861px) { .nav-links.mmnav-groups { display:flex; } }
/* hover 히트영역을 메뉴까지 6px 갭 포함 아래로 확장(margin 상쇄로 레이아웃 불변).
   안 하면 트리거→메뉴 이동 중 갭에서 hover가 풀려 메뉴가 닫힘. */
.mmnav-grp { position:relative; padding-bottom:8px; margin-bottom:-8px; }
.mmnav-link { display:inline-flex; align-items:center; gap:4px; padding:8px 12px;
  border-radius:var(--r-pill); font-family:var(--font-sans); font-size:var(--fs-sm);
  font-weight:500; color:var(--ds-body); background:none; border:none; cursor:pointer;
  white-space:nowrap; text-decoration:none; line-height:1.2; }
.mmnav-link:hover { background:var(--ds-strong); color:var(--ds-ink); }
.mmnav-link.active { color:var(--ds-ink); font-weight:600; }
.mmnav-caret { font-size:10px; opacity:.55; }
.mmnav-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:204px;
  background:var(--ds-canvas); border:1px solid var(--ds-hairline); border-radius:var(--r-lg);
  box-shadow:var(--ds-shadow-lg); padding:6px; display:none; flex-direction:column; z-index:300; }
/* 트리거↔메뉴 6px 갭을 메뉴 폭 전체로 덮는 투명 브릿지 — 대각선 이동에도 hover 유지. */
.mmnav-menu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.mmnav-grp:hover .mmnav-menu, .mmnav-grp:focus-within .mmnav-menu,
.mmnav-grp.mmnav-open .mmnav-menu { display:flex; }
.mmnav-menu a { padding:10px 12px; border-radius:var(--r-md); font-size:var(--fs-sm);
  font-weight:500; color:var(--ds-body); white-space:nowrap; text-decoration:none; }
.mmnav-menu a:hover { background:var(--ds-soft); color:var(--ds-ink); }

/* 검색 pill — 흰 배경서 또렷하게(테두리+포커스 brand) */
.nav-search-box { background:var(--ds-soft); border:1px solid var(--ds-hairline); border-radius:var(--r-pill);
  transition:border-color .15s, box-shadow .15s; }
.nav-search-box:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); background:var(--ds-canvas); }
.nav-search-box input { font-family:var(--font-sans); color:var(--ds-ink); }
.nav-search-box input::placeholder { color:var(--ds-body); }
.nav-search-icon { color:var(--ds-body); display:inline-flex; align-items:center; }
.nav-search-icon .si-ic { width:17px; height:17px; color:var(--ds-body); }
.nav-search-box:focus-within .nav-search-icon .si-ic { color:var(--brand); }

/* 우측 아이콘 */
.nav-icon-btn { background:var(--ds-strong); color:var(--ds-ink); border-radius:var(--r-full);
  width:40px; height:40px; }
.nav-icon-btn:hover { background:var(--ds-hairline); }
.user-greeting { color:var(--ds-ink); }

/* 사이드바 */
.sidebar { background:var(--ds-canvas); border-right:1px solid var(--ds-hairline);
  font-family:var(--font-sans); }
.sidebar-label { color:var(--ds-muted); font-weight:600; letter-spacing:.06em; }
.sidebar-item { color:var(--ds-body); border-radius:var(--r-md); margin:1px 8px; padding:9px 12px;
  display:flex; align-items:center; gap:11px; }
.sidebar-item:hover { background:var(--ds-soft); color:var(--ds-ink); }
.sidebar-item.active { background:var(--brand-tint); color:var(--brand-text); font-weight:600; }
.sidebar-item.active::before { display:none; }
/* 아이콘 — duotone(면+선) brand 톤, 활성=진하게. 회색 아님 = 따뜻 */
.si-ic { width:19px; height:19px; flex-shrink:0; color:var(--brand); opacity:.72; transition:opacity .15s; }
.sidebar-item:hover .si-ic { opacity:.92; }
.sidebar-item.active .si-ic { opacity:1; }