/* 人物紹介（#modal の中身：.modal-hero .pd-* .pf-* .download-menu）。どこでも出る人物の一行（.person-meta）も。 */
.source-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}
.source-fields h3 {
  margin-bottom: var(--space-2);
}
.source-fields p {
  font-size: var(--fs-note);
}
.modal-hero h2 {
  font-size: var(--fs-head);
}
.ai-scenario {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: var(--surface-quiet);
}
.ai-scenario h3 {
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}
.ai-scenario h3 small {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 400;
  color: var(--text-muted);
}
.ai-scenario p {
  font-size: var(--fs-note);
  line-height: 1.7;
  margin: var(--space-2) 0;
}
.ai-scenario p:last-child {
  margin-top: var(--space-3);
}
.pd-sec {
  border-top: 1px solid var(--line);
  padding: var(--space-4) 0 var(--space-2);
}
.pd-sec > h3 {
  font-size: var(--fs-lead);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.pd-b > summary {
  font-size: var(--fs-lead);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  cursor: pointer;
  padding: var(--space-3) 0;
}
.pd-b > summary::after {
  content: '開く';
  margin-left: var(--space-3);
  font-size: var(--type-note);
  font-weight: 400;
  color: var(--fill-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pd-b[open] > summary::after {
  content: '閉じる';
}
.pd-b[open] > summary {
  margin-bottom: var(--space-2);
}
.pd-sec h4 {
  font-size: var(--type-body);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-1);
}
.pd-sec h5 {
  font-size: var(--type-note);
  font-weight: 600;
  margin: var(--space-3) 0 0.125rem;
}
.pd-lead {
  font-size: var(--type-note);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.pd-item {
  margin: var(--space-2) 0;
  line-height: 1.8;
}
.pd-item b {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--text-muted);
}
.pd-text {
  margin: var(--space-2) 0;
  line-height: 1.8;
}
.pd-status {
  font-size: var(--fs-tag);
  color: var(--text-muted);
  margin: 0.125rem 0 var(--space-2);
}
.pd-q {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-soft);
}
.pd-q p {
  margin: var(--space-2) 0 0;
  line-height: 1.7;
}
.pd-q > p:first-of-type {
  font-weight: 600;
}
.pd-more {
  margin: var(--space-4) 0 var(--space-2);
}
.pd-more > summary {
  cursor: pointer;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: var(--type-note);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pd-sub {
  font-size: var(--type-note);
  color: var(--text-muted);
  margin: -0.375rem 0 var(--space-2);
}
.pf-lead {
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.8;
}
.pf-note .pf-note-h {
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.pf-sources {
  margin: var(--space-1) 0 var(--space-3);
  padding-left: var(--space-4);
  font-size: var(--type-note);
  line-height: 1.8;
}
.pf-sources li {
  margin: var(--space-1) 0;
}
.pf-sources a {
  white-space: nowrap;
}
.pf-sources b {
  font-weight: 600;
  margin-right: 0.5em;
}
.pf-word {
  white-space: nowrap;
}
.pf-basics {
  margin: 0 0 var(--space-3);
}
.modal-hero .portrait {
  object-fit: contain;
  height: 8rem;
  width: 8rem;
  border-radius: 0;
}
.modal-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* The band sits on the window's lower edge: the dialog's own padding (40px, 35px on phones) is below its content box,
   and the band's shadow (the page colour) fills it, so no text shows under the band. Nothing follows the band. */
/* 小窓のボタンの並び（画面の点検 A12）：右寄せで、小さい脇役（Commons に加える）の右に主役。 */
.download-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-5) 0 0;
  position: sticky;
  bottom: -40px;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  padding: var(--space-3) 0;
  z-index: 2;
  box-shadow: 0 40px 0 var(--surface);
}
/* スマホ：主役を上に全幅、小さい脇役はその下にまとめて */
@media (max-width: 700px) {
  .download-menu {
    justify-content: center;
  }
  .download-menu > .primary {
    order: -1;
    flex-basis: 100%;
  }
}
/* この企画との関わり：人物紹介のいちばん上。企画を考えている途中に開いたときだけ出る。 */
.person-plan {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-quiet);
  border-radius: var(--radius-3);
}
.person-plan h3 {
  font-size: var(--type-body);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.person-plan h3 small {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 400;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.person-plan p {
  margin: var(--space-2) 0;
  font-size: var(--fs-note);
  line-height: 1.8;
  word-break: auto-phrase;
}
.person-plan b {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--text-muted);
}
.pf-intro {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
  line-height: 1.9;
}
.portable-view {
  margin: var(--space-5) 0;
  min-height: 12rem;
}
.pf-note {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-note);
  line-height: 1.8;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-quiet);
  color: var(--text-muted);
  border-radius: var(--radius-3);
}
.pf-overall {
  font-size: var(--fs-note);
  line-height: 1.8;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-quiet);
  color: var(--text-muted);
  border-radius: var(--radius-3);
  margin: var(--space-4) 0;
}
.pf-note p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.person-meta {
  display: block;
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  /* CJK の語を途中で折らず、「｜」「・」などの区切りで折る。Safari にも同じ規則を使う。 */
  word-break: keep-all;
  text-wrap: balance;
  color: var(--text-muted);
}
.modal-hero > div {
  min-width: 0;
}
@media (max-width: 700px) {
  .source-fields {
    grid-template-columns: 1fr;
  }
  .modal-hero h2 {
    font-size: var(--fs-title);
  }
  .ai-scenario {
    padding: var(--space-4);
    margin: var(--space-4) 0;
  }
  .download-menu {
    bottom: -35px;
    box-shadow: 0 35px 0 var(--surface);
  }
  .person-plan {
    padding: var(--space-4) var(--space-4);
  }
  /* 出典の「開く ↗」と「元データを見る ↗」も、指で押せる高さにする。文中の「開く ↗」は行の高さを変えず、上下の余白で押す範囲だけ広げる */
  .pf-sources a {
    padding-block: var(--space-3);
  }
  .pf-about .btnrow > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}
