/* common.css
 * チャート(Highcharts) と .chart-remarks のタイポグラフィを統一するための共通CSS
 * 置き場所: db_center/css/common.css
 */

:root{
  --common-font-sans: 
  "BIZ UDゴシック",
  "BIZ UDGothic",
  system-ui,
  -apple-system,
  Segoe UI,
  Roboto,
  "Helvetica Neue",
  Arial,"Noto Sans JP",
  "Hiragino Kaku Gothic ProN",
  "Yu Gothic",Meiryo,sans-serif;

  /* 注釈 */
  --chart-remarks-size-pc: 16px;
  --chart-remarks-sub-size-pc:   16px;
  --chart-remarks-size-sp: 13px;
  --chart-remarks-sub-size-sp:   13px;

  /* チャートタイトル */
  --hc-base-size-pc: 12px;
  --hc-title-size-pc: 22px;
  --hc-title-weight-pc: 700;
  --hc-title-size-sp: 14px;
  --hc-title-weight-sp: 700;
  
  /* 軸ラベル・凡例・データラベル・吹き出し（tooltip） */
  --hc-axis-title-size-pc:18px;
  --hc-axis-title-weight-pc:600;
  --hc-label-size-pc: 16px;
  --hc-label-weight-pc: 600;
  --hc-label-size-sp: 11px;
  --hc-label-weight-sp: 600;

  /* 年選択 */
  --hc-base-select-size-pc: 12px;
  --hc-select-size-pc: 16px;
  --hc-select-weight-pc: 600;
  --hc-select-size-sp: 14px;
  --hc-select-weight-sp: 600;  
}

/* =========================
   表とグラフの間の見出し（chart-remarks）
   ========================= */
.chart-remarks{
  font-family: var(--common-font-sans) !important;
  font-size: var(--chart-remarks-size-pc) !important;
  text-align: right !important;
}

.chart-remarks .t1, .chart-remarks .t2
{
  font-family: var(--common-font-sans) !important;
  font-size: var(--chart-remarks-sub-size-pc) !important;
  text-align: left !important;
}

@media (max-width:760px){
  .chart-remarks{
    font-size: var(--chart-remarks-size-sp) !important;
  }
  .chart-remarks .t1, .chart-remarks .t2
  {
    font-size: var(--chart-remarks-sub-size-sp) !important;
  }
}

/* =========================
   チャート周り（見出しなど）
   ========================= */
.chart-card{
  container-type: inline-size;
}
.chart-title{
  font-family: var(--common-font-sans) !important;
  font-size: clamp(14px, 6cqw, var(--hc-title-size-pc)) !important;
  font-weight: var(--hc-title-weight-pc) !important;
  line-height: 1.2!important;
  text-align: center !important;
}
@media (max-width:760px){
  .chart-title{ font-size: var(--hc-title-size-sp) !important; }
}

/* =========================
   Highcharts（SVGテキスト系）
   ========================= */
.highcharts-container,
.highcharts-root,
.highcharts-root text,
.highcharts-label text,
.highcharts-data-label text,
.highcharts-legend-item text,
.highcharts-axis-labels text,
.highcharts-axis-title,
.highcharts-axis-title tspan{
  font-family: var(--common-font-sans) !important;
}

/* タイトル */
.highcharts-title,
.highcharts-title tspan{
  font-size: clamp(14px, 2.2vw, var(--hc-title-size-pc)) !important;
  font-family: var(--common-font-sans) !important;
}

/* 軸ラベル・凡例・データラベル等 */
.highcharts-yaxis-title,.highcharts-axis-title{
  font-family: var(--common-font-sans) !important;
  font-size: var(--hc-axis-title-size-pc) !important;
  font-weight: var(--hc-axis-title-weight-pc) !important;
}

.highcharts-axis-labels text,
.highcharts-legend-item text,
.highcharts-data-label text{
  font-size: var(--hc-label-size-pc) !important;
  font-weight: var(--hc-label-weight-pc) !important;
}

/* ツールチップ（HTML/SVG両方想定） */
.highcharts-tooltip text,
.highcharts-tooltip span,
.hc-tip,
.hc-tip > span{
  font-family: var(--common-font-sans) !important;
  font-size: var(--hc-label-size-pc) !important;
  font-weight: var(--hc-label-weight-pc) !important;
}

@media (max-width:760px){
  .highcharts-title,
  .highcharts-title tspan{
    font-size: var(--hc-title-size-sp) !important;
  }
  .highcharts-axis-labels text,
  .highcharts-legend-item text,
  .highcharts-data-label text,
  .highcharts-tooltip text,
  .highcharts-tooltip span,
  .hc-tip,
  .hc-tip > span{
    font-size: var(--hc-label-size-sp) !important;
    font-weight: var(--hc-label-weight-sp) !important;
  }
}

/* =========================================================
   グラフ内の範囲UI（中央）
   ---------------------------------------------------------
   - db_export/css/disp_q.css と db_export/css/disp_v.css にも同様の記述あり
   - 変更時は両方修正すること
   ========================================================= */
.chart-overlay select{ 
    font-size:var(--hc-select-size-pc) !important; 
}
@media (max-width:760px){
  .chart-overlay select{ 
      font-size:var(--hc-select-size-sp) !important; 
  }
}