/*
 * TOKYOカルチャーデビューPARK の LP。 Figma: 9_special (535:27499)
 * 設計: docs/superpowers/specs/2026-09-22-park-special-site-design.md
 *
 * 値は Figma の変数に対応する :root のトークン (assets/css/tokens.css) を優先し、
 * トークンの無いもの (hero のグラデーション、各部の固定寸法) だけを直書きする。
 * モバイルファーストで書き、769px 以上でデスクトップの配置に切り替える。
 */

body.park-page {
  --park-nav-height: 48px;
  /* .park-heading の高さ (上下の余白 + 英字の行 + 下罫線)。 見出しの下に貼り付ける
   * 要素 (CONTENTS の区分一覧) の top に使う。 */
  --park-heading-height: 57px;
  --park-gutter: var(--space-4);
  --park-body-block: var(--space-8);
  background: var(--color-background-ultra-light);
  font-size: var(--font-size-body-base);
  line-height: var(--line-height-default);

  @media (min-width: 769px) {
    --park-gutter: var(--space-6);
    --park-body-block: var(--space-12);
    --park-heading-height: 81px;
  }

  & dd {
    margin: 0;
  }
}

/* 言語切替。 見た目は style.css の :is(.site-header, .park-page) .site-lang。
 * アノテーションどおり追従させない (absolute なのでページと一緒に流れる)。 */
.park-lang {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 30;

  @media (min-width: 769px) {
    top: var(--space-6);
    right: var(--space-6);
  }

  /* 共通ヘッダーではパネルの右端を隣のドロワーボタンに揃えるため右へ 72px ずらして
   * いるが、PARK にはドロワーボタンが無いので言語切替ボタンの右端に揃える。
   * ずらしたままだと閉じているパネルの箱が画面の右にはみ出し、横スクロールが出る。
   * style.css 側と同じ詳細度にして、後から読み込まれるこちらを勝たせる。 */
  & .gt_float_switcher .gt_options {
    right: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
 * hero (917:7064 / 893:7089)
 * 高さはアノテーション「アンカーナビゲーションと合わせて1画面分にしたい」から、
 * 100svh からナビの高さを引く。 低い画面で潰れすぎないよう下限を置く。
 * 1px 足しているのは、hero の下罫線をナビの上罫線と同じ位置に重ねて 1 本に見せる
 * ため (足さないと 2 本並んで 2px になる)。 下罫線はスクロール後に OVERVIEW との
 * 境目になるので消さない。 重なった状態ではナビが手前に描かれる。
 * ------------------------------------------------------------------------- */
.park-hero {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--park-nav-height) + 1px);
  min-height: 560px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-background-ultra-light);

  & .stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, #dddfe2 0%, #e9f9ff 31.25%, #e9f9ff 70%, #77c3ff 100%);
  }

  & .title {
    padding: 72px var(--space-4) 0;
    line-height: 0;

    & img {
      width: 100%;
    }
  }

  /* キービジュアルはモバイルだけ左右いっぱい、上下は 16px 空ける (893:7089)。
   * 下の 16px は summary の内余白と足して Figma の 32px になる。 */
  & .visual {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-block: var(--space-4);

    & img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* 開催情報はアウトライン化された 1 枚の図形。 モバイル 358px、デスクトップ 336px の
   * 枠に合わせて伸縮させる。 */
  & .summary {
    padding: var(--space-4);

    & img {
      width: 100%;
      height: auto;
    }
  }

  @media (min-width: 769px) {
    position: relative;
    display: grid;
    grid-template-columns: 384px 1fr;

    & .stage {
      display: contents;
    }

    & .title {
      position: absolute;
      top: var(--space-6);
      left: var(--space-6);
      z-index: 3;
      width: 480px;
      padding: 0;
    }

    & .visual {
      grid-column: 2;
      grid-row: 1;
      z-index: 1;
      margin-block: 0;
      background: linear-gradient(to top, #dddfe2 0%, #e9f9ff 53.846%, #77c3ff 100%);

      /* Figma (917:7178) は上 200px、左右 4.32% の余白を空けていたが、要望で絵を切らずに
       * できるだけ大きく出し、下端にそろえる。 上の 140px は左上の見出しとの重なりを
       * 減らすための余白 (100px では「こころがわくわく」が木に、180px では絵が小さく
       * なりすぎる)。 見出しの大きさは画面の高さによらないので、余白も px で持つ。 */
      & img {
        top: 140px;
        height: calc(100% - 140px);
        object-fit: contain;
        object-position: center bottom;
      }
    }

    & .summary {
      grid-column: 1;
      grid-row: 1;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: var(--space-6);
      background: var(--color-background-ultra-light);
    }
  }
}

/* ---------------------------------------------------------------------------
 * 本文とマーキー (941:6969 / 963:9568)
 * ------------------------------------------------------------------------- */
.park-body {
  display: flex;
  align-items: stretch;
}

/* style.css の main#main { flex: 1 0 auto } (ID を含む詳細度) を上書きするため #main で
 * 指定する。 縮まないままだと中身の最大幅まで広がり、ページが横にはみ出す。 */
.park-body > #main {
  flex: 1 1 0;
  min-width: 0;
}

