/* ==========================================================================
   Yomiwatari — 面別デザイン体系(利用者属性ごとに最適化)
   Reader (EN):  "Night Shelf" — ダーク既定の読書アプリ調。Literata(本文)+Archivo(UI)。
   Writer/Admin (JA): 「原稿と朱」— 生成り紙×墨×朱の編集部事務調。明朝見出し+ゴシック本文。
   Spacing: 4/8pt grid. Contrast: 主要ペアは WCAG AA >= 4.5:1 を維持。
   Fonts: Literata / Archivo は /static/fonts に自己ホスト(SIL OFL 1.1)。
   ========================================================================== */

@font-face {
  font-family: "Literata";
  src: url("/static/fonts/literata-var-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/static/fonts/literata-var-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---- design tokens: JA(writer/admin)既定 = 原稿と朱 ---- */

:root {
  color-scheme: light;
  --font-body: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-ui: var(--font-body);
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", "Noto Serif JP", serif;
  --paper: #fbfaf6;        /* 生成りの紙 */
  --raised: #ffffff;
  --ink: #221f1a;          /* 墨 */
  --muted: #6c675d;
  --line: #ddd6c8;
  --accent: #a8322c;       /* 朱(リンク・必須・状態のみに最少量) 6.2:1 on paper */
  --accent-hover: #8d2823;
  --brand: #a8322c;
  --btn-bg: #2b2822;       /* ボタンは墨。朱は塗りに使わない */
  --btn-ink: #fbfaf6;
  --tag-bg: #f0ece1;
  --tag-ink: #5f5a4e;
  --pv-bg: #f7e9e7;
  --pv-ink: #8d2823;
  --danger: #a8322c;
  --shadow: 0 2px 8px rgba(40, 35, 25, 0.10);
}

/* ---- Reader(EN)= Night Shelf: ダークが既定(OS設定に依らず) ---- */

html[data-surface="reader"] {
  color-scheme: dark;
  --font-body: "Literata", Georgia, serif;
  --font-display: "Literata", Georgia, serif;
  --font-ui: "Archivo", system-ui, sans-serif;
  --paper: #121117;
  --raised: #1a1920;
  --ink: #e9e7e1;          /* 13:1 */
  --muted: #a5a19a;        /* 6.8:1 */
  --line: #2c2b33;
  --accent: #e2a05e;       /* 燠火(ember) 7.6:1 — リンク・進捗・主CTAのみ */
  --accent-hover: #ecb27a;
  --brand: #e2a05e;
  --btn-bg: #e2a05e;
  --btn-ink: #221507;
  --tag-bg: #232230;
  --tag-ink: #b6b2aa;
  --pv-bg: #33261a;
  --pv-ink: #ecb27a;
  --danger: #e58b8b;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

html[data-surface="reader"][data-theme="light"] {
  color-scheme: light;
  --paper: #f7f6f2;
  --raised: #fffefb;
  --ink: #1e1c19;
  --muted: #6b6759;
  --line: #e2ded4;
  --accent: #96540a;
  --accent-hover: #7f4708;
  --brand: #96540a;
  --btn-bg: #96540a;
  --btn-ink: #fffdf8;
  --tag-bg: #efece4;
  --tag-ink: #5f5a4e;
  --pv-bg: #f4e6d2;
  --pv-ink: #7f4708;
  --danger: #9c2b2b;
  --shadow: 0 4px 16px rgba(60, 50, 30, 0.12);
}

/* reader text size (persisted by reader.js via data-fontsize) */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
:root[data-fontsize="s"] { font-size: 93.75%; }  /* 15px root */
:root[data-fontsize="l"] { font-size: 112.5%; }  /* 18px root */

/* ---- base ---- */

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  line-height: 1.75;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--pv-bg); color: var(--pv-ink); }

button { font: inherit; color: inherit; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 0.5rem; text-wrap: balance; font-weight: 700; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.75rem; font-weight: 700; }

/* ---- layout ---- */

.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.wrap.reader { max-width: 40rem; }

/* ---- site header / footer ---- */

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 1rem max(1.25rem, calc((100% - 64rem) / 2));
  background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--accent); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 1.25rem; width: auto; }
