/* AITC 금융 대시보드 테마 — 기존 라우트·데이터·권한 기능을 유지합니다. */
:root {
  --f-bg: #f7f8fa;
  --f-surface: #ffffff;
  --f-soft: #f2f4f6;
  --f-hover: #f5f7f9;
  --f-text: #191f28;
  --f-secondary: #4e5968;
  --f-muted: #8b95a1;
  --f-border: #edf0f3;
  --f-blue: #3182f6;
  --f-blue-soft: #eaf3ff;
  --f-chrome: #eaf3ff;
  --f-chrome-active: #d2e6ff;
  --f-chrome-hover: #dfedff;
  --f-chrome-border: #dce9fa;
  --brand-primary: #3182f6 !important;
  --color-primary: #3182f6 !important;
  --brand-primary-50: #f1f7ff !important;
  --brand-primary-100: #e8f3ff !important;
  --brand-primary-200: #c9e2ff !important;
  --brand-primary-300: #90c2ff !important;
  --brand-primary-400: #64a8ff !important;
  --brand-primary-500: #3182f6 !important;
  --brand-primary-600: #2272eb !important;
  --brand-primary-700: #1b64da !important;
  --brand-primary-800: #1957bd !important;
  --brand-primary-900: #194a96 !important;
  --brand-primary-950: #122d57 !important;
  --color-bg-light: #f7f8fa !important;
  --color-text-light: #191f28 !important;
}
html.dark {
  --f-bg: #17191d;
  --f-surface: #202329;
  --f-soft: #2a2e35;
  --f-hover: #292d34;
  --f-text: #f2f4f6;
  --f-secondary: #b0b8c1;
  --f-muted: #8b95a1;
  --f-border: #30353d;
  --f-blue: #6ba9ff;
  --f-blue-soft: #253852;
  --f-chrome: #1d2c40;
  --f-chrome-active: #2f4d72;
  --f-chrome-hover: #263c57;
  --f-chrome-border: #2b3e58;
  --color-bg-dark: #17191d !important;
  --color-text-dark: #f2f4f6 !important;
}
body {
  color: var(--f-text);
  background: var(--f-bg);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.02em;
}
::selection { background: #c9e2ff; color: #191f28; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { transition: background-color .16s ease, color .16s ease, box-shadow .16s ease; }
button:focus-visible, a:focus-visible { outline: 3px solid #90c2ff; outline-offset: 3px; }
#root main { background: var(--f-bg) !important; background-image: none !important; }
#root main h1, #root main h2 { letter-spacing: -.035em; }
#root .preset-card {
  background: var(--f-surface) !important;
  border: 1px solid var(--f-border);
  border-radius: 20px;
  box-shadow: none !important;
}
#root main .shadow-sm, #root main .shadow-md, #root main .shadow-lg {
  box-shadow: none;
}
#root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#root textarea, #root select {
  background: var(--f-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--f-text);
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
#root input:not([type="checkbox"]):not([type="radio"]):focus,
#root textarea:focus, #root select:focus {
  border-color: var(--f-blue);
  background: var(--f-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-blue) 12%, transparent);
  outline: none;
}
#root input::placeholder, #root textarea::placeholder { color: var(--f-muted); }
#root table { border-collapse: separate; border-spacing: 0; font-size: 14px; }
#root th { background: var(--f-soft); color: var(--f-muted); font-weight: 500; }
#root td, #root th { padding: 16px; border-color: var(--f-border); }
#root tbody tr:hover { background: var(--f-hover); }