/*
 * 縦マーキー (941:6970)。 Figma は横組みの帯を 90 度回しているので、字形ごと横倒しに
 * なる sideways で組む。 帯は本文と同じ高さまで伸びるが、流す文字列は画面の高さ分
 * あれば足りるので、sticky の窓の中だけで回す。
 */
.park-marquee {
  flex: 0 0 auto;
  width: 49px;
  border-right: 1px solid var(--color-border-default);
  background: var(--color-brand-primary-blue);
  color: var(--color-text-default);

  & .viewport {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  & .track {
    display: flex;
    flex-direction: column;
    animation: park-marquee 120s linear infinite;
  }

  & .group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    font-family: var(--font-family-jp-title);
    font-size: var(--font-size-text-16);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: sideways;
  }

  & .rule {
    flex: 0 0 auto;
    inline-size: 32px;
    border-block-start: 1px solid currentColor;
  }

  @media (min-width: 769px) {
    width: 73px;

    & .group {
      padding: var(--space-6);
      font-size: var(--font-size-text-24);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    & .track {
      animation: none;
    }
  }
}

@keyframes park-marquee {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ---------------------------------------------------------------------------
 * セクション共通
 * ------------------------------------------------------------------------- */
.park-section {
  border-top: 1px solid var(--color-border-default);
}

/* 先頭の OVERVIEW だけは hero の下罫線と重なるので上罫線を付けない。 :first-child を
 * .park-section 全体に当てると、.park-columns の中で先頭になる ACCESS まで消える。 */
.park-main > .park-section:first-child {
  border-top: 0;
}

/* 見出しはセクションの中で上端に貼り付け、いまどのセクションにいるかを見失わない
 * ようにする (Figma に無い要望)。 sticky の範囲は親のセクションなので、セクションを
 * 抜ければ次のセクションの見出しに入れ替わる。 */
.park-heading {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--park-gutter);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-background-ultra-light);
  font-size: inherit;
  line-height: 1;

  & .en {
    font-family: var(--font-family-en);
    font-size: var(--font-size-text-24);
    font-weight: 700;
  }

  & .ja {
    font-family: var(--font-family-jp-title);
    font-size: var(--font-size-text-14);
    font-weight: 700;
  }

  @media (min-width: 769px) {
    gap: var(--space-4);

    & .en {
      font-size: var(--font-size-text-32);
    }

    & .ja {
      font-size: var(--font-size-text-16);
    }
  }
}

.park-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--park-body-block) var(--park-gutter);
}

.park-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.park-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-brand-primary-green);
  border-radius: var(--radius-small);
  color: var(--color-text-brand-primary-green);
  font-size: var(--font-size-text-14);
  line-height: 1.5;
  transition: background-color 0.2s;

  & svg {
    flex: 0 0 auto;
  }

  @media (hover: hover) {
    &:hover {
      background-color: rgb(0 135 20 / 0.08);
    }
  }
}

.park-notes {
  font-size: var(--font-size-text-12);
  line-height: 1.75;

  & li {
    padding-left: 1.25em;
    text-indent: -1.25em;

    &::before {
      content: "○\00a0";
    }
  }
}

