/* ====================================================================
   フィラメント軟化温度チャート - temperature.css
   /wp-content/themes/polymaker/filament-temperature/temperature.css
   に設置してください。
   ==================================================================== */
#pmk-temp-chart{
  --pmk-bg:#F3F5F1;
  --pmk-panel:#FFFFFF;
  --pmk-ink:#1B2321;
  --pmk-ink-soft:#5B6660;
  --pmk-line:#DCE2DC;
  --pmk-line-soft:#f4f8f3;

  --pmk-accent:#45C2C7;
  --pmk-accent-ink:#16474A;
  --pmk-accent-tint-bg:#E6F7F8;
  --pmk-accent-tint-border:#BFE6E8;
  --pmk-accent-warm:#D9622B;

  --pmk-radius:10px;

  --pmk-mat-pla:#4C9A6B;
  --pmk-mat-petg:#2E7BB8;
  --pmk-mat-abs:#C2571F;
  --pmk-mat-asa:#D9622B;
  --pmk-mat-pc:#1E4E8C;
  --pmk-mat-tpu:#8A4FBE;
  --pmk-mat-nylon:#6B6F76;
  --pmk-mat-support:#9AA0A6;
  --pmk-mat-cope:#B08B2E;
  --pmk-mat-pps:#B23A3A;
  --pmk-mat-pvb:#6E8AA6;

  background:var(--pmk-bg);
  color:var(--pmk-ink);
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.6;
  box-sizing:border-box;
  padding-top:20px;
}
#pmk-temp-chart *{box-sizing:border-box;}
#pmk-temp-chart h1,#pmk-temp-chart h2,#pmk-temp-chart h3{font-family:'Space Grotesk','Noto Sans JP',sans-serif;}

#pmk-temp-chart .pmk-tc-intro{padding:0 clamp(20px,4vw,56px) 16px;width:100%;}
#pmk-temp-chart .pmk-tc-intro p{color:var(--pmk-ink-soft);font-size:14.5px;margin:0;}

#pmk-temp-chart .pmk-tc-toolbar{
  padding:0 clamp(20px,4vw,56px) 18px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
#pmk-temp-chart .pmk-tc-chips{display:flex;flex-wrap:wrap;gap:6px;}
#pmk-temp-chart .pmk-tc-chip{
  border:1.5px solid var(--pmk-line);background:#fff;padding:6px 12px;border-radius:999px;
  font-size:12.5px;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px;
  transition:border-color .12s, background .12s, color .12s;
}
#pmk-temp-chart .pmk-tc-chip:hover{border-color:var(--pmk-accent);}
#pmk-temp-chart .pmk-tc-chip.pmk-active{background:var(--pmk-accent);border-color:var(--pmk-accent);color:#fff;}
#pmk-temp-chart .pmk-tc-chip .pmk-swatch{width:8px;height:8px;border-radius:50%;flex:none;}
#pmk-temp-chart .pmk-tc-search{
  padding:9px 14px;border:1.5px solid var(--pmk-line);border-radius:999px;font-size:13px;
  min-width:220px;background:#fff;color:var(--pmk-ink);
}
#pmk-temp-chart .pmk-tc-search:focus{outline:2px solid var(--pmk-accent);outline-offset:1px;}

#pmk-temp-chart .pmk-tc-axis{
  padding:0 clamp(20px,4vw,56px);
  position:relative;height:16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--pmk-ink-soft);
  margin-bottom:6px;
}
#pmk-temp-chart .pmk-tc-axis-track{position:absolute;top:0;height:16px;}
#pmk-temp-chart .pmk-tc-axis-tick{position:absolute;top:0;transform:translateX(-50%);}

#pmk-temp-chart .pmk-tc-chart{padding:0 clamp(20px,4vw,56px) 60px;display:flex;flex-direction:column;gap:6px;}

#pmk-temp-chart .pmk-tc-row{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center;}
#pmk-temp-chart .pmk-tc-label{
  display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#pmk-temp-chart .pmk-tc-label .pmk-swatch{width:9px;height:9px;border-radius:50%;flex:none;}
#pmk-temp-chart .pmk-tc-label a.pmk-tc-name{
  overflow:hidden;text-overflow:ellipsis;color:var(--pmk-ink);text-decoration:none;
}
#pmk-temp-chart .pmk-tc-label a.pmk-tc-name:hover{color:var(--pmk-accent-ink);text-decoration:underline;}
#pmk-temp-chart .pmk-tc-bar-wrap{position:relative;height:22px;background:var(--pmk-line-soft);border-radius:5px;overflow:visible;}
#pmk-temp-chart .pmk-tc-bar{
  position:absolute;left:0;top:0;bottom:0;border-radius:5px;
  background:var(--pmk-accent);
  transition:width .3s ease;
}
#pmk-temp-chart .pmk-tc-value{
  position:absolute;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--pmk-ink-soft);
  white-space:nowrap;padding-left:8px;
}

#pmk-temp-chart .pmk-tc-empty{padding:60px 20px;text-align:center;color:var(--pmk-ink-soft);}

@media (max-width:700px){
  #pmk-temp-chart .pmk-tc-row{grid-template-columns:120px 1fr;}
  #pmk-temp-chart .pmk-tc-label{font-size:11.5px;}
}