/* 人生残高 — 「深緑の通帳」v2(Fable改稿 2026-08-05)。色・書体を勝手に変えない
   造形の規範: 通帳の実物に寄せる。角は小さく、罫線は細く、数字は印字、装飾は箔と印だけ。 */
:root {
  --bg: #07120E;
  --card1: #0E241B;
  --card2: #0A1C15;
  --panel: #0A1F17;
  --ink: #F2EDE1;
  --sub: #8CA396;
  --gold: #C9A86A;
  --gold-hi: #E3CA92;
  --gold-lo: #8F7443;
  --rule: #24443A;
  --rule-dot: #1D372E;
  --track: #16322A;
  --line-green: #06C755;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--bg);
  /* 布クロスの綾目(ごく薄く) */
  background-image:
    repeating-linear-gradient(45deg, rgba(242, 237, 225, 0.012) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(242, 237, 225, 0.012) 0 1px, transparent 1px 5px);
  padding: 12px;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 420px; margin: 0 auto; }
@media (min-width: 768px) {
  body { padding-top: 48px; }
}
/* 金額(残高・数値)は題字と同じ明朝、印字メタ(名義・日付・見出し)は日本語向け等幅 M PLUS 1 Code */
.num, .mono { font-family: 'Shippori Mincho', serif; font-variant-numeric: tabular-nums; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* ---------- 通帳の躯体 ---------- */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--card1), var(--card2));
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 26px 22px 22px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
/* 箔押しの内枠(全ページ共通) */
.card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 168, 106, 0.28);
  border-radius: 2px;
  pointer-events: none;
}
/* 紙目 */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card > * { position: relative; z-index: 1; }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand::before { content: ''; width: 4px; height: 16px; background: var(--gold); }
/* 角印(2字×2行・わずかに傾く。全ページ「人生/残高」で統一) */
.tag {
  font-family: 'Shippori Mincho', serif;
  width: 33px;
  padding: 4px 0;
  line-height: 1.25;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  color: var(--gold);
  border: 1px solid var(--gold-lo);
  border-radius: 1px;
  transform: rotate(-2.5deg);
  opacity: 0.92;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: 'M PLUS 1 Code', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sub);
}
.card-foot .credit { font-family: 'Shippori Mincho', serif; font-size: 10.5px; letter-spacing: 0; }

/* ---------- 表紙(入力ビュー) ---------- */

/* 表紙頭部: 中央の題箋+全幅罫。罫から下は左揃えの帳簿(二層構造) */
.cover-head { text-align: center; padding: 22px 0 26px; border-bottom: 1px solid var(--rule); }
.cover-eyebrow {
  font-size: 11px;
  color: rgba(201, 168, 106, 0.7);
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  margin-bottom: 16px;
}
.cover-title {
  display: inline-block;
  margin: 0 auto;
  width: fit-content;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.25em;
  /* 字間は最終グリフの右にも付くため、左paddingに同量を足して光学中央を取る */
  padding: 14px 44px 14px calc(44px + 0.25em);
  color: var(--gold);
  background: rgba(201, 168, 106, 0.05);
  border: 1px solid var(--gold-lo);
  outline: 1px solid rgba(201, 168, 106, 0.35);
  outline-offset: 3px;
  border-radius: 1px;
}

.catch { font-size: 22px; font-weight: 600; letter-spacing: 0.06em; text-align: left; margin-top: 24px; line-height: 1.7; text-wrap: balance; }
.lead { font-size: 14px; color: var(--sub); text-align: left; line-height: 1.9; margin-top: 10px; text-wrap: pretty; }

/* 名義窓(表紙の記入欄) */
.window {
  margin-top: 22px;
  padding: 6px 4px 18px;
  background: none;
  border: 0;
  border-top: 1px solid rgba(201, 168, 106, 0.25);
  border-radius: 0;
}
.field { display: block; margin-top: 16px; }
.flabel { display: block; font-size: 12px; color: var(--sub); letter-spacing: 0.3em; margin-bottom: 8px; }
input[type='number'] {
  width: 100%;
  height: 46px;
  background: var(--track);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: 'M PLUS 1 Code', monospace;
  font-size: 18px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
/* 通帳にスピナーは無い */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number']:focus { outline: 1px solid var(--gold); }
.sexes { display: flex; gap: 10px; }
.sex { flex: 1; }
.sex input { position: absolute; opacity: 0; }
.sex span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--track);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--sub);
  cursor: pointer;
}
.sex input:checked + span { border-color: var(--gold); color: var(--ink); }
.sex input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: 2px; }
.submit {
  width: 100%;
  height: 48px;
  margin-top: 22px;
  background: var(--gold);
  border: 1px solid var(--gold-hi);
  border-radius: 3px;
  color: #081611;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  cursor: pointer;
}
.submit:hover { background: var(--gold-hi); }
.note { font-size: 10.5px; color: var(--sub); line-height: 1.8; margin-top: 16px; }

