/* トレカログ デザイントークンとスタイル（方針は docs/DESIGN.md） */
:root {
  --ink: #16244a;
  --ink-2: #3a4668;
  --paper: #f3f5f9;
  --surface: #ffffff;
  --line: #d5dbe7;
  --line-strong: #16244a;
  --volt: #ffc400;
  --volt-soft: #fff3c4;
  --grass: #16855a;
  --fire: #d9480f;
  --steel: #6b7489;
  --link: #1f4fc4;
  --k-pokemon: #16244a;
  --k-item: #2f7ed8;
  --k-tool: #8e5bd0;
  --k-supporter: #e0612a;
  --k-stadium: #2e9d5b;
  --k-energy: #ffc400;
  --k-other: #99a2b8;
  --focus: #ffc400;
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf6; --ink-2: #b9c1d6; --paper: #0e1730; --surface: #16213f; --line: #2a3758;
    --line-strong: #e8ecf6; --volt-soft: #3b3311; --grass: #4acb8e; --fire: #ff8a4c; --steel: #99a2b8;
    --link: #9cbcff; --k-pokemon: #e8ecf6; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8ecf6; --ink-2: #b9c1d6; --paper: #0e1730; --surface: #16213f; --line: #2a3758;
  --line-strong: #e8ecf6; --volt-soft: #3b3311; --grass: #4acb8e; --fire: #ff8a4c; --steel: #99a2b8;
  --link: #9cbcff; --k-pokemon: #e8ecf6; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--volt); color: #16244a; padding: 4px 10px; z-index: 10; }

/* ---------- ヘッダー：対戦マットの紺 ---------- */
.site-header { background: #16244a; color: #fff; }
.header-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding-top: 14px; padding-bottom: 0; }
.logo { font-weight: 900; font-size: 1.25rem; color: #fff; text-decoration: none; letter-spacing: .02em; font-feature-settings: "palt"; padding-bottom: 10px; }
.logo-mark { display: inline-block; width: .7em; height: .7em; background: var(--volt); transform: rotate(45deg); margin-right: .45em; vertical-align: .02em; }
.global-nav { display: flex; gap: 0 18px; flex-wrap: wrap; font-size: .875rem; font-weight: 500; }
.global-nav a { color: #c9d2e8; text-decoration: none; padding: 4px 0 10px; border-bottom: 3px solid transparent; }
.global-nav a:hover { color: #fff; }
.global-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--volt); }

/* ---------- 文字 ---------- */
main { padding-top: 8px; padding-bottom: 64px; }
h1, h2, h3 { font-feature-settings: "palt"; letter-spacing: .01em; }
h1 { font-size: 2.25rem; line-height: 1.35; font-weight: 900; margin: 20px 0 12px; max-width: 26em; }
h2 { font-size: 1.5rem; line-height: 1.45; font-weight: 700; margin: 48px 0 14px; padding-top: 14px; border-top: 2px solid var(--line-strong); }
h3 { font-size: 1.125rem; line-height: 1.5; font-weight: 700; margin: 28px 0 8px; }
p, ul, ol, dl { max-width: 38em; }
.lead { font-size: 1.0625rem; color: var(--ink-2); margin-top: 0; }
.result-sub, .sources, .page-updated { font-size: .875rem; color: var(--steel); }

.breadcrumbs ol { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: .75rem; color: var(--steel); }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; }
.breadcrumbs a { color: var(--steel); }

/* ---------- 面 ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); padding: 16px 18px; }
.panel + .panel { margin-top: 12px; }
.notice { background: var(--volt-soft); border-left: 6px solid var(--volt); padding: 12px 16px; font-size: .9375rem; max-width: 46em; }

.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px 14px; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--ink); }
.card-title { display: block; font-weight: 700; line-height: 1.55; font-feature-settings: "palt"; }
.card-meta { display: block; font-size: .875rem; font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.card-text { display: block; font-size: .875rem; color: var(--steel); margin-top: 2px; }

/* 状態バッジ：角なしの小さな札 */
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 0 8px; line-height: 1.8; white-space: nowrap; vertical-align: .1em; color: #fff; }
.badge.open { background: var(--grass); }
.badge.soon { background: var(--fire); }
.badge.closed { background: var(--steel); }
.badge.info { background: #16244a; color: #fff; outline: 1px solid var(--line); }

/* ---------- 表とデータバー ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: .9375rem; }
th, td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--line-strong); font-size: .8125rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
tbody th { font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; font-weight: 500; }
th.num { white-space: normal; min-width: 4.5em; }
td.name { min-width: 8.5em; font-weight: 700; }
/* パーセントのセル：数値の下に、値の大きさの黄色い棒 */
td.bar { background-image: linear-gradient(var(--volt), var(--volt)); background-repeat: no-repeat; background-position: right 10px bottom 5px; background-size: calc((100% - 20px) * var(--v, 0)) 4px; font-weight: 700; padding-bottom: 13px; }

/* ---------- 大きな数字 ---------- */
.countdown, .result-main {
  font-size: 4.5rem; line-height: 1; font-weight: 900; letter-spacing: -.02em; color: var(--ink);
  font-feature-settings: "palt"; font-variant-numeric: tabular-nums;
}
.countdown small, .result-main small { font-size: 1.125rem; font-weight: 700; letter-spacing: 0; margin-left: .15em; }

/* メーター：確率を黄色い棒で */
.meter { height: 14px; background: var(--line); margin: 12px 0 6px; position: relative; max-width: 38em; }
.meter > span { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); background: var(--volt); }
.meter-scale { display: flex; justify-content: space-between; max-width: 38em; font-size: .75rem; color: var(--steel); }

/* ---------- トップ：日付トラック ---------- */
.track { margin: 8px 0 0; }
.track-days { display: grid; grid-template-columns: repeat(var(--days, 30), 1fr); gap: 2px; height: 40px; }
.track-days i { background: var(--surface); border: 1px solid var(--line); position: relative; }
.track-days i.today { background: var(--ink); border-color: var(--ink); }
.track-days i.is-release { background: var(--volt); border-color: var(--volt); }
.track-days i.is-deadline { background: var(--fire); border-color: var(--fire); }
.track-days i.is-event { background: var(--k-item); border-color: var(--k-item); }
.track-days i.weekend { border-bottom-width: 3px; }
.track-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--steel); margin-top: 4px; }
.track-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; color: var(--ink-2); margin: 10px 0 0; padding: 0; list-style: none; }
.track-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.agenda { list-style: none; margin: 18px 0 0; padding: 0; max-width: none; }
.agenda li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.agenda .d { font-size: 2.25rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.agenda .d small { font-size: .875rem; font-weight: 700; letter-spacing: 0; margin-left: 2px; }
.agenda .d.today { color: var(--grass); }
.agenda .what { font-weight: 700; line-height: 1.5; }
.agenda .when { display: block; font-weight: 400; font-size: .875rem; color: var(--steel); }
.agenda .kind { display: inline-block; font-size: .75rem; font-weight: 700; padding: 0 0 0 6px; margin-right: 8px; vertical-align: .1em; color: var(--ink-2); border-left: 8px solid var(--c); line-height: 1.3; }

/* ---------- デッキ帯：60枚を60マスで ---------- */
.deck-strip { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; margin: 8px 0 0; max-width: 46em; }
.deck-strip i { aspect-ratio: 63 / 88; background: var(--c); }
.deck-strip.mini { grid-template-columns: repeat(60, 1fr); gap: 1px; margin: 10px 0 2px; }
.deck-strip.mini i { aspect-ratio: auto; height: 10px; }
.deck-legend { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; max-width: none; }
.deck-legend li { font-size: .875rem; color: var(--ink-2); }
.deck-legend li::before { content: ""; display: inline-block; width: 12px; height: 16px; margin-right: 6px; vertical-align: -3px; background: var(--c); }
.deck-legend b { font-size: 1.25rem; font-weight: 900; color: var(--ink); margin-right: 2px; }
.k-pokemon { --c: var(--k-pokemon); } .k-item { --c: var(--k-item); } .k-tool { --c: var(--k-tool); }
.k-supporter { --c: var(--k-supporter); } .k-stadium { --c: var(--k-stadium); } .k-energy { --c: var(--k-energy); }
.k-technical { --c: var(--k-other); }
.k-release { --c: var(--volt); } .k-deadline { --c: var(--fire); } .k-event { --c: var(--k-item); } .k-today { --c: var(--ink); }

/* ---------- 数値の並び（区切り記号の代わり） ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 0; padding: 0; max-width: none; }
.stats div { margin: 0; }
.stats dt { font-size: .75rem; color: var(--steel); }
.stats dd { margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.stats dd small { font-size: .8125rem; font-weight: 700; margin-left: 2px; }
.card .stats { gap: 4px 18px; margin-top: 8px; }
.card .stats dd { font-size: 1.125rem; }

/* ---------- タイムライン・記録 ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line); margin-left: 5px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; background: var(--ink); }
.timeline li.future::before { background: var(--surface); outline: 2px solid var(--ink); outline-offset: -2px; }
.timeline time { font-weight: 700; display: block; font-size: .875rem; }

.log-entry { border-bottom: 1px solid var(--line); padding: 16px 0; }
.log-entry:first-child { padding-top: 4px; }
.log-entry:last-child { border-bottom: 0; }
.log-entry h3 { margin: 2px 0 6px; }
.log-date { font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 8px; }
.tag { font-size: .75rem; color: var(--ink-2); border: 1px solid var(--line); padding: 0 6px; line-height: 1.7; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.kv dt { color: var(--steel); font-size: .875rem; }
.kv dd { margin: 0; }

.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: none; }
.event { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--steel); padding: 12px 16px; }
.event.st-open { border-left-color: var(--grass); }
.event.st-soon { border-left-color: var(--fire); }
.event.st-info { border-left-color: var(--k-item); }
.event-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .875rem; color: var(--steel); }
.event-title { display: block; font-weight: 700; margin: 6px 0 8px; line-height: 1.55; font-size: 1.0625rem; }
.event-kv { font-size: .9375rem; }
.event-cond { margin: 10px 0 4px; padding-left: 1.2em; font-size: .875rem; color: var(--ink-2); }

.glossary { margin: 0; }
.glossary dt { font-weight: 700; margin-top: 16px; }
.glossary dt:first-child { margin-top: 0; }
.glossary dd { margin: 2px 0 0; }

/* ---------- 計算フォーム ---------- */
form.calc { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-items: end; }
form.calc label { display: grid; gap: 4px; font-size: .875rem; font-weight: 700; }
form.calc input[type="number"], form.calc select { font: inherit; font-size: 1.125rem; font-weight: 700; padding: 8px 10px; border: 2px solid var(--line); border-radius: 0; background: var(--surface); color: var(--ink); width: 100%; }
form.calc input[type="number"]:focus, form.calc select:focus { border-color: var(--ink); }
form.calc .check { display: flex; align-items: center; gap: 8px; }
form.calc .check input { width: 20px; height: 20px; accent-color: #16244a; }
.result { margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--line-strong); }
.result .table-wrap { max-width: 38em; }
.error { color: var(--fire); font-weight: 700; }

/* ---------- フッター ---------- */
.page-updated { margin-top: 36px; }
.site-footer { background: #16244a; color: #c9d2e8; padding: 28px 0 36px; font-size: .8125rem; }
.site-footer a { color: #fff; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0; }
.disclaimer, .pr-note, .copy { margin: 8px 0; max-width: 60em; }

@media (max-width: 600px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3125rem; }
  .countdown, .result-main { font-size: 3.25rem; }
  .agenda li { grid-template-columns: 5rem 1fr; }
  .agenda .d { font-size: 1.875rem; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: 10px; }
  .deck-strip { grid-template-columns: repeat(20, 1fr); }
  .track-days { height: 30px; gap: 1px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
td.bar { min-width: 5.5em; }
td.nowrap { white-space: nowrap; }
.result-main { margin: 0; }
.result > .result-sub { margin-top: 4px; }
form.calc[data-tool="deck-balance"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ---------- 広告（docs/ADS.md） ---------- */
.ad-slot { display: block; margin: 32px 0; padding: 6px 0 10px; border-top: 1px solid var(--line); min-height: 100px; }
.ad-slot.ad-article-mid, .ad-slot.ad-article-end { min-height: 250px; }
.ad-slot.card { margin: 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); min-height: 140px; }
.ad-label { display: block; font-size: .6875rem; color: var(--steel); letter-spacing: .04em; margin-bottom: 4px; }
.ad-slot.is-preview { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, var(--paper) 10px, var(--paper) 20px); }

/* アフィリエイト：本文の表・パネルと同じ見た目にそろえる */
.aff { margin: 28px 0; background: var(--surface); border: 1px solid var(--line); padding: 14px 16px 16px; max-width: 46em; }
.aff-head { margin: 0 0 6px; font-weight: 700; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aff-pr { display: inline-block; font-size: .625rem; font-weight: 700; color: var(--steel); border: 1px solid var(--line); padding: 0 4px; line-height: 1.6; letter-spacing: .04em; flex: none; }
.aff-intro { margin: 0 0 8px; font-size: .875rem; color: var(--ink-2); }
.aff-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.aff-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.aff-name { font-weight: 700; }
.aff-price { font-weight: 500; font-size: .875rem; color: var(--ink-2); margin-left: 10px; }
.aff-note { margin: 2px 0 6px; font-size: .875rem; color: var(--steel); }
.aff-caution { margin: 10px 0 0; font-size: .8125rem; color: var(--ink-2); }
.aff-px { position: absolute; width: 1px; height: 1px; border: 0; }
/* 通販リンク（本文の中に置く小さなリンク） */
.buy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.buy .aff-pr { margin-right: -2px; }
.buy-link { font-size: .875rem; font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.buy-link::after { content: "↗"; font-size: .75em; margin-left: 2px; text-decoration: none; display: inline-block; }
.buy-link:hover { text-decoration-thickness: 2px; }
/* 必要なものの一覧（デッキページなど） */
.need td { vertical-align: top; }
.need .buy { margin-top: 0; }

/* ---------- お問い合わせ ---------- */
form.contact { display: grid; gap: 16px; max-width: 38em; }
form.contact label { display: grid; gap: 4px; font-size: .875rem; font-weight: 700; }
form.contact input, form.contact select, form.contact textarea { font: inherit; font-size: 1rem; padding: 10px 12px; border: 2px solid var(--line); border-radius: 0; background: var(--surface); color: var(--ink); width: 100%; }
form.contact input:focus, form.contact select:focus, form.contact textarea:focus { border-color: var(--ink); }
form.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.contact button { justify-self: start; font: inherit; font-weight: 700; font-size: 1rem; color: #16244a; background: var(--volt); border: 0; padding: 10px 28px; cursor: pointer; }
form.contact button:disabled { opacity: .6; cursor: wait; }
.contact-status { margin: 0; font-weight: 700; }

/* 採用枚数の分布（1〜4枚） */
td.dist { min-width: 72px; }
td.dist span { display: inline-flex; gap: 4px; align-items: flex-end; }
td.dist b { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 12px; height: 36px; }
td.dist i { display: block; width: 100%; height: calc(var(--v) * 22px); min-height: 2px; background: var(--c); border-radius: 1px; }
td.dist b.zero i { background: var(--line); }
td.dist em { font-style: normal; font-size: .625rem; font-weight: 500; color: var(--steel); line-height: 1; margin-top: 3px; }

/* 開閉できるまとまり（地方別の一覧など） */
details.fold { border-top: 1px solid var(--line); }
details.fold:last-of-type { border-bottom: 1px solid var(--line); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "＋"; font-weight: 700; color: var(--ink-2); }
details.fold[open] > summary::after { content: "－"; }
details.fold > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
details.fold > summary h3 { margin: 12px 0; }
details.fold > summary h3 small { margin-left: 10px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
details.fold .table-wrap { margin-bottom: 16px; }
td small.sub { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; color: var(--ink-2); }