/* guide.css — 使い方ページ専用の様式。
   トークンは index.html と同じ。紹介ページの様式（中央寄せ・広い余白）は手順書に向かないため、
   このページだけ左揃えの文書レイアウトにする。privacy.html の判断は持ち込まない。 */
:root{
  --paper:#FFFFFF;--paper-2:#F5F4F1;
  --ink:#17181A;--ink-soft:#54595E;--dim:#6B7075;
  --line:#E3E1DD;--line-2:#CFCCC6;
  --accent-ink:#A82B1E;--accent-soft:#FBD9D3;
  --r-xs:7px;--r-sm:11px;--r-md:16px;
  --jp:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:"Barlow Semi Condensed",var(--jp);
  --pad:clamp(20px,5vw,64px);
  --side:250px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{background:var(--paper);color:var(--ink);font-family:var(--jp);line-height:1.9;font-size:15px;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:var(--r-xs)}
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}

/* nav（他ページと共通） */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:12px;height:58px}
.nav-mark{width:26px;height:26px;flex:none;border-radius:var(--r-xs);display:block}
.nav-home{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.nav-name{font-family:var(--cond);font-weight:600;font-size:19px}
.nav-links{margin-left:auto;display:flex;gap:clamp(14px,3vw,28px);white-space:nowrap}
.nav-links a{font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.nav-links a:hover{color:var(--accent-ink)}
.nav-links a[aria-current]{color:var(--ink);font-weight:700}

/* layout：左にサイドメニュー、右に本文 */
.layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;padding-block:clamp(28px,4vw,48px) clamp(64px,9vw,110px)}
.side{position:sticky;top:74px;max-height:calc(100vh - 90px);overflow:auto;padding-right:4px;font-size:13.5px;scrollbar-width:none} /* スクロールは効かせ、バーだけ消す */
.side::-webkit-scrollbar{display:none}
.side-h{font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.04em;margin-bottom:10px}
.side-h+.side-h{margin-top:0}
.side .blk+.blk{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}

/* 環境の切り替え */
.os-pick{display:flex;flex-wrap:wrap;gap:6px}
.os-pick button{
  font:inherit;font-size:13px;line-height:1;padding:8px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink-soft);cursor:pointer;font-family:var(--cond);font-weight:600;letter-spacing:.01em;
}
.os-pick button[data-pick=""]{font-family:var(--jp);font-weight:700}
.os-pick button:hover{border-color:var(--ink-soft);color:var(--ink)}
.os-pick button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.side-note{margin-top:10px;font-size:12px;line-height:1.8;color:var(--dim)}

/* 目次 */
.toc ol{list-style:none}
.toc li{line-height:1.5}
.toc a{display:flex;gap:9px;padding:6px 8px 6px 10px;border-left:2px solid transparent;color:var(--ink-soft);text-decoration:none;border-radius:0 var(--r-xs) var(--r-xs) 0}
.toc a .n{font-family:var(--mono);font-size:11px;color:var(--dim);flex:none;padding-top:2px}
.toc a:hover{color:var(--ink);background:var(--paper-2)}
.toc a.is-current{color:var(--ink);font-weight:700;border-left-color:var(--accent-ink)}
.toc a.is-current .n{color:var(--accent-ink)}
.toc a.is-current-ch{color:var(--ink);font-weight:700} /* 節を読んでいる間、親の章は太字だけ（朱の縦棒は現在の節に取っておく） */
/* 節（h3）の階層。全章を展開した状態が既定で、章の右端のボタンで閉じられる */
.toc .ch-row{display:flex;align-items:stretch}
.toc .ch-row>a{flex:1 1 auto}
.toc .ch-tgl{flex:none;width:28px;border:0;background:none;cursor:pointer;color:var(--dim);border-radius:var(--r-xs);position:relative}
.toc .ch-tgl::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-50%,-65%) rotate(45deg)}
.toc li.is-closed .ch-tgl::before{transform:translate(-65%,-50%) rotate(-45deg)}
.toc .ch-tgl:hover{color:var(--ink);background:var(--paper-2)}
.toc li ol{margin:2px 0 8px 0}
.toc li.is-closed ol{display:none}
.toc li ol a{padding:4px 8px 4px 28px;gap:6px;font-size:12.5px;color:var(--dim)} /* 番号の前を広く、番号と見出しの間を狭く */
.toc li ol ol{margin:0 0 2px 0}
.toc li ol ol a{padding-left:46px;font-size:12px} /* 項。節よりさらに一段下げる */
.toc li ol a .n{min-width:0}
.toc li ol a.is-current{color:var(--ink);font-weight:700;border-left-color:var(--accent-ink)}
.side summary{display:none}

