/* 比較ツールのスタイル */
:root {
  /* 墨・金・紅を使った役割別の色 */
  --c-ink-950:#100D09; --c-ink-900:#17130E; --c-ink-850:#1E1912; --c-ink-800:#272017; --c-ink-700:#3A3022;
  --c-gold-700:#8A6F3C; --c-gold-600:#AB8B4C; --c-gold-400:#D2B06A; --c-gold-300:#E6C073; --c-gold-200:#EBD091;
  --c-parch-100:#FFF3DA; --c-parch-200:#EADFC6; --c-parch-400:#BFAE8C;
  --c-crimson-900:#7A0E0E; --c-crimson-700:#B01717; --c-crimson-500:#D23A2E; --c-rose-300:#FC6566;
  --c-jade-300:#8FD3A8; --c-yellow-300:#FFD43D; --c-white:#FFFFFF; --c-black:#000000;

  /* 役割 */
  --text:var(--c-parch-100); --text-sub:var(--c-parch-200); --text-desc:var(--c-parch-400);
  --bg:var(--c-ink-900); --bg-sub:var(--c-ink-850); --surface:var(--c-ink-800);
  --border:#4A3D29; --border-strong:var(--c-gold-600); --border-field:var(--c-gold-700);
  --primary:var(--c-crimson-700); --primary-hover:var(--c-crimson-500); --primary-active:var(--c-crimson-900);
  --accent:var(--c-gold-300); --accent-hover:var(--c-gold-200);

  --font-serif:"Hiragino Mincho ProN","Yu Mincho",serif;
  --font-latin:serif;

  /* 角丸・余白 */
  --r-8:6px; --r-12:8px; --r-16:10px;
  --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px; --s-40:40px; --s-64:64px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif;
  font-size:16px; line-height:1.7; letter-spacing:.02em;
}
button,input { font:inherit; letter-spacing:inherit; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--accent-hover); text-decoration-thickness:3px; }

/* フォーカス（DADS：黒アウトライン＋黄色リング） */
:where(a,button,input,summary):focus-visible {
  outline:3px solid var(--c-yellow-300); outline-offset:2px; box-shadow:0 0 0 5px var(--c-black);
}

.container { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
main.container { padding:var(--s-32) 0 var(--s-64); }

/* ヘッダー */
.site-header { background:radial-gradient(120% 140% at 15% 0%, #3B2E1B 0%, var(--c-ink-950) 60%); border-bottom:1px solid var(--border-strong); box-shadow:inset 0 -1px 0 #000; padding:var(--s-40) 0 var(--s-32); }
.site-header__eyebrow { margin:0 0 var(--s-8); color:var(--accent); font-family:var(--font-latin); font-size:.875rem; font-weight:500; letter-spacing:.14em; line-height:1.5; }
.site-header h1 { margin:0 0 var(--s-8); font-family:var(--font-serif); font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.4; font-weight:700; letter-spacing:.06em; color:var(--c-parch-100); text-shadow:0 2px 12px rgba(0,0,0,.6); }
.site-header__lead { margin:0; color:var(--text-sub); }

/* 見出し */
h2 { margin:0 0 var(--s-16); font-family:var(--font-serif); font-size:1.5rem; line-height:1.5; font-weight:700; letter-spacing:.06em; color:var(--c-gold-200); }
h3 { margin:var(--s-24) 0 var(--s-12); font-family:var(--font-serif); font-size:1.125rem; line-height:1.5; font-weight:700; letter-spacing:.04em; color:var(--c-gold-300); }

/* パネル */
.panel { position:relative; background:linear-gradient(180deg, var(--c-ink-800), var(--c-ink-850)); border:1px solid var(--border-strong); box-shadow:inset 0 0 0 3px var(--c-ink-850), inset 0 0 0 4px #5A4A30, 0 6px 20px rgba(0,0,0,.45); border-radius:var(--r-16); padding:var(--s-24); margin-bottom:var(--s-24); }
.section-head { display:flex; flex-wrap:wrap; gap:var(--s-12); justify-content:space-between; align-items:center; margin-bottom:var(--s-16); }
.section-head h2 { margin:0; }

/* フォーム */
.add-form { display:grid; grid-template-columns:1fr auto; gap:var(--s-16); align-items:end; }
label span { display:block; font-size:1rem; font-weight:700; margin-bottom:var(--s-8); line-height:1.5; }
input {
  width:100%; min-height:48px; border:1px solid var(--border-field); border-radius:var(--r-8);
  background:var(--c-ink-950); color:var(--text); padding:var(--s-12) var(--s-16);
}
input::placeholder { color:#8F8269; }
input:hover { border-color:var(--c-gold-300); }

/* ボタン（DADS：塗り／アウトライン／テキスト） */
button { cursor:pointer; }
button[type="submit"], .btn-primary {
  min-height:48px; padding:var(--s-12) var(--s-24); border-radius:var(--r-8);
  background:linear-gradient(180deg, var(--c-crimson-500), var(--primary)); color:var(--c-white); border:1px solid var(--c-gold-400); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); font-weight:700; line-height:1; letter-spacing:.06em;
}
button[type="submit"]:hover { background:var(--primary-hover); border-color:var(--c-gold-200); text-decoration:underline; text-underline-offset:3px; }
button[type="submit"]:active { background:var(--primary-active); }
.btn-outline, .quick {
  min-height:48px; padding:var(--s-12) var(--s-16); border-radius:var(--r-8);
  background:transparent; color:var(--accent); border:1px solid var(--c-gold-600); font-weight:700; line-height:1;
}
.btn-outline:hover, .quick:hover { background:rgba(230,192,115,.12); color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
.btn-sm { min-height:36px; padding:var(--s-8) var(--s-12); font-size:.875rem; }
.btn-text {
  min-height:44px; padding:0 var(--s-8); background:transparent; border:0; border-radius:var(--r-8);
  color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-size:1rem;
}
.btn-text:hover { color:var(--accent-hover); text-decoration-thickness:3px; }

.message { min-height:1.7em; margin-top:var(--s-12); color:var(--c-jade-300); font-size:.9375rem; }
.muted { color:var(--text-desc); font-size:.875rem; line-height:1.6; }

/* パーティカード */
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-12); }
.card { background:var(--c-ink-950); border:1px solid var(--border); border-radius:var(--r-12); padding:var(--s-16); }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-12); }
.card-title { font-family:var(--font-serif); font-weight:700; font-size:1.125rem; line-height:1.5; color:var(--c-parch-100); }
.card-sub { color:var(--text-sub); font-size:.875rem; line-height:1.6; }
.remove { min-height:36px; font-size:.9375rem; }
.empty { background:var(--bg-sub); border-radius:var(--r-12); padding:var(--s-16); color:var(--text-sub); }
.quick-list { display:flex; flex-wrap:wrap; gap:var(--s-8); margin-top:var(--s-12); }

/* 保存リスト */
.saved-list { list-style:none; margin:var(--s-16) 0 var(--s-8); padding:0; display:grid; gap:var(--s-8); }
.saved-item { display:flex; justify-content:space-between; align-items:center; gap:var(--s-12); background:var(--bg-sub); border-radius:var(--r-12); padding:var(--s-12) var(--s-16); }
.saved-actions { display:flex; align-items:center; gap:var(--s-8); flex-shrink:0; }

/* テーブル（Dense） */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-8); }
table { width:100%; border-collapse:collapse; min-width:760px; font-size:.9375rem; line-height:1.5; }
th,td { text-align:left; padding:var(--s-12) var(--s-16); border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle; }
thead th { background:var(--c-ink-950); font-weight:700; color:var(--c-gold-200); border-bottom-color:var(--border-strong); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:rgba(230,192,115,.06); }
.table-dense { min-width:620px; }

