/* =============================================================================
   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: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;

  --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}
@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,.hero-lead,.hero-tagline,.section-lead,.problem-punch,.section-title,
.faq summary,.meetup-title,.loop-text,.safety-card h3,.problem-card h3{
  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:6px}

.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 10px 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}
.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%}
/* 不透明度 .78 は、写真の一番明るい部分（空）の上でも
   白文字が 7:1 以上になるところから決めた値。写真を差し替えても
   この係数のままなら AA を割らない。 */
.hero-scrim{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(168deg, rgba(9,58,42,.80) 0%, rgba(7,42,31,.78) 55%, rgba(4,32,24,.86) 100%);
}
.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,.82) 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}
/* A/B テストのコピー。<head> のインラインスクリプトが html[data-variant] を立てる。
   CSS で切り替えるため、JS の読み込みを待たず FOUC が起きない。
   data-variant が付かない場合（JS無効・例外）は A を表示する。 */
.ab{display:none}
html:not([data-variant]) .ab[data-ab="A"]{display:block}
html[data-variant="A"] .ab[data-ab="A"]{display:block}
html[data-variant="B"] .ab[data-ab="B"]{display:block}
html[data-variant="C"] .ab[data-ab="C"]{display:block}
/* 未実装・構想の機能を訴求する 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 を割る。 */
  .hero-scrim{
    background:linear-gradient(96deg,
      rgba(8,50,37,.86) 0%, rgba(8,48,36,.80) 46%, rgba(6,40,30,.58) 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) ---------- */
.feature{display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
@media (min-width:920px){
  .feature{grid-template-columns:1fr 1fr;gap:60px}
  .feature-reverse .feature-body{order:2}
  .feature-reverse .feature-visual{order:1}
}
.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}
.mock{
  width:100%;max-width:400px;
  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:10px;margin-bottom:9px;
  background:linear-gradient(150deg,var(--green-600),var(--green-800) 70%);
}
/* モックの下に添える文脈写真。モックと同じ幅に揃える。 */
.visual-photo{
  display:block;width:100%;max-width:400px;height:auto;
  border-radius:var(--radius);margin-top:20px;box-shadow:var(--shadow);
}
/* Golf Log では写真が主役なので、上の余白を持たせない。 */
.visual-photo-lead{margin-top:0;max-width:440px}
/* Practice は募集カード1枚だけを見せる。 */
.meetup-card-solo{width:100%;max-width:400px}
/* 「これは実物ではない」と明記するための注記。
   モックを本物の画面と誤認させないために置いている。 */
.mock-note{
  font-size:.72rem;color:var(--ink-3);margin:12px 0 0;
  max-width:400px;line-height:1.7;
}
.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}
.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:11px;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:10px;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)}}

.split{display:grid;gap:34px;grid-template-columns:1fr}
@media (min-width:820px){.split{grid-template-columns:1fr 1fr;gap:48px}}
.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:11px;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:11px;border:1.5px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.96);color:var(--green-900);
}
.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}
.wl-consent input{
  width:24px;height:24px;flex:0 0 auto;margin-top:11px;
  accent-color:var(--lime-500);cursor:pointer;
}
.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:4px}
/* 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:11px;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:11px;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:start}}
.diff-col{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;
}
.diff-new{border-color:var(--green-600);box-shadow:var(--shadow)}
.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;
}
.diff-flow li + li::before{content:"→";color:var(--ink-3);font-weight:700;margin-right: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}
.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}
.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.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ---------- Legal / thanks pages ---------- */
.doc{padding:44px 0 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}
/* 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}
.doc-back{display:inline-flex;align-items:center;min-height:44px;margin-top:26px;font-weight:700;font-size:.9rem}

.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}
@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:52px 0 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:11px;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}
.sv-skip{text-align:center;margin:18px 0 0}
.sv-skip a{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}

/* ---------- コンペ（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:8px;
}
.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:8px;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)}}

/* 構想セクション。実装済みに見せないため、余白を詰めて控えめに置く。 */
.future-band{text-align:center}
.future-band .section-title{max-width:none;margin-inline:auto}
.future-band .section-lead{margin-inline:auto;margin-bottom:0}

/* ---------- ライブ体験（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:9px;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:10px;
}
.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; }