/* Manga Lore — 案B「藍」のデザインシステム準拠
   仕様の正本: dev/デザインシステム.md */

:root{
  --paper:#FBFAF7;
  --ink:#16233D;
  --body:#3B4761;
  --muted:#616C80;      /* 旧#7C879Cは紙上3.47:1でWCAG AA未達(整合性監査 2026-07-28) */
  --line:#E4E0D6;
  --ai:#1B3A6B;
  --kincha:#C8A45C;     /* 塗り・罫専用。文字色には使わない(紙上2.26:1) */
  --kincha-text:#8A6C2C;/* 金茶の文字用ダーク版(紙上4.72:1) */

  /* 余白は7段階のみ。中間値を作らない */
  --s1:4px; --s2:8px; --s3:14px; --s4:20px; --s5:26px; --s6:40px; --s7:64px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:2.05; letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}

/* グレインを薄く載せる。フラットにしない */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:720px; margin:0 auto; padding:0 var(--s5); position:relative; z-index:2}
.wrap--wide{max-width:900px}

/* --- ヘッダー(非対称。右に余白を残す) --- */
header{padding:var(--s7) 0 var(--s6)}
.brand{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ai); font-weight:700; text-decoration:none; display:inline-block;
}
h1{
  color:var(--ink); font-size:clamp(28px,4.2vw,42px); line-height:1.46;
  font-weight:600; letter-spacing:0; margin:var(--s4) 0 0; max-width:16em;
}
.accentbar{height:3px; width:40px; background:var(--kincha); margin:var(--s5) 0 var(--s4)}
.lead{max-width:32em; margin:0 0 var(--s3)}

h2{
  color:var(--ink); font-size:20px; line-height:1.46; font-weight:600;
  margin:var(--s7) 0 var(--s3); letter-spacing:0;
}
h3{color:var(--ink); font-size:16px; font-weight:600; margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s3)}
a{color:var(--ai); text-decoration:underline; text-underline-offset:2px}
ul,ol{margin:0 0 var(--s3); padding-left:var(--s4)}
li{margin-bottom:var(--s1)}
strong{color:var(--ink); font-weight:600}
small,.small{font-size:13px; color:var(--muted); line-height:1.9}

/* --- 表 --- */
table{width:100%; border-collapse:collapse; font-size:14px; margin:0 0 var(--s4)}
th,td{text-align:left; padding:var(--s3); border-bottom:1px solid var(--line); vertical-align:top; line-height:1.8}
th{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}

/* --- ウェイトリストのフォーム --- */
.form{display:flex; gap:var(--s2); margin:var(--s5) 0 var(--s3); flex-wrap:wrap}
input[type=email]{
  flex:1 1 260px; min-width:0; padding:var(--s3) var(--s4);
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:15px; font-family:inherit; border-radius:0;
}
input[type=email]:focus{outline:none; border-color:var(--ai)}
button{
  padding:var(--s3) var(--s5); border:0; background:var(--ai); color:var(--paper);
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-family:inherit; cursor:pointer; border-radius:0;
  transition:opacity .3s ease-out;
}
button:hover{opacity:.85}
button:disabled{opacity:.45; cursor:default}
.formnote{font-size:12.5px; color:var(--muted); margin:0}
.status{margin:var(--s3) 0 0; font-size:14px; min-height:1.5em}
.status--ok{color:var(--ai); font-weight:600}
.status--err{color:#9A3B2E}

/* --- バッジ(真偽ラベルの見せ方。塗り=確定・輪郭線=未確定) --- */
.badge{
  display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; padding:5px 10px; margin-right:var(--s1);
}
.badge--established{background:var(--ai); color:var(--paper)}
.badge--disputed{border:1px solid var(--ai); color:var(--ai)}
.badge--fan{border:1px solid var(--kincha); color:var(--kincha-text); font-style:italic}

/* --- 特徴の並び --- */
.feature{padding:var(--s5) 0; border-top:1px solid var(--line)}
.feature .kicker{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ai); font-weight:700; margin-bottom:var(--s2)
}

/* --- ドラフト警告(公開前に必ず消す) --- */
.draftbanner{
  background:#8A2A1E; color:#fff; padding:var(--s3) var(--s5);
  font-size:13.5px; line-height:1.8; position:relative; z-index:3;
}
.draftbanner strong{color:#fff}
mark{background:#F6E7B8; color:#5A4412; padding:1px 5px; font-weight:600}

/* --- フッター --- */
footer{
  margin-top:var(--s7); padding:var(--s6) 0 var(--s7);
  border-top:1px solid var(--line); font-size:13px; color:var(--muted);
}
footer a{color:var(--muted)}
.footlinks{display:flex; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s3)}

@media(max-width:600px){
  body{font-size:14.5px}
  header{padding:var(--s6) 0 var(--s5)}
}

/* 動きはゆったり静的。バウンスを使わない */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important}
}