/* =============================================================================
   PATCHWORK DEAD × TapNow LP — join（企画・参加方法・IPの使い方）
   ========================================================================== */
/* ---- ファーストビュー（批評R2: 見出し3行＋期間が下に落ちる問題への対処）----
   見出し2行以内＋要点バンド＋実際に動く主ボタンを、スクロールなしで
   1440×900・390×844 の両方に収める。右にキャラクター立ち絵を添えて
   「暗い規約文書」に見えないようにする。 */
/* v16（ユーザー指示）: 2カラムの分割は .join-hero-copy 自身の
   grid-template-areas で行う（figure が DOM 上どこにあっても "art" の
   位置に置ける）。.join-hero-row はもう列を持たない、ただの外枠。 */
.join-hero-row { display: block; }

.join-hero-copy {
  display: grid; grid-template-columns: 1fr;
  grid-template-areas: "lockup" "title" "art" "lead" "keyfacts" "actions";
  row-gap: 0;
}
.join-hero-copy .collab-lockup { grid-area: lockup; }
.join-hero-copy .sheet-title { grid-area: title; margin-bottom: var(--s-4); }
.join-hero-copy .lead { grid-area: lead; margin-bottom: var(--s-5); }
.join-hero-copy .join-keyfacts-wrap { grid-area: keyfacts; }
.join-hero-copy .hero-actions { grid-area: actions; }

@media (min-width: 1024px) {
  /* v16 バグ修正: base.css の .sheet-head { max-width: 46em; } が
     #join のヘッダー（class="sheet-head join-hero"）にも掛かっていたため、
     2カラム化しても実際には ~736px の枠の中で45:55に割っているだけで、
     画像列が365px程度しかなかった（狭い枠の中でキャラの顔が両方とも
     フレーム外に出るバグの原因）。#join のここだけ枠を外し、.sheet の
     コンテンツ幅（最大1272px）いっぱいを2カラムで使わせる。 */
  .join-hero.sheet-head { max-width: none; }
  .join-hero-copy {
    grid-template-columns: 9fr 11fr; /* テキスト45% : 画像55% */
    grid-template-areas:
      "lockup    art"
      "title     art"
      "lead      art"
      "keyfacts  art"
      "actions   art";
    column-gap: var(--s-7); align-items: start;
  }
  .join-hero-copy .join-hero-art { grid-area: art; margin: 0; align-self: stretch; }
}

/* コラボロックアップ（Lumia LP の canvas/lumia-and-the-ocean-of-beginnings の
   .collab-lockup を踏襲）: 見出し「作って、報酬をGETしよう。」の直上に、
   タイトルロゴ×TapNowロゴを同格に並べる。ロゴは縦横比が違う
   （PD 1592:913 ≈1.74:1・TapNow 662:160 ≈4.14:1）ため、高さではなく
   見た目の横幅がそろうように高さを配分し、「同じくらいの重み」に見せる。 */
.collab-lockup {
  margin-bottom: var(--s-4);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5);
}
.lockup-pd { height: 60px; width: auto; display: block; }
/* v11: KEIGO MATSUMARU（制作者ロゴ・2829:960≈2.95:1）も PD/Tapnow と同じ
   横幅（約105px）にそろう高さにして、3つのロゴが同格に見えるようにする。 */
.lockup-keigo { height: 36px; width: auto; display: block; }
.lockup-tapnow { height: 26px; width: auto; display: block; }
.lockup-x {
  font-size: 1.5rem; font-style: normal; font-weight: 400;
  color: var(--ink-muted); line-height: 1;
}
@media (max-width: 640px) {
  .collab-lockup { gap: var(--s-4); margin-bottom: var(--s-3); }
  .lockup-pd { height: 44px; }
  .lockup-keigo { height: 26px; }
  .lockup-tapnow { height: 19px; }
  .lockup-x { font-size: 1.15rem; }
}

