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

/* TOPの説明文：PCは通常表示、スマホは折りたたみ表示（details） */
.page-index .hero-text--sp{
  display: none;
}

@media (max-width: 640px){
  .page-index .hero-text--pc{
    display: none;
  }
  .page-index .hero-text--sp{
    display: block;
  }
  /* 「説明を読む」：ボタンだけ右寄せ、本文は左寄せ（スマホのみ） */
  .page-index .hero-details{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .page-index .hero-details summary{
    cursor: pointer;
    list-style: none;

    /* 押せるUI */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 999px;
    border: 1px solid var(--pub-border, rgba(15,23,42,.12));
    background: color-mix(in srgb, var(--pub-surface, #fff) 78%, transparent);
    box-shadow: none;
    font-weight: 800;
    color: var(--pub-text, #111827);
    user-select: none;
    margin: 0;
  }
  .page-index .hero-details summary::-webkit-details-marker{
    display: none;
  }
  .page-index .hero-details summary::after{
    content: "";
    width: 9px;
    height: 9px;
    display: inline-block;
    border-right: 2px solid color-mix(in srgb, var(--pub-text, #111827) 65%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--pub-text, #111827) 65%, transparent);
    transform: rotate(45deg);
    margin-left: 2px;
    transition: transform .16s ease, opacity .16s ease;
    opacity: .75;
  }
  .page-index .hero-details summary:hover{
    background: color-mix(in srgb, var(--pub-soft-hv, #f3f4f6) 70%, transparent);
  }
  .page-index .hero-details[open] summary{
    border-color: color-mix(in srgb, var(--pub-accent, #e74c7b) 28%, var(--pub-border, rgba(15,23,42,.12)));
  }
  .page-index .hero-details[open] summary::after{
    transform: rotate(225deg);
    opacity: .9;
  }
  .page-index .hero-details__body{
    align-self: stretch;
    text-align: left;
    margin-top: 0;
  }
}

.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);
}

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


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

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

/* 支援所ヒーローの見た目（padding / object-fit 等）は theme.css 側で統一 */
.store-hero-placeholder{
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pub-soft-hv, #f3f4f6);
  color: var(--pub-muted, #6b7280);
  border-radius: var(--pub-radius-lg, 16px);
  font-weight: 800;
  letter-spacing: .02em;
}

.affiliate-box{ margin: 8px auto; }

/* 支援所ページ：写真グリッド */
.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.php の inline style を CSS に集約） */
.page-store .store-badge-groups{ margin-top: 8px; }

/* 2カラム固定（左=分類名 / 右=バッジ群） */
.page-store .store-badge-group{
  display: grid;
  grid-template-columns: 9ch 1fr;
  column-gap: 10px;
  align-items: start;
  margin-top: 6px;
}

.page-store .store-badge-group__title{
  font-size: 12px;
  font-weight: 700;
  color: rgba(10, 20, 30, .65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  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;
  min-width: 0;
}

.page-store .store-badge-group__items .badge{ line-height: 1; }

/* スマホ：バッジは折り畳み（PHPで details を出す） */
.page-store .store-badges-details{ margin-top: 10px; }
.page-store .store-badges-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;

  display: block;
  width: 100%;

  padding: 10px 44px 10px 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--pub-text, #111827);
  position: relative;
}
.page-store .store-badges-summary::-webkit-details-marker{ display:none; }
.page-store .store-badges-summary::after{
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
}
.page-store .store-badges-details[open] .store-badges-summary::after{ content:'▴'; }

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

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

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


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



/* =========================================================
   4) About Page
   - どの public テーマでも可読性を落とさない
   - 「light 以外＝ダーク」と決め打ちせず、テーマ変数（--pub-text など）を優先する
   ========================================================= */

/* Aboutカード本文色：テーマ変数を最優先（未定義なら既存変数へフォールバック） */
.page-about .section-card{
  color: var(--pub-text, var(--text-main, var(--text, #111827))) !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;
}

/* リンク：アクセント（未定義なら通常リンク色へ） */
.page-about .section-card a:not(.btn){
  color: var(--pub-accent, var(--link, inherit)) !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(--pub-muted, var(--text-muted, var(--muted, rgba(0,0,0,.55)))) !important;
  font-weight: 600;
}


/* =========================================================
   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{
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

.meta-link{
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.meta-link:hover{
  opacity: .75;
}

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

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

.meta-link {
  color: var(--link-color, #3366cc);
  text-decoration: none;
}

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

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

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

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

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

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

.meta-link {
  color: var(--link-color, #3366cc);
  text-decoration: none;
}

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

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

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

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

.section-meta .meta-links {
  display: block;   /* ← これが重要 */
}

/* =========================================================
   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;         /* ← badge（12px + 6+6 + border想定）と合わせる */
}

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

/* FIX p3: Links section CTA (lower priority, consistent) */
.meta-divider{height:1px;background:rgba(0,0,0,.08);margin:14px 0;}
.meta-cta{
  background: color-mix(in srgb, var(--pub-surface, #ffffff) 86%, transparent);
  border: 1px solid var(--pub-border, rgba(15,23,42,.12));
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.meta-cta__title{margin:0 0 6px;font-size:16px;}
.meta-cta__lead{margin:0 0 10px;opacity:.85;font-size:13px;line-height:1.6;}

/* actions: grid (pro look) */
.meta-cta__actions{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meta-cta__btn{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--pub-border, rgba(15,23,42,.14));
  background: color-mix(in srgb, var(--pub-surface, #ffffff) 90%, transparent);
  text-decoration:none;
}
.meta-cta__btn:hover{
  background: color-mix(in srgb, var(--pub-soft-hv, #f3f4f6) 70%, transparent);
}
.meta-cta__title2{
  font-weight: 800;
  font-size: 14px;
  color: #111827;
  letter-spacing: .01em;
}
.meta-cta__sub{
  font-size: 12px;
  color: #374151;
  opacity: .72;
}

.meta-cta__btn--primary{
  border-color: color-mix(in srgb, var(--pub-accent, #e74c7b) 35%, var(--pub-border, rgba(15,23,42,.14)));
  box-shadow: 0 10px 26px rgba(231, 76, 123, 0.14);
}
.meta-cta__btn--ghost{
  opacity: 1;
}

/* mobile: 1 column full width */
@media (max-width: 560px){
  .meta-cta__actions{grid-template-columns: 1fr;}
}

/* Breadcrumb (subtle) */
.page-crumbs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:10px 0 14px;font-size:13px;opacity:.85;}
.page-crumbs a{text-decoration:none;}
.page-crumbs__sep{opacity:.6;}


/* FIX p3: simple list & form helpers for system pages */
.list-basic{margin:0;padding-left:1.2em;}
.list-basic li{margin:6px 0;}
.form-basic{max-width:720px;}
.form-row{margin:12px 0;}
.form-label{display:block;font-weight:700;margin:0 0 6px;}
.form-input,.form-textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.16);background:rgba(255,255,255,.6);}
.form-textarea{resize:vertical;}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

/* fix:  contact form polish (public) */
.form-select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.16);background:rgba(255,255,255,.6);} 
.form-select:focus,.form-input:focus,.form-textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(21,101,192,.15);border-color:rgba(21,101,192,.45);} 

/*
.page-contact .section-card{max-width:860px;margin:0 auto;} 
.page-contact .page-breadcrumb{max-width:860px;margin:14px auto 0;padding:0 14px;}
*/
.page-contact .form-basic{max-width:720px;margin:0 auto;} 

.contact-hint{margin-top:8px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);}
.contact-hint .u-small{margin:0;}

.contact-details{margin-top:12px;border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:12px;background:rgba(255,255,255,.5);} 
.contact-details > summary{cursor:pointer;font-weight:800;list-style:none;} 
.contact-details > summary::-webkit-details-marker{display:none;} 
.contact-details > summary:after{content:'▾';float:right;opacity:.65;} 
.contact-details[open] > summary:after{content:'▴';} 

.page-contact .form-actions .btn{min-height:44px;padding:10px 14px;border-radius:14px;} 
.page-contact .contact-actions{display:flex !important;visibility:visible !important;opacity:1 !important;position:relative;z-index:1;}
.page-contact .contact-actions .btn{display:inline-flex !important;}

/* =========================================================
   Contact page button visibility (theme-safe)
   - In non-light themes, components.css applies a global .btn override
     (white text / translucent bg) intended for dark surfaces.
   - The Contact page uses a light card surface, so the buttons can
     appear "invisible". Force a light-surface button style here.
   ========================================================= */

html[data-public-theme] .page-contact .form-actions .btn{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.12);
  color: #111827;
}
html[data-public-theme] .page-contact .form-actions .btn:hover{
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.18);
}
html[data-public-theme] .page-contact .form-actions .btn-primary{
  background: var(--pub-accent, #1565c0);
  border-color: color-mix(in srgb, var(--pub-accent, #1565c0) 75%, #000 0%);
  color: #fff;
}

/* =========================================================
   Contact form field readability (theme-safe)
   - Some themes apply "dark-surface" button rules globally.
   - Input elements keep UA defaults; force a clear foreground color
     and placeholder color on the light card surface.
   ========================================================= */

html[data-public-theme] .page-contact .form-input,
html[data-public-theme] .page-contact .form-textarea,
html[data-public-theme] .page-contact .form-select{
  color: #111827;
}

html[data-public-theme] .page-contact .form-input::placeholder,
html[data-public-theme] .page-contact .form-textarea::placeholder{
  color: rgba(17,24,39,.48);
}

html[data-public-theme] .page-contact .form-select option{
  color: #111827;
  background: #fff;
}
html[data-public-theme] .page-contact .form-actions .btn-primary:hover{
  background: var(--pub-accent2, #1d4ed8);
  border-color: color-mix(in srgb, var(--pub-accent2, #1d4ed8) 75%, #000 0%);
}
html[data-public-theme] .page-contact .form-actions .btn-ghost{
  background: transparent;
  color: var(--pub-accent, #1565c0);
  border-color: rgba(21,101,192,.25);
}
html[data-public-theme] .page-contact .form-actions .btn-ghost:hover{
  background: rgba(21,101,192,.08);
  border-color: rgba(21,101,192,.35);
}

/* =========================================================
   Map Page
   - map.php
   ========================================================= */

.page-map .map-section{padding:16px;}

.page-map .map-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.page-map .map-toolbar__right .btn{white-space:nowrap;}

.page-map .map-wrap{
  width:100%;
}

.page-map .store-map{
  width:100%;
  height:min(70vh, 760px);
  min-height:420px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.page-map .leaflet-container{
  font: inherit;
}

.page-map .map-popup__title{
  display:inline-block;
  font-weight:700;
  color: var(--pub-accent, #1565c0);
  text-decoration:none;
}

.page-map .map-popup__title:hover{
  text-decoration:underline;
}

.page-map .map-popup__addr{
  margin-top:6px;
  color: rgba(17,24,39,.75);
  font-size: 13px;
  line-height:1.35;
}


/* ---------------------------------------------------------
   Map markers (category color)
   --------------------------------------------------------- */
.page-map .map-divicon{
  background: transparent;
  border: 0;
}

.page-map .map-dot{
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* 0: カテゴリ未判定 */
.page-map .map-dot--c0{ background:#6b7280; }

/* 1..12: カテゴリ色（循環） */
.page-map .map-dot--c1{  background:#1e88e5; }
.page-map .map-dot--c2{  background:#43a047; }
.page-map .map-dot--c3{  background:#fb8c00; }
.page-map .map-dot--c4{  background:#8e24aa; }
.page-map .map-dot--c5{  background:#e53935; }
.page-map .map-dot--c6{  background:#00897b; }
.page-map .map-dot--c7{  background:#3949ab; }
.page-map .map-dot--c8{  background:#c0ca33; }
.page-map .map-dot--c9{  background:#6d4c41; }
.page-map .map-dot--c10{ background:#00acc1; }
.page-map .map-dot--c11{ background:#f4511e; }
.page-map .map-dot--c12{ background:#546e7a; }

/* Legend */
.page-map .map-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.page-map .map-legend__item{
  display:inline-flex;
  gap:8px;
  align-items:center;
  line-height:1.1;
}

.page-map .map-legend__dot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.95);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}

.page-map .map-legend__label{
  font-size: 13px;
  color: rgba(17,24,39,.78);
}

.page-map .map-popup__cat{
  margin-top:6px;
  color: rgba(17,24,39,.70);
  font-size: 12px;
  line-height:1.25;
}