/* style.css */
.exchange-box {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Pretendard', sans-serif;
  }
  
  .exchange-header {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .exchange-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  .exchange-header .timestamp {
    color: #666;
    font-size: 0.8rem;
  }
  
  #refresh-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #666;
  }
  
  /* Swiper 컨테이너 */
  .swiper-container.exchange-swiper {
    width: 100%;
    overflow: hidden;
    height: calc(4 * 72px); /* 한 슬라이드 약 72px 높이 가정 */
  }
  
  /* 개별 슬라이드 */
  .swiper-slide.exchange-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
  }
  
  .swiper-slide.exchange-item:first-child {
    border-top: none;
  }
  
  /* 왼쪽: 국기 + 통화명/코드 */
  .exchange-item .left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .exchange-item .left img {
    display: block;
    width: 24px;
    height: auto;
  }
  
  .exchange-item .currency-name {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
    color: #333;
  }
  
  .exchange-item .currency-name strong {
    font-weight: 500;
  }
  
  .exchange-item .currency-name small {
    font-size: 0.8rem;
    color: #999;
    margin-top: 2px;
  }
  
  /* 오른쪽: 환율 + 등락 */
  .exchange-item .right {
    text-align: right;
    line-height: 1.2;
  }
  
  .exchange-item .right .rate {
    font-size: 1.2rem;
    font-weight: 600;
    color: #e85656; /* 기본 상승 색 */
  }
  
  .exchange-item .right .change {
    font-size: 0.85rem;
    margin-top: 2px;
  }
  
  .exchange-item.up .right .rate,
  .exchange-item.up .right .change {
    color: #e85656;
  }
  
  .exchange-item.down .right .rate,
  .exchange-item.down .right .change {
    color: #338d3e;
  }
  
  .exchange-item.neutral .right .rate,
  .exchange-item.neutral .right .change {
    color: #666;
  }
  
  /* Swiper 네비 버튼 */
  .swiper-button-next,
  .swiper-button-prev {
    color: #888;
  }