/* 撮り方の構図図（ピッチを真上から見た図 + カメラ位置 + 画角）。
   /guide/shooting と アップロード画面（index.html）で同じ SVG を使う。
   SVG は HTML にインラインで置き、色はここで var(--kr-*) から当てる（hex を SVG に持たせない）。
   index.html 側の SVG は guide-shooting.html の 5 人制と同一であることを
   tests/test_guide_static.py が検査する。 */

.shoot-diagram {
  display: block;
  width: 100%;
  height: auto;
  background: var(--kr-surface);
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-md);
}

/* 画角に入らない部分（ピッチの地）。画角の内側は上に重ねる .sd-view で塗り直す */
.shoot-diagram .sd-out {
  fill: var(--kr-surface-2);
}

.shoot-diagram .sd-hatch {
  stroke: var(--kr-ink-dimmer);
  stroke-width: 1;
}

/* カメラの画角。下地で「映らない」を塗りつぶし、その上に薄い Pitch Green を重ねる。
   accent-sub（8%）だと「映らない」の灰色と見分けにくいので、accent を不透明度で薄める */
.shoot-diagram .sd-view-base {
  fill: var(--kr-surface);
}

.shoot-diagram .sd-view {
  fill: var(--kr-accent);
  fill-opacity: .16;
  stroke: var(--kr-accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  stroke-opacity: .5;
}

.shoot-diagram .sd-line {
  fill: none;
  stroke: var(--kr-accent);
  stroke-width: 1.5;
}

.shoot-diagram .sd-goal {
  fill: var(--kr-accent);
}

.shoot-diagram .sd-cam-ring {
  fill: var(--kr-surface);
  stroke: var(--kr-ink);
  stroke-width: 1.5;
}

.shoot-diagram .sd-cam {
  fill: var(--kr-ink);
}

.shoot-diagram .sd-label {
  font-family: var(--kr-font-sans);
  font-size: 12px;
  font-weight: 700;
  fill: var(--kr-accent);
  /* 線や斜線の上でも読めるよう、文字の周りを地の色で縁取る */
  paint-order: stroke;
  stroke: var(--kr-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.shoot-diagram .sd-label--out {
  fill: var(--kr-ink-dim);
}

.shoot-diagram .sd-label--cam {
  fill: var(--kr-ink);
}

/* ── 構図の図（/guide/shooting）。横から → 斜めからの順に縦に並べる ── */
.guide-article .shoot-fig {
  margin: 0 0 24px;
}

.shoot-fig figcaption {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--kr-ink);
}

.shoot-fig figcaption strong {
  color: var(--kr-accent);
}

/* ── アップロード導線（shared/upload-shoot.part.html）─────────
   「解析がうまくいきやすい動画」のカード（.upload-shoot__guide）1 枚に、向いている動画の
   2 列と撮り方の図をまとめる。コツなので、書き出し済みのログインユーザーには index.js が
   hidden にする。横幅はアップロード枠に揃える（親の幅いっぱい）。 */
.upload-shoot {
  margin: 12px 0 0;
  text-align: left;
}

.upload-shoot__guide {
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-md);
  background: var(--kr-surface);
  padding: 16px;
}

.upload-shoot__guide[hidden] {
  display: none;
}

/* 文字の段階は DESIGN.md §3 の h3 22 / body 16 / small 14 / caption 12。
   カード見出し 22 → 小見出し（2 列の見出し・撮る位置・カメラの高さ）16 → 本文 14 → 図の説明 12。 */
.upload-shoot__head {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--kr-ink);
  margin: 0 0 16px;
}

/* 向いている / 難しい動画の 2 列。カードの中なので枠は付けず、おすすめ側だけ薄く塗る。
   狭い画面でも 2 列のまま（1 列にすると対比が消える。tests/test_lp_upload_embed.py）。 */
.upload-suitability {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  text-align: left;
}
.upload-suitability__col {
  border-radius: var(--kr-radius-sm);
  padding: 12px;
}
.upload-suitability__col--ok { background: var(--kr-accent-sub); }
.upload-suitability__head {
  display: flex; align-items: center; gap: 6px;
  font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--kr-ink);
  margin-bottom: 8px;
}
.upload-suitability__head .material-symbols-outlined { font-size: 20px; }
.upload-suitability__col--ok .upload-suitability__head .material-symbols-outlined { color: var(--kr-accent); }
.upload-suitability__col--ng .upload-suitability__head .material-symbols-outlined { color: var(--kr-ink-dim); }
.upload-suitability ul {
  list-style: none; padding: 0; margin: 0;
  font-size: 0.875rem; color: var(--kr-ink-dim); line-height: 1.6;
}
.upload-suitability li { position: relative; padding-left: 10px; }
.upload-suitability li + li { margin-top: 4px; }
.upload-suitability li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--kr-ink-dimmer);
}

/* スマホ幅: 2 列の 1 列あたりが 130px 前後しかないので、段階は保ったまま 1 段ずつ詰める
   （見出し 20 / 2 列の見出し 15 / 2 列の本文 13）。 */
@media (max-width: 480px) {
  .upload-shoot__head { font-size: 1.25rem; }
  .upload-suitability__col { padding: 10px; }
  .upload-suitability__head { font-size: 0.9375rem; }
  .upload-suitability ul { font-size: 0.8125rem; }
}

