/* =============================================================================
   GolfSocialPlatform — Phase 1 LP
   依存ゼロ / モバイルファースト / ライト・ダーク両対応（ADR-0007）
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --green-900:#062A1F;
  --green-800:#0B3D2E;
  --green-700:#12503C;
  --green-600:#1B6B50;
  --green-100:#DCEFE6;
  --lime-500:#B9E85C;
  --lime-400:#C9F275;
  --sun:#FFD46B;

  --bg:#F7F6F1;
  --bg-alt:#EFEDE5;
  --surface:#FFFFFF;
  --surface-2:#F3F2EC;
  --ink:#12160F;
  --ink-2:#3D453A;
  /* --ink-3 は .section-alt(#EFEDE5) の上でも AA(4.5:1) を満たす必要がある。
     小さい文字（.chip .sv-hint .loop-sub 等）に使われるため。#6A7365 では 4.2:1 で不足。 */
  --ink-3:#5B6457;
  --line:#DEDCD2;

  --brand:var(--green-800);
  --accent:var(--lime-500);
  --accent-ink:var(--green-900);
  --focus:#1B6B50;

  --hero-turf-1:#14523D;
  --hero-turf-2:#0B3D2E;
  --hero-turf-3:#0A3327;
  --hero-sun:#FFD46B;

  --radius-xs:6px;    /* バッジ・進捗バーなど小さいもの */
  --radius-sm:10px;   /* モック内部の行・チップ */
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(12,30,22,.06), 0 8px 24px rgba(12,30,22,.07);
  --shadow-lg:0 2px 6px rgba(12,30,22,.08), 0 20px 48px rgba(12,30,22,.12);

  --wrap:1120px;
  --wrap-narrow:680px;
  --pad:20px;

  /* モバイル UI モックの基準幅。セクションごとに px を書かない。
     個別指定が散ると、ページ全体で幅の刻みが揃わなくなる。 */
  --visual-sm:400px;   /* カード型のモック・写真 */
  --visual-md:440px;   /* 補足つきの写真 */
  --visual-lg:560px;   /* 中央に置く図（いまの利用は .tl のみ） */

  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0A0F0C;
    --bg-alt:#0E1512;
    --surface:#141C18;
    --surface-2:#18211D;
    --ink:#ECF2EC;
    --ink-2:#B9C4BB;
    --ink-3:#8A968C;
    --line:#26312B;

    --green-100:#1A2B23;
    --brand:#C9F275;
    --accent:var(--lime-500);
    --accent-ink:#08170F;
    --focus:#B9E85C;

    --hero-turf-1:#123F30;
    --hero-turf-2:#08221A;
    --hero-turf-3:#061A14;

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);
  }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* sticky ヘッダー（64px）の下にセクション見出しが潜らないようにする。
     これが無いと #waitlist へ飛んだときにラベルが隠れる。 */
  scroll-padding-top:76px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.85;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
/* 日本語の改行を文節単位にする（Chrome 119+ / Safari 17+）。
   未対応ブラウザでは無視され、従来どおり任意の位置で折り返す。
   これが無いと「正直すこし不安。」が「…正 / 直すこし不安。」のように
   語の途中で折り返され、読みづらくなる。 */
h1,h2,h3,h4,p,li,dt,dd,summary,figcaption,label{
  word-break:auto-phrase;
  line-break:strict;
}
h1,h2,h3{line-height:1.35;letter-spacing:.005em;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,6.2vw,3.4rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,4.2vw,2.3rem);font-weight:800}
h3{font-size:1.06rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
a{color:var(--green-600);text-underline-offset:3px}
@media (prefers-color-scheme: dark){a{color:var(--lime-400)}}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--radius-xs)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.br-sp{display:none}
@media (max-width:640px){.br-sp{display:inline}}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green-800);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:inherit;font-weight:700;font-size:.98rem;line-height:1.3;
  padding:14px 24px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .12s ease, box-shadow .18s ease, background-color .18s ease;
  min-height:48px;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--green-800);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--green-700)}
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)}
.btn-accent:hover{background:var(--lime-400)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-lg{padding:17px 34px;font-size:1.05rem;min-height:56px}
.btn-sm{padding:9px 18px;font-size:.88rem;min-height:44px}
.btn-block{width:100%}
.btn-note{display:block;font-size:.72rem;font-weight:600;opacity:.75;margin-top:2px}
/* ボタンのラベル。<wbr> を効かせるため、テキストを1つの flex item にまとめる。
   keep-all は、指定した <wbr> 以外の場所で日本語が切れるのを防ぐため。 */
.btn-label{word-break:keep-all}
.btn-lg .btn-note{margin-top:3px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.site-header.is-scrolled{border-bottom-color:var(--line)}

/* トップページだけ、スクロール前はヘッダーを Hero と同じ濃緑にして1つの面に見せる。
   スクロールすると通常の明るいヘッダーに戻る。
   （sticky ヘッダーは Hero の上に重なるのではなく上に積まれるため、
     透過にすると明るい body 背景が透けて白文字が読めなくなる） */
.page-home .site-header:not(.is-scrolled){
  background:#0F4A37;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.page-home .site-header:not(.is-scrolled) .brand{color:#fff}
.page-home .site-header:not(.is-scrolled) .brand-name{color:#fff}
.page-home .site-header:not(.is-scrolled) .brand-tentative{color:rgba(255,255,255,.6)}
.page-home .site-header:not(.is-scrolled) .header-cta{
  background:var(--lime-500);color:var(--green-900);
}
.page-home .site-header:not(.is-scrolled) .header-cta:hover{background:var(--lime-400)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
/* タップ領域を 44px 以上確保する（WCAG 2.5.8） */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--brand);
  min-height:44px;padding:4px 0}
.brand-mark{width:34px;height:34px;flex:0 0 auto}
.brand-name{font-weight:800;font-size:1.06rem;letter-spacing:-.01em;color:var(--ink)}
.brand-tentative{font-size:.7rem;font-weight:600;color:var(--ink-3);margin-left:1px}
.header-cta{flex:0 0 auto;white-space:nowrap}
@media (max-width:360px){.header-cta{display:none}}

/* ---------- Hero ----------
   Hero 全体を濃緑のブロックにする。
   以前は明るい背景の上に「芝の波」を重ねていたが、コンテンツの高さが
   変わると波がボタンや本文と衝突し、濃緑の上に濃緑のボタンが乗って
   読めなくなっていた。面ごと暗くすることで、その種の事故を構造的に無くす。 */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:56px 0 68px;
  background:linear-gradient(168deg, #0F4A37 0%, #0A3628 55%, #062A1F 100%);
  color:#fff;
}
/* 背景写真とスクリム。
   写真の明るさに関係なく文字が読めるように、スクリムの不透明度は固定値にしてある。
   写真を差し替えてもコントラストが落ちないのは、下地の濃緑（.hero の background）と
   このスクリムだけで AA を満たしているから。写真は「その上の質感」でしかない。 */
.hero-photo{position:absolute;inset:0;z-index:-3;display:block}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
/* モバイルでは縦は切られず、横だけが切られる（Hero 0.46〜0.60 : 写真 0.80）。
   3訴求とも人物が右寄りに写っているので、見える窓を右へ振らないと
   人物が端の細い帯にしか残らない。 */
@media (max-width:767px){ .hero-photo img{object-position:64% 62%} }
/* 不透明度 .80 前後は、写真の一番明るい部分（空）の上でも
   白文字が 7:1 以上になるところから決めた値。写真を差し替えても
   この係数のままなら AA を割らない。
   ⚠️ ただし均一に濃くしない。3訴求の Hero 写真はいずれも
   「上が空、下が人物」の構図で、下まで濃くすると人物が消える。
   文字が乗る上側は濃く、人物が写る下側は薄くする。
   下側に乗るのは CTA とバッジだけで、どちらも自前の背景を持つ。
   ⚠️ 薄くし始めるのは 66% から。素のテキスト（hero-lead）の下端は
   3訴求とも 57〜59% で、そこでの α は .80 以上を保つ。
   74% から薄くしたときは .73 まで落ち、.78 の下限を割った。 */
.hero-scrim{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(178deg,
    rgba(9,58,42,.86) 0%, rgba(8,48,36,.82) 46%,
    rgba(8,46,35,.80) 66%, rgba(7,42,31,.60) 82%,
    rgba(5,36,27,.34) 100%);
}
/* 下端の締め。.82 は濃すぎて、下側に写る人物ごと潰していた。
   ここに乗るのは CTA（不透明）とバッジ（自前の背景あり）だけなので、
   薄くしても可読性は落ちない。 */
.hero-bg{
  position:absolute;left:0;right:0;bottom:0;height:min(34%,220px);z-index:-1;
  background:linear-gradient(to bottom, rgba(4,32,24,0) 0%, rgba(4,32,24,.52) 100%);
}
.hero-inner{position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;
  color:var(--lime-400);background:rgba(255,255,255,.12);
  padding:7px 16px;border-radius:999px;margin:0 0 22px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.hero-title{color:#fff}
.hero .btn-primary{background:var(--lime-500);color:var(--green-900);box-shadow:0 6px 20px rgba(0,0,0,.22)}
.hero .btn-primary:hover{background:var(--lime-400)}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero-title{margin-bottom:22px;max-width:16em}
/* 訴求ごとの出し分けは CSS では行わない。
   build-dist.mjs が配信時に HTML を切り分け、その訴求のセクションだけを含む
   ファイルを作る（/competition /online /community）。
   CSS で隠す方式は、3訴求ぶんの DOM を全員に配ることになるためやめた。
   html[data-variant] は計測（どの訴求を見たか）にだけ使う。 */
/* 未実装・構想の機能を訴求する Variant では、必ずこのバッジを添える。
   完成しているように見せないため（docs/PRODUCT_DIRECTION.md §9）。 */
.soon{
  display:inline-block;margin-left:8px;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;color:var(--green-900);background:var(--lime-400);
  padding:2px 9px;border-radius:999px;vertical-align:middle;
}
/* H1 直下の「何のアプリか」を1文で言い切る行。3秒理解のための要素。 */
.hero-tagline{
  font-size:clamp(1.02rem,2.6vw,1.24rem);font-weight:700;color:#fff;
  max-width:30em;margin:0 0 18px;line-height:1.75;
}
.hero-area{
  display:inline-block;margin-top:8px;
  font-size:.84rem;font-weight:700;color:var(--lime-400);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  padding:5px 14px;border-radius:999px;
}
.hero-lead{font-size:clamp(.96rem,2.4vw,1.08rem);color:rgba(255,255,255,.82);max-width:32em;margin-bottom:32px}
.hero-lead strong{color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.hero-badges{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;
}
.hero-badges li{
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:6px 14px;border-radius:999px;
}
@media (min-width:900px){
  .hero{padding:88px 0 104px}
  /* 本文は左半分に収める。背景写真の右側にプレーヤーが写っているので、
     そこに文字を重ねない。 */
  .hero-inner{max-width:min(1120px,92vw)}
  .hero-inner > *{max-width:min(56%,620px)}
  /* 文字が乗る左側は濃く、人物が写る右側は薄くする。
     .80 は文字側の下限で、これ以上薄くすると白文字が AA を割る。
     右端は .58 だったが、新しい Hero 写真（夕方の /online、朝の /community）では
     人物が沈んでいたので .38 まで薄くした。
     1024px 以上で文字の右端は 52〜55%（3訴求とも実測）、
     .hero-inner > * が 56% で頭打ちなので、
     66% から薄くし始めれば文字側の濃さは変わらない。 */
  .hero-scrim{
    background:linear-gradient(96deg,
      rgba(8,50,37,.90) 0%, rgba(8,48,36,.85) 46%,
      rgba(7,44,33,.62) 66%, rgba(6,40,30,.38) 100%);
  }
}

/* ---------- Sections ----------
   広告流入を受けるページなので、セクションの上下余白は詰めている。
   ブランドとしての「間」は残しつつ、スクロールのテンポを優先した。 */
.section{padding:52px 0}
@media (min-width:900px){.section{padding:76px 0}}
.section-alt{background:var(--bg-alt)}
.section-label{
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-600);margin:0 0 12px;
}
@media (prefers-color-scheme: dark){.section-label{color:var(--lime-400)}}
.section-title{margin-bottom:18px;max-width:20em}
.section-lead{font-size:1.03rem;color:var(--ink-2);max-width:40em;margin-bottom:28px}
.sub-title{font-size:1.02rem;margin-bottom:12px}

/* ---------- Problem ---------- */
.problem-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:30px}
@media (min-width:620px){.problem-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.problem-grid{grid-template-columns:repeat(3,1fr)}}
/* 3枚構成では2列にすると1枚だけ孤立するので、620px から3列にする。 */
@media (min-width:620px){.problem-grid-3{grid-template-columns:repeat(3,1fr)}}
/* Round は「募集カード1枚＋説明」の2カラム。 */
@media (min-width:820px){.meetup-grid-round{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.steps-compact li{margin-bottom:7px}
.safety-grid-compact .safety-card p{font-size:.86rem}
/* フォームが何をする欄なのかを1行で置く。 */
.wl-formlead{font-size:.95rem;color:rgba(255,255,255,.92);margin:0 0 18px;line-height:1.8}
.wl-formlead strong{color:var(--lime-400)}
.problem-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow);
}
.problem-emoji{font-size:1.5rem;display:block;margin-bottom:8px;line-height:1}
.problem-card h3{margin-bottom:6px;font-size:1rem}
.problem-card p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.75}
.problem-punch{
  font-size:clamp(1.06rem,3vw,1.34rem);font-weight:700;line-height:1.75;
  text-align:center;margin:0;color:var(--ink);
}

/* ---------- Loop ---------- */
.loop{
  list-style:none;padding:0;margin:0;
  display:grid;gap:12px;grid-template-columns:1fr;counter-reset:none;
}
@media (min-width:620px){.loop{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.loop{grid-template-columns:repeat(4,1fr)}}
.loop-step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;position:relative;box-shadow:var(--shadow);
}
.loop-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--green-800);color:#fff;font-size:.82rem;font-weight:800;
  margin-bottom:10px;
}
@media (prefers-color-scheme: dark){.loop-num{background:var(--lime-500);color:var(--green-900)}}
.loop-text{display:block;font-weight:700;font-size:1rem;margin-bottom:3px}
.loop-sub{display:block;font-size:.85rem;color:var(--ink-3);line-height:1.6}
.loop-back{background:var(--green-100);border-color:transparent}
.loop-back .loop-num{background:transparent;color:var(--green-600);font-size:1.3rem;border:2px solid currentColor}
@media (prefers-color-scheme: dark){
  .loop-back{background:var(--surface-2)}
  .loop-back .loop-num{color:var(--lime-400)}
}

/* ---------- Feature (2-column) ---------- */
/* align-items は start。center にすると、片方のカラムが短いときに
   そちらだけが宙に浮き、上下に大きな空白ができる（PC で実際に起きていた）。 */
.feature{display:grid;gap:28px;grid-template-columns:1fr;align-items:start}
/* モバイルでは、説明より先に「実物」を見せる。
   テキストを1画面ぶん読ませてから画面を出すのは順序が逆になる。 */
.feature-visual{order:-1}
@media (min-width:920px){
  .feature{grid-template-columns:1fr 1fr;gap:60px}
  .feature-visual{order:0}
  .feature-reverse .feature-body{order:2}
  .feature-reverse .feature-visual{order:1}
  /* 2カラムの片方が極端に長いと、もう片方の下が数百px の空白になる。
     両方を sticky にしておくと、短いほうだけが自動的に貼り付く
     （長いほうは動く余地が無いので、指定しても何も起きない）。
     PC で sec-core の左が 656px ぶん空になっていたのを、これで埋める。 */
  .feature > .feature-body,
  .feature > .feature-visual{position:sticky;top:96px;align-self:start}
}
.feature-body .section-lead{margin-bottom:24px}
.check-list{list-style:none;padding:0;margin:0 0 22px}
.check-list li{
  position:relative;padding-left:30px;margin-bottom:11px;
  color:var(--ink-2);font-size:.97rem;line-height:1.75;
}
.check-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:16px;height:9px;border-left:2.5px solid var(--green-600);border-bottom:2.5px solid var(--green-600);
  transform:rotate(-45deg);
}
@media (prefers-color-scheme: dark){
  .check-list li::before{border-color:var(--lime-500)}
}

