:root {
  /* ── カラー ────────────────────────── */
  --kb-bg:      #f7f4ef;   /* サイト背景（淡いクリーム） */
  --kb-cream:   #f7f4ef;   /* クリーム */
  --kb-linen:   #ede8df;   /* リネン（セクション背景） */
  --kb-paper:   #fdfaf5;   /* 紙色（カード背景） */
  --kb-wood:    #c8b89a;   /* 棚の木材 */
  --kb-wood-dk: #a08060;   /* 棚 濃いめ */
  --kb-ink:     #2c2416;   /* 本文テキスト（濃いセピア） */
  --kb-ink-lt:  #6b5d4f;   /* セカンダリテキスト */
  --kb-muted:   #9a8878;   /* ミュートカラー */
  --kb-accent:  #d4713a;   /* アクセント（オレンジ系） */

  /* ── フォント ───────────────────────── */
  --kb-font-serif: 'Noto Serif JP', 'Georgia', serif;
  --kb-font-sans:  'Noto Sans JP', 'Helvetica Neue', sans-serif;
}

/* ========================================
   ホームリデザイン — home-redesign.css
   追加先: /wp-content/themes/cocoon-child/css/home-redesign.css

   用途: front-page.php 専用スタイル追加分
   既存: library.css のヒーロー・本棚スタイルはそのまま使用
   ======================================== */

/* ============================================================
   0. ページ全体リセット（ホームページ専用）
   ============================================================ */

/* Cocoon のホームページ用デフォルトコンテンツ幅を解除 */
.home .main {
  max-width: none !important;
  padding: 0 !important;
}
.home .content-wrap,
.home .contents-container {
  max-width: none !important;
  padding: 0 !important;
}
/* Cocoon の entry ラッパーを透明にする */
.home .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}
/* サイドバー非表示（front-page.phpで制御するが念のため） */
/* ============================================================
   1. ヒーロー（library.css 補完）
   ============================================================ */

/* 右側に水彩風ビジュアルを追加するための拡張 */
.kb-hero {
  min-height: 88vh;
}
.kb-hero__image-wrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  overflow: hidden;
}
.kb-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .72;
  mix-blend-mode: multiply;
}
.kb-hero__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f7f2eb 0%, transparent 40%);
  z-index: 1;
}
/* 画像なし時の装飾 */
.kb-hero__deco {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 80px;
  line-height: 1.4;
  opacity: .1;
  pointer-events: none;
  letter-spacing: .1em;
  z-index: 1;
}

/* ============================================================
   2. 親カテゴリセクション
   ============================================================ */

.kb-categories {
  padding: 80px 24px 96px;
  background: var(--kb-paper);
}
.kb-categories__inner {
  max-width: 960px;
  margin: 0 auto;
}
.kb-categories__head {
  margin-bottom: 48px;
  text-align: center;
}
.kb-categories__label {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--kb-muted);
  text-transform: uppercase;
  font-family: var(--kb-font-sans);
  display: block;
  margin-bottom: 10px;
}
.kb-categories__title {
  font-family: var(--kb-font-serif);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  color: var(--kb-ink);
  letter-spacing: .08em;
  display: block;
}

/* カテゴリグリッド */
.kb-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--kb-linen);
  border: 1px solid var(--kb-linen);
  border-radius: 8px;
  overflow: hidden;
}

/* カテゴリカード */
.kb-cat-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 28px;
  background: var(--kb-paper);
  text-decoration: none !important;
  color: inherit;
  transition: background .22s;
  position: relative;
  overflow: hidden;
}
.kb-cat-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 32px;
  right: 32px;
  height: 2px;
  background: var(--cat-color, var(--kb-wood));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.kb-cat-card:hover {
  background: var(--kb-cream);
  text-decoration: none !important;
}
.kb-cat-card:hover::before {
  transform: scaleX(1);
}

.kb-cat-card__emoji {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
}
.kb-cat-card__name {
  font-family: var(--kb-font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--kb-ink);
  letter-spacing: .06em;
  display: block;
  margin-bottom: 10px;
}
.kb-cat-card__phrase {
  font-family: var(--kb-font-serif);
  font-size: 13px;
  color: var(--kb-ink-lt);
  line-height: 1.9;
  letter-spacing: .03em;
  display: block;
  flex: 1;
  margin-bottom: 20px;
}
.kb-cat-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--kb-muted);
  font-family: var(--kb-font-sans);
  transition: colqr .2s;
}
.kb-cat-card__link::after {
  content: '→';
  transition: transform .2s;
}
.kb-cat-card:hover .kb-cat-card__link {
  color: var(--cat-color, var(--kb-wood-dk));
}
.kb-cat-card:hover .kb-cat-card__link::after {
  transform: translateX(4px);
}