/* 공통 메뉴와 계정 헤더 */
#sidebar {
  background: var(--f-chrome) !important;
  border-right: 1px solid var(--f-chrome-border) !important;
  box-shadow: none !important;
}
#sidebar > div > div:first-child {
  height: 86px;
  padding: 22px 24px;
  border-bottom: 0;
}
#sidebar a[aria-label="홈페이지로 이동"] { min-height: 40px; }
#sidebar a[aria-label="홈페이지로 이동"] img { max-width: 130px; height: auto; max-height: 40px; }
#sidebar-close { width: 28px; height: 28px; border-radius: 8px; color: var(--f-muted); }
#sidebar-close:hover { background: var(--f-soft); }
.finance-sidebar-nav { padding: 8px 14px 20px; }
.finance-sidebar-nav::before {
  content: "내 활동";
  display: block;
  padding: 4px 16px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--f-muted);
}
#sidebar nav a, #sidebar nav button {
  min-height: 48px;
  margin: 3px 0;
  padding: 14px 16px;
  border-radius: 12px;
  gap: 12px;
  color: var(--f-secondary);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none !important;
}
#sidebar nav a i, #sidebar nav button i { width: 20px; text-align: center; font-size: 15px; color: var(--f-muted); }
#sidebar nav a:hover, #sidebar nav button:hover { background: var(--f-chrome-hover); color: var(--f-text); }
#sidebar nav a.bg-primary-500, #sidebar nav button.bg-primary-500 {
  background: var(--f-chrome-active) !important;
  color: var(--f-blue) !important;
  font-weight: 700;
}
#sidebar nav a.bg-primary-500 i, #sidebar nav button.bg-primary-500 i { color: var(--f-blue); }
#sidebar nav .border-b { border-color: transparent; margin-top: 4px; margin-bottom: 4px; }
#sidebar .border-t { border-color: var(--f-chrome-border); }
.finance-app-header {
  background: var(--f-chrome) !important;
  border-color: var(--f-chrome-border);
  backdrop-filter: none;
}
.finance-app-header > div:first-child { margin-left: 24px; }
.finance-app-header > div:last-child { padding-right: 18px; }
.finance-app-header button { border-radius: 10px; }
.finance-app-header .text-primary-600, .finance-app-header .text-primary-500 { color: var(--f-secondary); }
.finance-mobile-nav { background: var(--f-surface) !important; border-color: var(--f-border); box-shadow: none !important; }
.finance-mobile-nav [class*="-top-4"] {
  top: 2px;
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.finance-mobile-nav [class*="-top-4"] i { color: var(--f-muted) !important; font-size: 20px; }
.finance-mobile-nav a[aria-current="page"] [class*="-top-4"] i { color: var(--f-blue) !important; }

/* 대시보드: 배너 대신 명확한 제목과 작은 행동 링크 */
.finance-dashboard { padding-top: 42px; }
.finance-dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 30px;
}
.finance-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--f-muted); margin: 0 0 10px; letter-spacing: .015em; }
.finance-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--f-blue); }
.finance-dashboard-heading h1, .finance-page-heading h1 { font-size: 30px; font-weight: 750; line-height: 1.35; color: var(--f-text); margin: 0; }
.finance-heading-description { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--f-muted); }
.finance-heading-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: 12px; color: var(--f-secondary); font-size: 13px; font-weight: 600; }
.finance-heading-link:hover { background: var(--f-blue-soft); color: var(--f-blue); }
.finance-heading-link i { font-size: 11px; }
.dashboard-summary { gap: 16px; align-items: stretch; }
.finance-summary-card, #root .finance-rank-card {
  min-height: 302px;
  background: var(--f-surface) !important;
  border: 1px solid var(--f-border);
  border-radius: 22px;
  box-shadow: none !important;
}
.finance-summary-card .text-white { color: var(--f-text); }
.finance-summary-card [class*="text-white/"] { color: var(--f-muted); }
.finance-summary-card [class*="border-white/"] { border-color: var(--f-border); }
.finance-summary-card [class*="divide-white/"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--f-border); }
.finance-summary-card > div > div:first-child { padding: 24px 22px 20px; border-bottom: 0; }
.finance-summary-card .dashboard-summary-title { font-size: 16px; font-weight: 700; color: var(--f-secondary); }
.finance-summary-card .bg-amber-400 { background: var(--f-blue-soft); color: var(--f-blue); box-shadow: none; border-radius: 8px; padding: 5px 9px; }
.finance-summary-card .bg-amber-400 span { font-size: 12px; font-weight: 650; }
.dashboard-metric { padding: 16px 22px 20px; }
.dashboard-metric > p:first-child { color: var(--f-muted); font-size: 11px; font-weight: 500; }
.dashboard-metric i { color: var(--f-muted); font-size: 10px; }
.dashboard-metric-value { font-weight: 700; letter-spacing: -.045em; line-height: 1.15; }
.finance-total-bonus { padding: 15px 18px !important; margin: 0 16px 16px; border-radius: 12px; background: var(--f-blue-soft); }
.finance-total-bonus .dashboard-metric-value { color: var(--f-blue); }
.finance-total-bonus > p:first-child, .finance-total-bonus i { color: var(--f-blue); }
.finance-summary-card .bg-white\/15 { background: var(--f-soft); }
.finance-summary-card .h-2\.5 { height: 6px; }
.finance-summary-card .bg-amber-400.h-full { background: var(--f-blue); padding: 0; }
.finance-rank-card > div { padding: 24px; }
.finance-rank-card .bg-gradient-to-br { background: var(--f-blue-soft) !important; box-shadow: none !important; }
.finance-rank-card .text-white { color: var(--f-blue); }
.finance-rank-card .text-amber-600, .finance-rank-card .text-amber-500, .finance-rank-card .text-orange-600 { color: var(--f-blue); }
.finance-rank-card .fa-crown { color: var(--f-blue); }
.finance-rank-card .shadow-lg { box-shadow: none; }
.finance-summary-dots .carousel-dot { background: var(--f-border); }
.finance-summary-dots .carousel-dot.active { background: var(--f-blue); }
#service-shortcuts { padding: 10px 16px !important; }
#service-shortcuts a, #service-shortcuts button { border-radius: 12px; }
#service-shortcuts .rounded-full { border-radius: 14px; box-shadow: none; }
.finance-referral-card { display: flex; align-items: center; gap: 20px; padding: 18px 22px !important; }
.finance-referral-card > label { flex-shrink: 0; margin: 0; font-size: 12px; color: var(--f-muted); }
.finance-referral-card > div { flex: 1; padding: 0 !important; background: transparent !important; }
.finance-referral-card button { width: 32px; height: 32px; background: var(--f-soft); color: var(--f-secondary); }
.finance-referral-card button:hover { background: var(--f-blue-soft); color: var(--f-blue); }
.finance-bonus-total { background: var(--f-blue-soft); color: var(--f-blue); padding: 10px 14px; border-radius: 10px; }
.finance-bonus-total span { color: var(--f-blue); }
.finance-dashboard > .grid > .preset-card { border-radius: 20px; }
.finance-dashboard h2 { font-size: 21px; color: var(--f-text); }

