/* =========================================================
   pages.css
   - “特定ページだけ”の見た目調整を書く
   - 共通部品化できるものは components.css へ
   ========================================================= */


/* =========================================================
   1) Index Page (TOP) 微調整
   - section-block の縦余白/内側余白を少し詰める
   - 見出し/注釈の間隔を整える
   ========================================================= */

.page-index .section-block{
  margin: 16px auto;
  padding: 7px;
}

@media (max-width: 640px){
  .page-index .section-block{
    margin: 14px auto;
    padding: 5px;
  }
}

.page-index .section-head{
  margin-bottom: 8px;
}

.page-index .section-note{
  margin: 0 0 8px 0;
}

.page-index .page-hero{
  margin-top: 8px;
}

.page-index .category-nav{
  margin-top: 10px;
}

@media (max-width: 640px){
  .page-index .category-nav{
    margin-top: 8px;
  }
}

/* 「店舗からのおしらせ（行）」を “軽いカード” に寄せる（影弱め） */
.page-index .notice-item--row{
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}


/* =========================================================
   Ai Tools: TOP filters / cards (Phase2)
   ========================================================= */

.page-home .tools-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.page-home .tools-title{
  margin:0;
}

.page-home .tools-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.page-home .tools-filter{
  display:flex;
  gap:8px;
  align-items:center;
}

.page-home .tools-filter-label{
  font-size:12px;
  color:#64748b;
  font-weight:700;
}

.page-home .tools-filter-select{
  min-width:180px;
  height:38px;
  padding:6px 10px;
}

.page-home .tools-filter-reset{
  height:38px;
}

.page-home .tools-filter-count{
  font-size:12px;
  color:#64748b;
  font-weight:700;
}

.page-home .tools-empty{
  margin:0;
  color:#6b7280;
}

.page-home .card-memo{
  white-space:normal;
}

.page-home .card-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

.page-home .chip--muted{
  opacity:.85;
}

@media (max-width: 640px){
  .page-home .tools-filter-select{
    min-width:140px;
  }
}

/* store_notices.php：上のヘッダー直下の余白を揃える */
.page-store-notices .store-notices-section{
  margin-top: 10px;
}

/* --- Ai.dev: TOP 一覧（サムネ枠なし / タイトル重なり防止）--- */
.page-index--no-thumb .card-thumb-area,
.page-home--no-thumb  .card-thumb-area{
  display:none; /* 枠ごと消す */
}

.page-index--no-thumb .card-title-overlay,
.page-home--no-thumb  .card-title-overlay{
  position: static;   /* absolute解除（重なり防止） */
  margin: 0 0 6px;    /* 8px → 6px */
  padding: 0;
}

.page-index--no-thumb .card-title-overlay-text,
.page-home--no-thumb  .card-title-overlay-text{
  display: inline-block;
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: normal;   /* 見出しとして折り返す */
  text-overflow: clip;   /* ellipsis解除 */
}

.page-index--no-thumb .card-body,
.page-home--no-thumb  .card-body{
  padding-top: 10px;   /* 14px → 10px */
}

/* Ai.dev TOP（サムネ無し）：説明文を3行で止める */
.page-index--no-thumb .card-tagline,
.page-home--no-thumb  .card-tagline{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================================================
   2) Store Page
   ========================================================= */

.page-store .section-card{
  max-width: 1100px;
}

/* 店舗ヒーロー（画像まわり） */
.store-hero{
  padding: 10px;
  background: #f3f4f6;
  border-radius: 16px;
  overflow: hidden;
}

.store-hero-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  border-radius: 14px;
  margin: 0 auto;
}

@media (max-width: 640px){
  .store-hero-img{
    max-height: 360px;
  }
}

