/* ============================================================
   公開ページ（要件書6-1・6-5。段階5）
   ============================================================
   ★スマホで読めることが先（依頼 必須3）。
     * 幅 360px で横スクロールが出ない
     * 1商品1カード
     * 本文は 16px。小さくしすぎない（お客さんの年齢層が広い）
   ★ロゴ（logo.png）は黒一色で背景が透過なので、置く場所は白か淡い色にする（要件書6-5）。
   ★管理画面の admin.css とは分けてある。公開ページは admin.css を読み込まない。
   ============================================================ */

:root {
  --pub-bg:        #faf8f4;   /* 淡いベージュ。ロゴ（黒）が見えなくならない明るさ */
  --pub-panel:     #ffffff;
  --pub-text:      #21201d;
  --pub-muted:     #5f5b53;
  --pub-line:      #e2ddd3;
  --pub-accent:    #7a5c2e;
  --pub-free-bg:   #eef6ec;
  --pub-free-text: #245c22;
  --pub-busy-bg:   #f6efe6;
  --pub-busy-text: #7a4a12;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.pub-body {
  margin: 0;
  /* 端末に入っている日本語の書体を順に使う（外部の書体は読み込まない。CSP と通信量のため） */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--pub-text);
  background: var(--pub-bg);
  /* 幅の狭い端末で、うっかり横に伸びる要素が出ても、ページごと横スクロールさせない */
  overflow-x: hidden;
}