/* 지갑: 자산 합계와 읽기 쉬운 목록 */
.finance-wallet { padding-top: 36px; }
.finance-page-heading { margin-bottom: 28px; }
.finance-wallet-total { padding: 26px 28px !important; margin-bottom: 24px; }
.finance-wallet-total > div:first-child { flex-direction: column; align-items: flex-start; gap: 10px; }
.finance-wallet-total > div:first-child > div:first-child { font-size: 14px; color: var(--f-secondary); }
.finance-wallet-total > div:first-child > div:last-child { text-align: left; max-width: 100%; }
.finance-wallet-total .text-2xl { font-size: 36px; line-height: 1.3; letter-spacing: -.04em; font-weight: 700; }
.finance-wallet-tabs { width: fit-content; max-width: 100%; padding: 5px; background: var(--f-soft) !important; border: 0 !important; gap: 4px; border-radius: 12px !important; margin-bottom: 22px; }
.finance-wallet-tabs button { min-width: 82px; padding: 10px 16px; border-radius: 9px; font-size: 13px; white-space: nowrap; }
.finance-wallet-tabs button > span:first-child { display: none; }
.finance-wallet-tabs button.bg-gray-100 { background: var(--f-surface); color: var(--f-text); box-shadow: 0 1px 4px #191f280a; }
.finance-wallet .coin-name { color: var(--f-text); font-size: 15px; font-weight: 600; }
.finance-wallet .coin-symbol { margin-top: 3px; color: var(--f-muted); font-size: 12px; }
.finance-wallet .coin-amount { color: var(--f-text); font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.finance-wallet .coin-value { margin-top: 3px; color: var(--f-muted); font-size: 12px; }
.finance-wallet .coin-image { width: 38px; height: 38px; }
.finance-wallet .cursor-pointer { padding: 20px 24px; }
.finance-wallet .cursor-pointer:hover { background: var(--f-hover); }
.finance-wallet .fa-chevron-right { color: var(--f-muted); font-size: 10px; }
.finance-wallet .border-b { border-color: var(--f-border); }

/* 로그인에도 같은 색상과 입력 스타일 */
.finance-login { background: var(--f-bg) !important; background-image: none !important; }
.finance-login form {
  padding: 32px;
  border: 1px solid var(--f-border) !important;
  border-radius: 24px !important;
  background: var(--f-surface) !important;
  box-shadow: 0 12px 40px #191f2805 !important;
  backdrop-filter: none;
}
.finance-login form > [class*="blur-3xl"] { display: none; }
.finance-login input:not([type="checkbox"]) { padding: 15px !important; font-size: 15px; }
.finance-login form button[type="submit"] { padding: 15px; border-radius: 12px; background: #3182f6 !important; box-shadow: none; }
.finance-login form button[type="submit"]:hover { background: #1b64da !important; }
.finance-login h2 { font-size: 29px; letter-spacing: -.04em; }

@media (min-width: 1024px) {
  .dashboard-summary > [data-summary-kind="metrics"] { flex-basis: calc((100% - 304px) / 2); }
}
@media (min-width: 1440px) {
  .finance-summary-dots { display: none; }
}
@media (max-width: 767px) {
  .finance-dashboard, .finance-wallet { padding-top: 24px; }
  .finance-dashboard-heading { display: block; margin-bottom: 22px; }
  .finance-dashboard-heading h1, .finance-page-heading h1 { font-size: 25px; }
  .finance-heading-description { font-size: 12px; margin-top: 8px; }
  .finance-heading-link { margin-top: 16px; padding: 9px 12px; font-size: 12px; }
  .finance-app-header > div:first-child { margin-left: 0; }
  .finance-app-header > div:last-child { padding-right: 2px; }
  .finance-summary-card, #root .finance-rank-card { min-height: 286px; }
  .finance-summary-card > div > div:first-child { padding: 20px 18px 16px; }
  .dashboard-metric { padding: 16px; }
  .finance-referral-card { display: block; padding: 18px !important; }
  .finance-referral-card > label { margin-bottom: 12px; }
  .finance-referral-card > div > span { font-size: 12px; }
  .finance-wallet-total { padding: 24px !important; }
  .finance-wallet-total .text-2xl { font-size: 30px; }
  .finance-wallet-tabs { width: 100%; }
  .finance-wallet-tabs button { min-width: 0; padding: 10px 12px; }
  .finance-wallet .cursor-pointer { padding: 18px; }
  .finance-wallet .coin-amount { font-size: 15px; }
  .finance-login form { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
#root .finance-wallet-tabs { background: var(--f-soft) !important; }
/* 자주 쓰는 메뉴는 넓은 빈 공간 대신 한 줄 액션으로 표시합니다. */
#service-shortcuts { display: flex; align-items: center; gap: 24px; }
#service-shortcuts::before { content: "빠른 메뉴"; flex-shrink: 0; padding-left: 6px; font-size: 12px; font-weight: 600; color: var(--f-muted); }
#service-shortcuts > div { flex: 1; min-width: 0; }
#service-shortcuts > div > div { justify-content: flex-start; gap: 10px; }
#service-shortcuts a, #service-shortcuts button { flex-direction: row; gap: 10px; min-height: 54px; padding: 8px 14px; }
#service-shortcuts a > span:last-child, #service-shortcuts button > span:last-child { font-size: 13px; font-weight: 600; }
#service-shortcuts .rounded-full { width: 36px; height: 36px; border-radius: 11px; }
@media (max-width: 767px) {
  #service-shortcuts { gap: 12px; padding: 10px 12px !important; }
  #service-shortcuts::before { font-size: 11px; }
  #service-shortcuts a, #service-shortcuts button { gap: 7px; padding: 6px 9px; }
  #service-shortcuts a > span:last-child, #service-shortcuts button > span:last-child { font-size: 12px; }
}