/* 本文 */
.doc{min-width:0;max-width:760px}
.doc-head h1{font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1.35;letter-spacing:-.02em}
.doc-head .lede{margin-top:14px;color:var(--ink-soft);font-size:15px}
/* 流れ（矢印は枠の外に置く） */
.flow{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 0;font-size:13px;color:var(--ink-soft)}
.flow span{position:relative;padding:3px 10px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--paper);line-height:1.7}
.flow span+span{margin-left:28px}
.flow span+span::before{content:"→";position:absolute;left:-21px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:13px}

.doc section{padding-top:clamp(44px,6vw,64px)}
.doc section>h2{font-weight:700;font-size:clamp(20px,2.8vw,26px);line-height:1.5;letter-spacing:-.015em;padding-bottom:12px;border-bottom:1px solid var(--line-2);display:flex;align-items:baseline;gap:14px}
.doc section>h2 .num{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent-ink);letter-spacing:.06em;flex:none}
.doc h3{font-weight:700;font-size:16.5px;margin-top:34px;padding-left:12px;border-left:3px solid var(--accent-soft);line-height:1.6}
.doc h3 .sn{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent-ink);letter-spacing:.04em;margin-right:10px}
.doc h4{font-weight:700;font-size:15px;margin-top:26px} /* 項。節（h3）の朱の縦棒は付けず、番号だけで階層を出す */
.doc h4 .sn{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--dim);letter-spacing:.04em;margin-right:10px}

.doc p{margin-top:14px;color:var(--ink-soft)}
.doc strong{color:var(--ink);font-weight:700}
.doc ul{margin-top:12px;padding-left:1.4em;list-style:disc}
.doc ul li{margin-top:6px;color:var(--ink-soft)}
.doc a{color:var(--accent-ink);text-underline-offset:.18em}
.doc a.xref{color:var(--ink-soft);text-decoration:underline dotted}
.doc a.xref:hover{color:var(--accent-ink)}
.ui{font-weight:700;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:0 6px;font-size:.92em;white-space:nowrap}
/* アイコンだけのボタン（鉛筆・電球・メニューなど。アプリと同じ形） */
.ui.ib{padding:0 4px}
.ico{width:1.15em;height:1.15em;vertical-align:-.24em;fill:currentColor}
.uishot{display:block;width:74px;height:38px} /* 表の中に画面の部品をそのまま出す（選択状態が分かるように、アイコンではなくボタンごと切り出す） */
.kbd{font-family:var(--mono);font-size:.9em;color:var(--ink)}

/* 手順 */
ol.steps{list-style:none;counter-reset:s;margin-top:16px}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 18px 46px;color:var(--ink-soft);margin-left:14px;border-left:1.5px solid var(--line)}
ol.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps>li::before{content:counter(s);position:absolute;left:-15px;top:1px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
ol.steps>li>p{margin-top:6px}
ol.steps>li>p:first-child{margin-top:0}
ol.steps b{color:var(--ink);font-weight:700}

/* 表 */
.tbl{overflow-x:auto;margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.8}
th,td{padding:10px 13px;border:1px solid var(--line-2);text-align:left;vertical-align:top;color:var(--ink-soft)}
th{background:var(--paper-2);font-weight:700;color:var(--ink);font-size:12.5px;white-space:nowrap}
td:first-child{color:var(--ink);font-weight:500}

/* ストア準備中のラベル（index.html の .plat-store .soon と同じ扱い） */
.soon{margin-left:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--accent-ink);white-space:nowrap}

/* 機能概要の表：説明が主役なので 2 列。狭い幅では行ごとの縦積みに変形する */
table.features td:first-child{width:11em}
@media (max-width:900px){
  .tbl:has(>table.features){overflow-x:visible}
  table.features thead{display:none}
  table.features,table.features tbody,table.features tr,table.features td{display:block;width:auto}
  table.features tr{border:0;border-bottom:1px solid var(--line-2)}
  table.features tr:first-child{border-top:1px solid var(--line-2)}
  table.features td{border:0;padding:4px 2px}
  table.features td:first-child{width:auto;padding-top:14px;font-weight:700;color:var(--ink)}
  table.features td:last-child{padding-bottom:14px}
}

