/* —— Pudding Tokens (override) —— */
body.theme-pudding {
  --bg: #FFF9F1;          /* クリーム */
  --ink: #3D342C;
  --muted: #6B5B4E;
  --accent: #E8B54B;      /* カスタード系のアクセント */
  --line: #E8DCC7;
  --chip: #FFF2C9;

  --radius-l: 20px;
  --radius-m: 14px;
  --radius-s: 10px;

  --shadow-1: 0 1px 2px rgba(163,102,42,.06), 0 3px 8px rgba(61,52,44,.06);
  --shadow-2: 0 4px 12px rgba(163,102,42,.10), 0 12px 28px rgba(61,52,44,.10);
}

/* 背景：うっすらプリン柄 */
body.theme-pudding::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 20px 20px, rgba(163,102,42,.06) 2px, transparent 3px) 0 0/40px 40px,
    linear-gradient(180deg, rgba(247,230,168,.10), rgba(247,230,168,0));
  opacity: .6;
}

/* ヘッダーの雰囲気をやさしく */
body.theme-pudding .site-header {
  background: linear-gradient(180deg,#FFFDF8 0%, #FFF6E3 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* タブ（角丸＆柔らかい面） */
body.theme-pudding .tabs {
  padding: 6px; gap: 6px;
  background: #FFF8E3;
  border: 1px solid #EEDAA0;
  border-radius: var(--radius-l);
}
body.theme-pudding .tab {
  color: #6B5B4E; background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-m);
}
body.theme-pudding .tab.is-active,
body.theme-pudding .tab[aria-selected="true"] {
  color: #A3662A; background: #fff; border-color: #EEDAA0; box-shadow: var(--shadow-1);
}

/* 検索バー */
body.theme-pudding .search-row #q {
  background: #FFFCF3;
  border: 1px solid var(--line);
}
body.theme-pudding .btn {
  border: 1px solid #EEDCA5; background: #F7E6A8; color: #3D342C;
}
body.theme-pudding .btn:hover  { background: #F3D88A; }
body.theme-pudding .btn:active { background: #E6C56B; }

/* タグ（ピル） */
body.theme-pudding .tag-list .tag-item {
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
body.theme-pudding .tag-list .tag-item[aria-pressed="true"] {
  background: #FFF2C9; border-color: #E8C879; box-shadow: inset 0 0 0 2px rgba(232,200,121,.25);
  color: #A3662A; font-weight: 700;
}

/* カード */
body.theme-pudding .card { background: #fff; border-color: var(--line); }
body.theme-pudding .card .meta .badge {
  padding: 2px 8px; border-radius: 999px;
  background: #FFF2C9; border: 1px solid #ECD79A; color: #A3662A;
}

/* “おまかせ”のグリッドはそのまま（デバイスで4列→可変） */


/* ===== detail 共通の“プリン風”カード ===== */
body.theme-pudding #detail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow-1);
}

/* パンくずやリンク色のトーン */
body.theme-pudding a { color: #A3662A; }
body.theme-pudding h1 { line-height: 1.2; }


/* かわいい境界線（プリン） */
.cute-divider {
  width: 100%;
  margin: 40px auto 12px;
  display: flex;              /* 左線・プリン・右線を横並び */
  align-items: center;        /* 縦位置をそろえる */
  gap: 12px;                  /* 線とプリンのすきま */
  font-family: "Yomogi", sans-serif;
}

/* 左右の点線 */
.cute-divider::before,
.cute-divider::after {
  content: "";
  flex: 1;                    /* 画面幅いっぱいまで伸びる */
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    #e4b58f,
    #e4b58f 6px,
    transparent 6px,
    transparent 12px
  );
  border-radius: 2px;
}

/* 真ん中のプリン */
.cute-divider__icon {
  font-size: 1.3rem;
  line-height: 1;
}

/* ホーム下部4カード専用：背景をプリン色に */
.home-pages__grid .card--image {
  background: var(--chip);       /* プリン色の背景 */
  border-color: var(--line);     /* 枠もプリン系に合わせたい場合 */
}

/* 下4カードのキャプション文字を小さく */
.home-pages__grid .home-pages__caption p {
  text-align: center;   /* ← これだけで中央寄せ */
  font-size: 0.8rem;     /* ← お好きなサイズに調整OK */
  line-height: 1.2;      /* 余白ちょい詰め */
  margin: 0.25rem 0 0;   /* 上に少しだけ余白 */
}


/* ランダムギャラリーとあれこれのタイトルだけ中央寄せ */
.section-title {
  text-align: left; /* デフォルトが左寄せの場合を維持 */
}

/* ▼ランダムギャラリー */
.omakase-panel > .section-title {
  text-align: center;
}

/* ▼あれこれ */
.home-pages > .section-title {
  text-align: center;
}



/* === タイトル付きプリン区切り線 === */
.cute-title-divider {
  width: 100%;
  margin: 40px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Yomogi", sans-serif;
  font-size: 1.1rem;
  color: var(--ink);
}

/* 左右の点線 */
.cute-title-divider::before,
.cute-title-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    #e4b58f,
    #e4b58f 6px,
    transparent 6px,
    transparent 12px
  );
}

.cute-title-divider .icon {
  font-size: 1.3rem;
  line-height: 1;
}

.cute-title-divider .text {
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* cute-divider を「タイトル帯」にする拡張 */
.cute-divider.cute-divider--title{
  margin: 40px auto 20px;
  gap: 10px;                 /* 線と🍮と文字の間隔 */
  justify-content: center;
}

/* 中央テキスト */
.cute-divider__text{
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* 🍮アイコンは少しだけ大きめ */
.cute-divider.cute-divider--title .cute-divider__icon{
  font-size: 1.25rem;
}


/* タグで絞りゅ の見た目だけ可愛く */
.tag-toggle__label {
  font-family: "Yomogi", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 10px;
}


/* タグで絞りゅ の白いボックスの高さを小さくする */
body.theme-pudding .tags-disclosure summary.tag-toggle {
  padding-top: 6px;      /* ← 上の余白 */
  padding-bottom: 6px;   /* ← 下の余白 */
  padding-left: 14px;    /* ← 左の余白はそのまま */
  padding-right: 14px;   /* ← 右の余白もそのまま */
}