/* 侍TODO のページ: アプリと同じ「闇に光る刃」。墨の地・刃の白・朱ひとつ、見出しは明朝。 */
:root {
  --night: #0a0b0d;
  --night-2: #15171b;
  --night-3: #1c1f24;
  --hairline: #2a2e35;
  --blade: #e6eaf0;
  --steel: #9aa3ae;
  --shu: #f05a48;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --gothic: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  color: var(--blade);
  font-family: var(--gothic);
  line-height: 1.9;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(78, 110, 158, 0.22), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, rgba(240, 90, 72, 0.12), transparent 60%),
    var(--night);
  min-height: 100vh;
}
a { color: var(--shu); text-underline-offset: 3px; }
.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto; padding: 20px 16px 12px;
  border-bottom: 1px solid var(--hairline);
}
.bar .mark { display: flex; align-items: center; gap: 10px; color: var(--blade); text-decoration: none; }
.bar .mark img { width: 36px; height: 36px; }
.bar .mark span { font-family: var(--mincho); font-size: 1.25rem; letter-spacing: 0.2em; }
.bar nav { margin-left: auto; display: flex; gap: 4px; }
.bar nav a {
  color: var(--steel); text-decoration: none; font-size: 0.85rem;
  padding: 6px 12px; border-radius: 999px;
}
.bar nav a[aria-current="page"] { color: var(--night); background: var(--shu); }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
h1 { font-family: var(--mincho); font-weight: 600; font-size: 1.8rem; letter-spacing: 0.08em; line-height: 1.4; margin: 0 0 16px; }
h2 {
  font-family: var(--mincho); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.06em;
  margin: 2.4em 0 0.8em; padding-top: 0.8em; border-top: 1px solid var(--hairline);
}
h2::before { content: ""; display: block; width: 28px; height: 2px; background: var(--shu); margin-bottom: 12px; }
p { margin: 0 0 1em; }
.muted { color: var(--steel); }
.hero { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.hero img { width: 112px; height: 112px; border-radius: 26px; border: 1px solid var(--hairline); flex: none; }
.qa {
  background: linear-gradient(180deg, rgba(230, 234, 240, 0.07), rgba(230, 234, 240, 0.02));
  border: 1px solid rgba(230, 234, 240, 0.12);
  border-radius: 20px; padding: 16px 20px; margin: 0 0 12px;
}
.qa strong { font-family: var(--mincho); }
.qa p { margin: 0; }
table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
th { color: var(--steel); font-weight: 600; }
footer { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; color: var(--steel); font-size: 0.8rem; border-top: 1px solid var(--hairline); }
@media (max-width: 480px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .bar nav { margin-left: 0; }
}