/* 2026-10-27 現貨價格「歷史趨勢」按鈕與走勢圖視窗（views/spot_price.twig） */
.tb02 caption .btn-trend{float:right;margin-top:4px}
.btn-trend{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border:2px solid #000;background:#fff;color:#000;font-size:15px;line-height:1.4;cursor:pointer;transition:background-color .2s,color .2s}
.btn-trend:hover,.btn-trend:focus-visible{background:#000;color:#fff}
.btn-trend svg{width:16px;height:16px;flex:none}

.pt-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55)}
.pt-modal.is-open{display:flex}
.pt-box,.pt-select{box-sizing:border-box}
.pt-box{position:relative;width:100%;min-width:0;max-width:880px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-top:4px solid #ffca00;padding:24px 28px 20px}
.pt-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-right:36px}
.pt-head h3{margin:0;font-size:22px;font-weight:bold}
.pt-head small{color:#777;font-size:14px}
.pt-close{position:absolute;top:14px;right:16px;width:32px;height:32px;border:0;background:none;font-size:26px;line-height:32px;color:#333;cursor:pointer}
.pt-close:hover{color:#000}
.pt-select{display:block;width:100%;max-width:100%;text-overflow:ellipsis;margin:16px 0 12px;padding:8px 10px;border:1px solid #ccc;background:#fff;font-size:15px}
.pt-chart{position:relative;height:360px}
.pt-locked{display:none;align-items:center;justify-content:center;height:360px;background:#f7f7f7;color:#555;text-align:center;font-size:16px}
.pt-locked a{color:#000;text-decoration:none}
.pt-box.is-locked .pt-chart{display:none}
.pt-box.is-locked .pt-locked{display:flex}
@media (max-width:767px){
  .tb02 caption .btn-trend{float:none;display:flex;width:max-content;margin:8px 0 0}
  .pt-box{padding:20px 16px 16px}
  .pt-head h3{font-size:19px}
  .pt-chart,.pt-locked{height:280px}
}