/* 収集癖 (SSHK) — doc/ デザインハンドオフ準拠（案B マガジン）。 */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Murecho:wght@400;500;700;900&family=Noto+Serif+JP:wght@500;600;700;800&display=swap");

:root {
  --canvas: #e7e5df;
  --paper: #f7f3ea;
  --paper-2: #f1ede3;
  --card: #fbfaf6;
  --white: #fff;
  --ink: #18130f;
  --body: #3a342c;
  --muted: #6f675b;
  --faint: #9a9082;
  --faint-2: #b0a692;
  --line: #ece7da;
  --line-2: #ded7c8;
  --line-3: #f0ebdf;
  --accent: #d8442a;
  --green: #2f8f63;
  --star: #f5a623;
  --read: #1f9e57;
  --maxw: 1180px;
  --serif: "Noto Serif JP", serif;
  --sans: "Murecho", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --img-ph: repeating-linear-gradient(135deg, #ece6d8 0 8px, #e3dccb 8px 16px);
  --ad-ph: repeating-linear-gradient(135deg, #f3ead6 0 8px, #efe4cd 8px 16px);
  --card-sh: 0 1px 3px rgba(40, 30, 15, 0.06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdc6b6; border-radius: 2px; }

/* ============ top bar ============ */
.topbar {
  background: var(--card);
  border-bottom: 2px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
}
.brand { display: flex; align-items: baseline; gap: 8px; flex: none; }
.brand-jp { font-family: var(--serif); font-weight: 800; font-size: 24px; letter-spacing: 0.04em; }
.brand-en { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--accent); letter-spacing: 0.1em; }

.tabs { display: flex; gap: 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 1; }
.tab { padding-bottom: 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }

.search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 7px 12px;
  width: 250px;
}
.search .ico { font-family: var(--mono); font-size: 13px; color: var(--faint-2); }
.search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
}
.search .count {
  font-family: var(--mono); font-size: 11px; color: var(--faint-2);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 1px 5px; white-space: nowrap;
}
.counters { display: flex; align-items: center; gap: 14px; flex: none; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.counters b { font-size: 13px; }
.counters .unread b { color: var(--accent); }

/* ============ genre chips ============ */
.chips {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.chips-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 2px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  white-space: nowrap; user-select: none; transition: all 0.12s;
  border: 1px solid var(--line-2); background: transparent; color: var(--muted);
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: #faf8f2; border-color: var(--ink); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ============ layout ============ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 8px; }
.section-head {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink);
  border-bottom: 2px solid var(--ink); padding-bottom: 7px; margin: 4px 0 16px;
}
.page-title { font-family: var(--serif); font-weight: 700; font-size: 22px; margin: 0 0 14px; }
.note { font-family: var(--mono); font-size: 11px; color: var(--faint); margin: -8px 0 14px; }
.empty { color: var(--faint); padding: 56px 0; text-align: center; font-family: var(--mono); font-size: 13px; }

/* tag (genre) */
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 2px; padding: 1px 6px; border: 1px solid currentColor;
}

/* image placeholder / media */
.media-wrap { position: relative; }
.ph { background: var(--img-ph); display: flex; align-items: center; justify-content: center; }
.ph span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; color: #b5ab95; }
.thumb { background-size: cover; background-position: center; }

/* ============ hero (注目) ============ */
.hero {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; margin-bottom: 22px;
}
.hero-feature { cursor: pointer; }
.hero-feature .media { height: 230px; border-radius: 2px; overflow: hidden; }
.hero-feature .tag { position: absolute; top: 12px; left: 12px; background: var(--card); }
.hero-feature h2 {
  font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.4;
  margin: 14px 0 8px; color: var(--ink); text-wrap: pretty;
}
.hero-feature .excerpt { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 8px; }
.hero-feature .meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.hero-secondary { display: flex; flex-direction: column; gap: 14px; }
.sec-item {
  position: relative;
  display: grid; grid-template-columns: 96px 1fr; gap: 12px; cursor: pointer;
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
}
.sec-item .media { height: 66px; border-radius: 2px; overflow: hidden; }
.sec-item .title { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.45; margin-top: 5px; text-wrap: pretty; }
.sec-item .meta { font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-top: 4px; }
/* 2次記事: ☆/✓ はタグと同じ行(右寄せ)に。タイトルは下段で全幅。 */
.sec-item .sec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sec-item .card-actions { position: static; gap: 4px; flex: none; }
.sec-item .card-save, .sec-item .card-actions .readcheck { background: none; box-shadow: none; padding: 2px; }