.park-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-fill-brand-primary);
  color: var(--color-text-inverted);
  font-size: var(--font-size-text-18);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  text-align: center;
  transition: filter 0.2s;

  @media (hover: hover) {
    &:hover {
      filter: brightness(1.1);
    }
  }

  @media (min-width: 769px) {
    display: block;
    padding: var(--space-6);
    font-size: var(--font-size-text-20);

    & .line + .line {
      margin-left: 0.25em;
    }
  }
}

.park-cta-section {
  padding: var(--park-body-block) var(--park-gutter);
}

/* ---------------------------------------------------------------------------
 * OVERVIEW (925:6863 / 963:9578)
 * ------------------------------------------------------------------------- */
.park-overview {
  display: flex;
  flex-direction: column;

  & .art {
    position: relative;
    height: 426px;
    overflow: hidden;

    & img {
      position: absolute;
      top: calc(50% - 55px);
      left: calc(50% + 87px);
      width: 1540px;
      max-width: none;
      transform: translate(-50%, -50%);
    }

    /* 管理画面で差し替えた画像は、仮の図形の位置合わせを外して枠いっぱいに切り抜く。
     * デスクトップの位置合わせより詳細度が高いので、メディアクエリの内外どちらにも勝つ。 */
    &.is-custom img {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: none;
    }
  }

  & .lead {
    font-family: var(--font-family-jp-title);
    font-size: var(--font-size-text-24);
    font-weight: 700;
    line-height: 1.25;
  }

  @media (min-width: 769px) {
    display: grid;
    grid-template-columns: 1fr 1fr;

    & .column {
      grid-column: 1;
      grid-row: 1;
    }

    & .art {
      grid-column: 2;
      grid-row: 1;
      height: auto;
      border-left: 1px solid var(--color-border-default);

      & img {
        top: calc(50% - 42px);
        left: calc(50% - 156.5px);
        width: 2102px;
      }
    }

    & .park-cta {
      max-width: 768px;
    }
  }
}

.park-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  & .row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-default);
  }

  & dt {
    font-weight: var(--font-weight-bold);
  }

  & dd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  & .park-buttons {
    margin-top: var(--space-4);
  }

  & .small {
    font-size: var(--font-size-text-12);
  }

  /* 協力とメディアパートナーの行はロゴを出す (927:6907)。 幅は img の属性どおり。 */
  & .logo img {
    display: block;
    height: auto;
  }

  @media (min-width: 769px) {
    /* 項目名 1 : 内容 3 (要望。 Figma 1036:6868 は 847px の行に 200px の項目名)。 */
    & .row {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: var(--space-4);
    }

    & dd {
      min-width: 0;
    }
  }
}

/* ---------------------------------------------------------------------------
 * AREA / TIME TABLE (941:6980 / 941:7011)
 * ------------------------------------------------------------------------- */
.park-media {
  & .park-section-body {
    align-items: center;
  }

  & .figure {
    width: 100%;
    max-width: 1280px;

    /* 入稿画像が 3:2 でなくても時間割などの情報を切らないよう、枠に収める。 */
    & img {
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 2;
      object-fit: contain;
    }
  }

  /* 原寸を別タブで開く (1068:6821)。 FAQ の「さらに読み込む」と同じ、アイコン付きの
   * 文字リンク。 図の下 32px は .park-section-body の gap。 */
  & .zoom {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-brand-primary-green);
    line-height: 1.5;

    & svg {
      width: 16px;
      height: 16px;
    }
  }
}

/* ---------------------------------------------------------------------------
 * FAQ (945:7168 / 963:9756)
 * ------------------------------------------------------------------------- */