.join-keyfacts {
  display: grid; gap: var(--s-2); margin-bottom: var(--s-6);
  font-size: var(--t-lead); color: var(--ink);
}
.join-keyfacts li { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; }
.join-keyfacts b {
  flex: none; min-width: 6.5em; font-size: var(--t-label); letter-spacing: .1em;
  color: var(--accent); font-weight: 700; padding-top: .35em;
}
.join-keyfacts .kf-note { color: var(--ink-faint); font-size: var(--t-caption); }

/* ---- 報酬の表彰台（v17・ユーザー指示: #join冒頭の報酬をもっと豪華に） -----------
   下にある大きな reward-featured/.rewards ブロックと視覚言語（金額を大きく・
   アクセント色）は揃えるが、ここはヒーロー列に収まるコンパクトな表彰台。
   メダルは画像を使わず、パレットのトークンだけで金・銀・銅のグラデーションを
   作る（CSSのみ）。 */
.reward-podium { margin-bottom: var(--s-6); }
.reward-podium-note {
  font-size: var(--t-caption); color: var(--ink-muted); margin-bottom: var(--s-3);
}
.reward-podium-note b { color: var(--accent); font-weight: 900; }
.podium-tiers {
  display: flex; gap: var(--s-3); list-style: none; padding: 0; margin: 0;
}
.podium-tier {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2); text-align: center; padding: var(--s-4) var(--s-2);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hairline);
}
.podium-medal {
  /* v17バグ修正: 数字に --font-la（Cormorant Garamond）を使うと「1」の字形が
     セリフの無い縦棒だけになり「I」に見えてしまうため、既定のサンセリフ
     （.step::before の連番と同じ）に揃える。 */
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  font-weight: 900; font-size: 1rem;
  box-shadow: inset 0 -2px 3px rgba(13,10,8,.35), 0 2px 6px rgba(13,10,8,.4);
}
.podium-rank { font-size: var(--t-caption); color: var(--ink-muted); }
.podium-rank i { display: block; font-style: normal; color: var(--ink-faint); font-size: .85em; }
.podium-amount { font-weight: 900; font-size: 1.15rem; color: var(--ink); line-height: 1.2; }
.podium-amount i { display: block; font-style: normal; font-weight: 400; font-size: .6em; color: var(--ink-muted); margin-top: .2em; }

.podium-tier--gold {
  border-color: color-mix(in srgb, var(--mustard-300) 55%, transparent);
  background: color-mix(in srgb, var(--mustard-600) 16%, var(--surface));
}
.podium-tier--gold .podium-medal { background: linear-gradient(155deg, var(--mustard-300), var(--mustard-600)); color: var(--umber-950); }
.podium-tier--gold .podium-amount { color: var(--accent); }
/* 1位を視覚的に一番大きく */
.podium-tier--gold { padding-block: var(--s-5); }
.podium-tier--gold .podium-medal { width: 42px; height: 42px; font-size: 1.2rem; }
.podium-tier--gold .podium-amount { font-size: 1.5rem; }

.podium-tier--silver {
  border-color: color-mix(in srgb, var(--haze-300) 45%, transparent);
  background: color-mix(in srgb, var(--haze-600) 16%, var(--surface));
}
.podium-tier--silver .podium-medal { background: linear-gradient(155deg, var(--cream-200), var(--haze-500)); color: var(--umber-950); }

.podium-tier--bronze {
  border-color: color-mix(in srgb, var(--coral-500) 45%, transparent);
  background: color-mix(in srgb, var(--coral-700) 16%, var(--surface));
}
.podium-tier--bronze .podium-medal { background: linear-gradient(155deg, var(--coral-300), var(--coral-700)); color: var(--umber-950); }

@media (max-width: 640px) {
  .podium-tiers { flex-direction: column; }
  .podium-tier { flex-direction: row; justify-content: flex-start; text-align: left; padding: var(--s-3) var(--s-4); }
  .podium-tier--gold { padding-block: var(--s-3); }
  .podium-rank { min-width: 4.5em; }
  .podium-amount { margin-left: auto; }
  .podium-amount i { display: inline; margin-top: 0; margin-left: .3em; }
}

