/* ============================================================
   WAGE UI — 디자인 시스템 레이어
   ------------------------------------------------------------
   portal.css 뒤에 로드되어 셸(헤더/사이드바/카드/패널)을 재정의한다.
   portal.css 를 직접 수정하지 않는 이유: 48KB 에 전 페이지가 의존하고
   있어 회귀 위험이 크다. 여기서 표면만 덮어쓴다.
   ============================================================ */

:root {
  /* 중립 스케일 — 파랑 기운을 살짝 섞어 브랜드와 붙게 */
  --w-bg:          #F5F7FB;
  --w-surface:     #FFFFFF;
  --w-border:      #E6EAF2;
  --w-border-soft: #EFF2F7;

  --w-ink:         #0B1524;
  --w-ink-2:       #3C4A63;
  --w-ink-3:       #6B7890;
  --w-ink-4:       #9AA5B8;

  /* 액센트 — 단일 계열로 통일 (무지개 금지) */
  --w-brand:       #2563EB;
  --w-brand-600:   #1D4ED8;
  --w-brand-700:   #1E40AF;
  --w-brand-soft:  #EEF3FF;
  --w-cyan:        #06B6D4;

  /* 의미색은 증감/상태에만 */
  --w-up:          #059669;
  --w-down:        #DC2626;
  --w-warn:        #D97706;

  --w-ink-dark:    #0A1220;

  --w-r-sm: 10px;
  --w-r:    14px;
  --w-r-lg: 18px;
  --w-r-xl: 24px;

  --w-sh-1: 0 1px 2px rgba(12, 22, 40, .04);
  --w-sh-2: 0 1px 3px rgba(12, 22, 40, .06), 0 8px 24px -12px rgba(12, 22, 40, .10);
  --w-sh-3: 0 2px 6px rgba(12, 22, 40, .07), 0 24px 48px -24px rgba(12, 22, 40, .22);

  --w-t: 180ms cubic-bezier(.4, 0, .2, 1);
}

body {
  background: var(--w-bg);
  color: var(--w-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 마이크로 라벨 (대문자 트래킹) ───────────────────────── */
.w-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--w-ink-4);
}

/* ── 헤더 ────────────────────────────────────────────────── */
header.topbar {
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
  box-shadow: none;
  height: 64px;
  padding: 0 24px;
}
header.topbar .brand {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--w-ink);
  gap: 10px;
}
header.topbar .brand .logo-dot {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--w-brand) 0%, var(--w-cyan) 100%);
  color: #fff;
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .5);
}

/* topbar 우측 액션 정렬 */
header.topbar { display: flex; align-items: center; gap: 10px; }
header.topbar .brand { margin-right: auto; }

/* 다크모드 토글 — 기존엔 스타일 없는 생 텍스트("DARK")로 노출됐다 */
.theme-toggle {
  height: 34px; padding: 0 12px;
  border: 1px solid var(--w-border);
  border-radius: 999px;
  background: var(--w-surface);
  color: var(--w-ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  cursor: pointer;
  transition: border-color var(--w-t), color var(--w-t);
}
.theme-toggle:hover { border-color: var(--w-ink-4); color: var(--w-ink-2); }

.notif-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--w-border);
  border-radius: 999px;
  background: var(--w-surface);
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.notif-btn:hover { border-color: var(--w-ink-4); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--w-down); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--w-surface);
}

/* ── 지갑 연결 버튼 ──────────────────────────────────────── */
.w-wallet-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 0; border-radius: 999px;
  background: var(--w-ink-dark);
  color: #fff;
  font-size: 13px; font-weight: 650;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(10, 18, 32, .7);
  transition: transform var(--w-t), box-shadow var(--w-t);
}
.w-wallet-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(10, 18, 32, .8); }
.w-wallet-btn.is-on { background: var(--w-surface); color: var(--w-ink); border: 1px solid var(--w-border); box-shadow: var(--w-sh-1); }
.w-wallet-btn .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--w-up);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .16);
}
.w-wallet-btn .dot.warn { background: var(--w-warn); box-shadow: 0 0 0 3px rgba(217, 119, 6, .18); }
.w-wallet-btn em {
  font-style: normal; font-size: 11px; font-weight: 650;
  color: var(--w-ink-4);
  padding-left: 8px; margin-left: 2px;
  border-left: 1px solid var(--w-border);
}
@media (max-width: 760px) {
  .w-wallet-btn em { display: none; }
  .w-wallet-btn { padding: 0 12px; font-size: 12px; }
}