/* 注意・補足 */
.note{margin-top:18px;padding:14px 18px;border:1px solid var(--line-2);border-left:3px solid var(--line-2);border-radius:0 var(--r-xs) var(--r-xs) 0;font-size:14px}
.note.warn{border-left-color:var(--accent-ink)}
.note .lead{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--dim);margin-bottom:2px}
.note.warn .lead{color:var(--accent-ink)}
.note p{margin-top:6px;font-size:14px}

/* 図 ---------------------------------------------------------------
   .shot      … アプリ画面。狭い（スマホ）と広い（タブレット・PC）の 2 枚を持ち、
                選んだ環境で片方を出す（iOS・Android＝狭い／iPadOS・macOS・Windows＝広い／未選択＝広い）
   .shot.os   … OS が出す画面（ペアリングの確認・権限・Bluetooth 設定）。data-os で環境別
   .diagram   … 撮影できない図解（LED のタイミング・電池の向き）
   画像が無い間は onerror で .is-empty が付き、「画像は準備中」の枠になる */
figure{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;background:var(--paper)}
figure img{display:block;height:auto;margin:0 auto;border-radius:var(--r-xs)}
figure.diagram img{width:100%;max-width:720px}
figure.os-dialog img{max-width:460px}
ol.steps figure.os-dialog img{max-width:360px} /* 手順の中では一回り小さく（簡略図なので可読） */
/* 写真に番号バッジを重ねる図（各部の名称）。SVG は画像と同じ座標系で上に重ねる */
.anno{position:relative;max-width:430px;margin:0 auto}
.anno img{display:block;width:100%;height:auto}
.anno svg{position:absolute;inset:0;width:100%;height:100%}
.fig-legend{margin-top:12px;list-style:none;font-size:13.5px;color:var(--ink-soft)}
/* 本文で使う番号付きの画面一覧（4-1）。図 3-1 の凡例と同じ見た目で、本文サイズに合わせる */
.fig-legend.screens{font-size:14.5px;color:var(--ink)}
.fig-legend li{display:flex;gap:10px;align-items:baseline;margin-top:6px}
.fig-legend .no{flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;transform:translateY(3px)} /* OS のダイアログの簡略図。実画面は掲載しない（権利上の扱いは CLAUDE.md） */
figure.shot img.wide{width:100%;max-width:720px}
figure.shot img.narrow{width:min(100%,300px)}
figure.shot img.narrow{display:none} /* JS が無いときの既定はデスクトップ表示 */
html[data-shot="mobile"] figure.shot img.wide{display:none}
html[data-shot="mobile"] figure.shot img.narrow{display:block}
/* バッジを重ねる図（4-2 の切り替え図など）：narrow/wide を .anno で包み、包みごと出し分ける */
figure.shot .anno.wide{max-width:720px}
figure.shot .anno.narrow{max-width:300px;display:none}
figure.shot .anno img.narrow,figure.shot .anno img.wide{display:block;width:100%}
/* .labels-right：注釈のラベルを画像の右の余白に置く。画像は SVG（viewBox 1240×1688）の中に
   <image> として埋め込み、1 枚のキャンバスとして描く（左 780 が画像、右がラベル） */
figure.shot .anno.labels-right{position:relative;max-width:480px;margin:0 auto;aspect-ratio:1240/1688}
figure.shot .anno.labels-right svg{position:absolute;inset:0;width:100%;height:100%}
html[data-shot="mobile"] figure.shot .anno.wide{display:none}
html[data-shot="mobile"] figure.shot .anno.narrow{display:block}
figure.is-empty .anno,figure.is-empty .fig-legend{display:none}
/* 図のタブ（モバイル表示／デスクトップ表示）。末尾のスクリプトが narrow/wide の両方を
   持つ figure.shot に挿入する。選択は全図で同期し lh-guide-shot に記憶。
   タブを一度も選んでいない間は環境の選択に追従（iOS・Android→モバイル、他→デスクトップ） */
.shot-tabs{display:flex;width:max-content;max-width:100%;margin:0 auto 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.shot-tabs button{font:inherit;font-size:12.5px;line-height:1;padding:7px 12px;border:0;background:var(--paper);color:var(--ink-soft);cursor:pointer}
.shot-tabs button+button{border-left:1px solid var(--line-2)}
.shot-tabs button:hover{color:var(--ink)}
.shot-tabs button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
figure.is-empty .shot-tabs{display:none}
figure .ph{display:none;padding:34px 16px;text-align:center;font-size:12.5px;color:var(--dim);border:1.5px dashed var(--line-2);border-radius:var(--r-xs);background:repeating-linear-gradient(45deg,var(--paper) 0 10px,var(--paper-2) 10px 20px)}
figure.is-empty img{display:none!important}
figure.is-empty .ph{display:block}
figcaption{margin-top:12px;font-size:13px;line-height:1.8;color:var(--ink-soft)}
figcaption .fno{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent-ink);margin-right:8px}