.brand-logo-light { display: none; }
html[data-surface="reader"]:not([data-theme="light"]) .brand-logo-light { display: block; }
html[data-surface="reader"]:not([data-theme="light"]) .brand-logo-ink { display: none; }
.brand-sub {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--muted);
}
.head-tools { margin-left: auto; display: flex; gap: 0.5rem; }
.head-tools button {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.head-tools button:hover {
  color: var(--accent);
  border-color: var(--brand);
  background: var(--tag-bg);
}
#theme-toggle { font-size: 1rem; }

.site-foot {
  padding: 2rem max(1.25rem, calc((100% - 64rem) / 2)) 3rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
}
.site-foot p { margin: 0 0 0.5rem; }
.site-foot a { color: var(--muted); text-decoration: underline; }
.site-foot a:hover { color: var(--accent); }

/* ---- shared elements ---- */

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--accent); text-decoration: underline; }

.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.75rem 0 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
}
.tag {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  white-space: nowrap;
}
.tag-preview {
  background: var(--pv-bg);
  color: var(--pv-ink);
  font-weight: 600;
}

.jatitle {
  color: var(--muted);
  margin: 0 0 1rem;
  font-size: 1rem;
}

/* 作者クレジット + 原作リンク(掲載申請で作家に約束している表示) */
.byline {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--muted);
}
.byline a { color: var(--accent); text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.chapter-credit {
  margin: 2rem 0 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--muted);
}
.chapter-credit a { color: var(--accent); text-decoration: none; }
.chapter-credit a:hover { text-decoration: underline; }

.cover {
  aspect-ratio: 2 / 3;
  background: var(--tag-bg);
  border-radius: 8px;
  overflow: hidden;
}
.cover svg, .cover img { display: block; width: 100%; height: 100%; }

/* ---- LP(募集用の説明ページ: /for-writers /about) ---- */
/* ビジョンだけを語る一枚。読み物としての行間を優先し、面ごとのトークンをそのまま使う */

.lp { max-width: 42rem; }
.lp-hero { margin: 2rem 0 3rem; }
.lp-hero h1 {
  font-size: 2rem;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.lp-lede {
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--muted);
  margin: 0;
}
.lp-body p {
  font-size: 1rem;
  line-height: 2;
  margin: 0 0 1.5rem;
}
.lp-cta { margin: 3rem 0 2rem; }
.lp-cta p { margin: 0 0 1rem; font-size: 1.125rem; }
.lp-cta .hint { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--muted); margin: 1rem 0 0; }
@media (max-width: 640px) {
  .lp-hero h1 { font-size: 1.5rem; }
}

/* ---- home ---- */

.home-hero { margin: 0 0 3rem; }
.home-hero > p {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 38rem;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 40em) { .catalog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .catalog { grid-template-columns: repeat(3, 1fr); } }

