[x-cloak] { display: none !important; }

html, body { -webkit-font-smoothing: antialiased; }

/* iPhone 12 Pro Max viewport in mobile, framed device in desktop */
@media (max-width: 767px) {
  .device { min-height: 100vh; min-height: 100dvh; }
}

.pb-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }

.input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #D5DAE1;
  color: #0F172A;
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #94A3B8; }
.input:hover { border-color: #C2C8D1; }
.input:focus {
  border-color: #C99400;
  box-shadow: 0 0 0 3px rgba(201,148,0,0.15);
  background: #FFFFFF;
}

.btn-primary {
  background: linear-gradient(180deg, #F8D33A 0%, #F0B90B 100%);
  color: #0B0E11;
  font-weight: 700;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  transition: transform .1s, box-shadow .15s, opacity .15s;
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(240,185,11,0.35); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:focus-visible { outline: 2px solid #F0B90B; outline-offset: 2px; }

/* 거래 아이템 등장 애니메이션 */
.tx-item {
  animation: txIn .25s ease-out both;
}
@keyframes txIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 도넛 세그먼트 */
.donut-seg {
  transition: stroke-dasharray .8s cubic-bezier(.65,0,.35,1);
}

/* 막대 그래프 등장 */
.bar-fill {
  animation: barIn .8s cubic-bezier(.65,0,.35,1) both;
}
@keyframes barIn {
  from { width: 0; height: 0; }
}

/* 스크롤바 (데스크탑 프리뷰) */
.device ::-webkit-scrollbar { width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
  .tx-item, .donut-seg, .bar-fill { animation: none !important; transition: none !important; }
}

/* Focus visible */
button:focus-visible, a:focus-visible {
  outline: 2px solid #F0B90B;
  outline-offset: 2px;
  border-radius: 0.5rem;
}