/* 다노뱅크 — Danobank Design System
   Feel: 신뢰감(전통) + 친근함 + 테크핀 프리미엄 그라디언트
*/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Brand — deep indigo → violet gradient (프리미엄 & 신뢰) */
  --dano-ink-900:  #0B0E2A;   /* deepest — headers, primary text on light */
  --dano-ink-800:  #141838;
  --dano-ink-700:  #1E2350;
  --dano-primary:  #3D3AF5;   /* signature indigo-violet */
  --dano-primary-2:#7C5CFF;   /* lighter violet for gradient end */
  --dano-primary-3:#B39BFF;   /* soft accent */

  --dano-grad:     linear-gradient(135deg, #1B1F58 0%, #3D3AF5 55%, #7C5CFF 100%);
  --dano-grad-soft:linear-gradient(135deg, #EEEBFF 0%, #DDD6FF 100%);
  --dano-grad-card:linear-gradient(140deg, #0B0E2A 0%, #2A2D82 55%, #5A48D8 100%);

  /* Accents (같은 chroma/lightness 계열) */
  --dano-mint:     #22C7A6;   /* +금액, 수익, 성공 */
  --dano-coral:    #FF6B6B;   /* -금액, 알림 */
  --dano-amber:    #FFB547;   /* 혜택, 포인트 */

  /* Neutrals — subtly cool white */
  --dano-bg:       #F7F8FC;
  --dano-bg-2:     #EFF1F8;
  --dano-surface:  #FFFFFF;
  --dano-line:     #E7E9F3;
  --dano-line-2:   #F0F2F8;
  --dano-text:     #14162B;
  --dano-text-2:   #4A4E6D;
  --dano-text-3:   #8B8FA8;
  --dano-text-4:   #C0C3D4;

  /* Radii & shadows */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-card: 0 1px 2px rgba(20,22,43,.04), 0 6px 20px rgba(20,22,43,.06);
  --shadow-elev: 0 8px 32px rgba(61,58,245,.18), 0 2px 8px rgba(20,22,43,.06);
  --shadow-hero: 0 20px 50px rgba(43,45,130,.35);

  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-num: 'Space Grotesk', 'Pretendard', system-ui, sans-serif;
}

.dano {
  font-family: var(--font);
  color: var(--dano-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

.dano * { box-sizing: border-box; }

/* Type utilities */
.dano .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dano .h1  { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.dano .h2  { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;}
.dano .h3  { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.dano .body{ font-size: 15px; font-weight: 500; line-height: 1.4; }
.dano .cap { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--dano-text-3); letter-spacing: 0; }
.dano .cap-2{font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--dano-text-2); }

/* Buttons */
.dano .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 52px; padding: 0 20px; border-radius: 14px;
  font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  border: 0; cursor: pointer; transition: transform .1s;
}
.dano .btn:active { transform: scale(0.98); }
.dano .btn-primary { background: var(--dano-grad); color: #fff; box-shadow: var(--shadow-elev); }
.dano .btn-ghost   { background: var(--dano-bg-2); color: var(--dano-text); }
.dano .btn-line    { background: #fff; color: var(--dano-text); border: 1px solid var(--dano-line); }

/* Chip / pill */
.dano .chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--dano-bg-2); color: var(--dano-text-2);
}
.dano .chip.primary { background: rgba(61,58,245,.08); color: var(--dano-primary); }
.dano .chip.mint    { background: rgba(34,199,166,.12); color: #0E9E82; }
.dano .chip.coral   { background: rgba(255,107,107,.12); color: #D94D4D; }
.dano .chip.amber   { background: rgba(255,181,71,.14); color: #B37413; }

/* Card */
.dano .card {
  background: var(--dano-surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* Scrollbar hide inside phones */
.dano ::-webkit-scrollbar { display: none; }
.dano { scrollbar-width: none; }

/* Small dot separators */
.dano .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--dano-text-4); display: inline-block; vertical-align: middle; margin: 0 6px; }

/* Placeholder image (subtle stripes) */
.dano .placeholder-img {
  background:
    repeating-linear-gradient(45deg, rgba(61,58,245,.06) 0 8px, rgba(61,58,245,.02) 8px 16px),
    var(--dano-bg-2);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px;
  color: var(--dano-text-3);
}

/* Reusable icon container */
.dano .icon-tile {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dano-bg-2); color: var(--dano-primary); flex-shrink: 0;
}
.dano .icon-tile.grad { background: var(--dano-grad); color: #fff; }
.dano .icon-tile.mint { background: rgba(34,199,166,.14); color: #0E9E82; }
.dano .icon-tile.coral{ background: rgba(255,107,107,.14); color: #D94D4D; }
.dano .icon-tile.amber{ background: rgba(255,181,71,.18); color: #B37413; }

/* Bottom tab bar */
.dano .tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 84px; padding-bottom: 22px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--dano-line-2);
  display: flex; align-items: center; justify-content: space-around;
  z-index: 40;
}
.dano .tabbar .tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--dano-text-3); font-size: 10px; font-weight: 600;
}
.dano .tabbar .tab.active { color: var(--dano-primary); }

/* Screen safe area shell */
.dano .screen {
  height: 100%; overflow: auto; position: relative;
  padding-top: 54px; /* under status bar */
}

/* Divider */
.dano .divider { height: 1px; background: var(--dano-line-2); }

/* Progress */
.dano .bar { height: 6px; border-radius: 999px; background: var(--dano-bg-2); overflow: hidden; }
.dano .bar > i { display: block; height: 100%; background: var(--dano-grad); border-radius: 999px; }

/* Amount tint */
.dano .amt-in  { color: #0E9E82; }
.dano .amt-out { color: var(--dano-text); }

/* Screen transition (used by live prototype) */
@keyframes screenIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Live prototype: link button */
.link-btn {
  border: 0; background: transparent; padding: 2px 6px;
  border-radius: 6px;
  font-family: inherit; font-size: inherit; font-weight: 700;
  color: var(--dano-text); cursor: pointer;
}
.link-btn:hover { background: rgba(61,58,245,.08); color: var(--dano-primary); }

/* Buttons + data-nav: cursor + subtle affordance */
.dano [data-nav] { cursor: pointer; }
.dano button { cursor: pointer; }