/* デザイン v3「コミック・カード」— 白地に黒の太枠とベタ影（ぼかしなし）。1列・中央寄せ。紫・グラデーションなし。
   ライト（:root）とダーク（[data-mode="dark"]）を CSS 変数で定義。切り替えは assets/mode.js。 */
:root {
  color-scheme: light;
  /* --- 色（ライト） --- */
  --ink: #111111;                   /* 枠・影・区切り線・見出しの黒 */
  --paper: #ffffff;                 /* カードの白 */
  --color-bg: #f4f3ef;
  --color-surface: var(--paper);
  --color-surface-alt: #ecebe6;
  --color-text: #111111;
  --color-text-sub: #3d3d3d;        /* 補足も薄くしすぎない */
  --color-border: var(--ink);
  --color-accent: #111111;          /* 差し色は黒 */
  --color-accent-soft: #ecebe6;
  --color-link: #111111;
  --color-focus: #1f5fbf;
  --on-accent: #ffffff;
  --cat-color: #111111;
  --cat-new-product: #1f4f99;  --cat-spec-change: #7a4f00;  --cat-world: #0d6157;
  --cat-security: #a51d14;     --cat-x-tips: #3b5c10;   --cat-x-usecase: #6b4a12;   --cat-x-review: #3d4f6b;   --cat-x-trending: #6b3d5c;
  --tag-google: #111; --tag-openai: #111; --tag-anthropic: #111; --tag-xai: #111; --tag-other: #111;
  --avatar-bg: #111111;
  --avatar-text: #ffffff;
  --shadow-ink: var(--ink);              /* 影の色 */
  --hard-shadow: 6px 6px 0 var(--shadow-ink);   /* ベタ影（記事カードだけ）。いらなければ none */
  --hard-shadow-sm: 3px 3px 0 var(--shadow-ink);
  --frame: 3px solid var(--ink);          /* 太枠 */
  --frame-thin: 2px solid var(--ink);

  /* --- 文字 --- */
  --font-mono: "Consolas", "Menlo", "MS Gothic", "Osaka-Mono", monospace;  /* 日時だけ等幅風 */
  --font-size-base: 15px;
  --font-size-small: 13px;
  --font-size-h1: 40px;             /* サイト名（太く詰める） */
  --h1-tracking: -0.04em;
  --font-size-title: 24px;          /* カードのタイトル（22〜26px） */
  --font-size-card-summary: 15px;
  --font-size-article-title: 32px;
  --font-size-article-body: 16.5px;
  --font-weight-title: 700;
  --summary-lines: 2;
  --show-original-title: none;

  /* --- 形 --- */
  --radius: 0;
  --radius-chip: 0;
  --content-width: 780px;           /* 1列・中央 */
  --article-width: 780px;
  --show-avatar: inline-flex;
  --kicker-display: inline-block;
  --show-mode-toggle: inline-flex;
  --header-bg: transparent;
  --header-text: var(--ink);
  --header-sub: var(--color-text-sub);
  --header-rule: none;
  --header-pad: 12px 0 8px;
  --tagline-display: none;
  --show-selects: none;             /* プルダウン版の絞り込み（上部 案3 で flex） */
  --list-frame: none;
  --list-bg: transparent;
  --list-columns: 1;
  --list-columns-mid: 1;
  --item-gap: 26px;
  --item-border: var(--frame);
  --item-sep: var(--frame);
  --item-last-sep: var(--frame);
  --item-radius: 0;
  --item-bg: var(--paper);
  --item-shadow: var(--hard-shadow);
  --item-hover: var(--paper);
  --item-pad: 18px 22px 16px;
  --catname-pad: 1px 8px;
  --catname-radius: 0;
  --day-color: var(--ink);
  --abstract-bg: var(--paper);
  --abstract-accent: none;
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --ink: #ececec;
  --paper: #1a1a1a;
  --color-bg: #0f0f0f;
  --color-surface-alt: #262626;
  --color-text: #ececec;
  --color-text-sub: #c2c2c2;
  --color-accent: #ececec;
  --color-accent-soft: #262626;
  --color-link: #ececec;
  --color-focus: #8fb8f3;
  --on-accent: #111111;
  --cat-color: #ececec;
  --cat-new-product: #9cc0f5;  --cat-spec-change: #e6bd6a;  --cat-world: #72cdbd;
  --cat-security: #f2958b;     --cat-x-tips: #b0d47a;   --cat-x-usecase: #dcbb85;   --cat-x-review: #a9bedb;   --cat-x-trending: #d7adc8;
  --tag-google: #ececec; --tag-openai: #ececec; --tag-anthropic: #ececec; --tag-xai: #ececec; --tag-other: #ececec;
  --avatar-bg: #ececec;
  --avatar-text: #111111;
  --shadow-ink: #5c5c5c;                 /* ダークでは影を少し落とす */
  --hard-shadow: 6px 6px 0 var(--shadow-ink);
  --hard-shadow-sm: 3px 3px 0 var(--shadow-ink);
}