/* スコア */
.score { display:inline-flex; align-items:baseline; gap:6px; padding:2px var(--s-8); border-radius:6px; font-weight:700; font-variant-numeric:tabular-nums; }
.score small { font-size:.75rem; font-weight:400; }
.g1 { background:linear-gradient(180deg,var(--c-gold-300),var(--c-gold-600)); color:#1D110D; }
.g2 { background:rgba(230,192,115,.28); color:var(--c-gold-200); }
.g3 { background:rgba(230,192,115,.12); color:var(--c-gold-300); box-shadow:inset 0 0 0 1px rgba(230,192,115,.35); }
.g4 { background:rgba(255,243,218,.07); color:var(--c-parch-200); }
.g5 { color:#9A8C70; font-weight:400; }
.legend { display:flex; flex-wrap:wrap; gap:var(--s-8); margin-top:var(--s-12); }
.legend span { font-size:.8125rem; }

/* タグ */
.tag { display:inline-block; margin-left:6px; padding:0 6px; border-radius:4px; font-size:.75rem; font-weight:700; line-height:1.6; vertical-align:middle; }
.tag--warn { background:rgba(176,23,23,.35); color:#FFC9C2; box-shadow:inset 0 0 0 1px rgba(252,101,102,.5); }

/* ガイド */
.callout { background:linear-gradient(100deg, rgba(171,139,76,.28), rgba(171,139,76,.08)); border-left:4px solid var(--c-gold-300); border-radius:var(--r-8); padding:var(--s-16) var(--s-24); }
.callout__title { margin:0 0 var(--s-8); font-family:var(--font-serif); font-weight:700; color:var(--c-gold-200); letter-spacing:.04em; }
.callout ol { margin:0; padding-left:1.4em; }
.callout li + li { margin-top:var(--s-8); }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-16); margin-top:var(--s-24); }
.guide-card { background:var(--c-ink-950); border:1px solid var(--border); border-radius:var(--r-12); padding:var(--s-16) var(--s-24); }
.guide-card h3 { margin-top:0; }
.guide-card ul, .guide-list { margin:0; padding-left:1.2em; }
.guide-card li + li, .guide-list li + li { margin-top:6px; }
.guide-table td:first-child { font-weight:700; }
.source { margin:var(--s-24) 0 0; color:var(--text-desc); font-size:.8125rem; line-height:1.7; }

.notes p { margin:0 0 var(--s-8); }
.hidden { display:none !important; }
#partyAdvice p { margin:0 0 var(--s-8); }

@media (max-width:720px) {
  .panel { padding:var(--s-16); }
  .add-form, .cards, .guide-grid { grid-template-columns:1fr; }
  .add-form button { width:100%; }
  .saved-item { flex-direction:column; align-items:flex-start; }
}

strong { color:var(--c-gold-200); }
.score strong, .g1 strong { color:inherit; }
::selection { background:var(--c-crimson-700); color:#fff; }