/**
 * acm-survey.css — 調査データ描画エンジン用スタイル（データライブラリ 2026-07-30）
 * 記事内チャート（.acm-chart）・引用ボックス（.acm-cite-box）・埋め込みページ共用
 * カラートークンは data-library.css と同系（ターコイズ #00c6cf / #00a4ad）
 */

.acm-chart {
  --acm-primary: #00c6cf;
  --acm-primary-dark: #00a4ad;
  --acm-deep: #00747d;
  --acm-ink: #2d3436;
  --acm-sub: #636e72;
  --acm-border: #dfe6e9;
  --acm-bg-tint: #f0fbfc;
}

/* ---- チャートカード ---- */
.acm-chart {
  background: linear-gradient(160deg, #ffffff 70%, #f4fcfd 100%);
  border: 1px solid var(--acm-border);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 164, 173, .07);
  padding: 22px 24px 16px;
  margin: 1.4em 0 1.8em;
  min-height: 140px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--acm-ink);
}
.acm-chart img { max-width: 100%; height: auto; }

/* サーバー側で数値入りのグラフを描画済みのカードでは、JS無効時に
   <noscript> の代替画像まで出ると二重表示になるので隠す。
   （noscript 自体は残す＝SSRを止めれば従来のフォールバックがそのまま復活する） */
.acm-chart[data-acm-ssr="1"] noscript { display: none; }

.acm-chart__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.acm-chart__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: Consolas, Monaco, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--acm-primary-dark);
}
.acm-chart__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acm-primary);
  box-shadow: 0 0 0 3px rgba(0, 198, 207, .18);
}
.acm-chart__base {
  font-size: 12px;
  font-weight: 700;
  color: #00727a;
  background: #e4f8f9;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.acm-chart__q {
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--acm-ink);
  margin-bottom: 18px;
}