/* 마퀴 — 기존 주황→빨강 그라디언트가 브랜드와 충돌해서 교체 */
.marquee-bar,
.notice-marquee {
  background: var(--w-brand-soft) !important;
  color: var(--w-brand-700) !important;
  border-bottom: 1px solid #DBE5FA;
  font-size: 12.5px;
  font-weight: 600;
}

/* ── 레이아웃 ────────────────────────────────────────────── */
.portal {
  gap: 22px;
  padding: 22px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: start;
}
.portal-main { min-width: 0; }

/* ── 사이드바 ────────────────────────────────────────────── */
.portal-side {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--w-r-lg);
  box-shadow: var(--w-sh-2);
  padding: 8px;
  position: sticky;
  top: 22px;
  overflow: hidden;
}
.portal-side .user-card {
  padding: 18px 14px 16px;
  border-bottom: 1px solid var(--w-border-soft);
  margin-bottom: 8px;
}
.portal-side .user-card .name {
  font-size: 15.5px; font-weight: 750; color: var(--w-ink); letter-spacing: -.01em;
}
.portal-side .user-card .meta {
  font-size: 12.5px; color: var(--w-ink-4); margin-top: 2px;
}
.portal-nav { padding: 0 4px 8px; }
.portal-nav .nav-group {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--w-ink-4);
  padding: 16px 10px 6px;
}
.portal-nav .nav-link,
.portal-nav .collapse-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: var(--w-r-sm);
  font-size: 13.5px; font-weight: 550;
  color: var(--w-ink-2);
  transition: background var(--w-t), color var(--w-t);
}
.portal-nav .nav-link:hover,
.portal-nav .collapse-item:hover {
  background: var(--w-brand-soft);
  color: var(--w-brand-700);
}
/* 활성 = 진한 pill (레퍼런스의 검정 pill 대응) */
.portal-nav .nav-link.active {
  background: var(--w-ink-dark);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 6px 16px -8px rgba(10, 18, 32, .6);
}
.portal-nav .nav-link.active .nav-ico { color: #fff; opacity: 1; }
.portal-nav .collapse-item.active {
  background: var(--w-brand-soft);
  color: var(--w-brand-700);
  font-weight: 650;
}
.nav-ico {
  width: 18px; height: 18px; flex: 0 0 18px;
  color: var(--w-ink-3);
  opacity: .85;
}
.portal-nav .grp-toggle { justify-content: flex-start; }
.portal-nav .grp-label { flex: 1; }
.portal-nav .grp-caret {
  font-size: 10px; color: var(--w-ink-4);
  transition: transform var(--w-t);
}
.nav-item-grp.open > .grp-toggle .grp-caret { transform: rotate(180deg); }
.portal-nav .grp-children { padding-left: 29px; }
.portal-nav .grp-children li a { font-size: 13px; padding: 7px 11px; }

/* ── 카드 · 패널 ─────────────────────────────────────────── */
.panel {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--w-r-lg);
  box-shadow: var(--w-sh-2);
  overflow: hidden;
}
.panel-head {
  padding: 17px 20px;
  border-bottom: 1px solid var(--w-border-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-head h2 {
  font-size: 14.5px; font-weight: 700; color: var(--w-ink);
  letter-spacing: -.01em; margin: 0;
}
.panel-body { padding: 18px 20px; }
.panel-body.no-pad { padding: 0; }

/* ── 히어로 (대시보드 상단) ──────────────────────────────── */
.w-hero {
  position: relative;
  border-radius: var(--w-r-xl);
  padding: 30px 34px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 88% 8%, rgba(6, 182, 212, .34) 0%, transparent 55%),
    radial-gradient(100% 140% at 8% 100%, rgba(37, 99, 235, .42) 0%, transparent 58%),
    linear-gradient(135deg, #0F1D36 0%, #0A1220 100%);
  box-shadow: var(--w-sh-3);
  isolation: isolate;
}
/* 은은한 그리드 패턴 — 평면적인 느낌 제거 */
.w-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 78% 12%, #000 0%, transparent 68%);
  z-index: -1;
}
.w-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.w-hero-greet { font-size: 14px; color: rgba(255,255,255,.72); font-weight: 500; }
.w-hero-greet b { color: #fff; font-weight: 700; }
.w-hero-rank {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 650; color: #fff;
}
.w-hero-figure { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.w-hero-main .w-label { color: rgba(255,255,255,.58); }
.w-hero-val {
  font-size: 44px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.w-hero-val .cur {
  font-size: 20px; font-weight: 700;
  color: rgba(255,255,255,.62); margin-left: 8px;
}
.w-hero-sub { display: flex; gap: 34px; padding-bottom: 5px; }
.w-hero-sub .k { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.52); font-weight: 700; }
.w-hero-sub .v { font-size: 19px; font-weight: 750; margin-top: 5px; font-variant-numeric: tabular-nums; }

/* 히어로 내 캡 게이지 */
.w-hero-cap { margin-top: 26px; }
.w-hero-cap .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; margin-bottom: 8px;
}
.w-hero-cap .row .k { color: rgba(255,255,255,.62); font-weight: 600; }
.w-hero-cap .row .v { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.w-hero-cap .bar {
  height: 7px; border-radius: 99px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.w-hero-cap .bar > i {
  display: block; height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #38BDF8, #2563EB);
  box-shadow: 0 0 14px rgba(56, 189, 248, .6);
  transition: width .7s cubic-bezier(.16, 1, .3, 1);
}

/* ── 통계 타일 ───────────────────────────────────────────── */
.w-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 1280px) { .w-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .w-tiles { grid-template-columns: repeat(2, 1fr); } }

.w-tile {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--w-r);
  padding: 16px 17px;
  box-shadow: var(--w-sh-1);
  transition: transform var(--w-t), box-shadow var(--w-t), border-color var(--w-t);
}
.w-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--w-sh-2);
  border-color: #D8E0EE;
}
.w-tile .k {
  font-size: 11.5px; font-weight: 650;
  color: var(--w-ink-3);
  display: flex; align-items: center; gap: 7px;
}
.w-tile .k::before {
  content: '';
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--w-brand);
  opacity: .85;
}
.w-tile.is-muted .k::before { background: var(--w-ink-4); }
.w-tile .v {
  font-size: 22px; font-weight: 780;
  color: var(--w-ink);
  letter-spacing: -.025em;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}
