/* 作例の投稿（#1172）。作例・項目別のタグの表・コピーのボタン・ビューアー。
 * BOOTH のシチュ R18（situation-recipe の src/css/recipe.css・lightbox.css）から移した部品なので、Property Class に
 * 割らず、部品の CSS にまとめてある（AGENTS.md の CSS の節）。値はこのサイトのトークンに読み替え、最寄りのトークンに丸めた。
 * 作例のページ（resources/views/examples/）だけで読む。投稿のカードは全ページで読む category-article.css。 */

@layer lism-custom {
  /* コピーのボタン（まとめてコピー・すべてコピー・ビューアーのコピー）。枠を付けず、薄い地の丸い形にして、枠付きの四角い札
     （タグ 1 つのコピー）と形と塗りで見分ける。押した結果は、ボタンの地の色と文字を替えて知らせる。枠は透明にして寸法を保つ
     （強制カラーのモードでは枠が見える）。余白は set--s で文字の大きさに合わせる */
  .c--exampleCopy {
    --_bg: var(--rin-tint);
    --_fg: var(--brand);
    --_line: transparent;

    position: relative;
    display: inline-grid;
    align-items: center;
    padding: var(--s5) var(--s15);
    border: 1px solid var(--_line);
    border-radius: var(--bdrs--99);
    background-color: var(--_bg);
    color: var(--_fg);
    font-size: var(--fz--xs);
    white-space: nowrap;

    /* 押す前・コピーしました・コピー失敗の 3 組を同じマスに重ね、見せる組だけを替える。幅はいちばん広い組で決まるので、
       押しても表の列幅が動かない */
    > span {
      display: inline-flex;
      grid-area: 1 / 1;
      justify-self: center;
      align-items: center;
      gap: var(--s5);
    }

    > :not(.c--exampleCopy_idle) {
      visibility: hidden;
    }

    svg {
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --_bg: color-mix(in oklch, var(--base), var(--brand) 15%);
      }
    }

    /* 指で押している間も地の色で応える */
    &:active {
      --_bg: color-mix(in oklch, var(--base), var(--brand) 15%);
    }

    /* 結果は色だけでなく文字で伝える */
    &:is([data-copied], [data-failed]) > .c--exampleCopy_idle {
      visibility: hidden;
    }

    &[data-copied] {
      --_line: var(--rin-ok);
      --_bg: var(--rin-ok);
      --_fg: var(--white);

      > .c--exampleCopy_done {
        visibility: visible;
      }
    }

    &[data-failed] {
      --_line: var(--rin-danger);
      --_bg: var(--rin-danger);
      --_fg: var(--white);

      > .c--exampleCopy_failed {
        visibility: visible;
      }
    }
  }

  /* 3 列は項目・タグ・日本語名。まとめてコピーの右隣がタグ。項目名は行をまたぐ 1 マス（狭い幅は末尾の @container） */
  @scope (.c--exampleTags) {
    :scope {
      inline-size: 100%;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0;
    }

    /* 参考実装の 9.5em・34%。9.5em に近いトークンは --s70 */
    .c--exampleTags_colGroup {
      inline-size: var(--s70);
    }

    .c--exampleTags_colJa {
      inline-size: 34%;
    }

    thead th {
      padding-inline-end: var(--s10);
      padding-block-end: var(--s5);
      color: var(--text-2);
      font-size: var(--fz--2xs);
      font-weight: normal;
      text-align: start;
    }

    /* 表の中のボタンは、置き場所（見出し・項目名）の文字の大きさのままにする。Lism の --fz-- は親に対する倍率なので、
       ボタンの --fz--xs を重ねると、見出しの 2xs・項目名の xs と掛け合わされて小さくなりすぎる */
    .c--exampleTags_head .c--exampleCopy {
      margin-inline-start: var(--s10);
      font-size: var(--fz--m);
      vertical-align: baseline;
    }

    /* タグ列の「すべてコピー」に指を置いたら、表のタグを全部反転する。写したあとも data-copied のあいだ（2 秒）反転して、
       写したタグを示す（タッチには指を置いた状態がない）。写せなかったとき（data-failed）は反転しない */
    :scope:has(.c--exampleTags_head .c--exampleCopy:is(:focus-visible, [data-copied]):not([data-failed])) .c--exampleTags_tag code {
      --_bg: var(--brand);
      --_fg: var(--base);
    }

    @media (hover: hover) and (pointer: fine) {
      :scope:has(.c--exampleTags_head .c--exampleCopy:hover:not([data-failed])) .c--exampleTags_tag code {
        --_bg: var(--brand);
        --_fg: var(--base);
      }
    }

    .c--exampleTags_group {
      padding-block: var(--s5);
      padding-inline-end: var(--s10);
      color: var(--brand);
      font-size: var(--fz--xs);
      font-weight: bolder;
      text-align: start;
      vertical-align: top;

      /* 項目名の下の行に置く */
      .c--exampleCopy {
        display: grid;
        margin-block-start: var(--s5);
        font-size: var(--fz--m);
        font-weight: normal;
      }
    }

    /* 指で操作する端末では、表のボタンの押せる範囲を、見た目より上下左右に広げる。見た目と行の高さは変わらない */
    @media (pointer: coarse) {
      .c--exampleCopy::before {
        content: "";
        position: absolute;
        inset: calc(var(--s5) * -1);
      }
    }

    tbody + tbody tr:first-child > * {
      border-block-start: 1px solid var(--divider);
    }

    td {
      padding-block: var(--s5);
      padding-inline-end: var(--s10);
      vertical-align: baseline;
    }

    /* 押すタグと、その行の日本語名を対応させる */
    tr:has(.c--exampleTags_tag code:focus-visible) .c--exampleTags_ja {
      font-weight: bolder;
    }

    @media (hover: hover) and (pointer: fine) {
      tr:has(.c--exampleTags_tag code:hover) .c--exampleTags_ja {
        font-weight: bolder;
      }
    }

    /* タグ。指を置くと反転し、押すとコピーする */
    .c--exampleTags_tag code {
      --_bg: var(--base);
      --_fg: var(--text);

      position: relative;
      display: inline-block;
      padding: var(--s5) var(--s10);
      border: 1px solid var(--brand);
      border-radius: var(--bdrs--5);
      background-color: var(--_bg);
      color: var(--_fg);
      font-family: var(--ff-tag);
      font-size: var(--fz--s);
      overflow-wrap: anywhere;
      transition-property: background-color, color;
      transition-duration: var(--dur-base);

      /* 吹き出しは上の行に重なる。下の文字が透けて混ざらないように、地を塗りつぶして縁と影を付ける */
      &::after {
        position: absolute;
        inset-block-end: calc(100% + var(--s5));
        inset-inline-start: 50%;
        z-index: 1;
        padding-inline: var(--s5);
        border: 1px solid var(--divider);
        border-radius: var(--bdrs--10);
        background-color: var(--base-2);
        box-shadow: var(--bxsh--10);
        color: var(--brand);
        font-family: var(--ff-sans);
        font-size: var(--fz--2xs);
        white-space: nowrap;
        translate: -50% 0;
        pointer-events: none;
      }

      &:focus-visible {
        --_bg: var(--brand);
        --_fg: var(--base);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          --_bg: var(--brand);
          --_fg: var(--base);

          &::after {
            content: "クリックでコピー";
          }
        }
      }

      &[data-copied]::after {
        content: "コピーしました";
        color: var(--rin-ok);
        font-weight: bolder;
      }

      &[data-failed]::after {
        content: "コピーできませんでした";
        color: var(--rin-danger);
      }
    }

    .c--exampleTags_ja a {
      color: inherit;
    }

    /* まとめてコピーに指を置いたら、その項目のタグを全部反転して、写す範囲を示す。写したあとも 2 秒反転する */
    tbody:has(.c--exampleTags_group .c--exampleCopy:is(:focus-visible, [data-copied]):not([data-failed])) .c--exampleTags_tag code {
      --_bg: var(--brand);
      --_fg: var(--base);
    }

    @media (hover: hover) and (pointer: fine) {
      tbody:has(.c--exampleTags_group .c--exampleCopy:hover:not([data-failed])) .c--exampleTags_tag code {
        --_bg: var(--brand);
        --_fg: var(--base);
      }
    }

    /* 狭い幅（スマホなど）では項目の列をなくし、項目名を横いっぱいの見出しにして、その下にタグと日本語名の 2 列を並べる。
       列が広がるので、タグと日本語名が語の途中で折れにくい。表の役割は role でも示す（_example.blade.php） */
    @container sheet (inline-size < 30rem) {
      :scope {
        display: grid;
        /* 日本語名の列は一番長い名前に合わせる（参考実装の 9em に近い --s70 まで）。残りをタグに回す */
        grid-template-columns: minmax(0, 1fr) fit-content(var(--s70));
        column-gap: var(--s15);
      }

      colgroup,
      thead th:first-child {
        display: none;
      }

      thead,
      tbody {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: baseline;
      }

      tr {
        display: contents;
      }

      .c--exampleTags_group {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        gap: var(--s15);
        padding-block: var(--s10) var(--s5);

        .c--exampleCopy {
          margin-block-start: 0;
        }
      }

      td {
        padding-inline-end: 0;
      }

      /* タグが 2 行に折れたとき、日本語名を 1 行目にそろえる（inline-block のベースラインは最後の行になる） */
      .c--exampleTags_tag code {
        display: inline-flex;
      }

      /* 項目の区切り線は見出しの上にだけ引く */
      tbody + tbody tr:first-child > td {
        border-block-start: none;
      }

      .c--exampleTags_ja {
        word-break: auto-phrase;
      }
    }

    /* タグの多い表は、先頭の行だけを見せる（_example.blade.php。開く・たたむは examples.js）。隠した行は読み上げにも
       タブ移動にも出さない。狭い幅の tr の display: contents より強い詳細度にしてある */
    :scope[data-folded] [data-fold]:not([data-fold="peek"]) {
      display: none;
    }

    /* 隠した行の先頭 2 行（peek）は、続きがあることを示すために薄く見せ、表の下端に向かって消す。行の高さは折り返しで
       変わるので、消える範囲（--s50）はおおよそ 2 行分。薄さは td・th に付ける（狭い幅の tr は display: contents で、
       tr の opacity が効かない） */
    :scope[data-folded] {
      mask-image: linear-gradient(to bottom, #000 calc(100% - var(--s50)), transparent);
    }

    :scope[data-folded] [data-fold="peek"] > * {
      opacity: 0.6;
    }

    /* 薄く見せている行も押せる（コピーできる）。その行に指を置いた・選んだ・押した結果を出しているあいだは、薄さと下端の
       消し込みをやめて、反転と吹き出し（コピーしました）をはっきり見せる */
    :scope[data-folded]:has([data-fold="peek"]:is(:hover, :focus-within), [data-fold="peek"] :is([data-copied], [data-failed])) {
      mask-image: none;

      [data-fold="peek"] > * {
        opacity: 1;
      }
    }
  }

  @scope (.c--example) {
    :scope {
      container: example / inline-size;
      scroll-margin-block-start: calc(var(--header-height) + var(--devbar-height) + var(--s20));
    }

    /* 作例の題名は目次の飛び先（.article-section-heading の h3）。カードの中なので上の余白は詰める */
    .article-section-heading {
      margin-block-start: 0;
    }

    .c--example_body {
      display: grid;
      gap: var(--s30);

      /* 幅 44rem 以上で絵と表を 2 列にする */
      @container example (inline-size >= 44rem) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: start;
      }
    }

    /* 1 列のときは真ん中に置いて幅を抑え、2 列のときは列いっぱいにして、表を読むあいだ画面に留める */
    .c--example_shot {
      position: relative;
      justify-self: center;
      inline-size: min(100%, var(--sz--xs));

      @container example (inline-size >= 44rem) {
        position: sticky;
        inset-block-start: calc(var(--header-height) + var(--devbar-height) + var(--s20));
        inline-size: 100%;
      }

      img {
        inline-size: 100%;
        border-radius: var(--bdrs--10);
        background-color: var(--rin-tint);
      }
    }

    /* ⓘ。絵に重ねて右上に置く。マーク自身と、その下の絵に指を置いたとき地と文字を入れ替える */
    .c--example_info {
      --_bg: color-mix(in srgb, var(--white) 88%, transparent);
      --_fg: var(--brand);

      position: absolute;
      inset-block-start: var(--s5);
      inset-inline-end: var(--s5);
      z-index: 1;
      display: grid;
      place-items: center;
      inline-size: var(--s35);
      block-size: var(--s35);
      border-radius: 50%;
      background-color: var(--_bg);
      color: var(--_fg);
      font-size: var(--fz--l);
      line-height: 1;
      transition-property: background-color, color;
      transition-duration: var(--dur-base);

      @media (prefers-reduced-motion: reduce) {
        transition-duration: 0.01s;
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .c--example_shot:has(.c--zoomTrigger:hover) .c--example_info,
      .c--example_info:hover {
        --_bg: var(--brand);
        --_fg: var(--white);
      }
    }

    /* 表の組み替え（.c--exampleTags の @container sheet）の基準 */
    .c--example_sheet {
      container: sheet / inline-size;
      display: grid;
      justify-items: start;
      gap: var(--s30);
      min-inline-size: 0;
    }

    /* 折りたたんだ表を開く・たたむボタン。コピーのボタン（薄い地）と分け、枠線のピルにする。たたんだあと画面に戻すとき
       （examples.js の scrollIntoView）、ヘッダーの下に隠れないようにする */
    .c--exampleFold {
      border: 1px solid var(--brand);
      color: var(--brand);
      scroll-margin-block: calc(var(--header-height) + var(--devbar-height) + var(--s20));
      transition: background-color var(--dur-base);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--rin-tint);
        }
      }
    }

    /* メンバー限定の作例の題名の後ろの印（会員に、どこからがメンバー限定かを示す） */
    .c--memberBadge {
      margin-inline-start: var(--s10);
      border: 1px solid var(--rin-rule-soft);
      background-color: var(--rin-tint);
      vertical-align: middle;
    }
  }

  /* ----- メンバー限定の作例の境目（show.blade.php）。note の有料ラインと「この続きをみるには」と同じ役目 ----- */

  /* 錠の絵（目次の「メンバー限定の作例」と、その見出し） */
  .c--memberLock {
    margin-inline-end: var(--s5);
  }

  /* 全年齢の作例との境目の線。文字の左右に点線を引く */
  .c--memberLine::before,
  .c--memberLine::after {
    content: "";
    flex: 1;
    border-block-start: 2px dashed var(--rin-rule-soft);
  }

  /* 会員でない人への案内の枠。錠の枠は件数を見せるだけ（中身は出さない） */
  .c--memberWall_tiles > span {
    display: grid;
    place-items: center;
    inline-size: var(--s40);
    aspect-ratio: 3 / 4;
    border: 1px solid var(--divider);
    border-radius: var(--bdrs--5);
    background-color: var(--rin-tint);
    color: var(--rin-rule-soft);
  }

  /* 入口のボタン。ヘッダーの「メンバーシップについて」（app.css の .auth-member-btn）と同じ塗りのピル */
  .c--memberWall_cta {
    border: 1px solid var(--brand);
    background-color: var(--brand);
    color: var(--base);
    transition: background-color var(--dur-fast), color var(--dur-fast);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: transparent;
        color: var(--brand);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
  }

  /* ----- ビューアー（拡大画像と、右のプロンプト情報） -----
   * 狭い画面では拡大せず、プロンプト情報の帯だけを下から出す（1 列ではページの絵が画面幅いっぱいで、拡大しても大きくならない）。
   * 閉じるボタンと暗幕はダイアログに固定する。閉じるボタンは絵の領域の右上（狭い画面は画面の右上）に置く。
   * 送りのボタンは、どの作例へ送っても同じ位置に出す。狭い画面の帯は、中身が長ければ帯の中でスクロールする。
   * View Transitions が使えないときは、ダイアログの出し入れだけになる。状態は examples-lightbox.js が付ける data-* */
  .c--zoomTrigger {
    display: grid;
    inline-size: 100%;
    cursor: zoom-in;

    /* 拡大した絵の元は隠す。狭い画面は帯だけを出すので、ページの絵は隠さない */
    img[data-lightbox-source] {
      @media (width >= 48rem) {
        visibility: hidden;
      }
    }
  }

  .c--lightbox {
    --_on-dim: var(--white);
    --_hit: var(--s40);
    /* 右の帯の幅。閉じるボタンを帯のすぐ左に置くのにも使う */
    --_sheet-size: var(--sz--xs);

    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    isolation: isolate;
    opacity: 0;
    /* View Transitions が無いときの出し入れ */
    transition-property: display, overlay, opacity;
    transition-duration: var(--dur-base);
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;

    &:modal {
      opacity: 1;
      cursor: zoom-out; /* 何も無い所だけ。押すと閉じる */

      @starting-style {
        opacity: 0;
      }

      /* 狭い画面の帯は下から出す。閉じると下へ戻る（.c--lightbox_sheet の translate） */
      .c--lightbox_sheet {
        @media (width < 48rem) {
          translate: none;

          @starting-style {
            translate: 0 100%;
          }
        }
      }
    }

    &::backdrop {
      background-color: transparent;
    }

    /* 見える暗幕は名前の付いた要素にする。::backdrop は最上位の層にあり、View Transitions の写しに入らないので、閉じるときに
       絵が縮む途中で暗幕だけ消える */
    .c--lightbox_dim {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: color-mix(in srgb, var(--black) 72%, transparent);
      view-transition-name: lightbox-dim;

      /* 狭い画面は帯の上にページの絵を見せるので、薄くする */
      @media (width < 48rem) {
        background-color: color-mix(in srgb, var(--black) 40%, transparent);
      }
    }

    .c--lightbox_close {
      position: absolute;
      z-index: 2;
      inset-block-start: max(var(--s20), env(safe-area-inset-top));
      /* 絵の領域の右上（帯のすぐ左）に置き、暗い所の丸い矢印と縦に並べる */
      inset-inline-end: calc(var(--_sheet-size) + var(--s20));
      view-transition-name: lightbox-close;

      /* 狭い画面は絵の領域が無く、帯は画面の下にあるので、画面の右上に置く */
      @media (width < 48rem) {
        inset-inline-end: max(var(--s20), env(safe-area-inset-right));
      }
    }

    /* 暗い所に置く丸いボタン（閉じる・前後の矢印） */
    .c--lightbox_close button,
    .c--lightbox_arrow {
      display: grid;
      place-items: center;
      inline-size: var(--_hit);
      block-size: var(--_hit);
      border: 1px solid transparent;
      border-radius: 50%;
      background-color: color-mix(in srgb, var(--black) 62%, transparent);
      color: var(--_on-dim);

      svg {
        pointer-events: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: color-mix(in srgb, var(--black) 78%, transparent);
        }
      }
    }

    .c--lightbox_stage {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--_sheet-size);
      /* 行を画面の高さに留める。auto だと原文の長い作例で帯が画面より高くなり、下が切れて帯の中もスクロールしない */
      grid-template-rows: minmax(0, 1fr);
      block-size: 100%;
      min-inline-size: 0;
      overflow: hidden;
      /* 暗い余白のクリックはダイアログ自身に届ける */
      pointer-events: none;

      @media (width < 48rem) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        /* 帯だけを画面の下に置く。帯の上の暗い所を押すと閉じる */
        align-content: end;
        pointer-events: auto;
      }
    }

    .c--lightbox_shot {
      position: relative;
      display: grid;
      place-items: center;
      min-inline-size: 0;
      padding: var(--s35) var(--s50);
      pointer-events: none;

      @media (width < 48rem) {
        display: none;
      }

      img {
        z-index: 1;
        max-inline-size: 100%;
        max-block-size: calc(100svh - var(--s35) * 2);
        min-inline-size: 0;
        /* 幅も auto。width / height 属性に元の寸法を入れるので、幅を属性に任せると縦長で横に伸びる */
        inline-size: auto;
        object-fit: contain;
        pointer-events: auto;
        cursor: zoom-out; /* 押すと縮めて戻す（何も無い所と同じ） */

        /* 送った先の絵を読み込んでいる間は、前の作例の絵を薄くする（examples-lightbox.js の showImage）。
           すぐ読み込めたときに明滅しないよう、少し待ってから薄くする */
        &[data-lightbox-loading] {
          opacity: var(--o--ppp);
          transition: opacity var(--dur-base) var(--dur-normal);
        }
      }
    }

    .c--lightbox_arrow {
      position: absolute;
      z-index: 2;
      inset-block-start: 50%;
      translate: 0 -50%;
      pointer-events: auto;

      &[data-lightbox-prev] {
        inset-inline-start: max(var(--s20), env(safe-area-inset-left));
        view-transition-name: lightbox-prev;
      }

      &[data-lightbox-next] {
        inset-inline-end: max(var(--s20), env(safe-area-inset-right));
        view-transition-name: lightbox-next;
      }
    }

    .c--lightbox_sheet {
      display: grid;
      grid-template-rows: auto 1fr;
      min-inline-size: 0;
      block-size: 100%;
      background-color: var(--base-2);
      color: var(--text);
      box-shadow: var(--bxsh--menu);
      pointer-events: auto;
      cursor: default;
      view-transition-name: lightbox-sheet;

      @media (width < 48rem) {
        inline-size: 100%;
        /* 高さは作例によらず同じにする。中身に合わせると、帯は画面の下から伸びるので、ネガティブの行数が違う作例へ送るたびに
           帯の上端ごと送りが上下し、連打している指の下からボタンが逃げる。収まらない作例は帯の中でスクロールする */
        block-size: min(80svh, var(--sz--xs));
        overflow-y: auto;
        /* 作例によって帯の中のスクロールの要否が分かれても、見出しの幅が変わって送りが横に動かないよう、スクロールバーの
           場所を常に空けておく */
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
        translate: 0 100%;
        transition: translate var(--dur-base) ease-out;
      }
    }

    .c--lightbox_hd {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "crumb pager"
        "title title";
      align-items: center;
      column-gap: var(--s15);
      padding: var(--s15) var(--s25);
      border-block-end: 1px solid var(--divider);

      h2 {
        grid-area: title;
        color: var(--brand);
        font-size: var(--fz--l);
        font-weight: bolder;
        text-wrap: pretty;
      }

      /* 狭い画面は帯の中がスクロールするので、見出し（送り）を上に留める */
      @media (width < 48rem) {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        background-color: var(--base-2);
      }
    }

    .c--lightbox_crumb {
      grid-area: crumb;
      color: var(--text-2);
      font-size: var(--fz--2xs);
    }

    .c--lightbox_pager {
      grid-area: pager;
      /* 行の上端に付ける。題名が折り返して行が高くなっても、送りが上下しない */
      align-self: start;
      display: flex;
      align-items: center;
      gap: var(--s5);
      /* 数字の幅をそろえ、番号が変わっても前のボタンが横に動かないようにする */
      font-variant-numeric: tabular-nums;

      button {
        display: grid;
        place-items: center;
        inline-size: var(--s35);
        block-size: var(--s35);
        border: 1px solid var(--divider);
        border-radius: 50%;
        background-color: var(--base-2);
        color: var(--brand);
        line-height: 1;
      }
    }

    .c--lightbox_info {
      display: grid;
      align-content: start;
      gap: var(--s20);
      min-block-size: 0;
      min-inline-size: 0;
      overflow: auto;
      padding: var(--s20) var(--s25) var(--s30);

      @media (width < 48rem) {
        min-block-size: auto;
        overflow: visible;
      }
    }

    .c--lightbox_label {
      color: var(--brand);
      font-size: var(--fz--2xs);
      font-weight: bolder;
    }

    .c--lightbox_sec {
      display: grid;
      gap: var(--s5);
      min-inline-size: 0;

      h3 {
        font-size: var(--fz--xs);
        font-weight: bolder;
      }
    }

    .c--lightbox_code {
      padding: var(--s15) var(--s20);
      border-radius: var(--bdrs--10);
      background-color: var(--rin-tint);
      color: var(--text);
      font-family: var(--ff-mono);
      font-size: var(--fz--xs);
      line-height: var(--lh-relaxed);
      white-space: pre-wrap;
      overflow-wrap: anywhere;

      @media (width < 48rem) {
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow-x: auto;
        overflow-wrap: normal;
        white-space: pre;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      transition-duration: 0.01s;
    }

    /* 強制カラーのモードでは、ボタンをシステムの色で枠付きにする */
    @media (forced-colors: active) {
      .c--lightbox_close button,
      .c--lightbox_arrow,
      .c--lightbox_pager button {
        border-color: ButtonText;
        background-color: Canvas;
        color: ButtonText;
      }
    }
  }

  /* 開け閉めの View Transitions（examples-lightbox.js が html に付ける data-lightbox-vt） */
  html[data-lightbox-vt] {
    .c--lightbox {
      /* 遷移の間は必須。無いと close() が overlay を 0.2 秒動かし、描いた暗幕が最上位の層に残る */
      transition: none;
      opacity: 1;
    }

    &::view-transition-old(root) {
      animation: none;
      opacity: 0;
    }

    &::view-transition-new(root) {
      animation: none;
      opacity: 1;
    }

    &::view-transition-group(lightbox-dim),
    &::view-transition-group(lightbox-sheet),
    &::view-transition-group(lightbox-close),
    &::view-transition-group(lightbox-prev),
    &::view-transition-group(lightbox-next) {
      z-index: 1;
      animation-duration: var(--dur-base);
      animation-timing-function: ease-out;
    }

    &::view-transition-group(lightbox-img) {
      z-index: 2;
      animation-duration: var(--dur-base);
      animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    &::view-transition-old(lightbox-img),
    &::view-transition-new(lightbox-img) {
      inline-size: 100%;
      block-size: 100%;
      object-fit: contain;
      overflow: clip;
    }
  }

  html[data-lightbox-closing] {
    .c--lightbox_dim,
    .c--lightbox_sheet,
    .c--lightbox_close,
    .c--lightbox_arrow {
      /* 閉じるときは、縮む間に周りを薄れさせない */
      view-transition-name: none;
    }

    &::view-transition-group(lightbox-dim),
    &::view-transition-group(lightbox-sheet),
    &::view-transition-group(lightbox-close),
    &::view-transition-group(lightbox-prev),
    &::view-transition-group(lightbox-next),
    &::view-transition-old(lightbox-dim),
    &::view-transition-old(lightbox-sheet),
    &::view-transition-old(lightbox-close),
    &::view-transition-old(lightbox-prev),
    &::view-transition-old(lightbox-next) {
      animation: none;
      opacity: 0;
    }
  }

  /* 拡大と縮小を transform だけで動かすとき（examples-lightbox.js の animateLightboxMorph）。群は拡大した絵の大きさに
     固めて scale で縮めるので、絵はぼやけない。縮小版と拡大は同じ絵なので、旧と新を重ねずに拡大した側だけを見せる */
  html[data-lightbox-morph] {
    &::view-transition-group(lightbox-img) {
      inline-size: var(--lightbox-big-w);
      block-size: var(--lightbox-big-h);
      transform-origin: 0 0;
      animation: none;
    }

    &::view-transition-old(lightbox-img),
    &::view-transition-new(lightbox-img) {
      animation: none;
    }

    &:not([data-lightbox-closing])::view-transition-old(lightbox-img),
    &[data-lightbox-closing]::view-transition-new(lightbox-img) {
      opacity: 0;
    }
  }
}