/*
K-POP JOURNAL | Minimal, Fast, Consistent
Date: 2025-08-09
Target: Cocoon Child (style.css) – FULL REWRITE
*/

/* ========== 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; }

/* Cocoonやスキンの色上書きを抑止：タイトルは黒 */
.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; }

/* ========== Top: カテゴリーカード（4列固定） ========== */
/* HTML: <div class="category-grid"><a class="category-card">…</a>…</div> */
.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; text-align:center; color:#fff;
  background:linear-gradient(135deg,#b48dd3,#ff8db7);
  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; }
}

/* ========== 特集（Feature） ========== */
/* HTML:
<section class="feature-section">
  <h2>…</h2>
  <div class="feature-grid">
    <a class="feature-card">
      <div class="card-image"><img></div>
      <h3 class="card-title">…</h3>
      <!-- p.card-description は使わない or あっても非表示 -->
    </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; 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; 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; font-weight:700;
  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 記事リスト（上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行で省略 */
.index .entry-card-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35;
}
/* スニペットも2行で省略（Cocoon側クラス名合わせ） */
.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; }

/* PC時サイドバー固定（任意） */
@media (min-width:1025px){ #sidebar{ position:sticky; top:84px; } }

/* ========== Home 専用リセット（色＆余白の後勝ち対策） ========== */
.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; }  /* ← 閉じ忘れ対策済み */
/* ===== Home NEW：上3枚「縦・大」／4枚目以降「横・コンパクト」 ===== */

/* ラッパを3列グリッド化（PC） */
.home .entry-card-wrap{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 18px !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* 1〜3枚目：縦カード（大） */
.home .entry-card-wrap .entry-card:nth-child(-n+3){
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  overflow:hidden;
}
.home .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-thumb img{
  width:100%; height:220px !important; object-fit:cover; display:block;
}
.home .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-content{
  padding:12px 14px 14px !important;
}

/* 4枚目以降：横サムネのコンパクトカード */
.home .entry-card-wrap .entry-card:nth-child(n+4){
  display:grid !important;
  grid-template-columns: 140px 1fr !important;
  gap:12px !important;
  background:#fff;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  overflow:hidden;
  padding:10px !important;
}
.home .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-thumb{
  width:100%; height:90px !important; overflow:hidden; border-radius:8px; margin:0;
}
.home .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-thumb img{
  width:100%; height:100% !important; object-fit:cover; display:block;
}
.home .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-content{
  padding:0 !important;
}
.home .entry-card-wrap .entry-card:nth-child(n+4) .entry-card-title{
  font-size:.95rem; line-height:1.35; margin:0 0 6px !important;
}

/* 2行省略（Cocoon 用） */
.home .entry-card-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35;
}

/* レスポンシブ */
@media (max-width:1024px){
  .home .entry-card-wrap{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-thumb img{ height:180px !important; }
}
@media (max-width:640px){
  .home .entry-card-wrap{ grid-template-columns: 1fr !important; gap:14px !important; }
  .home .entry-card-wrap .entry-card:nth-child(-n+3) .entry-card-thumb img{ height:180px !important; }
  .home .entry-card-wrap .entry-card:nth-child(n+4){ grid-template-columns: 120px 1fr !important; }
}
/* ====== NEW ARTICLE（Home）上3枚＝縦大／4枚目以降＝横コンパクト ====== */
/* 1) ラッパ（UL/Div）を3列グリッド化：Cocoonの新着ウィジェット＆通常ループを包括 */
.home .entry-card-wrap,
.home .widget_new_entries .new-entry-list,
.home .widget_new_entries ul,
.home .new-entry-list,
.home .widget .new-entry-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 18px !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* 2) “アイテム”にマッチする候補（li / article / div） */
.home .entry-card-wrap > *,
.home .widget_new_entries .new-entry-list > li,
.home .new-entry-list > li,
.home .widget .new-entry-list > li {
  list-style: none;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

/* 3) 1〜3枚目：縦カード（大） */
.home .entry-card-wrap > *:nth-child(-n+3),
.home .widget_new_entries .new-entry-list > li:nth-child(-n+3),
.home .new-entry-list > li:nth-child(-n+3),
.home .widget .new-entry-list > li:nth-child(-n+3) {
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* サムネイル画像（大） */
.home .entry-card-wrap > *:nth-child(-n+3) img,
.home .widget_new_entries .new-entry-list > li:nth-child(-n+3) img,
.home .new-entry-list > li:nth-child(-n+3) img,
.home .widget .new-entry-list > li:nth-child(-n+3) img {
  width: 100%;
  height: 220px !important;
  object-fit: cover;
  display: block;
}

/* タイトル周りの内側余白（大） */
.home .entry-card-wrap > *:nth-child(-n+3) .entry-card-content,
.home .widget_new_entries .new-entry-list > li:nth-child(-n+3) .entry-card-content {
  padding: 12px 14px 14px !important;
}

/* 4) 4枚目以降：横サムネのコンパクトカード */
.home .entry-card-wrap > *:nth-child(n+4),
.home .widget_new_entries .new-entry-list > li:nth-child(n+4),
.home .new-entry-list > li:nth-child(n+4),
.home .widget .new-entry-list > li:nth-child(n+4) {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 12px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
  padding: 10px !important;
}

/* 横サムネの枠と画像 */
.home .entry-card-wrap > *:nth-child(n+4) img,
.home .widget_new_entries .new-entry-list > li:nth-child(n+4) img,
.home .new-entry-list > li:nth-child(n+4) img,
.home .widget .new-entry-list > li:nth-child(n+4) img {
  width: 100%;
  height: 90px !important;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* タイトルの行間・2行省略（Cocoon想定のタイトルクラスいろいろ） */
.home .entry-card-title,
.home .new-entry-card-title,
.home .widget_new_entries .new-entry-list .entry-title,
.home .widget .new-entry-list .entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  font-size: .95rem;
  margin: 0 0 6px !important;
  color: #111 !important;
}

/* スニペット（あれば2行省略） */
.home .entry-card-snippet,
.home .new-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) {
  .home .entry-card-wrap,
  .home .widget_new_entries .new-entry-list,
  .home .new-entry-list,
  .home .widget .new-entry-list {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .home .entry-card-wrap > *:nth-child(-n+3) img,
  .home .widget_new_entries .new-entry-list > li:nth-child(-n+3) img {
    height: 180px !important;
  }
}
@media (max-width: 640px) {
  .home .entry-card-wrap,
  .home .widget_new_entries .new-entry-list,
  .home .new-entry-list,
  .home .widget .new-entry-list {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .home .entry-card-wrap > *:nth-child(n+4),
  .home .widget_new_entries .new-entry-list > li:nth-child(n+4),
  .home .new-entry-list > li:nth-child(n+4),
  .home .widget .new-entry-list > li:nth-child(n+4) {
    grid-template-columns: 120px 1fr !important;
  }
}