/* ── リセット & 変数 ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #141416;
  --surface:   #1e1e22;
  --surface2:  #26262c;
  --border:    #34343c;
  --text:      #e2e0db;
  --text-sub:  #7a7870;
  --accent:    #e0652a;   /* darkroom orange */
  --accent-dk: #c4531f;
  --row-alt:   #22222a;

  /* status badges — muted dark variants */
  --expired-bg: #3a1a1a; --expired-fg: #f28b82;
  --soon-bg:    #2e2310; --soon-fg:    #f5c542;
  --active-bg:  #0e2a1e; --active-fg:  #5dba8a;
  --open-bg:    #10213a; --open-fg:    #6db3f2;

  /* type badges */
  --compact-bg:   #1e1630; --compact-fg:   #b49dff;
  --slr-bg:       #2a1a0e; --slr-fg:       #e8a87c;
  --halfframe-bg: #0d2424; --halfframe-fg: #5ecece;

  --radius: 4px;
  --shadow: 0 1px 4px rgba(0,0,0,.4);
}

html { font-size: 15px; }

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── ヘッダー ───────────────────────────────────────────────────────────────── */
.site-header {
  background: #0d0d0f;
  color: var(--text);
  padding: 1.25rem 1.5rem;
  border-bottom: 3px solid var(--accent);
}

.header-inner { max-width: 1200px; margin: 0 auto; }

.site-header h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.subtitle {
  font-size: .8rem;
  color: var(--text-sub);
  margin-top: .2rem;
}

.header-notice {
  margin-top: .6rem;
  font-size: .75rem;
  color: #a09070;
}
.header-notice strong { color: #c8aa60; }
.header-notice a { color: var(--accent); text-decoration: none; }
.header-notice a:hover { text-decoration: underline; }

/* ── レイアウト ─────────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 1.25rem auto;
  padding: 0 1rem;
  flex: 1;
}

/* ── サイドバー ─────────────────────────────────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.filter-section {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  box-shadow: var(--shadow);
}

.filter-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-sub);
  margin-bottom: .5rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  cursor: pointer;
  padding: .15rem .25rem;
  border-radius: var(--radius);
  transition: background .12s;
}
.filter-label:hover { background: var(--border); }

.filter-label input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* ── メイン ─────────────────────────────────────────────────────────────────── */
.main { min-width: 0; }

/* ── 検索バー ───────────────────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

#search-input {
  flex: 1;
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--surface2);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#search-input::placeholder { color: var(--text-sub); }
#search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(224,101,42,.2);
}

.result-count {
  font-size: .8rem;
  color: var(--text-sub);
  white-space: nowrap;
}

/* ── テーブル ───────────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

thead th {
  background: #0d0d0f;
  color: #c8c4bc;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .04em;
  text-align: left;
  padding: .6rem .8rem;
  white-space: nowrap;
  user-select: none;
  border-bottom: 2px solid var(--accent);
}

thead th.sortable { cursor: pointer; }
thead th.sortable:hover { background: #1a1a1f; }

.sort-icon {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-size: .65rem;
  opacity: .5;
  margin-left: .2rem;
}
thead th.sort-asc  .sort-icon { content: "▲"; opacity: 1; }
thead th.sort-desc .sort-icon { content: "▼"; opacity: 1; }
thead th.sort-asc  .sort-icon::after { content: "▲"; }
thead th.sort-desc .sort-icon::after { content: "▼"; }
thead th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: "⇅"; }

tbody tr.data-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
tbody tr.data-row:nth-child(odd) { background: var(--surface); }
tbody tr.data-row:nth-child(even) { background: var(--row-alt); }
tbody tr.data-row:hover { background: #2e2e38; }
tbody tr.data-row.expanded { background: #2e2e38; }

tbody td {
  padding: .55rem .8rem;
  vertical-align: middle;
}

/* 列幅 */
.col-brand   { width: 110px; }
.col-model   { min-width: 180px; }
.col-type    { width: 110px; }
.col-year    { width: 110px; font-variant-numeric: tabular-nums; }
.col-status  { width: 120px; }
.col-source  { width: 80px; text-align: center; white-space: nowrap; }

/* ── 展開詳細行 ─────────────────────────────────────────────────────────────── */
tr.detail-row td {
  padding: .6rem 1rem .75rem 2rem;
  background: #19191f;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-sub);
}

.notes-text {
  margin-bottom: .4rem;
  line-height: 1.55;
}

.source-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .75rem;
}

.source-links a {
  color: var(--accent);
  text-decoration: none;
  font-size: .78rem;
  word-break: break-all;
}
.source-links a:hover { text-decoration: underline; }

/* ── バッジ ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

/* 状態 */
.badge-expired  { background: var(--expired-bg); color: var(--expired-fg); }
.badge-soon     { background: var(--soon-bg);    color: var(--soon-fg);    }
.badge-active   { background: var(--active-bg);  color: var(--active-fg);  }
.badge-open     { background: var(--open-bg);    color: var(--open-fg);    }

/* 種別 */
.badge-compact   { background: var(--compact-bg);   color: var(--compact-fg);   }
.badge-slr       { background: var(--slr-bg);        color: var(--slr-fg);       }
.badge-halfframe { background: var(--halfframe-bg);  color: var(--halfframe-fg); }

/* ── 参考リンクアイコン ──────────────────────────────────────────────────────── */
.source-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .2rem .45rem;
  font-size: .75rem;
  color: var(--text-sub);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.source-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── 空メッセージ ───────────────────────────────────────────────────────────── */
.empty-message {
  padding: 2rem;
  text-align: center;
  color: var(--text-sub);
  font-size: .9rem;
}

/* ── フッター ───────────────────────────────────────────────────────────────── */
.site-footer {
  padding: 1rem 1.5rem 1.5rem;
  font-size: .75rem;
  color: var(--text-sub);
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }


.footer-refs {
  margin-bottom: .6rem;
}
.footer-refs summary {
  cursor: pointer;
  font-size: .72rem;
  color: var(--text-sub);
  user-select: none;
  display: inline-block;
  padding: .15rem .3rem;
  border-radius: var(--radius);
}
.footer-refs summary:hover { background: var(--border); }

.refs-list {
  margin-top: .5rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .7rem;
  line-height: 1.5;
}
.refs-list a { color: var(--text-sub); }
.refs-list a:hover { color: var(--accent); text-decoration: underline; }

.footer-credit {
  font-size: .7rem;
  color: var(--text-sub);
  margin-top: .4rem;
}

/* ── モバイル ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    margin: .75rem auto;
  }

  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .filter-section {
    flex: 1 1 160px;
  }

  .filter-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem .5rem;
  }

  /* 小さい画面では種別・ブランド列を非表示 */
  .col-brand, .col-type { display: none; }
}

@media (max-width: 480px) {
  .col-source { display: none; }
}