/* 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}
}
/* 2026-11-02 手機橫放（高度不到 520px）：圖改用剩下的高度，不然 X 軸日期跟圖例要捲動才看得到 */
@media (max-height:520px){
  .pt-modal{padding:8px}
  .pt-box{max-height:calc(100vh - 16px);padding:12px 16px 10px}
  .pt-head h3{font-size:18px}
  .pt-select{margin:8px 0 6px;padding:6px 10px}
  .pt-chart,.pt-locked{height:calc(100vh - 140px);min-height:170px}
}
/* 2026-11-02 PM：英文版品名、「Price prediction for next week」很長又設了 nowrap，表格比版面寬，右邊被截掉要橫向捲動。
   電腦版讓品名和最後一欄表頭可以換行，表格就放得下；手機版維持原本可橫向捲動。 */
@media (min-width:769px){
  .tb02 tbody td:first-child,.tb02 thead th:last-child{white-space:normal}
}