/* 解説ページ共通の見た目。色やフォントは index.html と同じものを使っています */
:root {
  --bg: #eeedf3;
  --paper: #fbfaf7;
  --ink: #23223a;
  --muted: #615f78;
  --line: #d6d3e0;
  --brass: #9a7426;
  --brass-soft: #f2e8d2;
  --focus: #5a4fb0;
  --f-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --f-num: "Cormorant Garamond", "Shippori Mincho", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15142a; --paper: #1f1e38; --ink: #ecebf5; --muted: #a9a7c2;
    --line: #34325a; --brass: #d8b569; --brass-soft: #2e2a3c; --focus: #a69cf0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15142a; --paper: #1f1e38; --ink: #ecebf5; --muted: #a9a7c2;
  --line: #34325a; --brass: #d8b569; --brass-soft: #2e2a3c; --focus: #a69cf0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 15px; line-height: 1.85;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px 56px;
  margin: 0;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: 600px; margin: 0 auto; display: grid; gap: 32px; }
.back { font-size: 13px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); text-decoration: underline; }

.hero { display: grid; gap: 6px; }
.eyebrow { font-size: 12px; letter-spacing: .18em; color: var(--brass); font-weight: 700; }
.hero-row { display: flex; gap: 20px; align-items: center; }
.num {
  font-family: var(--f-num); font-weight: 600; font-size: 104px; line-height: 1; color: var(--brass);
  min-width: 1.3em; text-align: center; font-variant-numeric: lining-nums;
}
.hero-text { min-width: 0; display: grid; gap: 2px; }
.kind { font-size: 13px; color: var(--muted); }
h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 6vw, 32px); line-height: 1.4; margin: 0; text-wrap: balance; }

/* 見出しを言葉の切れ目で改行するための区切り */
.kw-part { display: inline-block; }

section { display: grid; gap: 10px; }
h2 {
  font-family: var(--f-display); font-size: 19px; margin: 0; line-height: 1.5;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
section p { margin: 0; max-width: 34em; }

.traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.trait { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
.trait h3 { margin: 0 0 2px; font-size: 12px; letter-spacing: .12em; color: var(--brass); }
.trait p { margin: 0; font-size: 14px; }

.hints { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hints li { padding-left: 1.4em; position: relative; }
.hints li::before { content: "◇"; position: absolute; left: 0; color: var(--brass); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--f-num); font-size: 20px; font-weight: 600; line-height: 1; text-decoration: none;
  background: var(--brass-soft); color: var(--ink); border-radius: 4px; padding: 8px 0; width: 46px; text-align: center;
}
.chip:hover { opacity: .85; }
.chip[aria-current="page"] { background: var(--ink); color: var(--paper); }

.cta {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 20px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.cta p { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 700; }
.btn {
  display: inline-block; font-weight: 700; text-decoration: none;
  background: var(--ink); color: var(--paper); border-radius: 4px; padding: 12px 22px;
}
.btn:hover { opacity: .88; }

.note { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.7; }

/* 自己紹介ページ */
.profile { display: flex; gap: 18px; align-items: center; }
.avatar {
  width: 88px; height: 88px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--brass-soft); color: var(--brass);
  display: grid; place-items: center; font-family: var(--f-num); font-size: 40px; font-weight: 600;
}
.profile-text { min-width: 0; display: grid; gap: 2px; }
.profile-text .kind { font-size: 13px; color: var(--muted); }
.btn-x { display: inline-flex; align-items: center; gap: 8px; justify-self: start; background: #000; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-x { background: #fff; color: #000; } }
:root[data-theme="dark"] .btn-x { background: #fff; color: #000; }
.btn-x svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* まだ文章が入っていない場所の目印(文章を入れたら class="todo" は消してOK) */
.todo { outline: 2px dashed #c0392b; outline-offset: 3px; background: rgba(192, 57, 43, .06); }

/* 全ページ共通のいちばん下のリンク */
.site-foot {
  max-width: 600px; margin: 48px auto 0; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px;
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 420px) {
  .num { font-size: 80px; }
  .btn-x { width: 100%; justify-content: center; }
  .cta .btn { width: 100%; text-align: center; }
}