/* SEISEI 税務ツールボックス — web design system.
   Derived from _templates/seisei-report/DESIGN.md (墨蓝+香槟金+暖纸白).
   Web-adapted: no rounded corners, hairlines, left gold borders, serif titles. */

:root {
  --navy: #0e1d31;
  --navy-2: #16294a;
  --ink: #0a1422;
  --gold: #9c7e52;
  --gold-light: #c9ac78;
  --paper: #fdfcfa;
  --paper-2: #f4f1eb;
  --text: #2b2f36;
  --text-soft: #5a606b;
  --text-mute: #8a8f98;
  --hair: #e4e0d7;
  --hair-strong: #cfc9bb;
  --risk: #9a3b32;
  --warn: #9a7320;
  --good: #3f6b4a;
  --serif: "Noto Serif JP", "Noto Serif SC", Georgia, serif;
  --sans: "Noto Sans JP", "Noto Sans SC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.8;
  font-feature-settings: "palt";
}
a { color: var(--navy); text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: 700; margin: 0; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* ---- top bar ---- */
.topbar { background: var(--navy); color: #fff; border-bottom: 1.2px solid var(--gold); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { font-family: var(--serif); font-size: 18px; color: #fff; letter-spacing: .04em; }
.brand small { color: var(--gold-light); font-size: 11px; letter-spacing: .3em; display: block; }
.langsw a { color: var(--gold-light); font-size: 12px; padding: 2px 6px; letter-spacing: .06em; }
.langsw a.on { color: #fff; border-bottom: 1px solid var(--gold); }

/* ---- hero ---- */
.hero { background: var(--navy); color: #fff; padding: 46px 0 40px; }
.hero .kick { color: var(--gold-light); font-family: var(--serif); font-size: 11px; letter-spacing: .4em; }
.hero h1 { color: #fff; font-size: 30px; margin: 10px 0; }
.hero p { color: #d7dce4; max-width: 640px; }
.hero .rule { width: 54px; height: 2px; background: var(--gold); margin: 16px 0; }

/* ---- section ---- */
.sec { margin: 34px 0; }
.sec-title { font-size: 13.5px; color: var(--navy); border-left: 3px solid var(--gold);
  padding-left: 10px; font-family: var(--sans); font-weight: 700; margin-bottom: 14px; letter-spacing: .04em; }

/* ---- card grid (hub) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { background: var(--paper-2); border-left: 3px solid var(--gold); padding: 18px 18px 16px;
  display: block; transition: background .18s ease; }
.card:hover { background: #efe9de; }
.card h3 { font-size: 16px; margin-bottom: 6px; }
.card p { color: var(--text-soft); font-size: 13px; margin: 0; }
.card .row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

/* ---- tags ---- */
.tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 8px; font-family: var(--sans); }
.tag.free { background: #dde9e0; color: var(--good); }
.tag.pro { background: var(--navy); color: var(--gold-light); }
.tag.entry { background: #f0e6c9; color: var(--warn); }

/* ---- forms ---- */
form.tool { background: var(--paper-2); border-left: 3px solid var(--gold); padding: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--navy); font-weight: 700; margin-bottom: 5px; }
.field input[type=text], .field input[type=number], .field select {
  width: 100%; padding: 10px 12px; border: 0.6px solid var(--hair-strong); background: #fff;
  font-family: var(--sans); font-size: 15px; border-radius: 0; }
.field .hint { font-size: 12px; color: var(--text-mute); margin-top: 3px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
button, .btn { font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 0; padding: 12px 22px; background: var(--navy); color: #fff; letter-spacing: .04em; }
button:hover, .btn:hover { background: var(--navy-2); }
.btn.gold { background: var(--gold); color: #fff; }
.btn.gold:hover { background: #86693f; }
.btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--hair-strong); }

/* ---- result ---- */
.headline-amt { font-family: var(--serif); font-size: 40px; color: var(--navy); font-weight: 700; }
.headline-amt .u { font-size: 15px; color: var(--gold); margin-left: 4px; }
.headline-cap { color: var(--text-soft); font-size: 13px; }
.result-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.result-table th, .result-table td { text-align: left; padding: 9px 11px; border-bottom: 0.6px solid var(--hair); font-size: 14px; }
.result-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.result-table .note { color: var(--text-mute); font-size: 12px; }

/* ---- law chip ---- */
.law { color: var(--gold); font-size: 12px; font-weight: 600; }
.law::before { content: "§ "; opacity: .7; }

/* ---- boxes ---- */
.box { border-left: 3px solid var(--navy); background: var(--paper-2); padding: 12px 16px; margin: 12px 0; font-size: 13px; }
.box.warn { border-color: var(--warn); background: #f7f1e3; }
.box.good { border-color: var(--good); background: #edf2ee; }
.box .bt { font-weight: 700; color: var(--ink); }

/* ---- paywall / locked ---- */
.locked { position: relative; }
.locked .veil { background: repeating-linear-gradient(-45deg, #f4f1eb, #f4f1eb 8px, #efe9de 8px, #efe9de 16px);
  border-left: 3px solid var(--gold); padding: 16px; text-align: center; color: var(--text-soft); font-size: 13px; }
.locked .veil .btn { margin-top: 10px; }

/* ---- VIP lane (≥¥2億) ---- */
.vip { background: var(--navy); color: #fff; border-left: 3px solid var(--gold); padding: 22px 24px; margin: 20px 0; }
.vip h3 { color: #fff; font-size: 18px; }
.vip p { color: #d7dce4; font-size: 14px; }
.vip .btn.gold { margin-top: 12px; }

/* ---- disclaimer / footer ---- */
.disclaimer { font-size: 12px; color: var(--text-mute); border-top: 0.6px solid var(--hair); padding-top: 12px; margin-top: 22px; }
footer { background: var(--navy); color: #aeb6c2; font-size: 12px; padding: 22px 0; margin-top: 40px; }
footer a { color: var(--gold-light); }

@media (max-width: 560px) {
  .hero h1 { font-size: 24px; }
  .headline-amt { font-size: 30px; }
}