.work-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.work-card .work-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 1rem 1rem 1.125rem;
}
.work-card:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.work-card .cover { border-radius: 0; }
.work-card h2 { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.work-card:hover h2 { color: var(--accent); }
.work-card .tags { margin: 0; }
.card-synopsis {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- work detail ---- */

.work-hero {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 2rem;
  align-items: start;
  margin: 0 0 2rem;
}
@media (max-width: 40em) {
  .work-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .work-hero .cover { max-width: 9rem; }
}
.work-info h1 { margin: 0 0 0.25rem; }
.synopsis { margin: 1.25rem 0 0; }

.voice-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
}
.voice-note strong { color: var(--ink); font-weight: 600; }

.continue-slot a {
  display: block;
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.continue-slot a:hover { background: var(--tag-bg); }

.chapter-list { margin: 2rem 0; }
.chapter-list ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.chapter-list li { margin: 0; padding: 0.25rem 0; }
.chapter-list li::marker {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.chapter-list a { color: var(--ink); text-decoration: none; }
.chapter-list a:hover { color: var(--accent); text-decoration: underline; }
.coming-soon {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

.start {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--btn-ink);
  background: var(--btn-bg);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  margin-top: 0.5rem;
  transition: background-color 0.15s ease;
}
.start:hover { background: var(--accent-hover); color: var(--btn-ink); }

/* ---- reader ---- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 50;
  pointer-events: none;
  background: transparent;
}
#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--brand);
  transition: width 0.1s linear;
}

.chapter-head { margin: 0 0 2.5rem; }

.audio-slot { margin: 0 0 2.5rem; }
.audio-sample {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--accent);
  background: var(--raised);
  border: 1px dashed var(--brand);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.audio-sample:hover { background: var(--tag-bg); }

article p { margin: 0 0 1.25rem; }
#chapter-body { line-height: 1.8; }

/* 章末: primary は次話(.pager .next-big)。share はその下の secondary。 */
.reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
}
#share-button {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.375rem 0.75rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#share-button:hover { border-color: var(--brand); background: var(--tag-bg); color: var(--ink); }
#share-button {
  margin-left: auto;
  font-weight: 600;
  color: var(--muted);
}
#share-button:hover { color: var(--accent); }

.cta {
  margin: 3rem 0 1rem;
  padding: 1.5rem;
  font-family: var(--font-ui);
  text-align: center;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.cta p { margin: 0 0 1rem; }
.cta button, #cta-button {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cta button:hover, #cta-button:hover { background: var(--accent-hover); }
.cta-done, #cta-done { color: var(--muted); font-family: var(--font-ui); margin: 0; }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
}
.pager a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pager a:hover { text-decoration: underline; }
.pager .next-big {
  order: -1;
  flex: 1 1 100%;
  display: block;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 1rem;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.pager .next-big:hover { background: var(--accent-hover); text-decoration: none; }

/* ---- admin ---- */

.admin { font-family: var(--font-ui); }
.admin .big { font-size: 3rem; font-weight: 700; line-height: 1.1; margin: 0.5rem 0 0; }
.admin .verdict {
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
}
.admin .note { color: var(--muted); font-size: 0.875rem; }
.admin table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.875rem;
}
.admin th, .admin td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
  text-align: right;
}
.admin th { background: var(--tag-bg); color: var(--tag-ink); font-weight: 600; }
.admin th:first-child, .admin td:first-child { text-align: left; }
.admin .cells { font-size: 0.75rem; }

/* ---- responsive / a11y ---- */

@media (max-width: 40em) {
  h1 { font-size: 1.5rem; }
  .wrap { padding: 2rem 1rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- forms / studio / admin console (C-UX layer) ---- */

.form-grid { display: grid; gap: 1rem; max-width: 40rem; }
.form-grid label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.form-grid .hint { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); margin: 0.25rem 0 0; }
input[type="text"], input[type="url"], input[type="email"], textarea, select {
  width: 100%;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
textarea { min-height: 10rem; line-height: 1.6; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.12); color: var(--btn-ink); }
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--tag-bg); color: var(--accent-hover); }
.btn-danger { background: #9c2b2b; color: #fff; }
.btn-danger:hover { background: #7f2222; color: #fff; }

.pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
}
.pill-ok { background: #dcefdd; color: #22582a; }
.pill-wait { background: var(--pv-bg); color: var(--pv-ink); }

.console { font-family: var(--font-ui); }
.console table { border-collapse: collapse; width: 100%; margin: 0.75rem 0 1.5rem; }
.console th, .console td { border: 1px solid var(--line); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; vertical-align: top; }
.console section { margin-bottom: 2.5rem; }
.console form.inline { display: inline; }
.console .row-form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }

.token-box {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  word-break: break-all;
  background: var(--tag-bg);
  border: 1px dashed var(--brand);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

.consent-box {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.7;
}
.consent-box ul { margin: 0.5rem 0; padding-left: 1.25rem; }
.consent-check { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.75rem; font-weight: 600; }
.consent-check input { width: auto; margin-top: 0.3rem; }

.voice-options { display: grid; gap: 0.75rem; }
.voice-option {
  display: block;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  cursor: pointer;
}
.voice-option:has(input:checked) { border-color: var(--brand); background: var(--tag-bg); }
.voice-option input { width: auto; margin-right: 0.5rem; }
.voice-option .vp-label { font-family: var(--font-ui); font-weight: 700; }
.voice-option .vp-desc { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--muted); margin: 0.25rem 0; }
.voice-option .vp-sample { font-style: italic; font-size: 0.875rem; margin: 0.25rem 0 0; }

.studio-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; font-family: var(--font-ui); }
.studio-stats .stat { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 1.25rem; }
.studio-stats .stat b { font-size: 1.5rem; display: block; }
.notice { font-family: var(--font-ui); background: var(--tag-bg); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; }