.park-faq {
  & .columns {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  & .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  & .column > .title {
    align-self: stretch;
    font-family: var(--font-family-jp-title);
    font-size: var(--font-size-text-16);
    font-weight: 700;
    line-height: 1;
  }

  & .list {
    align-self: stretch;
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
  }

  & .item + .item {
    border-top: 1px solid var(--color-border-default);
  }

  & summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  & .icon {
    flex: 0 0 24px;

    & svg {
      width: 24px;
      height: 24px;
    }

    & .minus {
      display: none;
    }
  }

  & .item[open] .icon {
    & .plus {
      display: none;
    }

    & .minus {
      display: block;
    }
  }

  /* 質問と回答の間は summary の下余白 16px だけにする (要望)。 回答側は上余白を持たない。 */
  & .answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 var(--space-4) var(--space-4);

    /* 回答は管理画面の本文 (段落と箇条書き)。 リセットで消えた箇条の印とリンクの下線を戻す。 */
    & ul {
      padding-left: 1.5em;
      list-style: disc;
    }

    & ol {
      padding-left: 1.5em;
      list-style: decimal;
    }

    & a {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  /* style.css の .more (セクション末尾のアウトライン CTA) と名前が衝突するので load-more。 */
  & .load-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-brand-primary-green);
    line-height: 1.5;

    &[hidden] {
      display: none;
    }

    & svg {
      width: 16px;
      height: 16px;
    }
  }

  @media (min-width: 769px) {
    & .columns {
      flex-direction: row;
      gap: var(--space-6);

      & > .column {
        flex: 1 1 0;
        min-width: 0;
      }
    }

    & summary {
      padding: var(--space-4) var(--space-6);
    }

    & .answer {
      padding: 0 var(--space-6) var(--space-4);
    }
  }
}

.park-caution {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  & .title {
    font-size: var(--font-size-text-14);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
  }

  & .park-notes {
    line-height: 1.5;
  }
}

/* ---------------------------------------------------------------------------
 * ACCESS / CONTACT (1037:7346)
 * ------------------------------------------------------------------------- */
.park-columns {
  display: flex;
  flex-direction: column;

  @media (min-width: 769px) {
    flex-direction: row;

    & > .park-section {
      flex: 1 1 0;
      min-width: 0;
    }

    & > .park-section + .park-section {
      border-left: 1px solid var(--color-border-default);
    }
  }
}

/* ---------------------------------------------------------------------------
 * アンカーナビ (1045:9520 / 1045:9490)
 * マークアップ上はフッターの直前。 スクロール中は画面下端に貼り付き、末尾では
 * フッターの上の本来の位置に収まる。
 * ------------------------------------------------------------------------- */
.park-nav {
  --park-dot-color: #006c10;
  position: sticky;
  bottom: 0;
  z-index: 20;
  height: var(--park-nav-height);
  overflow-x: auto;
  border-top: 1px solid var(--color-border-default);
  background: var(--color-fill-brand-secondary);
  scrollbar-width: none;

  & ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: max-content;
    height: 100%;
    margin-inline: auto;
    padding: 0 var(--space-4);
  }

  & a {
    display: flex;
    align-items: center;
    font-family: var(--font-family-en);
    font-size: var(--font-size-text-16);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    /* 現在地の印 (Figma 1045:9522)。 手描き風の玉を icon-dot.svg のマスクで塗る。
     * 24px の枠の中央に直径 12px の玉があり、文字とは間を空けずに並べる (Figma 1045:9521
     * で gap 0 に更新。 枠の余白の分だけ玉と文字の間が約 6px 空く)。 */
    &[aria-current="true"]::before {
      content: "";
      width: 24px;
      height: 24px;
      background: var(--park-dot-color);
      mask: url("../images/park/icon-dot.svg") center / contain no-repeat;
    }
  }
}

/* ---------------------------------------------------------------------------
 * フッター (974:6894 / 975:7087)
 * ------------------------------------------------------------------------- */