/* 店舗ページ：写真グリッド */
.page-store .store-photo-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 900px){
  .page-store .store-photo-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px){
  .page-store .store-photo-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-store .store-photo{
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.page-store .store-photo img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* 店舗名＋カテゴリ横並び */
.page-store .store-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-store .store-title-row h1{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.page-store .store-categories-inline{
  display: flex;
  gap: 6px;
}

@media (max-width: 640px){
  .page-store .store-title-row{
    align-items: flex-start;
  }
}


/* =========================================================
   2.5) 404 Page
   ========================================================= */

.page-404 .nf-head{
  margin: 0 0 10px 0;
  font-size: 16px;
}

.page-404 .nf-list{
  margin: 0;
  padding-left: 18px;
  color: color-mix(in srgb, var(--pub-text, #111827) 82%, transparent);
  line-height: 1.8;
}

.page-404 .nf-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* =========================================================
   3) Notice Detail（全体/店舗 共通）
   - 現行HTML：article.section-card.notice-detail を前提
   - レイアウトは section-card 側に任せ、ここは中身だけ整える
   ========================================================= */

/* 本文側の余白（読みやすさ） */
.notice-detail-body{
  padding: 14px;
}

.notice-detail-text{
  margin: 0;
  line-height: 1.9;
  color: var(--text-main, var(--text, #111827));
  white-space: normal;
}

.notice-detail-empty{
  color: var(--text-muted, #6b7280);
}

.notice-photos-section{
  margin-bottom: 16px;
}

/* 付随写真（詳細ページの画像） */
.notice-photos-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 900px){
  .notice-photos-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px){
  .notice-photos-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.notice-photo{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.notice-photo img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* 店舗ページ：写真セクション（別グリッド） */
.store-photos .photo-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px){
  .store-photos .photo-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.store-photos .photo-item{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.store-photos .photo-item img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}


/* =========================================================
   4) About Page
   - light以外でも可読性を保つ（About専用）
   - テーマ判定は html[data-public-theme] に一本化
   ========================================================= */

/* まずはカード本文色を “本文用” に固定（テーマに負けにくく） */
.page-about .section-card{
  color: var(--text-main, var(--text, #111827)) !important;
}

/* 非lightのときは本文色を明るく固定（publicテーマ運用に合わせる） */
html[data-public-theme]:not([data-public-theme="light"]) .page-about .section-card{
  color: #e5e7eb !important;
}

/* About内の本文要素は全部 “継承” に統一 */
.page-about .section-card p,
.page-about .section-card li,
.page-about .section-card ul,
.page-about .section-card ol{
  color: inherit !important;
}

/* リンクだけ少し明るく（非lightの時） */
html[data-public-theme]:not([data-public-theme="light"]) .page-about .section-card a{
  color: #93c5fd !important;
}

/* リストの体裁 */
.page-about .section-card ul{
  margin: 10px 0 0;
  padding-left: 1.2em;
  line-height: 1.75;
}

.page-about .section-card li{
  margin: 6px 0;
  line-height: 1.75;
}

/* マーカー色（light/非lightで破綻しない） */
.page-about .section-card li::marker{
  color: var(--text-muted, var(--muted, rgba(0,0,0,.55))) !important;
  font-weight: 600;
}

html[data-public-theme]:not([data-public-theme="light"]) .page-about .section-card li::marker{
  color: rgba(229,231,235,.75) !important;
  font-weight: 700;
}


/* =========================================================
   5) Footer
   - 変数（pub-*）に寄せるため、基本は css/theme.css 側で定義する
   - pages.css では “ページ固有” のみ扱う
   ========================================================= */

.section-meta{
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

.section-meta .section-note{
  font-size: 14px;
  opacity: .8;
}

.meta-links{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 0.9rem;
  display: block;
}

.meta-links > li{
  margin: 4px 0;
}

/* 箇条書きっぽさ */
.meta-links > li::before{
  content: "・";
  margin-right: 4px;
}

.meta-link{
  font-size: 14px;
  color: var(--link-color, #3366cc);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.meta-link:hover{
  opacity: .75;
  text-decoration: none;
}

/* 兄弟サイトだけ横並び */
.meta-links-siblings::before{
  content: "・";
}

.meta-links-siblings a{
  margin-right: 8px;
  white-space: nowrap;
}


/* =========================================================
   Store badge groups（V1.9.7：縦ズレ解消）
   - flex + align-items:center だと “分類” と “ピル” の行ボックス差で
     微妙な上下ズレが出るので、Grid 2カラムで揃える
   ========================================================= */

/* 分類＋バッジを2カラムで揃える（縦ズレしない） */
.page-store .store-badge-group{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  align-items: start;
  margin-top: 6px;
}

/* 分類ラベル（左）：バッジと同じ“高さ感”に固定してズレを消す */
.page-store .store-badge-group__title{
  min-width: 3.5em;
  font-size: 12px;
  font-weight: 700;
  color: rgba(10,20,30,.65);
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  line-height: 1;
  height: 26px;
}

/* バッジ群（右側） */
.page-store .store-badge-group__items{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}


/* =========================
   Global Notices (List)
   ========================= */

.notice-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-item--row{
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.notice-item--row .notice-link{
  display: flex;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}

.notice-item--row .notice-thumb{
  flex: 0 0 110px;
}

.notice-item--row .notice-thumb img{
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.notice-item--row .notice-body{
  flex: 1;
  min-width: 0;
}

.notice-meta{
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.notice-title{
  font-size: 15px;
  margin: 0 0 4px;
  line-height: 1.4;
}

.notice-snippet{
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* hover */
.notice-item--row:hover{
  background: #f5f7fb;
}


/* =========================
   store_notice.php 調整
   - タイトルの左はみ出し対策
   - 下部ボタン（一覧へ / 店舗ページへ）を見やすく
   ========================= */

/* ページ全体の左右余白を統一（パンくず〜本文〜ボタンまで） */
.page-store-notice{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 見出し（タイトル） */
.page-store-notice .section-head{
  margin: 10px 0 8px;
}

.page-store-notice .section-head h1{
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* パンくずが別コンテナで左右ズレる場合の保険 */
.page-store-notice .page-breadcrumb,
.page-store-notice .breadcrumb,
.page-store-notice .breadcrumbs{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

/* 下部アクション（カード幅いっぱい + 背景） */
.page-store-notice .notice-actions{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px;
  margin: 24px -16px 0;
  background: #f1f5f9;
  border-top: 1px solid #dbe3ec;
}

/* 共通ボタン */
.page-store-notice .notice-actions .back-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

/* サブ */
.page-store-notice .notice-actions .back-link--sub{
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.page-store-notice .notice-actions .back-link--sub:hover{
  background: #f8fafc;
}

/* メイン */
.page-store-notice .notice-actions .back-link--primary{
  background: #1565c0;
  color: #ffffff;
  border: 1px solid #1565c0;
  box-shadow: 0 4px 12px rgba(21,101,192,.25);
}
.page-store-notice .notice-actions .back-link--primary:hover{
  background: #0f4aa2;
}

@media (max-width: 520px){
  .page-store-notice .notice-actions{
    flex-direction: column;
  }
  .page-store-notice .notice-actions .back-link{
    width: 100%;
  }
}

/* ===== store_notice: actions (FORCE) ===== */
.page-store-notice .notice-actions a.back-link--sub{
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

.page-store-notice .notice-actions a.back-link--primary{
  background: #1565c0 !important;
  color: #ffffff !important;
  border: 1px solid #1565c0 !important;
  box-shadow: 0 4px 12px rgba(21,101,192,.25) !important;
}

.page-store-notice .notice-actions a.back-link--primary:hover{
  background: #0f4aa2 !important;
}


/* ------------------------------------------------------------
 * Phase 3: tools filters URL sync / compare (public)
 * ------------------------------------------------------------ */
.tools-filter-hint{
  font-size:12px;
  color:#6b7280;
  margin-left:8px;
  white-space:nowrap;
}
.tools-compare{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:8px;
}
.tools-compare-count{
  font-size:12px;
  color:#111827;
  background:rgba(17,24,39,.06);
  padding:4px 8px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}
.tools-compare-count.is-active{
  background:rgba(17,24,39,.10);
  font-weight:800;
}
.tools-compare-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  padding:2px 6px;
  margin-left:6px;
  border-radius:999px;
  background:rgba(17,24,39,.14);
  font-weight:800;
  font-variant-numeric: tabular-nums;
}
.tools-compare-clear{
  font-size:12px;
  padding:6px 10px;
}

.card-shell{
  position:relative;
}

.card-toolbar{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  z-index:3;
}

.card-compare-btn,
.card-ext-link{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.92);
  color:#111827;
  text-decoration:none;
  cursor:pointer;
  line-height:1;
  font-weight:700;
}

.card-compare-btn.is-active{
  border-color:rgba(17,24,39,.35);
  background:rgba(17,24,39,.06);
}

.card-compare-btn:focus,
.card-ext-link:focus{
  outline:2px solid rgba(59,130,246,.45);
  outline-offset:2px;
}



/* compare panel */
.compare-panel{
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--c-border, #ddd);
  border-radius: 12px;
  background: var(--c-card, #fff);
}
.compare-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.compare-title{
  margin:0;
  font-size: 18px;
}
.compare-scroll{
  overflow-x: auto;
}
.compare-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.compare-th, .compare-td{
  border-top: 1px solid var(--c-border, #ddd);
  padding: 10px;
  vertical-align: top;
  text-align:left;
}
.compare-th{
  width: 120px;
  white-space: nowrap;
  color: var(--c-muted, #666);
  background: rgba(0,0,0,0.02);
}
.compare-tool-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.compare-remove{
  align-self:flex-end;
  border: 1px solid var(--c-border, #ddd);
  background: transparent;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  line-height: 26px;
  cursor: pointer;
}
.compare-tool-link{
  font-weight: 700;
  text-decoration: none;
}
.compare-tool-sub{
  font-size: 12px;
  color: var(--c-muted, #666);
}
.compare-ext{
  text-decoration:none;
  font-weight:700;
}


/* compare panel (drawer) : V0.6.2 */
.compare-panel.compare-panel--drawer{
  position: fixed;
  top: 0;
  right: 0;
  width: min(440px, 92vw);
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  transform: translateX(105%);
  transition: transform .18s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--c-card, #fff);
}

.compare-panel.compare-panel--drawer.is-open{
  transform: translateX(0);
}

.compare-panel.compare-panel--drawer .compare-scroll{
  flex: 1;
  overflow: auto;
}

.compare-panel.compare-panel--drawer .compare-table{
  min-width: 520px;
}

.compare-panel.compare-panel--drawer .compare-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* mobile: bottom drawer */
@media (max-width: 900px){
  .compare-panel.compare-panel--drawer{
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: min(70dvh, 520px);
    transform: translateY(105%);
    border-left: none;
    border-top: 1px solid var(--c-border, #ddd);
  }
  .compare-panel.compare-panel--drawer.is-open{
    transform: translateY(0);
  }
}


/* -------------------------------
 * Compare drawer (selected cards)
 * ------------------------------- */
.compare-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  margin-left: 6px;
  font-size: 12px;
  background: rgba(0,0,0,.06);
}

.compare-panel--drawer .compare-selected{
  padding: 12px;
  display: grid;
  gap: 10px;
  overflow: auto;
  flex: 1;
}

.compare-empty{
  color: var(--c-muted, #666);
  font-size: 14px;
  line-height: 1.5;
}

.compare-card{
  border: 1px solid var(--c-border, #ddd);
  border-radius: 12px;
  background: var(--c-card, #fff);
  padding: 10px 10px 9px;
}

.compare-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.compare-card__name{
  font-weight: 700;
  line-height: 1.35;
}

.compare-card__remove{
  border: 1px solid var(--c-border, #ddd);
  background: transparent;
  border-radius: 10px;
  width: 34px;
  height: 30px;
  line-height: 28px;
  cursor: pointer;
}

.compare-card__tag{
  margin-top: 6px;
  font-size: 13px;
  color: var(--c-muted, #666);
  line-height: 1.45;
}

.compare-card__price{
  margin-top: 6px;
  font-size: 13px;
}

.compare-panel--drawer .compare-foot{
  padding: 12px;
  border-top: 1px solid var(--c-border, #ddd);
  display:flex;
  gap: 10px;
  justify-content: space-between;
}

/* -------------------------------
 * Compare modal (full width)
 * ------------------------------- */
.compare-modal{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
}

.compare-modal.is-hidden{
  display: none;
}

.compare-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.compare-modal__panel{
  position: relative;
  margin: 24px auto;
  width: min(1200px, calc(100vw - 24px));
  height: min(86dvh, 820px);
  background: var(--c-card, #fff);
  border-radius: 14px;
  border: 1px solid var(--c-border, #ddd);
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

.compare-modal__head{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid var(--c-border, #ddd);
}

.compare-modal__title{
  margin: 0;
  font-size: 18px;
}

.compare-modal__scroll{
  padding: 0;
  overflow: auto;
  flex: 1;
}

.compare-modal__scroll .compare-table{
  min-width: 720px;
}

/* mobile: bottom sheet feel */
@media (max-width: 900px){
  .compare-modal__panel{
    margin: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}