/* ============================================================
   Linert 使い方ガイド（linert-guide*.html）だけの部品。
   土台は lowline-guide.html と同じ（styles.css → lowline.css → これ）。
   ============================================================ */

/* ---- 見出しのロゴ ---- */
.lx-logo { display: block; height: 44px; width: auto; margin: 0 auto 18px; }
.lx-logo--part { height: 34px; }

/* ---- Mac / Windows の切り替え（キーの書き方と、片方にしか無い説明） ---- */
.lx-os { display: flex; justify-content: center; gap: 0; margin: 22px auto 0; width: max-content; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lx-os button { font: inherit; font-size: 12.5px; padding: 6px 16px; background: transparent; color: var(--muted); border: 0; cursor: pointer; }
.lx-os button[aria-pressed="true"] { background: var(--acc); color: var(--acc-text); }
html[data-os="win"] [data-os="mac"], html:not([data-os="win"]) [data-os="win"] { display: none !important; }

/* ---- 画面写真と動画 ---- */
.lx-shot img, .lx-shot video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #111;
}
.lx-shot--narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.lx-shot--half { max-width: 560px; margin-left: auto; margin-right: auto; }
.lx-shot video { aspect-ratio: auto; }
.lx-play { position: relative; }
.lx-play::after {
  content: "▶ " attr(data-label); position: absolute; left: 10px; top: 10px;
  font: 500 11px/1 var(--f-mono); letter-spacing: .04em;
  padding: 5px 8px; border-radius: 4px; background: rgba(0,0,0,.6); color: var(--acc);
  pointer-events: none;
}

/* ---- 4つのガイドへの入口（カード） ---- */
.lx-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 28px; }
.lx-part {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.lx-part:hover { border-color: var(--acc-edge); transform: translateY(-2px); }
.lx-part img { height: 26px; width: auto; align-self: flex-start; }
.lx-part b { font-weight: 600; font-size: 14px; }
.lx-part span { font-size: 12.5px; line-height: 1.75; color: var(--muted); }
.lx-part em { margin-top: auto; font-style: normal; font-family: var(--f-mono); font-size: 11.5px; color: var(--acc); }

/* ---- 手順の番号つきの絵（説明＋写真を横に） ---- */
.lx-step { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) { .lx-step--side { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---- 次のページへ ---- */
.lx-next { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.lx-next a { font-size: 13.5px; }

/* ---- テスト版の注意（テストユーザーに渡す版だけ。公開のときは消す） ---- */
.lx-beta { margin: 18px 0 0; padding: 12px 16px; border: 1px dashed var(--acc-edge); border-radius: var(--r); font-size: 13px; line-height: 1.8; color: var(--muted); }

/* 上の帯の「製品ページ」（言語の切り替えの隣。製品ページの「使い方ガイド」と対。11/10） */
.lp-hdr-link { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; text-decoration: none; white-space: nowrap; padding: 6px 2px; }
.lp-hdr-link:hover { color: var(--acc); }