/*
 * 営業・接客の練習（public/js/roleplay.js、2026-11-03）。読むページ（.doc）の枠と字の形のまま。値はすべて kosei.css の名前。
 * ボタンは parts.css・buttons.css の部品のまま。
 */
.roleplay-page h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--fs-head);
}
.roleplay-page h2:first-child {
  margin-top: var(--space-4);
}
/* 区切り（テーマ・相手役・場面・これまでの練習）のあいだに、しっかり間を空ける */
.rp-step {
  margin: 0 0 var(--space-6);
}
.rp-step h2 {
  margin-top: var(--space-6);
}
.rp-step > p {
  margin: 0 0 var(--space-3);
}
.rp-step .rp-people,
.rp-step .rp-scenes {
  margin-bottom: var(--space-3);
}
.roleplay-page h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--fs-body);
}
.roleplay-page p {
  line-height: 1.75;
}
.rp-form {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rp-step textarea {
  width: 100%;
  box-sizing: border-box;
}
/* 招待・使い切り：エラーに見せない（やわらかい面） */
.rp-invite {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-quiet);
}
.rp-invite p {
  margin: 0;
}
.rp-invite .rp-go {
  margin: var(--space-3) 0 0;
}
.rp-invite .small {
  margin-top: var(--space-2);
}
.rp-go,
.rp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
/* お客さま役・場面の選び */
.rp-people,
.rp-scenes {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin: var(--space-2) 0;
}
.rp-person,
.rp-scene {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  font: inherit;
}
.rp-scene {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.rp-person[aria-checked='true'],
.rp-scene[aria-checked='true'] {
  border-color: var(--fill);
  box-shadow: 0 0 0 2px var(--fill);
  background: var(--fill-tint);
}
.rp-person .portrait {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.rp-person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rp-other {
  margin: var(--space-2) 0;
}
.rp-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
}
.rp-start-note {
  flex: 1 1 16rem;
  margin: 0;
}
/* 押せないあいだも、字が読める濃さ（tone.css の押せないボタンより後ろに効かせる） */
html:root .rp-start button.primary:disabled {
  color: var(--text) !important;
  background: var(--ink-4);
  border-color: var(--ink-6);
  opacity: 1;
}
/* 対話の画面：その人と1往復以上話したあとの、最後の答えの下 */
.chat-roleplay {
  margin: var(--space-3) 0;
}
/* 話す */
.rp-who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rp-who .portrait {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.rp-who p {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.rp-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.rp-msg {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: 100%;
}
.rp-msg p {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg, 12px);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.rp-customer p {
  background: var(--surface);
  border: 1px solid var(--line);
}
.rp-you {
  justify-content: flex-end;
}
.rp-you p {
  max-width: 85%;
  background: var(--fill-tint);
  border: 1px solid var(--fill-line, var(--line));
}
.rp-face .portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.rp-wait,
.rp-count {
  margin: 0;
}
.rp-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--danger-text);
  background: var(--danger-bg);
  border-radius: var(--radius-lg, 12px);
}
.rp-input {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.rp-input[hidden] {
  display: none;
}
.rp-input textarea {
  flex: 1;
  min-width: 0;
}
/* 振り返り */
.rp-reminder {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--info-bg);
  border-left: 4px solid var(--info-line);
  border-radius: 4px;
}
.rp-quote {
  margin: var(--space-2) 0 var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-quiet);
  border-left: 4px solid var(--fill-line, var(--line-strong));
  border-radius: 4px;
}
.rp-quote p {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.rp-quote footer {
  margin-top: 2px;
}
.rp-why {
  margin: 0 0 var(--space-2);
}
.rp-next {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
}
.rp-next h3 {
  margin-top: 0;
}
.rp-pastlist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-past-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.rp-past-row > :last-child {
  flex: none;
  white-space: nowrap;
}
.rp-talkback {
  margin: var(--space-3) 0;
}
.roleplay-page .rp-preview{margin:0;padding:0;list-style:none}
.rp-preview li{display:flex;flex-direction:column;gap:2px;margin:0;padding:var(--space-2) 0;border-bottom:1px solid var(--line-soft)}
.rp-quote footer{border:0;padding:0}
/* 欄の上の説明（企画・場面・役目・終わると） */
.rp-brief {
  margin: var(--space-2) 0 0;
  padding-left: 1.2em;
  overflow-wrap: anywhere;
}
/* 達人を選ぶ（public/js/roleplay-masters.js）。聴く企画のカード（survey.css の .ask-card）と同じ作り：
 * 枠・角・触れたときの紺の枠は同じ。名前は明朝の太字。三人は印の色で見分ける（既存の紺・金・淡い青）。 */
.doc.roleplay-page.rp-wide {
  max-width: 60rem;
}
.rp-masters {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-3) 0 var(--space-4);
}
.rp-master {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  text-align: left;
  color: var(--brand-12);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font: inherit;
  overflow-wrap: anywhere;
  transition:
    border-color var(--quick) var(--ease),
    box-shadow var(--quick) var(--ease);
}
button.rp-master {
  cursor: pointer;
}
@media (hover: hover) {
  button.rp-master:hover {
    border-color: var(--brand-12);
    box-shadow: 0 6px 18px rgb(22 35 63 / 0.08);
  }
}
button.rp-master:focus-visible {
  outline: 3px solid var(--brand-9);
  outline-offset: 2px;
}
button.rp-master:active {
  transform: translateY(1px);
}
.rp-master-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rp-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-family: var(--font-mincho);
  font-style: normal;
  font-weight: 800;
  font-size: 1.125rem;
  color: #fff;
  background: var(--brand-12);
}
.rp-mark[data-m='debate'] {
  color: var(--brand-12);
  background: var(--gold);
}
.rp-mark[data-m='dialogue'] {
  color: var(--brand-12);
  background: var(--brand-4);
}
.rp-master-name {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rp-master-line {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--text);
  word-break: auto-phrase;
  text-wrap: balance;
}
.rp-master-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.rp-master-label {
  font-size: var(--fs-note);
  color: var(--text-muted);
}
.rp-tag {
  padding: 2px var(--space-2);
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.6;
  color: var(--brand-12);
  background: var(--brand-2);
  border: 1px solid var(--brand-4);
  border-radius: 999px;
  white-space: nowrap;
}
.rp-master-go {
  margin-top: auto;
  font-size: var(--fs-control);
  font-weight: 700;
  color: var(--brand-12);
}
@media (max-width: 860px) {
  .rp-masters {
    grid-template-columns: 1fr;
  }
  .rp-master {
    gap: var(--space-2);
  }
}
.rp-compare {
  margin: var(--space-4) 0 var(--space-7);
}
.rp-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.rp-chosen-text {
  flex: 1 1 16rem;
  min-width: 0;
}
.rp-chosen p {
  margin: 0;
}
.rp-chosen-name {
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  color: var(--brand-12);
}
.rp-chosen .btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.rp-with {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.rp-with .rp-mark {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}
.rp-advice-item h4 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--fs-body);
}
.rp-advice-item p {
  margin: 0;
}
@media (max-width: 860px) {
  .rp-masters {
    grid-template-columns: 1fr;
  }
}