/* 「撮る位置」「カメラの高さ」の 2 つの話。小見出しで分け、2 つ目の前に区切り線を引く */
.upload-suitability + .upload-shoot__step,
.upload-shoot__step + .upload-shoot__step {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--kr-hair);
}

.upload-shoot__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kr-ink);
  margin: 0 0 4px;
}

.upload-shoot__sub .material-symbols-outlined {
  font-size: 20px;
  color: var(--kr-accent);
}

.upload-shoot__lead {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--kr-ink-dim);
  margin: 0 0 12px;
}

.upload-shoot__height {
  margin: 0;
}


.upload-shoot__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.upload-shoot__pair figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* 説明は図の上。2 枚で説明の行数が違っても図の位置が揃うよう、図を下に寄せる */
.upload-shoot__pair .shoot-diagram {
  margin-top: auto;
}

.upload-shoot__pair figcaption {
  margin-bottom: 8px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--kr-ink-dim);
}

.upload-shoot__pair figcaption strong {
  display: block;
  color: var(--kr-ink);
  font-size: 0.875rem;
}


/* ── カメラの高さ（低い位置 / 高い位置の 2 枚）。ガイドとアップロード導線で共通 ──
   幅があれば左右に並べ、狭ければ縦に積む（1 枚 280px を切ると縦）。 */
.shoot-height-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 8px;
}

/* アップロード導線では、幅広の画面で図が引き伸ばされ、図の中の文字が見出しより大きく
   なるのを防ぐ（1 枚あたり viewBox の 320 ≒ 実寸になる幅）。 */
.upload-shoot__pair,
.upload-shoot .shoot-height-pair {
  max-width: 656px;
}

/* ── 個人練習: ペットボトル + ヘアゴムで固定（/guide/shooting）── */
.shoot-diagram .sd-ground {
  stroke: var(--kr-ink-dimmer);
  stroke-width: 1.5;
}

.shoot-diagram .sd-bottle {
  fill: var(--kr-surface);
  stroke: var(--kr-ink-dim);
  stroke-width: 1.5;
}

.shoot-diagram .sd-cap {
  fill: var(--kr-ink-dim);
}

.shoot-diagram .sd-groove {
  stroke: var(--kr-ink-dimmer);
  stroke-width: 1;
}

.shoot-diagram .sd-phone {
  fill: var(--kr-ink);
}

.shoot-diagram .sd-phone + .sd-cam {
  fill: var(--kr-surface);
}

.shoot-diagram .sd-band {
  fill: var(--kr-accent);
}

.shoot-diagram .sd-water {
  fill: var(--kr-accent);
  fill-opacity: .16;
}

/* ── 斜めから撮るときのカメラの下向きの角度（横から見た図）── */
.shoot-diagram .sd-pitchline {
  stroke: var(--kr-accent);
  stroke-width: 3;
}

.shoot-diagram .sd-pole {
  stroke: var(--kr-ink-dim);
  stroke-width: 2;
}

.shoot-diagram .sd-aim {
  stroke: var(--kr-accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.shoot-diagram .sd-head {
  stroke: var(--kr-ink-dimmer);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.shoot-diagram .sd-person {
  fill: var(--kr-ink);
}

.shoot-diagram .sd-person-body {
  stroke: var(--kr-ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.shoot-fig .shoot-diagram + .shoot-diagram {
  margin-top: 8px;
}

/* アップロード導線の 2 枚並びは幅が狭く、図中の文字が読めない大きさになるので消す
   （高さの図は 1 枚で幅いっぱいに出すので、ラベルを残す）。
   意味は figcaption で伝える。 */
.upload-shoot__pair .sd-label {
  display: none;
}

/* 斜めから: 画角の両端が通るコーナー（右下・左上）の印 */
.shoot-diagram .sd-corner {
  fill: var(--kr-accent);
}

/* 斜めから: 奥のハーフは遠く小さく映り、追いにくい。地の色で薄めて手前と分ける */
.shoot-diagram .sd-far {
  fill: var(--kr-surface);
  fill-opacity: .6;
}

.shoot-diagram .sd-label--easy {
  font-size: 14px;
}

.shoot-diagram .sd-label--hard {
  font-size: 14px;
  fill: var(--kr-ink-dim);
}

/* ── カメラの高さ（低い / 高い の比較）────────────────────── */
.shoot-diagram .sd-ray {
  stroke: var(--kr-accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  stroke-opacity: .6;
}

.shoot-diagram .sd-player,
.shoot-diagram .sd-sil {
  fill: var(--kr-ink);
}

.shoot-diagram .sd-player-body {
  stroke: var(--kr-ink);
  stroke-width: 3;
  stroke-linecap: round;
}

/* 奥の選手は薄く描いて、手前の選手との重なりを見せる */
.shoot-diagram .sd-player--far {
  fill: var(--kr-ink-dim);
  stroke: var(--kr-ink-dim);
}

.shoot-diagram .sd-frame {
  fill: var(--kr-accent);
  fill-opacity: .16;
  stroke: var(--kr-ink-dimmer);
  stroke-width: 1;
}

.shoot-diagram .sd-verdict {
  font-size: 13px;
}

.shoot-diagram .sd-verdict--bad {
  fill: var(--kr-ink-dim);
}

/* カード末尾の撮影ガイドへの導線（GA: data-ga-cta="upload_shoot_guide"） */
.upload-shoot__more {
  margin: 16px 0 0;
  text-align: right;
  font-size: 0.875rem;
}
.upload-shoot__more a {
  color: var(--kr-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}