/* メッセージ：出る場面／意味／すること。モバイルでも読めるよう縦に積む */
.msgs{margin-top:16px;border-top:1px solid var(--line-2)}
.msg{padding:14px 0 16px;border-bottom:1px solid var(--line-2)}
.msg-t{font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.6}
.msg-t small{display:block;font-weight:500;font-size:12px;color:var(--dim);margin-top:2px}
.msg p{margin-top:6px;font-size:14px}
.msg p b{color:var(--ink);font-weight:700;margin-right:6px}
.msg .btns{margin-top:6px;font-size:13px;color:var(--dim)}

/* 環境で入れ替わるブロック */
.os-block{margin-top:14px;padding:12px 16px;border-left:3px solid var(--line-2)}
.os-block>p:first-of-type{margin-top:0}
.os-block .os-tag{margin-bottom:6px}
.os-block figure{margin-top:12px}
html[data-os] .os-block{padding-left:0;border-left:0}

/* 環境の印 --------------------------------------------------------
   data-os="ios ipados" のように空白区切りで付ける。
   環境を選ぶと、印のある要素のうち選んだ環境を含まないものが消える。
   未選択のときは全部見え、.os-tag（環境名）が付いて見える。 */
.os-tag{display:inline-block;font-family:var(--cond);font-weight:600;font-size:11.5px;line-height:1;letter-spacing:.02em;color:var(--ink-soft);border:1px solid var(--line-2);border-radius:5px;padding:4px 7px;margin-right:8px;vertical-align:middle;white-space:nowrap}
tr .os-tag{margin-right:0}
html[data-os] .os-tag{display:none}
html[data-os="ios"]     [data-os]:not([data-os~="ios"]),
html[data-os="ipados"]  [data-os]:not([data-os~="ipados"]),
html[data-os="macos"]   [data-os]:not([data-os~="macos"]),
html[data-os="android"] [data-os]:not([data-os~="android"]),
html[data-os="windows"] [data-os]:not([data-os~="windows"]){display:none}
/* 環境で入れ替わる表は、選択中は OS 列が要らない */
html[data-os] table.by-os th.os,html[data-os] table.by-os td.os{display:none}

.close{margin-top:clamp(48px,7vw,72px);padding-top:22px;border-top:1px solid var(--line-2)}
.close p{font-size:13.5px;color:var(--dim)}

/* footer（他ページと共通） */
.foot{border-top:1px solid var(--line);padding:34px 0 52px}
.foot-in{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center}
.foot-name{display:flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:600;font-size:17px;margin-right:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{font-size:13px;color:var(--ink-soft);text-decoration:none}
.foot a:hover{color:var(--accent-ink)}
.copy{margin-top:22px;font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.05em}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:0}
  .side{position:static;max-height:none;overflow:visible;padding:0 0 22px;border-bottom:1px solid var(--line-2)}
  .side .blk+.blk{margin-top:18px;padding-top:0;border-top:0}
  /* 狭い幅では目次を畳む */
  .side summary{display:list-item;cursor:pointer;font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.04em}
  .side details .side-h{display:none}
  .toc{margin-top:8px}
  .doc{max-width:none}
  .doc section{padding-top:clamp(36px,7vw,52px)}
}
@media (max-width:480px){
  .nav-name{display:none}
  .nav-links a{font-size:13px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 5-18 の早見表。アプリの表示をそのまま並べるための色と印。色は画面から実測した値 */
.sw{--st-green:#16A34A;--st-orange:#D97706;--st-red:#DC2626;--st-grey:#DEDBD8}
.sw th:first-child,.sw td:first-child{white-space:nowrap}
.sw .dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin-right:5px}
.sw .dot+.dot{margin-left:3px}
.sw .dot.g{background:var(--st-green)}.sw .dot.k{background:var(--st-grey)}
.sw .dot.o{background:var(--st-orange)}.sw .dot.r{background:var(--st-red)}
.ico.o{color:#D97706}.ico.r{color:#DC2626}.ico.k{color:var(--dim)}.ico.b{color:#2563EB}.ico.k2{color:var(--line-2)}

/* 表のセル内の箇条書き（6-1 の注意事項など） */
.cells td:first-child{white-space:nowrap}
.cells td ul{margin:0;padding-left:1.1em}
.cells td li{margin-top:2px}
.cells td li:first-child{margin-top:0}