/* 三つの達人のページ（#masters）：読み物。表は広い画面では4列、せまい画面では観点ごとに縦に積む */
.masters-page .mt-back {
  margin: var(--space-3) 0;
}
.mt-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.mt-block {
  margin: var(--space-5) 0;
  scroll-margin-top: var(--space-5);
}
.masters-page h2,
.masters-page h3,
.masters-page h4,
.masters-page h5,
.masters-page h6 {
  line-height: 1.5;
}
.masters-page h3 {
  font-size: var(--fs-lead);
}
.masters-page h4 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-body);
}
.masters-page h5,
.masters-page h6 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-body);
}
.masters-page p,
.masters-page li {
  line-height: 1.8;
  overflow-wrap: anywhere;
}
/* 段落と段落のあいだに、ひと呼吸ぶんの間を空ける */
.masters-page p {
  margin: 0 0 var(--space-4);
}
.masters-page li + li {
  margin-top: var(--space-2);
}
.masters-page ul,
.masters-page ol {
  margin: 0 0 var(--space-4);
}
.masters-page ul,
.masters-page ol {
  padding-left: 1.4em;
}
.mt-table {
  margin: var(--space-3) 0;
}
.mt-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-body);
}
.mt-table th,
.mt-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  border-bottom: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}
.mt-table thead th {
  font-weight: 700;
  background: var(--surface-quiet);
}
.mt-table tbody th {
  font-weight: 700;
  white-space: normal;
}
.mt-master {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  scroll-margin-top: var(--space-5);
}
.mt-master > h3 {
  margin-top: 0;
}
.mt-tag {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lead);
  font-weight: 600;
}
.mt-more {
  margin: var(--space-3) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
}
.mt-more > summary {
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
}
.mt-more-body {
  padding: 0 var(--space-4) var(--space-3);
}
.mt-theory {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-quiet);
  border-left: 4px solid var(--fill-line, var(--line-strong));
  border-radius: 4px;
}
.mt-theory h4 {
  margin-top: var(--space-2);
}
@media (max-width: 720px) {
  .mt-table table,
  .mt-table tbody,
  .mt-table tr,
  .mt-table th,
  .mt-table td {
    display: block;
  }
  .mt-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .mt-table tr {
    margin: 0 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
  }
  .mt-table tbody th {
    background: var(--surface-quiet);
    border-bottom: 1px solid var(--line);
  }
  .mt-table td {
    border-bottom: 1px solid var(--line-soft);
  }
  .mt-table td:last-child {
    border-bottom: 0;
  }
  .mt-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-note);
    font-weight: 700;
    color: var(--muted, var(--text));
  }
  .mt-master {
    padding: var(--space-3);
  }
}
/* 表の1列目は狭く（左端は本文とそろえる） */
@media (min-width: 721px) {
  .mt-table tbody th {
    width: 17%;
  }
}
/* 一連の会話例：吹き出し（先に話す人は左、もう一人は右） */
.masters-page .mt-say {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: fit-content;
  max-width: 88%;
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
}
.masters-page .mt-say b {
  font-size: var(--fs-note);
  color: var(--muted, var(--text));
}
.masters-page .mt-say-b {
  margin-left: auto;
  background: var(--fill-tint);
  border-color: var(--fill-line, var(--line));
}
.mt-theory-title {
  font-size: var(--fs-lead) !important;
}
.mt-theory {
  border-left-width: 6px;
}