/* ---- Writer AI translation workflow ---- */

.translation-workflow { max-width: 64rem; }
.translation-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 2rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
.translation-steps li {
  padding: 0.75rem;
  border-bottom: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.translation-steps li.active {
  border-color: var(--accent);
  color: var(--ink);
}
.workflow-panel {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
}
.workflow-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.workflow-heading > div { display: flex; align-items: center; gap: 0.75rem; }
.workflow-heading h2 { margin: 0; }
.workflow-heading p { max-width: 30rem; margin: 0; color: var(--muted); font-size: 0.875rem; }
.step-number {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--btn-ink);
  background: var(--btn-bg);
  font-weight: 700;
}
.source-editor { min-height: 20rem; font-family: var(--font-body); line-height: 1.8; }
.workflow-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.workflow-actions .btn:last-child { margin-left: auto; }
.scene-item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  border-left: 3px solid var(--brand);
  background: var(--tag-bg);
}
.scene-item p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.character-profile {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}
.character-profile h4 { margin: 0 0 1rem; }
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
.analysis-field { display: block; }
.analysis-field > span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.analysis-field textarea { min-height: 6rem; }
.analysis-field:last-child:nth-child(6) { grid-column: 1 / -1; }
.character-quote { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.glossary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
.btn-small { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
#translated-title { margin-bottom: 1rem; }
#translated-body { min-height: 24rem; }

@media (max-width: 720px) {
  .translation-steps { grid-template-columns: 1fr; }
  .workflow-heading { display: block; }
  .workflow-heading > div { margin-bottom: 0.5rem; }
  .analysis-grid, .glossary-row { grid-template-columns: 1fr; }
  .analysis-field:last-child:nth-child(6) { grid-column: auto; }
  .scene-item { grid-template-columns: 1fr; gap: 0.25rem; }
  .workflow-actions { align-items: stretch; flex-direction: column; }
  .workflow-actions .btn, .workflow-actions .btn:last-child { width: 100%; margin-left: 0; }
}

/* ---- surface separation ---- */

html[data-surface="writer"] body,
html[data-surface="admin"] body {
  font-family: var(--font-ui);
}
.surface-head .brand-sub { color: var(--ink); font-weight: 600; }
.site-head-minimal { padding-block: 0.75rem; }
.site-foot-minimal { padding-block: 1rem 2rem; }

/* ---- chapter 5 survey ---- */

.survey-dialog {
  width: min(38rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  font-family: var(--font-ui);
}
.survey-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 65%, transparent);
}
.survey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.survey-head .eyebrow { margin-bottom: 0.25rem; }
.dialog-close {
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}
.survey-dialog fieldset {
  display: grid;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 0;
  border: 0;
}
.survey-dialog legend {
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.survey-dialog label {
  display: block;
  margin-top: 0.75rem;
}
.survey-dialog fieldset label { margin-top: 0; }
.survey-dialog input[type="radio"],
.survey-dialog input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
}
.survey-dialog input[type="email"],
.survey-dialog input[type="text"],
.survey-dialog textarea {
  width: 100%;
}
.survey-dialog .btn { margin-top: 1rem; }
.form-error { color: var(--danger); font-weight: 600; }


/* ==========================================================================
   面別の仕上げ
   ========================================================================== */

/* ---- JA(writer/admin)= 原稿と朱: 明朝見出し・細罫・フラット・事務密度 ---- */

html[data-surface="writer"] h1,
html[data-surface="admin"] h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
html[data-surface="writer"] h2,
html[data-surface="admin"] h2 {
  font-family: var(--font-display);
  font-weight: 600;
}
html[data-surface="writer"] .btn,
html[data-surface="admin"] .btn,
html[data-surface="writer"] input[type="text"],
html[data-surface="writer"] input[type="url"],
html[data-surface="writer"] input[type="email"],
html[data-surface="writer"] textarea,
html[data-surface="writer"] select,
html[data-surface="admin"] input[type="text"],
html[data-surface="admin"] textarea,
html[data-surface="admin"] select {
  border-radius: 3px;
}
html[data-surface="writer"] .notice,
html[data-surface="writer"] .consent-box,
html[data-surface="writer"] .token-box,
html[data-surface="writer"] .voice-option,
html[data-surface="admin"] .notice,
html[data-surface="admin"] .token-box,
html[data-surface="admin"] .badge,
html[data-surface="writer"] .badge {
  border-radius: 3px;
}
html[data-surface="writer"] .pill,
html[data-surface="admin"] .pill {
  border-radius: 2px; /* 判子・印影の気配 */
  letter-spacing: 0.04em;
}
/* 必須マークと危険操作にだけ朱を許す */
html[data-surface="writer"] label > .req,
html[data-surface="writer"] .form-error,
html[data-surface="admin"] .form-error {
  color: var(--accent);
}
html[data-surface="writer"] .btn-danger,
html[data-surface="admin"] .btn-danger {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
html[data-surface="writer"] .btn-danger:hover,
html[data-surface="admin"] .btn-danger:hover {
  background: var(--pv-bg);
  filter: none;
}
/* Admin は密度高め */
html[data-surface="admin"] .console th,
html[data-surface="admin"] .console td {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}
html[data-surface="admin"] .wrap { max-width: 72rem; }

/* ---- Reader = Night Shelf: 読書タイポ・没入ヘッダー・固定次話 ---- */

html[data-surface="reader"] body { line-height: 1.8; }
html[data-surface="reader"] #chapter-body {
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: 0.004em;
}
html[data-surface="reader"] #chapter-body p { margin: 0 0 1.35em; }
html[data-surface="reader"] h1 { font-weight: 600; }
html[data-surface="reader"] .home-hero h1 {
  font-size: 2.375rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-surface="reader"] .progress { background: transparent; }
html[data-surface="reader"] #progress-bar { background: var(--accent); }

/* 没入モード: 章ページでスクロール中はヘッダーを畳む(reader.jsが .is-hidden を付与) */
html[data-surface="reader"] .site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform 0.25s ease;
}
html[data-surface="reader"] .site-head.is-hidden { transform: translateY(-100%); }

