/* ===============================================
   KUIF Brand Design Tokens v0.2 — 银行正式版
   方向：韩国传统大银行风（참고: 신한 / 우리 / 국민）
   建立：2026-05-24 凌晨 (主人 piaojian 拍板转向)
   废弃：v0.1 黑金现代카드风
   =============================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
  --kuif-navy: #1a3a8f;
  --kuif-navy-dark: #0f2461;
  --kuif-navy-light: #2c4ea8;
  --kuif-gold: #c9a961;
  --kuif-gold-bright: #f4b942;
  --kuif-red: #d93f3f;

  --kuif-bg: #ffffff;
  --kuif-bg-soft: #f8f9fb;
  --kuif-bg-gray: #f0f2f5;
  --kuif-bg-card: #ffffff;

  --kuif-text-primary: #1a1a1a;
  --kuif-text-secondary: #555555;
  --kuif-text-muted: #888888;
  --kuif-text-link: #1a3a8f;
  --kuif-text-inverse: #ffffff;
  --kuif-text-gold: #c9a961;

  --kuif-line: #e5e7eb;
  --kuif-line-strong: #d1d5db;

  --kuif-radius-card: 8px;
  --kuif-radius-btn: 4px;

  --kuif-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05);
  --kuif-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --kuif-shadow-hover: 0 8px 24px rgba(26, 58, 143, 0.12);

  --kuif-font: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --kuif-fs-hero: 36px;
  --kuif-fs-h1: 28px;
  --kuif-fs-h2: 22px;
  --kuif-fs-h3: 18px;
  --kuif-fs-body: 15px;
  --kuif-fs-small: 13px;
  --kuif-fs-micro: 12px;

  --kuif-space-xs: 8px;
  --kuif-space-sm: 12px;
  --kuif-space-md: 20px;
  --kuif-space-lg: 32px;
  --kuif-space-xl: 56px;
  --kuif-space-section: 120px;

  --kuif-container: 1200px;
}

* { box-sizing: border-box; }
body { font-family: var(--kuif-font); font-size: var(--kuif-fs-body); line-height: 1.6; color: var(--kuif-text-primary); background: var(--kuif-bg); margin: 0; }

/* 双层 Header */
.kuif-utility-nav { background: var(--kuif-navy); color: var(--kuif-text-inverse); font-size: var(--kuif-fs-micro); padding: 8px 0; }
.kuif-utility-nav .inner { max-width: var(--kuif-container); margin: 0 auto; padding: 0 var(--kuif-space-md); display: flex; justify-content: space-between; align-items: center; }
.kuif-utility-nav a { color: var(--kuif-text-inverse); text-decoration: none; margin-left: var(--kuif-space-md); opacity: 0.85; }
.kuif-utility-nav a:hover { opacity: 1; color: var(--kuif-gold); }

.kuif-main-nav { background: var(--kuif-bg); border-bottom: 1px solid var(--kuif-line); box-shadow: var(--kuif-shadow-soft); }
.kuif-main-nav .inner { max-width: var(--kuif-container); margin: 0 auto; padding: var(--kuif-space-md); display: flex; justify-content: space-between; align-items: center; }
.kuif-logo { font-size: 24px; font-weight: 900; color: var(--kuif-navy); letter-spacing: -0.02em; }
.kuif-logo .sub { font-size: 11px; font-weight: 500; color: var(--kuif-text-muted); margin-left: 8px; letter-spacing: 0.05em; }
.kuif-main-nav ul { display: flex; gap: var(--kuif-space-lg); list-style: none; margin: 0; padding: 0; }
.kuif-main-nav ul a { color: var(--kuif-text-primary); text-decoration: none; font-weight: 700; font-size: var(--kuif-fs-body); padding: 8px 0; border-bottom: 3px solid transparent; transition: all 0.2s; }
.kuif-main-nav ul a:hover { color: var(--kuif-navy); border-bottom-color: var(--kuif-gold); }

/* 按钮 */
.kuif-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; background: var(--kuif-navy); color: var(--kuif-text-inverse); font-family: var(--kuif-font); font-weight: 700; font-size: var(--kuif-fs-body); text-decoration: none; border: none; border-radius: var(--kuif-radius-btn); cursor: pointer; transition: all 0.2s; }
.kuif-btn-primary:hover { background: var(--kuif-navy-dark); transform: translateY(-1px); box-shadow: var(--kuif-shadow-hover); }

.kuif-btn-gold { background: var(--kuif-gold); color: var(--kuif-navy); font-weight: 700; }
.kuif-btn-gold:hover { background: var(--kuif-gold-bright); }

.kuif-btn-outline { background: transparent; color: var(--kuif-navy); border: 1px solid var(--kuif-navy); }
.kuif-btn-outline:hover { background: var(--kuif-navy); color: var(--kuif-text-inverse); }

/* 卡片 */
.kuif-card { background: var(--kuif-bg-card); border: 1px solid var(--kuif-line); border-radius: var(--kuif-radius-card); padding: var(--kuif-space-lg); transition: all 0.2s; }
.kuif-card:hover { border-color: var(--kuif-navy); box-shadow: var(--kuif-shadow-card); }

/* 容器 */
.kuif-container { max-width: var(--kuif-container); margin: 0 auto; padding: 0 var(--kuif-space-md); }
.kuif-section { padding: var(--kuif-space-section) 0; }
.kuif-section-gray { background: var(--kuif-bg-soft); }

.kuif-section-title { font-size: var(--kuif-fs-h1); font-weight: 900; color: var(--kuif-text-primary); text-align: center; margin-bottom: var(--kuif-space-md); }
.kuif-section-title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--kuif-gold); margin: var(--kuif-space-sm) auto 0; }
.kuif-section-sub { text-align: center; color: var(--kuif-text-secondary); font-size: var(--kuif-fs-body); max-width: 640px; margin: 0 auto var(--kuif-space-xl); }

.kuif-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kuif-space-md); }
.kuif-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kuif-space-md); }
.kuif-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kuif-space-lg); }

@media (max-width: 768px) {
  .kuif-grid-4, .kuif-grid-3, .kuif-grid-2 { grid-template-columns: 1fr; }
}