/* 移植ページ → 「データで見る公務員面接」第1弾への CTA（HTML は components/dataCta.ts）。
   自治体別の志望動機ページ（区分の CTA）と、志望動機まわりの記事3本（地元以外・県ではなく市・書き方ガイド）で共有。
   frontmatter dataCta のあるページだけで読み込む（app/(legacy)/[...slug]/page.tsx）。
   枠は、リンクが1本なら <a class="ay-dcta">（枠全体がリンク）、2本なら <div class="ay-dcta ay-dcta--duo">（ボタンがリンク）。
   見た目はデータページ（/mensetsu-data/douki/）の濃いカードに合わせる: 濃い地・大きな数字・
   コーラル（面接の色）とティール（ダーク地では明色 #5ed6c9）の差し色・CTA はコーラル→オレンジ。
   色は site/03 §3.4 のブランドカラー（globals.css の --color-hub-* と同値。移植ページは globals.css 非読込）。
   本文 CSS（legacy-content.css）の a / p / div 既定に負けないよう [data-legacy-content] で詳細度を上げる。 */

/* 外側の余白は padding で取る（本文のブロックレイアウト CSS が子要素の margin を 0 に上書きするため）。
   上の間隔は直前の VK スペーサーが持つので、下だけ空ける。 */
[data-legacy-content] .ay-dcta-wrap {
  padding: 0 0 40px;
}

[data-legacy-content] a.ay-dcta,
[data-legacy-content] a.ay-dcta:hover,
[data-legacy-content] a.ay-dcta:visited,
[data-legacy-content] div.ay-dcta {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 26px 28px 24px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(248, 112, 96, 0.22) 0%, rgba(248, 112, 96, 0) 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(94, 214, 201, 0.16) 0%, rgba(94, 214, 201, 0) 60%),
    #060b10;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(6, 11, 16, 0.28);
  opacity: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-legacy-content] a.ay-dcta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(6, 11, 16, 0.36);
}
[data-legacy-content] a.ay-dcta:focus-visible {
  outline: 3px solid #5ed6c9;
  outline-offset: 3px;
}