/* モバイル: 次話ボタンを画面下に固定(最終話は次話が無いので何も固定されない) */
@media (max-width: 40em) {
  html[data-surface="reader"] main[data-page="chapter"] { padding-bottom: 6.5rem; }
  html[data-surface="reader"] main[data-page="chapter"] .pager .next-big {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 25;
    text-align: center;
    box-shadow: var(--shadow);
  }
}


/* カード下端のメタ情報(N chapters free · ~X min + バッジ)。flex余白を吸収して底に固定。
   バッジ(inline-block+padding)とテキストのbaselineずれを避けるため、行自体をflexで中央揃え */
.card-count {
  margin: 0.25rem 0 0;
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---- 進行オーバーレイ(Writer: 解析・翻訳の待ち時間) ---- */
.progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(2px);
}
body.progress-open {
  overflow: hidden;
}
.progress-card {
  width: min(30rem, calc(100vw - 3rem));
  padding: 2rem 2.25rem;
  background: var(--raised);
  border: 1px solid var(--line, currentColor);
  text-align: center;
}
.progress-title {
  font-family: var(--font-display, inherit);
  font-size: 1.0625rem;
  margin: 0 0 1.25rem;
}
.progress-track {
  height: 4px;
  background: color-mix(in srgb, var(--ink, currentColor) 12%, transparent);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 2%;
  background: var(--accent, #a8322c);
  transition: width 0.3s ease;
}
.progress-meta {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  margin: 0.875rem 0 0.25rem;
  font-variant-numeric: tabular-nums;
}
.progress-overlay[hidden] {
  display: none;
}

/* ---- 文脈と発話の編集行(話者セレクト+台詞引用) ---- */
#scene-list .scene-item {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: 0.5rem;
  align-items: start;
  margin-bottom: 0.5rem;
}
#scene-list .scene-item textarea {
  min-height: 2.5rem;
}
@media (max-width: 40rem) {
  #scene-list .scene-item {
    grid-template-columns: 1fr;
  }
}