/* ---------- ヘッダー: 中央に小ラベル＋太く詰めたサイト名 ---------- */
.site-header { flex-direction: column; align-items: center; text-align: center; position: relative; gap: 4px; }
.site-header .hdr-right { flex-direction: column; gap: 4px; }
.kicker { background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: .12em; padding: 3px 10px; }
.site-header h1 { font-weight: 800; line-height: 1.15; }
.brand { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.mode-toggle { border: var(--frame-thin); border-radius: 0; font-weight: 700; padding: 4px 14px; background: var(--paper); }
.lead { text-align: center; }

/* ---------- 絞り込み（カテゴリ・プロバイダー）もコミック風 ---------- */
.cats { border: var(--frame); border-radius: 0; }
.cats .glabel { background: var(--ink); color: var(--paper); font-weight: 700; border-right: var(--frame-thin); }
.cats .group + .group .glabel, .cats .group + .group .glist { border-top: var(--frame-thin); }
.cat { border-right: 2px solid var(--ink); font-weight: 600; }
.cat:hover { background: var(--color-surface-alt); }
.cat[aria-current="page"] { background: var(--ink); color: var(--paper); }
.cat[aria-current="page"] .n { color: var(--paper); }
.search { border: var(--frame-thin); border-radius: 0; background: var(--paper); }
.chip { border: var(--frame-thin); font-weight: 600; background: var(--paper); color: var(--color-text); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters { gap: 10px; }
.day h2 { display: inline-block; background: var(--ink); color: var(--paper); padding: 2px 12px; font-size: 15px; margin-bottom: 16px; }
.day h2 span { color: var(--paper); opacity: .85; }
.day { margin-top: 34px; }

/* ---------- カード上部: 丸文字アイコン／プロバイダー名／日時（等幅風）／カテゴリタグ → 黒の区切り線 ---------- */
.meta.head { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "av prov cat" "av time cat";
  column-gap: 12px; row-gap: 0; align-items: center; padding-bottom: 12px; border-bottom: var(--frame-thin); font-size: 13px; }
.meta.head .avatar { grid-area: av; width: 40px; height: 40px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-text);
  align-items: center; justify-content: center; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.meta.head .provs { grid-area: prov; display: flex; flex-wrap: wrap; gap: 0 10px; }
.meta.head .prov { font-size: 15px; font-weight: 700; color: var(--color-text); text-decoration: none; }
.meta.head .time { grid-area: time; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-sub); letter-spacing: .02em; }
.meta.head .catname { grid-area: cat; align-self: start; border: var(--frame-thin); background: var(--paper); font-weight: 700; font-size: 12px; padding: 2px 8px; }

/* ---------- カード本体 ---------- */
.list .item { position: relative; display: flex; flex-direction: column; transition: transform .1s, box-shadow .1s; }
.list .item:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-ink); }
.list .item .title { font-size: var(--font-size-title); line-height: 1.45; margin-top: 14px; letter-spacing: -0.01em; }
.list .item .title a::after { content: ""; position: absolute; inset: 0; }
.list .item:hover .title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.list .item .sum { font-size: var(--font-size-card-summary); color: var(--color-text-sub); margin-top: 8px; line-height: 1.7; }
.list .item .sum .clamp { white-space: normal; }
.list .item .meta.src { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--color-text-sub); }
.kind { border: 1.5px solid var(--ink); border-radius: 0; color: var(--color-text); }