/* ---------- Callouts ---------- */
.callout{
  border-radius:var(--radius);padding:16px 18px;font-size:.93rem;line-height:1.75;
  margin:0 0 8px;
}
.callout-quiet{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.callout-accent{background:var(--green-100);border:1px solid transparent;color:var(--ink)}
@media (prefers-color-scheme: dark){.callout-accent{background:var(--surface-2);border-color:var(--line)}}

/* ---------- Mock visuals ---------- */
/* モックの下に注記を置くため縦並びにする。
   横並びのままだと .mock-note がモックの右隣に回り込んで重なる。 */
.feature-visual{display:flex;flex-direction:column;align-items:center}
/* 2カラムの右側は 510px あるのに、中身が 400px で止まって左右に55pxずつ
   何も無い帯が残っていた。それが4セクション続くと
   「広い画面に小さいカードが1枚ずつ置かれている」ように見える。 */
@media (min-width:920px){
  .feature-visual > .mock,
  .feature-visual > .meetup-card{max-width:100%}
}
.mock{
  width:100%;max-width:var(--visual-sm);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-lg);
}
.mock-feed{padding-bottom:14px}
.mock-profile,.mock-activity{padding:22px 20px}
.mock-bar{display:flex;gap:5px;margin-bottom:16px}
.mock-bar span{width:8px;height:8px;border-radius:50%;background:var(--line)}
.mock-post{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--line)}
.mock-post:first-of-type{border-top:none;padding-top:0}
/* アバターは <img> になった。object-fit:cover を付けないと
   生成画像の端の余白まで円の中に入り、顔が中心からずれる。 */
.mock-avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  object-fit:cover;object-position:center 32%;
  background:var(--green-700);
}
.mock-avatar-lg{width:52px;height:52px}
.mock-post-body{min-width:0;flex:1}
.mock-name{font-weight:700;font-size:.92rem;margin:0 0 3px}
.mock-meta{font-weight:500;font-size:.76rem;color:var(--ink-3);margin-left:5px}
.mock-text{font-size:.88rem;margin:0 0 9px;color:var(--ink-2);line-height:1.7}
.mock-photo{
  display:block;width:100%;height:104px;object-fit:cover;
  border-radius:var(--radius-sm);margin-bottom:9px;
  background:linear-gradient(150deg,var(--green-600),var(--green-800) 70%);
}
/* モックの下に添える文脈写真。モックと同じ幅に揃える。 */
.visual-photo{
  display:block;width:100%;max-width:var(--visual-sm);height:auto;
  border-radius:var(--radius);margin-top:20px;box-shadow:var(--shadow);
}
/* Golf Log では写真が主役なので、上の余白を持たせない。 */
.visual-photo-lead{margin-top:0;max-width:var(--visual-md)}
/* Practice は募集カード1枚だけを見せる。 */
.meetup-card-solo{width:100%;max-width:var(--visual-sm)}
/* 「これは実物ではない」と明記するための注記。
   モックを本物の画面と誤認させないために置いている。 */
.mock-note{
  font-size:.72rem;color:var(--ink-3);margin:12px 0 0;
  max-width:var(--visual-sm);line-height:1.7;
}
/* ⚠️ .mock-note より後ろに置くこと。詳細度が同じなので、前に置くと
   .mock-note の max-width:400px に打ち消される（実際に打ち消されていた）。
   公平性の注記は中央に置いた図の直後に来るので、図と同じ中央揃えにする。 */
.geo-fair{max-width:640px;margin-inline:auto;margin-bottom:34px;text-align:center}
.mock-actions{display:flex;gap:14px;font-size:.78rem;color:var(--ink-3);margin:0}
.mock-section-title{font-weight:800;font-size:.94rem;margin:0 0 14px}

.mock-profile-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.mock-attrs{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:0 0 16px}
.mock-attrs div{border-bottom:1px solid var(--line);padding-bottom:7px}
.mock-attrs dt{font-size:.72rem;color:var(--ink-3);margin-bottom:1px}
.mock-attrs dd{margin:0;font-size:.9rem;font-weight:700}
.mock-slider{display:flex;align-items:center;gap:10px;font-size:.74rem;color:var(--ink-3);margin-bottom:14px}
.mock-track{flex:1;height:6px;border-radius:3px;background:var(--line);position:relative}
.mock-track i{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--green-700)}
@media (prefers-color-scheme: dark){.mock-track i{background:var(--lime-500)}}
.mock-record{margin:0 0 10px;font-size:.85rem;color:var(--ink-2)}
/* Golf Graph（関係性）を LP 上で可視化する。Core Moat の半分がここでしか証明できない。 */
.mock-graph{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.mock-graph-chip{
  font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--green-100);color:var(--green-700);
}
@media (prefers-color-scheme: dark){.mock-graph-chip{background:var(--surface-2);color:var(--lime-400)}}
.mock-record strong{font-size:1.15rem;color:var(--ink)}

.act-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.act-row:first-of-type{border-top:none}
.act-row p{margin:0}
/* 顔は「誰か」、ドットは「いま何をしているか」。役割が違うので両方置く。 */
.act-face{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  object-fit:cover;object-position:center 32%;background:var(--green-700);
}
.act-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:.55em}
/* 順位表は6行並ぶので、34px の顔だとリストが顔だらけになって数字が読みにくい。
   誰かが分かればよいので、ここだけ小さくする。 */
.comp-rank .act-face{width:26px;height:26px}
.act-live{background:#2FBF71;box-shadow:0 0 0 4px rgba(47,191,113,.16)}
.act-practice{background:#4EA8DE}
.act-best{background:var(--sun)}
.act-plan{background:var(--ink-3)}
.act-name{font-weight:700;font-size:.9rem}
.act-desc{font-size:.83rem;color:var(--ink-2)}
.act-total{color:var(--ink-3)}

.mock-score .score-par{font-weight:600;font-size:.8rem;color:var(--ink-3);margin-left:6px}
.score-label{font-size:.76rem;color:var(--ink-3);margin:0 0 7px;font-weight:700}
.score-row{display:flex;gap:7px;margin-bottom:16px}
/* 装飾用のイメージなので button ではなく span。
   ボタンにするとタブ順に入り、押せないのにフォーカスできてしまう。 */
.score-btn{
  flex:1;min-height:52px;border-radius:var(--radius-sm);border:1.5px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-family:inherit;
  font-size:1.06rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.score-btn.is-on{background:var(--green-800);color:#fff;border-color:var(--green-800)}
@media (prefers-color-scheme: dark){
  .score-btn.is-on{background:var(--lime-500);color:var(--green-900);border-color:var(--lime-500)}
}
.score-offline{font-size:.76rem;color:var(--ink-3);margin:0;text-align:center}

/* ---------- Safety grid（「安心してつながる」セクション） ---------- */
.safety-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.safety-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.safety-grid{grid-template-columns:repeat(3,1fr)}}
.safety-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  border-top:3px solid var(--green-600);
  padding:20px;box-shadow:var(--shadow);
}
@media (prefers-color-scheme: dark){.safety-card{border-top-color:var(--lime-500)}}
.safety-card h3{margin-bottom:7px;font-size:1rem}
.safety-card p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.75}

.steps-note{font-size:.86rem;color:var(--ink-2);margin:14px 0 0;padding:12px 14px;
  background:var(--surface-2);border-radius:var(--radius-sm);line-height:1.7}

/* ---------- Safety box ---------- */
.safety-box{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--green-600);
  border-radius:var(--radius);padding:20px;margin-top:6px;
}
@media (prefers-color-scheme: dark){.safety-box{border-left-color:var(--lime-500)}}
.safety-title{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:.98rem}
.safety-title svg{width:21px;height:21px;flex:0 0 auto;color:var(--green-600)}
@media (prefers-color-scheme: dark){.safety-title svg{color:var(--lime-500)}}
.safety-list{list-style:none;padding:0;margin:0}
.safety-list li{
  position:relative;padding-left:18px;margin-bottom:9px;
  font-size:.9rem;color:var(--ink-2);line-height:1.72;
}
.safety-list li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--green-600)}
@media (prefers-color-scheme: dark){.safety-list li::before{background:var(--lime-500)}}
.safety-list li:last-child{margin-bottom:0}

