/* 来場者向けLP（A案 lp.html・B案 lp-b.html）で共有する土台。style.css の後、各案のCSSの前に読む。
   ここにあるもの：LPの初期化・横幅（.wrap）・読み上げ専用（.vh）・句の箱（.ph）・選定バー（A/B切り替えとコピー案）。
   色・書体は style.css の :root。案ごとの見た目は lp.css／lp-b.css にだけ書く */
:is(.lp-body, .lp-b) {
  --g: clamp(16px, 4vw, 56px);   /* 左右の余白 */
  --picker-h: 61px;              /* 選定バーの高さ（ヒーローを1画面に収める計算に使う） */
  background: var(--paper);
  font-size: 16px;
  line-height: 1.8;
}
:is(.lp-body, .lp-b) :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

main.lp { display: block; max-width: none; margin: 0; padding: 0; }
.lp :is(ol, dl, dd) { margin: 0; padding: 0; }
.lp ol { list-style: none; }
.lp h2:not(.plain) { border: 0; padding: 0; }
.lp :is(h2, h3) { word-break: auto-phrase; text-wrap-style: balance; }
.lp p { text-wrap-style: pretty; } /* 省略形の text-wrap は折り返しの有無（mode）も戻し、個々の nowrap を消すので使わない */
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--g) var(--gr, var(--g)); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ph { display: inline-block; white-space: nowrap; } /* 句の箱：句の途中では折り返さない */

/* 選定バー：下書きの道具。紙の外の色（--desk）と破線で、ページの一部ではないと分かるようにする。印刷では出さない */
.lp-picker {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  min-height: var(--picker-h); padding: 8px 16px;
  background: var(--desk); border-bottom: 1px dashed var(--sub);
  font-size: 14px; line-height: 1.4;
}
.ab { display: flex; }
.ab a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-weight: 700; text-decoration: none;
}
.ab a + a { border-left-width: 0; }
.ab a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ab a:not([aria-current]):hover { border-color: var(--sub); }
.lp-picker-label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sub); font-weight: 700; }
.lp-picker-tag { padding: 2px 8px; border: 1px solid var(--note); color: var(--note); font-size: 13px; }
.lp-picker-options { display: flex; gap: 4px; }
.lp-picker label { position: relative; cursor: pointer; }
.lp-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-picker label span {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--display); font-weight: var(--display-weight); font-size: 16px;
  transition: background-color .15s, border-color .15s;
}
.lp-picker label:hover span { border-color: var(--sub); }
.lp-picker input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lp-picker input:focus-visible + span { outline: 3px solid var(--note); outline-offset: 2px; }
.lp-pick { font-family: var(--body); font-size: 12px; font-weight: 700; }
@media (max-width: 719px) {
  .lp-picker { position: static; justify-content: flex-start; gap: 8px; }
  .ab, .lp-picker-label { flex-basis: 100%; }
  .ab a { flex: 1; justify-content: center; padding: 0 8px; }
  .ab-note { display: none; } /* 3つ並ぶと折り返すので、スマートフォンでは案の名前だけ */
  .lp-picker-options { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); width: 100%; }
  .lp-picker label span { display: flex; width: 100%; }
}
@media print { .lp-picker { display: none !important; } }