/* 折りたたみ（すべての観点・三つに共通すること・選び方）：見出しの字は本文と同じ大きさ、左端は本文とそろえる */
.mt-fold {
  margin: var(--space-2) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
}
.mt-fold > summary {
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  cursor: pointer;
}
.mt-fold-body {
  padding: 0 var(--space-4) var(--space-3);
}
.mt-fold-body .mt-table {
  margin-top: 0;
}
.mt-block .mt-table + .mt-fold {
  margin-top: var(--space-3);
}
.mt-folds {
  margin: var(--space-4) 0;
}
.masters-page .rp-masters {
  margin-top: var(--space-3);
}
/* 資料ページの上の「戻る」：字の左端を本文とそろえる */
.masters-page .mt-back .small-button {
  margin-left: calc(-1 * var(--space-3));
}
/* これまでの練習：枠で囲んだ一覧。空のときは次にすることを言う */
.rp-pastlist ul {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.rp-pastlist li:last-child .rp-past-row {
  border-bottom: 0;
}
.rp-past-row:hover {
  background: var(--brand-2);
}
.rp-past-empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--text);
  background: var(--surface-quiet);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
}
/* 資料ページ：読み物の幅（表とカードは広く、文章は読みやすい長さに） */
.masters-page .mt-role,
.masters-page .mt-tag,
.masters-page .mt-more-body,
.masters-page .mt-theory,
.masters-page .mt-fold-body > :not(.mt-table) {
  max-width: 46rem;
}
.mt-table table {
  background: var(--surface);
}
@media (min-width: 721px) {
  .mt-table tbody tr:nth-child(even) > * {
    background: var(--surface-quiet);
  }
}
.mt-table tbody th {
  color: var(--brand-12);
}
.mt-table th,
.mt-table td {
  font-size: var(--fs-body);
  line-height: 1.8;
  padding: var(--space-3) var(--space-4);
}
.mt-master-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mincho);
  font-weight: 800;
  color: var(--brand-12);
}
.mt-master-title .rp-mark {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}
.masters-page .mt-master .mt-master-title {
  font-size: 1.25rem;
}
.masters-page .mt-more {
  max-width: 46rem;
}