@media (max-width: 600px) {
  .modal-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .modal-hero > div:not(.portrait) {
    display: contents;
  }
  .modal-hero h2 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .modal-hero > div > .muted {
    grid-column: 1/-1;
    margin: 0;
  }
}
/* 人物紹介の「勤め先」と「お金と時間」：同じ組み方（2026-10-09）。PC はラベルと値の2列で、ラベルの列の幅も同じ。
   狭い画面（480px 以下）は、どちらもラベルを値の上に置く縦並び。 */
.pf-work {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--type-body);
}
.pf-work dt {
  color: var(--text-muted);
  font-size: var(--type-note);
  padding-top: 0.125rem;
}
.pf-work dd {
  margin: 0;
  line-height: 1.6;
  word-break: auto-phrase;
}
@media (max-width: 480px) {
  .pf-work {
    grid-template-columns: minmax(0, 1fr);
    gap: 0 0;
  }
  .pf-work dt {
    padding-top: 0;
  }
  .pf-work dd {
    margin: 0.125rem 0 var(--space-4);
  }
  .pf-work dd:last-child {
    margin-bottom: 0;
  }
  /* 縦並びでは、押す範囲（44px）は保ったまま、字の上下の空きを前後の余白に重ねる（「決め方」の後ろが空きすぎないように） */
  .pf-work dd .link {
    margin: -0.6875rem 0;
  }
}
/* 「決め方」はデータと出典の表へ移るので、文中のリンクの形（buttons.css .link）。ほかの値と同じ大きさで、字の頭をそろえる
   （ボタンの形だと内側の余白の分、ほかの値より右にずれた。B1 の saito-review 2026-10-26）。押せる範囲は 44px */
.pf-work dd .link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  font-size: inherit;
  text-align: left;
}
/* お金と時間：費目や「仕事のある日／休みの日」は1行ずつ。金額の幅（2万5千〜3万円）は途中で折らない。 */
.pf-money {
  margin-bottom: var(--space-3);
}
.pf-money .pf-line {
  display: block;
}
.pf-money .pf-line + .pf-line {
  margin-top: var(--space-1);
}
.pf-money .pf-sub {
  color: var(--text-muted);
  font-size: var(--type-note);
}
.pf-nw {
  white-space: nowrap;
}
.pf-money-note {
  margin: 0 0 var(--space-4);
  word-break: auto-phrase;
}
/* 「データと出典で作り方を読む」は、注記の後ろに続けて置き、言葉の途中で折らない。スマホでは1行を使い、押す範囲を44px に */
.pf-money-note .small-button {
  margin-left: var(--space-2);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .pf-money-note .small-button {
    margin-left: 0;
  }
}
/* 指で押す端末（タブレット・スマホの横向き）では、幅に関わらず出典と決め方のリンクを44pxに（品質確認 2026-10-10：
   701px 以上では「開く ↗」が43×15px だった）。文中の「開く ↗」は、広げた分を上下に重ねて行の高さを変えない。 */
