/* 黒猫虎 / kuronekotiger  ——  作品ハブ
   當山式：構造タグにはclass/id/styleを付けない。見た目はdiv/クラスに集約。
   セレクタは意味要素を起点にしない（クラス起点の子孫のみ）。
   スマホファースト（1列）→ 560px で 2列 → 860px で 3列。 */

/* ---- tokens ---- */
:root {
  --bg:        #0f0f11;
  --card:      #1e1e22;
  --card_line: #2e2e34;
  --card_hover:#45454d;
  --line:      #2a2a30;
  --ink:       #f2f0ec;
  --ink_2:     #d8d6cf;
  --ink_3:     #9a988f;
  --ink_4:     #6f6d67;
  --place:     #26262b;
  --radius:    12px;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 18px 64px;
}

/* ---- components : ヘッダー ---- */
.site_head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 0.5px solid var(--line);
}
.site_head nav { margin-left: auto; align-self: center; }

.site_sns {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site_sns .sns_link {
  display: inline-flex;
  color: var(--ink_3);
  transition: color .15s ease, transform .15s ease;
}
.site_sns .sns_link svg { width: 20px; height: 20px; display: block; }
.site_sns .sns_link:hover { transform: translateY(-1px); }
.site_sns .sns_narou:hover   { color: #e8a33d; }
.site_sns .sns_x:hover       { color: #f2f0ec; }
.site_sns .sns_youtube:hover { color: #ff4d4d; }
.site_sns .sns_suno:hover    { color: #c0a9ec; }
.site_head .mark { font-size: 24px; line-height: 1; }
.site_head h1 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .08em;
  margin: 0;
}
.site_head .site_roman {
  font-size: 12px;
  color: var(--ink_4);
  letter-spacing: .16em;
}

/* ---- components : セクション見出し ---- */
.section_pad { margin-bottom: 40px; }

.sec_head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sec_head h2 {
  font-size: 13px;
  font-weight: 500;
  color: #e8b57a;
  letter-spacing: .12em;
  margin: 0;
}
.sec_head .sec_sub { font-size: 11px; color: var(--ink_4); }
.sec_head .sec_line { flex: 1; height: 0.5px; background: var(--line); }

/* ---- components : NEW グリッド（大きめバナー） ---- */
.new_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
/* 特集セル：狭い時は通常幅、広い時だけ2列ぶんに */
.new_cell_wide { grid-column: auto; }
.big_card {
  position: relative;
  background: var(--card);
  border: 0.5px solid var(--card_line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.big_card:hover { border-color: var(--card_hover); transform: translateY(-2px); }
.big_card figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--place);
}
.big_card_body { padding: 12px 15px 14px; }
.big_card h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 9px 0 4px;
}
.big_card h3 a {
  color: inherit;
  text-decoration: none;
}
/* カード全体をクリック可能にする（ストレッチリンク） */
.big_card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.big_card p {
  font-size: 12.5px;
  color: var(--ink_3);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.big_card .big_card_date { font-size: 11px; color: var(--ink_4); }

/* ---- components : カテゴリ列 ---- */
/* 既定（スマホ）：縦積み。left=grid、side（小説）はその下。 */
.cat_layout { display: flex; flex-direction: column; gap: 24px; }
.cat_main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 16px;
}
.cat_col h2 {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink_2);
  letter-spacing: .08em;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--line);
}
.col_list { display: flex; flex-direction: column; gap: 8px; }
.col_empty { font-size: 12px; color: var(--ink_4); padding: 2px 0; }

/* カテゴリ内の小分け見出し（短編/長編 など） */
.cat_col .sub_head {
  font-size: 11px;
  color: var(--ink_3);
  letter-spacing: .08em;
  margin: 0 0 8px;
}
.cat_col .col_list + .sub_head { margin-top: 16px; }

/* 小さめバナー（横並び・サムネ左） */
.small_card {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--card);
  border: 0.5px solid var(--card_line);
  border-radius: 9px;
  padding: 8px;
  transition: border-color .15s ease;
}
.small_card:hover { border-color: var(--card_hover); }
.small_card figure {
  margin: 0;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  background: var(--place);
}
.small_card_body { min-width: 0; }
.small_card h3 {
  font-size: 12.5px;
  font-weight: 400;
  margin: 0 0 3px;
  color: #eae8e2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.small_card h3 a { color: inherit; text-decoration: none; }
.small_card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.small_card_meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.small_card .genre {
  font-size: 9px;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.small_card .small_card_date { font-size: 10px; color: var(--ink_4); }

/* ---- components : 中バナー（カテゴリ列の先頭・中目立たせ） ---- */
.mid_card {
  position: relative;
  background: var(--card);
  border: 0.5px solid var(--card_line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.mid_card:hover { border-color: var(--card_hover); }
.mid_card figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--place);
}
.mid_card_body { padding: 9px 11px 11px; }
.mid_card h3 {
  font-size: 13.5px;
  font-weight: 500;
  margin: 0 0 5px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mid_card h3 a { color: inherit; text-decoration: none; }
.mid_card h3 a::after { content: ""; position: absolute; inset: 0; }
.mid_card_meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mid_card .genre {
  font-size: 9px;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.mid_card .mid_card_date { font-size: 10px; color: var(--ink_4); }

/* ---- components : バッジ（サムネ上のオーバーレイ／行内ピル） ---- */
.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.badge_inline {
  font-size: 9px;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.badge_feature { background: #e8b57a; color: #2a1c0a; }
.badge_pause   { background: #3a3a42; color: #ff7676; }
.badge_pause::before {
  content: "Zzz";
  margin-right: 4px;
  color: #f5f2ed;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

/* ---- components : 列右下の「もっと見る/聞く」リンク ---- */
.col_more { margin-top: 12px; text-align: right; }
.col_more a { font-size: 11px; color: var(--ink_3); text-decoration: none; }
.col_more a:hover { color: var(--ink); text-decoration: underline; }

/* ---- components : サムネ共通（画像／プレースホルダ） ---- */
.big_card figure img,
.mid_card figure img,
.small_card figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* サムネの寄せ。既定は中央。作品ごとに focus:'top'/'bottom' を書いた時だけ効く */
.thumb_top    { object-position: center top; }
.thumb_bottom { object-position: center bottom; }
.thumb_ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.big_card .thumb_ph svg { width: 40px; height: 40px; opacity: .9; }
.mid_card .thumb_ph svg { width: 34px; height: 34px; opacity: .9; }
.small_card .thumb_ph svg { width: 20px; height: 20px; opacity: .9; }

/* ---- components : カテゴリタグ ---- */
.tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* ---- components : プロフィール ---- */
.about_box {
  background: var(--card);
  border: 0.5px solid var(--card_line);
  border-radius: var(--radius);
  padding: 18px 20px;
  max-width: 720px;
}
.about_box .about_name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.about_box .about_roman {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink_4);
  letter-spacing: .16em;
  margin-left: 10px;
}
.about_box .about_text {
  font-size: 13px;
  color: var(--ink_2);
  line-height: 1.85;
  margin-bottom: 10px;
}
.about_box .about_contact { font-size: 12px; color: var(--ink_3); }
.about_box .about_contact a {
  color: var(--ink_2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about_box .about_contact a:hover { color: var(--ink); }

/* ---- components : フッター ---- */
.site_foot {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 0.5px solid var(--line);
  font-size: 11px;
  color: var(--ink_4);
}

/* ---- utilities : レスポンシブ ---- */
@media (min-width: 560px) {
  .new_grid { grid-template-columns: repeat(2, 1fr); }
  .cat_main { grid-template-columns: repeat(2, 1fr); }
  .new_cell_wide { grid-column: span 2; }
}
@media (min-width: 860px) {
  .new_grid { grid-template-columns: repeat(3, 1fr); }
  /* 左=非サイドの2列グリッド、右=小説の縦ぶち抜きカラム */
  .cat_layout { flex-direction: row; align-items: flex-start; }
  .cat_main { flex: 1; }
  .cat_side { flex: none; width: 32%; }
}

@media (prefers-reduced-motion: reduce) {
  .big_card { transition: none; }
  .big_card:hover { transform: none; }
  .site_sns .sns_link { transition: color .15s ease; }
  .site_sns .sns_link:hover { transform: none; }
}