/* ---------- 記事ページ（同じテイスト） ---------- */
.article { background: var(--paper); border: var(--frame); box-shadow: var(--hard-shadow); padding: 22px 26px 24px; }
.article .meta.head { font-size: 13px; }
.article-title { line-height: 1.4; margin-top: 16px; letter-spacing: -0.01em; }
.abstract { border: var(--frame-thin); border-radius: 0; box-shadow: none; padding: 20px 24px; background: var(--color-bg); }
.abstract .sumbody { font-size: var(--font-size-article-body); line-height: 1.95; }
.abstract .sumbody li { margin: 4px 0; }
.abstract-label { display: inline-block; background: var(--ink); color: var(--paper); padding: 1px 8px; margin-bottom: 10px; font-weight: 700; }
.btn { border: var(--frame-thin); border-radius: 0; background: var(--ink); color: var(--paper); font-weight: 700; }
.btn:hover { transform: translate(-1px, -1px); }
.related h2 { display: inline-block; background: var(--ink); color: var(--paper); padding: 2px 12px; font-size: 15px; margin-bottom: 16px; }
.related .list { gap: 18px; }
.related .list .item { box-shadow: var(--hard-shadow-sm); padding: 14px 18px 12px; }
.related .list .item .title { font-size: 18px; margin-top: 10px; }
.site-header .crumb a { color: var(--color-text-sub); }
footer .panel { border: var(--frame-thin); border-radius: 0; }

@media (max-width: 720px) {
  :root { --font-size-h1: 32px; --font-size-title: 21px; --font-size-article-title: 25px; --item-pad: 16px 16px 14px; --hard-shadow: 4px 4px 0 var(--shadow-ink); }
  .article { padding: 18px 16px; }
  .meta.head { grid-template-columns: 36px 1fr auto; }
  .meta.head .avatar { width: 36px; height: 36px; font-size: 15px; }
}

/* カテゴリはタブ表ではなく、黒ラベル＋枠つきボタンの並び（折り返しても崩れない） */
.cats { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; border: none; box-shadow: none; background: transparent; overflow: visible; }
.cats .glabel { border: none; padding: 4px 10px; align-self: center; justify-content: center; min-width: 64px; }
.cats .glist { gap: 10px; }
.cats .group + .group .glabel, .cats .group + .group .glist { border-top: none; }
.cats .cat { border: var(--frame-thin); background: var(--paper); padding: 4px 12px; }
@media (max-width: 720px) {
  .cats { grid-template-columns: 1fr; }
  .cats .glabel { justify-self: start; border-bottom: none; padding: 2px 10px; }
  .cats .glist { display: flex; flex-wrap: wrap; }
  .cats .cat { border-right: var(--frame-thin); border-bottom: var(--frame-thin); }
}
.cats .cat[aria-current="page"] { background: var(--ink); color: var(--paper); }
.cats .cat[aria-current="page"] .n { color: var(--paper); }

/* ページ最下部のライト／ダーク切り替え（影なし） */
.mode-bar { border-top: var(--frame-thin); padding-top: 16px; }
.mode-bar .mode-label { font-weight: 700; color: var(--color-text); }

/* ロゴ: ライトは背景なし。ダークは黒い線が沈むので、マスコットの後ろにクリーム色の丸バッジを敷く */
:root { --logo-height: 76px; --logo-height-small: 48px; --logo-gap: 14px; --wordmark-height: 48px; --wordmark-height-small: 34px; --wordmark-gap: 14px; }
:root[data-mode="dark"] { --logo-badge-bg: #f6ecd4; --logo-badge-border: 2px solid var(--ink); }
:root[data-mode="dark"] .logo .mascot { width: calc(var(--logo-height) + 18px); height: calc(var(--logo-height) + 18px); }
:root[data-mode="dark"] .logo.logo-small .mascot { width: calc(var(--logo-height-small) + 14px); height: calc(var(--logo-height-small) + 14px); }
:root[data-mode="dark"] .logo .mascot img { height: calc(var(--logo-height) - 4px); }
:root[data-mode="dark"] .logo.logo-small .mascot img { height: calc(var(--logo-height-small) - 4px); }
/* 一覧・記事とも、ロゴの段の下にカテゴリ名やパンくずを置く */
.site-header .brandbox { flex-direction: column; justify-content: center; gap: 6px; max-width: 100%; }
.site-header .brandtext { text-align: center; }
@media (max-width: 720px) {
  :root { --logo-height: 56px; --logo-height-small: 40px; --logo-gap: 10px; --wordmark-height: 36px; --wordmark-height-small: 26px; --wordmark-gap: 10px; }
}
@media (max-width: 400px) { :root { --logo-height: 50px; --wordmark-height: 32px; } }