/* ユーザー指示で切り抜きを廃止: 映像スチル（横長）を額装するカードに変更。
   v16: 以前はモバイルで非表示だったが、ユーザー指示で全幅表示に変更。
   grid-area は上の .join-hero-copy 側（"art"）で指定する。 */
.join-hero-art {
  aspect-ratio: 16/10; width: 100%; margin: var(--s-5) 0;
  border-radius: var(--r-lg);
}
.join-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
@media (min-width: 1024px) {
  .join-hero-art { aspect-ratio: auto; height: 100%; margin: 0; }
}

.join-block { margin-top: var(--s-8); }
.join-h { font-size: var(--t-title); margin-bottom: var(--s-4); }
.join-lead { color: var(--ink-muted); max-width: 40em; margin-bottom: var(--s-4); }

/* ---- 報酬 -------------------------------------------------------------------- */
.rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 760px) { .rewards { grid-template-columns: 1fr; } }
.reward {
  background: var(--surface); border-radius: var(--r-lg); padding: var(--s-5);
  text-align: center; box-shadow: var(--e-1);
}
.reward--top { border: 1px solid var(--accent); box-shadow: var(--e-2); }
.reward-rank { font-size: var(--t-label); letter-spacing: .2em; color: var(--accent); margin-bottom: var(--s-2); }
.reward-who { color: var(--ink-muted); font-size: var(--t-caption); margin-bottom: var(--s-3); }
.reward-amount { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; }
.reward-amount span { font-size: 1rem; color: var(--ink-muted); margin-left: var(--s-2); font-weight: 700; }
.reward-note { margin-top: var(--s-2); font-size: var(--t-caption); color: var(--ink-faint); }

/* ---- 期間 -------------------------------------------------------------------- */
.period-block { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-5); }
.period-card { background: var(--surface-raised); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); flex: 1; min-width: 220px; }
.period-card .pc-label { font-size: var(--t-label); letter-spacing: .18em; color: var(--ink-muted); margin-bottom: var(--s-2); }
.period-card .pc-date { font-size: 1.15rem; font-weight: 700; }
.period-card .pc-note { font-size: var(--t-caption); color: var(--accent); margin-top: var(--s-2); }

/* ---- タグ・コピー（v15: コードブロック風の囲み） ------------------------------
   カード（.step、背景 --surface）の中に一段明るい面を沈めて「コードブロック」
   に見せる。等幅フォントはシステムスタックのみ（Webフォントを足さない）。
   コピー操作は箱の内側・右下に置き、1ブロックにつきボタンは1個だけ。 */
.tag-block { margin-top: var(--s-5); }
.tag-code {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.tag-code-text {
  display: block; font-family: var(--font-mono); font-size: .9375rem;
  color: var(--ink); line-height: 1.7; word-spacing: .2em;
}
/* トークン（メンション2つ・ハッシュタグ1つ）を個別に nowrap にし、
   折り返しはトークンの「間」でだけ起きるようにする（360〜390px対策）。 */
.tag-token { display: inline-block; white-space: nowrap; }
.tag-code-foot {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--s-3); margin-top: var(--s-4);
}
.tag-note { font-size: var(--t-caption); color: var(--ink-faint); margin-top: var(--s-3); }
.copy-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4);
  font-size: var(--t-caption); color: var(--ink); background: var(--surface);
  flex: none;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-status { font-size: var(--t-caption); color: var(--accent); min-height: 1.2em; margin: 0; }

/* ---- 参加手順 ------------------------------------------------------------------ */
.steps { display: grid; gap: var(--s-5); counter-reset: step; }
.step {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4);
  background: var(--surface); border-radius: var(--r-md); padding: var(--s-5);
}
/* v14: 本文列に min-width:0 が無いと、中の .slot--shots（ネストした
   grid-template-columns:repeat(auto-fit,minmax(260px,1fr))）の
   min-content 幅がそのまま親列を押し広げ、360px 幅で .step 自体が
   はみ出していた（実測 +24px）。 */