/* ---------- Meetup cards ---------- */
.meetup-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:46px}
@media (min-width:760px){.meetup-grid{grid-template-columns:repeat(2,1fr)}}
.meetup-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
  overflow:hidden;
}
.meetup-people{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:14px 0 0;font-size:.79rem;color:var(--ink-3);line-height:1.7;
}
.meetup-people img{
  width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 32%;
  flex:0 0 auto;background:var(--green-700);
}
.meetup-people span{flex:1;min-width:12em}
/* カード上端いっぱいに写真を敷く。padding の外へ出すため負のマージンを使う。 */
.meetup-photo{
  display:block;width:calc(100% + 44px);height:150px;object-fit:cover;
  margin:-22px -22px 18px;
  /* ベースの img{max-width:100%} が calc(100% + 44px) を打ち消し、
     左だけ margin で食い込んで右に 44px の余白が残っていた。
     カード幅いっぱいに敷くには、この上限を外す必要がある。 */
  max-width:none;
}
.meetup-tag{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  background:var(--green-800);color:#fff;padding:4px 12px;border-radius:999px;margin:0 0 12px;
}
.meetup-tag-practice{background:#31688A}
.meetup-title{font-size:1.08rem;margin-bottom:14px}
.meetup-attrs{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:0 0 14px}
.meetup-attrs div{border-bottom:1px solid var(--line);padding-bottom:7px}
.meetup-attrs dt{font-size:.72rem;color:var(--ink-3)}
.meetup-attrs dd{margin:0;font-size:.92rem;font-weight:700}
.meetup-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.chip{
  font-size:.74rem;font-weight:700;padding:4px 11px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}
.chip-accent{background:var(--green-100);color:var(--green-700);border-color:transparent}
@media (prefers-color-scheme: dark){.chip-accent{background:var(--surface-2);color:var(--lime-400);border-color:var(--line)}}

.steps{margin:0;padding-left:1.4em}
.steps li{margin-bottom:8px;color:var(--ink-2);font-size:.97rem}
.steps li strong{color:var(--ink)}

/* ---------- Memo box ---------- */
.memo-box{margin-top:26px}
.memo-label{font-size:.76rem;font-weight:800;letter-spacing:.05em;color:var(--ink-3);margin:0 0 10px}
.memo-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px;
}
.memo-hole{font-weight:800;font-size:1.02rem;margin:0 0 8px}
.memo-hole span{font-weight:600;font-size:.8rem;color:var(--ink-3);margin-left:7px}
.memo-prev{font-size:.86rem;color:var(--ink-3);margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.memo-prev strong{color:var(--ink);font-size:1rem}
.memo-note{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.8}
.memo-desc{font-size:.93rem;color:var(--ink-2);margin:0}

/* ---------- Future cards ---------- */
.future-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:820px){.future-grid{grid-template-columns:repeat(3,1fr)}}
.future-card{
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
  padding:22px 20px;
}
.future-badge{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);
  padding:3px 11px;border-radius:999px;margin:0 0 11px;
}
.future-card h3{margin-bottom:8px}
.future-card p{font-size:.92rem;color:var(--ink-2);line-height:1.75;margin:0 0 9px}
.future-note{font-size:.78rem!important;color:var(--ink-3)!important;margin:0!important}

