/* seventy-seventy.com のデザイントークンを踏襲（色は 4 値のみ・アクセントカラーなし） */
:root {
  --background: #FFFFFF;
  --foreground: #1A1A1A;
  --foreground-secondary: #767676;
  --rule: #E5E5E5;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-system: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --measure: 780px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--background); color: var(--foreground); }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: 17px; font-weight: 400; line-height: 1.9; letter-spacing: 0.03em;
}
main.bn { width: 100%; max-width: var(--measure); margin-inline: auto; padding: var(--s7) var(--s5); }
h1 { font-size: 28px; line-height: 1.5; letter-spacing: .01em; font-weight: 700; margin: 0 0 var(--s4); }
h2 { font-size: 22px; line-height: 1.5; font-weight: 700; margin: 0 0 var(--s3); }
h3 { font-size: 18px; line-height: 1.6; font-weight: 700; margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s3); }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }
button {
  border: 1px solid var(--foreground); background: var(--foreground); color: var(--background);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6; letter-spacing: .1em;
  padding: var(--s1) var(--s3); cursor: pointer;
}
button:disabled { cursor: wait; opacity: .6; }
button.bn-secondary { background: var(--background); color: var(--foreground); }
textarea, input {
  border: 1px solid var(--rule); background: var(--background); color: var(--foreground);
  font-family: var(--font-system); font-size: 14px; line-height: 1.6; letter-spacing: 0;
}
textarea { display: block; width: 100%; padding: var(--s1) var(--s2); resize: vertical; }
textarea::placeholder { color: var(--foreground-secondary); }

.type-label { color: var(--foreground-secondary); font-size: 14px; line-height: 1.6; letter-spacing: .16em; margin-bottom: var(--s2); }
.type-lead { font-size: 18px; line-height: 1.6; letter-spacing: .02em; }
.type-caption { color: var(--foreground-secondary); font-size: 14px; line-height: 1.6; letter-spacing: .03em; }
.type-voice-heading { font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; margin-bottom: var(--s1); }

.bn-header { margin-bottom: var(--s5); }
.bn-view { padding-bottom: var(--s5); }
.bn-list { margin: 0 0 var(--s4); padding-left: var(--s3); }
.bn-list li + li { margin-top: var(--s1); }
.bn-note { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s3) 0; margin-bottom: var(--s4); font-size: 16px; }
.bn-note p:last-child { margin-bottom: 0; }
.bn-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.bn-error { border-top: 1px solid var(--rule); padding-top: var(--s2); margin-top: var(--s2); }
.bn-error p { margin-bottom: var(--s2); }
.bn-loading { margin-top: var(--s2); }
.bn-done { border-top: 1px solid var(--rule); padding-top: var(--s2); }

.bn-progress { display: flex; justify-content: space-between; gap: var(--s2); border-bottom: 1px solid var(--rule); padding-bottom: var(--s1); margin-bottom: var(--s3); }

.bn-chat { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.bn-chat li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.bn-chat .bn-role { display: block; color: var(--foreground-secondary); font-size: 14px; line-height: 1.6; letter-spacing: .08em; margin-bottom: 4px; }
.bn-chat .bn-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.bn-chat li.bn-user .bn-text { color: var(--foreground); }
.bn-chat li.bn-ai .bn-text { font-size: 17px; }
.bn-chat--compact li { padding: var(--s1) 0; font-size: 15px; }

.bn-form label { display: block; margin-bottom: var(--s1); }
.bn-form-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-top: var(--s1); }

.bn-status { border-left: 1px solid var(--rule); padding-left: var(--s3); color: var(--foreground-secondary); font-size: 16px; }
.bn-section { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s3); }
.bn-section ul { margin: 0; padding-left: var(--s3); }
.bn-section li + li { margin-top: var(--s1); }
.bn-empty { color: var(--foreground-secondary); }
.bn-candidate { margin-top: var(--s3); }
.bn-candidate:first-of-type { margin-top: 0; }
.bn-candidate .bn-meta { color: var(--foreground-secondary); font-size: 14px; letter-spacing: .03em; margin-bottom: var(--s1); }
.bn-candidate .bn-sub { font-size: 14px; color: var(--foreground-secondary); margin: var(--s1) 0 2px; letter-spacing: .08em; }
.bn-candidate ul { margin: 0; padding-left: var(--s3); }

.bn-feedback { border-top: 1px solid var(--rule); padding-top: var(--s4); margin-top: var(--s5); }
.bn-feedback fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); }
.bn-feedback legend { padding: 0; margin-bottom: var(--s1); font-size: 16px; }
.bn-feedback fieldset label { display: inline-block; margin-right: var(--s3); font-size: 15px; }
.bn-feedback input[type="radio"] { accent-color: var(--foreground); margin-right: 4px; }
.bn-fb-label { display: block; font-size: 16px; margin-bottom: var(--s1); }
.bn-next { border-top: 1px solid var(--rule); padding-top: var(--s4); margin-top: var(--s5); }
.bn-footer { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s6); }
.bn-footer p { margin: 0; }

@media (max-width: 700px) {
  main.bn { padding: var(--s5) var(--s3); }
  textarea, input { font-size: 16px; }
  h1 { font-size: 24px; }
  .bn-progress { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bn-loading { animation: bn-pulse 1.6s ease-in-out infinite; }
  @keyframes bn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
}