.w-tile .v small { font-size: 12.5px; font-weight: 650; color: var(--w-ink-4); margin-left: 4px; }

/* 섹션 제목 */
.w-sec {
  display: flex; align-items: baseline; gap: 12px;
  margin: 30px 0 14px;
}
.w-sec h3 {
  font-size: 15px; font-weight: 750; color: var(--w-ink);
  letter-spacing: -.01em; margin: 0;
}
.w-sec .hint { font-size: 12.5px; color: var(--w-ink-4); }

/* ── 공지 리스트 ─────────────────────────────────────────── */
.w-notice {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--w-border-soft);
  font-size: 13.5px; color: var(--w-ink-2);
  transition: background var(--w-t);
}
.w-notice:last-child { border-bottom: 0; }
.w-notice:hover { background: #FAFBFE; }
.w-notice .t { display: flex; align-items: center; gap: 9px; min-width: 0; }
.w-notice .t span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.w-pin {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 750;
  padding: 3px 7px; border-radius: 5px;
  background: var(--w-brand-soft); color: var(--w-brand-700);
  letter-spacing: .04em;
}
.w-notice .d { flex: 0 0 auto; font-size: 11.5px; color: var(--w-ink-4); font-variant-numeric: tabular-nums; }

.w-empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--w-ink-4);
  font-size: 13px;
}