@media (pointer: coarse) {
  .pf-sources a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    margin-block: -0.875rem;
    padding-block: 0;
  }
  .pf-about .btnrow > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .pf-money-note .small-button {
    margin-left: 0;
  }
}
/* 人物紹介の並び（2026-10-13、data/marketing/PROFILE-LAYOUT.md）：大見出しの終わりの出典名は、本文と分けて小さく薄く。押すと作り方・出典へ */
.pf-src {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--line, #ddd);
}
.pf-src-link,
.pf-doc-link {
  all: unset;
  cursor: pointer;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
}
.pf-doc-link {
  color: inherit;
}
.pf-src-link:focus-visible,
.pf-doc-link:focus-visible {
  outline: 2px solid var(--focus, #2b6cb0);
  outline-offset: 2px;
}
.pf-src-note {
  color: var(--text-muted);
}
.pf-about h4 {
  scroll-margin-top: var(--space-5);
}
/* スマホでは、出典の名前を指で押しやすく（高さ44px） */
@media (max-width: 767px) {
  .pf-src-link,
  .pf-doc-link,
  .pf-sources a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* 新しいトップの見た目の人物紹介（public/js/top-flow.js が html に data-top="new"）：紺のカードと同じ輪郭（角32px・影）で、
   上を紺の帯にして、金の輪の顔と明朝の名前。本文は白のまま読みやすく、見出しに金の印（斉藤さん 2026-10-24「紺のメニューと
   デザインギャップがある」）。色と書体は kosei.css の名前（--brand-12・--gold・--on-navy-sub・--font-mincho）。
   ボタンは parts.css の3つの形のまま（「この人と話す」は主役の紺の塗り。斉藤さん 2026-10-25「ボタンやカラー、すべて」） */
html[data-top='new'] #modal:has(.modal-hero) {
  border: 0;
  border-radius: 32px;
  box-shadow: 0 24px 64px rgba(10, 18, 36, 0.35);
}
html[data-top='new'] #modal:has(.modal-hero) .close {
  color: #fff;
  background: var(--brand-12);
}
html[data-top='new'] #modal .modal-hero {
  /* 「×」が右上に浮いている（modal.css）ので、帯は余白を負の幅で広げられない。紺の影で窓の左右の端まで塗る */
  margin: calc(6px - var(--pad-y) - 2.75rem) 0 0 !important;
  padding: calc(var(--pad-y) + 2.75rem + 16px) 0 28px;
  background: var(--brand-12);
  box-shadow: 0 0 0 calc(var(--pad-x) + 3.5rem) var(--brand-12);
  clip-path: inset(0 calc(-1 * var(--pad-x) - 3.5rem) 0 calc(-1 * var(--pad-x)));
  color: #fff;
}
html[data-top='new'] #modal .modal-hero .portrait {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 4px solid var(--gold);
}
html[data-top='new'] #modal .modal-hero h2 {
  font-family: var(--font-mincho);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}
html[data-top='new'] #modal .modal-hero .muted,
html[data-top='new'] #modal .modal-hero .person-meta {
  color: var(--on-navy-sub);
}
html[data-top='new'] #modal:has(.modal-hero) .pf-intro {
  margin-top: 24px;
}
html[data-top='new'] #modal:has(.modal-hero) .pf-sec > h3 {
  padding-left: 12px;
  border-left: 4px solid var(--gold);
  color: var(--brand-12);
  font-family: var(--font-mincho);
  font-weight: 800;
  letter-spacing: 0.04em;
}
html[data-top='new'] #modal:has(.modal-hero) .pf-sec h4 {
  color: var(--brand-12);
}
/* 出典のリンク：青をやめて紺の字に細い下線 */
html[data-top='new'] #modal:has(.modal-hero) .pf-sources a {
  color: var(--brand-12);
  text-decoration-color: color-mix(in srgb, var(--brand-12) 45%, transparent);
}