/* ============ card grid (LATEST / genre / sources) ============ */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card {
  position: relative; cursor: pointer; background: var(--white);
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
}
.card .media { height: 110px; overflow: hidden; }
.card .tag { position: absolute; top: 8px; left: 8px; background: var(--white); }
.card-body { padding: 11px 12px 13px; }
.card-title { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.45; text-wrap: pretty; }
.card-meta { font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-top: 7px; }

/* 人気度 (クリック数 ▲ + 閾値バッジ) */
.pop { white-space: nowrap; }
.pop-n { font-family: var(--mono); color: var(--muted); font-weight: 700; }
.pop-badge {
  display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 700;
  line-height: 1.4; border-radius: 999px; padding: 0 7px; margin-right: 5px; vertical-align: 1px;
}
.pop-badge.pop { color: #a85c00; background: #fdeecb; }
.pop-badge.hot { color: #c0341d; background: #fdded6; }
/* お気に入り ☆ (SVG星・ポップ) */
.star {
  width: 15px; height: 15px; display: block; flex: none;
  fill: none; stroke: #c4baa3; stroke-width: 2; stroke-linejoin: round;
  transition: transform 0.15s ease, fill 0.15s, stroke 0.15s;
}
.js-save {
  border: none; background: transparent; cursor: pointer; line-height: 0;
  padding: 5px; -webkit-tap-highlight-color: transparent;
}
.js-save:hover .star { stroke: var(--star); transform: scale(1.15); }
.js-save.on .star, .js-pv-save.on .star { fill: var(--star); stroke: var(--star); }
.js-save.on .star, .js-pv-save.on .star { animation: star-pop 0.28s ease; }
@keyframes star-pop {
  0% { transform: scale(0.8); }
  55% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.card-save {
  background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 4px;
  box-shadow: 0 1px 3px rgba(40, 30, 15, 0.12);
}
.card-save:hover { background: #fff; }
.card-actions { position: absolute; top: 7px; right: 7px; z-index: 2; display: flex; gap: 5px; align-items: center; }

/* 既読チェック (☆と同系。既読時のみ表示) */
.check { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.readcheck { display: none; align-items: center; justify-content: center; color: var(--read); }
.is-read .readcheck { display: inline-flex; }
.card-actions .readcheck { background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 4px; box-shadow: 0 1px 3px rgba(40, 30, 15, 0.12); }
.row-actions { display: flex; gap: 6px; align-items: center; align-self: start; }
.col-row .top .readcheck { margin-left: auto; }

/* ad cards */
.ad { background: var(--white); border: 1px dashed #cdbf9f; border-radius: 2px; overflow: hidden; }
.ad .media { height: 110px; background: var(--ad-ph); display: flex; align-items: center; justify-content: center; }
.ad .media span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; color: #b09a6a; }
.ad-body { padding: 11px 12px 13px; }
.ad-body .t { font-family: var(--sans); font-size: 13px; font-weight: 700; color: #2a241d; line-height: 1.4; }
.ad-body .m { font-family: var(--mono); font-size: 9.5px; color: #b09a6a; margin-top: 7px; }
.ad-rect {
  border: 1px dashed #cdbf9f; border-radius: 2px; background: var(--ad-ph);
  padding: 22px 14px; text-align: center;
}
.ad-rect .pr { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: #b09a6a; margin-bottom: 6px; }
.ad-rect .lbl { font-family: var(--mono); font-size: 11px; color: #a8946a; }
/* 実広告スロット (管理画面で有効化されたときに表示)。プレースホルダの縞は出さない。 */
.ad-live { overflow: hidden; }
.ad-rect-live { text-align: center; min-height: 60px; }
.ad-rect-live :is(img, ins, iframe) { max-width: 100%; height: auto; }
.ad-infeed-live { padding: 0; }
.ad-infeed-live :is(img, ins, iframe) { max-width: 100%; height: auto; }

/* ============ two-column (feed + rail) ============ */
.with-rail { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.rail { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.rail-head { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; border-bottom: 2px solid var(--ink); padding: 14px 16px 9px; }
.rail-list { padding: 4px 16px 12px; }
.rank-row { display: grid; grid-template-columns: 22px 1fr; gap: 9px; padding: 9px 0; border-bottom: 1px solid #e7e1d2; cursor: pointer; }
.rank-row:last-child { border-bottom: none; }
.rank-no { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--accent); line-height: 1; }
.rank-row .t { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: #2a241d; line-height: 1.4; }
.rank-row .m { font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-top: 3px; }
.rail-ad { padding: 0 16px 16px; }
.sp-source { padding: 8px 16px 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-source a { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); }
.sp-source a:hover { color: var(--accent); text-decoration: underline; }
.sp-source .dom { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.sp-list .col-row:last-child { border-bottom: none; }

/* ============ dense list (ranking / archive) ============ */
.list { background: var(--card); border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: opacity 0.15s;
}
.row:last-child { border-bottom: none; }
.row:hover { background: #faf7f0; }
.row .time { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 6px; white-space: nowrap; }
.row .main { min-width: 0; display: flex; gap: 10px; align-items: flex-start; }
.row .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px; }
.row .title { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.45; text-wrap: pretty; }
.row .meta { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 4px; letter-spacing: 0.02em; }
.row .save { align-self: start; }
.row.rank-list { grid-template-columns: 30px 52px 1fr auto; }
.row .lrank { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--faint); text-align: center; padding-top: 2px; }
.row.rank-list:nth-child(-n+3) .lrank { color: var(--accent); }

/* read / saved state (applied by app.js) */
.is-read { opacity: 0.88; }
.is-read .card-title, .is-read .title, .is-read .t { color: var(--muted); }
.is-hidden { display: none !important; }

/* ============ sources (サイト別) columns ============ */
.src-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--card); border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.src-col { border-right: 1px solid var(--line); min-height: 320px; }
.src-col:last-child { border-right: none; }
.src-col-head { padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.src-col-head .name { font-family: var(--sans); font-size: 14px; font-weight: 700; display: block; color: var(--ink); }
.src-col-head a.name:hover { color: var(--accent); text-decoration: underline; }
.src-col-head .sub { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.src-col-head .dom { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.src-col-head .cnt { font-family: var(--mono); font-size: 9.5px; color: #7a9f86; background: #eaf1eb; border-radius: 2px; padding: 1px 5px; }
.col-row { padding: 10px 14px; border-bottom: 1px solid var(--line-3); cursor: pointer; }
.col-row .top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.col-row .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.col-row .time { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.col-row .t { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: #2a241d; line-height: 1.4; text-wrap: pretty; }

/* ============ preview slideover ============ */
.preview-overlay {
  position: fixed; inset: 0; background: rgba(24, 19, 15, 0.34); z-index: 50;
  opacity: 0; visibility: hidden; transition: opacity 0.2s;
}
.preview-overlay.open { opacity: 1; visibility: visible; }
.preview-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100%); z-index: 51;
  background: var(--card); box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
  transform: translateX(100%); transition: transform 0.22s; display: flex; flex-direction: column;
}
.preview-overlay.open + .preview-panel, .preview-panel.open { transform: translateX(0); }
.preview-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.preview-close { font-family: var(--mono); font-size: 18px; color: var(--faint-2); cursor: pointer; border: none; background: none; }
.preview-body { padding: 22px; overflow-y: auto; }
.preview-body h2 { font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1.45; margin: 0 0 12px; text-wrap: pretty; }
.preview-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-bottom: 18px; }
.preview-img { height: 200px; border-radius: 2px; overflow: hidden; margin-bottom: 18px; }
.preview-text { font-size: 14px; line-height: 1.85; color: var(--body); margin: 0 0 22px; }
.action-bar { display: flex; gap: 10px; margin-bottom: 24px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 2px; padding: 11px 16px; font-size: 13px; cursor: pointer; border: 1px solid var(--line-2); background: var(--card); color: #2a241d; }
.btn-primary { flex: 1; background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.btn .save-ico.on { color: #fff; }

/* ============ admin ============ */
.admin { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; background: var(--card); }
.admin-nav { background: var(--ink); padding: 18px 0; }
.admin-brand { padding: 0 18px 18px; font-family: var(--serif); font-weight: 700; font-size: 18px; color: #faf8f2; }
.admin-brand span { font-family: var(--mono); font-size: 9px; color: var(--accent); margin-left: 6px; }
.admin-nav a { display: block; padding: 9px 18px; font-family: var(--mono); font-size: 12px; color: #cfc6b6; border-left: 3px solid transparent; }
.admin-nav a.on { background: rgba(255, 255, 255, 0.07); color: #faf8f2; border-left-color: var(--accent); }
.admin-main { padding: 22px 24px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.kpi { border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px; background: var(--white); }
.kpi.hl { border-color: var(--accent); }
.kpi .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint); }
.kpi.hl .k { color: var(--accent); }
.kpi .v { font-family: var(--serif); font-weight: 700; font-size: 28px; margin-top: 4px; }
.kpi .d { font-family: var(--mono); font-size: 10px; margin-top: 2px; color: var(--faint); }
.kpi .d.up { color: var(--green); }
.panel { border: 1px solid var(--line); border-radius: 2px; padding: 16px; background: var(--white); margin-bottom: 22px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.panel-head .sub { color: var(--faint); font-weight: 400; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.chart .bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart .bar { width: 100%; border-radius: 1px; background: #d8cdb6; }
.chart .bar.last { background: var(--accent); }
.table { border: 1px solid var(--line); border-radius: 2px; background: var(--white); overflow: hidden; }
.thead, .trow { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr 0.8fr 0.9fr; align-items: center; }
.thead { padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); }
.trow { padding: 11px 16px; border-bottom: 1px solid var(--line-3); }
.trow:last-child { border-bottom: none; }
.trow .nm { font-size: 13px; font-weight: 700; }
.trow .dm { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.trow .mono { font-family: var(--mono); font-size: 12px; }
.badge { font-family: var(--mono); font-size: 10px; font-weight: 700; border-radius: 2px; padding: 3px 8px; justify-self: start; }
.badge.ok { color: var(--green); background: #e9f1ea; }
.badge.err { color: #c0512b; background: #f6e8e0; }
.badge.off { color: var(--faint); background: #efeade; }

/* admin: head / forms / actions */
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.admin-head h1 { font-family: var(--serif); font-weight: 700; font-size: 22px; margin: 0; }
.notice-bar { background: #eaf1eb; color: #2f6b4d; border: 1px solid #cfe3d5; border-radius: 2px; padding: 9px 14px; margin-bottom: 16px; font-size: 13px; }
.abtn {
  font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--white); color: #2a241d;
  border-radius: 2px; padding: 7px 12px; transition: all 0.12s; white-space: nowrap;
}
.abtn:hover { border-color: var(--ink); }
.abtn.primary { background: var(--ink); color: #faf8f2; border-color: var(--ink); }
.abtn.danger { color: #c0512b; border-color: #e3cdc4; }
.abtn.danger:hover { background: #f6e8e0; border-color: #c0512b; }
.add-form { display: flex; flex-wrap: wrap; gap: 8px; }
.ainput, .aselect {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 8px 10px; background: var(--white);
}
.ainput { flex: 1; min-width: 160px; }
.aselect { min-width: 110px; }
.ops { display: flex; gap: 6px; align-items: center; justify-self: start; }
.ops form { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; font-family: var(--mono); font-size: 12px; }
.seg a, .seg button { padding: 6px 12px; color: var(--muted); border: none; background: transparent; cursor: pointer; font-family: var(--mono); font-size: 12px; }
.seg a.on, .seg button.on { background: var(--ink); color: #faf8f2; }

/* 最新の収集: 見出し + グリッド/リスト切替 */
.latest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view-toggle { font-weight: 400; }

/* リスト表示 (同じカードを CSS で1行レイアウトに) */
.grid.as-list { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.grid.as-list .card, .grid.as-list .ad {
  display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center;
  border: none; border-bottom: 1px solid var(--line); border-radius: 0;
}
.grid.as-list .card:hover { background: #faf7f0; }
.grid.as-list > :last-child { border-bottom: none; }
.grid.as-list .card .media, .grid.as-list .ad .media { height: 64px; border-radius: 2px; }
.grid.as-list .card .tag { top: 4px; left: 4px; }
.grid.as-list .card-body { padding: 10px 76px 10px 0; }
.grid.as-list .ad-body { padding: 10px 14px 10px 0; }
/* リスト表示では [✓][☆] を右端で縦中央に */
.grid.as-list .card-actions { top: 50%; right: 12px; transform: translateY(-50%); }
.trow.inactive { opacity: 0.55; }
.trow .nm a { color: var(--ink); }
.trow .nm a:hover { color: var(--accent); text-decoration: underline; }
.trow .dm a { color: inherit; }
.trow .dm a:hover { color: var(--accent); text-decoration: underline; }

/* admin: sources table (7 cols: 名前/ジャンル/本日/クリック/最終取得/状態/操作) */
.sources-table .thead.st, .sources-table .trow.st {
  grid-template-columns: 1.6fr 0.7fr 0.45fr 0.6fr 0.9fr 0.6fr 1.4fr;
}
/* admin: sortable column headers */
.thead a.sort { color: inherit; }
.thead a.sort:hover { color: var(--ink); text-decoration: underline; }
.thead a.sort.on { color: var(--ink); font-weight: 700; }
/* admin: articles table (5 cols) */
.art-table .thead.at, .art-table .trow.at {
  grid-template-columns: 2.6fr 1fr 0.7fr 0.45fr 1fr;
}
.art-table .nm { font-weight: 500; }

/* admin: ads management */
.ad-enable { font-family: var(--mono); font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ad-field { padding: 12px 14px 14px; }
.ad-ta { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 12px; line-height: 1.5; resize: vertical; }

/* admin: pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 0 4px; font-family: var(--mono); font-size: 13px; }
.pager a { color: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; padding: 6px 14px; }
.pager a:hover { border-color: var(--ink); }
.pager .disabled { color: #c8c0b0; border: 1px solid var(--line); border-radius: 2px; padding: 6px 14px; }
.pager .page-info { color: var(--muted); }

/* admin: login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--canvas); padding: 20px; }
.login-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 4px; box-shadow: var(--card-sh); padding: 28px; width: 340px; max-width: 100%; }
.login-error { background: #f6e8e0; color: #c0512b; border-radius: 2px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.login-card .ainput { width: 100%; }

/* ============ footer ============ */
.site-footer { max-width: var(--maxw); margin: 28px auto 16px; padding: 18px 20px; font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: center; }

/* ============ mobile bottom nav (hidden on desktop) ============ */
.mobile-nav { display: none; }
.mobile-filter-btn { display: none; }

/* sheet (mobile filter) */
.sheet-overlay { position: fixed; inset: 0; background: rgba(24, 19, 15, 0.34); z-index: 40; opacity: 0; visibility: hidden; transition: opacity 0.2s; }
.sheet-overlay.open { opacity: 1; visibility: visible; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--card);
  border-radius: 16px 16px 0 0; padding: 8px 20px 24px; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(100%); transition: transform 0.24s;
}
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: #d6cfbf; margin: 6px auto 16px; }
.sheet h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; margin: 0 0 16px; }
.sheet .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 10px; }
.sheet .chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; color: #2a241d; }
.sheet-apply { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 3px; padding: 15px; font-size: 15px; font-weight: 700; margin-top: 8px; cursor: pointer; }

/* ============ responsive ============ */
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .with-rail { grid-template-columns: 1fr; }
  .rail { display: none; }
  .src-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  body { font-size: 14px; padding-bottom: 64px; }
  .topbar-inner { flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; }
  .tabs { order: 3; width: 100%; flex: 1 0 100%; overflow-x: auto; gap: 14px; padding-bottom: 2px; }
  .search { flex: 1; width: auto; min-width: 120px; }
  .counters { gap: 10px; }
  .brand-en { display: none; }
  .chips-inner { flex-wrap: nowrap; overflow-x: auto; padding: 10px 14px; }
  .container { padding: 16px 14px 8px; }
  .hero { grid-template-columns: 1fr; gap: 16px; }
  .hero-feature h2 { font-size: 22px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .src-cols { grid-template-columns: 1fr; }
  .src-col { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
  .row { grid-template-columns: 44px 1fr auto; padding: 10px 12px; }
  .row.rank-list { grid-template-columns: 24px 40px 1fr auto; }
  .admin { grid-template-columns: 1fr; }
  .admin-nav { display: flex; overflow-x: auto; padding: 0; }
  .admin-nav .admin-brand { display: none; }
  .admin-nav a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .admin-nav a.on { border-left: none; border-bottom-color: var(--accent); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .thead, .trow { grid-template-columns: 1.4fr 0.8fr 0.8fr; }
  .thead span:nth-child(2), .trow .mono:nth-of-type(1) { display: none; }
  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--card); border-top: 1px solid var(--line-2); padding: 8px 0 12px;
  }
  .mobile-nav a { flex: 1; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--faint); }
  .mobile-nav a .mi { font-size: 17px; display: block; margin-bottom: 3px; }
  .mobile-nav a.on { color: var(--accent); }
  .mobile-filter-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted);
    border: 1px solid var(--line-2); border-radius: 2px; padding: 5px 11px; background: transparent; cursor: pointer;
  }
  .preview-panel { width: 100%; }
}

/* ============ legal / info pages (privacy, about, disclaimer, contact) ============ */
.legal { max-width: 760px; margin: 8px auto 40px; line-height: 1.85; color: var(--ink); }
.legal h1 { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 6px 0 18px; }
.legal h2 { font-family: var(--serif); font-weight: 700; font-size: 17px; margin: 26px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line-2); }
.legal p { margin: 10px 0; }
.legal ul { margin: 10px 0; padding-left: 1.3em; }
.legal li { margin: 7px 0; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal code { font-family: var(--mono); font-size: 0.9em; background: var(--paper); padding: 1px 5px; border-radius: 2px; }
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 14px 0; }
.legal-dl dt { font-weight: 700; color: var(--muted); }
.legal-dl dd { margin: 0; }
.legal-meta { margin-top: 26px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* contact form */
.contact-form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.contact-form .ainput { width: 100%; box-sizing: border-box; }
.contact-form textarea.ainput { resize: vertical; font-family: var(--sans); line-height: 1.6; }
.contact-form .req { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: #c0392b; }
.contact-form .abtn { align-self: flex-start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { background: var(--paper); border: 1px solid var(--line-2); border-radius: 3px; padding: 20px; }
.form-error { background: #fcebea; border: 1px solid #e3b7b3; color: #9a3027; border-radius: 3px; padding: 11px 14px; margin: 12px 0; font-size: 13px; }

/* footer nav */
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 10px; }
.footer-nav a { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.footer-nav a:hover { color: var(--accent); text-decoration: underline; }

/* cookie notice */
.cookie-notice {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 880px; margin: 0 auto;
  background: var(--ink); color: #f3eee2; border-radius: 4px;
  padding: 12px 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.cookie-notice p { margin: 0; font-size: 12.5px; line-height: 1.6; flex: 1; min-width: 220px; }
.cookie-notice a { color: #f3d27a; text-decoration: underline; }
.cookie-ok {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink);
  background: #f3d27a; border: 0; border-radius: 3px; padding: 8px 18px; cursor: pointer; white-space: nowrap;
}
.cookie-ok:hover { background: #f6dd96; }

/* admin: contact messages */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg { border: 1px solid var(--line-2); border-radius: 3px; padding: 12px 14px; background: var(--card); }
.msg.unread { border-left: 3px solid var(--accent); background: var(--white); }
.msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.msg-name { font-weight: 700; font-size: 14px; }
.msg-email { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.msg-email.muted { color: var(--faint); }
.msg-date { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.msg-flag { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 2px; }
.msg-flag.new { background: var(--accent); color: #fff; }
.msg-flag.read { background: var(--paper); color: var(--muted); }
.msg-head form { margin-left: auto; }
.msg-body { font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }