/* =========================================================
   Designer editable: 最終上書きCSS（他のcssは基本触らない）
   - ここだけ編集する前提で “衝突しない” ように整理済み
   - 目的：変数はここで定義し、上書きは「必要最小限」に留める
   ========================================================= */

/* =========================================================
   0) Public Theme Variables（ここが “唯一” の変数定義）
   - default = cloud（Light 基本）
   - html[data-public-theme="..."] で変数だけ差し替える
   ========================================================= */
:root{
  --pub-bg:        #f6f7fb;
  --pub-surface:   #ffffff;
  --pub-border:    #e5e7eb;
  --pub-line2:     #eef2f7;

  --pub-text:      #111827;
  --pub-muted:     #6b7280;

  --pub-accent:    #2563eb;
  --pub-accent2:   #1d4ed8;

  --pub-soft-bg:   #f9fafb;
  --pub-soft-hv:   #f3f4f6;

  --pub-shadow:    0 10px 26px rgba(17,24,39,.08);

  --pub-radius-lg: 16px;
  --pub-radius-md: 12px;

  /* spacing scale (UI baseline) */
  --pub-gap:       8px;
  --pub-gutter:    14px;
  --pub-section-y: 22px;
  --pub-card-pad:  14px;

  /* typography scale */
  --pub-font-xs:   12px;
  --pub-font-sm:   13px;
  --pub-font-base: 15px;

  /* cover/hero */
  --pub-cover-pad: 14px;
  --pub-cover-h:   520px;
  --pub-cover-h-sp:360px;
}

/* =========================================================
   Category Nav (shared)
   - index / category / badge_search で同一の見た目に統一
   - header.php の inline style を撤去し、theme.css に集約
   - ※見た目は v1.9.4 と同等（列数やカードレイアウトに影響させない）
   ========================================================= */
.category-nav{
  max-width: 1100px;
  margin: 10px auto 14px;
  padding: 0 14px;
}

.category-nav-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.category-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(10, 20, 30, .12);
  background: rgba(255, 255, 255, .70);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}

.category-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .07);
  background: rgba(255, 255, 255, .90);
}

.category-chip:active{
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .06);
}

.category-chip .cat-icon{
  width: 18px;
  text-align: center;
}

.category-chip .cat-label{
  font-weight: 800;
  letter-spacing: .01em;
}

.category-chip.is-active{
  background: rgba(21, 101, 192, .10);
  border-color: rgba(21, 101, 192, .35);
  box-shadow: 0 12px 24px rgba(21, 101, 192, .10);
  position: relative;
}

.category-chip.is-active::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(21, 101, 192, .55);
}

/* =========================================================
   Themes（全て Light ベース）
   - data-public-theme の値で「変数だけ」を差し替える
   ========================================================= */

/* cloud（default） */
html[data-public-theme="cloud"]{
  --pub-bg:      #f6f7fb;
  --pub-surface: #ffffff;
  --pub-border:  #e5e7eb;
  --pub-line2:   #eef2f7;

  --pub-text:    #111827;
  --pub-muted:   #6b7280;

  --pub-accent:  #2563eb;
  --pub-accent2: #1d4ed8;

  --pub-soft-bg: #f9fafb;
  --pub-soft-hv: #f3f4f6;

  --pub-shadow:  0 10px 26px rgba(17,24,39,.08);
}

/* ocean */
html[data-public-theme="ocean"]{
  --pub-bg:      #f3f8ff;
  --pub-surface: #ffffff;
  --pub-border:  #dbe6ff;
  --pub-line2:   #edf3ff;

  --pub-text:    #0b1b33;
  --pub-muted:   #50607a;

  --pub-accent:  #1e50a2;
  --pub-accent2: #143b7a;

  --pub-soft-bg: #f6f9ff;
  --pub-soft-hv: #eef4ff;

  --pub-shadow:  0 10px 26px rgba(13,41,86,.10);
}

/* forest */
html[data-public-theme="forest"]{
  --pub-bg:      #f4fbf7;
  --pub-surface: #ffffff;
  --pub-border:  #dcefe4;
  --pub-line2:   #edf7f1;

  --pub-text:    #102a1d;
  --pub-muted:   #567062;

  --pub-accent:  #2f7d4c;
  --pub-accent2: #1f6b3a;

  --pub-soft-bg: #f7fcf9;
  --pub-soft-hv: #eff8f3;

  --pub-shadow:  0 10px 26px rgba(23,76,46,.10);
}

/* mint */
html[data-public-theme="mint"]{
  --pub-bg:      #f2fbfa;
  --pub-surface: #ffffff;
  --pub-border:  #d8f1ee;
  --pub-line2:   #eaf8f6;

  --pub-text:    #0f2b28;
  --pub-muted:   #547270;

  --pub-accent:  #1f9d8a;
  --pub-accent2: #147a6c;

  --pub-soft-bg: #f6fdfc;
  --pub-soft-hv: #ebf9f7;

  --pub-shadow:  0 10px 26px rgba(18,115,101,.10);
}

/* grape */
html[data-public-theme="grape"]{
  --pub-bg:      #faf6ff;
  --pub-surface: #ffffff;
  --pub-border:  #e9ddff;
  --pub-line2:   #f3edff;

  --pub-text:    #21102a;
  --pub-muted:   #6a5675;

  --pub-accent:  #884898;
  --pub-accent2: #6f2c91;

  --pub-soft-bg: #fcfaff;
  --pub-soft-hv: #f4eeff;

  --pub-shadow:  0 10px 26px rgba(79,24,95,.10);
}

/* sakura */
html[data-public-theme="sakura"]{
  --pub-bg:      #fef4f6;
  --pub-surface: #ffffff;
  --pub-border:  #f6d7df;
  --pub-line2:   #fde7ec;

  --pub-text:    #2a1116;
  --pub-muted:   #73545c;

  --pub-accent:  #db4d6d;
  --pub-accent2: #c73a5a;

  --pub-soft-bg: #fff7f9;
  --pub-soft-hv: #fde9ef;

  --pub-shadow:  0 10px 26px rgba(142,22,61,.10);
}

/* amber */
html[data-public-theme="amber"]{
  --pub-bg:      #fff8f1;
  --pub-surface: #ffffff;
  --pub-border:  #f2dfc8;
  --pub-line2:   #fff0df;

  --pub-text:    #2a1b0e;
  --pub-muted:   #7a5e48;

  --pub-accent:  #ca6924;
  --pub-accent2: #a9561c;

  --pub-soft-bg: #fffaf4;
  --pub-soft-hv: #fff0df;

  --pub-shadow:  0 10px 26px rgba(120,54,10,.12);
}

/* sand */
html[data-public-theme="sand"]{
  --pub-bg:      #fbf7f0;
  --pub-surface: #ffffff;
  --pub-border:  #eadfcf;
  --pub-line2:   #f6efe4;

  --pub-text:    #2a241b;
  --pub-muted:   #6f6456;

  --pub-accent:  #b98c46;
  --pub-accent2: #9a7338;

  --pub-soft-bg: #fdfaf5;
  --pub-soft-hv: #f5ede1;

  --pub-shadow:  0 10px 26px rgba(87,64,26,.10);
}

/* mono */
html[data-public-theme="mono"]{
  --pub-bg:      #f7f7f7;
  --pub-surface: #ffffff;
  --pub-border:  #e5e7eb;
  --pub-line2:   #eef2f7;

  --pub-text:    #111827;
  --pub-muted:   #6b7280;

  --pub-accent:  #374151;
  --pub-accent2: #111827;

  --pub-soft-bg: #fafafa;
  --pub-soft-hv: #f3f4f6;

  --pub-shadow:  0 10px 26px rgba(17,24,39,.08);
}

/* steel */
html[data-public-theme="steel"]{
  --pub-bg:      #f3f6f7;
  --pub-surface: #ffffff;
  --pub-border:  #d9e2e5;
  --pub-line2:   #e9eff1;

  --pub-text:    #102023;
  --pub-muted:   #556569;

  --pub-accent:  #244344;
  --pub-accent2: #163436;

  --pub-soft-bg: #f7fafb;
  --pub-soft-hv: #eef3f5;

  --pub-shadow:  0 10px 26px rgba(20,40,43,.10);
}

/* =========================================================
   1) Apply（既存ベタ色を受ける）
   - data-theme は使わず data-public-theme に統一
   ========================================================= */
html, body{
  background: var(--pub-bg) !important;
  color: var(--pub-text) !important;
}

a{ color: var(--pub-accent); }
a:hover{ color: var(--pub-accent2); }

/* muted */
.u-muted,
.section-note,
.page-hero p,
.page-breadcrumb,
.notice-meta,
.notice-detail-meta,
.page-subtitle,
.about-contact-note{
  color: var(--pub-muted) !important;
}

/* breadcrumb: 主役を邪魔しないが、戻り先は分かる */
.page-breadcrumb{
  font-size: 12px;
  opacity: .92;
}

.page-breadcrumb a{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.page-breadcrumb a:hover{
  border-bottom-color: rgba(0,0,0,.22);
}

/* cards/surfaces */
.section-card,
.card,
.notice-item,
.notice-item--row,
.notice-detail-card,
.section-block{
  background: var(--pub-surface) !important;
  border: 1px solid var(--pub-border) !important;
  box-shadow: var(--pub-shadow) !important;
  border-radius: var(--pub-radius-lg);
}

/* image placeholders */
.card-thumb-area,
.notice-cover,
.notice-detail-cover,
.store-hero,
.store-photo,
.notice-photo,
.photo-item{
  background: var(--pub-soft-bg) !important;
}

/* chip-like boxes */
.category-chip,
.pager a,
.pager span,
.sort-links a,
.page-result-bar,
.back-link{
  background: var(--pub-surface) !important;
  border-color: var(--pub-border) !important;
}

/* text blocks that were too dark-fixed */
.card-tagline,
.card-address,
.notice-body,
.notice-detail-text{
  color: color-mix(in srgb, var(--pub-text) 88%, transparent) !important;
}

/* =========================================================
   2) Footer
   - 変数定義より後に置く（参照の安全性）
   ========================================================= */
.site-footer{
  margin-top:32px;
  padding:16px 12px;
  font-size:12px;
  text-align:center;
  color: var(--pub-muted);
  border-top: 1px solid var(--pub-border);
}
.site-footer__main{ margin-bottom: 8px; }
.site-footer__meta{
  font-size: 11px;
  color: color-mix(in srgb, var(--pub-muted) 88%, transparent);
}
.site-footer__version{ margin-left: 6px; opacity: .85; }
.site-footer__link{
  color: var(--pub-accent);
  text-decoration: none;
}

/* =========================================================
   3) About Page（indexテイストに寄せた最終・確定版）
   - ベタ色を変数化（darkでも沈まない）
   ========================================================= */
.page-about .page-hero{
  margin-top: 8px;
}

.page-about .page-about-section{
  padding: 16px;
  border-left: 4px solid color-mix(in srgb, var(--pub-accent) 28%, transparent);
  margin: 16px 0 0;
}
.page-about .page-about-section:first-of-type{
  margin-top: 12px;
}

.page-about .page-about-section h2{
  margin: 0 0 10px 0;
  font-size: 16px;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--pub-accent) 55%, var(--pub-text));
}

.page-about .page-about-section p{
  margin: 0 0 10px 0;
  line-height: 1.7;
}

.page-about .page-about-section ul{
  margin: 8px 0 12px 18px;
  color: color-mix(in srgb, var(--pub-text) 88%, transparent);
}
.page-about .page-about-section li{
  margin-bottom: 6px;
}
.page-about .page-about-section ul li:last-child{
  margin-bottom: 0;
}

@media (max-width: 640px){
  .page-about .page-about-section{
    padding: 14px 16px 18px;
    margin-top: 12px;
  }
  .page-about .page-about-section:first-of-type{
    margin-top: 10px;
  }
}

/* About：連絡導線（控えめ） */
.about-contact-note{
  margin: 28px 0 0;
  font-size: 13px;
  text-align: center;
}
.about-contact-note a{
  color: var(--pub-accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--pub-accent) 40%, transparent);
}
.about-contact-note a:hover{
  border-bottom-color: color-mix(in srgb, var(--pub-accent) 75%, transparent);
}