/* ---- ヘッダー ---- */
.pub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 16px;              /* 左右 16px は、本文と同じ余白 */
  background: var(--pub-panel);    /* 白。ロゴが黒一色なので暗い背景にしない（6-5） */
  border-bottom: 1px solid var(--pub-line);
}
.pub-header__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pub-header__logo  { display: block; height: 48px; width: auto; }  /* 比率は変えない（6-5） */
.pub-header__title { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; }
.pub-header__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  color: var(--pub-accent);
  padding: 6px 10px;               /* 指で押せる大きさ */
  border: 1px solid var(--pub-line);
  border-radius: 8px;
  background: var(--pub-bg);
}
.pub-header__tel-label  { font-size: .75rem; color: var(--pub-muted); }
.pub-header__tel-number { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

/* ---- 撮影プランのリンク（段階5.6 / 要件書6-1 v2.8）。ヘッダーのすぐ下 ---- */
.pub-links {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pub-links__item {
  display: inline-block;
  padding: 8px 16px;               /* 指で押せる大きさ */
  border: 1px solid var(--pub-accent);
  border-radius: 8px;
  background: var(--pub-panel);
  color: var(--pub-accent);
  font-weight: 700;
  text-decoration: none;
}

/* ---- 本文 ---- */
.pub-main { max-width: 960px; margin: 0 auto; padding: 16px; }

/* ---- 並べ替え（段階5.6 / 要件書6-1 v2.8）。見た目はカテゴリの絞り込みと同じ丸いリンク ---- */
.pub-sort { align-items: center; }
.pub-sort__label { color: var(--pub-muted); font-size: .9rem; margin-right: 2px; }

/* ---- カテゴリの絞り込み（F-9） ---- */
.pub-filter {
  display: flex;
  flex-wrap: wrap;                 /* 横スクロールにしない（幅 360px でも折り返す） */
  gap: 8px;
  margin-bottom: 12px;
}
.pub-filter__item {
  display: inline-block;
  padding: 8px 14px;               /* 指で押せる大きさ */
  border: 1px solid var(--pub-line);
  border-radius: 999px;
  background: var(--pub-panel);
  color: var(--pub-text);
  text-decoration: none;
  font-size: .95rem;
}
/* 今どこを見ているかが分かるようにする（依頼 3章「できれば」） */
.pub-filter__item.is-current {
  background: var(--pub-accent);
  border-color: var(--pub-accent);
  color: #fff;
  font-weight: 700;
}

.pub-count { margin: 0 0 12px; color: var(--pub-muted); font-size: .9rem; }
.pub-empty { margin: 32px 0; text-align: center; color: var(--pub-muted); }

/* ---- 一覧（1商品1カード。依頼 必須3） ---- */
.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* ★minmax(0, 1fr)（段階5.7）: 写真の帯（横に並んだ写真）の幅に列が押し広げられないようにする。
     1fr のままだと、列の最小幅が中身（写真の元の幅）になり、幅 360px でページ全体が横にはみ出す。 */
  grid-template-columns: minmax(0, 1fr);      /* スマホは1列 */
  gap: 16px;
}
/* 広い画面だけ2列・3列にする。狭い側を既定にしておく（モバイルファースト） */
@media (min-width: 600px) { .pub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pub-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pub-card {
  background: var(--pub-panel);
  border: 1px solid var(--pub-line);
  border-radius: 12px;
  overflow: hidden;                /* 角を丸めた中に画像を収める */
  display: flex;
  flex-direction: column;
  min-width: 0;                    /* 段階5.7: 写真の帯に押し広げられない */
}

/* ---- 写真 ---- */
/* ★高さを先に決めておく（今ある Wix の22点は 2:3 の縦長）。
   決めておかないと、写真が1枚読み込まれるたびにカードの高さが変わり、
   100点を下にたどっている最中に画面が飛ぶ。
   中身は object-fit: contain なので、横長の写真でも**引き伸ばさない**（上下に余白が出るだけ）。 */
.pub-card__photo { background: #f2eee6; aspect-ratio: 2 / 3; min-width: 0; }
.pub-card__zoom  { display: block; width: 100%; height: 100%; }
/* 段階5.7 / 要件書6-1 v2.9: 写真をめくる帯（/slider.css）の中では、写真が残りの高さを使い、メモはその下 */
.pub-card__photo .kk-slider__slide > .pub-card__zoom,
.pub-card__photo .kk-slider__slide > .pub-card__img { flex: 1 1 auto; min-height: 0; height: auto; }
.pub-card__caption {
  margin: 0;
  padding: 4px 10px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--pub-text, #1f2328);
  background: rgba(255, 255, 255, .92);
  overflow-wrap: anywhere;
}
.pub-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* 比率は変えない（切り取りもしない） */
  /* 長押しのメニュー（iOS の「画像を保存」）を出さない（F-6）。
     ★これは気軽な保存を止めるだけで、スクリーンショットは防げません。
       守りたい大（長辺1600px）は、photo_protect = 1 の商品では
       そもそも返しません（app/public/photo.php）。 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* 写真が無い商品は枠だけ（F-5）。1画面に入る点数が減らないよう、低めの枠にする
   （こちらは aspect-ratio を打ち消して、写真つきのカードより低くする） */
.pub-card__photo--none { aspect-ratio: auto; }
.pub-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--pub-muted);
  font-size: .9rem;
}

/* ---- 商品の中身 ---- */
.pub-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.pub-card__cat  { margin: 0; font-size: .78rem; color: var(--pub-muted); letter-spacing: .05em; }
.pub-card__name { margin: 0; font-size: 1.1rem; line-height: 1.4; overflow-wrap: anywhere; }
.pub-card__color,
.pub-card__size { margin: 0; font-size: .95rem; color: var(--pub-muted); overflow-wrap: anywhere; }
.pub-card__note { margin: 4px 0 0; font-size: .95rem; overflow-wrap: anywhere; }

/* ---- 料金（要件書6-1。金額の横に必ず「（税込）」） ---- */
.pub-price {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--pub-bg);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr auto;  /* 名前と金額。狭くても折り返して収まる */
  gap: 2px 10px;
  font-size: .95rem;
}
.pub-price__label  { margin: 0; color: var(--pub-muted); overflow-wrap: anywhere; }
.pub-price__amount { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }

/* ---- 空き状況（2段階だけ。要件書6-1 の表） ---- */
.pub-status {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
}
.pub-status--free { background: var(--pub-free-bg); color: var(--pub-free-text); }
.pub-status--busy { background: var(--pub-busy-bg); color: var(--pub-busy-text); }

/* ---- フッター ---- */
.pub-footer {
  margin-top: 24px;
  padding: 20px 16px 28px;
  background: var(--pub-panel);
  border-top: 1px solid var(--pub-line);
  text-align: center;
}
.pub-footer__name { margin: 0 0 6px; font-weight: 700; }
.pub-footer__tel  { margin: 0 0 6px; }
.pub-footer__note { margin: 0; font-size: .85rem; color: var(--pub-muted); }
/* 著作権表示（レビュー 段階5 3章の2）。小さめの1行。
   ★幅360pxでは折り返してよいが、横スクロールは出さない。長い1続きの文字でも枠を越えないように
     overflow-wrap を付けてある（店名のあとは全角スペースなので、ふつうはそこで折り返す）。 */
.pub-footer__copy {
  margin: 10px 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--pub-muted);
  overflow-wrap: anywhere;
}
.pub-link { color: var(--pub-accent); }