/*
 * 撮影/購入ページ 共通のヘッダー・タブ・バッジ。
 *
 * もとは patterns/_photo-header-styles.php のページ内 <style>
 * （2026-08-21 に外へ出した）。
 *
 * **読み込む位置は変えないこと** ―― 自由CSS（general_style_css）の直後。
 * !important による上書きの勝ち負けがそこで決まっており、前に動かすと
 * 自由CSSに負ける。各ページはこれまでどおり _photo-header-styles.php を
 * その位置で require すればよく、あちらが <link> と <script> を出す。
 */

/* タブは**押せるボタンの形**にする（利用者の指示・2026-09-02
   「タブのデザインを右のようにボタンで押せることが分かりやすいように」）。
   管理画面のタブ（.hs-modetabs / .hs-modetab）と同じ組み立て ――
   座布団の中につまみが1つ入っていて、いま選ばれているほうがそこに載る。
   下線だけだと「いまここ」は分かっても、「押せる」が伝わらない。

   **つまみの正体は、これまで下線だった .tab-underline-bar**。同じ1要素を
   形だけ変えたので、
     - タブを行き来したときの view-transition（下線がすべる演出）はそのまま
       活きる ―― つまみごとすべる
     - SPA（spa-tabs.js の setTabLook）も、この1要素を選ばれたほうへ
       付け替えるだけでよく、触らずに済む

   **地の色は決め打ちにしない。** このページの背景はサイトごとに変わるので、
   座布団は白の透かしで作る（濃い地でも薄い地でも輪郭が出る）。
   つまみだけは白く塗り、その上の文字を暗くする ―― 白の上に載るので、
   暗い文字なら地の色によらず読める。

   **ここは自由CSS（general_style_css）より後に読む**（このファイルの
   冒頭の断り）。captured_purchased.css の !important もここで上書きする。 */