.park-footer {
  border-top: 1px solid var(--color-border-default);
  background: var(--color-fill-dark);
  color: var(--color-text-inverted);

  & .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-8) var(--space-4);
  }

  & .logos {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  & .group {
    display: flex;
    align-items: flex-end;
    gap: var(--space-6);
  }

  & .logo-site {
    --logo-width: 140px;
    display: flex;
  }

  & .logo-arte img {
    width: 95px;
    height: 40px;
  }

  & .logo-tokyo svg {
    width: 105px;
  }

  & .logo-act svg {
    width: 186px;
  }

  & .copyright {
    font-size: var(--font-size-text-12);
    line-height: 1.5;
  }

  @media (min-width: 769px) {
    & .inner {
      padding: var(--space-12) var(--space-6);
    }

    & .logos {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
}

/* ---------------------------------------------------------------------------
 * 区分ごとの配色。 Figma の各区分の見出し (945:7261 など)、概要のラベル、
 * overlay (948:7606 など) から拾った値。 区分を増やしたときは既定値で出る。
 * ------------------------------------------------------------------------- */
.park-contents,
.park-overlay {
  --park-tint: var(--color-background-ultra-light);
  --park-label-bg: var(--color-fill-dark);
  --park-label-fg: var(--color-text-inverted);
  --park-overlay-bg: var(--color-background-ultra-light);
  --park-overlay-fg: var(--color-text-default);
  --park-overlay-label-bg: var(--color-fill-dark);
  --park-overlay-label-fg: var(--color-text-inverted);
}

.park-theme-booth {
  --park-tint: #e5f3e7;
  --park-label-bg: #006c10;
  --park-label-fg: var(--color-text-inverted);
  --park-overlay-bg: #00510c;
  --park-overlay-fg: var(--color-text-inverted);
  --park-overlay-label-bg: var(--color-fill-light);
  --park-overlay-label-fg: #006c10;
}

.park-theme-live {
  --park-tint: #fffae5;
  --park-label-bg: var(--color-brand-primary-yellow);
  --park-label-fg: var(--color-text-default);
  --park-overlay-bg: var(--color-brand-primary-yellow);
  --park-overlay-fg: var(--color-text-default);
  --park-overlay-label-bg: var(--color-fill-dark);
  --park-overlay-label-fg: var(--color-brand-primary-yellow);
}

.park-theme-cinema {
  --park-tint: #e5f5fd;
  --park-label-bg: var(--color-brand-primary-blue);
  --park-label-fg: var(--color-text-default);
  --park-overlay-bg: var(--color-brand-primary-blue);
  --park-overlay-fg: var(--color-text-default);
  --park-overlay-label-bg: var(--color-fill-dark);
  --park-overlay-label-fg: var(--color-brand-primary-blue);
}

.park-theme-kitchen-car {
  --park-tint: #f8ecf2;
  --park-label-bg: #f8c3e0;
  --park-label-fg: var(--color-text-default);
  --park-overlay-bg: #f8c3e0;
  --park-overlay-fg: var(--color-text-default);
  --park-overlay-label-bg: var(--color-fill-dark);
  --park-overlay-label-fg: #f8c3e0;
}

/* ---------------------------------------------------------------------------
 * 本文 (ブロックエディタの段落と定義リスト)。 .entry-body はブロック間を広げ、
 * リンクを緑にするので使わない (緑の overlay の上で読めなくなる)。
 * 定義リストはブロック本体の縞と角丸を打ち消し、Figma の罫線区切りにする。
 * ------------------------------------------------------------------------- */
.park-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  line-height: 1.75;

  & a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  & .lazyblock-definition-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow: visible;
    border-radius: 0;
    line-height: 1.5;

    & .row,
    & .row:nth-child(odd) {
      gap: var(--space-2);
      padding: var(--space-4) 0 0;
      border-top: 1px solid currentColor;
      background: none;
    }

    & .value {
      gap: 0;
    }
  }

  @media (min-width: 769px) {
    /* 項目名 1 : 内容 3 (要望)。 ブロック側の「項目名 200px 固定」を打ち消す。
     * 行の幅は panel の子として下の ul.cards と同じになる。 */
    & .lazyblock-definition-list .row,
    & .lazyblock-definition-list .row:nth-child(odd) {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: var(--space-4);
    }
  }
}

/* ---------------------------------------------------------------------------
 * CONTENTS (941:7021 / 963:9621)
 * ------------------------------------------------------------------------- */