/* ---- 横棒 ---- */
.acm-chart__body--bars { display: flex; flex-direction: column; gap: 10px; }
.acm-bar {
  display: grid;
  grid-template-columns: minmax(150px, 36%) 1fr 64px;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  transition: background .15s;
}
.acm-bar:hover { background: var(--acm-bg-tint); }
.acm-bar__label {
  font-size: 14px;
  color: var(--acm-ink);
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: flex-start;   /* ラベルが複数行に折り返しても「1位」バッジは1行目に揃える */
  gap: 7px;
  line-height: 1.4;
}
.acm-rank {
  flex: none;
  margin-top: 1px;           /* 1行目のテキストと光学的に揃える */
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--acm-deep);
  border-radius: 4px;
  padding: 1.5px 7px;
  letter-spacing: .05em;
}
.acm-bar__track {
  display: block;
  height: 24px;
  background: #edf3f4;
  border-radius: 12px;
  overflow: hidden;
}
.acm-bar__fill {
  display: block;
  position: relative;
  height: 100%;
  width: 0;
  margin-left: var(--l, 0%);          /* 発散型（負の値あり）でゼロ位置から描くためのオフセット */
  border-radius: 12px;
  background: linear-gradient(90deg, #2bd2da, var(--acm-primary-dark));
  transition: width .9s cubic-bezier(.25, .7, .3, 1);
}
.acm-chart.is-in .acm-bar__fill { width: var(--w, 0%); }

/* ---- 発散型（NPSなど 0 を挟んで正負に振れる指標） ----
   ゼロ基準線を引き、正は寒色・負は暖色。極性が読めないと意味が変わる指標なので
   単色グラデーションではなく「反対に読める2色＋中立のゼロ線」にする */
.acm-bar__track--div { position: relative; }
.acm-bar__track--div::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--zero, 50%);
  width: 1px;
  background: #b2bec3;
}
.acm-bar__fill--neg { background: linear-gradient(90deg, #e8845f, #d9663c); }
.acm-bar--top .acm-bar__fill--neg { background: linear-gradient(90deg, #d9663c, #b84a24); }
.acm-chart__zero {
  font-size: 12px;
  color: var(--acm-sub);
  margin-top: 6px;
}
.acm-bar--top .acm-bar__fill { background: linear-gradient(90deg, #00a4ad, var(--acm-deep)); }
.acm-bar--top .acm-bar__label { font-weight: 700; }
.acm-bar--top .acm-bar__value { color: var(--acm-deep); }
.acm-bar__value {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--acm-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 統計タイル（平均・最大・最小・中央値）＋レンジ帯 ----
   メーター（上限に対する比率）ではないので、目盛りやゲージ弧は使わない。
   実測値の広がりを最小〜最大の帯で示し、平均・中央値の位置だけを打つ。 */
.acm-stat { display: block; }
.acm-stat__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.acm-stat__tile {
  flex: 1 1 120px;
  background: var(--acm-bg-tint);
  border: 1px solid #d6eef0;
  border-radius: 10px;
  padding: 12px 14px;
}
.acm-stat__tile--hero {
  flex: 1 1 190px;
  background: linear-gradient(160deg, #e7f9fa, #f7fdfe);
  border-color: #b8e6e9;
}
.acm-stat__label {
  display: block;
  font-size: 13px;
  color: var(--acm-sub);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.acm-stat__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--acm-deep);
  line-height: 1.15;
  /* 大きな単独数値は等幅にしない（間延びして見えるため） */
  font-variant-numeric: proportional-nums;
}
.acm-stat__tile--hero .acm-stat__value { font-size: 36px; }
.acm-stat__unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--acm-sub);
  margin-left: 3px;
}
.acm-range {
  position: relative;
  height: 30px;
  margin: 24px 4px 20px;   /* 上下にラベルを出すぶんの余白 */
}
.acm-range__bar {
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #cdeef0, var(--acm-primary), var(--acm-deep));
}
.acm-range__pin {
  position: absolute;
  top: 4px;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  transform: translateX(-1.5px);
  background: #0b3b40;
  box-shadow: 0 0 0 2px #fff;   /* マークが重なるので背景色のリングで分離する */
}
.acm-range__pin--med { background: #6b7b7d; }
.acm-range__pinlabel {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--acm-ink);
  white-space: nowrap;
}
.acm-range__pin--below .acm-range__pinlabel {
  top: auto;
  bottom: -17px;
  color: var(--acm-sub);
  font-weight: 400;
}
.acm-range__ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--acm-sub);
  margin: 2px 4px 0;
}

/* ---- ドーナツ ---- */
.acm-donut {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.acm-donut__fig {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.acm-donut__svg {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}
/* dasharrayはJSが属性で直接更新（CSS変数経由はChromeのpx換算バグあり）。transitionのみCSSで付与 */
.acm-donut__seg { transition: stroke-dasharray .9s cubic-bezier(.25, .7, .3, 1); }
.acm-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 44px;
}
.acm-donut__center b {
  font-size: 27px;
  font-weight: 700;
  color: var(--acm-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.acm-donut__center span {
  font-size: 11px;
  color: var(--acm-sub);
  line-height: 1.4;
  margin-top: 3px;
}
.acm-donut__legend {
  flex: 1 1 260px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acm-lg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.acm-lg:hover { background: var(--acm-bg-tint); }
.acm-lg--top { background: #f0fbfc; }
.acm-lg--top .acm-lg__label { font-weight: 700; }
.acm-lg--top .acm-lg__value { color: var(--acm-deep); }
.acm-lg__dot {
  flex: none;
  width: 13px; height: 13px;
  border-radius: 4px;
}
.acm-lg__label {
  flex: 1;
  font-size: 14px;
  color: var(--acm-ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.acm-lg__value {
  flex: none;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--acm-ink);
  font-variant-numeric: tabular-nums;
}

.acm-chart__note { margin-top: 12px; font-size: 12px; color: var(--acm-sub); }

/* ---- 出典フッター＋アクション ---- */
.acm-chart__foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--acm-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.acm-chart__src { font-size: 11.5px; color: var(--acm-sub); line-height: 1.6; }
.acm-chart__src a { color: var(--acm-primary-dark); text-decoration: underline; }
/* 埋め込みページ（iframe内）のクレジット。正式な出典リンクは iframe の外側に一本化しているので、
   ここは「どこの調査か」だけを示す控えめな表記にする（2026-08-06） */
.acm-chart__src--credit { font-size: 11px; opacity: .8; }
.acm-chart__actions { display: inline-flex; flex-wrap: wrap; gap: 8px; flex: none; }

.acm-btn {
  appearance: none;
  border: 1.5px solid var(--acm-primary-dark, #00a4ad);
  background: #fff;
  color: var(--acm-primary-dark, #00a4ad);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s, color .15s, box-shadow .15s;
}
.acm-btn:hover { background: #e4f8f9; box-shadow: 0 1px 6px rgba(0, 164, 173, .18); }
.acm-btn--primary { background: var(--acm-primary-dark, #00a4ad); color: #fff; }
.acm-btn--primary:hover { background: #00858d; color: #fff; }

/* ---- 埋め込みコードパネル ---- */
.acm-embed-panel {
  margin-top: 12px;
  background: #f4fbfc;
  border: 1px solid #d3edef;
  border-radius: 10px;
  padding: 14px 16px;
}
.acm-embed-panel__label { font-size: 12px; color: #33565a; margin-bottom: 8px; }
.acm-embed-panel__code {
  width: 100%;
  font-family: Consolas, Monaco, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #2d3436;
  background: #fff;
  border: 1px solid #c6e5e8;
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 9px;
  resize: vertical;
  box-sizing: border-box;
}

/* ---- 引用・転載ボックス ---- */
.acm-cite-box {
  background: linear-gradient(160deg, #f6fcfd 60%, #edfafb 100%);
  border: 1px solid #d3edef;
  border-left: 5px solid #00c6cf;
  border-radius: 12px;
  padding: 20px 22px;
  margin: 1.8em 0;
  font-size: 14.5px;
  color: #2d3436;
}
.acm-cite-box__title { font-weight: 700; font-size: 16.5px; color: #00565e; margin-bottom: 10px; }
.acm-cite-box p { margin: 0 0 14px; }
.acm-cite-box__example {
  background: #fff;
  border: 1px solid #c6e5e8;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.acm-cite-box__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #00858d;
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.acm-cite-box__example code {
  display: block;
  font-size: 12.5px;
  line-height: 1.7;
  color: #2d3436;
  background: none;
  padding: 0;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.acm-cite-box__dl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.acm-cite-box__dl li { margin: 0; padding: 0 0 0 1.15em; position: relative; font-size: 13.5px; }
.acm-cite-box__dl li::before {
  content: "";
  position: absolute; left: 0; top: .4em;
  width: 8px; height: 8px; border-radius: 3px; background: #00c6cf;
}
.acm-cite-box__dl a { color: #00858d; text-decoration: underline; font-weight: 700; }

/* ---- モバイル ---- */
@media (max-width: 600px) {
  .acm-chart { padding: 16px 14px 12px; }
  .acm-chart__q { font-size: 16px; }
  .acm-bar {
    grid-template-columns: 1fr 58px;
    grid-template-areas: "label label" "track value";
    gap: 4px 10px;
    padding: 2px 0;
  }
  .acm-bar__label { grid-area: label; font-size: 13.5px; }
  .acm-bar__track { grid-area: track; height: 20px; border-radius: 10px; }
  .acm-bar__value { grid-area: value; font-size: 14.5px; }
  .acm-donut { gap: 14px; }
  .acm-donut__fig { flex: 0 0 172px; width: 172px; height: 172px; }
  .acm-donut__center b { font-size: 23px; }
  .acm-donut__legend { min-width: 100%; }
  .acm-lg__label { font-size: 13.5px; }
  .acm-lg__value { font-size: 14.5px; }
  .acm-chart__foot { flex-direction: column; align-items: flex-start; }
}

/* ---- 埋め込みページ（page-survey-embed.php） ---- */
body.acm-embed-body {
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.acm-embed-body .acm-chart {
  border: none;
  box-shadow: none;
  background: #fff;
  padding: 6px 4px;
  margin: 0 auto;
  min-height: 0;
  max-width: 960px;
}
body.acm-embed-body .acm-donut__fig { flex: 0 0 160px; width: 160px; height: 160px; }
body.acm-embed-body .acm-donut__center b { font-size: 21px; }