p.button-links{
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  gap:2px;
  padding:4px;
  border-radius:999px;
  /* 座布団は**文字の色から作る**（currentColor）―― 地の色が何であれ、
     文字が読めている色なら座布団の輪郭も出る。color-mix を解さない
     ブラウザには、その上の白の透かしがそのまま残る。 */
  background:rgba(255,255,255,.14);
  background:color-mix(in srgb, currentColor 14%, transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
p.button-links .button-link{
  position:relative;
  /* つまみ（z-index:-1）を**文字の下・座布団の上**に置くための囲い。
     これが無いと、つまみが座布団の背景より後ろへ回って見えなくなる。 */
  isolation:isolate;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  border-bottom:0 !important;
  text-decoration:none !important;
  white-space:nowrap;
  cursor:pointer;
  transition:opacity .15s ease;
}
/* 選ばれていないほうは少し引く（管理画面のタブと同じ濃淡の付け方）。 */
/* とても狭い画面では、つまみの余白と字間を詰めて座布団を収める
   ―― 収まらないと座布団だけが画面からはみ出して、角の丸みが切れる。 */
@media (max-width: 360px){
  p.button-links .button-link{ padding-left:11px; padding-right:11px; letter-spacing:1px; }
}
p.button-links .button-link:not(.selected){ opacity:.72; }
p.button-links .button-link:not(.selected):hover{ opacity:1; }
p.button-links .button-link:active{ transform:scale(.98); }
p.button-links .button-link.selected .tab-underline-bar{
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
  view-transition-name: tab-underline;
}
/* 選ばれているほうの文字は暗く。**サイトの自由CSSが色を !important で
   白に塗る**ことがあるので、塗り（-webkit-text-fill-color）まで
   important で置く（CLAUDE.md の定石）。 */
p.button-links .button-link.selected,
p.button-links .button-link.selected span{
  color:#12121a !important;
  -webkit-text-fill-color:#12121a !important;
}
::view-transition-group(tab-underline){
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
/* お問い合わせ(.notice)：枠線・影・座布団はどれも付けない。
   **フォト／ガチャ（body.hs-fp）と同じ構成にする**（利用者の指示・2026-08-22
   「トラブルなどのお問合せのところは、フォトモード、ガチャモードと同じ構成に」）。
   以前はここだけ薄いグレーの座布団（背景 7% + padding 12/16）を敷いていたため、
   同じ一文が通常モードでは箱に入り、体験モードでは地に置かれていた。
   体験モード側は prototype-otanoshimi.css が !important でこれを打ち消して
   おり、**打ち消しのほうが本来の姿**だったので、素の指定をそちらへ寄せる。 */
.notice{ border:none !important; box-shadow:none !important; border-radius:0 !important; background:transparent !important; padding:0 !important; }
/* 商品バッジ */
.product-badges{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; pointer-events:none; }
.product-badge{ background-color:rgba(0,0,0,0.7); color:#fff; font-size:10px; padding:2px 6px; border-radius:4px; text-align:right; }
/* 「あなたの写真」見出しの余白（両ページで統一） */
.head{ margin-top:30px; margin-bottom:15px; }
/* 見出しとお問い合わせの間は 10px。フォト／ガチャ（body.hs-fp）は
   prototype-otanoshimi.css が !important でそうしており、通常モードだけ
   30px 空いて見えていた（利用者の報告・2026-08-22
   「通常モードで変な余白が入っている」）。
   **上の 15px は効いていない** ―― 見出しの既定マージンに負けるため、
   あちらと同じ強さで書かないとそろわない。 */
h3.head, .head{ margin-bottom:10px !important; }
/* グッズページの見出し（スペシャルグッズ: 28px/700 ゴシック）と同じ見た目に揃える */
h3.head, h3.head a{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif !important;
  font-size:28px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
}
/* --- PC（481px以上）: 撮影一覧もTOPと同じヘッダーの重ね置きにそろえる ---
   一覧用の見出しだけはロゴの直下から始める。

   **規則はこの1組だけにする（2026-08-19）。** 直接アクセスは下のインライン
   スクリプトが、TOPの同梱は開いたとき（openSpaCaptured）が、どちらも
   body.fp-captured-layout を付けてここへ入ってくる。以前は同梱側に
   `body:has(#fp-captured-spa.is-open)` の**別の値**（clamp(120px,8vw,160px)）と
   JSの実測（ヘッダー下端＋24px）があり、3系統が別々の答えを出して
   「開き方で位置が変わる」の原因になっていた。**同梱専用の位置指定を
   ここへ足さないこと** ―― 足した瞬間、また食い違いが生まれる。
   （同梱で開いている間、TOP側の本文は .wrapeer ごと display:none なので、
   器の上に残る流れの要素は無く、単独ページと同じ座標系になる。） */
@media screen and (min-width: 481px) {
  body.fp-captured-layout header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90;
    pointer-events: none !important;
  }
  body.fp-captured-layout header a,
  body.fp-captured-layout header button { pointer-events: auto; }
  body.fp-captured-layout { padding-top: 0 !important; }
  body.fp-captured-layout h3.head {
    /* 横長時は見出しをロゴの下端より上に収める。 */
    margin-top: clamp(80px, 5vw, 120px) !important;
  }
  /* **ロゴの背に上限を付ける**（利用者の指示・2026-08-20
     「ロゴがぶつからないよう調整してくれ」）。

     この画面だけヘッダーを position:absolute にしているため、ロゴは
     本文の高さを押し下げない。縦に長いロゴ（3行ぶんの背があるもの）だと
     下端が本文まで届き、「ダウンロード可能数」の帯に重なっていた。
     見出しは中央、ロゴは左なので横には当たらず、当たるのは**横いっぱいの
     帯**だけ。

     本文が空ける高さは上の clamp(80px,5vw,120px)。ロゴの上端は
     ヘッダーの余白ぶん約45px 下から始まるので、96px までに抑えれば
     下端は約141pxで、帯の手前で止まる。
     object-fit:contain なので、上限に当たっても縦横比は崩れない。 */
  body.fp-captured-layout .header-title .pc img {
    max-height: 96px;
    object-fit: contain;
    object-position: left center;
  }
}
/* スマホでは共通ヘッダーの下余白がそのまま見出し前に残るため、
   撮影一覧だけは詰めて見出しをヘッダー直下に置く。 */
@media screen and (max-width: 480px) {
  body.fp-captured-layout .header-wrap {
    margin-bottom: 0 !important;
  }
  body.fp-captured-layout h3.head {
    margin-top: 0 !important;
    /* ヘッダーのアイコン列と見出しが詰まりすぎるので、少しだけ空ける
       （利用者の指示・2026-08-24「スマホで見出しの上にpadding-top:10px」）。
       **margin ではなく padding** ―― 上の margin-top:0 は
       「ヘッダー直下に置く」ための指定なので、そこは動かさない。 */
    padding-top: 10px;
  }
}