/* =========================================================
   DonkeyTrade Market — Cleaned CSS
   - 변수화(색/크기/모션), 중복 제거, 접근성/반응형 개선
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  /* brand / semantic */
  --dt-success: #198754;
  --dt-success-soft: #e6f4ea;
  --dt-danger:  #dc3545;
  --dt-primary: #727cf5;

  /* live pulse color (rgba for shadows/borders) */
  --live-green: #22c55e;
  --live-green-rgb: 34,197,94;

  /* layout */
  --btn-gap-x: .5rem;
  --btn-gap-y: .5rem;
  --coin-badge-fz: 1.15rem;     /* desktop */
  --coin-badge-fz-sm: 1.0rem;   /* mobile */

  /* motion duration */
  --pulse-duration: 1.5s;
}

/* =========================================================
  Avatar (User profile image)
  ========================================================= */
.avatar-24 { width:24px; height:24px; }
.avatar-32 { width:32px; height:32px; }
.avatar-40 { width:40px; height:40px; }
.avatar-48 { width:48px; height:48px; }
.account-user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Motion Keyframes ---------- */
@keyframes livePulse{
  0%   { opacity:.9; transform:scale(.6); }
  100% { opacity:0;  transform:scale(1.8); }
}
@keyframes pulse{
  0%   { transform:scale(.9); box-shadow:0 0 0 0 rgba(40,167,69,.6); }
  70%  { transform:scale(1);  box-shadow:0 0 0 12px rgba(40,167,69,0); }
  100% { transform:scale(.9); box-shadow:0 0 0 0 rgba(40,167,69,0); }
}
@keyframes sweep{
  0%   { left:-30%; }
  100% { left:100%; }
}

/* ---------- Reduced Motion Respect ---------- */
@media (prefers-reduced-motion: reduce){
  .live-dot::after,
  .live-pill .live-dot,
  .anim-accent::before,
  .anim-accent::after{
    animation: none !important;
  }
  .card.widget-flat{ transition: none !important; }
}

/* =========================================================
   Live / Meta
   ========================================================= */
.live-pill { letter-spacing:.3px; }

.live-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--live-green);
  display:inline-block; position:relative;
}
.live-dot::after{
  content:""; position:absolute; inset:-4px;
  border-radius:inherit; border:2px solid var(--live-green);
  animation: livePulse var(--pulse-duration) ease-out infinite;
}

/* 대체 스타일(동그라미 자체에 펄스) — 필요 시 .live-pill .live-dot 사용 */
.live-pill .live-dot{
  width:.55rem; height:.55rem; border-radius:50%;
  background:#28a745;
  display:inline-block;
  box-shadow:0 0 0 0 rgba(40,167,69,.6);
  animation:pulse 1.8s infinite;
}

/* 메타 텍스트 1줄 표시 */
#chart-meta { white-space: nowrap; }

/* =========================================================
   Card hover
   ========================================================= */