/* ---------- 記帳ページ(結果ビュー) ---------- */

/* 名義と照会日の印字行 */
.pageinfo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'M PLUS 1 Code', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sub);
  margin-top: 18px;
}
/* 帳簿の律: 左に摘要・右に数字(残高の見出しと数字も例外にしない) */
.heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--sub);
  letter-spacing: 0.2em;
  text-align: left;
  margin-top: 18px;
}
.heading::before { content: ''; width: 3px; height: 13px; background: var(--gold); }
.big { text-align: right; margin-top: 8px; line-height: 1; white-space: nowrap; }
.big .num { font-weight: 600; font-size: clamp(56px, 20vw, 92px); letter-spacing: 0.02em; }
.big .unit { font-size: 26px; color: var(--gold); margin-left: 6px; }
.subline { text-align: right; color: var(--sub); font-size: 13.5px; margin-top: 12px; }

.meter { margin-top: 12px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.meter-top span:first-child { font-size: 12px; letter-spacing: 0.2em; color: var(--sub); }
.mnum { font-family: 'Shippori Mincho', serif; font-size: 18px; color: var(--ink); }
.mnum .munit { font-size: 12px; color: var(--sub); margin-left: 2px; }
.track { position: relative; height: 8px; background: var(--track); overflow: hidden; }
.fill { height: 100%; background: var(--gold); }
/* 目盛(10%刻み) */
.track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--bg) calc(10% - 1px) 10%);
  opacity: 0.55;
}

/* 本日の引き落とし(通帳の自動引き落とし行) */
.debit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 11px 12px;
  border-top: 1px solid var(--gold-lo);
  border-bottom: 1px solid var(--gold-lo);
  background: rgba(201, 168, 106, 0.07);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.debit .val { font-size: 18px; color: var(--gold-hi); }

/* 台帳(行番号つき・印字) */
.items { list-style: none; margin-top: 18px; border-top: 1px solid var(--rule); counter-reset: row; }
.items li {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--rule-dot);
  font-size: 14px;
  color: var(--sub);
}
.items li:nth-child(odd) { background: rgba(242, 237, 225, 0.014); }
.ledger-head {
  font-family: 'M PLUS 1 Code', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--sub);
  opacity: 0.85;
  min-height: 24px;
  border-bottom: 1px solid var(--rule);
}
.ledger-head span:last-child { margin-left: auto; }
.items li:not(.ledger-head) { counter-increment: row; }
.items li:not(.ledger-head)::before {
  content: counter(row, decimal-leading-zero);
  font-family: 'M PLUS 1 Code', monospace;
  font-size: 9px;
  color: var(--gold-lo);
}
.items .val { font-size: 12px; color: var(--sub); margin-left: auto; }
.items .val b { font-family: 'Shippori Mincho', serif; font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: 0.04em; }
.items .sakura .val b { color: var(--gold); }

.turn { text-align: left; margin-top: 24px; }
.turn::before { content: ''; display: block; width: 100%; border-top: 1px dotted rgba(201, 168, 106, 0.35); margin: 0 0 14px; }
.turn p { font-size: 17px; line-height: 2; letter-spacing: 0.05em; }
.turn + .items { margin-top: 40px; }

.cta-block { margin-top: 22px; text-align: center; }
.cta-head { font-size: 16px; }
.cta-body { font-size: 13px; color: var(--sub); line-height: 1.9; margin-top: 8px; text-align: left; text-wrap: pretty; }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  margin-top: 12px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.cta:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-green); }

/* 記帳の印字アニメーション(控えめに1回だけ) */
@media (prefers-reduced-motion: no-preference) {
  #resultView:not([hidden]) { animation: print 0.3s ease-out; }
  @keyframes print {
    from { opacity: 0; transform: translateY(4px); }
  }
}

/* ---------- 文章ページ(プライバシーポリシー等) ---------- */
.prose h1 { font-size: 20px; font-weight: 600; margin-top: 24px; line-height: 1.6; }
.prose h2 { font-size: 13px; color: var(--gold); letter-spacing: 0.08em; margin-top: 28px; }
.prose p { font-size: 13px; line-height: 2; margin-top: 12px; }
.prose ul { margin: 12px 0 0 1.3em; font-size: 13px; line-height: 2; }
.prose strong { color: var(--gold-hi); font-weight: 600; }
.prose .meta { font-size: 11px; color: var(--sub); margin-top: 28px; }

/* カード外の小さなページフッター(シェア用スクショのカードには載せない) */
.pagefoot { text-align: center; margin-top: 16px; }
.pagefoot a {
  font-size: 11px;
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* カード下(スクショに入れない注記・シェア) */
#below { margin-top: 16px; }
.share {
  width: 100%;
  height: 46px;
  margin-top: 12px;
  background: none;
  border: 1px solid rgba(201, 168, 106, 0.6);
  border-radius: 3px;
  color: var(--ink);
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.share:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
#below .note { margin-top: 12px; }