/* =========================================================
   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;
}

/* ---------- 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-card,
.kpi-card * {
  cursor: pointer !important;
}

/* 시각적 피드백(선택/호버) */
.kpi-card {
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
}
.kpi-card:active {
  transform: translateY(0);
}

/* 이미 쓰고 있는 active 스타일 유지/보강 */
.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 */


/* 라디오 버튼 그룹(부트스트랩) */
.btn-group { gap: 0; }
.btn-group .btn { padding: .25rem .6rem; }

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

/* 색상 보조(부트스트랩 대체/강조) */
.bg-success-subtle { background: #e6f4ea; }
.text-success { color: #198754 !important; }

/* 모바일에서 버튼 폭 유연하게 */
@media (max-width: 576px) {
  .btn-group { flex-wrap: wrap; }
  .btn-group .btn { flex: 1 1 auto; }
}


/* 오른쪽 컬럼을 왼쪽 차트 컬럼과 동일 높이로 스트레치 */
.right-stack { display: flex; flex-direction: column; }

/* 초록색 카드 높이 줄이기(비율 조절) */
.strategy-card { flex: 0 0 40%; }   /* 필요 시 200px 같은 고정값으로 바꿔도 됨 */

/* 아래 카드가 나머지 높이를 차지 */
.coin-info-card { flex: 1 1 auto; }

/* 초록색 카드 내부 여백 줄이기(원하면) */
.strategy-card .card-body { padding: 1rem; }

/* 행의 컬럼들이 세로로 늘어나도록 */
.row.align-items-stretch > [class*="col-"] { display: flex; }
.row.align-items-stretch > [class*="col-"] > .card { flex: 1 1 auto; }

.recommend-banner {
  display: inline-block;   /* 내용에 맞게 */
  border-radius: .5rem;
  background: #f8f9fa;
  min-width: 240px;        /* 너무 작아지지 않게 안전한 최소 폭 */
  max-width: 90%;          /* 모바일에서 깨지지 않게 */
}

.recommend-banner .badge {
  font-size: .95rem;
  padding: .35rem .65rem;
}

.recommend-banner pre {
  white-space: pre-wrap;   /* 줄바꿈 허용 */
  font-family: inherit;
}

/* =========================================================
   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; /* 좁은 화면에서 버튼 너비 유연하게 */
  }
}

.kpi-hint {
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* === 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; }
}