/* =========================================================
   4) Notice / Store cover: “白枠”や中央寄せ癖を消す（共通）
========================================================= */
/* detail card padding は本文側へ */
.page-global-notice .notice-detail,
.page-store-notice  .notice-detail{
  padding: 0 !important;
  overflow: hidden !important;
}

/* cover wrapper kill */
.page-global-notice .notice-detail .notice-detail-cover,
.page-store-notice  .notice-detail .notice-detail-cover{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* cover img full width */
.page-global-notice .notice-detail .notice-detail-cover img,
.page-store-notice  .notice-detail .notice-detail-cover img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

/* body padding back */
.page-global-notice .notice-detail .notice-detail-body,
.page-store-notice  .notice-detail .notice-detail-body{
  padding: 14px !important;
}

/* =========================================================
   5) Hero/Cover: トリミング表示（contain→cover）
   - ベタ色を変数化
========================================================= */
.notice-detail-cover,
.store-hero,
.page-store .store-hero,
.page-global-notice .notice-detail-cover{
  padding: var(--pub-cover-pad) var(--pub-cover-pad) 0;
}

.notice-detail-cover img,
.store-hero img,
.store-hero-img{
  display:block;
  width:100%;
  height: var(--pub-cover-h);
  object-fit:cover;
  border-radius: var(--pub-radius-lg);
  background: var(--pub-soft-bg);
}

@media (max-width: 640px){
  .notice-detail-cover img,
  .store-hero img,
  .store-hero-img{
    height: var(--pub-cover-h-sp);
    border-radius: 14px;
  }
}

/* =========================================================
   6) page.php：カテゴリ/バッジ周り（ここだけで決着させる）
   - “横線”の正体は badge-wrap の border/bottom なので殺す
   - dark系は見た目が詰まるので「行間」と「バッジ内余白」で解決
========================================================= */

/* 1) badge-wrap の余計な線/余白を無効化（全テーマ共通で安定させる） */
.page-store .badge-wrap{
  border: 0 !important;
  padding: 0 !important;
}

/* 2) タイトル行（店名 + カテゴリ） */
.page-store .store-title-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.page-store .store-categories-inline{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 2px;
}

/* 3) バッジ行（テイクアウト等）… “キャッチコピーとの間” もここで作る */
.page-store .badge-wrap-secondary{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* 4) バッジは少し背を高くして、読みやすさと“余白感”を揃える */
.page-store .badge{
  padding: 6px 12px;
  line-height: 1.35;
}

/* v1.8.1: 分類ラベル（分類→バッジ表示） */
.page-store .badge-group-label{
  font-weight: 700;
}

/* 分類ラベルは薄いアクセントを混ぜて“見出し感”を出す */
.page-store .badge-group-label{
  background: color-mix(in srgb, var(--pub-accent) 12%, var(--pub-surface)) !important;
  border: 1px dashed color-mix(in srgb, var(--pub-accent) 28%, var(--pub-border)) !important;
  color: color-mix(in srgb, var(--pub-text) 85%, transparent) !important;
}

/* 6) キャッチコピーの色（darkでも沈まない） */
.page-store .section-card > p{
  color: var(--pub-muted) !important;
}

/* =========================================================
   7) Category badge（badge-cat）を “読みやすいタグ” にする
   - カテゴリだけ上書きする
   ========================================================= */

/* 共通：カテゴリは「少しだけ固い」見た目にする */
.page-store .badge.badge-cat{
  font-weight: 600;
  letter-spacing: .02em;
}

/* カテゴリは少しだけアクセントを混ぜて “タグ感” を出す */
html[data-public-theme] .page-store .badge.badge-cat{
  background: color-mix(in srgb, var(--pub-accent) 18%, var(--pub-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--pub-accent) 45%, var(--pub-border)) !important;
  color: color-mix(in srgb, var(--pub-text) 92%, transparent) !important;
}

/* hover：少しだけ明るく */
html[data-public-theme] .page-store .badge.badge-cat:hover{
  background: color-mix(in srgb, var(--pub-accent) 26%, var(--pub-surface)) !important;
}

/* “カテゴリの行” 自体も少しだけ空気を作る（詰まり感を減らす） */
html[data-public-theme] .page-store .store-categories-inline{
  margin-top: 4px;
}