.card.widget-flat{
  transition: transform .15s ease, box-shadow .15s ease;
}
.card.widget-flat:hover{
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

/* KPI 카드 선택 상태 */
.kpi-card { cursor: pointer; }
.kpi-card.active{
  outline: 2px solid var(--bs-primary);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
}

/* =========================================================
   Accent / Glow (anim-accent)
   ========================================================= */
/* base */
.anim-accent{
  position:relative;
  overflow:hidden;
  border-radius:.5rem;
  --accent-rgb: 114,124,245; /* default: primary */
}
.anim-accent::after{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit; pointer-events:none;
  box-shadow:0 6px 24px rgba(var(--accent-rgb), .08);
}

/* semantic variants (Bootstrap border-* 클래스와 조합해도 OK) */
.anim-accent.border-success{ --accent-rgb: 25,135,84;  } /* success */
.anim-accent.border-danger { --accent-rgb: 220,53,69;  } /* danger */
.anim-accent.border-primary{ --accent-rgb: 114,124,245;} /* primary */

/* (선택) 상/하단 빛나는 스윕 효과를 쓰고 싶다면 ::before 추가해서 사용
   .anim-accent::before{ ... animation: sweep ... } 등 */

/* =========================================================
   Hero (미니 카드/타이포/버튼)
   ========================================================= */
.hero-mini .hero-mini-title{ font-size:1.05rem; margin-bottom:.25rem; }
.hero-mini .badge{ font-weight:500; }
.hero-mini .fs-5{ font-size:1.1rem!important; }
.hero-mini ul{ margin-bottom:0; }
.hero-mini .progress{ height:6px; }

.hero-title{
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  font-size:clamp(1.6rem, 2.8vw + 0.6rem, 2.6rem);
}
.hero-lead{
  font-size:clamp(1rem, 1.1vw + 0.6rem, 1.25rem);
}

/* 버튼: 모바일 100%, sm 이상 자동 폭 */
.hero-cta .btn{ width:100%; }
@media (min-width:576px){
  .hero-cta .btn{ width:auto; }
}
@media (max-width:575.98px){
  .hero-cta .btn{ font-size:1rem; }
  .hero-mini .badge{ font-size:.85rem; }
}

/* =========================================================
   Chart area
   ========================================================= */
/* 컨테이너 최소 높이: 모바일만 확보 */
.chart-stack { min-height: 0; }
@media (max-width: 991.98px){
  .chart-stack { min-height: 380px; }
}

/* 자식들이 억지로 늘어나지 않게 */
.chart-stack > div { flex: 0 0 auto; }

/* =========================================================
   Header row (코인명/타임프레임/현재가)
   ========================================================= */
.chart-header{
  /* HTML에서 d-flex, justify-content-between, flex-wrap 사용 권장 */
  gap: .5rem 1rem; /* row/column gap */
}

/* 코인명 뱃지 */
.coin-badge{
  font-size: var(--coin-badge-fz);
  padding: .35rem .65rem;
  line-height: 1.1;
}

/* 라디오 버튼을 btn-group으로 구성했을 때 (Bootstrap) */
.btn-group { gap: 0; }
.btn-group .btn { /* 필요 시 사이즈 조정 */
  padding: .25rem .6rem;
}

/* 현재가 뱃지 */
#live-price{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 성공/연두 톤(bootstrap 대체) */
.bg-success-subtle { background: var(--dt-success-soft); }
.text-success { color: var(--dt-success) !important; }

/* 모바일(<=576px): 상하 스택 + 좌우 정렬 최적화 */
@media (max-width: 576px){
  .chart-header{
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .coin-badge{
    font-size: var(--coin-badge-fz-sm);
    padding: .3rem .55rem;
  }
  .btn-group{
    flex-wrap: wrap;
  }
  .btn-group .btn{
    flex: 1 1 auto; /* 좁은 화면에서 버튼 너비 유연하게 */
  }
}


/* === Trade metrics: 더 컴팩트 버전 === */
.trade-metrics{
  /* 이전: clamp(0.95rem, 1.2vw, 1.15rem) */
  font-size: clamp(0.90rem, 0.85vw, 1.05rem);
  row-gap: .35rem;     /* 세로 간격 약간만 */
  column-gap: .5rem;   /* 가로 간격 약간만 */
  margin-bottom: .25rem !important; /* progress bar와 간격 축소 */
}

.metric-badge{
  /* 이전: px-3 py-2 정도 → 전반적 축소 */
  padding: .35rem .6rem !important;
  line-height: 1.1;
  border-radius: 9999px;
}

.metric-value{
  font-weight: 600; /* 700 → 600으로 약간만 약화 */
}

/* 화면이 넓어질 때도 과하게 커지지 않게 소폭만 증가 */
@media (min-width: 992px){
  .trade-metrics{ font-size: 1rem; }
  .metric-badge{ padding: .4rem .75rem !important; }
}

@media (min-width: 1400px){
  .trade-metrics{ font-size: 1.03rem; }  /* 상한 살짝만 */
  .metric-badge{ padding: .45rem .85rem !important; }
}