.step > div { min-width: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--umber-950);
  display: grid; place-items: center; font-weight: 900; font-size: 1.1rem;
}
.step-h { font-size: 1.05rem; margin-bottom: var(--s-2); }
.step-p { color: var(--ink-muted); margin-bottom: var(--s-2); }
.step-p b { color: var(--ink); }

/* ---- 作っていい/避けてほしい -------------------------------------------------- */
.terms-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 760px) { .terms-pair { grid-template-columns: 1fr; } }
.term { border-radius: var(--r-lg); padding: var(--s-5); }
.term--ok { background: color-mix(in srgb, var(--teal-600) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--teal-600) 40%, transparent); }
.term--ng { background: color-mix(in srgb, var(--coral-700) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--coral-700) 40%, transparent); }
.term h4 { margin-bottom: var(--s-3); }
.term ul { display: grid; gap: var(--s-2); }
.term li { padding-left: var(--s-4); position: relative; color: var(--ink-muted); }
.term li::before { content: "・"; position: absolute; left: 0; }
.term li b { color: var(--ink); }
.term-note { margin-top: var(--s-3); font-size: var(--t-caption); color: var(--ink-faint); }
.commercial-note {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  border: 1px solid var(--coral-600); background: color-mix(in srgb, var(--coral-700) 14%, var(--surface));
  font-weight: 700;
}

/* ---- 公開素材一覧 --------------------------------------------------------------- */
.asset-table-wrap { overflow-x: auto; border-radius: var(--r-md); }
@media (max-width: 640px) {
  .asset-table { min-width: 560px; }
}

/* ---- 制作要件の強調（v13.2: 「30秒以上の動画」をその文の主役に見せる） -------
   なぜ30秒以上なのかの説明ブロックは撤去し（ユーザー指示）、その分ここで
   要件そのものを大きく・アクセント色で目立たせる。AA実測は DESIGN.md §2.1
   の --accent on 暗色面 = 7.65:1（AAA）を継承。 */
.join-lead--requirement { font-size: 1.05rem; line-height: 2; }
.join-callout {
  display: inline-block; font-weight: 900; color: var(--accent);
  font-size: 1.35em; line-height: 1.3; padding: 0 .2em;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--r-sm);
}
@media (max-width: 640px) { .join-callout { font-size: 1.2em; } }

/* v16（ユーザー指示）: X投稿の「本文の先頭140文字以内」をルールとして単独行に。
   .join-callout と同じアクセント色マーカーの視覚言語を踏襲する。 */
.join-rule {
  margin: 0 0 var(--s-4); font-size: 1.2em; font-weight: 700; line-height: 1.6; color: var(--ink);
}
.join-mark {
  display: inline-block; font-weight: 900; color: var(--accent); padding: 0 .2em;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--r-sm); white-space: nowrap;
}
@media (max-width: 640px) { .join-rule { font-size: 1.15em; } }

/* ---- 参加賞（大きく先頭に。ルミアの reward--top の考え方を流用） -------------- */
.reward-featured {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6); box-shadow: var(--e-2); margin-bottom: var(--s-4);
}
.reward-featured-who { font-size: var(--t-lead); font-weight: 700; }
.reward-featured-who span { display: block; font-size: var(--t-caption); font-weight: 400; color: var(--ink-muted); margin-top: var(--s-1); }
.reward-featured-what { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 900; color: var(--accent); }
.reward-featured-what span { font-size: 1rem; color: var(--ink-muted); margin-left: var(--s-2); font-weight: 700; }
.join-note { margin-top: var(--s-4); font-size: .9375rem; line-height: 1.8; color: var(--ink-muted); max-width: 40em; }

/* ---- 注意書き（Xタグ等。ルミアの .caution を踏襲） ----------------------------- */
.caution {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--mustard-600) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--mustard-500) 40%, transparent);
  font-size: var(--t-caption); color: var(--ink-muted);
}
.caution b { color: var(--ink); }

