/*
Theme Name: Cocoon Child
Template: cocoon-master
*/
@charset "UTF-8";

/* =========================
   Tokens / Base
========================= */
:root{
  --c-text:#111;
  --c-sub:#555;
  --card:#fff;
  --shadow-s:0 3px 10px rgba(0,0,0,.05);
  --shadow-m:0 6px 16px rgba(0,0,0,.08);
  --accent:#f7a1c7;         /* 見出しバッジ／枠の色 */
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  background:#faf6f9;
  color:var(--c-text);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

a{ text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* タイトルの“ピンク化”を抑止（黒に統一） */
.entry-title,
.entry-title a,
.post .entry-title a,
.entry-card-title a,
.archive .entry-card-title a,
.widget .entry-card-title a,
.widget_recent_entries a,
.widget_new_entries a,
.main .entry-card-title a{ color:var(--c-text) !important; }
.entry-title a:hover,
.entry-card-title a:hover,
.widget a:hover{ color:#000 !important; }

/* 本文の読みやすさ */
.entry-content{ font-size:16px; line-height:1.8; color:#222; }
.entry-content h2{ font-size:1.45rem; margin:1.2em 0 .6em; }

/* キーボード操作のフォーカス見える化 */
a:focus{ outline:2px solid #1a54ff; outline-offset:2px; }

/* 全セクションの上下間隔を統一（必要以上のマージンを禁止） */
.section-wrap{ margin:16px auto; }

/* =========================
   トップ：カテゴリーカード（4列）
========================= */
.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1200px;
  margin:30px auto;
  padding:0 20px;
}
.category-card{
  display:block;
  background:linear-gradient(135deg,#b48dd3,#ff8db7);
  color:#fff;
  text-align:center;
  padding:16px 10px;
  border-radius:15px;
  font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition:transform .25s, box-shadow .25s;
}
.category-card i{ display:block; font-size:22px; margin-bottom:6px; color:#fff; }
.category-card:hover{ transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,.26); }

@media (max-width:768px){
  .category-grid{ gap:12px; }
  .category-card{ padding:12px 8px; font-size:15px; }
  .category-card i{ font-size:20px; }
}

/* =========================
   特集セクション（最小余白・説明文なし）
   HTML:
   <section class="feature-section">
     <h2>…</h2>
     <div class="feature-grid"> <a class="feature-card">…</a>… </div>
   </section>
========================= */
/* Gutenbergの余計な内側余白を殺す */
.feature-section .wp-block-group.has-background,
.feature-section .wp-block-cover{ background:transparent !important; padding:0 !important; margin:0 !important; }
.feature-section .wp-block-group__inner-container,
.feature-section .wp-block-cover__inner-container{ padding:0 !important; margin:0 !important; }

/* ピンクの見出しバッジ（横幅＝テキスト分／縦を薄く） */
.feature-section{ text-align:center; }
.feature-section h2{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:6px 14px;        /* ←縦だけ薄くしたい時は 4px に */
  line-height:1.2;
  border-radius:6px;
  margin:0 auto 12px !important;
}

/* グリッド：間隔小さめ／最大幅を抑え中央寄せ */
.feature-section .feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  max-width:1000px;
  margin:0 auto;
  padding:0 16px;
}

/* カード：内側余白ゼロ・影オフ（膨らみを見せない） */
.feature-section .feature-card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-radius:12px;
  box-shadow:none;
  overflow:hidden;
  padding:0;
  margin:0;
  transition:transform .2s ease;
}
.feature-section .feature-card:hover{ transform:translateY(-2px); }

/* 画像を低め固定 → 全体の高さを圧縮 */
.feature-section .card-image{
  height:110px;                 /* PC */
  overflow:hidden;
  margin:0 0 4px;               /* 画像とタイトルの距離だけ最小 */
}
.feature-section .card-image img{ width:100%; height:100%; object-fit:cover; }

/* タイトルを“文字幅だけの細い帯”に */
.feature-section .card-title{
  display:inline-block;
  width:auto;
  margin:2px 6px 0;
  padding:3px 6px;
  font-size:.95rem;
  line-height:1.2;
  color:inherit;
  border:2px solid var(--accent);
  border-radius:6px;
  background:transparent;
}

/* 説明文は完全に非表示（HTMLにあっても出さない） */
.feature-section .card-description{ display:none !important; margin:0; padding:0; }

@media (max-width:600px){
  .feature-section .feature-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .feature-section .card-image{ height:95px; }
}

/* =========================
   NEW ARTICLE：上3枚大／以降は横型コンパクト
========================= */
.index .entry-card-wrap{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px; max-width:1200px; margin:0 auto;
}
.index .entry-card-wrap .entry-card:nth-child(-n+3){
  background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-m);
}
.index .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-thumb img{
  width:100%; height:220px; object-fit:cover;
}
.index .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-content{ padding:12px 14px 14px; }
.index .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-title{ font-size:1.05rem; line-height:1.35; margin:6px 0 8px; }

/* 4枚目以降：横サムネ型 */
.index .entry-card-wrap .entry-card:nth-child(n+4){
  display:grid; grid-template-columns:140px 1fr; gap:12px;
  background:var(--card); border-radius:10px; box-shadow:var(--shadow-s);
  overflow:hidden; padding:10px;
}
.index .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-thumb{ width:100%; height:90px; overflow:hidden; border-radius:8px; }
.index .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-thumb img{ width:100%; height:100%; object-fit:cover; }
.index .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-content{ padding:0; }
.index .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-title{
  font-size:.95rem; line-height:1.35; margin:0 0 6px; color:var(--c-text);
}
/* 2行で省略 */
.entry-card-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35;
}
/* スニペットは2行で省略 */
.index .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-snippet{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; color:#555; font-size:.88rem; line-height:1.4;
}

/* レスポンシブ */
@media (max-width:1024px){
  .index .entry-card-wrap{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .index .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-thumb img{ height:180px; }
}
@media (max-width:640px){
  .index .entry-card-wrap{ grid-template-columns:1fr; gap:12px; }
  .index .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-thumb img{ height:180px; }
  .index .entry-card-wrap .entry-card:nth-child(n+4){ grid-template-columns:120px 1fr; }
}

/* =========================
   サブ要素（ピル・タグ・サイドバー）
========================= */
.post-label{ display:inline-block; padding:3px 8px; border-radius:999px; background:#eef3ff; color:#1a54ff; font-size:.78rem; margin:6px 0 4px; }
.post-date{ font-size:.82rem; color:#777; margin-left:8px; }

.tagcloud a{ display:inline-block; margin:4px 6px 0 0; padding:4px 10px; border-radius:999px; background:#f3f6fb; color:#334; }

@media(min-width:1025px){
  #sidebar{ position:sticky; top:84px; }
}

/* =========================
   Beauty ランディング（任意セクション）
========================= */
.beauty-landing{ overflow-x:hidden; margin-bottom:12px; }
.beauty-landing h2{ margin:0 0 8px; }
.beauty-landing .beauty-cat-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px; margin:0 auto 8px; padding:0; align-items:start;
}
@media (max-width:1100px){ .beauty-landing .beauty-cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){  .beauty-landing .beauty-cat-grid{ grid-template-columns:1fr; } }
.beauty-landing .beauty-card{ background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:var(--shadow-s); overflow:hidden; }
.beauty-landing .beauty-card__link{ display:block; padding:8px; color:#222; }
.beauty-landing .beauty-card__link img{ width:100%; height:110px; object-fit:cover; border-radius:6px; }
.beauty-landing .beauty-card__link h3{
  margin:6px 6px 2px; font-size:.95rem; line-height:1.25; color:#333;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.beauty-landing .beauty-card__link p{
  margin:0 6px 6px; font-size:.85rem; line-height:1.35; color:#555;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* =========================
   （任意）審査用：アフィリエイト系を非表示
========================= */
.affiliate-link, .affiliate-box, .affiliate-button, .affi-box, .ad-link,
a[href*="a8.net"], img[src*="a8.net"], script[src*="a8.net"], iframe[src*="a8.net"]{
  display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; opacity:0 !important;
}
/* 見出しバッジを薄く */
.feature-section{ text-align:center; }
.feature-section h2{
  display:inline-block;
  background:#f7a1c7;
  color:#fff;
  padding:6px 14px;      /* さらに薄くなら 4px 10px */
  line-height:1.2;
  border-radius:6px;
  margin:0 auto 12px !important;
}

/* カードを詰める：説明は非表示、画像を低め */
.feature-section .feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  max-width:1000px;
  margin:0 auto;
  padding:0 16px;
}
.feature-section .feature-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  box-shadow:none;
  padding:0; margin:0;
}
.feature-section .card-image{ height:110px; overflow:hidden; margin:0 0 4px; }
.feature-section .card-image img{ width:100%; height:100%; object-fit:cover; }
.feature-section .card-title{
  display:inline-block; width:auto;
  margin:2px 6px 0; padding:3px 6px;
  line-height:1.2; font-size:.95rem;
  border:2px solid #f7a1c7; border-radius:6px; background:transparent;
}
.feature-section .card-description{ display:none !important; margin:0; padding:0; }

@media (max-width:600px){
  .feature-section .feature-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .feature-section .card-image{ height:95px; }
}
/* ========== K-POP JOURNAL | Home minimal override (put in Additional CSS) ========== */

/* 0) ブロックの余白・背景を殺す（ピンク帯が巨大化する原因の対策） */
.home .feature-section .wp-block-group.has-background,
.home .feature-section .wp-block-cover{background:transparent !important; padding:0 !important; margin:0 !important;}
.home .feature-section .wp-block-group__inner-container,
.home .feature-section .wp-block-cover__inner-container{padding:0 !important; margin:0 !important;}

/* 1) 特集セクション 見出し（ピンクの帯）を“縦うす・中央の小バッジ”に */
.home .feature-section{ text-align:center; }
.home .feature-section h2{
  display:inline-block;
  background:#f7a1c7;
  color:#fff;
  padding:6px 14px !important;   /* ←さらに薄くしたければ 4px 10px へ */
  line-height:1.2;
  border-radius:6px;
  margin:0 auto 12px !important; /* 下だけ少し余白 */
}

/* 2) 特集カード：説明なし・余白最小・影なし・下余白ゼロ */
.home .feature-section .feature-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  max-width:1000px; margin:0 auto; padding:0 16px;
}
.home .feature-section .feature-card{
  display:flex; flex-direction:column;
  background:#fff; border-radius:12px;
  box-shadow:none !important;        /* 影で“余白っぽく”見えないように */
  padding:0 !important; margin:0 !important;
  overflow:hidden;
}
.home .feature-section .card-image{
  height:110px !important; overflow:hidden !important;
  margin:0 0 4px !important;          /* 画像とタイトルの距離だけ最小 */
}
.home .feature-section .card-image img{width:100%; height:100%; object-fit:cover; display:block;}
.home .feature-section .card-title{
  display:inline-block !important; width:auto !important;
  margin:2px 6px 0 !important; padding:3px 6px !important;
  line-height:1.2; font-size:.95rem;
  border:2px solid #f7a1c7; border-radius:6px; background:transparent;
}
.home .feature-section .card-description{display:none !important; margin:0 !important; padding:0 !important;}

/* 3) トップのカテゴリカード（4列を少しタイトに） */
.home .category-grid{gap:16px !important; max-width:1200px; margin:30px auto; padding:0 20px;}
.home .category-grid .category-card{padding:14px 10px !important;}
@media (max-width:600px){
  .home .feature-section .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important;}
  .home .feature-section .card-image{height:95px !important;}
}

/* 4) Cocoonやスキンが入れる色/余白をまとめて黒系に寄せる（漏れ対策） */
.home .entry-card-title a,
.home .widget .entry-card-title a,
.home .post-list a{ color:#111 !important; }
.home .entry-card-title a:hover,
.home .widget a:hover,
.home .post-list a:hover{ color:#000 !important; }