.park-contents {
  /* パネルの中の列割り。 出演者の一覧 (.cards) と本文の定義リストが同じ列数を使うので、
   * 項目名の幅とカードの幅がそろう。 列数はウインドウ幅で段階的に増やし、幅が変わっても
   * カードが小さくなりすぎないようにする (デザイン幅 1440px で 4 列)。 */
  --park-panel-columns: 2;

  @media (min-width: 1024px) { --park-panel-columns: 3; }
  @media (min-width: 1360px) { --park-panel-columns: 4; }
  @media (min-width: 1800px) { --park-panel-columns: 5; }

  & .layout {
    display: flex;
    flex-direction: column;
  }

  /* モバイルは列の枠を外し、見出しとパネルを --i で交互に並べてアコーディオンにする。 */
  & .tabs,
  & .panels {
    display: contents;
  }

  & .tab {
    order: calc(var(--i) * 2);
  }

  & .panel {
    order: calc(var(--i) * 2 + 1);
  }

  & .park-banner {
    order: 9999;
  }

  /* 区分の見出しはセクションの見出しの下に貼り付ける。 モバイルでは .layout 全体が
   * sticky の範囲なので、下の区分の見出しが上がってくると前の見出しの上に重なって
   * 入れ替わる (order が後の要素ほど手前に描かれる)。 */
  /*
   * 区切り線は後ろの見出しの上罫線で描き、前の要素の下罫線と 1px 重ねて 1 本に見せる。
   * 見出しは sticky なので個別に画素へ丸められ、端数のずれ方によっては後ろの見出し
   * (手前に描かれる) の背景が前の見出しの下罫線を覆って消えることがある (モバイルで
   * 報告あり)。 自分の上罫線なら覆われない。 貼り付く位置も 1px 上げ、セクションの
   * 見出しの下罫線と重ねて二重線にしない。
   */
  & .tab {
    position: sticky;
    top: calc(var(--park-heading-height) - 1px);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    margin-top: -1px;
    padding: var(--space-6) var(--space-4);
    border-top: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    background: var(--park-tint);
    text-align: left;

    & .text {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: var(--space-2);
      min-width: 0;
      line-height: 1.25;
    }

    & .name {
      font-size: var(--font-size-text-20);
      font-weight: var(--font-weight-bold);
    }

    /* 行の高さを 18px (Figma の実寸) にして見出しの高さに端数を出さない。 1.25 だと
     * 17.5px になり、sticky の画素の丸めがずれる原因になる。 */
    & .description {
      font-size: var(--font-size-text-14);
      line-height: calc(18 / 14);
    }

    & .state {
      display: grid;
      flex: 0 0 24px;
      place-items: center;
      width: 24px;
      height: 24px;

      & > * {
        display: none;
      }

      & svg {
        width: 24px;
        height: 24px;
      }
    }

    & .plus {
      display: block;
    }

    /* 開いている区分の印は区分の色の玉 (Figma 988:7677)。 モバイルの Figma (1045:8648)
     * は「−」だったが、要望でデスクトップと同じ玉に揃えている。 */
    & .dot {
      width: 24px;
      height: 24px;
      background: var(--park-label-bg);
      mask: url("../images/park/icon-dot.svg") center / contain no-repeat;
    }

    &[aria-expanded="true"] {
      & .plus {
        display: none;
      }

      & .dot {
        display: block;
      }
    }
  }

  & .panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-4);
    border-bottom: 1px solid var(--color-border-default);

    &[hidden] {
      display: none;
    }
  }

  /* 概要。 上半分 (.header) は左の列 (ラベル、見出し、冒頭の段落) と右のイラスト、
   * 定義リスト以降は下に全幅。 本文の切り分けは tcd_park_split_intro_content()。 */
  & .intro,
  & .intro .header,
  & .intro .text {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  & .intro .text {
    min-width: 0;
  }

  & .intro .illust {
    align-self: center;
  }

  /* 定義リストのブロックも dt に .label を使うので、概要の列の直下に絞る。 */
  & .intro .text > .label {
    align-self: flex-start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-default);
    background: var(--park-label-bg);
    color: var(--park-label-fg);
    font-size: var(--font-size-text-14);
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }

  & .intro .title {
    font-family: var(--font-family-jp-title);
    font-size: var(--font-size-text-24);
    font-weight: 700;
    line-height: 1.25;
  }

  & .illust img {
    width: 200px;
    height: 200px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  /* 子区分の見出しと一覧をひとまとまりに見せる (1068:6802 の余白調整)。 見出しの下は
   * 16px に詰め、上は panel の 32px に 16px を足して 48px 空ける。 見出しの無い一覧
   * (親区分に直接ぶら下がる出演者) は、panel の 32px のままにする。 */
  & .group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  & .group-heading {
    margin-top: var(--space-4);
    font-size: var(--font-size-text-18);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
  }

  & .cards {
    display: grid;
    grid-template-columns: repeat(var(--park-panel-columns), minmax(0, 1fr));
    gap: var(--space-8) var(--space-4);
  }

  @media (min-width: 769px) {
    /* 列の高さは揃え (stretch)、右の列の左罫線を最後まで引く。 左の列だけは
     * sticky で上に貼り付けるため自分の高さに戻す。 */
    /* 区分一覧は Figma (1440px) の 456px を上限に、画面が狭いときは縮める。 固定のままだと
     * 右のパネルが細くなり、カードが小さく (または 1 列に) なってしまう。 */
    & .layout {
      display: grid;
      grid-template-columns: clamp(280px, 32vw, 456px) minmax(0, 1fr);
    }

    /* 貼り付いた見出しの下に並べる。 */
    & .tabs {
      position: sticky;
      top: var(--park-heading-height);
      display: flex;
      flex-direction: column;
      align-self: start;
    }

    & .panels {
      display: block;
      border-left: 1px solid var(--color-border-default);
    }

    /* デスクトップは .tabs の列ごと貼り付けるので、個々の見出しは貼り付けない。 */
    & .tab {
      position: static;
      padding: var(--space-6);
    }

    & .panel {
      padding: var(--space-8);
      border-bottom: 0;
    }

    & .intro .header {
      flex-direction: row;
      align-items: flex-start;
    }

    & .intro .text {
      flex: 1 1 auto;
    }

    & .intro .illust {
      flex: 0 0 200px;
      align-self: flex-start;
    }

    & .cards {
      gap: var(--space-6);
    }

    /* 本文の定義リストもカードと同じ列割りにそろえる。 項目名が 1 列、内容が残り全部で、
     * 罫線とカードの左右が同じ位置に来る。 デザイン幅の 4 列では要望どおり 1 : 3。 */
    & .park-prose .lazyblock-definition-list {
      & .row,
      & .row:nth-child(odd) {
        grid-template-columns: repeat(var(--park-panel-columns), minmax(0, 1fr));
        column-gap: var(--space-6);
      }

      & .value {
        grid-column: 2 / -1;
      }
    }
  }
}