/* ---- クローンボタン行 ----------------------------------------------------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); align-items: center; }

/* v16（ユーザー指示）: クローンURL確定。ルミアの .cta-note を踏襲し、
   リンク先を明記する注記をボタンの下に添える。（v18: 公開素材一覧側の
   2つ目のクローンボタンでのみ使用。冒頭側は .cta-callout へ統合） */
.cta-note { margin-top: var(--s-3); font-size: var(--t-caption); line-height: 1.8; color: var(--ink-muted); max-width: 40em; }

/* ---- クローンCTAブロック（v18・ユーザー指示: ルミアの .cta-block を踏襲） -----
   「まずクローン → TapNow上で作る」の流れを、特典の直後で独立したカードとして
   見せる。ルミアと違い、このサイトは各ブロックが必ず .join-h から始まる構成
   なので見出しを付けている。 */
.cta-block {
  margin-top: var(--s-7);
  padding: var(--s-6) var(--s-6) var(--s-7);
  border-radius: var(--r-lg);
  background: var(--surface);
  border-top: 2px solid var(--accent);
  box-shadow: var(--e-2);
}
.cta-block .join-h { border-bottom: none; padding-bottom: 0; margin-bottom: var(--s-5); }
.deadline {
  display: grid; gap: var(--s-2);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
}
.deadline-label {
  justify-self: start; padding-bottom: var(--s-2); border-bottom: 1px solid var(--accent);
  font-size: var(--t-label); letter-spacing: .1em; line-height: 1; color: var(--ink-muted);
}
.deadline-date {
  font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.3; color: var(--accent);
}
.deadline-date .kf-note { color: var(--ink-faint); font-size: .55em; font-weight: 400; margin-left: .3em; }
.deadline-note { display: block; margin-top: var(--s-1); font-size: var(--t-caption); color: var(--ink-muted); }

/* 「はっきり見える注記」（ユーザー指示: 小さいグレー文字ではなくコールアウト
   箱にする）。.caution（警告=マスタード）とは色を変え、情報として teal 系で。 */
.cta-callout {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--teal-600) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal-400) 45%, transparent);
  font-size: .9375rem; line-height: 1.8; color: var(--ink); max-width: 40em;
}

/* ---- 手順のスクリーンショット（ルミアの .slot/.shot を踏襲） ------------------ */
.slot { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.slot--shots { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.shot { margin: 0; display: grid; gap: var(--s-3); }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--surface); box-shadow: var(--e-1);
}
.shot figcaption { font-size: var(--t-caption); line-height: 1.85; color: var(--ink-muted); }
.shot figcaption b { color: var(--ink); font-weight: 700; }

/* v19（ユーザー指示）: 共有アセットのワークスペーススクショは原寸1057px。
   .cta-block は幅が広いので、そのまま100%にすると原寸を超えて拡大され
   ぼやける。原寸幅を超えて引き伸ばさない。 */
.slot[data-slot="shared-assets"] img { max-width: 1057px; }

/* v17（ユーザー指示）: guide_teamid_1/2 は縦横比が違うため、そのまま並べると
   キャプション①②の開始位置が揃わない。同じ高さの額（暗い面）に
   object-fit:contain で収め、額の下端＝キャプションの開始位置を常に揃える。
   1440/1024 で figcaption の getBoundingClientRect().top が誤差1px以内で
   一致することを検証済み。 */
.shot-frame {
  height: 150px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--surface); box-shadow: var(--e-1); overflow: hidden;
}
.shot-frame img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; display: block; border-radius: 0; border: none; background: none; box-shadow: none;
}

/* ---- 更新履歴 -------------------------------------------------------------------- */
.changelog { display: grid; gap: var(--s-3); }
.changelog > div { display: flex; gap: var(--s-4); align-items: baseline; border-bottom: 1px solid var(--hairline); padding-bottom: var(--s-3); }
.changelog time { font-family: var(--font-mono); color: var(--ink-faint); font-size: var(--t-caption); flex: none; width: 8em; }
.changelog dd { color: var(--ink-muted); }