/* ---- 段落ごとの話者割り当て(文脈と発話) ---- */
.scene-summary {
  margin-bottom: 0.5rem;
}
.scene-summary p {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
#scene-list .speaker-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.375rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink, currentColor) 8%, transparent);
}
#scene-list .speaker-paragraph {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}
@media (max-width: 40rem) {
  #scene-list .speaker-row {
    grid-template-columns: 1fr;
  }
}
.speaker-map summary {
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  padding: 0.5rem 0;
  color: var(--accent, #a8322c);
}
.speaker-map summary:hover {
  text-decoration: underline;
}
.speaker-map[open] summary {
  margin-bottom: 0.25rem;
}

/* ---- 完結/連載バッジ・読了目安・人気ランキング(読者面) ---- */
.status-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;  /* admin用 .badge と異なりメタ行内で余白を持たない */
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status-badge-complete { background: var(--accent); color: #fff; }
.status-badge-ongoing { background: var(--tag-bg); color: var(--tag-ink); }

.hero-nav { margin: 0.75rem 0 0; font-family: var(--font-ui); }
.hero-nav a { color: var(--accent); text-decoration: none; }
.hero-nav a:hover { text-decoration: underline; }

.work-status { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.work-metabits { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.02em; }
.chapter-list .ch-min {
  float: right;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ranking { display: flex; flex-direction: column; gap: 1rem; }
.rank-row {
  display: grid;
  grid-template-columns: 2rem 64px 1fr;
  align-items: center;
  gap: 1rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rank-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.rank-row .rank-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-row .cover { width: 64px; border-radius: 4px; overflow: hidden; }
.rank-row .work-meta { display: flex; flex-direction: column; gap: 0.375rem; }
.rank-row h2 { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.rank-row:hover h2 { color: var(--accent); }
.rank-views { margin: 0; font-family: var(--font-ui); font-size: 0.8125rem; color: var(--muted); }
.rank-row .card-count { margin-top: 0; padding-top: 0; }

/* 公開作品がまだ無いときのサービス概要(empty state) */
.empty-catalog {
  max-width: 38rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
}
.empty-catalog h2 { margin: 0 0 0.75rem; }
.empty-catalog p { margin: 0 0 0.75rem; color: var(--ink); line-height: 1.7; }
.empty-catalog .empty-note {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---- モバイル: Netflix流の高密度ポスターグリッド(一覧性優先) ----
   1カラム全幅カバーは1画面1作品しか見えず一覧性が悪いため、40em未満では
   3列ポスター+2行タイトルのみに落とす。あらすじ・タグ・メタは詳細ページで見せる */
@media (max-width: 39.9375em) {
  .home-hero { margin: 0 0 1.25rem; }
  html[data-surface="reader"] .home-hero h1 { font-size: 1.375rem; }  /* 969行の2.375rem指定より優先 */
  .home-hero > p { font-size: 0.9375rem; margin-bottom: 0.5rem; }
  .catalog { grid-template-columns: repeat(3, 1fr); gap: 0.75rem 0.625rem; }
  .work-card {
    background: transparent;
    border: none;
    border-radius: 6px;
  }
  .work-card .cover { border-radius: 6px; }
  .work-card .work-meta { padding: 0.375rem 0.125rem 0; gap: 0.25rem; }
  .work-card h2 {
    font-size: 0.75rem;
    line-height: 1.35;
    font-family: var(--font-ui);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .work-card .tags,
  .work-card .card-synopsis,
  .work-card .card-count { display: none; }
}