.park-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-4);

  & .box {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
  }

  & .title {
    font-size: var(--font-size-text-18);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
  }

  & .text {
    font-size: var(--font-size-text-14);
  }

  & .park-notes {
    line-height: 1.5;
  }

  & .credit {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--font-size-text-10);
    line-height: 1;

    /* Coleman は SVG、シナぷしゅは PNG。 高さ 24px にそろえる (959:9067 / 1077:6830)。 */
    & svg {
      width: 86px;
      height: 24px;
    }

    & img {
      width: auto;
      height: 24px;
    }
  }

  @media (min-width: 769px) {
    padding: var(--space-6);
  }
}

/* 出演者カード (980:7442)。 サムネイルは正方形の枠に比率を保って収める。
 * 上罫線から中身までは 16px。 サムネイルの無い出演者は枠ごと出さないので、名前が
 * そのまま上に来る (1091:6813)。 */
.park-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);

  /* サムネイルは正方形で入稿される想定 (要望) なので、枠を余らせず切り抜く。
   * 比率は枠ではなく img 自身に持たせる。 Safari は縦並びの flex アイテム (.media) に
   * 置いた aspect-ratio を解決しないことがあり、その場合 img の height: 100% が親の
   * 高さを参照できず、元の縦横比のまま出てしまう (本番の実機で確認)。 枠の
   * aspect-ratio は画像が無いカードの高さを保つために残す。 */
  & .media {
    aspect-ratio: 1;

    & img {
      width: 100%;
      aspect-ratio: 1;
      height: auto;
      object-fit: cover;
    }
  }

  /* なにしよう？ブースだけはロゴの形がまちまちなので、切らずに中央の 80% へ収める。
   * Figma 952:8771 は 62% (193.83px の枠にロゴの幅 120px) だが、実際のロゴでは小さく
   * 見えすぎたため広げた (要望)。 正方形のロゴだけが大きく見えるのを防ぎ、横長のロゴと
   * 幅をそろえる。 padding は img の中身の箱を狭めるので、object-fit: contain がその
   * 中に収まる。 */
  .park-theme-booth & .media img {
    padding: 10%;
    object-fit: contain;
  }

  & .text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    line-height: 1.5;
  }

  & .name {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--font-size-text-16);
    font-weight: var(--font-weight-bold);
    /* 共通の見出しは style.css で word-break: auto-phrase にしているが、カードでは
     * 「豊島区（としまミュージアム）」のような団体名が語句の切れ目で折れて 1 行目が
     * 大きく余る。 2 行で切り詰める枠なので、既定の折り返しに戻す (要望)。 */
    word-break: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  & .subtitle {
    overflow: hidden;
    font-size: var(--font-size-text-14);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .detail {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-2);
    color: var(--color-text-brand-primary-green);
    line-height: 1.5;

    & svg {
      width: 16px;
      height: 16px;
    }

    @media (hover: hover) {
      &:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
 * overlay (948:7606 など)。 画面右端に全高で出し、中身をスクロールさせる。
 * park.js は event.target === dialog を背景のクリックとみなすので、dialog 自身の
 * 余白は 0 にして .inner に持たせる (中身の余白のクリックで閉じないように)。
 * ------------------------------------------------------------------------- */
.park-overlay {
  /* showModal() で開けば最前面のレイヤーに出るが、JS が無効なときは open 属性の
   * ままのモーダルでない表示になり、z-index を持つ hero の下に隠れる。 その場合も
   * 右端のパネルとして前面に出るよう、自前で fixed と z-index を持たせる。 */
  position: fixed;
  z-index: 40;
  inset: 0 0 0 auto;
  width: min(100vw, 600px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background: var(--park-overlay-bg);
  color: var(--park-overlay-fg);

  &::backdrop {
    background: rgb(0 0 0 / 0.4);
  }

  /* 余白は上下 32px、左右はモバイル 16px、デスクトップ 32px。 要素間は 32px
   * (Figma 1069:6830 / 948:7606。 2026-09-23 の調整)。 */
  & .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-height: 100%;
    padding: var(--space-8) var(--space-4);

    @media (min-width: 769px) {
      padding: var(--space-8);
    }
  }

  & .close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 48px;
    height: 48px;

    & svg {
      width: 48px;
      height: 48px;
    }
  }

  & .head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-right: var(--space-12);
  }

  & .head > .label {
    align-self: flex-start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-default);
    background: var(--park-overlay-label-bg);
    color: var(--park-overlay-label-fg);
    font-size: var(--font-size-text-14);
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }

  & .name {
    font-size: var(--font-size-text-24);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
  }

  & .subtitle {
    overflow: hidden;
    font-size: var(--font-size-text-14);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .media {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);

    /* 詳細の画像は正方形で入稿される想定 (アノテーション、要望)。 多少ずれた比率でも
     * 枠を余らせずそろえたいので cover で切り抜く。 一覧のサムネイルとは別の画像を
     * 設定できるので、ロゴがここで切れることはない。 */
    & img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
  }

  & .credit,
  & .note {
    font-size: var(--font-size-text-12);
    line-height: 1.75;
  }

  /* overlay の定義リストは幅 600px 以下の中で常に項目名と内容を半分ずつ並べる (952:8065)。
   * 区切り線は文字色のままでは強すぎるので 50% に落とす (要望)。 背景色が区分ごとに
   * 違うので、固定の色ではなく文字色を半透明にして混ぜる。 color-mix() を解釈しない
   * ブラウザでは前の宣言が残り、文字色の線になる。 */
  & .park-prose .lazyblock-definition-list {
    & .row,
    & .row:nth-child(odd) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
      border-top-color: currentColor;
      border-top-color: color-mix(in srgb, currentColor 50%, transparent);
    }

    & .label,
    & .value {
      min-width: 0;
    }
  }
}