/* カテゴリカラー */
.kb-cat-card--ie    { --cat-color: #c87848; }
.kb-cat-card--megane{ --cat-color: #7b5ea7; }
.kb-cat-card--kenchiku{ --cat-color: #4a7fa5; }
.kb-cat-card--family{ --cat-color: #5a8a6a; }

/* ============================================================
   3. 新着記事セクション
   ============================================================ */

.kb-recent {
  padding: 80px 24px 96px;
  background: var(--kb-cream);
}
.kb-recent__inner {
  max-width: 1040px;
  margin: 0 auto;
}
.kb-recent__head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 40px;
}
.kb-recent__label {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--kb-muted);
  text-transform: uppercase;
  font-family: var(--kb-font-sans);
}
.kb-recent__title {
  font-family: var(--kb-font-serif);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  color: var(--kb-ink);
  letter-spacing: .06em;
}
.kb-recent__view-all {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--kb-muted);
  text-decoration: none;
  font-family: var(--kb-font-sans);
  border-bottom: 1px solid var(--kb-linen);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.kb-recent__view-all:hover {
  color: var(--kb-ink);
  border-color: var(--kb-ink-lt);
}

/* 記事グリッド */
.kb-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 記事カード */
.kb-article {
  background: var(--kb-paper);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--kb-linen);
  text-decoration: none !important;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .22s, box-shadow .22s;
}
.kb-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(58,50,40,.1);
  text-decoration: none !important;
}
.kb-article__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--kb-linen);
  flex-shrink: 0;
}
.kb-article__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}
.kb-article:hover .kb-article__thumb img {
  transform: scale(1.03);
}
/* サムネなし時のプレースホルダー */
.kb-article__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  opacity: .3;
}
.kb-article__body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kb-article__cat {
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--kb-muted);
  text-transform: uppercase;
  font-family: var(--kb-font-sans);
  margin-bottom: 8px;
  display: block;
}
.kb-article__title {
  font-family: var(--kb-font-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--kb-ink);
  line-height: 1.75;
  letter-spacing: .02em;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-article__date {
  font-size: 10px;
  color: var(--kb-muted);
  margin-top: 12px;
  font-family: var(--kb-font-sans);
  letter-spacing: .06em;
  display: block;
}

/* ============================================================
   4. 締めセクション（余韻）
   ============================================================ */

.kb-closing {
  padding: 100px 24px 96px;
  background: var(--kb-ink);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.kb-closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(200,169,110,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 50%, rgba(90,138,106,.05) 0%, transparent 70%);
  pointer-events: none;
}
.kb-closing__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.kb-closing__ornament {
  display: block;
  font-size: 13px;
  letter-spacing: .6em;
  color: rgba(255,255,255,.2);
  font-family: var(--kb-font-sans);
  margin-bottom: 36px;
}
.kb-closing__quote {
  font-family: var(--kb-font-serif);
  font-size: clamp(17px, 3vw, 24px);
  font-weight: 400;
  line-height: 2.0;
  letter-spacing: .08em;
  color: rgba(255,255,255,.85);
  margin-bottom: 12px;
  display: block;
}
.kb-closing__sub {
  font-size: 13px;
  color: rgba(255,255,255,.38);
  font-family: var(--kb-font-serif);
  letter-spacing: .1em;
  line-height: 2;
  display: block;
  margin-bottom: 48px;
}
.kb-closing__divider {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,.15);
  margin: 0 auto 40px;
  display: block;
}
.kb-closing__nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.kb-closing__nav-link {
  font-size: 11px;
  letter-spacing: .15em;
  color: rgba(255,255,255,.4) !important;
  text-decoration: none !important;
  font-family: var(--kb-font-sans);
  transition: color .2s;
}
.kb-closing__nav-link:hover {
  color: rgba(255,255,255,.75) !important;
}

/* ============================================================
   5. レスポンシブ
   ============================================================ */

@media (max-width: 900px) {
  .kb-hero__image-wrap { display: none; }
  .kb-categories { padding: 64px 20px 72px; }
  .kb-cat-grid {
    grid-template-columns: 1fr;
  }
  .kb-cat-card { padding: 28px 24px 22px; }
  .kb-recent { padding: 64px 20px 72px; }
  .kb-recent__grid { grid-template-columns: repeat(2, 1fr); }
  .kb-closing { padding: 72px 24px 68px; }
}

@media (max-width: 600px) {
  .kb-categories { padding: 52px 16px 60px; }
  .kb-cat-grid { border-radius: 6px; }
  .kb-cat-card { padding: 24px 20px 18px; }
  .kb-cat-card__emoji { font-size: 24px; margin-bottom: 12px; }
  .kb-cat-card__name { font-size: 15px; }
  .kb-cat-card__phrase { font-size: 12px; }
  .kb-recent { padding: 52px 16px 60px; }
  .kb-recent__head { flex-wrap: wrap; gap: 8px; }
  .kb-recent__view-all { margin-left: 0; }
  .kb-recent__grid { grid-template-columns: 1fr; gap: 14px; }
  .kb-closing { padding: 60px 16px 56px; }
  .kb-closing__nav { gap: 20px; }
}

/* ============================================================
   6. Cocoon テーマ競合解消パッチ
   ============================================================ */

/* Cocoon のページタイトル・パンくずを非表示 */
.home .entry-title,
.home .breadcrumb,
.home .entry-header,
.home .entry-footer,
.home .sns-share,
.home .related-posts {
  display: none !important;
}

/* Cocoon の wrapper 幅制限を解除 */
.home .wrap,
.home .contents-wrap {
  max-width: none !important;
}

/* アイキャッチ装飾リセット */
.kb-article:hover,
.kb-cat-card:hover {
  color: inherit !important;
  text-decoration: none !important;
}
.kb-article__title {
  text-decoration: none;
}