/* ---------- Waitlist ---------- */
.waitlist{
  background:linear-gradient(165deg,var(--green-800),var(--green-900));
  color:#fff;
}
.waitlist .section-title-light,
.waitlist .section-lead-light{color:#fff}
.waitlist .section-lead-light{color:rgba(255,255,255,.86)}
.section-label-light{color:var(--lime-400)!important}
.wl-form{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
  padding:26px 22px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
@media (min-width:640px){.wl-form{padding:32px 30px}}
.wl-field{margin-bottom:16px}
.wl-field label{display:block;font-size:.86rem;font-weight:700;margin-bottom:7px;color:#fff}
.req,.opt{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.04em;
  padding:2px 8px;border-radius:999px;margin-left:7px;vertical-align:middle;
}
.req{background:var(--lime-500);color:var(--green-900)}
.opt{background:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}
.wl-field input{
  width:100%;font-family:inherit;font-size:1rem;
  padding:14px 16px;min-height:52px;
  border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.96);color:var(--green-900);
}
.wl-field select{
  width:100%;font-family:inherit;font-size:1rem;
  padding:14px 16px;min-height:52px;
  border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.96);color:var(--green-900);
}
/* 右端の矢印だけ OS 標準のままだと、整えた入力欄の中でここだけ浮く。
   ページ内の他のシェブロンと形を揃える。 */
.wl-field select{
  appearance:none;-webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230D4521' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}
.wl-field select:focus-visible{outline:3px solid var(--lime-500);outline-offset:2px}
.wl-hint{font-size:.79rem;color:rgba(255,255,255,.72);margin:8px 0 0;line-height:1.7}
.wl-hint strong{color:var(--lime-400)}
.wl-field input::placeholder{color:#8d9a90}
.wl-field input:focus-visible{outline:3px solid var(--lime-500);outline-offset:2px}
.wl-field input[aria-invalid="true"]{border-color:#FF9B8A;background:#FFF3F0}
.wl-error{
  color:#FFD9D2;font-size:.83rem;font-weight:700;margin:7px 0 0;
}
/* 同意欄は 1 行だと操作領域が 26px 程度になる。ラベル側に最小高を持たせて
   44px 以上を確保する（WCAG 2.5.5 / AAA）。 */
.wl-consent{display:flex;align-items:flex-start;gap:10px;margin:20px 0 6px}
/* 濃緑のパネルの上に素の input を置くと、枠も角丸も無い白い四角になり、
   「押せるもの」に見えない。登録の直前で効くので、ここは作る。 */
.wl-consent input{
  appearance:none;-webkit-appearance:none;
  width:24px;height:24px;flex:0 0 auto;margin-top:11px;
  border:2px solid rgba(255,255,255,.62);border-radius:var(--radius-xs);
  background:rgba(255,255,255,.12);cursor:pointer;
  display:grid;place-content:center;
  transition:background-color .14s ease, border-color .14s ease;
}
.wl-consent input::before{
  content:"";width:13px;height:13px;transform:scale(0);
  transition:transform .12s ease;background:var(--green-900);
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.wl-consent input:checked{background:var(--lime-500);border-color:var(--lime-500)}
.wl-consent input:checked::before{transform:scale(1)}
.wl-consent input:focus-visible{outline:3px solid var(--lime-500);outline-offset:3px}
.wl-consent label{
  font-size:.87rem;line-height:1.7;color:rgba(255,255,255,.92);cursor:pointer;
  /* flex にすると本文中の「と」の前後に余分な間隔が入るため、padding で高さを稼ぐ */
  display:block;padding:11px 0;
}
.wl-consent a{color:var(--lime-400);font-weight:700}
.wl-consent input[aria-invalid="true"]{outline:2px solid #FF9B8A;outline-offset:2px;border-radius:var(--radius-xs)}
/* honeypot: 人間には見せず、スクリーンリーダーからも隠す。display:none だと
   一部の bot が「隠しフィールド」と判定して回避するため、画面外へ飛ばす。 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#wl-submit{margin-top:20px}
.wl-note{font-size:.79rem;color:rgba(255,255,255,.7);margin:16px 0 0;text-align:center;line-height:1.7}
/* .wl-status は濃緑の .waitlist セクション専用の配色。
   明るい背景のページ（thanks.html 等）では下の .doc-status を使うこと。 */
.wl-status{
  margin:16px 0 0;padding:13px 16px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:700;
  background:rgba(255,255,255,.12);color:#fff;text-align:center;
}
.wl-status.is-error{background:rgba(255,120,100,.2);color:#FFD9D2}
.wl-status.is-ok{background:rgba(185,232,92,.2);color:var(--lime-400)}

/* ページ背景に依存しないステータス表示（thanks.html 用）。
   .wl-status を明るい背景で使うと白背景に白系文字となり、
   エラーメッセージが完全に読めなくなる。 */
.doc-status{
  margin:16px 0 0;padding:13px 16px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:700;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line);text-align:center;
}
.doc-status.is-error{background:#FDECEA;border-color:#E8A79C;color:#8A2A1B}
.doc-status.is-ok{background:var(--green-100);border-color:transparent;color:var(--green-700)}
@media (prefers-color-scheme: dark){
  .doc-status.is-error{background:#3A1E19;border-color:#6B3128;color:#FFC9BF}
  .doc-status.is-ok{background:var(--surface-2);color:var(--lime-400)}
}

/* ---------- FAQ ---------- */
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;
  font-weight:700;font-size:.98rem;position:relative;line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.faq-body{padding:0 20px 18px;color:var(--ink-2);font-size:.93rem;line-height:1.8}
.faq-body p:last-child,.faq-body ul:last-child{margin-bottom:0}
.faq-body ul{padding-left:1.25em}
.faq-body li{margin-bottom:6px}

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-900);color:#fff;padding:76px 0;text-align:center;
}
.cta-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Hero と同じ理由で不透明度は固定。写真を差し替えてもコントラストが変わらない。 */
.cta-scrim{position:absolute;inset:0;z-index:-1;background:rgba(6,36,27,.80)}
.final-cta h2{margin-bottom:10px;color:#fff}
.final-cta p{color:rgba(255,255,255,.86);margin-bottom:26px}

/* ---------- Difference（利用順序の違い） ---------- */
.diff{display:grid;gap:20px}
@media (min-width:820px){.diff{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:stretch}}
.diff-col{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;
}
/* 幅は 40:60 のまま。左右の主従は、比率ではなく質感で示す。
   これまで側はページ地に沈めて破線にし、影を落とさない。
   ゴルモア側だけ影を強め、前に出ているように見せる。 */
.diff-old{background:var(--bg-alt);border-style:dashed;box-shadow:none}
.diff-new{border-color:var(--green-600);box-shadow:var(--shadow-lg)}
.diff-label{font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--ink-3);margin:0 0 14px}
.diff-label-on{color:var(--green-600)}
@media (prefers-color-scheme: dark){.diff-label-on{color:var(--lime-400)}}
/* 手順は「→」でつなぐ。矢印は装飾なので ::after で出し、読み上げには乗せない。 */
.diff-flow{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
.diff-flow li{
  font-size:.92rem;font-weight:700;color:var(--ink-2);
  background:var(--bg-alt);border-radius:999px;padding:7px 14px;
}
/* 矢印は項目の「後ろ」に付ける。前に付けると、折り返した2行目以降だけが
   矢印で始まり、1行目だけ左へ飛び出して箇条書きに見える。1440px の
   Before/After で3訴求とも起きていた。後ろに付ければ左端が揃い、
   行末の矢印が「次へ続く」として読める。 */
.diff-flow li:not(:last-child)::after{content:"→";color:var(--ink-3);font-weight:700;margin-left:8px}
.diff-flow-on li{background:var(--green-50,#EAF5EC);color:var(--green-800);border:1px solid var(--green-200,#CBE5D2)}
.diff-note{font-size:.86rem;color:var(--ink-3);line-height:1.8;margin:16px 0 0}

/* ---------- Score（Golf Log の補助） ---------- */
.score-inline{
  margin-top:22px;padding:18px 20px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.score-inline-title{font-size:.95rem;font-weight:700;margin:0 0 12px}
.mock-score-mini{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.score-mini-label{font-size:.76rem;font-weight:700;color:var(--ink-3);margin-right:2px}
.score-mini-label + .score-mini-label{margin-left:8px}
.score-inline-note{font-size:.79rem;color:var(--ink-3);line-height:1.75;margin:12px 0 0}

/* ---------- App Screens ---------- */
.screens-hero{margin:0 0 26px}
.screens-hero img{display:block;width:100%;height:auto}
/* ---- モバイルは3台を1台ずつ切り出す（719px 以下） --------------------------
   app-mockup-trio.webp は3台が1枚に写っている。390px 幅では画像全体が
   約350pxまで縮み、1台あたり約110px。順位表の名前もスコアも読めない。
   同じ画像を3等分の窓で切り出し、横送りで1台ずつ見せる。
   <img> を3枚足すより、背景で使い回す方が転送量が増えない。 */
.screens-trio{display:none}
@media (max-width:719px){
  .screens-hero > img{display:none}
  .screens-trio{display:block}
  .screens-trio-track{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior:contain;
    scrollbar-width:none;
  }
  .screens-trio-track::-webkit-scrollbar{height:0}
  /* 中身が読める下限が 280px。上限を付けないと1台で画面が埋まり、
     横に送れることが見えなくなる。 */
  .screens-trio-cell{
    flex:0 0 auto;
    width:min(72vw,320px);min-width:280px;
    aspect-ratio:433 / 912;
    scroll-snap-align:center;
    background-image:url("../img/screens/app-mockup-trio.webp");
    background-repeat:no-repeat;background-size:300% auto;
  }
  .screens-trio-cell:nth-child(1){background-position:0% 50%}
  .screens-trio-cell:nth-child(2){background-position:50% 50%}
  .screens-trio-cell:nth-child(3){background-position:100% 50%}
}
.screens-legend{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media (min-width:820px){.screens-legend{grid-template-columns:repeat(3,1fr);gap:24px}}
.screens-legend li{font-size:.9rem;color:var(--ink-2);line-height:1.8}
.screens-legend span{
  display:block;font-weight:800;color:var(--ink);font-size:.95rem;margin-bottom:3px;
}
.screens-note{max-width:none;margin-top:22px}

/* ---------- Emotional CTA ---------- */
.emo-cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-900);color:#fff;padding:88px 0;text-align:center;
}
.emo-cta h2{margin-bottom:10px;color:#fff}
.emo-cta p{color:rgba(255,255,255,.86);margin:0;font-size:1.02rem}

/* ---------- 写真バンド ---------- */
/* セクションの下端いっぱいに敷く帯。.section の padding の外へ出す。 */
.band{margin:44px 0 -52px;padding:0}
@media (min-width:900px){.band{margin:56px 0 -76px}}
.band img{display:block;width:100%;height:clamp(140px,20vw,240px);object-fit:cover}
/* 人が写っている帯は、中央で切ると顔が落ちて「首から下」だけが並ぶ。
   元画像が全身の構図なので、中央＝腰の高さになる。上寄りで切る。 */
.band-people img{object-position:50% 26%}
.screens-item figcaption{
  font-size:.9rem;color:var(--ink-2);line-height:1.8;margin-top:14px;
}
.screens-item figcaption strong{display:block;color:var(--ink);font-size:.98rem;margin-bottom:4px}
.screens-note{max-width:none;margin-top:26px}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:rgba(255,255,255,.8);padding:44px 0 92px}
@media (min-width:820px){.site-footer{padding-bottom:44px}}
.footer-inner{
  display:flex;flex-direction:column;gap:22px;
  padding-bottom:24px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.14);
}
@media (min-width:700px){.footer-inner{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-tentative{color:rgba(255,255,255,.55)}
/* 欧文ロゴはカタカナの下に小さく併記する。主役はあくまでカタカナ。 */
.footer-wordmark{display:block;width:118px;height:auto;margin:8px 0 0;opacity:.75}
.footer-tagline{font-size:.85rem;color:rgba(255,255,255,.62);margin:10px 0 0}
.footer-operator{font-size:.78rem;color:rgba(255,255,255,.68);margin:10px 0 0;line-height:1.7}
.footer-operator a{color:rgba(255,255,255,.8)}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px 14px}
.footer-nav a{color:rgba(255,255,255,.85);font-size:.87rem;text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.footer-nav a:hover{text-decoration:underline}
.footer-note{font-size:.76rem;color:rgba(255,255,255,.68);line-height:1.75;margin:0 0 10px}
.footer-copy{font-size:.76rem;color:rgba(255,255,255,.62);margin:0}

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  /* transform だけで画面外に出すと、見えないままフォーカス可能なタブストップが残る
     （キーボード操作でフォーカスリングがどこにも見えなくなる）。visibility も切る。 */
  transform:translateY(110%);visibility:hidden;
  transition:transform .26s ease, visibility 0s linear .26s;
}
.sticky-cta.is-visible{
  transform:translateY(0);visibility:visible;
  transition:transform .26s ease, visibility 0s linear 0s;
}
@media (min-width:820px){.sticky-cta{display:none!important}}

/* ---------- Reveal animation ---------- */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
  /* 横に並ぶものは順に現れる。--reveal-i は main.js が並び順から入れる。 */
  transition-delay:calc(var(--reveal-i, 0) * 80ms);
}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ---------- Legal / thanks pages ---------- */
/* padding のショートハンドを使うと、.wrap の padding-inline:var(--pad) まで
   0 で上書きしてしまう。法務3ページの本文が画面の端に貼り付いていた。
   縦だけを指定して、左右は .wrap に任せる。 */
.doc{padding-block:44px 72px}
.doc h1{font-size:clamp(1.5rem,4.5vw,2.1rem);margin-bottom:8px}
.doc .doc-meta{font-size:.83rem;color:var(--ink-3);margin-bottom:32px}
.doc h2{font-size:1.14rem;margin:34px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.doc h2:first-of-type{border-top:none;padding-top:0}
.doc h3{font-size:1rem;margin:20px 0 8px}
.doc p,.doc li{font-size:.94rem;color:var(--ink-2);line-height:1.9}
/* 文節単位の折り返し（auto-phrase）は短い行のためのもの。規約のような長文だと、
   区切れない文節がコンテナより長くなったときにそのまま溢れる。
   実際に /privacy の 375px で 文書 382px / 画面 375px になった。
   overflow-wrap では止まらない（auto-phrase が優先される）ので、
   長文の本文だけ通常の折り返しに戻す。見出しは auto-phrase のまま。 */
.doc p,.doc li,.doc dd,.doc td{word-break:normal}
/* 表の見出しは「事業者名」「運営責任者」のような短いラベルなので、
   normal にすると「事業／者名」と語中で折れて読みにくい。
   keep-all で語のまま保つ。列が広がるぶんは .table-scroll が横に送る。 */
.doc th{word-break:keep-all}
/* body{overflow-x:hidden} により、幅の広い表が横スクロールできず切れてしまうのを防ぐ */
.doc .table-scroll{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
/* min-width は「ビューポートを超えない範囲で」効かせる。
   固定 420px にすると狭い端末で常に横スクロールが発生してしまう。 */
.doc table{width:100%;min-width:min(420px,100%);border-collapse:collapse;margin:0 0 18px;font-size:.88rem}
.doc .table-scroll table{margin:0}
.doc th,.doc td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--surface-2);font-weight:700}
/* 表の中の窓口リンクは、セルに単独で置いてあるので「文中のリンク」の
   例外（WCAG 2.5.8）に当たらない。行の高さのままだと 20px しかなく、
   AA の 24x24 を満たさない。法定の窓口で押しにくいのは困るので、
   セルの中で縦に伸ばす。 */
.doc td > a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:24px}
.doc-back{display:inline-flex;align-items:center;min-height:44px;margin-top:26px;font-weight:700;font-size:.9rem;padding:11px 0}

.notice{
  border-radius:var(--radius);padding:16px 18px;margin:0 0 26px;
  font-size:.9rem;line-height:1.75;
}
.notice-warn{background:#FFF4E0;border:1px solid #F0D9A8;color:#6B4E12}
/* 「まだ作っていません」の告知に警告色を使うと、正直さではなく不具合の表示に見える。
   注記として読ませたいものはこちら。 */
.notice-quiet{
  background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--green-600);color:var(--ink-2);
}
@media (prefers-color-scheme: dark){.notice-warn{background:#2A2312;border-color:#4A3D1C;color:#F0D9A8}}
.notice strong{font-weight:800}

/* ---------- Thanks page ---------- */
.thanks-hero{text-align:center;padding-block:52px 34px}
.thanks-check{
  width:66px;height:66px;border-radius:50%;margin:0 auto 20px;
  background:var(--green-100);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;
}
@media (prefers-color-scheme: dark){.thanks-check{background:var(--surface-2);color:var(--lime-500)}}
.thanks-check svg{width:32px;height:32px}
.survey{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 22px;box-shadow:var(--shadow);margin-bottom:28px;
}
@media (min-width:640px){.survey{padding:32px 30px}}
.sv-q{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
/* fieldset 自身が .sv-q。子孫セレクタ（.sv-q fieldset）だと1つもマッチせず、
   ブラウザ既定の groove 枠とパディングが全設問に残ってしまう。 */
fieldset.sv-q{border:none;padding:0 0 22px}
.sv-q.is-last{border-bottom:none;margin-bottom:14px;padding-bottom:0}
.sv-q legend,.sv-q > label{
  display:block;font-weight:700;font-size:.96rem;margin-bottom:12px;padding:0;color:var(--ink);
}
.sv-hint{font-size:.8rem;color:var(--ink-3);font-weight:500;margin:-8px 0 12px}
.sv-options{display:flex;flex-wrap:wrap;gap:8px}
.sv-opt{position:relative}
.sv-opt input{position:absolute;opacity:0;width:0;height:0}
.sv-opt span{
  display:flex;align-items:center;
  padding:10px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--surface-2);
  font-size:.88rem;font-weight:600;cursor:pointer;min-height:44px;
  transition:background-color .15s ease,border-color .15s ease;
}
.sv-opt input:checked + span{
  background:var(--green-800);color:#fff;border-color:var(--green-800);font-weight:700;
}
@media (prefers-color-scheme: dark){
  .sv-opt input:checked + span{background:var(--lime-500);color:var(--green-900);border-color:var(--lime-500)}
}
.sv-opt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.sv-q textarea,.sv-q select{
  width:100%;font-family:inherit;font-size:1rem;padding:13px 15px;
  border-radius:var(--radius-sm);border:1.5px solid var(--line);
  background:var(--surface-2);color:var(--ink);min-height:48px;
}
.sv-q textarea{min-height:110px;line-height:1.75;resize:vertical}
/* 事前登録フォームの select（.wl-field select）は矢印を自前で描いている。
   ここだけ OS 標準の矢印のままだと、同じアンケートの中で形が食い違う。
   同じシェブロンに揃える。暗い配色では線の色を反転させる。 */
.sv-q select{
  appearance:none;-webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230D4521' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}
@media (prefers-color-scheme: dark){
  .sv-q select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C6F04A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")}
}
/* /thanks の CTA まわり。.thanks-hero を2つ並べているので、
   2枚目は上の余白を詰める（1枚目が padding-block 34px で閉じている）。 */
.thanks-actions{padding-block:0 56px}

/* ⚠️ CTA と補足文をまとめる箱。トークンが無いとき main.js がこの箱ごと隠す。
   別々に置くと「ボタンは消えたのに、そのボタンの注記だけ残る」状態になる。 */
.survey-cta-block{margin:0 0 26px}
.thanks-cta{margin:0}

/* 補足文をボタンの**外**に単独で置いたときの見え方。
   .btn-note は本来ボタン内の副ラベル用（.72rem / opacity:.75）で、
   単独で置くと小さすぎて読めない。この文脈でだけ格上げする。
   ⚠️ .btn の中の .btn-note には効かせないこと。p 要素に限定しているのはそのため。 */
p.btn-note{font-size:.82rem;font-weight:600;opacity:1;color:var(--ink-3);margin:10px 0 0}

.sv-skip{text-align:center;margin:18px 0 0}
/* 段落に単独で置いた離脱用リンク。文中のリンクではないので
   WCAG 2.5.8 の例外に当たらない。行の高さのままだと 20px しかない。 */
.sv-skip a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:.87rem;color:var(--ink-3)}

.share-box{
  margin:34px 0 0;padding:22px 20px;text-align:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
}
.share-lead{font-size:.93rem;font-weight:700;margin:0 0 14px;color:var(--ink)}
.share-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.share-note{font-size:.75rem;color:var(--ink-3);margin:14px 0 0}

/* ---------- 公式SNS（Secondary CTA） ----------
   ⚠️ 各社のブランドカラーを使わない。単色（currentColor）で統一する。
      4色を並べると、緑1色の Primary CTA より確実に目立ってしまう。
   ⚠️ .btn を使わない。ボタンの形にすると事前登録ボタンと同じ強さに見える。
   ⚠️ 大きくしない。アイコン 20px / 文字 .84rem までに留める。 */
.social-links{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
/* スマホは 2×2。横に4つ並べると1つあたりが狭すぎてタップしづらい。 */
@media (min-width:560px){
  .social-links{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.social-links a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink-2);
  font-size:.84rem;font-weight:700;text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.social-links a:hover{border-color:var(--ink-3);color:var(--ink)}
.social-links a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* ⚠️ .ico は stroke 前提（線のアイコン）。SNS のマークは塗りなので別に持つ。 */
.social-ico{width:20px;height:20px;flex:0 0 auto;fill:currentColor;stroke:none}
.social-name{white-space:nowrap}

/* 登録完了後（/thanks）。SNS を最も強く出す場所だが、
   アンケート CTA の下に置くことで順序としては Secondary を保つ。 */
.social-follow{
  margin:30px 0 0;padding:22px 20px;text-align:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
}
.social-follow-title{font-size:1rem;font-weight:700;margin:0 0 6px;color:var(--ink)}
.social-follow-lead{font-size:.88rem;color:var(--ink-2);margin:0 0 16px;line-height:1.75}

/* フッター。濃緑の上なので配色を反転させる。ここが一番小さい。 */
.footer-social{margin:0}
.footer-social-title{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.55);margin:0 0 8px;
}
.site-footer .social-links{grid-template-columns:repeat(4,auto);justify-content:start;gap:8px}
.site-footer .social-links a{
  min-height:44px;padding:0 10px;gap:7px;
  background:transparent;border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85);
  font-size:.8rem;
}
.site-footer .social-links a:hover{border-color:#fff;color:#fff}
.site-footer .social-ico{width:17px;height:17px}
/* 360px 前後だと、フッターで4つ横並びにするとサービス名が溢れる。
   その幅ではアイコンだけにする（aria-label があるので意味は失われない）。 */
@media (max-width:400px){
  .site-footer .social-name{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .site-footer .social-links a{padding:0 12px}
}

/* ---------- コンペ（D-008 / D-009 で MVP の中心になった） ----------
   新規画像は使わず、既存の .mock-* と同じ作りで構成する。 */
.mock-comp{padding:20px}
.comp-live{
  font-size:.72rem;font-weight:800;color:var(--green-800);
  background:var(--green-100);border-radius:999px;padding:3px 10px;margin-left:8px;
}
@media (prefers-color-scheme: dark){.comp-live{color:var(--lime-400)}}
.comp-rank{list-style:none;padding:0;margin:0 0 18px}
.comp-rank li{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;border-top:1px solid var(--line);border-radius:var(--radius-sm);
}
.comp-rank li:first-child{border-top:none}
/* 自分の行だけ色を変える。順位表は「自分がどこにいるか」を見るためのもの。 */
.comp-rank li.is-me{background:var(--green-100);border-top-color:transparent}
@media (prefers-color-scheme: dark){.comp-rank li.is-me{background:#17332A}}
.comp-no{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  background:var(--green-800);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;
}
.comp-name{flex:1;font-weight:700;font-size:.9rem;min-width:0}
.comp-score{font-weight:800;font-size:.95rem;color:var(--green-600)}
@media (prefers-color-scheme: dark){.comp-score{color:var(--lime-400)}}
.comp-sub{margin-top:4px}
.comp-groups{display:grid;gap:7px}
.comp-groups > div{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:8px 12px;font-size:.82rem;
}
.comp-g{font-weight:800;min-width:2.6em}
.comp-h{color:var(--ink-3)}
.comp-p{margin-left:auto;font-weight:800;color:var(--green-600)}
@media (prefers-color-scheme: dark){.comp-p{color:var(--lime-400)}}

/* ---------- ライブ体験（D-010） ----------
   ⚠️ CSS による暫定表現。実画面のモック（LV-1 / LV-2 / LV-3）が入り次第
   差し替える前提。docs/lp/ASSET_REQUIREMENTS.md を参照。 */
.live-feed{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:7px}
.live-feed li{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:9px 12px;
  font-size:.84rem;line-height:1.6;
}
.live-ico{flex:0 0 auto;font-size:.95rem;line-height:1.5}
/* リアクションは「書かない人も参加できる」ことの表現。数が見えることが要件。 */
.live-react{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.live-chip{
  font-size:.8rem;font-weight:700;
  background:var(--green-100);color:var(--green-800);
  border-radius:999px;padding:4px 11px;
}
@media (prefers-color-scheme: dark){.live-chip{color:var(--lime-400)}}
.live-chip.is-add{background:transparent;border:1px dashed var(--line);color:var(--ink-3)}
/* 組カードの「◯位」が個人順位と誤読されないよう、見出しに補足を添える。 */
.comp-note{font-size:.7rem;font-weight:600;color:var(--ink-3);margin-left:8px}

/* スコア入力の任意メモ欄。
   「打数とパット数だけ」の主張を壊さないよう、数字ボタンより弱く見せる。 */
.score-memo{
  margin-top:12px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.score-memo-label{
  display:flex;align-items:center;gap:7px;
  font-size:.76rem;font-weight:700;color:var(--ink-2);margin:0 0 5px;
}
.score-memo-opt{
  font-size:.68rem;font-weight:800;color:var(--ink-3);
  background:var(--bg-alt);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;
}
.score-memo-input{
  font-size:.84rem;color:var(--ink-3);margin:0;line-height:1.6;
}

/* =============================================================================
 * インライン style の置き換え
 *
 * CSP を script-src だけ 'unsafe-inline'、style-src は 'self' で運用している。
 * HTML に style="..." を書くとブラウザが弾いて、その部分だけ崩れる。
 * Staging で実際に4ページで違反が出ていたので、ここへ移した。
 * 新しく style 属性を足さないこと。
 * ---------------------------------------------------------------------------*/

/* ゴルファータイプの目盛り。エンジョイ⇔競技の位置（架空データ） */
.mock-track > i { left: 38%; }

/* 注意書きの中の箇条書き */
.notice ul { margin: 10px 0 0; padding-left: 1.3em; }

/* thanks.html のアンケート */
.survey-section { padding-bottom: 72px; }
.survey-title   { font-size: 1.3rem; margin-bottom: 10px; }
.survey-lead    { font-size: .94rem; color: var(--ink-2); margin-bottom: 26px; }

/* 404 ページの戻るボタン */
.err-actions { margin-top: 28px; }

/* =============================================================================
 * 3訴求の再設計で追加したセクション
 * docs/lp/VARIANT_DESIGN.md
 * ---------------------------------------------------------------------------*/

/* ---- A / コンペが4人ずつに分かれる図 ------------------------------------- */
.split{
  max-width:760px;margin:0 auto 34px;padding:22px 18px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);text-align:center;
}
.split-top{
  display:inline-block;padding:8px 20px;border-radius:999px;
  background:var(--green-800);color:#fff;font-weight:700;font-size:.98rem;
}
.split-arrow{color:var(--ink-3);margin:8px 0 10px;font-size:.85rem}
/* 5組を横並びに。320px でも折り返して収まるよう auto-fit にする。 */
.split-groups{
  list-style:none;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
}
.split-groups li{
  padding:12px 6px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
  font-weight:700;font-size:.95rem;line-height:1.35;
}
.split-groups li span{display:block;font-weight:400;font-size:.82rem;color:var(--ink-3);margin-top:2px}
.split-note{margin-top:14px;font-size:.9rem;color:var(--ink-2)}

/* ---- 時系列（その日の18ホール / その日の全国） --------------------------- */
.tl{list-style:none;margin:28px 0 18px;padding:0}
.tl li{
  position:relative;padding:0 0 22px 22px;
  border-left:2px solid var(--line);
}
.tl li:last-child{border-left-color:transparent;padding-bottom:4px}
.tl li::before{
  content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--green-600);border:2px solid var(--bg);
}
.tl-when{
  font-weight:700;font-size:.86rem;color:var(--green-700);
  letter-spacing:.04em;margin-bottom:4px;
}
.tl-what{font-size:1rem;line-height:1.75}
.tl-quiet{color:var(--ink-3);font-size:.93rem}



/* ---- 共通 / 3つの「つながる」 -------------------------------------------- */
/* list-style は消したが padding を戻していなかったため、ブラウザ標準の
   インデント（約21px）が残り、カードの左端だけ見出しより内側にずれていた。
   右端は揃っているので、面全体が右へ寄って見える。 */
.conn{list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:1fr;margin-top:28px}
@media (min-width:900px){ .conn{grid-template-columns:repeat(3,1fr)} }
.conn-item{
  position:relative;
  padding:24px 22px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}
/* 「A ─ B」の分断を、線1本で表す */
.conn-split{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-weight:700;font-size:.9rem;color:var(--ink-2);
}
.conn-split span{
  padding:6px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
}
.conn-split i{flex:1;height:2px;background:var(--green-600);border-radius:2px}
.conn-item h3{font-size:1.14rem;margin-bottom:4px}
.conn-name{
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-700);margin-bottom:10px;
}
.conn-text{font-size:.95rem;line-height:1.8;color:var(--ink-2)}

/* ---- 共通 / 循環 ---------------------------------------------------------- */
/* 5段の循環なので列数は固定する。auto-fit にすると4+1に割れて、
   図ではなく「折り返したリスト」に見える（PC で実際にそうなっていた）。 */
.cycle{
  list-style:none;padding:0;display:grid;gap:10px;margin:28px 0 16px;
  grid-template-columns:1fr;
}
@media (min-width:600px){ .cycle{grid-template-columns:repeat(2,1fr)} }
/* 1fr は「最小幅は中身なり」なので、文字数の多い枠が他を押して列が不揃いになる。
   minmax(0,1fr) で 5 等分に固定する。 */
@media (min-width:900px){ .cycle{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} }
/* 語の途中で折り返させない。auto-phrase を当てていても、
   使える幅と文字幅が2px差まで詰まると「盛り／上がる」と割れた。
   keep-all で語中の改行を禁じ、折り返してよい位置は HTML 側の <wbr> で示す。
   幅の微調整で逃げると、別の幅でまた割れる。 */
.cycle li{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
  font-weight:700;font-size:.97rem;
;word-break:keep-all}
.cycle-no{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--green-800);color:#fff;font-size:.82rem;
}
/* 最後の項目から1へ戻ることを、文字で明示する（矢印だけでは伝わらない） */
.cycle li:last-child{background:var(--green-100);border-color:var(--green-100)}
.cycle-note{font-size:.95rem;line-height:1.9;color:var(--ink-2)}

/* ---- 共通 / Brand Statement ---------------------------------------------- */
/* .emo-cta p の rgba(255,255,255,.86) に opacity を重ねると
   実効コントラストが下がる。色を直接指定する。 */
.cta-pre{
  font-size:.98rem;line-height:1.9;margin-bottom:14px;
  color:rgba(255,255,255,.92);
}

/* ---- 追加セクションのダークモード ----------------------------------------
   --green-700 / --green-900 は暗い背景の上ではほとんど読めない。
   .section-label と同じく、明るい側の緑に差し替える。 */
@media (prefers-color-scheme: dark){
  .tl-when,
  .conn-name{ color:var(--lime-400) }
  /* --green-100 は暗色（#1A2B23）に変わるため、その上に --green-900 を置くと読めない */
  .geo-out{ color:var(--ink) }
  .split-top,
  .geo-hub{ background:var(--green-700); color:#fff }
}

/* =============================================================================
 * B / 4か所で、ひとつの大会
 *
 * 「4つの箱 → ▼ → GOLMORE → ▼ → ランキング」というファネルも、
 * 「北 → 4地点 → 南」の軸も、どちらも説明図にしかならなかった。
 * 見た人には「各地のデータを集計します」としか読めない。この訴求が
 * いちばん避けたい「スコア比較サービス」の絵そのものだった。
 *
 * 効いたのは配置ではなく人物。上段に出す4人を、下の .geo-join（順位表）に
 * 並ぶ4人と同じにしてある。同じ顔が上下に出るので、
 * 「集計しています」ではなく「この4人が同じ大会にいます」と読める。
 *
 * 線は増やさない。ノード1つずつから線を引くと配線図になる。
 * 接続は .geo-hub の擬似要素2本（上と下）だけで表す。
 *
 * ⚠️ 地図ではない。県境も緯度も描かない。正確さの議論を呼ばないため。
 *    📍 の絵文字もやめた。端末ごとに絵が変わるうえ、地図の記号に見える。
 *    正式な日本地図の SVG を入れる場合は
 *    docs/lp/ASSET_REQUIREMENTS.md の ON-1 を参照。
 * ---------------------------------------------------------------------------*/
.geo{
  display:grid;gap:14px;grid-template-columns:1fr;
  margin:0 auto 32px;max-width:900px;
}

/* ---- 上段：それぞれの場所で回っている4人 ----
   390px は 2×2。4つ横に並べると1枠が80px を切り、「北海道」が語中で折り返す。
   横一列にするのは、1枠に150px 以上取れる 640px から。 */
.geo-nodes{
  list-style:none;padding:0;margin:0;
  display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){
  .geo-nodes{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
.geo-node{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:0;padding:14px 10px;text-align:center;
  border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}
.geo-node-face{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover}
.geo-node-area{
  display:flex;align-items:center;gap:5px;
  font-size:.86rem;font-weight:700;line-height:1.5;
}
/* 📍 の代わり。絵文字は端末ごとに絵が変わるうえ、地図の記号に見えてしまう。 */
.geo-node-area::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--green-600);
}
.geo-node-course{font-size:.74rem;line-height:1.5;color:var(--ink-3)}
.geo-node-thru{
  margin-top:2px;padding:2px 8px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.7rem;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* ---- 中段：その4人が入っている、ひとつの大会 ----
   擬似要素の高さは .geo の gap(14px) と同じ。上下の隙間にちょうど収まる。 */
.geo-hub{
  position:relative;justify-self:center;max-width:100%;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  padding:9px 16px;border-radius:999px;
  background:var(--green-800);color:#fff;box-shadow:var(--shadow);
}
.geo-hub::before,
.geo-hub::after{
  content:"";position:absolute;left:50%;margin-left:-1px;width:2px;height:14px;
  background:repeating-linear-gradient(180deg,var(--line) 0 4px,transparent 4px 8px);
}
.geo-hub::before{bottom:100%}
.geo-hub::after{top:100%}
.geo-hub-name{font-size:.95rem;font-weight:800;letter-spacing:.06em}
/* 白に opacity を重ねると実効コントラストが下がる。色として直接指定する。 */
.geo-hub-sub{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.82)}
.geo-hub-live{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.18);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;
}
/* 「いま動いている」だけを出す。動かすのは 6px の点ひとつに限る。 */
.geo-hub-live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--lime-400);
  animation:geo-live 1.8s ease-in-out infinite;
}
@keyframes geo-live{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.geo-hub-live::before{animation:none;opacity:1}}

/* ---- 下段：同じ順位表に並ぶ ---- */
.geo-join{
  position:relative;padding:16px 14px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}
.geo-join-title{
  font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--green-700);
  margin-bottom:10px;
}
@media (prefers-color-scheme: dark){ .geo-join-title{color:var(--lime-400)} }
.geo-note{margin-top:14px;font-size:.9rem;color:var(--ink-2);text-align:center}

/* =============================================================================
 * 小さな実物（3つの「つながる」の中）
 *
 * 本編のモックを縮めたもの。「こういう画面がある」と分かれば十分なので、
 * 情報量は落とす。旧 sec-more から引き取った。
 * ---------------------------------------------------------------------------*/
.mini{
  padding:14px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);
}
.conn-item .mini{margin-top:14px}
.mini-label{
  font-size:.72rem;font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;margin-bottom:8px;
}

/* 順位（リアルのコンペ） */
/* list-style は消したが padding を戻していなかったため、ブラウザ標準の
   インデント（約21px）が残り、3行だけ右へずれていた。 */
.mini-rank{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.mini-rank li{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:var(--radius-sm);background:var(--surface);
  border:1px solid var(--line);font-size:.84rem;
}
.mini-rank .n{
  flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--green-800);color:#fff;font-size:.7rem;font-weight:700;
  display:grid;place-items:center;
}
.mini-rank .s{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.mini-rank li.is-up{background:var(--green-100);border-color:transparent}

/* 全国から1つへ（オンラインコンペ） */
.mini-geo{display:flex;flex-direction:column;align-items:center;gap:7px}
.mini-geo-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mini-geo-row span{
  padding:5px 10px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-size:.78rem;font-weight:700;
}
.mini-geo-arrow{color:var(--ink-3);font-size:.75rem;line-height:1}
.mini-geo-out{
  padding:7px 14px;border-radius:var(--radius-sm);background:var(--green-800);color:#fff;
  font-size:.82rem;font-weight:700;
}

/* プロフィール（仲間とつながる） */
/* アバターを名前の高さに揃える。center だと3行ぶんの中央、つまり
   2行目（地域・歴）の横に来てしまい、名前の左だけが空いて L 字に見えた。 */
.mini-prof{display:flex;gap:10px;align-items:flex-start}
.mini-prof img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.mini-prof-name{font-weight:700;font-size:.9rem}
.mini-prof-meta{font-size:.76rem;color:var(--ink-3)}
.mini-prof-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mini-prof-tags span{
  padding:3px 8px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-size:.72rem;
}

@media (prefers-color-scheme: dark){
  .mini-geo-out{background:var(--green-700)}
}

/* =============================================================================
 * 動き
 *
 * .js-motion は motion.js が付ける。JS が落ちた環境では付かないので、
 * 「最初は非表示」の指定もそこでしか効かない = 内容が消えない。
 * prefers-reduced-motion のときは motion.js が何もしないため、ここも効かない。
 * ---------------------------------------------------------------------------*/

/* =============================================================================
 * スマホ枠（iPhone 風モック）
 *
 * このモックの仕事はひとつ、「これはスマホアプリの画面だ」と一目で伝えること。
 * 実機の写真を使わずに成立させるには、iOS の画面が必ず持っている4つの部品を
 * 省略しないことが決定的に効く。
 *
 *   1. ステータスバー（時刻・電波・Wi-Fi・電池）… 最大の手がかり。
 *      これが無いと、中身をどれだけ作り込んでも「角丸のカード」にしか見えない
 *   2. ナビゲーションバー（戻る・タイトル・右のアクセサリ）
 *   3. タブバー（アイコン + ラベル）… 文字だけだとタブに見えない
 *   4. ホームインジケータ（下端の細い横棒）
 *
 * 画像・アイコンフォントは使わない。図形は CSS、記号はインライン SVG。
 * ---------------------------------------------------------------------------*/

/* ⚠️ 縦並びを維持すること。横並びにするとスライドの送りボタンと注記が
   端末の右隣に回り込み、390px の画面で 510px に膨らむ（実測して発見済み）。 */
.phone{
  display:flex;flex-direction:column;align-items:center;
  max-width:100%;              /* 320px 幅で親からはみ出させない */
}

/* ---- 端末の外側 ---------------------------------------------------------- */
.phone-frame{
  /* --ph-w は「ガラス（画面）の幅」。枠の太さも画面の高さもここから作るので、
     端末サイズを変えたいときは --ph-w だけ触れば比率が崩れない。 */
  --ph-w:min(270px, 82vw);
  --ph-bezel:8px;              /* 実機のベゼルは細い。太いと額縁に見える */
  --ph-radius:38px;

  position:relative;
  width:calc(var(--ph-w) + var(--ph-bezel) * 2);
  padding:var(--ph-bezel);
  border-radius:var(--ph-radius);
  /* 金属の筐体。単色より明→暗→明のグラデのほうが「厚みのある物体」に見える。
     ダークモードでも背景に溶けないよう、明るい端を必ず残す。
     旧実装（#2A322D→#151A17）は暗所でほぼ消えていた。 */
  background:linear-gradient(150deg,#4E584F 0%,#242C27 26%,#171D19 60%,#3C453D 100%);
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.10);
}
/* 縦が短いノートPCでは、sticky にした端末がビューポートより高くなり下端が切れる。
   幅を落として比率を保ったまま収める。 */
@media (min-width:920px) and (max-height:840px){
  .phone-frame{--ph-w:min(238px, 82vw)}
}

/* 側面ボタン。2px の棒2本だが「板」ではなく「電話」に見せる効きが大きい。 */
.phone-frame::before,
.phone-frame::after{
  content:"";position:absolute;width:2px;border-radius:2px;
  background:linear-gradient(#525C53,#2A322D);
}
.phone-frame::before{left:-2px;top:23%;height:52px}   /* 音量 */
.phone-frame::after {right:-2px;top:29%;height:64px}  /* 電源 */

/* ---- 画面（ガラスの内側） ------------------------------------------------- */
.phone-screen{
  --ph-bar:var(--green-800);          /* アプリのヘッダー色 */
  --ph-hairline:var(--line);
  --ph-tab:var(--ink-3);
  --ph-tab-on:var(--green-700);
  --ph-home:rgba(18,22,15,.34);
  --ph-dock:62px;                     /* タブバー + ホームインジケータの高さ */

  position:relative;isolation:isolate;
  width:100%;
  /* 実機の縦横比。これひとつで「四角い板」から「電話」に変わる。
     旧実装は 280×520（1.86:1）で、iPhone より明らかに寸詰まりだった。 */
  aspect-ratio:9 / 19.5;
  border-radius:calc(var(--ph-radius) - var(--ph-bezel));
  overflow:hidden;
  display:flex;flex-direction:column;

  background:var(--bg);
  color:var(--ink);
  /* 枠の中は「アプリの UI」。LP 本文（16px / 1.85）のまま入れると、
     実機ではありえない巨大な UI になる。
     実寸どおり（270/390 = 0.69倍）に縮めると本文が 12px を切って読めないので、
     読める下限として 13px を基準にし、中の部品を px で明示する。 */
  font-size:13px;
  line-height:1.5;
}
/* タブバーを持たない画面（診断のウィザードなど）。下の余白を詰める。 */
.phone-screen.is-nobar{--ph-dock:24px}
@media (prefers-color-scheme: dark){
  .phone-screen{
    --ph-tab-on:var(--lime-400);
    --ph-home:rgba(236,242,236,.44);
  }
  .phone-frame{box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.14)}
}

/* ---- 1. ステータスバー ----------------------------------------------------
   ⚠️ 島（ノッチ）は「この行の中」に置く。枠に absolute で浮かせると、
      ヘッダーの上に何も無い緑の帯が残る（旧実装の見た目の主犯）。 */
.phone-status{
  flex:none;z-index:2;
  height:30px;padding:0 13px 0 15px;
  display:flex;align-items:center;
  background:var(--ph-bar);color:#fff;      /* 白 on --green-800 ＝ 11.3:1 */
  font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums;        /* 時刻の桁が揺れないように */
}
/* 左右を同幅の flex にすると、島が「必ず」中央に来る。
   margin:auto で寄せると、右のアイコン列の幅が変わるたびに島がずれる。 */
.phone-status-time,
.phone-status-icons{flex:1 1 0;min-width:0;overflow:hidden}
.phone-status-icons{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.phone-status-icons svg{height:10px;width:auto;display:block}
.phone-island{
  flex:none;width:62px;height:17px;border-radius:999px;
  /* カメラ穴は純黒。緑ヘッダーに対して純黒だけが「開いた穴」に見える。 */
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ---- 2. ナビゲーションバー ------------------------------------------------
   1fr auto 1fr にして左右の列を同幅にする。でないとタイトルが中央に見えず、
   「Web のヘッダー」の印象に戻る。 */
.phone-bar{
  flex:none;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:2px 12px 10px;
  background:var(--ph-bar);color:#fff;
}
.phone-back{justify-self:start;display:flex;color:rgba(255,255,255,.92)}
.phone-back svg{width:17px;height:17px}
.phone-heading{min-width:0;text-align:center}
.phone-title{
  display:block;font-size:14px;font-weight:800;line-height:1.3;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 副題は「いつ・どこまで」を出す位置。実機のナビバーはここに必ず何か入っている。 */
.phone-sub{
  display:block;margin-top:1px;
  font-size:10px;font-weight:600;line-height:1.3;
  color:rgba(255,255,255,.74);
}
.phone-meta{
  justify-self:end;display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:rgba(255,255,255,.90);white-space:nowrap;
}
.phone-meta svg{width:13px;height:13px}

/* ---- 3. 本文（横スクロール + scroll-snap で3枚） --------------------------
   実体はただの横スクロール。JS が無くても指で送れる。 */
.slides{
  flex:1;min-height:0;                      /* これが無いと flex 子のスクロールが効かない */
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior:contain;              /* 端まで送ってもページごと動かない */
  background:var(--bg);
  scrollbar-width:none;
}
.slides::-webkit-scrollbar{height:0}
.slide{
  flex:0 0 100%;scroll-snap-align:start;
  overflow-y:auto;overscroll-behavior:contain;
  /* 下の余白はタブバーぶん。タブバーは本文の上に重なる層なので、
     ここを空けないと最後の行がタブに隠れる。 */
  padding:12px 12px calc(var(--ph-dock) + 12px);
  scrollbar-width:none;
}
.slide::-webkit-scrollbar{width:0}
/* iOS のグループ見出し相当。小さく・薄く・字間を開けるとラベルに見える。 */
.slide-title{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--ink-3);
  margin:0 0 8px;
}

/* ---- 4. タブバー ----------------------------------------------------------
   本文の上に重ねる。実機のタブバーは半透明で、下の内容が透けて動く。
   透けることで「タブは別の層」＝「スクロールする画面がある」と伝わる。 */
.phone-tabs{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;
  padding:6px 4px 18px;                 /* 下 18px はホームインジケータの安全域 */
  border-top:1px solid var(--ph-hairline);
  background:var(--surface);            /* 非対応環境の fallback */
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}
.phone-tabs button{
  flex:1;min-width:0;
  /* 押せる要素なので、実際のタップ領域を 44px 以上にする（WCAG 2.5.5）。
     アイコン22 + ラベル12 だけだと 36px しかない。 */
  appearance:none;background:none;border:0;padding:4px 0;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--ph-tab);
  -webkit-tap-highlight-color:transparent;
}
/* アイコンは 24px で作り、タブの中では 22px で描く。
   画面幅 270px に対して 24px のままだと実機より一回り大きく見えるため。 */
.phone-tabs svg{width:22px;height:22px;display:block}
.phone-tab-label{
  display:block;max-width:100%;
  font-size:10px;font-weight:600;line-height:1.2;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 選択中は色だけで示す。旧実装の「上の緑の線」は実機のタブバーには無く、
   スクロールの進捗バーに誤読されていた。 */
.phone-tabs button[aria-current="true"]{color:var(--ph-tab-on)}
/* JS が動いていないときは押しても何も起きない。手の形を出さない。 */
html:not(.js-slides) .phone-tabs button{cursor:default}

/* ---- 5. ホームインジケータ ------------------------------------------------ */
.phone-home{
  position:absolute;left:0;right:0;bottom:0;height:18px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.phone-home::before{
  content:"";width:38%;max-width:108px;height:4px;border-radius:999px;
  background:var(--ph-home);
}

/* ---- 枠の中の密度 ---------------------------------------------------------
   ここから下は「LP のパーツをアプリの寸法に落とす」ための上書き。
   .phone-screen を前置しているので、枠の外の同じ部品には影響しない。 */

/* iOS の inset grouped list に寄せる。地（--bg）の上に白いカードが乗ることで
   「リストが画面に置かれている」ように見える。行を直接地に置くと Web の表に見える。 */
.phone-screen .comp-rank,
.phone-screen .comp-groups > div,
.phone-screen .live-feed li,
.phone-screen .q-choices li,
.phone-screen .ai-result,
.phone-screen .ai-draft{
  background:var(--surface);border:1px solid var(--ph-hairline);
}
.phone-screen .comp-rank{
  border-radius:var(--radius-sm);overflow:hidden;   /* 選択行の色をカードの角で切る */
  padding:0;margin:0 0 10px;
}
.phone-screen .comp-rank li{padding:7px 9px;gap:7px;border-radius:0}
.phone-screen .comp-no{width:18px;height:18px;font-size:10px}
.phone-screen .comp-rank .act-face{width:22px;height:22px}
/* 名前は縮んでよい。組・あなた・Thru・スコアは縮ませない。
   ⚠️ 以前は組チップと「あなた」を .comp-name の中に入れており、
      自分の行だけ折り返して行の高さが変わったり、Thru に重なったりしていた。 */
/* 名前は縮ませない。縮むと「けんた」が「け」になる（実際になっていた）。
   横幅が足りないときは、右の要素を減らすほうを選ぶ。 */
.phone-screen .comp-name{
  font-size:12px;flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.phone-screen .comp-area,
.phone-screen .comp-you,
.phone-screen .comp-thru,
.phone-screen .comp-score,
.phone-screen .rank-badge{flex:none}
.phone-screen .comp-you{margin-left:5px}
.phone-screen .rank-badge{margin-left:4px}
.phone-screen .comp-area{font-size:9px;padding:0 6px;margin-left:5px}
.phone-screen .comp-score{font-size:13px}
.phone-screen .rank-badge{font-size:9px;padding:0 6px}
.phone-screen .comp-more{font-size:10px;margin-top:8px}
.phone-screen .comp-live{font-size:9px;padding:2px 7px;margin-left:0}
.phone-screen .comp-note{font-size:9px;margin-left:0}

.phone-screen .comp-groups{gap:6px;margin:0}
.phone-screen .comp-groups > div{font-size:11px;padding:7px 10px;border-radius:var(--radius-sm)}

.phone-screen .live-feed{gap:6px;margin:0 0 10px}
.phone-screen .live-feed li{font-size:11px;padding:8px 10px;border-radius:var(--radius-sm);gap:7px}
.phone-screen .live-ico{font-size:12px}
.phone-screen .live-ago{font-size:9px;margin-left:5px}
.phone-screen .live-react{margin-top:0}
.phone-screen .live-chip{font-size:10px;padding:3px 9px}

.phone-screen .q-text{font-size:14px;line-height:1.55;margin-bottom:10px}
.phone-screen .q-choices{gap:7px;margin-bottom:10px}
.phone-screen .q-choices li{font-size:12px;padding:9px 11px;border-radius:var(--radius-sm)}
.phone-screen .q-note{font-size:10px}
.phone-screen .ai-result,
.phone-screen .ai-draft{padding:12px;border-radius:var(--radius-sm)}
.phone-screen .ai-type{font-size:15px;margin-bottom:8px}
.phone-screen .ai-desc{font-size:11px;line-height:1.7}
.phone-screen .ai-tags{margin-top:10px}
.phone-screen .ai-tags span{font-size:10px;padding:3px 8px}
.phone-screen .ai-draft-label{font-size:10px;margin-bottom:6px}
.phone-screen .ai-draft-text{font-size:11px;line-height:1.75}
.phone-screen .ai-draft-note{font-size:10px;margin-top:8px}

/* 順位表の Thru（何ホール目まで終わったか）。
   ⚠️ ゴルフの順位表で Thru の無いスコアは比較できない。
      組ごとに進行が違うのに見出しに「12H 終了」と1つだけ書くと、
      ゴルフをやる人ほど「10Hの+18と14Hの+8を並べているのか」と引っかかる。 */
.comp-thru{
  margin-left:auto;font-size:10px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.phone-screen .comp-score{margin-left:10px;min-width:34px;text-align:right}
/* 「あなた」は色だけでなく文字でも示す。明るいカートの中では色差が読めない。 */
.comp-you{
  margin-left:5px;padding:0 6px;border-radius:999px;
  background:var(--green-800);color:#fff;font-size:9px;font-weight:800;
}
@media (prefers-color-scheme: dark){
  .comp-you{background:var(--lime-500);color:var(--green-900)}
  /* 自分の行の順位バッジが、行の背景（#17332A）とほぼ同色で消えていた */
  .comp-rank li.is-me .comp-no{background:var(--lime-500);color:var(--green-900)}
  /* 組チップが行の背景より暗く、黒い穴に見えていた */
  .comp-area{background:transparent;border-color:var(--line)}
}

/* コンペのコンテキスト（日付・コース・ネット/グロス）。
   これが無いと「何の順位表か」が分からず、ネットかグロスかで読み手が止まる。 */
.phone-context{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;
}
.phone-context span{
  padding:3px 8px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--ph-hairline);
  font-size:10px;font-weight:600;color:var(--ink-2);
}

/* ---- ダイジェスト（コンペが終わったあとに残るもの） ----------------------- */
.dg-podium{
  display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:6px;
  padding:12px 10px;border-radius:var(--radius-sm);margin-bottom:10px;
  background:var(--surface);border:1px solid var(--ph-hairline);
}
.dg-podium > div{text-align:center}
.dg-podium img{width:34px;height:34px;border-radius:50%;object-fit:cover;margin:0 auto 4px}
.dg-1 img{width:44px;height:44px}
.dg-rank{font-size:10px;font-weight:800;color:var(--ink-3)}
.dg-1 .dg-rank{color:var(--green-700)}
@media (prefers-color-scheme: dark){ .dg-1 .dg-rank{color:var(--lime-400)} }
.dg-name{font-size:11px;font-weight:700;line-height:1.3}
.dg-score{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.dg-titles{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0;margin:0}
.dg-titles li{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--ph-hairline);
  font-size:11px;
}
.dg-titles b{font-weight:800}
.dg-titles span{margin-left:auto;color:var(--ink-3);font-size:10px}

/* ---- 診断のウィザード（タブではなく進捗と「次へ」） ----------------------- */
.q-progress{
  height:4px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--ph-hairline);overflow:hidden;margin-bottom:10px;
}
.q-progress i{display:block;height:100%;width:37.5%;background:var(--green-600)}
@media (prefers-color-scheme: dark){ .q-progress i{background:var(--lime-500)} }
.q-next{
  margin-top:12px;padding:9px 12px;border-radius:var(--radius-sm);text-align:center;
  background:var(--green-800);color:#fff;font-size:12px;font-weight:700;
}
@media (prefers-color-scheme: dark){ .q-next{background:var(--green-700)} }

/* ---- チャット画面（タブバーの代わりに入力バーが下に付く型） ---------------- */
.phone-chat{
  flex:1;min-height:0;
  overflow-y:auto;scroll-behavior:smooth;overscroll-behavior:contain;
  padding:12px 10px calc(var(--ph-dock) + 8px);
  background:var(--bg);
  display:flex;flex-direction:column;gap:9px;
  scrollbar-width:none;
}
.phone-chat::-webkit-scrollbar{width:0}
/* チャットを開いたまま順位が分かるようにする。
   ラウンド中はカートで数秒しか見られない。順位を見るために画面を移動させない。 */
.phone-pin{
  flex:none;z-index:1;display:flex;align-items:center;gap:8px;
  padding:7px 11px;border-bottom:1px solid var(--ph-hairline);
  background:var(--surface);font-size:10px;
}
.phone-pin b{font-weight:800;font-variant-numeric:tabular-nums}
.phone-pin .is-you{color:var(--green-700)}
@media (prefers-color-scheme: dark){ .phone-pin .is-you{color:var(--lime-400)} }
.phone-pin span:last-child{margin-left:auto;color:var(--ink-3)}
.ch{display:flex;gap:8px;align-items:flex-start;max-width:88%}
.ch img{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover}
.ch-body{
  padding:8px 11px;border-radius:var(--radius) var(--radius) var(--radius) var(--radius-xs);
  background:var(--surface);border:1px solid var(--line);
  font-size:.84rem;line-height:1.6;
}
.ch-who{display:block;font-size:.68rem;color:var(--ink-3);margin-bottom:2px}
.ch-me{align-self:flex-end;flex-direction:row-reverse}
.ch-me .ch-body{border-radius:var(--radius) var(--radius) var(--radius-xs) var(--radius);background:var(--green-100);border-color:transparent}
/* システムの通知。誰かが書いたのではなく、自動で流れてくるもの */
.ch-sys{
  align-self:center;max-width:96%;
  padding:6px 12px;border-radius:999px;
  background:var(--green-800);color:#fff;
  font-size:.76rem;line-height:1.5;text-align:center;
}
.ch-sys strong{color:var(--lime-400)}
/* ⚠️ opacity:0 のまま残すと、まだ届いていない行が場所を取り続ける。
   その状態で一番下までスクロールすると、空白だけが写る（実際に空の枠になっていた）。
   届くまでは display:none にして、高さそのものを持たせない。
   display が変わるので transition ではなく animation を使う。 */
.js-motion .ch{display:none}
.js-motion .ch.is-in{animation:ch-in .32s ease both}
.js-motion .ch.is-in{display:flex}
.js-motion .ch-me.is-in{display:flex}
@keyframes ch-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 入力中の3点。ここが動くと「相手がいる」感じが出る */
.ch-typing{display:none;align-self:flex-start;gap:4px;padding:10px 12px;
  border-radius:var(--radius) var(--radius) var(--radius) var(--radius-xs);background:var(--surface);border:1px solid var(--line)}
.ch-typing.is-on{display:flex}
.ch-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:chdot 1s infinite}
.ch-typing span:nth-child(2){animation-delay:.15s}
.ch-typing span:nth-child(3){animation-delay:.3s}
@keyframes chdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* 下のドック。タブバーと同じ「重なる半透明の層」にして作法を揃える。 */
.phone-react{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:6px;
  padding:8px 11px 18px;
  border-top:1px solid var(--ph-hairline);
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}
/* 「書ける場所がある」と分かると、止まった絵ではなくアプリに見える。 */
.phone-input{
  flex:1;min-width:0;height:26px;padding:0 10px;
  display:flex;align-items:center;
  border-radius:999px;background:var(--bg);border:1px solid var(--ph-hairline);
  font-size:10px;color:var(--ink-3);
}
.phone-react > span{
  flex:none;padding:3px 8px;border-radius:999px;
  background:var(--bg);border:1px solid var(--ph-hairline);
  font-size:10px;font-weight:700;line-height:1.5;
}
.phone-note{margin-top:12px;text-align:center;font-size:.8rem;color:var(--ink-3)}

/* ---- 自動実況のティッカー ------------------------------------------------ */
.js-motion [data-feed-row]{opacity:0;transform:translateX(-8px);transition:opacity .3s ease, transform .3s ease}
.js-motion [data-feed-row].is-in{opacity:1;transform:none}

/* ---- 順位が動く ----------------------------------------------------------
   flex の order で行を入れ替える。高さを固定しないと、入れ替えの瞬間に
   カード全体の高さが動いてページが揺れる。 */
.comp-rank{display:flex;flex-direction:column}
.comp-rank li{transition:transform .5s cubic-bezier(.2,.7,.3,1), background-color .3s ease}
/* 位置の入れ替えは motion.js が transform で行う（order だと表全体の並びが壊れる）。
   ここでは「動いた行」の色だけを扱う。 */
[data-rank] [data-rank-swap]{position:relative;z-index:1}
[data-rank].is-swapped [data-rank-swap="1"]{background:var(--green-100)}
.rank-badge{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--lime-500);color:var(--green-900);
  font-size:.68rem;font-weight:800;
  transition:opacity .3s ease, transform .3s ease;
}
/* ⚠️ opacity:0 のままだと、見えていないのに幅を取り続ける。
   自分の行だけ名前が2段に折れて、行の高さが揃わなくなっていた。
   動きが有効なときだけ隠し、幅も持たせない。 */
.js-motion .rank-badge{position:absolute;opacity:0;transform:translateY(3px)}
.js-motion .rank-badge.is-on{position:static;opacity:1;transform:none}
.rank-badge.is-on{opacity:1;transform:none}

/* ---- 数が増える ---------------------------------------------------------- */
.count{font-variant-numeric:tabular-nums}

/* =============================================================================
 * レビューで出た残りの修正
 * ---------------------------------------------------------------------------*/

/* 全国ランキングの地域ラベル */
.comp-area{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.72rem;font-weight:600;color:var(--ink-2);vertical-align:middle;
}

/* ---- 単色アイコン ---------------------------------------------------------
   OS の絵文字は環境によって色も形も変わり、そこだけ「作っていない」ように見える。
   currentColor の線画に統一すると、ダークモードにも自動で追従する。 */
.ico{width:26px;height:26px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.problem-emoji{
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--green-100);color:var(--green-700);margin-bottom:14px;
}
@media (prefers-color-scheme: dark){
  .problem-emoji{background:var(--green-100);color:var(--lime-400)}
}

/* ---- Before / After の縦フロー -------------------------------------------
   flex-wrap で折り返すと、行頭に「→」が落ちてどこから続いているのか読めない。
   モバイルは縦に積み、矢印を下向きにする。 */
@media (max-width:639px){
  /* 矢印はピルとピルの「あいだ」に置く。::after は li の内側なので、
     そのまま流すとピルの中に矢印が入って箱が縦に伸びる。
     絶対配置で外へ出し、その分を gap で空ける。 */
  .diff-flow{flex-direction:column;align-items:stretch;gap:24px}
  .diff-flow li{text-align:center;position:relative}
  .diff-flow li:not(:last-child)::after{
    content:"↓";position:absolute;left:50%;top:100%;transform:translateX(-50%);
    margin:0;line-height:24px;
  }
}

/* ---- 時系列 --------------------------------------------------------------
   ⚠️ 2カラムにしてはいけない。左→右に読ませると時系列が壊れ、
      縦線も2本に分かれて別々のリストに見える（実際にそうなっていた）。
      1本のまま、枠を付けて「中央に置いた図」だと分かる形にする。 */
.tl{
  max-width:var(--visual-lg);margin-inline:auto;
  padding:24px 22px 14px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}

/* ---- 循環の戻り ----------------------------------------------------------
   5番目から1番目へ戻ることを、文字で書く。矢印だけでは循環に見えない。 */
.cycle li{position:relative}
.cycle-back{
  display:block;margin-top:10px;text-align:center;
  font-size:.9rem;font-weight:700;color:var(--green-700);
}
@media (prefers-color-scheme: dark){ .cycle-back{color:var(--lime-400)} }

/* ---- プロフィールの投稿サムネイル ---------------------------------------
   「投稿から人柄が分かる」と書きながら、プロフィールに投稿が無かった。 */
.mock-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.mock-posts img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius-xs);width:100%}
.mock-posts-label{font-size:.72rem;color:var(--ink-3);margin-top:10px}

/* ---- いま見ている訴求を、3つの分断の中で示す --------------------------- */
/* HTML 側に .is-here を付けていないため、この指定は一度も効いていなかった。
   目印は中の .conn-here なので、そこから当てる。 */
.conn-item.is-here,
.conn-item:has(> .conn-here){
  border-color:var(--green-600);box-shadow:var(--shadow-lg);
}
/* 流れの中に置くと、この目印が付いたカードだけ中身が約40px下がり、
   3枚の見出しが階段状になる。カードの上辺に貼って、流れから外す。 */
.conn-here{
  position:absolute;top:-12px;left:20px;
  padding:3px 10px;border-radius:999px;
  background:var(--green-800);color:#fff;font-size:.72rem;font-weight:700;
  white-space:nowrap;
}
@media (prefers-color-scheme: dark){ .conn-here{background:var(--green-700)} }

/* ---- 順位表まわりの追加 ---------------------------------------------------- */
/* 全員を並べるのは冗長なので、上位だけ出して残りは数で示す */
.comp-more{
  margin-top:8px;text-align:center;font-size:.8rem;color:var(--ink-3);
}
/* 「いつ届いたか」が無いと、実況が時系列に見えない */
.live-ago{
  display:inline-block;margin-left:6px;font-style:normal;
  font-size:.72rem;color:var(--ink-3);
}
/* PC で6項目が縦一列だと間延びする */
@media (min-width:900px){
  .check-list-2col{columns:2;column-gap:36px}
  .check-list-2col li{break-inside:avoid}
}

/* ---- B / 呼べる人数の比較 -------------------------------------------------- */
.reach{
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  margin:24px 0 8px;
}
.reach-col{
  padding:18px 14px;border-radius:var(--radius);text-align:center;
  background:var(--surface-2);border:1px solid var(--line);
}
.reach-col-on{background:var(--surface);border-color:var(--green-600);box-shadow:var(--shadow)}
.reach-label{font-size:.78rem;font-weight:700;color:var(--ink-3);margin-bottom:6px}
.reach-col-on .reach-label{color:var(--green-700)}
@media (prefers-color-scheme: dark){ .reach-col-on .reach-label{color:var(--lime-400)} }
.reach-num{
  font-size:clamp(1.8rem,7vw,2.4rem);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
}
.reach-unit{font-size:.9rem;font-weight:700;margin-left:2px}
.reach-note{margin-top:6px;font-size:.8rem;color:var(--ink-3)}
.reach-arrow{color:var(--ink-3);font-size:1.1rem}

/* ---- Core のあとの一言 ---------------------------------------------------- */
.core-next{margin-bottom:0}
/* ブランドトップからの導線。LP 側のカードには付かない。 */
.conn-go{margin:14px 0 0}
/* 単独で置くリンクなので、文中リンクの例外は使えない。
   指で押す前提の高さを持たせる（WCAG 2.5.8 は 24x24 が下限。
   実測で 106x21 だった）。 */
.conn-go a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;font-size:.92rem;text-decoration:none;
}
.conn-go a::after{content:" →"}
.conn-go a:hover{text-decoration:underline}
.conn-note{
  margin-top:22px;text-align:center;font-size:.98rem;color:var(--ink-2);
}

/* ---- 枠の外の送り --------------------------------------------------------
   JS が動いたときだけ出す（押しても何も起きない状態を作らない）。 */
.slides-nav{display:none;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.js-slides .slides-nav{display:flex}
.slides-nav button{
  appearance:none;cursor:pointer;width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-size:1.1rem;line-height:1;display:grid;place-items:center;
}
.slides-nav button:hover{background:var(--surface-2)}
.slides-dots{list-style:none;display:flex;gap:7px;margin:0;padding:0}
.slides-dots li{
  width:8px;height:8px;border-radius:50%;background:var(--line);
  transition:background-color .2s ease, transform .2s ease;
}
.slides-dots li[aria-current="true"]{background:var(--green-600);transform:scale(1.25)}
@media (prefers-color-scheme: dark){ .slides-dots li[aria-current="true"]{background:var(--lime-500)} }
.slides-hint{margin-top:8px;text-align:center;font-size:.8rem;color:var(--ink-3)}

/* SCREENS の横送りの点。位置を示すだけで、押すものではないので <li> のまま置く。
   点の大きさと現在位置の色は .slides-dots が持つ。ここは置き場所だけ。
   .slides-dots の margin:0 を上書きするため、必ずその後ろに書く。
   .screens-trio が 720px 以上で display:none なので、点も一緒に消える。 */
.screens-dots{justify-content:center;margin-top:12px}

/* ---- 送りを端末の左右へ（デスクトップのみ） ---------------------------------
   矢印を画面の中に重ねると、アプリ自身が持つ UI に見えてしまう。
   端末の外に出し、左右に矢印・下にドットを置く。実物を触る形に近づける。

   モバイルでは端末の下にまとめる。左右に置くと
   画面 270px + ボタン 44px x 2 + 余白 で 375px 幅に収まらない。 */
@media (min-width:920px){
  .phone.phone-slides{
    display:grid;
    grid-template-columns:auto auto auto;
    grid-template-areas:
      "prev frame next"
      "dots dots dots"
      "hint hint hint";
    justify-content:center;align-items:center;column-gap:12px;
  }
  .phone-slides > .phone-frame{grid-area:frame}
  /* .slides-nav は入れ物としては要らない。中の3つを親のグリッドへ直接置く。
     JS が動いていないときは .slides-nav ごと display:none なので、
     矢印もドットも出ない（押しても何も起きないボタンを作らない）。 */
  .js-slides .phone-slides > .slides-nav{display:contents}
  .phone-slides [data-slide-prev]{grid-area:prev}
  .phone-slides [data-slide-next]{grid-area:next}
  .phone-slides .slides-dots{grid-area:dots;justify-self:center;margin-top:14px}
  .phone-slides > .slides-hint{grid-area:hint}
}

/* キーボード操作で「いまどこにいるか」が見えるように。
   .slides は overflow:hidden の内側なので、outline を外向きに出すと切れる。 */
.phone-tabs button:focus-visible,
.slides-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
.slides:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}

/* ---- C / AI ゴルファー診断（開発中の画面イメージ） ------------------------ */
.q-text{font-size:1.02rem;font-weight:700;line-height:1.6;margin-bottom:12px}
.q-choices{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.q-choices li{
  padding:11px 12px;border-radius:var(--radius-sm);font-size:.88rem;line-height:1.5;
  background:var(--surface);border:1px solid var(--line);
}
.q-choices li.is-on{
  background:var(--green-100);border-color:var(--green-600);font-weight:700;
}
.q-note{font-size:.72rem;color:var(--ink-3)}

.ai-result{
  padding:16px 14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);text-align:center;
}
.ai-type{
  font-size:1.18rem;font-weight:800;line-height:1.45;
  color:var(--green-800);margin-bottom:10px;
}
@media (prefers-color-scheme: dark){ .ai-type{color:var(--lime-400)} }
.ai-desc{font-size:.86rem;line-height:1.75;color:var(--ink-2);text-align:left}
.ai-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.ai-tags span{
  padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:700;
  background:var(--green-100);color:var(--green-900);
}
@media (prefers-color-scheme: dark){ .ai-tags span{color:var(--ink)} }

.ai-draft{padding:14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.ai-draft-label{font-size:.76rem;font-weight:700;color:var(--ink-3);margin-bottom:8px}
.ai-draft-label span{
  margin-left:6px;padding:2px 8px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);font-weight:600;
}
.ai-draft-text{font-size:.86rem;line-height:1.85}
.ai-draft-note{margin-top:10px;font-size:.78rem;color:var(--ink-3)}

/* 画面の下が空くのを、アプリらしい形で埋める。
   実機では主要な操作ボタンは画面の下端に固定される。 */
.phone-screen .slide{display:flex;flex-direction:column}
.phone-screen .q-next{margin-top:auto}

/* 自分の行は背景が明るくなるぶん、薄い文字のコントラストが落ちる。
   ダークで Thru が 4.42:1（AA は 4.5）だったので、この行だけ持ち上げる。 */
@media (prefers-color-scheme: dark){
  .comp-rank li.is-me .comp-thru{color:var(--ink-2)}
}