/* 間隔の見直し（2026-11-05、斉藤さん「区切りに間がなく窮屈」）：上から、まとまりのあいだは広く、まとまりの中は狭く */
.rp-with {
  margin: 0 0 var(--space-4);
}
.rp-who {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.rp-brief {
  margin: 0 0 var(--space-5);
}
.rp-brief li + li {
  margin-top: var(--space-2);
}
.rp-log {
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
}
.rp-count,
.rp-wait {
  margin: var(--space-3) 0 var(--space-4);
}
.rp-actions {
  margin: var(--space-4) 0 var(--space-6);
}
.rp-reminder {
  margin-bottom: var(--space-5);
}
.rp-block {
  margin: var(--space-6) 0 0;
}
.rp-advice-item {
  margin: 0 0 var(--space-4);
}
.rp-advice-item h4 {
  margin: 0 0 var(--space-1);
}
.rp-quote {
  margin: var(--space-3) 0;
}
.rp-why {
  margin: 0 0 var(--space-3);
}
.rp-talkback {
  margin: var(--space-5) 0;
}
/* 比べるページ：折りたたみは同じ間隔でそろえる */
.mt-fold {
  margin: 0 0 var(--space-3);
}
.mt-block .mt-table + .mt-fold {
  margin-top: var(--space-4);
}
.mt-folds {
  margin: var(--space-4) 0 var(--space-6);
}
.mt-block {
  margin: var(--space-7) 0;
}
.roleplay-page .rp-block > h3 {
  margin: 0 0 var(--space-3);
}
.roleplay-page .rp-block > p {
  margin: 0 0 var(--space-3);
}
.roleplay-page .rp-block ~ .btnrow {
  margin-top: var(--space-6);
}

/* 三つの達人を一言で（roleplay-masters.js introHTML）と、同じ会話を三人の達人が見ると（exampleHTML）。
 * 間隔：見出しと本文は近く、まとまりのあいだは広く。三人は広い画面は3列、狭い画面は縦（畳まない） */
.rp-intro {
  margin: 0 0 var(--space-6);
}
.rp-intro-lead {
  margin: 0 0 var(--space-4);
  line-height: 1.75;
}
.rp-intro-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-intro-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.rp-intro-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.5;
  min-width: 0;
}
.rp-intro-q {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.rp-example {
  container-type: inline-size;
}
.rp-ex-scene {
  margin: var(--space-2) 0 var(--space-4);
}
.rp-ex-talk {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
  margin: 0 0 var(--space-6);
}
.rp-ex-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);
}
.rp-ex-col .rp-block {
  margin: 0;
}
.rp-ex-col .rp-advice > h3 {
  margin: 0 0 var(--space-3);
}
@container (min-width: 46rem) {
  .rp-ex-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}
.masters-page .rp-intro {
  margin: var(--space-4) 0 var(--space-6);
}
.masters-page .rp-example {
  margin: var(--space-7) 0;
}

/* これまでの練習：選ぶ印・開く・削除（保存した対話の一覧と同じ並び） */
.rp-past-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rp-past-item .rp-past-row {
  flex: 1;
  min-width: 0;
}
.rp-past-item .small-button {
  flex: none;
}
.rp-past-item {
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
.rp-past-item .rp-past-row {
  padding-left: 0;
  border-bottom: 0;
}
.rp-pastlist li.rp-past-item:last-child {
  border-bottom: 0;
}
.rp-pastlist li.rp-past-item:hover {
  background: var(--brand-2);
}
@media (max-width: 700px) {
  .rp-past-item {
    flex-wrap: wrap;
  }
  .rp-past-item .small-button {
    margin: 0 0 var(--space-2) auto;
  }
}