[data-legacy-content] .ay-dcta__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
[data-legacy-content] .ay-dcta__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f87060;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
[data-legacy-content] .ay-dcta__series {
  color: #5ed6c9;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

[data-legacy-content] .ay-dcta__title {
  margin-top: 14px;
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
}
[data-legacy-content] .ay-dcta__big {
  margin: 0 2px 0 6px;
  color: #f87060;
  font-size: 48px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

[data-legacy-content] .ay-dcta__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
[data-legacy-content] .ay-dcta__tile {
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-legacy-content] .ay-dcta__tile-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
[data-legacy-content] .ay-dcta__tile-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 8px;
  margin-top: 6px;
}
[data-legacy-content] .ay-dcta__word {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
[data-legacy-content] .ay-dcta__pct {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
[data-legacy-content] .ay-dcta__unit {
  margin-left: 1px;
  font-size: 20px;
}
[data-legacy-content] .ay-dcta__tile--coral .ay-dcta__pct { color: #f87060; }
[data-legacy-content] .ay-dcta__tile--teal .ay-dcta__pct { color: #5ed6c9; }
[data-legacy-content] .ay-dcta__bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
[data-legacy-content] .ay-dcta__bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
[data-legacy-content] .ay-dcta__tile--coral .ay-dcta__bar > span {
  background: linear-gradient(90deg, #f87060, #ff7a14);
}
[data-legacy-content] .ay-dcta__tile--teal .ay-dcta__bar > span {
  background: #5ed6c9;
}
[data-legacy-content] .ay-dcta__tile-note {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

[data-legacy-content] .ay-dcta__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
[data-legacy-content] .ay-dcta__chips-label {
  margin-right: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 700;
}
[data-legacy-content] .ay-dcta__chip {
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(94, 214, 201, 0.55);
  color: #5ed6c9;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

[data-legacy-content] .ay-dcta__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 20px;
}
[data-legacy-content] .ay-dcta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f87060, #ff7a14);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 6px 18px rgba(255, 122, 20, 0.35);
}
/* 2本リンクの枠（ay-dcta--duo）では、ボタンそのものが <a>。 */
[data-legacy-content] a.ay-dcta__btn,
[data-legacy-content] a.ay-dcta__btn:hover,
[data-legacy-content] a.ay-dcta__btn:visited {
  color: #fff;
  text-decoration: none;
  opacity: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-legacy-content] a.ay-dcta__btn:hover {
  transform: translateY(-2px);
}
[data-legacy-content] a.ay-dcta__btn:focus-visible {
  outline: 3px solid #5ed6c9;
  outline-offset: 3px;
}
[data-legacy-content] .ay-dcta__btn--teal,
[data-legacy-content] a.ay-dcta__btn--teal:hover,
[data-legacy-content] a.ay-dcta__btn--teal:visited {
  background: #2cb2a7;
  box-shadow: 0 6px 18px rgba(44, 178, 167, 0.35);
}
[data-legacy-content] .ay-dcta__btn-text {
  min-width: 0;
}
[data-legacy-content] .ay-dcta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
[data-legacy-content] .ay-dcta__foot--duo {
  flex-direction: column;
  align-items: flex-start;
}
[data-legacy-content] .ay-dcta__foot--duo .ay-dcta__src {
  flex: none;
}
[data-legacy-content] .ay-dcta__arrow {
  font-size: 20px;
  transition: transform 0.15s ease;
}
[data-legacy-content] a.ay-dcta:hover .ay-dcta__arrow,
[data-legacy-content] a.ay-dcta__btn:hover .ay-dcta__arrow {
  transform: translateX(4px);
}
[data-legacy-content] .ay-dcta__src {
  flex: 1 1 220px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.5;
}
[data-legacy-content] .ay-dcta__nowrap {
  white-space: nowrap;
}

/* ---- 記事の CTA の部品（components/dataCta.ts の renderJimotoCta / renderKenShiCta） ---- */

[data-legacy-content] .ay-dcta__ph {
  display: inline-block;
}
[data-legacy-content] .ay-dcta__lead {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.7;
}

/* 地元以外: 「地元」に触れた／触れていないの100%帯 */
[data-legacy-content] .ay-dcta__split {
  display: flex;
  height: 14px;
  margin-top: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
[data-legacy-content] .ay-dcta__split > span { display: block; height: 100%; }
[data-legacy-content] .ay-dcta__split-in { background: #5ed6c9; }
[data-legacy-content] .ay-dcta__split-out { background: linear-gradient(90deg, #f87060, #ff7a14); }
[data-legacy-content] .ay-dcta__split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
[data-legacy-content] .ay-dcta__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 999px;
  vertical-align: 0;
}
[data-legacy-content] .ay-dcta__dot--in { background: #5ed6c9; }
[data-legacy-content] .ay-dcta__dot--out { background: #f87060; }

/* 地元以外: 志望先ごとの割合（横棒） */
[data-legacy-content] .ay-dcta__rows-label {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
[data-legacy-content] .ay-dcta__rows {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
[data-legacy-content] .ay-dcta__row {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) 3.2em;
  align-items: center;
  gap: 12px;
}
[data-legacy-content] .ay-dcta__row-label {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
[data-legacy-content] .ay-dcta__row-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
[data-legacy-content] .ay-dcta__row-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #5ed6c9;
}
[data-legacy-content] .ay-dcta__row-pct {
  color: #5ed6c9;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
[data-legacy-content] .ay-dcta__row-pct .ay-dcta__unit { font-size: 14px; }
[data-legacy-content] .ay-dcta__row--all .ay-dcta__row-label,
[data-legacy-content] .ay-dcta__row--all .ay-dcta__row-pct { color: rgba(255, 255, 255, 0.6); }
[data-legacy-content] .ay-dcta__row--all .ay-dcta__row-bar > span { background: rgba(255, 255, 255, 0.4); }

/* 県ではなく市: テーマごとに 都道府県庁／一般市町村 の2本の棒 */
[data-legacy-content] .ay-dcta__pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
[data-legacy-content] .ay-dcta__pair {
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-legacy-content] .ay-dcta__pair-label {
  margin-bottom: 8px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
[data-legacy-content] .ay-dcta__pair-row {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr) 3.2em;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
[data-legacy-content] .ay-dcta__pair-name {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
[data-legacy-content] .ay-dcta__pair-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
[data-legacy-content] .ay-dcta__pair-bar > span { display: block; height: 100%; border-radius: 999px; }
[data-legacy-content] .ay-dcta__pair-row--pref .ay-dcta__pair-bar > span { background: #5ed6c9; }
[data-legacy-content] .ay-dcta__pair-row--city .ay-dcta__pair-bar > span { background: linear-gradient(90deg, #f87060, #ff7a14); }
[data-legacy-content] .ay-dcta__pair-pct {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
[data-legacy-content] .ay-dcta__pair-pct .ay-dcta__unit { font-size: 14px; }
[data-legacy-content] .ay-dcta__pair-row--pref .ay-dcta__pair-pct { color: #5ed6c9; }
[data-legacy-content] .ay-dcta__pair-row--city .ay-dcta__pair-pct { color: #f87060; }

[data-legacy-content] .ay-dcta__words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
[data-legacy-content] .ay-dcta__words-col--city .ay-dcta__chip {
  border-color: rgba(248, 112, 96, 0.6);
  color: #f87060;
}

/* スマホ幅: タイルは縦に積み、1枚を「言葉＋割合」の横並びにして高さを抑える。ボタンは全幅。 */
@media (max-width: 599px) {
  [data-legacy-content] a.ay-dcta,
  [data-legacy-content] a.ay-dcta:hover,
  [data-legacy-content] a.ay-dcta:visited,
  [data-legacy-content] div.ay-dcta {
    padding: 20px 16px 18px;
    border-radius: 14px;
  }
  [data-legacy-content] .ay-dcta__title {
    font-size: 18px;
  }
  [data-legacy-content] .ay-dcta__big {
    font-size: 40px;
  }
  [data-legacy-content] .ay-dcta__tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  [data-legacy-content] .ay-dcta__tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
  }
  [data-legacy-content] .ay-dcta__tile-label { grid-column: 1; grid-row: 1; }
  [data-legacy-content] .ay-dcta__tile-main { display: contents; }
  [data-legacy-content] .ay-dcta__word { grid-column: 1; grid-row: 2; font-size: 19px; }
  [data-legacy-content] .ay-dcta__pct { grid-column: 2; grid-row: 1 / span 3; font-size: 36px; }
  [data-legacy-content] .ay-dcta__bar { display: none; }
  [data-legacy-content] .ay-dcta__tile-note { grid-column: 1; grid-row: 3; margin-top: 2px; }
  [data-legacy-content] .ay-dcta__btn {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  [data-legacy-content] .ay-dcta__btns { width: 100%; }
  [data-legacy-content] .ay-dcta__btns .ay-dcta__btn { padding: 14px 18px; text-align: center; }
  [data-legacy-content] .ay-dcta__foot--duo { align-items: stretch; }
  [data-legacy-content] .ay-dcta__lead { font-size: 15px; }
  [data-legacy-content] .ay-dcta__row { grid-template-columns: 6em minmax(0, 1fr) 3em; gap: 10px; }
  [data-legacy-content] .ay-dcta__row-label { font-size: 15px; }
  [data-legacy-content] .ay-dcta__pairs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  [data-legacy-content] .ay-dcta__pair { padding: 12px; }
  [data-legacy-content] .ay-dcta__pair-label { font-size: 17px; }
  [data-legacy-content] .ay-dcta__words { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  [data-legacy-content] a.ay-dcta,
  /* 2本リンクの枠（ay-dcta--duo）では、ボタンそのものが <a>。 */
[data-legacy-content] a.ay-dcta__btn,
[data-legacy-content] a.ay-dcta__btn:hover,
[data-legacy-content] a.ay-dcta__btn:visited {
  color: #fff;
  text-decoration: none;
  opacity: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-legacy-content] a.ay-dcta__btn:hover {
  transform: translateY(-2px);
}
[data-legacy-content] a.ay-dcta__btn:focus-visible {
  outline: 3px solid #5ed6c9;
  outline-offset: 3px;
}
[data-legacy-content] .ay-dcta__btn--teal,
[data-legacy-content] a.ay-dcta__btn--teal:hover,
[data-legacy-content] a.ay-dcta__btn--teal:visited {
  background: #2cb2a7;
  box-shadow: 0 6px 18px rgba(44, 178, 167, 0.35);
}
[data-legacy-content] .ay-dcta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
[data-legacy-content] .ay-dcta__foot--duo {
  flex-direction: column;
  align-items: flex-start;
}
[data-legacy-content] .ay-dcta__foot--duo .ay-dcta__src {
  flex: none;
}
[data-legacy-content] .ay-dcta__arrow {
    transition: none;
  }
  [data-legacy-content] a.ay-dcta:hover { transform: none; }
}