/* ── 하단 2단 ────────────────────────────────────────────── */
.w-bot {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1100px) { .w-bot { grid-template-columns: 1fr; } }

/* ── 공통: 페이지 제목 ───────────────────────────────────── */
.portal-main .page-title,
.portal-main .page-title-row h1 {
  font-size: 21px; font-weight: 780;
  letter-spacing: -.025em; color: var(--w-ink);
}

/* ── 공통: 표 ────────────────────────────────────────────── */
.portal-main .tbl-wrap,
.portal-main .tbl-scroll {
  border-radius: var(--w-r-lg);
  border: 1px solid var(--w-border);
  background: var(--w-surface);
  box-shadow: var(--w-sh-2);
  overflow: hidden;
}
.portal-main .tbl-scroll { overflow-x: auto; }

.portal-main table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.portal-main table thead th {
  padding: 13px 14px;
  background: #FAFBFE;
  border-bottom: 1px solid var(--w-border);
  font-size: 11px; font-weight: 750; letter-spacing: .06em;
  color: var(--w-ink-3);
  white-space: nowrap; text-align: left;
}
.portal-main table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--w-border-soft);
  color: var(--w-ink-2);
  font-variant-numeric: tabular-nums;
}
.portal-main table tbody tr:last-child td { border-bottom: 0; }
.portal-main table tbody tr { transition: background 150ms; }
.portal-main table tbody tr:hover { background: #FAFBFE; }

/* ── 공통: 폼 · 버튼 ─────────────────────────────────────── */
.portal-main input:not([type="radio"]):not([type="checkbox"]),
.portal-main select,
.portal-main textarea {
  border: 1px solid var(--w-border);
  border-radius: var(--w-r-sm);
  background: var(--w-surface);
  color: var(--w-ink);
  font-size: 13.5px;
  transition: border-color var(--w-t), box-shadow var(--w-t);
}
.portal-main input:not([type="radio"]):not([type="checkbox"]):focus,
.portal-main select:focus,
.portal-main textarea:focus {
  outline: 0;
  border-color: var(--w-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

.portal-main .btn {
  height: 38px; padding: 0 15px;
  border-radius: var(--w-r-sm);
  border: 1px solid var(--w-border);
  background: var(--w-surface);
  color: var(--w-ink-2);
  font-size: 13.5px; font-weight: 650;
  transition: all var(--w-t);
}
.portal-main .btn:hover { border-color: var(--w-ink-4); color: var(--w-ink); }
.portal-main .btn.b-primary,
.portal-main .btn-primary {
  background: var(--w-brand); border-color: var(--w-brand); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .8);
}
.portal-main .btn.b-primary:hover,
.portal-main .btn-primary:hover { background: var(--w-brand-600); border-color: var(--w-brand-600); }
.portal-main .btn.b-ghost { background: transparent; border-color: transparent; color: var(--w-ink-3); }
.portal-main .btn.b-ghost:hover { background: var(--w-brand-soft); color: var(--w-brand-700); border-color: transparent; }
.portal-main .btn.b-sm { height: 31px; padding: 0 11px; font-size: 12.5px; }

/* 배지 */
.portal-main .badge,
.portal-main .rank-badge,
.portal-main .tag {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 7px;
  font-size: 11.5px; font-weight: 650;
}

/* 빈 상태 */
.portal-main .empty { color: var(--w-ink-4); font-size: 13px; padding: 44px 20px; text-align: center; }

@media (max-width: 760px) {
  .portal { padding: 14px; gap: 14px; }
  .w-hero { padding: 24px 20px; border-radius: var(--w-r-lg); }
  .w-hero-val { font-size: 34px; }
  .w-hero-sub { gap: 22px; }
}