/* ============================================================
   STREAP -- unified stylesheet
   Viewer / Editor / Editor_strip 共通  build 2026-07-27-a

   構成 (この順に読むこと):
     LAYER 0  tokens          :root 変数
     LAYER 1  page frame      新デザインの外枠 (カジさん作 style.css 由来)
     LAYER 2  tile stage      タイル描画 (旧 viewer_v3.html の <style> 由来)
     LAYER 3  widgets         フォーム部品 (widget proposal v2 由来)

   台帳対応:
     E3  アイコン参照名を実ファイル名へ修正
         ic_up/ic_down/ic_left/ic_right -> navU/navD/navL/navR
         rb_ur -> streap_ur
     E4  --bg / --line ほかの互換トークンを LAYER 0 に定義
   注意 (:is の詳細度):
     :is() は「引数のうち最も詳細度が高いもの」の詳細度を採る。
     LAYER 3 の textarea を共通タグ列から外しているのはこのため。
     詳細は LAYER 3 の該当箇所のコメントを参照。
   ============================================================ */


/* ============================================================
   LAYER 0 -- tokens
   ============================================================ */
/* ============================================================
   ★★★★ 第169便 (カジさんご報告 → 原因が特定できました)
   ------------------------------------------------------------
   > LOD の文字の大きさ ＝ ブラウザの拡大ではなく、
   > iOS Safari の Text Autosizing（文字の自動ふくらませ）でした。
   > 根拠: 16px の欄では visualViewport.scale が 1 のままなのに
   >   文字が大きくなる。引き金は clientWidth が 402 → 536 に変わること。

   ★★★★ こちらは **三度、文字の大きさを直しては外して**いました
     （第114便・第163便）。原因は文字の大きさではなく、
     **iOS が勝手に文字をふくらませる仕組み**でした。
     ★★★ STREAP は文字の大きさを自分で決めています（LOD）。
       そこへ端末が別の倍率をかけると、**近さの計算ごとずれます**。

   ★★★★ `none` ではなく **`100%`** です。
     ★★★ `none` にすると、端末の「文字を大きく」の設定まで効かなく
       なります —— 目の悪い方から、読む道を取り上げることになります。
     ★★ `100%` は「勝手にふくらませない」だけで、
       その方が自分で選んだ大きさは、そのまま残ります。
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* ============================================================
     ★★★ 第117便 (カジさんご指示): 画面の重なりの決まり
     ------------------------------------------------------------
     > トップパネルは常にボトムシートより手前。
     > トップパネルからボトムシートを呼ぶことは無いが、
     > ボトムシートからトップパネルを呼ぶことはある。

     ★★★ **この5つの名前は、いままで1つも決まっていませんでした。**
       `.topPanel` も `.btmsheet` も `z-index: var(--z-panel)` と
       書いてありましたが、`--z-panel` はどこにも定義されておらず、
       **どちらも `auto`** —— つまり重なりは **書いてある順**だけで
       決まっていました。ですので `#sheet` のほうが後ろに書いてある
       ぶん、**シートがトップパネルより手前**でした。
       「手前に出るはず」と読める書きかたなのに、そうなっていない —
       いちばん見つけにくい形です（台帳 7-166 と同じ）。

     ★ いまの見えかたを、そのまま数にしてあります。変えたのは
       **トップパネルをシートより前へ出した1点だけ**です。
     ============================================================ */
  --z-bars:  300;   /* 上下の帯・側方メニュー */
  --z-tools: 320;   /* コントロールパッドまわり */
  --z-pad:   330;   /* パッドの箱 */
  --z-sheet: 400;   /* ボトムシート */
  --z-float: 450;   /* 浮かぶ道具箱 (シートの上・トップパネルの下) */
  --z-panel: 500;   /* ★★★ トップパネル。常にいちばん手前 */
  /* ★★★ 第119便a: ひとこと (Toast)。**パネルよりも前**です。
     終わったことを伝える1行が隠れてしまっては、意味がありません。
     ★ 押す所はありませんので、前に出しても道をふさぎません
     (`pointer-events: none`)。 */
  --z-toast: 600;
  --z-dbg:   900;   /* 開発中の覗き窓 */

  /* --- sizes --- */
  --hdr-h: 70px;        /* app-header */
  --hdr2-h: 50px;       /* second-header (Viewer) */
  /* ★ 第103便 (カジさんご要望1): スマホで上下が厚く、タイルの編集がしにくい、と。
     **保存ボタン (40px) が入るぎりぎり**まで詰めました。上下 3px です。
     ★ ここと `.saveBar` の padding は**対**です。片方だけ変えると、
       ボタンが帯からはみ出すか、また厚くなります (台帳 7-87) */
  --savebar-h: 46px;    /* saveBar (Editor)。保存ボタン 40px + 上下 3px */
  --ftr-h: 190px;       /* footer */
  --side-w: 60px;       /* sideMenu */
  --pad-box: 190px;     /* controlPad box */
  /* ★ 第101便 (01-03): ズームの帯の、下からの高さ。
     第100便まで下に 50px の情報フッター (ユーザーID / info) がありました。
     それをハンバーガーへ移したので、そのぶん下ります。
     ★ ここだけ変えれば、帯の高さを調整できます (カジさんの管轄) */
  --lens-bottom: 6px;
  --pad-wrap: 140px;    /* padWrap circle */
  --icon-l: 60px; --icon-m: 40px; --icon-s: 25px;
  --logo-w: 200px; --logo-h: 50px;

  /* --- gap y position --- */
  --gap-y: 5px;

  /* --- colors & shadows --- */
  --ink: #003366;       /* navy: text / edges */
  --panel-bg: rgba(204, 255, 204, 0.8); /* topPanel: #ccffcc 透過率80% */
  /* ★ 第104便: 上と同じ色の、透けないほう。パネルの中で
     **下に貼りつく「閉じる」の帯**に使います（透けると、下を流れる
     中身がボタンに重なって読めません）。★ 上の色を変えたら、こちらも */
  --panel-bg-solid: #ccffcc;
  --drop-bg: #cccccc;
  --shadow: 0 2px 8px rgba(0,51,102,0.25);

  /* --- 第75便: 移動サークル (カジさんご指示 2026-08-06) ---
     ・下のタイルが透けて見えるように、円の板を半透過に
     ・つまみは #2a8371。中心を少し明るくする
     ここの3つを変えれば、見えかたは全部変わります */
  --pad-alpha: 0.55;        /* 円の板の濃さ。1 で元どおり不透明 */
  --pad-knob: #2a8371;      /* つまみの色 */
  --pad-knob-hi: #4dbba1;   /* つまみの中心 (明るいほう) */
  --drop-shadow: drop-shadow(0 2px 5px rgba(0,51,102,0.35)); /* 透過PNG用輪郭影 */

  /* --- tile stage (LAYER 2) --- */
  --frame: #ffffff;        /* タイルの白フチ */
  --tile-frame: 5px;       /* 白フチの太さ。.selLayer の inset がこれに揃う (台帳 J3) */
  --seam: #99ccff;         /* open端の継ぎ目の光 */
  --active-color: #0088cc; /* アクティブタイルの外周線 / focusDot */
  --edit-ico: #003366;     /* タイル隅の鉛筆 */
  --tile-pending: #eef3f8; /* 取得中の下地 */
  --tile-missing: #d5dee6; /* 取得失敗の下地 */

  /* --- 互換トークン (台帳 E4)
         editor.html 9箇所 / viewer 2箇所 / editor_strip.html 3箇所 が
         参照しているが未定義だったもの。旧ピンク系から現行ネイビー系へ
         読み替えて定義する。参照側には手を入れない。 --- */
  --bg: #eef3f8;
  --line: #99b3cc;
  --alt: #f2f6fa;
  --alt-ink: #5a7a99;
  --accent: #339966;
  --accent-weak: #eaf7f0;
  --tap-min: 44px;
  --tap-gap: 8px;
  --bottom-gap: var(--gap-y);

  /* --- form fields (LAYER 3) --- */
  --fld-h: 48px;
  --fld-r: 12px;
  --fld-bg: #ffffff;
  --fld-bd: #99b3cc;
  --fld-fs: 16px;             /* 16px 以上で iOS の自動ズームが止まる */
  --lbl-fs: 13px;
  --muted: #5a7a99;
  --danger: #cc3333;

  /* --- state colors: 選択中と確定は必ず別色 --- */
  --c-sel: #0088cc;
  --c-sel-bd: #ffffff;
  --c-sel-tint: #e4f2fa;
  --c-ok: #339966;
  --c-ok-tint: #eaf7f0;

  /* --- cards / tools --- */
  --card-r: 14px;
  --tool-sz: 56px;

  /* --- body text area --- */
  --body-lines: 5;
  --body-lh: 1.8;

  /* --- LOD tints --- */
  --lod0: #3366cc;
  --lod1: #339966;
  --lod2: #cc9933;
  --lod3: #cc3399;
  /* 第42便: 段を5まで広げたぶんの色。
     手前の4色と混ざらない色みを選びました */
  --lod4: #7c5cff;
  --lod5: #2b7a78;

  /* --- element kind accents --- */
  --k-text: #3366cc;
  --k-image: #cc6633;
  --k-sticker: #9933cc;
  --k-yt: #cc3333;
  --k-draw: #339999;
}


/* ============================================================
   LAYER 1 -- page frame
   ============================================================ */
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { font-family: system-ui, sans-serif; color: var(--ink); background: var(--bg); }

/* Viewer / Editor は全画面固定。editor_strip は一覧なので縦スクロールを残す */
html:has(body.page-viewer), html:has(body.page-editor) { height: 100%; }
body.page-viewer, body.page-editor {
  height: 100%; overflow: hidden; overscroll-behavior: none;
}

/* タイル面と固定バーだけ選択不可。パネル内の入力欄には及ぼさない */
body.page-viewer #fsPreview,
.app-header, .second-header, .footer, .sideMenu {
  -webkit-user-select: none; user-select: none;
}

/* 旧sheetの * { box-sizing:border-box } を、タイル面とパネル内だけに限定して復元。
   tile_render.js は % 指定 + padding を前提に組み立てるため border-box が要る */
#fsPreview, #fsPreview *,
.topPanel *, .btmsheet * { box-sizing: border-box; }

/* ============ tile stage (bottom of everything) ============ */
#fsPreview {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  margin: 0; padding: 0; border: none; overflow: hidden; z-index: 0;
  background: var(--bg);
  touch-action: none;
}
#stage { position: absolute; inset: 0; overflow: hidden; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

/* ============ fixed transparent bars (z 300) ============ */
.app-header, .second-header, .footer {
  position: fixed; left: 0; right: 0; margin: 0; padding: 0;
  background: transparent; pointer-events: none; z-index: var(--z-bars);
  display: flex; align-items: center;
}
.app-header  { top: 0; height: var(--hdr-h); }
.second-header { top: var(--hdr-h); height: var(--hdr2-h); }

.footer {
  bottom: var(--gap-y);
  height: var(--ftr-h);
  align-items: flex-end;
}
.app-header > *, .second-header > *, .footer > * { pointer-events: auto; }

/* ============ Editor: saveBar (z 300) ============ */
/* 第8便 (カジさん指摘8): スマホで画面を大きく塞いでいたので、
   保存ボタン1つぶんの高さまで詰め、幅は90%の白半透過の角丸にした。
   左右と下にタイルが覗くので、下の絵が見えたまま編集できる。 */
.saveBar {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--hdr-h) + 4px);
  height: var(--savebar-h); width: 90%;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: var(--shadow);
  border: none; border-radius: 14px;
  z-index: var(--z-bars);
  display: flex; align-items: center;
  /* ★ 第103便: 上下 10px → 3px。左右は文字のために残します。
     ★ --savebar-h (46px) = 保存ボタン 40px + 上下 3px。**対で決まります** */
  box-sizing: border-box; padding: 3px 10px;
  overflow: hidden; pointer-events: auto;
}

/* ============================================================
   ★★★ 第113便 (カジさんご報告): **まだできていないタイル**の1行
   ------------------------------------------------------------
   「＋」は2段構えで、移った先で［保存］を押すまでタイルはできません。
   押さずに離れると、**通し番号だけ進み、タイルはできず、エラーも
   出ません**。ですので、その場ではっきり言います。

   ★ 置き場は保存の帯のすぐ下。**帯と同じ幅・同じ角**にそろえます。
     出し入れは st_edit.js の `paintNotMade()` が1か所で決めます。
   ★★ `hidden` が効くように、`display` は `[hidden]` で消します
     (`display: block` を後から当てると `hidden` が負けます。台帳 7-116)。
   ============================================================ */
.saveNote {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--hdr-h) + 4px + var(--savebar-h) + 4px);
  width: 90%;
  box-sizing: border-box; padding: 6px 12px;
  background: rgba(255, 244, 214, 0.95);
  border: 1px solid rgba(180, 140, 40, 0.55);
  border-radius: 12px;
  color: #5a4300; font-size: 13px; line-height: 1.4;
  box-shadow: var(--shadow);
  z-index: var(--z-bars);
}
.saveNote[hidden] { display: none; }

/* ============================================================
   ★★★ 第114便 (カジさんご報告): 拡大して戻らなくなったときの帯
   ------------------------------------------------------------
   ★ 置き場は **窓 (visual viewport) の左上**です。位置と大きさは
     st_ui.js の `Zoom.paint()` が、そのつど当てます
     （ページの左上に置くと、寄っている窓の外へ出てしまいます）。
   ★★ いちばん上に出します。ここが押せないと、逃げ道がありません。
   ============================================================ */
.zoomStuck {
  position: fixed; top: 0; left: 0;
  box-sizing: border-box; padding: 8px 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255, 244, 214, 0.97);
  border-bottom: 2px solid rgba(180, 140, 40, 0.7);
  color: #5a4300; font-size: 14px; line-height: 1.4;
  z-index: 99999;
}
.zoomStuck[hidden] { display: none; }
.zoomStuck .zsText { flex: 1 1 auto; min-width: 0; }

/* 1行だけ。はみ出したぶんは指ではらってずらす。
   スクロールバーは出さない (帯が細くなり、文字が読みにくくなるため)。
   横だけを巻物にするので touch-action は pan-x。 */
.titleArea {
  flex: 1; min-width: 0; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  white-space: nowrap;
  display: flex; align-items: center;
  box-sizing: border-box; padding-right: 8px;
  touch-action: pan-x;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.titleArea::-webkit-scrollbar { display: none; }
.titleArea:active { cursor: grabbing; }
.titleArea .subText {
  white-space: nowrap;
  font-weight: 700;
}
/* #modeStatus は第8便から空。器は残すが場所は取らせない */
#modeStatus:empty { display: none; }

.saveArea {
  flex: 0 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* 複数行対応の保存ボタン */
#btnSave {
  white-space: nowrap;
  line-height: 1.2;
  padding: 4px 10px;
  text-align: center;
  width: 100%;
  max-height: 100%;
}

/* ============ sideMenu (側方縦メニュー: 60px幅) ============ */
.sideMenu {
  position: fixed;
  top: calc(var(--hdr-h) + var(--hdr2-h)); /* デフォルト(Viewer) */
  bottom: calc(var(--pad-box) + var(--gap-y));
  width: var(--side-w);
  margin: 0; padding: 0; background: transparent;
  overflow-y: auto; overflow-x: hidden; z-index: var(--z-bars);
  display: flex;
  flex-direction: column;                  /* DOM順=画面上から下へ積む */
  justify-content: flex-end;               /* 第7便: 親指に近い下へ寄せる。
                                              上からの並び順は変えない。
                                              ボトムシートに隠れる分は、
                                              シート操作中は触らない前提。 */
  align-items: center;
  /* 第37便 (カジさんご報告): ここは **60px 幅の縦長の帯**で、
     アイコンが無い所も指を受け取っていました。
     スマホではタイルの左上がこの帯と重なるため、
     編集の鉛筆が押せなくなっていました
     (PC ではタイルが小さく、帯の外に出るので気づけませんでした)。

     帯そのものは指を受け取らず、**中のボタンだけ**が受け取ります。 */
  pointer-events: none;
}
.sideMenu > * { pointer-events: auto; }
/* エディター時は top を saveBar の高さに合わせて切り替え */
body.page-editor .sideMenu {
  top: calc(var(--hdr-h) + var(--savebar-h));
  /* ★★ 第103便: 下端は `--pad-box + --gap-y` で決まります。ところが同じ便で
     エディターの `--pad-box` を輪まで詰めたので、**そこに含まれていた空きが
     無くなり**、いちばん下のアイコンとパッドの輪のすきまが
     **30px → 5px** になりました。指が触れ違えます。

     ★ 詰めたぶんを、ここで返します。**見た目のすきまは、これまでと同じ**です。
     ★ カジさんのご要望は「パッドを左下へ、帯を長く」でした。
       **横メニューまで下ろす**とは伺っていません (台本 D2b が見張ります)。 */
  bottom: calc(var(--pad-box) + var(--gap-y) + 25px);
}

body.hand-left  .sideMenu { left: 10px; }
body.hand-right .sideMenu { right: 10px; }

/* ============ icons & text pills ============ */
.iconLarge, .iconMiddel, .iconSmall {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; cursor: pointer;
  margin: 5px; padding: 0;
  filter: var(--drop-shadow);
}
.iconLarge  { width: var(--icon-l); height: var(--icon-l); }
.iconMiddel { width: var(--icon-m); height: var(--icon-m); }
.iconSmall  { width: var(--icon-s); height: var(--icon-s); padding: 0; margin: 0; }

/* ロゴ共通 */
#hdrLogo {
  height: var(--logo-h); width: var(--logo-w); margin: 5px;
  background-color: transparent; background-repeat: no-repeat;
  background-position: center; background-size: contain;
  position: absolute; left: 50%; transform: translateX(-50%);
  filter: var(--drop-shadow);
}
body.page-viewer #hdrLogo, body:not(.page-editor) #hdrLogo {
  background-image: url('ui_images/streap_logo_viewer.png');
}
body.page-editor #hdrLogo {
  background-image: url('ui_images/streap_logo_editor.png');
}

/* UI画像一元管理 */
#hdrBack        { background-image: url('ui_images/ic_hdrBack.png'); }
#hdrPlus        { background-image: url('ui_images/ic_plus.png'); }
#hdrMenuBtn     { background-image: url('ui_images/ic_menu.png'); }
#zoomEdit       { background-image: url('ui_images/ic_edit.png'); }
#SyncBtn        { background-image: url('ui_images/ic_sync.png'); }
#hdrOpen        { background-image: url('ui_images/ic_open.png'); }

/* zoomEdit は「読書ズーム中 かつ 編集権あり」のときだけ JS が出す */
#zoomEdit { display: none; }
#zoomEdit.is-shown { display: inline-flex; }

/* エディター用アイコン */
#icon_addElement { background-image: url('ui_images/ic_addE.png'); }
#icon_links      { background-image: url('ui_images/ic_links.png'); }
#icon_tile       { background-image: url('ui_images/ic_tile.png'); }
#icon_paint      { background-image: url('ui_images/ic_paint.png'); }
#icon_Time       { background-image: url('ui_images/ic_time.png'); }

/* レーティングバッジ (E3: ur は streap_ur.png が実名) */
#ratingBadge { background-image: url('ui_images/rb_g.png'); }
#ratingBadge[data-rating="g"],    #ratingBadge.rate-g    { background-image: url('ui_images/rb_g.png'); }
#ratingBadge[data-rating="pg12"], #ratingBadge.rate-pg12 { background-image: url('ui_images/rb_pg12.png'); }
#ratingBadge[data-rating="r15"],  #ratingBadge.rate-r15  { background-image: url('ui_images/rb_r15.png'); }
#ratingBadge[data-rating="r18"],  #ratingBadge.rate-r18  { background-image: url('ui_images/rb_r18.png'); }
#ratingBadge[data-rating="ur"],   #ratingBadge.rate-ur   { background-image: url('ui_images/streap_ur.png'); }

/* 4方向移動ボタン(Viewer) & 4エッジ編集ボタン(Editor) */
#navU, #navD, #navL, #navR,
#arrN, #arrS, #arrW, #arrE {
  margin: 0; padding: 0; filter: var(--drop-shadow);
}

/* E3: 実ファイル名は navU / navD / navL / navR */
#navU { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background-image: url('ui_images/navU.png'); }
#navD { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-image: url('ui_images/navD.png'); }
#navL { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-image: url('ui_images/navL.png'); }
#navR { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-image: url('ui_images/navR.png'); }

/* 行き先の無い方向は薄く出す(押しても何も起きないことを先に見せる) */
#navU.is-dead, #navD.is-dead, #navL.is-dead, #navR.is-dead { opacity: 0.28; }

/* ============================================================
   第20便: タイルについてくる 4エッジボタン (NWES)
   ------------------------------------------------------------
   コントロールパッドの隅から、タイルの四辺の真ん中へ引っ越した。
   辺はタイルのものなので、辺のところに在るのが素直 (憲法19条)。

   .edgeBox は .selLayer の中に入る (台帳 3-4)。.selLayer は
   タイルと一緒に動いて一緒に伸び縮みするので、**位置を合わせる
   コードは要らない**。ただしそのままだとアイコンまで拡大される。
   #world の --zoom (st_grid.js が書く) で 1/zoom を掛け返し、
   画面上の大きさを一定に保つ。
   ============================================================ */
.edgeBox {
  position: absolute; inset: 0;
  pointer-events: none;      /* 通り道はふさがない。ボタンだけが受ける */
  z-index: 7;                /* .selLayer(6) の中。#selBox(900) より下 */
}
.edgeSlot {
  position: absolute;
  width: var(--icon-s); height: var(--icon-s);
  /* 位置は四辺の真ん中。translate は自分の大きさの半分ぶんなので、
     scale と併せても中心は動かない */
  transform-origin: 50% 50%;
}
.edgeSlot[data-slot="N"] { left: 50%; top: 0;
  transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1))); }
.edgeSlot[data-slot="S"] { left: 50%; top: 100%;
  transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1))); }
.edgeSlot[data-slot="W"] { left: 0; top: 50%;
  transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1))); }
.edgeSlot[data-slot="E"] { left: 100%; top: 50%;
  transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1))); }

.edgeBtn {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  pointer-events: auto;
  filter: var(--drop-shadow);
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
}

/* --- 絵は状態で変わる ---
   open   … ic_arrN.png など (基本の絵)
   closed … 同じ絵を薄く    (押しても何も起きないことを先に見せる: 台帳 G6)
   linked … ic_arrN_linked.png (字と背景を反転したもの)
   portal … ic_arrN_portal.png (グリーン系)
   linked / portal の絵はカジさん作。S3 の ui_images に置いてあります。 */
#arrN { background-image: url('ui_images/ic_arrN.png'); }
#arrS { background-image: url('ui_images/ic_arrS.png'); }
#arrW { background-image: url('ui_images/ic_arrW.png'); }
#arrE { background-image: url('ui_images/ic_arrE.png'); }

#arrN[data-state="linked"] { background-image: url('ui_images/ic_arrN_linked.png'); }
#arrS[data-state="linked"] { background-image: url('ui_images/ic_arrS_linked.png'); }
#arrW[data-state="linked"] { background-image: url('ui_images/ic_arrW_linked.png'); }
#arrE[data-state="linked"] { background-image: url('ui_images/ic_arrE_linked.png'); }

#arrN[data-state="portal"] { background-image: url('ui_images/ic_arrN_portal.png'); }
#arrS[data-state="portal"] { background-image: url('ui_images/ic_arrS_portal.png'); }
#arrW[data-state="portal"] { background-image: url('ui_images/ic_arrW_portal.png'); }
#arrE[data-state="portal"] { background-image: url('ui_images/ic_arrE_portal.png'); }

.edgeBtn[data-state="closed"] { opacity: 0.32; }

/* ---- ★★★ 第111便: ビューワーの「つなげる辺」の印
     ------------------------------------------------------------
     エディターの矢印は **id** で絵を持っています (#arrN など)。
     ビューワーの印は id を持てません（真ん中のタイルが変わるたびに
     作り直されるので、id が2つになる瞬間があります）。
     ★ ですので **名札 (`data-edge`) で同じ絵**を当てます。

     ★★ 詳細度: `#arrN` は (1,0,0)、こちらは (0,2,0) ですので、
       **エディターには何も影響しません**（あちらが勝ちます）。
     ★ 少し明るくして、エディターの矢印と見分けられるようにしてあります。 ---- */
.edgeBtn[data-edge="N"] { background-image: url('ui_images/ic_arrN.png'); }
.edgeBtn[data-edge="S"] { background-image: url('ui_images/ic_arrS.png'); }
.edgeBtn[data-edge="W"] { background-image: url('ui_images/ic_arrW.png'); }
.edgeBtn[data-edge="E"] { background-image: url('ui_images/ic_arrE.png'); }
.edgeAsk[hidden] { display: none; }
.edgeAsk {
  animation: edgeAskPulse 2.4s ease-in-out 0s 3;
}
@keyframes edgeAskPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .edgeAsk { animation: none; }
}

/* 第24便: つながっていない辺の + 。矢印と重ならないよう、
   タイルの外がわへ少しずらして置く。大きさは矢印と同じく一定
   (.edgeSlot ごと 1/zoom を掛け返しているため) */
.edgePlus {
  position: absolute;
  width: 22px; height: 22px;
  margin: 0; padding: 0;
  pointer-events: auto;
  filter: var(--drop-shadow);
  background-image: url('ui_images/ic_plus.png');
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
  opacity: 0.85;
}
.edgePlus[hidden] { display: none; }
.edgeSlot[data-slot="N"] .edgePlus { left: 50%; bottom: 100%;
  transform: translateX(-50%); margin-bottom: 3px; }
.edgeSlot[data-slot="S"] .edgePlus { left: 50%; top: 100%;
  transform: translateX(-50%); margin-top: 3px; }
.edgeSlot[data-slot="W"] .edgePlus { right: 100%; top: 50%;
  transform: translateY(-50%); margin-right: 3px; }
.edgeSlot[data-slot="E"] .edgePlus { left: 100%; top: 50%;
  transform: translateY(-50%); margin-left: 3px; }

/* --- 隣の名前。つながっている辺にだけ添える --- */
.edgeName {
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
  /* 遠いときの既定。近いときは下の data-zband="near" が上書きする */
  font-size: 10px;
  /* 長い名前で画面をまたがない。全部は title に入っているので消えはしない */
  max-width: 92px; overflow: hidden; text-overflow: ellipsis;
}
.edgeName[hidden] { display: none; }

/* 遠い = タイルが小さい。名前はタイルの外側へ (重ねない) */
.edgeSlot[data-slot="N"] .edgeName { bottom: 100%; left: 50%; transform: translateX(-50%); }
.edgeSlot[data-slot="S"] .edgeName { top: 100%; left: 50%; transform: translateX(-50%); }
.edgeSlot[data-slot="W"] .edgeName { right: 100%; top: 50%; transform: translateY(-50%); }
.edgeSlot[data-slot="E"] .edgeName { left: 100%; top: 50%; transform: translateY(-50%); }

/* 近い = タイルが大きい。名前はどの辺もアイコンの下、字も大きく */
/* ============================================================
   ★★ 第97便c: 7×7 のとき (data-wide="on")
   ------------------------------------------------------------
   カジさんご指示:
     「5×5まではタイルのEdgeの文字を活かし、7×7でEdgeの文字を消して、
       タイルの中央に大きく表示ではどうでしょうか？」

   ★ タイル1枚が 50px ほどになる帯です。**辺の名前も本文も読めません。**
     ですので、辺の名前は消し、本体は沈め、**1つだけ**大きく出します。
   ★ 出すのは「遠いときだけの文」、無ければタイルのなまえ (JS が入れます)。
   ★ 本体を消さずに**薄くする**のは、第96便の検討書の案Bです。
     重ねるより、沈めるほうが壊れません (下地の色が分からないため)。
   ============================================================ */
#world[data-wide="max"] .edgeName { display: none; }
#world[data-wide="max"] .edgeSlot { opacity: 0.35; }
#world[data-wide="on"] .body,
#world[data-wide="max"] .body { opacity: 0.18; }
#world[data-wide="on"] .card,
#world[data-wide="max"] .card { opacity: 0; }

.wideCap {
  position: absolute; inset: 6%;
  display: none;
  align-items: center; justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 34px;          /* 世界ごと縮むので、ここは大きく持つ */
  line-height: 1.25;
  overflow: hidden;
  color: #2b2330;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  pointer-events: none;
  z-index: 5;
}
#world[data-wide="on"] .wideCap,
#world[data-wide="max"] .wideCap { display: flex; }

#world[data-zband="near"] .edgeName {
  font-size: 13px;
  top: 100%; bottom: auto; left: 50%; right: auto;
  transform: translateX(-50%);
  margin-top: 2px;
  max-width: 120px;
}
/* 東西は真ん中ぞろえだと名前が画面の外へはみ出す。
   アイコンの下のまま、タイルの内側へ伸ばす */
#world[data-zband="near"] .edgeSlot[data-slot="E"] .edgeName {
  left: auto; right: 0; transform: none;
}
#world[data-zband="near"] .edgeSlot[data-slot="W"] .edgeName {
  left: 0; right: auto; transform: none;
}

.roundText {
  height: var(--icon-m); display: inline-flex; align-items: center;
  margin: 0; padding: 0 14px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 13px;
  border: none; border-radius: 999px; box-shadow: var(--shadow);
  white-space: nowrap; cursor: default;
}
button.roundText { cursor: pointer; }
.roundText:empty { display: none; }

.barLeft  { margin-right: auto; display: flex; align-items: center; }
.barRight { margin-left: auto; display: flex; align-items: center; }

/* ============ footer internals ============ */
.zoomLens {
  position: absolute; bottom: var(--lens-bottom); height: 64px;
  display: flex; align-items: center; padding: 0; box-sizing: border-box;
  z-index: var(--z-tools);
  background-image: url('ui_images/zlback.jpg');
  background-repeat: no-repeat; background-position: center center;
  background-size: max(100%, 1024px) 60px;
  border-radius: 32px; border: 2px solid #ffffff; box-shadow: var(--shadow);
  overflow: visible; pointer-events: none;
}
body.hand-left  .zoomLens { left: calc(var(--pad-box) + 20px); right: 10px; }
body.hand-right .zoomLens { left: 10px; right: calc(var(--pad-box) + 20px); }

.zoomLens input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 64px; background: transparent; margin: 0;
  cursor: pointer; pointer-events: auto; overflow: visible;
  touch-action: none;
}
.zoomLens input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 64px;
  background: url('ui_images/zlFader.png') no-repeat center / contain;
  border: none; cursor: pointer;
}
.zoomLens input[type="range"]::-moz-range-thumb {
  width: 20px; height: 64px;
  background: url('ui_images/zlFader.png') no-repeat center / contain;
  border: none; cursor: pointer;
}

/* ★★★ 第127便 (カジさんご提案): フェーダーとコントロールパッドの
   **あいだの帯**。触っても何も起きません。ここに指が着いても、
   地図は動きません。
   ★ 幅を変えたいときは width を。要らなくなったら display:none で消せます。
   ★ 中身はありません（`aria-hidden`）ので、読み上げにも出ません。 */
#zlGuard {
  position: absolute; bottom: var(--lens-bottom); height: 64px; width: 26px;
  z-index: var(--z-tools); pointer-events: auto; background: transparent;
}
body.hand-left  #zlGuard { left: calc(var(--pad-box) - 3px); }
body.hand-right #zlGuard { right: calc(var(--pad-box) - 3px); }

/* 第40便: 近さの段の変わり目に置く目盛り。
   フェーダーは「いまどのくらいの近さか」を見せる道具なので、
   読む相手 (段の境目) が要ります。触っても邪魔をしません。 */
.zoomLens .zlTick {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 26px;
  background: rgba(255, 255, 255, .85);
  border-radius: 1px;
  /* 帯の絵が明るくても暗くても読めるように、細い影をまわりに置きます */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  pointer-events: none;
  font-size: 9px; font-weight: 700; line-height: 1;
  color: #ffffff; text-align: center;
  text-indent: -9999px;                 /* 数字そのものは擬似要素で出す */
}
.zoomLens .zlTick::after {
  content: attr(data-lod);
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  text-indent: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ============================================================
   ★ 第101便: ハンバーガーの段 (02-04) と、●の説明 (03)
   ------------------------------------------------------------
   ・段は <details>/<summary> です。見出しを押すと開きます。
     ★ JavaScript が無くても開きますし、キーボードでも開きます
   ・● は「説明があります」という印です。押すと説明が出ます
   ★ 方針6 (ガジェットっぽさを削ぎ、細い線で) に沿って、
     線は 1px、色は控えめにしてあります
   ============================================================ */
/* ★★★ 第121便 (カジさんご指示): 上の3行を、つめます。
   > 特にスマホだとハンバーガーメニューが長くなって見にくくなる

   ★ 3行はそれぞれ `.subText` を着ています。あちらは **画面のあちこちで
     使う説明文**の着物で、`margin: 3px auto` と `padding: 0 0 5px` と
     `line-height: 1.6` が入っています。3行ぶんで 30px 近くになります。
   ★★ `.subText` そのものは触りません（触ると、関係のない所まで動きます）。
     **`.mnTop` の中にいるときだけ**の着せかたで上書きします。 */
.mnTop {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 0 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line, #e0e0e0);
}
.mnTop .subText {
  text-align: left; opacity: .75;
  width: 100%; margin: 0; padding: 0;
  font-size: 12px; line-height: 1.35;
}

/* ★ 第121便: 読み直しの行。段ではなくなったぶん、上下に少しだけ空けます */
.mnFreshRow { margin-bottom: 6px; }

/* ★★ 第102便 (カジさんご指摘): 見出しは **これまでの `.ptitle` そのもの**です。

   第101便では `<summary>` を flex の箱にして、中に `.ptitle` と ● を
   並べていました。**そのせいで、横に伸びた帯のデザインが崩れました。**

   ★ いまは `<summary>` **自身**が `.ptitle` です。
     ですので見た目は、これまでの見出しとまったく同じです。
   ★ ここで足すのは2つだけ —— ブラウザが付ける三角を消すことと、
     指のかたち。**それ以外は `.ptitle` に任せます。**
   ★ 開く見出しと開かない見出しは、**文字の最後の「▼」**で見分けます
     (訳の中に入っています。7言語ぶん)。 */
/* ★★★ 段の箱そのものは、幅いっぱいに。

   ★ **台帳 7-14 の4度目です。**`.mnSec` と書いただけでは効きません。
     すぐ下に `:is(.topPanel, .btmsheet) details { width: 90%; margin: 12px auto }`
     という、**「詳しい設定」のための古い規則**があり、
     `(0,1,1)` で `.mnSec` の `(0,1,0)` に勝ちます。

     効かないと `<details>` が 90% に縮み、
     中の `.ptitle` の `width:100%` が **縮んだ箱の100%** になります
     (見出しの帯が、文字の長さだけの短い札になります)。

   ★ ですので、同じ形で1段だけ強く書きます `(0,2,1)`。
     ★ **`!important` は使いません。**次に触る方が、
       どちらが勝つのかを読めなくなるからです。 */
:is(.topPanel, .btmsheet) details.mnSec {
  display: block; width: 100%; margin: 0; box-sizing: border-box;
}

/* ★ 見出しも同じ理由で、1段強く書きます (すぐ下に
   `:is(.topPanel, .btmsheet) summary { … }` があります)。
   ★ 見た目は `.ptitle` に任せます。ここで足すのは
     「ブラウザが付ける三角を消すこと」と「指のかたち」だけです。 */
:is(.topPanel, .btmsheet) details.mnSec > summary.ptitle {
  /* ★★ 罠は2か所ありました。すぐ下の
     `:is(.topPanel, .btmsheet) summary { width: fit-content; margin: 0 auto }`
     も `(0,1,1)` で `.ptitle` の `(0,1,0)` に勝ちます。
     ★ ですので **幅と余白も、ここで `.ptitle` と同じ値に戻します**。 */
  width: 100%; margin: 3px 0;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
:is(.topPanel, .btmsheet) details.mnSec > summary.ptitle::-webkit-details-marker { display: none; }
:is(.topPanel, .btmsheet) details.mnSec > summary.ptitle::marker { content: ""; }

/* 段の中の説明。開いたときに、いちばん上に出ます */
.mnNote { text-align: left; margin: 2px 4px 8px; padding: 0; opacity: .8; }

.infoFooter {
  position: absolute; bottom: 0; height: 50px;
  display: flex; align-items: center; padding: 0 10px;
  box-sizing: border-box; z-index: var(--z-tools);
  background: transparent; pointer-events: none;
}
body.hand-left  .infoFooter { left: calc(var(--pad-box) + 10px); right: 0; }
body.hand-right .infoFooter { left: 0; right: calc(var(--pad-box) + 10px); }
.infoFooter > * { pointer-events: auto; }

#hdrUid {
  position: fixed; left: 50%; bottom: calc(8px + var(--gap-y));
  transform: translateX(-50%); z-index: var(--z-tools);
}
body.hand-left  #dbgToggle { margin-left: auto; }
body.hand-right #dbgToggle { margin-right: auto; }

.controlPad {
  position: fixed; bottom: var(--gap-y); width: var(--pad-box);
  height: var(--pad-box); z-index: var(--z-tools); background: transparent;
}
body.hand-left  .controlPad { left: 10px; }
body.hand-right .controlPad { right: 10px; }

.padWrap {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--pad-wrap); height: var(--pad-wrap); border-radius: 50%;
  box-shadow: var(--shadow); z-index: var(--z-pad);
  /* ★ 第75便: 半透過にして、下のタイルが見えるようにしました。
     ★ 見えている円は **.padWrap** です。#padCircle はこの上に重なる
       「指を受け取るだけの透明な層」で、もともと色を持っていません
       (そちらに色を付けても、この板が下で塞いだままになります) */
  background: radial-gradient(circle at 50% 42%,
              rgba(255, 255, 255, var(--pad-alpha)),
              rgba(220, 233, 247, var(--pad-alpha)));
}
#padCircle { position: absolute; inset: 0; border-radius: 50%; touch-action: none; }
#padKnob {
  position: absolute; left: 50%; top: 50%;
  /* ★★ 第134便 (カジさんご要望 A5): つまみの直径を +20% (34% → 41%)。
     アイコンの絵が入りましたので、そのぶん大きく見せます。
     ★ 輪 (#padCircle) は変えていません。指の当たり判定はそちらが
       持っているので、**操作の効きは変わりません**。 */
  transform: translate(-50%, -50%); width: 41%; height: 41%;
  border-radius: 50%; box-shadow: var(--shadow);
  /* ★ 第75便: 中心を少し明るく。つまみは動かすものなので、
     板が透けても、ここははっきり見えるように不透明のままにしています */
  background: var(--pad-knob);
  background: radial-gradient(circle at 50% 36%,
              var(--pad-knob-hi), var(--pad-knob) 72%);
  pointer-events: none; transition: transform 0.08s linear;
}

/* ============ dbg panel ============ */
#dbgPanel {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--hdr-h) + var(--savebar-h) + 8px);
  max-width: 92vw; background: #fff; color: #000;
  border: none; border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 16px; z-index: var(--z-dbg);
  font-size: 11px; line-height: 1.7; white-space: pre;
}
#dbgPanel[hidden] { display: none; }

/* ============ top panels ============ */
.topPanel {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--hdr-h) + 6px); width: 95%; max-width: 640px;
  background: var(--panel-bg); border: 2px solid var(--ink);
  border-radius: 16px; box-shadow: var(--shadow);
  padding: 10px 12px 14px; box-sizing: border-box; z-index: var(--z-panel);
  max-height: calc(100vh - var(--hdr-h) - var(--ftr-h) - 20px);
  overflow-y: auto; transform-origin: top center;
  -webkit-overflow-scrolling: touch;
}
/* ★★ 第104便 (カジさんご要望): パネルがのびてきたので、
   **いちばん下の「閉じる」を、下に貼りつけます。**

   ハンバーガーは段が10個あり、スクロールしないと「閉じる」に
   届きませんでした。**出口はいつでも見えているべき**です（憲法19条）。

   ★ 直すのは **パネルの直下にある最後の `.lrow.end`** だけです。
     一本道のパネル（つくる/読む）は「閉じる」が段の中にあるので、
     ここでは触りません（段ごと入れ替わるため、貼りつけると
     行き先の違うボタンが同じ場所に居座ります）。
   ★ `position: sticky` は、**はみ出していないときは何もしません**。
     短いパネルでは、これまでと同じに見えます。 */
.topPanel > .lrow.end:last-child {
  position: sticky;
  bottom: -14px;                 /* パネルの下の余白ぶんまで下げる */
  /* ★★★ 第105便 (カジさんご報告): ここに `width: auto` が要ります。

     `.lrow` はもともと `width: 90%; margin: 3px auto` です。第104便では
     **余白だけを打ち消して、幅を打ち消し忘れました。**その結果、帯が
     **90%幅のまま 12px 左へ動き**、「最下段だけ左寄りで幅の80%くらい」に
     見えていました。ご報告のとおりです。
     ★ 余白を負の値にするときは、**幅も一緒に見る**こと。 */
  width: auto;
  margin: 6px -12px -14px;       /* 左右いっぱいに。下の余白は打ち消す */
  padding: 8px 12px 14px;        /* 打ち消したぶんは、こちらで持つ */
  background: var(--panel-bg-solid);
  border-radius: 0 0 14px 14px;  /* パネルの角丸 16px - 枠 2px */
  box-shadow: 0 -6px 10px -6px rgba(0, 51, 102, 0.25);
}

/* ★★ 第104便 (カジさんご要望): レーティングの説明の並び。

   ★ 表を読ませるのではなく、**いま見ているタイルの行に印**を付けます。
     色は決め打たず、ほかの「選ばれている」印と同じ `--ink` を借ります。 */
.rateList {
  width: 92%; margin: 4px auto 8px; display: flex;
  flex-direction: column; gap: 3px;
}
.rateRow {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 13px; line-height: 1.5; color: #000;
  border: 1px solid transparent;
}
.rateRow .rateTag {
  flex: 0 0 3.6em; text-align: center;
  font-weight: 700; font-size: 12px;
}
/* ★ いま見ているタイルの行 */
.rateRow.is-on {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}
.rateNote { width: 92%; margin: 4px auto; text-align: left; }

/* ============================================================
   ★★★★ 第163便 — トップパネルの帯と、× ボタン
   ------------------------------------------------------------
   ★★★ 動くのは `.pBody` **だけ**です。ですので PC のスクロールバーは
     帯にも × にもかかりません（カジさんのご指示）。
   ★★ `.has-head` は `st_ui.js` の `dressPanel()` が付けます。
     付いていないうちは、これまでとまったく同じに見えます（憲法13条）。
   ============================================================ */
.topPanel.has-head {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;              /* ★ 外の箱は動きません */
}
.pHead {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 10px 2px 12px;
}
.pHeadIn {
  flex: 1 1 auto;
  min-width: 0;
}
/* ★ 帯に持ち上げた見出しは、上の余白を持ちません（帯が持っています） */
.pHeadIn > .ptitle { margin-top: 0; }
/* ★★★ 第163便: ハンバーガーの3行は、× のぶん幅がせまくなります。
   ★★ 刻印の行（"viewer build: … / render: … / ⟳2+2"）は長いので、
     そのままだと折り返して帯が2倍の高さになります。
     ★ ここは **読むための文ではなく、確かめるための行**ですので、
       少しだけ小さくして1行に収めます（第121便の「つめる」を保ちます）。 */
.pHeadIn > #mnTop .subText { font-size: 11px; }
.pBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 14px;
}
/* ★★ 帯に持ち上げるものが無いパネルでは、中身が帯の下から始まります */
.pHead:not(:has(.ptitle, #mnTop)) { padding-bottom: 0; }

/* ★★★★ × ボタン。絵はカジさんにご用意いただいたものです。
   ★★ 色も形も変えません（`background-size: contain`）。
   ★★★ 44px は、指で押せるいちばん小さい大きさの目安です。 */
.pClose {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  border: 0; background: transparent;
  background-image: url("ui_images/ic_close.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.pClose:active { transform: scale(0.94); }
/* ★★★ 「いま中断できません」。**消さずに、押せないように見せます** */
.pClose.is-off {
  background-image: url("ui_images/ic_close_desable.png");
  cursor: not-allowed;
}

/* ★★★★ トップパネルが開いているあいだ、ハンバーガーは押せません。
   ★★ 押せないものは、押せないように見せます（薄く）。 */
#hdrMenuBtn.is-off { opacity: 0.35; pointer-events: none; }

/* ============================================================
   ★★★★ 第165便: ［チュートリアル完了］の札
   ------------------------------------------------------------
   > そのなかのチュートリアル完了ボタンをおしてチュートリアル終了。
                                                    （カジさん）
   ★★★ 置き場所は **2つの帯のすぐ下**です。
     ★★ 下は、動かす道具（コントロールパッド）の場所です。
       そこへ置くと、指が当たります。
   ★★ タイルは見えたままにします（幅は 90%、うしろは透けます）。
   ============================================================ */
.tutDoneBar {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--hdr-h) + var(--hdr2-h) + 6px);
  width: 90%; max-width: 420px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.90);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: var(--shadow);
  border-radius: 14px;
  z-index: var(--z-float);
  display: flex; justify-content: center;
}
.tutDoneBar > button { min-width: 60%; }
/* ★ エディターでは出しません（保存の帯と重なります） */
body.page-editor .tutDoneBar { display: none; }

/* ★★ 下に貼りつく段は、`.pBody` の中に移りました */
.pBody > .lrow.end:last-child {
  position: sticky;
  bottom: -14px;
  width: auto;
  margin: 6px -12px -14px;
  padding: 8px 12px 14px;
  background: var(--panel-bg-solid);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 -6px 10px -6px rgba(0, 51, 102, 0.25);
}

.topPanel[hidden] { display: none; }
.topPanel:not([hidden]) {
  animation: topPanelSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes topPanelSlideDown {
  0%   { opacity: 0; transform: translate(-50%, -15px) scaleY(0.7); }
  100% { opacity: 1; transform: translate(-50%, 0) scaleY(1); }
}

.ptitle, .shtTitle {
  display: block; width: 100%; box-sizing: border-box;
  margin: 3px 0; padding: 6px 0 5px; text-align: center;
  background: var(--ink); color: #fff; font-weight: 700;
  border: none; border-radius: 10px;
}
.subText {
  display: block; width: 90%; margin: 3px auto;
  padding: 0 0 5px; text-align: center; color: #000; font-size: 13px;
  line-height: 1.6; background: transparent;
}
.lrow {
  display: flex; flex-wrap: wrap; align-items: center;
  width: 90%; margin: 3px auto; padding: 0 0 5px; gap: 8px;
}
.lrow.center { justify-content: center; }
.lrow.end { justify-content: flex-end; }

.button, .buttonOk, .buttonCancel, .buttonDanger {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; margin: 0;
  border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: var(--shadow); white-space: nowrap; color: #ffffff;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000,
     0px -2px 0 #000,  0px  2px 0 #000,
    -2px  0px 0 #000,  2px  0px 0 #000;
}
.button       { background-color: #003333; border: 2px solid #000033; }
.buttonOk     { background-color: #339966; border: 2px solid #ffffff; }
.buttonCancel { background-color: #999933; border: 2px solid #ffffff; }
/* 第9便 (カジさん指摘4): 消す道だけの色。ほかのボタンと見分けがつくよう
   赤にして、押す前に気づけるようにする。形は .button 系と同じ。 */
.buttonDanger { background-color: #ff0042; border: 2px solid #ffffff; }

/* ============ Editor: Bottom Sheet (#sheet) ============ */
.btmsheet {
  position: fixed; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 95vw;
  /* 第8便 (カジさん指摘6): 段を分けたことで中身の少ないページが出てきた。
     高さは中身に合わせ、長いときだけ 78vh で頭打ちにする。
     (台帳 1-5「高さは中身によらず一定」はここで取り下げ) */
  height: auto; max-height: 78vh;
  background: #ffffff;
  border: 2px solid var(--ink);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow);
  z-index: var(--z-sheet);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btmsheet[hidden] { display: none; }
.btmsheet:not([hidden]) {
  animation: sheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sheetSlideUp {
  0%   { opacity: 0; transform: translate(-50%, 100%); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

/* 折りたたみ（collapsed）状態の設定 */
.btmsheet.is-collapsed {
  height: auto !important; /* 高さをヘッダー＋フッターのみのサイズに縮小 */
}

.btmsheet.is-collapsed #sheetBody {
  display: none !important; /* 中間のボディ領域のみ非表示 */
}

/* sheetHeadの配置調整 */
#sheetHead {
  width: 100%; flex-shrink: 0;
  background: transparent; border: none; padding: 6px 10px 0;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
}

/* 下部三角トグルボタン */
.sheetToggleWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
}

.sheetToggleBtn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSSによる下向き三角形（▼） */
.sheetToggleBtn::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--ink); /* 下向き三角 */
  transition: transform 0.25s ease;
}

/* 折りたたまれた時：上向き三角（▲）へ180度回転 */
.btmsheet.is-collapsed .sheetToggleBtn::after {
  transform: rotate(180deg);
}

#sheetBody {
  width: 100%;
  /* 第8便: 中身のぶんだけ伸び、あふれる時だけ巻物になる */
  flex: 0 1 auto;
  overflow-y: auto; overflow-x: hidden;
  background: transparent; border: none; padding: 10px;
  box-sizing: border-box;
}

/* 第8便 (カジさん指摘3): 最下段は中身によって変わる。
   左が「進む・戻る・消す」、右が「詳しい設定 / OK」。 */
#sheetFoot {
  width: 100%; flex-shrink: 0;
  background: transparent; border: none; padding: 6px 10px;
  box-sizing: border-box;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.footLeft, .footRight {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.footRight { margin-left: auto; }


/* ============================================================
   LAYER 2 -- tile stage
   旧 viewer_v3.html の <style> から移設。ここが「タイルそのもの」の
   見えかたを決める唯一の場所。色は LAYER 0 のトークンで差し替える。
   ============================================================ */
.cell { position: absolute; }
.cell .tileBox {
  position: absolute; inset: 0;
  border-radius: 4.5%; border: var(--tile-frame) solid var(--frame);
  box-shadow: var(--shadow); overflow: hidden; background: #fff;
}
/* 台帳 J3: 選択枠とそのつまみを置く層。
   .tileBox は overflow:hidden なので、その中に入れると
   タイルの端に接した要素のつまみが切れて掴めなくなる。
   .cell の中・.tileBox の外に、.body とぴったり重なる層を作って
   そこへ #selBox を入れる (.tileBox の枠の内側 = inset: 白フチの太さ)。
   ここ自体は指を受けない。受けるのは中の #selBox の子だけ。 */
.cell .selLayer {
  position: absolute; inset: var(--tile-frame);
  pointer-events: none; z-index: 6;
}
.cell .card {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; text-align: center;
  font-size: 15px; font-weight: 600; letter-spacing: 0.08em;
  padding: 8%; opacity: 0; transition: opacity 0.35s ease;
  pointer-events: none;   /* 透明でも全面を覆うので、リンクのタップを素通しにする */
  white-space: pre-wrap;
}
.cell.stage-card .card { opacity: 1; }
.cell.stage-ready .card { opacity: 0; }
/* 第25便 (第9便でカジさんからご指摘のあった件):
   要素の「かさなり」(z) を上げていくと、.selLayer (z:6) や その中の
   "i" のつまみより前に出てしまっていた。要素はタイルの中身なので、
   選択の道具より前へは出ないのが正しい。
   .body に isolation を付けて、**要素の z は .body の中だけの話**にする
   (要素どうしの前後関係はそのまま。外の層とは競わなくなる)。 */
.cell .body {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease;
  isolation: isolate;
}
.cell.stage-ready .body { opacity: 1; }
.cell.stage-missing .tileBox { background: var(--tile-missing); border-color: #e6ecf2; }
.cell.stage-missing .card { opacity: 1; color: var(--muted); font-size: 12px; }
.cell.stage-pending .tileBox { background: var(--tile-pending); }
.cell .fog {
  position: absolute; inset: 0; background: #fff; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease; border-radius: 4.5%;
}
.cell.active .tileBox { outline: 3px solid var(--active-color); outline-offset: 6px; }
.cell .focusDot {
  position: absolute; top: -4px; right: -4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--active-color);
  border: 2.5px solid #fff; box-shadow: var(--shadow); display: none;
}
.cell.active .focusDot { display: block; }

/* 編集アイコン: perm-w を持つアクティブタイルにのみ JS が表示する */
.cell .editBtn {
  position: absolute; border: none; cursor: pointer; display: none;
  align-items: center; justify-content: center; border-radius: 50%;
  box-shadow: var(--shadow); z-index: 5;
  padding: 0; color: var(--edit-ico);
  /* 第4便: 絵文字の鉛筆をやめて ui_images/ic_edit.png を使う。
     ボタンの箱の大きさ(既定32px)は st_grid.js が付けるので触らない。
     st_grid.js が textContent に鉛筆の字を入れているため、
     font-size:0 で字だけを消して、背景の画像だけを見せる。 */
  background: #fff url("ui_images/ic_edit.png") center / 68% 68% no-repeat;
  font-size: 0; line-height: 0;
}

/* ★ 第102便 (05): SYNC。鉛筆とまったく同じ形・同じ大きさで、その右に。

   ★★ 絵は **`ui_images/ic_sync_panel.png`**（カジさんが置いてくださったもの）。
     ★ 横メニューの `ic_sync.png` とは**別の絵**です。こちらは白い丸の
       ボタンの上に乗るための絵です。

   ★ 途中で `ic_sync.png` に変えかけました。**こちらから S3 が見えないのを
     「無い」と読み違えた**ためです。**S3 に入っています**（台帳 7-120）。
   ★ 万一見つからないときも、白い丸のボタンとして押せます。 */
.cell .syncBtn {
  position: absolute; border: none; cursor: pointer; display: none;
  align-items: center; justify-content: center; border-radius: 50%;
  box-shadow: var(--shadow); z-index: 5;
  padding: 0; color: var(--edit-ico);
  background: #fff url("ui_images/ic_sync_panel.png") center / 68% 68% no-repeat;
  font-size: 0; line-height: 0;
}
body.page-editor .syncBtn { display: none !important; }

.seam {
  position: absolute; pointer-events: none; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--seam) 20%, #fff 50%, var(--seam) 80%, transparent);
  box-shadow: 0 0 12px 3px var(--seam);
  animation: seamGlow 2.4s ease-in-out infinite;
}
@keyframes seamGlow { 0%,100% { opacity: 0.55 } 50% { opacity: 1 } }

.el { position: absolute; }
.el-text {
  display: flex; align-items: center; justify-content: center; text-align: center;
  line-height: 1.35; font-weight: 600; letter-spacing: 0.06em; white-space: pre-wrap;
  /* 第38便: 大きさの指定が無い文章も、タイルの大きさに合わせます。
     --tsc は tile_render.js の applyLodToBody が入れます (幅 ÷ 600) */
  font-size: calc(14px * var(--tsc, 1));
}
/* ---- 第25便: 書体 (ver1.0 の payload.font を戻す) ----
   ver1.0 は自由入力だったが、憲法18条にあわせて**いくつかから選ぶ**形に。
   どの端末にも入っている書体だけを並べる (iPhone / Windows の両方で出る)。
   知らない名前が入っていたら、そのまま font-family として使う
   (ver1.0 のタイルを壊さない = 憲法13条)。 */
.font-mincho { font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
  "MS PMincho", "Songti SC", serif; }
.font-round { font-family: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c",
  "Yu Gothic", system-ui, sans-serif; }
.font-mono { font-family: "SF Mono", "Consolas", "Osaka-Mono",
  "MS Gothic", monospace; }

.el-text.deco-outline { text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff; }
.el-text.deco-shadow  { text-shadow: 0 2px 6px rgba(0,0,0,0.35); }
/* 第21便: 飾りは「文章」(textblock) にも効かせる。
   :is() は使わず素の並びで書く (台帳 7-1 の詳細度の罠を避ける) */
.el-textblock.deco-outline { text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff; }
.el-textblock.deco-shadow  { text-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.el-textblock {
  /* 第38便: 旧 textblock の既定 12px も、タイルの大きさに合わせます。
     もとの数字 (12) は変えていません (見えかたの割合を保つため) */
  overflow: hidden; font-size: calc(12px * var(--tsc, 1)); line-height: 1.65;
  background: rgba(255,255,255,0.82); border-radius: 12px; padding: 7px 11px;
  box-shadow: inset 0 0 0 1.5px rgba(0,51,102,0.22);
}

/* 第23便: 下地の板。旧 .el-textblock と同じ形を text にも与える。
   色は要素ごとに --plate で渡ってくる (tile_render.js) */
.el-text.el-plate {
  background: var(--plate, rgba(255,255,255,0.82));
  border-radius: 12px;
  padding: 7px 11px;
  box-shadow: inset 0 0 0 1.5px rgba(0,51,102,0.22);
}

/* ---- 第23便: 近さごとの文 (ver1.0 の text の操作) ----
   文ぜんたいを1つの欄に出し、近さごとに背景の色を変える。
   なぞれる必要があるので user-select は text のまま。 */
.segView {
  width: 90%; margin: 6px auto 8px;
  padding: 8px 10px;
  box-sizing: border-box;
  background: #ffffff;
  border: 2px solid var(--fld-bd);
  border-radius: var(--card-r);
  font-size: 14px; line-height: 1.9;
  color: var(--ink);
  max-height: 34vh; overflow-y: auto;
  -webkit-user-select: text; user-select: text;
  word-break: break-word;
}
.segView span { border-radius: 3px; padding: 1px 0; }
/* ★★ 第95便: 改行の印。**1文字**なので、半分だけ消すことができません。
   字そのものより薄く、でも見落とさない程度に */
.segView .segNl {
  opacity: 0.55;
  font-weight: 400;
  padding: 0 1px;
}
/* ★ 第95便: 太字。なぞる画面でも、そのまま太く見えます */
.segView .segBold { font-weight: 700; }
/* ★ 第96便: 下線。近さの色分けを消さずに重なります */
.segView .segUnder { text-decoration: underline; text-underline-offset: 2px; }

/* ★ 第97便c: 「遠いときだけ」出る文。うっすら囲って、
   近づくと消えるものだと分かるようにします */
.segView .segFar {
  outline: 1px dashed rgba(120, 90, 160, 0.75);
  outline-offset: 1px;
  border-radius: 3px;
}
.ttTarget .segUnder { text-decoration: underline; text-underline-offset: 2px; }
/* 直せない欄でも、改行と太字は同じ見えかたにそろえる */
.ttTarget .segNl { opacity: 0.55; }
.ttTarget .segBold { font-weight: 700; }
/* 直せない欄は、直せないことが見て分かるようにする */
textarea.isLocked {
  background: #f2f0f6;
  color: var(--muted);
}

/* ---- 第28便: ふたつのことば。基本のことばは読むだけ (写せる) ---- */
.i18nRead {
  width: 90%; margin: 4px auto;
  padding: 8px 10px;
  box-sizing: border-box;
  background: #f2f0f6;
  border: 2px solid var(--fld-bd);
  border-radius: var(--card-r);
  font-size: 13px; line-height: 1.8;
  color: var(--ink);
  max-height: 22vh; overflow-y: auto;
  -webkit-user-select: text; user-select: text;
  word-break: break-word;
}
.el svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   第26便: スタンダードモード で隠すもの
   ------------------------------------------------------------
   カジさんご指示。**隠すものをここに一覧で持つ** = 増減が1か所で済む。
   エキスパートモードでは何も隠さない (いままでどおり)。
   body の class は st_ui.js の ST.Mode が付け替える。

   なお「隠す」は display:none。台帳 G6 の「消さずに薄く」は
   *押せないボタン* の見せかたの決まりで、
   ここは「その人にはまだ要らないものを奥へしまう」= 憲法18条のほう。
   ============================================================ */
/* --- 詳しい設定の扉そのもの (エディター) --- */
body.mode-standard #sheetFoot .buttonDetail { display: none; }
/* 第30便 (カジさんご指摘1): リンクの設定・タイルの設定・ストリップの中にも
   本文の中に開く「詳しい設定」がある。どれも必須ではないので同じく隠す。
   <details> は閉じたままなので、見出しを消せば中身も出てこない */
body.mode-standard .btmsheet summary.buttonDetail { display: none; }

/* --- ビューワ: つくる・編集する --- */
body.mode-standard #mkDup,           /* 複製してつくる */
body.mode-standard #mkLocalDrop,     /* ドラッグ&ドロップの受け皿 */
body.mode-standard #mkLocalEdit,     /* ローカルのファイルを編集 */
/* ★ 第102便 (06-06): 見出し #mkH1〜#mkH3 は無くなりました。
   「つくる」「編集する」の扉そのものが、見出しの代わりです。
   ★ ストリップの道具は「編集する」の中へ移りましたが、
     スタンダードで隠すことは変えていません（憲法13条: 仕舞うだけ） */
body.mode-standard #mkPickStrip {    /* ストリップ編集ツール */
  display: none;
}

/* --- ビューワ: タイルを読む --- */
body.mode-standard #loaderDrop { display: none; }

/* ---- 3-4c. スタンダードをもっと簡単に (第90便 / カジさんご指示) ----
   ユーザーテストのご意見「何をしたら良いかわかりにくい」に対する手当てです。

   ★ **隠すだけで、無くしていません。**エキスパートに切り替えれば、
     ぜんぶ元どおり出ます。**憲法13条**（いままで出来ていたことを奪わない）。

   ★ 隠すのは CSS だけです。**中の仕組みには一切さわっていません。**
     ですので、隠したものを使っていた古いタイルも、そのまま動きます。 */

/* ビューワー: つくる・編集する */
body.mode-standard #mkPickWiki { display: none; }   /* Wikipedia からストリップ */

/* ビューワー: タイルを読む */
body.mode-standard #ldBtnStrip,                     /* ストリップ */
body.mode-standard #ldBtnLocal { display: none; }   /* ファイルから */

/* ハンバーガー: 利き手 / Layout / 読み直し */
/* ★ 第97便b: 「どこまで読むか」はエキスパートモードだけ */
/* ★ 第101便 (02-03): 出し分けの中身は、これまでと同じです。
   ただし **段そのもの (details) を隠します**。中だけ隠すと、
   開けない見出しだけが残るからです。 */
/* ★★★ 第121便 (カジさんご指示): 「読み直し」は、ここから **外れました**。
   段ではなくメニュー直下のボタンになり、**どちらのモードでも出します**。

   ★ 第101便までは、スタンダードモードで隠していました。ですので
     既定のモードの方は、**一度も押せていません**でした。
     「比較的よく使う」ものを、既定で隠しているのは筋が通りません。
   ★★ ここに `#freshRow` を足さないことが、その決めごとです。
     足すと、外へ出した意味がなくなります（札 probe_menu F1b が見張ります）。 */
/* ★★★★ 第160便 (カジさんご指示): info パネルも、スタンダードでは
   出しません。「難しい印象がある」とのご報告です。
   ★ 代わりに「URLをコピーする」は SYNC のパネルへ移しました
     (st_share.js)。**道が無くなるのではなく、道が変わります**。 */
body.mode-standard #secRing,
body.mode-standard #secHand,
body.mode-standard #secInfo,
body.mode-standard #secLayout { display: none; }

/* エディター: タイルの設定 → 見られる人・書き込める人 */
body.mode-standard #sheetTileHolder [data-preset="group"],
body.mode-standard #sheetTileHolder [data-preset="groupOpen"] { display: none; }

/* エディター: ツールズ (説明ごと) */
body.mode-standard [data-tools="lod"],
body.mode-standard [data-tools="groupbox"] { display: none; }

/* ============================================================
   第27便: 非会員の簡略ビューワー (台帳 D8)
   ------------------------------------------------------------
   カジさんご指示の「隠すもの」を一覧で持つ。
   body.guest-view は viewer_main.js が付ける。
   ============================================================ */
body.guest-view #hdrPlus,        /* 非会員はエディターを使えない */
body.guest-view #selectMode,     /* モードの選択はまだ出さない */
body.guest-view #modeStd,
body.guest-view #modeExp,
body.guest-view #hdrUid,         /* userID は出さない */
/* 第31便h: ログイン (#mnAuth) は **非会員にも出します**。
   会員になった方が入る道が、ここにしかありません。
   出さないのは、入ってからでないと意味のないものだけ。 */
body.guest-view #mnPasswdRow,    /* 入る前に変えるものは無い */
body.guest-view #mnNoticeRow,    /* テストの連絡は会員向け (第31便h) */
body.guest-view #dbgToggle {     /* 詳しい情報も出さない */
  display: none;
}

/* 「タイルを読む」は、お試しのタイルを開くボタン1つだけにする */
body.guest-view #ldPickRow > button:not([data-guest="sample"]) { display: none; }
body.guest-view #loaderDrop { display: none; }

/* ============================================================
   ★★★ 第198便 (カジさんご指示 #5): ゲストのハンバーガーは
   **できることだけ**にします
   ------------------------------------------------------------
   残すもの … ×・上の2行 (userID/ビルド)・リロード・ログイン・言語・info
   しまうもの … 下の一覧 (入ってから意味を持つものばかりです)
   ============================================================ */
body.guest-view #secMsg,        /* メッセージ */
body.guest-view #secInvite,     /* 知人を招く */
body.guest-view #secMode,       /* モード */
body.guest-view #secRing,       /* タイルの読み込み範囲 */
body.guest-view #secHand,       /* 利き手 */
body.guest-view #secLayout,     /* 画面レイアウト */
body.guest-view #secGroup,      /* グループ */
body.guest-view #mnTutLine,     /* チュートリアルの行 */
body.guest-view #mnUiconRow {   /* アイコン画像 (入ってから) */
  display: none;
}
/* ★ info の段は、カジさんご指示でゲストにも出します
   (スタンダードモードの「しまう」より、こちらが後ろ = 勝ちます) */
body.guest-view #secInfo { display: block; }

/* SYNC パネル: ゲストには「SNSでシェアする」だけを出します */
body.guest-view #syncTitle,
body.guest-view #syncTileRow { display: none; }

/* ============================================================
   第29便: お知らせ
   ------------------------------------------------------------
   未読はハンバーガーの角に数で出す (アイコンは置かない = カジさんご判断)。
   ============================================================ */
/* ★★★★ 第184便: SYNC の印も、見た目はここに合わせます（`syncBadge`）。
   ★★★ 名前だけを分けています —— 意味が違うからです（台帳 7-74 / 7-355）。 */
.noticeBadge, .syncBadge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #ff0042; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
  pointer-events: none;     /* 数の上を押してもボタンが受ける */
}
.noticeBadge[hidden], .syncBadge[hidden] { display: none; }
#hdrMenuBtn { position: relative; }
/* ★ 第184便: SYNC の印の受け皿 */
#hdrPlus, #mkGoRead, #ldBtnSync { position: relative; }
/* 第74便: 未読の印はサインインのアイコンに付きます。
   受け皿になるよう、位置の基準をこのボタンにします
   (Chrome では付けなくても載りましたが、ブラウザによって変わります) */
#hdrSignBtn { position: relative; }

.mnCount {
  display: inline-block; margin-left: 6px;
  min-width: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #ff0042; color: #fff;
  font-size: 11px; font-weight: 700;
}
.mnCount[hidden] { display: none; }

#noticeList { width: 100%; }
.noticeItem {
  width: 90%; margin: 8px auto;
  padding: 10px 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 2px solid var(--fld-bd);
  border-radius: var(--card-r);
  text-align: left;
}
.noticeItem.is-critical { border-color: #ff0042; }
.noticeHead { display: flex; align-items: center; gap: 8px; }
.noticeTitle { font-size: 14px; font-weight: 700; color: var(--ink); }
.noticeNew {
  flex: 0 0 auto;
  padding: 1px 7px; border-radius: 9px;
  background: #ff0042; color: #fff;
  font-size: 10px; font-weight: 700;
}
.noticeDate { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.noticeBody { font-size: 13px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; }

/* 見せられないタイルは「枠だけ」に理由を出す */
.guestBlock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12%;
  font-size: 13px; line-height: 1.7; font-weight: 700;
  color: var(--muted);
}

/* ---- 第21便: 近さごとの文字の大きさ (シートの中の1行) ---- */
.szRow {
  display: flex; align-items: center; gap: 8px;
  width: 90%; margin: 6px auto;
}
.szRow select { flex: 1 1 160px; min-width: 0; }
.txtNum {
  flex: 0 0 76px; width: 76px;
  text-align: right;
}
.szRow .fnote { flex: 0 0 auto; margin: 0; }
.szRow button { flex: 0 0 auto; }

/* 第18便 (カジさんご指摘2): 要素の中の画像は、ブラウザの「画像のドラッグ」を
   させない。これが始まると半透明の画像が指に付いてきて、要素そのものが
   動かなくなる。HTML 側の draggable="false" と二段構え。 */
.el img, .tileBox img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ============================================================
   LAYER 3 -- widgets  (proposal v2 / カジさん承認済み)

   要点: ほとんどのフィールドは .topPanel / .btmsheet の中で
   「タグ名」で当てている。editor.html の 406箇所の elBuild() は
   JS を一行も触らずにこの見た目へ移行する。
   ============================================================ */

/* ---- 3-1. Fields by tag ---- */
:is(.topPanel, .btmsheet) :is(
  input[type="text"], input[type="number"], input[type="url"],
  input[type="search"], input[type="password"], input[type="email"],
  input[type="date"], input[type="time"], select) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--fld-h);
  padding: 10px 14px;
  margin: 0;
  font-family: inherit;
  font-size: var(--fld-fs);
  line-height: 1.5;
  color: var(--ink);
  background: var(--fld-bg);
  border: 2px solid var(--fld-bd);
  border-radius: var(--fld-r);
  box-shadow: none;
  text-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

:is(.topPanel, .btmsheet) :is(input, select, textarea):focus {
  border-color: var(--c-sel);
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.25);
}

:is(.topPanel, .btmsheet) :is(input, select, textarea):disabled {
  background: #f0f4f8;
  color: var(--muted);
  border-color: #ccd9e6;
}

:is(.topPanel, .btmsheet) ::placeholder { color: #a8bccf; }

/* select: 画像に依存しない CSS 描画の山形 */
:is(.topPanel, .btmsheet) select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 2px),
                       calc(100% - 16px) calc(50% - 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

/* file input は隠して .button のラベルから叩く */
:is(.topPanel, .btmsheet) input[type="file"] { display: none; }

/* 第14便: ただし「隠した input を JS から叩く」形は、端末によっては
   選択画面が開かない。指が本物の input に触れるよう、透明にして
   ボタンの真上に重ねる。見た目はボタンのまま。
   詳細度 (0,3,1) で上の display:none (0,2,1) に勝たせている
   (台帳 7-1 の :is() の罠と同じ考えかた)。 */
:is(.topPanel, .btmsheet) .filePickWrap {
  position: relative; display: inline-flex;
}
:is(.topPanel, .btmsheet) .filePickWrap input[type="file"] {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: none; background: transparent;
  opacity: 0; cursor: pointer;
  font-size: 0;              /* iOS で入力欄が広がらないように */
}

/* ---- 3-1a. 本文入力: 横は領域いっぱい、高さは最低5行。
        内部スクロールはさせない。欄が伸びてシートが送る。
        st_ui.js の autoGrow() が height == scrollHeight を保つ。

   注意 (:is の詳細度):
   :is() は引数のうち最も詳細度が高いものの詳細度を採る。textarea を
   上の共通タグ列に入れると
   ":is(.topPanel,.btmsheet) :is(input[type=text], ..., textarea)" が
   (0,2,1) となり、このルールの (0,1,1) に勝ってしまう。すると
   min-height が --fld-h (48px) に戻り、5行の下限が黙って効かなくなる。
   だから textarea はここで単独に、フィールド書式ごと持たせている。 ---- */
:is(.topPanel, .btmsheet) textarea,
.txtBody {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--body-lines) * var(--body-lh) * 1em + 24px);
  padding: 10px 14px;
  margin: 0;
  font-family: inherit;
  font-size: var(--fld-fs);
  line-height: var(--body-lh);
  color: var(--ink);
  background: var(--fld-bg);
  border: 2px solid var(--fld-bd);
  border-radius: var(--fld-r);
  box-shadow: none;
  text-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  resize: none;
  overflow: hidden;
}

/* ---- 3-1a2. ★★★ 第108便 (カジさんご報告): スマホで長文がスクロールできない
        ------------------------------------------------------------
        上の `overflow: hidden` が、ホイールも指も止めていました。
        ★ ただし外すだけでは何も変わりません —— st_edit.js の grow() が
          欄を**中身とぴったり同じ高さ**にするので、はみ出しが無いからです。

        ですので JS の側で、**スマホのときだけ**高さに上限を付け、
        上限に届いた欄に `data-capped="1"` を立てます。
        ここは、その欄の見た目だけを持ちます。

        ★ 詳細度 (台帳 7-125): 上の 3-1a は (0,1,1)。
          こちらは `textarea[data-capped]` で (0,1,1) ＋ 後ろにあるので勝ちます。
          ★ `body.is-phone` を **付けていません** —— 印を立てるのは JS で、
            そこが唯一の物差しです。CSS 側にもう1つ物差しを置くと、
            2つになって必ずズレます (台帳 7-87)。

        ★ バーは **細く、常に**出します。iOS の既定は触っているあいだ
          だけ出るので、「動かせる」ことが伝わりません。 ---- */
:is(.topPanel, .btmsheet) textarea[data-capped],
.txtBody[data-capped] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: #b0b0b0 #f0f0f0;
}
:is(.topPanel, .btmsheet) textarea[data-capped]::-webkit-scrollbar,
.txtBody[data-capped]::-webkit-scrollbar { width: 8px; }
:is(.topPanel, .btmsheet) textarea[data-capped]::-webkit-scrollbar-track,
.txtBody[data-capped]::-webkit-scrollbar-track {
  background: #f0f0f0; border-radius: 4px;
}
:is(.topPanel, .btmsheet) textarea[data-capped]::-webkit-scrollbar-thumb,
.txtBody[data-capped]::-webkit-scrollbar-thumb {
  background: #b0b0b0; border-radius: 4px;
}

/* ---- 3-1b. 1行フィールド: タイル名 / ファイル名 / URL ---- */
.txtOne {
  min-height: 42px !important;
  height: 42px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* 2行の読み取り専用領域 (saveBar のタイトル欄) */
.txtTwo {
  max-height: 3.4em;
  overflow-y: auto;
  line-height: 1.7;
  -webkit-overflow-scrolling: touch;
}

/* ---- 3-2. Field group ---- */
.fgroup { width: 90%; margin: 10px auto; }
.fgroup.wide { width: 100%; }
.fgroup + .fgroup { margin-top: 12px; }
/* ★★ 第94便: ことばの欄。見出しの右にプルダウンを置きます。
   2番目の欄は ▽ で畳んであります (ふだんは1つの欄に見えます) */
.langHead {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.langHead .flabel { margin: 0; }
select.langPick {
  flex: 0 0 auto;
  /* ★★★ 第114便: 16px 未満にしないこと（下の見張りを参照） */
  font-size: var(--fld-fs);
  padding: 2px 4px;
  border: 1px solid var(--fld-bd);
  border-radius: 6px;
  background: var(--fld-bg, #fff);
  color: inherit;
}
.langBody { margin-top: 4px; }
/* ★★ 第105便 (カジさんご要望): 2つ目のことばの見出しを、
   1つ目 (.flabel) と **同じ書体・同じ位置**にします。

   これまでは小さく (12px)・薄く (0.8) して「控えめ」にしていましたが、
   **1つ目と揃っていないほうが読みにくい**とのご指摘です。

   ★★ 幅と余白も、ここで決めます。すぐ下 (1830行あたり) に

       :is(.topPanel, .btmsheet) summary { width: fit-content; margin: 0 auto }
                                                                     (0,1,1)

     という古い規則があり、放っておくと **真ん中寄せ**になります
     (台帳 7-116 と同じ罠。これで6度目です)。
     この規則は (0,1,2) なので勝ちます。**順番には頼っていません。** */
details[data-lang="fold"] > summary {
  font-size: var(--lbl-fs); font-weight: 700; color: var(--ink);
  opacity: 1;
  /* ★ 左端は、1つ目の見出し (.langHead .flabel は margin:0) にぴったり合わせます */
  width: 100%; margin: 0 0 5px 0; padding: 3px 0;
  display: flex; align-items: center;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
details[data-lang="fold"][open] > summary { opacity: 1; }
/* ★ 古い WebKit のために残します。いまの Chromium は list-style: none だけで
   三角が消えます (台帳 7-95: 赤くならない札は置かず、理由をここに書きます) */
details[data-lang="fold"] > summary::-webkit-details-marker { display: none; }
/* ★★ 入れもの自身も 90% + auto で内側に寄っています。1つ目と左端を揃えます。
   ★ `:is(...)` を付けて (0,2,1) にしてあります。**順番に頼りません** (7-124) */
:is(.topPanel, .btmsheet) details[data-lang="fold"] {
  width: 100%; margin: 0;
}

.flabel {
  display: block;
  margin: 0 0 5px 2px;
  font-size: var(--lbl-fs);
  font-weight: 700;
  color: var(--ink);
  text-shadow: none;
}
.flabel .req { color: var(--danger); margin-left: 4px; }

.fnote {
  display: block;
  margin: 5px 0 0 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-shadow: none;
}
.fnote.err { color: var(--danger); font-weight: 700; }

/* ---- 3-3. Buttons ----
   .button / .buttonOk / .buttonCancel の本体は LAYER 1 にある。
   ここは「選択中」の状態色と、並べかたと、.buttonDetail だけ。 */
.button.is-on,
.button[aria-pressed="true"] {
  background-color: var(--c-sel);
  border-color: var(--c-sel-bd);
}

/* まだ押せない (選んでいない / チュートリアル中) を「薄い」だけで伝える。
   消してしまうと、次に何が起きるかの見当がつかなくなるので残す。 */
.button:disabled,
.buttonOk:disabled,
.buttonCancel:disabled,
.buttonDanger:disabled,
.buttonDetail:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* 詳細設定への扉。輪郭だけの白ピルにして「任意」と読ませる */
.buttonDetail {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; margin: 0;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  color: var(--ink);
  background-color: #ffffff;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  text-shadow: none;
}
.buttonDetail::after {
  content: "";
  margin-left: 8px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--ink);
  transition: transform 0.2s ease;
}
details[open] > .buttonDetail::after { transform: rotate(180deg); }

/* ★★ 第105便 (カジさんご要望): 2つ目のことばの見出しを、
   1つ目 (.flabel) と **同じ見た目**にします。

   ★ これまで真ん中寄せになっていたのは、下の古い規則のせいです。

       :is(.topPanel, .btmsheet) summary { width: fit-content; margin: 0 auto }
                                                                        (0,1,1)

     台帳 7-116 と同じ罠で、**6度目**です。ですので今回も
     **同じ形で1段だけ強く** (0,2,1) 書きます。`!important` は使いません。
   ★ 末尾の▼は、上の .buttonDetail とまったく同じ三角です。
     開くと180度まわって▲になります (言葉ではないので、どの言語でも同じ)。 */
/* ★ 見た目そのものは、この下の `details[data-lang="fold"] > summary` が
   持っています (その要素のための規則が、すでにあるからです)。
   ★★ **新しい規則を足して上から塗る**より、**持ち主を直す**ほうが、
     次に触る方が追えます (台帳 7-87)。ここに残すのは印だけです。 */
summary.langSum::after {
  content: "";
  margin-left: 8px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink);
  transition: transform 0.2s ease;
}
details[open] > summary.langSum::after { transform: rotate(180deg); }

/* ★ 第105便: 「設定中のLOD / 編集中の…」の1行 */
.segHead { text-align: left; }
.segHeadSep { opacity: 0.5; }

/* ============================================================
   第60便 (カジさんご要望): 最下段の4つが横に並びきらない
   ------------------------------------------------------------
   「削除 / 詳しい設定 / 戻る / 決定」で 378px 要りますが、
   幅 412px の端末でようやく1行に収まる勘定でした。

   1. 最下段の「詳しい設定」から ▽ を外します。
      中の <details> の見出しに付いている ▽ は、開くと上向きに
      変わるので **意味があります**。ですが最下段のものは
      <details> の子ではないので **回りません**。         (-20px)
   2. 狭い画面では、間と左右の余白を少し詰めます。      (-26px)
      下の2つのトークンで調整できます。
   ============================================================ */
:root {
  --foot-gap: 8px;      /* ボタンとボタンのあいだ */
  --foot-pad: 18px;     /* ボタンの左右の内側の余白 */
}
#sheetFoot .buttonDetail::after { content: none; margin-left: 0; }
#sheetFoot { gap: var(--foot-gap); }
#sheetFoot .footLeft, #sheetFoot .footRight { gap: var(--foot-gap); }
#sheetFoot :is(.button, .buttonOk, .buttonCancel, .buttonDanger, .buttonDetail) {
  padding: 0 var(--foot-pad);
}
@media (max-width: 400px) {
  :root { --foot-gap: 6px; --foot-pad: 12px; }
  #sheetFoot { padding-left: 6px; padding-right: 6px; }
}

/* 「どれかを選ぶ」ページの選択肢グリッド */
.pickRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 90%;
  margin: 10px auto;
}
.pickRow .button {
  width: 100%;
  height: auto;
  min-height: 68px;
  padding: 12px;
  font-size: 16px;
  flex-direction: column;
  gap: 6px;
  white-space: normal;
  line-height: 1.4;
}
.pickIcon {
  width: 34px; height: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--drop-shadow);
}

/* 横一列の小さな選択肢: レーティング / LOD / 公開範囲 / 言語 */
.optRow {
  display: flex; flex-wrap: wrap; gap: 8px;
  width: 90%; margin: 8px auto;
}
.optRow.center { justify-content: center; }
.optRow .button { flex: 0 1 auto; }
.optRow .button[data-lod="0"].is-on { background-color: var(--lod0); }
.optRow .button[data-lod="1"].is-on { background-color: var(--lod1); }
.optRow .button[data-lod="2"].is-on { background-color: var(--lod2); }
.optRow .button[data-lod="3"].is-on { background-color: var(--lod3); }
.optRow .button[data-lod="4"].is-on { background-color: var(--lod4); }
.optRow .button[data-lod="5"].is-on { background-color: var(--lod5); }

/* ★★ 第105便 (カジさんご要望): LOD の8つを **1行**に収めます。

   0〜5 と ＋ − で8つ。ふつうの `.button` は左右に 18px ずつ余白があるので、
   スマホでは2行に折れていました。**折らずに、幅を等分**します。
   ★ 高さ (40px) は変えません。**指が当たる大きさは、詰めるところではない**
     からです (台帳 7-123: 「小さく」は「指が届く」と対で)。 */
/* ★ `flex-wrap: nowrap` は**保険**です。1行に収めている本体は、下の
   `flex: 1 1 0; min-width: 0`（幅を等分して、いくらでも縮む）のほうです。
   ★ ですので、この行を外しても台本は赤くなりません。**外さずに残し、
     理由をここに書きます**（台帳 7-95）。あとで min-width を足した人が
     居ても、これがあれば折れません。 */
.optRow.lodRow { flex-wrap: nowrap; gap: 4px; }
.optRow.lodRow .button {
  flex: 1 1 0; min-width: 0; padding: 0 4px;
  font-size: 15px;
}

/* ---- 3-4. Wizard: 1ページ1決定 (一本道) ---- */
.wizard { width: 100%; }
.wpage { display: none; }
.wpage.is-current { display: block; }

.wsteps {
  display: flex; justify-content: center; align-items: center; gap: 7px;
  margin: 8px auto 2px;
}
.wdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #a8bccf;
  transition: transform 0.2s ease, background 0.2s ease;
}
.wdot.is-on { background: var(--c-sel); transform: scale(1.5); }
.wdot.is-done { background: var(--ink); }

.wlead {
  display: block;
  width: 90%; margin: 10px auto 4px;
  text-align: center;
  font-size: 17px; font-weight: 700; line-height: 1.6;
  color: var(--ink);
  text-shadow: none;
}
.wsub {
  display: block;
  width: 90%; margin: 0 auto 6px;
  text-align: center;
  font-size: 13px; line-height: 1.6;
  color: var(--muted);
  text-shadow: none;
}
.wnav {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  width: 90%; margin: 14px auto 2px;
}
.wnav .spacer { margin-right: auto; }

/* 第19便: 一覧が長くなると「もどる / ひらく」がパネルの外へ押し出されて
   スクロールしないと見えなくなる (第13便でカジさんからご指摘のあった件)。
   一覧を5件に絞ってもフォルダの行が増えれば同じことが起きるので、
   **決めるボタンはパネルの下に貼り付ける**。中身がどれだけ増えても
   「読んで、押す」が最初の画面で完結する (憲法18条)。 */
:is(.topPanel) .wpage.is-current > .wnav {
  position: sticky; bottom: -14px;      /* .topPanel の下の余白と同じ */
  margin-bottom: 0;
  padding: 8px 0 16px;
  background: var(--panel-bg);
  z-index: 2;
}

/* ---- 3-5. Switch (素のチェックボックスの置き換え) ---- */
:is(.topPanel, .btmsheet) input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 54px; height: 32px;
  min-height: 0;
  margin: 0; padding: 0;
  border: none;
  border-radius: 999px;
  background: #ccd9e6;
  box-shadow: inset 0 1px 3px rgba(0, 51, 102, 0.2);
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease;
}
:is(.topPanel, .btmsheet) input[type="checkbox"]::after {
  content: "";
  position: absolute; left: 3px; top: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease;
}
:is(.topPanel, .btmsheet) input[type="checkbox"]:checked { background: var(--c-sel); }
:is(.topPanel, .btmsheet) input[type="checkbox"]:checked::after { transform: translateX(22px); }

/* ============================================================
   ★★★★ 第178便 (カジさんご指示): 名簿のえらび場は、**素のチェック**
   ------------------------------------------------------------
   > メンバーの選択がスライドのスイッチになっていますが、グループの
   > ツールボックスと同様にチェックボックスにしてください。
   > （画面領域をとらないので。）

   ★★★ 上の決まりは「シートとパネルの中のチェックは、ぜんぶスイッチ」
     でした。名簿は **1行に1つ**並びますので、54px のスイッチが縦に
     積み上がって、画面がすぐ埋まります。
   ★★ ここだけ、ブラウザの素のチェックに戻します。
     ★ 名簿の行 (`.gwPick`) の中のものだけです。ほかのスイッチは
       1文字も変わりません。
   ============================================================ */
.gwPick input[type="checkbox"],
:is(.topPanel, .btmsheet) .gwPick input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px; height: 18px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  position: static;
  transition: none;
}
.gwPick input[type="checkbox"]::after,
:is(.topPanel, .btmsheet) .gwPick input[type="checkbox"]::after { content: none; }
.gwPick input[type="checkbox"]:checked,
:is(.topPanel, .btmsheet) .gwPick input[type="checkbox"]:checked { background: none; }

.swrow {
  display: flex; align-items: center; gap: 12px;
  width: 90%; min-height: 54px;
  margin: 8px auto;
  padding: 6px 14px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--fld-bd);
  border-radius: var(--card-r);
  cursor: pointer;
}
.swrow .swtext { flex: 1; min-width: 0; }
.swrow .swtitle { font-size: 15px; font-weight: 700; color: var(--ink); text-shadow: none; }
.swrow .swnote { font-size: 12px; color: var(--muted); text-shadow: none; }

/* ---- 3-6. Cards = 要素一覧 / エッジ一覧 / リンク一覧 ----
   注意: タイル面にも .card がある (.cell .card = 読み込み中の表題)。
   衝突を避けるため、ウィジェット側のカードは必ずパネル内に限定する。 */
.cardList {
  display: flex; flex-direction: column; gap: 8px;
  width: 90%; margin: 8px auto;
}
/* 一覧だけを巻物にする。
   一覧が長いときにパネルごと伸びると、下の「もどる / 読む」が画面外へ逃げてしまう。
   ここで一覧に高さの上限を与えて、決定ボタンを常に見える位置に残す。 */
:is(.topPanel, .btmsheet) .cardList {
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px;                 /* 選択枠 (2px) が端で切れないように */
}
:is(.topPanel, .btmsheet) .card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 2px solid var(--fld-bd);
  border-radius: var(--card-r);
  box-shadow: var(--shadow);
  cursor: pointer;
}
:is(.topPanel, .btmsheet) .card.is-selected { border-color: var(--c-sel); background: var(--c-sel-tint); }
.cardKind {
  flex: 0 0 6px; align-self: stretch; min-height: 34px;
  border-radius: 3px; background: var(--ink);
}
.card[data-kind="text"]    .cardKind { background: var(--k-text); }
.card[data-kind="image"]   .cardKind { background: var(--k-image); }
.card[data-kind="sticker"] .cardKind { background: var(--k-sticker); }
.card[data-kind="youtube"] .cardKind { background: var(--k-yt); }
.card[data-kind="drawing"] .cardKind { background: var(--k-draw); }

/* ---- 第19便: フォルダ (st_folder.js) ----
   フォルダもタイルと同じ一覧に並ぶ (カジさんご指示)。同じ .card を使い、
   左の色帯だけ変えて「これは入れ物だ」と分かるようにする。 */
.card[data-fdrow] .cardKind {
  flex: 0 0 14px;
  background: var(--c-sel);
  border-radius: 3px 6px 6px 3px;
}
.card[data-fdrow] .cardTitle::before {
  /* 紙の入れ物のかたち。絵は使わないので ui_images に足すものはない */
  content: "";
  display: inline-block;
  width: 13px; height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--c-sel);
  border-radius: 2px 3px 2px 2px;
  border-top-width: 4px;
}
/* いまどこを開いているか。「フォルダ外 / むかしばなし」の道 */
.fdTrail {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin: 2px 0 6px;
  font-size: 13px;
}
.fdSep { color: var(--muted); }
.fdHere { font-weight: 700; color: var(--ink); }
.buttonLink {
  background: none; border: none; box-shadow: none;
  padding: 2px 4px; margin: 0;
  font-size: 13px; font-weight: 700;
  color: var(--c-sel);
  text-decoration: underline;
  cursor: pointer;
}

.cardMain { flex: 1; min-width: 0; }
.cardTitle {
  display: block;
  font-size: 16px; font-weight: 700; color: var(--ink);
  text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cardMeta {
  display: block;
  font-size: 12px; color: var(--muted);
  text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cardGo {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cardGo::after {
  content: "";
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--ink);
}

/* ---- 3-7. Disclosure ---- */
:is(.topPanel, .btmsheet) details {
  width: 90%; margin: 12px auto;
  border: none; background: transparent;
}
:is(.topPanel, .btmsheet) summary {
  list-style: none;
  width: fit-content;
  margin: 0 auto;
}
:is(.topPanel, .btmsheet) summary::-webkit-details-marker { display: none; }
.discBody {
  margin-top: 10px;
  padding: 10px 14px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--fld-bd);
  border-radius: var(--card-r);
}
.discBody .fgroup, .discBody .swrow, .discBody .optRow { width: 100%; }

/* 第8便 (カジさん指摘2): タイルの置き場所は探すことが多いので、
   ほかの注記より目立たせる。 */
.fnote[data-canon] {
  font-weight: 700;
  color: var(--ink);
  word-break: break-all;
}

/* ---- 3-7b. 権限の3枠 (第8便) ----
   自分 / なかま / だれでも を横に並べる。自分は rwxa 固定なので
   押せない札として見せる (台帳 G6「消さずに薄く残す」と同じ考えかた)。 */
.permRow {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  width: 100%; margin: 8px 0;
}
.permCell { display: flex; flex-direction: column; gap: 4px; }
.permCell > span { font-size: 12px; color: var(--muted); text-shadow: none; }
.permCell input.txtOne {
  width: 6.5em; text-align: center; letter-spacing: 0.18em;
}
.permFixed {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 14px;
  box-sizing: border-box;
  border: 2px solid var(--fld-bd); border-radius: 12px;
  background: #eef3f8;
  font-weight: 700; letter-spacing: 0.18em;
  color: var(--ink); text-shadow: none;
}

/* ---- 3-7c. 丸い時計 (第16便) ----
   絵は使わず SVG で描く。はりの先の透明なつまみを掴んで回す。 */
.clockFace {
  /* 16th batch: viewBox is 200x200 whatever the drawn size, so the hand
     maths never changes. Kept a little smaller than the box so the tile
     itself still shows above the sheet. */
  width: 168px; height: 168px; touch-action: none; display: block;
}
.clockRim {
  fill: #ffffff; stroke: var(--ink); stroke-width: 3;
}
.clockTick { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.clockHub  { fill: var(--ink); }
.clockHourHand {
  stroke: var(--ink); stroke-width: 8; stroke-linecap: round;
}
.clockMinHand {
  stroke: var(--c-sel); stroke-width: 5; stroke-linecap: round;
}
/* 掴むところ。見えないが指はここに当たる (つまみの考えかたは台帳 J3 と同じ) */
.clockGrip { fill: rgba(0, 136, 204, 0.001); cursor: grab; }
.clockGrip:active { cursor: grabbing; }

/* ---- 3-8. Drop zone ---- */
.dropZone {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  width: 90%; min-height: 96px;
  margin: 10px auto;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.5);
  border: 2px dashed var(--fld-bd);
  border-radius: var(--card-r);
  color: var(--muted);
  font-size: 14px; line-height: 1.6;
  text-shadow: none;
}
.dropZone.dragover {
  border-color: var(--c-sel);
  background: var(--c-sel-tint);
  color: var(--ink);
}

/* ---- 3-9. Selection box / add ghost (タイル面のオーバーレイ) ---- */
#selBox {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--c-sel);
  border-radius: 6px;
  background: rgba(0, 136, 204, 0.08);
  pointer-events: none;
  /* .selLayer の中に入るので、要素(.el)より必ず上に来る */
  z-index: 900;
}
#selBox > * { pointer-events: auto; }
/* ============================================================
   ★★★ 第106便c: スマホで文の一部を選ぶ
   ------------------------------------------------------------
   ★ `user-select: none` を当てるのは **スマホだけ**です。
     パソコンでは、これまでどおりなぞれます。
   ★★ これを当てると、こちらから作った範囲も getSelection() から
     読めなくなります (台帳 7-126)。ですので JS 側は自前の範囲を
     持っています。**片方だけ直さないこと。**
   ============================================================ */
body.is-phone .segView {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* ★ 棒。**文字を1つも足さない**印です (足すと何文字目かがずれます) */
.segCaret {
  display: inline-block;
  width: 0;
  height: 1.1em;
  vertical-align: text-bottom;
  border-left: 2px solid var(--c-sel, #0088cc);
  margin: 0 -1px;
  animation: segBlink 1s steps(2, start) infinite;
}
@keyframes segBlink { to { visibility: hidden; } }
/* ★ 選んだ所。近さの色の上に重ねるので、**下地は透かします** */
.segView .segPick {
  background: rgba(0, 136, 204, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 136, 204, 0.5) inset;
  border-radius: 2px;
}
.segPickRow .button { flex: 1 1 0; min-width: 0; padding: 0 6px; }
/* ============================================================
   ★ 第106便b: 留めてある要素 (pinned)
   ------------------------------------------------------------
   ふだんの枠は **破線** です（＝つかめる、動かせる）。
   留めてあるときは **実線** にします（＝動かない）。
   ★★ 逆にしてはいけません。破線は「まだ決まっていない」、
     実線は「決まっている」という、この画面ぜんたいの約束です。
   ★ つまみ (#selResize / #selRotate) は JS 側で出しません。
     見えているのに効かない、をつくらないためです（台帳 7-89）。
   ============================================================ */
#selBox.is-pinned {
  border-style: solid;
  background: rgba(0, 51, 102, 0.06);
}
/* ★ 留めどめの札。ふつうの fnote は縦に積むので、ここだけ横に並べます */
.pinRow {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* 第5便: つまみは四隅にまたがって置く (台帳 J3)。
   左上 = i (この要素を直す) / 左下 = 文字のそろえかた (文字・文章だけ) /
   右下 = ● 大きさ / その外側の斜め下 = かたむき。
   .selLayer が切り取らないので、タイルの端でも欠けない。 */
.selHandle {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--c-sel);
  box-shadow: var(--shadow);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-sel);
  font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer;
  text-shadow: none;
}
#selResize { right: -13px; bottom: -13px; background: var(--c-sel); border-color: #fff;
             cursor: nwse-resize; }
#selRotate { right: -40px; bottom: -40px; font-size: 15px; cursor: grab; }
#selAlign  { left: -13px; bottom: -13px; }

/* ============================================================
   ★★★ 第123便 (カジさんご指示): ［コピー］は **枠の右上**
   ------------------------------------------------------------
   > 領域の枠の左上に "i"、左下に行揃え、下に "+Z" と "-Z" が出ているが、
   > その右上にコピーと出してほしい

   ★★ 右上は、これまで1つも使っていませんでした
     （`top` を持つのは左上の `#selInfo` だけ、`right` を持つのは
      右下の `#selResize` / `#selRotate` だけ）。
   ★★★ ほかのつまみは 26px の丸ですが、これだけ **横長**です。
     「コピー」の4文字は、丸には入りません。
   ============================================================ */
#selCopy {
  right: -13px; top: -13px;
  width: auto; min-width: 26px; padding: 0 9px;
  border-radius: 13px; font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
/* i ボタン: 左上。旧バージョンと同じ「丸に i」 */
/* 第8便 (カジさん指摘7): "i" は編集シートへの唯一の入口になったので、
   ほかのつまみの倍の大きさにして、押しやすく目立つようにする。 */
#selInfo {
  width: 52px; height: 52px;
  left: -26px; top: -26px;
  background: var(--c-sel); color: #fff; border-color: #fff;
  border-width: 3px;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 28px; font-weight: 700;
}
/* 第5便: 置き場所を決めている最中の枠 (まだタイルには足していない)。
   選択枠と色を変えて「これはまだ仮のもの」と分かるようにする。
   #selBox とちがって枠そのものを掴んで動かすので pointer-events は通す。 */
/* 第8便 (カジさん指摘4): かさなりの前後を1段ずつ動かすつまみ。
   要素の下、中央に並べる。絵は ui_images/ic_plusZ.png / ic_minusZ.png。
   (ic_plus.png は #hdrPlus が使う別のアイコンなので、名前を分けてある) 
   (絵が無い間も丸は出るので、押す場所は分かる) */
#selZUp, #selZDown {
  bottom: -13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
}
#selZUp   { left: calc(50% - 30px); background-image: url('ui_images/ic_plusZ.png'); }
#selZDown { left: calc(50% + 4px);  background-image: url('ui_images/ic_minusZ.png'); }

#addGhost {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--k-sticker);
  border-radius: 6px;
  background: rgba(153, 51, 204, 0.12);
  z-index: 900;
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}
#ghostResize {
  right: -13px; bottom: -13px;
  background: var(--k-sticker); border-color: #fff;
  cursor: nwse-resize;
}

/* ---- 3-10. Tool box: ボトムシートに固定する (浮遊窓ではなく) ----
   スマホで LOD のペイントが効かないのは、浮遊ツールボックスが
   タイルとタッチを奪い合うため。固定すると競合しなくなる。
   .floating は PC 用に残す。 */
.ToolBox {
  display: flex; gap: 8px;
  width: 100%;
  padding: 6px 2px;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ToolBox::-webkit-scrollbar { display: none; }
.ToolBox.wrap { flex-wrap: wrap; overflow-x: visible; }
.toolBtn {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  width: var(--tool-sz); height: var(--tool-sz);
  background: #ffffff;
  border: 2px solid var(--fld-bd);
  border-radius: 16px;
  box-shadow: var(--shadow);
  font-size: 12px; font-weight: 700;
  color: var(--ink);
  text-shadow: none;
  cursor: pointer;
}
.toolBtn.is-on { border-color: var(--c-sel); background: var(--c-sel-tint); }
.toolBtn[data-lod="0"].is-on { border-color: var(--lod0); }
.toolBtn[data-lod="1"].is-on { border-color: var(--lod1); }
.toolBtn[data-lod="2"].is-on { border-color: var(--lod2); }
.toolBtn[data-lod="3"].is-on { border-color: var(--lod3); }
.toolBtn[data-lod="4"].is-on { border-color: var(--lod4); }
.toolBtn[data-lod="5"].is-on { border-color: var(--lod5); }
.swatch {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.swatch.is-on { border-color: var(--c-sel); }

.ToolBox.floating {
  /* ★ 第117便: 浮かぶ道具箱は **シートの上・トップパネルの下**。
     シートを開いたまま使う道具ですので、シートより前。
     トップパネルが出たときは、道具そのものを下ろします（st_edit.js） */
  position: fixed;
  width: auto; max-width: 92vw;
  padding: 8px 10px;
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  z-index: var(--z-float);
  touch-action: none;
}

/* ---- 3-10b. ペイントの浮かぶツールボックス (第5便 / カジさん指示3) ----
   絵を描いている間は指がタイルの上を動くので、道具はタイルの外へ逃がす。
   出る側は利き手の反対 (sideMenu と重ならないように)。
   置いた場所は覚えない = つぎに開いたときは必ず決まった所に出る。 */
.ToolBox.col {
  flex-direction: column;
  width: auto;
  overflow: visible;
  align-items: center;
}
#paintBox { top: 100px; }
body.hand-left  #paintBox { right: 10px; left: auto; }
body.hand-right #paintBox { left: 10px; right: auto; }

/* ---- 3-10c. グループの浮かぶ道具箱 (第83便 / G2) ----
   ボトムシートと同時に使えるようにするためのものです。
   名簿は縦に伸びますので、高さに上限を付けて中だけ転がします。 */
/* ★ 第84便 (カジさんご指示): スマホで大きすぎ、タイルがほとんど見えなく
   なっていました。**幅を 3/4 に**し、**頭の ▽ でたためる**ようにし、
   名簿の文字は説明文と同じ大きさにしました。 */
#groupBox {
  top: 90px;
  width: 69vw; max-width: 260px;      /* 前は 92vw まで広がっていました */
  max-height: 70vh;
  align-items: stretch;
  padding: 6px 8px; gap: 5px;
}
body.hand-left  #groupBox { right: 10px; left: auto; }
body.hand-right #groupBox { left: 10px; right: auto; }
#groupBox .gbBody { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* ★ hidden より display:flex のほうが強いので、たためませんでした */
#groupBox .gbBody[hidden] { display: none; }
#groupBox .gbWho { overflow-y: auto; max-height: 38vh; }
#groupBox select { width: 100%; font-size: var(--fld-fs); }
#groupBox [data-gb="wnote"] { font-size: 11px; }
#groupBox .toolBtn {
  width: auto; height: auto;
  min-height: 30px;
  padding: 4px 8px;
  flex-direction: row;
  font-size: 12px;
  border-radius: 12px;
}
#groupBox .gbActs { display: flex; flex-wrap: wrap; gap: 5px; }
#groupBox .fnote { font-size: 11px; }
/* 名簿の1行。★ チェックを入れて、下のボタンでまとめてします */
.gwRow {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.5;
  padding: 2px 0;
  cursor: pointer;
}
.gwRow input { flex: 0 0 auto; margin: 0; }
.gwGap { flex: 0 0 auto; width: 13px; }
/* ★ 第91便: チェックは**チェックのところだけ**で入ります (カジさんご指示)。
   指で押しにくくならないよう、まわりに少しだけ余白を持たせます */
.gwPick {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 4px; margin: -4px;
  cursor: pointer;
}
/* ★ 名前は押せます。押すと、その方の ID がひとつだけ下に出ます。
   ボタンですが、見た目は名簿の字のままにします */
button.gwName {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit;
  text-align: left;
  cursor: pointer;
}
button.gwName[data-noname="1"] { opacity: 0.75; }
/* ★ 自分の行の印。太さは変えず、色も足しません。
   **見分けがつけばよい**ので、いちばん静かな出しかたにします */
.gwMe { flex: 0 0 auto; font-size: 11px; opacity: 0.7; }
/* ★ 第92便: さいきんのできごと。名簿の下に、静かに置きます */
.gwEvents { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--fld-bd); }
.gwEvHead { font-size: 11px; opacity: 0.7; padding-bottom: 2px; }
.gwEv { font-size: 11px; line-height: 1.5; opacity: 0.85; }
/* 押されたときだけ出る ID。写せるように、選べる形にしておきます */
.gwId {
  font-size: 11px; opacity: 0.8;
  padding: 0 0 3px 19px;
  word-break: break-all;
  user-select: all;
}
/* ★ 第85便: メンバーを足す欄。TU- は書いてあるだけで、打つのは後ろだけ */
#groupBox .gbAdd { display: flex; align-items: center; gap: 4px; }
#groupBox .gbAddHead { flex: 0 0 auto; font-size: 12px; opacity: 0.8; }
#groupBox .gbAdd input { flex: 1 1 auto; min-width: 0; font-size: var(--fld-fs); }
/* ★ 第87便: グループ参加キー。口で伝えたり紙に書いたりするので、大きめに */
#groupBox .gbKey { display: flex; flex-direction: column; gap: 4px; }
#groupBox .gbKeyVal {
  font-size: 17px; font-weight: 700; letter-spacing: 2px;
  text-align: center; padding: 4px 0;
  border: 2px dashed var(--fld-bd); border-radius: 8px;
  user-select: all;
}
.gwName { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gwRole { flex: 0 0 auto; font-size: 11px; opacity: 0.7; }
/* 頭の帯。**ここをつかむと箱ごと動きます** */
.tbHead {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--ink);
  padding: 2px 2px 4px;
  cursor: move;
  touch-action: none;
}
.tbFold {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: none; background: transparent;
  font-size: 13px; line-height: 1; color: var(--ink);
  cursor: pointer;
}
.tbSep {
  flex: 0 0 auto;
  width: 80%; height: 2px;
  background: var(--fld-bd);
  border-radius: 1px;
}
.tbDot {
  display: block;
  border-radius: 50%;
  background: currentColor;
}
.tbDot.tbErase {
  width: 14px; height: 10px;
  border-radius: 3px;
  background: #ffffff;
  border: 2px solid currentColor;
}
/* 描いている途中の線 (保存しない一時的な絵) */
#paintOverlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 900;
}
/* 画像に紐づけて描いているとき、その画像を見て分かるようにする */
.el.paint-target {
  outline: 3px dashed var(--k-draw);
  outline-offset: 2px;
}

/* ---- 3-10c. 文字の近さを変える道具 (第5便 / カジさん指示3) ----
   タイルの中の文をそのまま指でなぞる。なぞれるように、この間だけ
   .el の中で文字選択を許し、当たり判定も通す。 */
.el.ttTarget {
  -webkit-user-select: text;
  user-select: text;
  pointer-events: auto;
  cursor: text;
}
.el.ttTarget::selection, .el.ttTarget *::selection { background: var(--c-sel-tint); }
.segEmpty { opacity: 0.5; }
/* シートの中の「えらんだ文」欄 */
.ttPick {
  min-height: 2.4em;
  padding: 10px 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 2px solid var(--fld-bd);
  border-radius: var(--fld-r);
  font-size: var(--fld-fs);
  line-height: 1.5;
  color: var(--ink);
  text-shadow: none;
  word-break: break-word;
}
.ttPick.isNone { color: #7f93a6; }

/* ---- 3-11. SegEdit (文字セグメント編集) ---- */
.selWrap { width: 100%; }
.selWrap .txtSel {
  max-height: none;            /* iOS の長文選択対策。維持 */
  min-height: calc(var(--body-lines) * var(--body-lh) * 1em + 24px);
  padding: 12px 14px;
  box-sizing: border-box;
  background: #ffffff;
  border: 2px solid var(--fld-bd);
  border-radius: var(--fld-r);
  font-size: var(--fld-fs);
  line-height: var(--body-lh);
  color: var(--ink);
  text-shadow: none;
  overflow: visible;
  -webkit-user-select: text;
  user-select: text;
}
.selWrap .txtSel:focus { border-color: var(--c-sel); outline: none; }
.segLod0 { background: rgba(51, 102, 204, 0.14); }
.segLod1 { background: rgba(51, 153, 102, 0.14); }
.segLod2 { background: rgba(204, 153, 51, 0.16); }
.segLod3 { background: rgba(204, 51, 153, 0.14); }
.segLod4 { background: rgba(124, 92, 255, 0.14); }
.segLod5 { background: rgba(43, 122, 120, 0.16); }
.selWrap .txtSel a {
  color: var(--lod0);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 3-11b. LODセグメントの行 (第4便: 要素シートの中)
   .selWrap は「一枚の長い本文を選んで色を付ける」ための入れ物で、
   5行ぶんの下限を持っている。要素シートのほうは短い文が縦に何本も
   並ぶので、同じ下限だと画面がすぐ埋まる。こちらは1行から始めて
   書いた分だけ伸びる別の入れ物にする。

   注意 (:is の詳細度): 3-1a の ":is(.topPanel,.btmsheet) textarea" は
   (0,1,1)。下の .segRow .segText は (0,2,0) なので勝つ。色の指定は
   さらに .segLodN を重ねて (0,3,0) にしないと、上の background に
   負けて色が付かない。 ---- */
.segRow {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; margin: 12px 0;
}
.segRow .segNo {
  font-size: 12px; font-weight: 700;
  color: var(--muted); text-shadow: none;
}
.segRow .segText {
  min-height: 46px;
  max-height: 34vh;
  padding: 10px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.segRow .segText.segLod0 { background: rgba(51, 102, 204, 0.14); }
.segRow .segText.segLod1 { background: rgba(51, 153, 102, 0.14); }
.segRow .segText.segLod2 { background: rgba(204, 153, 51, 0.16); }
.segRow .segText.segLod3 { background: rgba(204, 51, 153, 0.14); }
.segRow .segText.segLod4 { background: rgba(124, 92, 255, 0.14); }
.segRow .segText.segLod5 { background: rgba(43, 122, 120, 0.16); }
.segRow .optRow { width: 100%; margin: 0; }
.segRow .segFoot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

/* ---- 3-12. Save result (valResult): 保存直後だけ出す ---- */
#valResult {
  display: none;
  width: 90%; margin: 8px auto;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: var(--card-r);
  font-size: 14px; line-height: 1.6;
  text-shadow: none;
}
#valResult.show { display: block; }
#valResult.ok { background: var(--c-ok-tint); border: 2px solid var(--c-ok); color: var(--ink); }
#valResult.ng { background: #fdeaea; border: 2px solid var(--danger); color: #802020; }
#valResult ul { margin: 6px 0 0; padding-left: 20px; }

/* ---- 3-13. Empty state / hint ---- */
.emptyNote {
  width: 90%; margin: 14px auto;
  text-align: center;
  font-size: 14px; line-height: 1.7;
  color: var(--muted);
  text-shadow: none;
}

/* ---- 3-13b. Editor 固有 (第3便) ---- */

/* Editor では鉛筆(タイル隅の編集入口)は出さない。
   CONFIG.EDIT_ICON.enabled=false でも消えるが、二重の保険。 */
body.page-editor .editBtn { display: none !important; }
/* Editor では中央の1枚しか居ないので、フォーカス印は意味を持たない */
body.page-editor .focusDot { display: none !important; }

/* コントロールパッドの四隅 = エッジの状態。
   閉じている向きは薄く、つながっている向きははっきり見せる。
   (色の意味づけは第5便でタイル追随 NWES を入れるときに詰める) */
.controlPad .iconSmall[data-state="closed"] { opacity: 0.45; }
.controlPad .iconSmall[data-state="open"]   { opacity: 0.75; }
.controlPad .iconSmall[data-state="linked"],
.controlPad .iconSmall[data-state="portal"] { opacity: 1; }

/* ---- 3-14. hidden 属性の最終防衛線 ----
   .fnote / .dropZone / .lrow のように display を明示するクラスは、
   ブラウザ既定の [hidden]{display:none} を上書きしてしまう。
   ここでレイヤー3の最後に置くことで、同じ詳細度なら後勝ちで hidden が効く。
   !important を足さずに済ませるための1行。順序を動かさないこと。 */
[hidden] { display: none; }

/* パネル/シートの中のフィールドだけは、上の1行では止められない。
   3-1 の ":is(.topPanel,.btmsheet) :is(input[type=text], ... , select)" の
   詳細度は クラス(0,1,0) + 要素+属性(0,1,1) = (0,2,1) あり、
   [hidden] の (0,1,0) では届かない。
   属性セレクタを2回書いて (0,1,0)+(0,2,0) = (0,3,0) にして勝ち切る。
   見た目は奇妙だが、!important を1つも増やさずに済む書きかた。
   (第3便: エッジシートの #edTargetFree が hidden なのに出ていた不具合の修正) */
:is(.topPanel, .btmsheet) [hidden][hidden] { display: none; }

/* ============================================================
   第31便: 合言葉ともどり札 (#authPanel)
   ------------------------------------------------------------
   入力そのものの見た目は 3-1 の :is(.topPanel,.btmsheet) 側で付くので、
   ここは「行の組み方」と「札の見せ方」だけを足す。
   ============================================================ */
#authPanel .fRow {
  display: flex; flex-wrap: wrap; align-items: center;
  width: 90%; margin: 3px auto; padding: 0 0 5px; gap: 8px;
}
#authPanel .fLabel {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #000;
}
#authPanel .txtIn { flex: 1 1 180px; min-width: 0; }
#authPanel .ymRow { display: flex; flex: 1 1 160px; gap: 8px; min-width: 0; }
#authPanel .ymRow .txtNum { flex: 1 1 60px; min-width: 0; }

/* もどり札は、書き写すためのもの。読み違えないように大きく、字間をあける */
#authPanel .slipBox {
  width: 90%; margin: 6px auto; padding: 12px 8px;
  border: 2px dashed var(--ink); border-radius: 10px;
  background: #fff; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px; letter-spacing: .08em; word-break: break-all;
  user-select: all; -webkit-user-select: all;
}

/* 「合言葉を忘れた」は、ボタンではなく道しるべ */
#authPanel .linkBtn {
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  color: var(--ink); font-size: 13px; text-decoration: underline;
}

/* G6: 押せないあいだも、消さずに薄くする */
#authPanel button[disabled] { opacity: .4; cursor: default; }
#authPanel.is-busy { pointer-events: auto; }

/* 第31便b: パスワード再発行コードの見出しと注意書き。
   ここは **1度しか出ない**画面なので、見落とされたら取り返せない。
   ふつうの見出し (黒地) より一段強く、赤地に白抜きにする。 */
#authPanel .ptitleWarn {
  background: #c0202a; color: #ffffff;
}
#authPanel .warnNote {
  color: #c0202a; font-weight: 700;
}

/* ★★★ 第134便: アイコンの画面の注意書きも、同じ強さで出します。

   第131便で `class="fnote warnNote"` と書いてありましたが、上の決まりが
   **`#authPanel` の中だけ**に効くものだったため、アイコンの画面では
   ただの小さい灰色の字のままでした。
   ★ カジさんの「個人を特定できる画像を使わないでほしい」という一文は、
     **見落とされたら取り返せない**たぐいのものです。強く出します。 */
#uiconPanel .warnNote {
  color: #c0202a; font-weight: 700;
}

/* 第31便h: はじめてのパスワードを決めるあいだの幕。
   登録した直後にハンバーガーを押すと、パネルが1枚だけの決まりで
   パスワードの画面が閉じてしまい、決める道が無くなっていた
   (カジさんのご指摘3)。触れなくすることで、その道を残す。 */
.authLock {
  position: fixed; inset: 0;
  background: rgba(20, 20, 24, .55);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}

/* ============================================================
   第31便j: せまい画面 (body.is-phone) の寸法
   ------------------------------------------------------------
   ヘッダーに ic_sign が1つ増えたので、スマホでは
   ＋ / ロゴ / sign / メニュー が一段に収まらなくなりました。
   PC は今までどおり、スマホだけ一段小さくします。
   線引きは JS の isPhoneLike() (st_ui.js markPhone) が付けます。
   ============================================================ */

/* ヘッダーと側方メニューのアイコンは、スマホでは中サイズに */
body.is-phone .app-header .iconLarge,
body.is-phone .sideMenu .iconLarge {
  width: var(--icon-m); height: var(--icon-m);
}

/* ロゴは高さ 0.6倍 / 横 0.6倍 (= 高さの4倍) */
body.is-phone #hdrLogo {
  height: calc(var(--logo-h) * 0.6);
  width: calc(var(--logo-w) * 0.6);
}

/* 足元のパッド。**輪は 0.75倍、つまみは今の大きさのまま。**
   つまみは輪に対する % なので、輪が縮んだぶん % を戻します
   (140 * 0.34 = 47.6px を 105px の中で保つ = 45.33%)。
   NWES のボタンは iconSmall のままなので大きさは変わりません。
   箱 (--pad-box) を少しだけ詰めて、その分をズームレンズに回します。 */
body.is-phone {
  --pad-wrap: 105px;
  --pad-box: 165px;
}
/* ★★ 第134便 (A5): スマホも同じ割合で +20% (45.33% → 54.4%) */
body.is-phone #padKnob { width: 54.4%; height: 54.4%; }

/* ★★ 第103便 (カジさんご要望2): エディターのパッドの箱を、輪まで詰めます。

   `--pad-box` は「パッドが取る場所」です。ビューワーでは、その四隅ではなく
   **上下左右に移動ボタン (navU/D/L/R) が並ぶ**ので、輪より大きく取ってあります。

   ★ エディターには、そのボタンがありません。第20便で **N/W/E/S をタイルの
     四辺へ引っ越した**ためです。ですので**輪のまわりが、そのぶん空いていました**
     (カジさんご指摘)。

   ★ 箱を輪 + 10px まで詰めると、
       ・パッドが **左下へ寄り**ます (輪は箱の中央にあるため)
       ・ズームの帯が **そのぶん長くなり**ます (帯は `--pad-box + 20px` から始まる)
       ・横メニューの下端も下がります (`--pad-box + --gap-y` を見ているため)
   ★ 指の操作は変わりません。st_input.js は **#padCircle 自身の大きさ**を
     測っているので、箱の大きさを見ていません。

   ★★ この1行は `body.is-phone` の **後ろ**でなければいけません。
     詳細度が同じ (0,1,1) なので、**前に置くと上の 165px に負けます**
     (台帳 7-14 / 7-116: 詳細度で負けるのは、これで5度目です)。 */
body.page-editor { --pad-box: calc(var(--pad-wrap) + 10px); }

/* ============================================================
   第32便: やりとり / つたえる
   ============================================================ */
/* ★★★ 第128便 (カジさんご報告): ここは `#talkPanel` にしか掛かって
   いませんでした。ですので **Edge の画面の一覧だけ**が、高さの上限も
   すきまも持たず、フォルダの道しるべ（パンくず）が見つけにくい形に
   なっていました。★ 3つの一覧に、同じものを掛けます。 */
#talkPanel .msgList,
#edgePanel .msgList {
  width: 90%; margin: 6px auto; max-height: 40vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
/* ★★ フォルダの道しるべは、**いつも見える所**に留めます
   （一覧を下へなぞっても、戻り道が画面から出ていかないように） */
.msgList .fdTrail {
  position: sticky; top: 0; z-index: 1;
  background: #ffffff; padding: 4px 0; margin: 0;
  border-bottom: 1px solid var(--line, #e0e0e0);
}
.msgItem {
  border: 1px solid var(--line, #e0e0e0); border-radius: 10px;
  padding: 8px 10px; background: #fff; text-align: left;
}
/* 運営からのものは、ひと目で分かるように色を変える */
.msgItem.is-admin { background: #eef5ff; border-color: #bcd4f6; }
.msgHead { display: flex; justify-content: space-between; gap: 8px; }
.msgWho { font-size: 12px; font-weight: 700; }
.msgDate { font-size: 11px; color: #666; }
.msgBody { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
/* ★★★ 第119便a (カジさんご要望): 知らせの中のタイルの名前から、
   ビューワーへ。★ 下線を残します —— 色だけで「押せる」を言うと、
   色の見分けにくい方には伝わりません（憲法19条）。 */
.msgBody .tileLink { color: inherit; text-decoration: underline; }
.msgBody .tileLink:hover { text-decoration: none; }

/* ★★★ 第119便a: 終わったことを、ひとこと（st_ui.js の Toast） */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 28px; z-index: var(--z-toast);
  max-width: min(92vw, 420px);
  background: #23282e; color: #fff;
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; line-height: 1.65; white-space: pre-wrap;
  text-align: center; box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  pointer-events: none;          /* ★ 押せません。下の道をふさぎません */
}
.toast[hidden] { display: none; }

:is(#talkPanel, #tellPanel) .txtArea {
  width: 100%; box-sizing: border-box; resize: vertical;
}
:is(#talkPanel, #tellPanel) .fRow {
  display: flex; flex-wrap: wrap; align-items: center;
  width: 90%; margin: 3px auto; padding: 0 0 5px; gap: 8px;
}
:is(#talkPanel, #tellPanel) .fLabel {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #000;
}
:is(#talkPanel, #tellPanel) .txtIn { flex: 1 1 180px; min-width: 0; }

/* 「いっしょに送るもの」。**黙って集めない**ので、そのまま見せる */
#tellPanel .metaBox {
  width: 90%; margin: 4px auto; padding: 8px 10px; box-sizing: border-box;
  border: 1px dashed var(--line, #ccc); border-radius: 8px; background: #fafafa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5; text-align: left;
  white-space: pre-wrap; word-break: break-all; max-height: 22vh; overflow-y: auto;
}

/* 非会員には、やりとりも通報も出しません (入ってからのものです) */
body.guest-view #mnTalkRow,
body.guest-view #mnTellRow { display: none; }

/* ============================================================
   第33便: スタンプ
   ============================================================ */
.el-sticker { display: flex; align-items: center; justify-content: center; }
.el-sticker svg { display: block; width: 100%; height: 100%; }

/* えらぶところ。絵そのものを見せる = 名前を覚えなくてよい */
.stampGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px; width: 90%; margin: 4px auto;
}
.stampGrid .stampBtn {
  width: 100%; height: 52px; padding: 6px; border-radius: 12px;
  background: #fff; border: 2px solid var(--line, #e0e0e0);
  display: flex; align-items: center; justify-content: center;
}
.stampGrid .stampBtn.is-on { border-color: var(--c-sel, #e5397f); background: #fff7fb; }
.stampGrid .stampBtn svg { width: 100%; height: 100%; pointer-events: none; }

/* 色見本 */
.optRow .swatch {
  width: 34px; height: 34px; min-width: 34px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; box-shadow: var(--shadow);
}
.optRow .swatch.is-on { outline: 3px solid var(--c-sel, #e5397f); outline-offset: 2px; }

/* ============================================================
   第35便 step2: Wikipedia からストリップ
   ============================================================ */
#wikiPanel .fRow {
  display: flex; width: 90%; margin: 6px auto; gap: 8px;
}
#wikiPanel .txtIn { flex: 1 1 auto; min-width: 0; }
#wikiPanel .wkList {
  width: 90%; margin: 6px auto; max-height: 38vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
#wikiPanel .wkRow {
  display: flex; gap: 8px; align-items: baseline; text-align: left;
  border: 1px solid var(--line, #e0e0e0); border-radius: 8px;
  padding: 6px 8px; background: #fff;
}
#wikiPanel .wkNo {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #888;
  min-width: 1.4em;
}
#wikiPanel .wkTtl { font-size: 13px; word-break: break-word; }

/* ============================================================
   第36便: info (dbgPanel) の文字を大きく
   ------------------------------------------------------------
   ここは「見えなくて困っている」ところなので、
   PC は 1.5倍、スマホは 1.2倍にします。
   スマホのほうを控えめにするのは、画面の幅が足りないためです。
   ============================================================ */
#dbgPanel { font-size: 16.5px; }            /* 11px の 1.5倍 */
body.is-phone #dbgPanel { font-size: 13.2px; }   /* 11px の 1.2倍 */
#dbgBody { white-space: pre; }
/* コピーのボタンは、文の下にひと呼吸おいて置く */
#dbgPanel .lrow { width: 100%; margin: 8px 0 0; padding: 0; }
#dbgPanel #dbgCopy { height: 34px; padding: 0 14px; font-size: 13px; }

/* ============================================================
   第38便: 色の並びの ＋ (端末の色えらびを開く)
   ============================================================ */
.swatchPlus {
  position: relative;
  background: #fff; color: var(--ink, #333);
  border: 2px dashed var(--line, #bbb);
  font-size: 20px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 色えらびそのものは、＋ の下にぴったり重ねて隠します。
   隠しても click() で開けます (見た目は ＋ のまま) */
.swatchPlus .colorPick {
  position: absolute; inset: 0; opacity: 0; padding: 0; border: none;
  width: 100%; height: 100%; cursor: pointer;
}

/* 第38便b: 浮かぶ道具箱 (縦長) の中では、色の並びも縦に積みます。
   ここだけ横に並べて折り返すと、箱の形がくずれます。
   まるの大きさも、道具箱の中では前と同じ 40px に戻します
   (パネルの中は 34px のまま = せまい所にたくさん並べたいので)。 */
.ToolBox.col .optRow {
  flex-direction: column;
  flex-wrap: nowrap;
  width: auto;
  margin: 0;
  align-items: center;
}
.ToolBox.col .optRow .swatch {
  width: 40px; height: 40px; min-width: 40px;
}

/* ============================================================
   第43便: 数で決める置き場所と大きさ / 画像の梯子
   ============================================================ */
.numCell {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 2px; flex: 1 1 44%; min-width: 0;
}
.numCell .numTag { font-size: 11px; font-weight: 700; color: #666; }
.numCell .txtOne { width: 100%; box-sizing: border-box; }
.szRow [data-lad="ref"] {
  flex: 1 1 auto; min-width: 0; word-break: break-all; text-align: left;
}

/* ============================================================
   第44便: SNS でシェアする
   ============================================================ */
.snsRow {
  display: flex; flex-wrap: wrap; gap: 8px;
  width: 90%; margin: 8px auto; justify-content: center;
}
.snsRow .snsBtn { flex: 0 1 auto; }
/* ★★★★ 第158便: SNS のボタンを、絵に（カジさんご用意の公式アイコン）
   ------------------------------------------------------------
   カジさんより（2026-08-19）

     > 各サービスごとに周辺に余白を設けるレギュレーションがありますが、
     > 余白のもっとも多いサービスに合わせて作成しました。この状態で
     > 余白の条件は満たしていますので、画面に並べる際にこれ以上余白を
     > 設ける必要はありません。ピタッと並べて問題ありません。
     > LINEは画像部は画面上で7mm以下にならないという指定があります。

   ★★★ ですので、こちらでは **余白を1つも足しません**。
     ・padding なし ・border なし ・背景なし ・すきま（gap）なし
     ★★ 絵のまわりの余白は、絵そのものが持っています。

   ★★★★ そして「画面上で 7mm」には、**落とし穴**があります。

   ```
      ★★★ CSS の `7mm` は、どの機械でも 26.5px と決まっています。
        ★★★★ ですが、スマホの 1px は **物理的にとても小さい**ので、
          `7mm` と書いても iPhone では **4.3mm** にしかなりません。
        ★★ CSS の mm は、物理の mm ではありません。
   ```

   ★★★★ ですので、**実機の物理の大きさから px を出しました**。

   ```
      機械               1 CSS px    7mm に要る px
      iPhone SE 2/3      0.1558 mm     44.9 px    ← いちばん厳しい
      iPhone 13〜15      0.1657 mm     42.3 px
      Android 一般        0.1905 mm     36.7 px
      PC (96dpi)         0.2646 mm     26.5 px
   ```

   ★★★★ そして、いただいた PNG の **マークの大きさ**を測りました。

   ```
      bluesky 130x115 / facebook 110x111 / line 114x113 / pinterest 128x128
      threads 115x128 / whatsapp 129x129 / x 123x126      （どれも 256x256 の中）

      ★★★★ 測ってみて、**LINE ではありませんでした** ——
        いちばん小さいのは facebook で 110/256 = **0.430** です
        （LINE は 113/256 = 0.441）。★★ 目で見て決めずに測って
        よかった所です（札が見つけてくれました）。
   ```

   → ★★ 7mm の決まりは LINE のものですが、**いちばん小さい絵に
     合わせて**おけば、7つとも決まりを満たします。そのほうが
     考えることが1つで済みます。

   ```
      スマホ … 105px  → いちばん小さい絵で 105 x 0.430 = 45.1px
                        → iPhone SE で 45.1 x 0.1558 = **7.03 mm** ✓
                        → LINE は 105 x 0.441 = 46.3px = **7.22 mm** ✓
      PC    …  62px  → いちばん小さい絵で  62 x 0.430 = 26.6px
                        → 96dpi で 26.6 x 0.2646 = **7.05 mm** ✓
                        → LINE は  62 x 0.441 = 27.4px = **7.24 mm** ✓
   ```
   ★★★★ もし LINE の決まりが「7mm」ではなく px で書かれていましたら、
     下の `--sns-box` の2つの数だけ変えてください。**そこ1か所です。** */
.snsRow { gap: 0; }
.snsRow .snsBtn.hasIcon {
  --sns-box: 62px;                 /* ★ PC: いちばん小さい絵でも 7.0mm */
  padding: 0;                      /* ★★★★ 余白は足しません（絵が持っています） */
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  min-width: 0;
  width: var(--sns-box);
  height: var(--sns-box);
}
body.is-phone .snsRow .snsBtn.hasIcon {
  --sns-box: 105px;                /* ★ スマホ: iPhone SE でも 7.0mm */
}
.snsRow .snsIcon {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;             /* ★★★ かたちを変えません（つぶしません） */
}
#syncPanel .ptitle { display: block; margin-top: 10px; }
#syncPanel #shareMsg { min-height: 1.2em; }

/* 第45便: タイルの詳しい情報 (JSON) を読む枠 */
.jsonBox {
  width: 90%; margin: 8px auto; max-height: 46vh; overflow: auto;
  background: #fbfbfd; border: 1px solid var(--line, #e0e0e0);
  border-radius: 8px; padding: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5; text-align: left;
  white-space: pre; -webkit-overflow-scrolling: touch;
  user-select: text; -webkit-user-select: text;
}

/* 第48便: 近さごとの画像。1枚ぶんのまとまり */
.ladRung {
  width: 92%; margin: 8px auto; padding: 8px;
  border: 1px solid var(--line, #e0e0e0); border-radius: 10px;
  background: #fbfbfd;
}
.ladRung .optRow { width: 100%; margin: 6px 0; }
.ladRung [data-lad="now"] { word-break: break-all; text-align: left; }

/* 第53便: 要素の名札 / JSON のなかを探す */
.idBox {
  width: 90%; margin: 4px auto; padding: 6px 8px; text-align: left;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  background: #f4f6f9; border: 1px solid var(--line, #e0e0e0);
  border-radius: 8px; word-break: break-all;
  user-select: text; -webkit-user-select: text;
}
.jsonBox .jsonHit {
  background: #ffe680; color: inherit; border-radius: 3px;
  box-shadow: 0 0 0 2px #ffe680;
}

/* 第55便: チュートリアル中の案内 */
body.tutorial-on [data-tut="gate"] { display: block; margin: 6px auto; width: 90%; }
/* ★ 第67便 (カジさんご指示): チュートリアル中の SYNC は、
   **題と案内の1行だけ**にします。「読む」「つくる」はボタンを
   薄くして残しますが (台帳 G6)、SYNC は先の話がひとつも無いので、
   並べておくと「何を押せばよいのか」を毎回考えることになります。 */
/* ★★★★ 第163便で書き直しました（カジさんご報告の道ではありませんが、
     ここで **閉じられなくなる**ことに気づきました）。
   ------------------------------------------------------------
   ★★★★ 第163便から、パネルの中は `.pHead`（題と ×）と `.pBody`
     （中身）の2つに分かれます。★★ 古い書きかた
     （`#syncPanel > *` を隠す）だと、**帯ごと隠れます** ——
     つまり **× が消え、チュートリアル中は SYNC を閉じられません**。
   ★★★ ですので、隠すのは **中身の側だけ**にします。
     ★★ 第67便のお約束（題と案内の1行だけ）は、そのままです。 */
body.tutorial-on #syncPanel .pBody > *:not([data-tut="gate"]) { display: none; }
body.tutorial-on #syncPanel .pBody > [data-sc="pick"] { display: block; }
body.tutorial-on #syncPanel .pBody > [data-sc="pick"] > *:not(#syncTitle) {
  display: none;
}
/* ★ 着せ替えの前（開くより先）に案内が入ったときのため、両方を見ます */
body.tutorial-on #syncPanel > *:not(.pHead):not([data-tut="gate"]):not(.pBody) {
  display: none;
}

/* ============================================================
   第70便: シェアのカード (OGP) の見本と、文章の量のつまみ
   ------------------------------------------------------------
   ★ canvas は 1200x630 のまま持たせ、**見せる大きさだけ**を
     CSS で縮めます。ここで width/height の属性を変えてしまうと、
     送られる絵まで小さくなります (SNS のカードは 1200x630 が要ります)。
   ============================================================ */
/* ★★★★ 第160便: SYNC のパネルは 2画面になりました。
   絵 (#shareCardBox) は、この受け皿のあいだを移ります。 */
.scHere { display: block; }

/* ★★★★ 第160便 (カジさんご指示): 「タイルのURLをコピーする」を
   目立たせます。info パネルが スタンダードから外れましたので、
   **URL を写す道は、ここだけ**になりました。 */
/* ★★★★ 第161便: 招待の住所。★★ 長いので、**折り返します**。
   はみ出すと、写す前に読めなくなります。 */
.invUrlBox {
  width: 90%;
  max-width: 460px;
  margin: 10px auto 6px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .85);
  text-align: left;
}
.invUrlBox code {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
  overflow-wrap: anywhere;
  color: #12362a;
}

.scBig {
  width: 90%;
  max-width: 420px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: 600;
}

.ogpBox { width: 90%; margin: 10px auto 4px; text-align: left; }
.ogpCard {
  display: block; width: 100%; height: auto; max-width: 420px;
  margin: 0 auto; border-radius: 8px;
  border: 1px solid var(--line, #e0e0e0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
  background: #fff;
}
.ogpLodRow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 420px; margin: 8px auto 0;
}
.ogpLodRow .ogpLod { flex: 1 1 auto; min-width: 0; }
.ogpLodRow #shareLodLab { flex: 0 0 auto; }
.ogpLodRow #shareLodVal { flex: 0 0 auto; min-width: 6em; text-align: right; }
#shareCardNote { display: block; max-width: 420px; margin: 6px auto 0; }


/* ★★ 第97便d: フェーダーの左端より外へ引いているあいだ。
   つまみは左端で止まっているので、**止まっている**のか
   **もっと引けている**のかを、帯の色で見せます */
.zlPulled { box-shadow: inset 0 0 0 2px rgba(120, 90, 160, 0.55); }
.zlPulled #zoomLensRng { filter: saturate(0.6) brightness(0.92); }


/* ============================================================
   ★★ 第97便e: 引いたときの「つながり」の線と、たどれない先の●
   ------------------------------------------------------------
   ★ 世界の子として置くので、**世界の座標のまま**書けます。
     大きさは持たせず、はみ出して描かせます。
   ★ 線の太さは `non-scaling-stroke` で、引いても細りません。
   ============================================================ */
/* ★ 大きさと viewBox は st_grid.js が入れます (世界の座標のまま書くため)。
   ここで width/height を 0 にしてはいけません — Chrome / Edge は
   SVG の外を描かないので、線がまるごと消えます (第97便g) */
#linkLayer { position: absolute; pointer-events: none; z-index: 4; }
.linkLine { stroke: rgba(90, 60, 130, 0.55); stroke-width: 2; }
.linkCut  { stroke-dasharray: 5 4; stroke: rgba(90, 60, 130, 0.42); }
.linkDot {
  fill: #7a5aa8; stroke: #fff; stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: auto; cursor: pointer;
}
.linkTip {
  position: absolute;
  transform: translate(-50%, -140%) scale(calc(1 / var(--zoom, 1)));
  transform-origin: 50% 100%;
  background: #2b2330; color: #fff;
  font-size: 12px; line-height: 1.3;
  padding: 5px 9px; border-radius: 8px;
  white-space: nowrap; pointer-events: auto; cursor: pointer;
  z-index: 12;
}


/* ============================================================
   ★★ 第97便h: 同じストリップのタイルの背に敷く、明るさちがいの灰色
   ------------------------------------------------------------
   ★ 色ではなく**明るさ**で分けます。タイルの色は作者が決めるので、
     色で分けるとけんかします (カジさんのご判断)。
   ★ 枡のすきまは塗りません。**そこが白い区切り**になります。
   ★ 出るのは 7x7 のときだけ (#world[data-wide="max"])。
   ============================================================ */
.stripBand {
  position: absolute; inset: -1.6%;
  border-radius: 14px;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}
/* ★★ 第97便i (カジさんご報告):
   「グレイの階調と伝えましたが、もっとはっきりと違う色が良さそうです」

   はじめは明るさだけで分けました。実際に並べてみると、
   **タイルの白と灰色の差が小さすぎて、分かれて見えません**でした。
   ★ 色みを変えます。ただし **薄く**します。
     濃い色を敷くと、こんどはタイルの色とけんかします
     (もとのご心配は、そこにありました)。
   ★ 5つとも**明るさが近く、色みだけが違う**ようにしてあります。
     色の見分けにくい方にも、並びとして読めるようにするためです。 */
#world[data-wide="on"]  .stripBand[data-band="0"],
#world[data-wide="max"] .stripBand[data-band="0"] { background: #bfdcf6; }  /* 青 */
#world[data-wide="on"]  .stripBand[data-band="1"],
#world[data-wide="max"] .stripBand[data-band="1"] { background: #fbd9a8; }  /* 橙 */
#world[data-wide="on"]  .stripBand[data-band="2"],
#world[data-wide="max"] .stripBand[data-band="2"] { background: #c6e9ba; }  /* 緑 */
#world[data-wide="on"]  .stripBand[data-band="3"],
#world[data-wide="max"] .stripBand[data-band="3"] { background: #f6c2d8; }  /* 桃 */
#world[data-wide="on"]  .stripBand[data-band="4"],
#world[data-wide="max"] .stripBand[data-band="4"] { background: #d7cdf1; }  /* 紫 */

/* ============================================================
   ★★★ 第115便b: つなぎたい理由（6つから1つ）
   ------------------------------------------------------------
   ★ 指で押せる高さにします。丸だけが的だと、押しそこねます —
     行ぜんぶを label にしてありますので、文字を押しても入ります。
   ★★ font-size は **触れる欄には書きません**。16px 未満の欄は
     iOS が勝手に寄せて、戻さないからです（第114便 / 台帳 7-168）。
   ============================================================ */
.radioRow {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%; margin: 2px 0; padding: 7px 2px;
  text-align: left; cursor: pointer;
}
.radioRow > input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; }
.radioRow > .fLabel {
  flex: 1 1 auto; font-weight: 400; line-height: 1.45; color: #000;
}

/* Edge の申請とお返事（事務局との連絡とは別の画面）。
   ★ 見た目は #talkPanel と同じにします。**同じものに見えること**が
     大事で、中の作りまで同じである必要はありません（第114便）。 */
#edgePanel .fRow {
  display: flex; flex-wrap: wrap; align-items: center;
  width: 90%; margin: 3px auto; padding: 0 0 5px; gap: 8px;
}
#edgePanel .fLabel {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #000;
}

/* ============================================================
   ★★★ 第116便: タイルの選び場 (st_pick.js)
   ------------------------------------------------------------
   一本並びのプルダウンをやめ、「タイルを読む」と同じ棚にしました。
   ★ 棚は高さを決めて中だけを送ります。決めないと、シートの中で
     どこまでも伸び、下のボタン（送信・キャンセル）が画面の外へ
     出てしまいます（第13便の学び）。
   ★★ 触れる欄に font-size は書きません。16px 未満の欄は iOS が
     勝手に寄せて、戻さないからです（第114便 / 台帳 7-168）。
   ============================================================ */
.pickWrap { width: 100%; }
.pickBox {
  width: 100%; max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, #ccc); border-radius: 8px;
  padding: 6px 4px; box-sizing: border-box; background: #fff;
}
.pickBox .fgroup { width: 96%; margin: 4px auto 8px; }
.pickBox .cardList { width: 100%; }
.pickBox .pkBody { width: 100%; }

/* いま選んでいるもの。棚の奥へ入っても、ここだけは読めます */
.idBox.is-set { font-weight: 700; }

/* ============================================================
   ★★★ 第118便: 自分の辺が閉じているときの救済（申請の画面）
   ------------------------------------------------------------
   ★ 行き止まりの箱ではなく、**次の一手が置いてある箱**です。
     色は「まちがい」の赤ではなく、注意の枠だけにします —— この方は
     何もまちがえていません（憲法19条）。
   ============================================================ */
.shutBox {
  border: 1px solid var(--line, #ccc); border-radius: 8px;
  padding: 8px 10px; box-sizing: border-box; background: #fffdf5;
}
.shutBox .flabel { display: block; margin: 0 0 4px; }
.shutBox .lrow { margin-top: 6px; }

/* ============================================================
   ★★★ 第131便: あなたのアイコン画像（カジさんご決定「案3」）
   ------------------------------------------------------------
   ★ ここは **カジさんの管轄**です。納品書にも全部書いてあります。

   ・#padFace  … コントロールパッドの中心（緑の玉）に重ねる顔。
     ★ 玉そのものは消しません。**上に重ねる**ので、絵が無い方や
       読めなかったときは、これまでどおり玉が見えます（憲法13条）。
     ★★ カジさんのご要望「可能であれば、中心の絵の周辺を少し暗くして
       立体的に」は、`box-shadow` の内側の影（inset）で作っています。
       絵そのものは触らず、**上から丸く影を落とす**だけですので、
       どんな絵でも同じように丸く収まります。
   ・.uiconItem … 「これまでに上げた画像」の1枚
   ============================================================ */
#padFace {
  position: absolute; inset: 0;
  border-radius: 50%;
  background-size: cover; background-position: center;
  /* ★ まわりを少し暗くして、立体的に見せます（カジさんご要望） */
  box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .34),
              inset 0 3px 6px rgba(255, 255, 255, .30);
  pointer-events: none;
}

#uiconList {
  width: 90%; margin: 6px auto; max-height: 44vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.uiconItem {
  border: 1px solid var(--line, #e0e0e0); border-radius: 10px;
  padding: 8px 10px; background: #fff; text-align: left;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
/* いま選んでいる1枚は、ひと目で分かるように */
.uiconItem.is-picked { background: #eef5ff; border-color: #bcd4f6; }
.uiconShot {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: #f2f2f2; box-shadow: var(--shadow);
}
.uiconRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uiconNow { font-size: 12px; font-weight: 700; }
.uiconAsk { flex: 1 1 100%; }
.uiconAsk .fnote { margin: 0 0 6px; }

/* ============================================================
   ★★★★ 第145便 — 色えらび (st_color.js)
   ------------------------------------------------------------
   カジさんご要望の「色選択ツール」です。★ この注釈をふくめて、
   ここから下の **67 行**（3225〜3291 行目）が、この便で足したぶんです。
   ★ 納品書 doc/readme/README_bin145.md にも、同じ数を書いてあります。
   ★ 色は既存の変数 (--ink / --c-sel / --shadow / --z-float) を使い、
     新しい色は1つも足していません。
   ============================================================ */
#colBox {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.32);
  z-index: calc(var(--z-float) + 10);
  touch-action: none;
}
#colBox[hidden] { display: none; }
#colBox > * { flex: 0 0 auto; }
/* ★★★ 第148便: 3×3（8色＋＋）→ **4×4（15色＋＋）**（カジさんご指示）。
   ★★ iPhone SE の幅でも収まるよう、すきまを 10px → 8px にしました。 */
.colGrid {
  display: grid; grid-template-columns: repeat(4, auto); gap: 8px;
  padding: 12px; background: #ffffff;
  border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow);
}
/* ★★★ 4×4 になったぶん、丸を少し小さくします。
   ★★★★ カジさんの見通しどおり、iPhone SE（幅 320px）でも収まります ——
     40*4 + 8*3 + 12*2 + 4 = 212px。★ 余裕があります。 */
.colGrid .swatch, .colFav .swatch { width: 40px; height: 40px; }
/* ★★ よくつかう色は 3つ → **4つ**（カジさんご指示） */
.colFav {
  display: flex; gap: 8px;
  padding: 10px 12px; background: #ffffff;
  border: 2px dashed var(--ink); border-radius: 16px;
}
.swatch.isEmpty { background: repeating-linear-gradient(45deg,
  #f2f2f2 0 6px, #e2e2e2 6px 12px); }
.colPick {
  width: min(300px, 82vw);
  padding: 12px; background: #ffffff;
  border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow);
}
.colSV {
  position: relative; height: 120px; border-radius: 10px; margin-bottom: 10px;
  background: linear-gradient(to top, #000, rgba(0,0,0,0)),
              linear-gradient(to right, #fff, var(--hue, #f00));
}
.colHue {
  position: relative; height: 22px; border-radius: 11px; margin-bottom: 10px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.colKnob {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #0006;
  pointer-events: none;
}
.colHue .colKnob { top: 50%; }
.colNums { display: flex; gap: 6px; align-items: flex-end; }
.colNum { display: flex; flex-direction: column; font-size: 11px; flex: 1 1 0; }
.colNum input { width: 100%; box-sizing: border-box; }
.colFoot {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; background: #ffffff;
  border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow);
}
.colNow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: var(--shadow);
}
/* ★ 第145便: 道具箱の「いまの色」の丸（2行） */
.toolBtn > .swatch.tbNow { width: 26px; height: 26px; border-width: 2px; }

/* ============================================================
   ★★★★ 第146便 — テキストマーカーの道具箱 (#mkBox)
   ------------------------------------------------------------
   ★ この注釈をふくめて、ここから下の **29 行**（3292〜3320 行目）が、この便で足したぶんです。
   ★ 納品書 doc/readme/README_bin146.md にも、同じ数を書いてあります。

   ★★★★ 余白は詰めていません —— カジさんのご指示です。
     > ツールボックスの余白はあまり詰めないでください。ツールボックスを
     > ドラッグして移動するときに触れるエリアとして確保してあります。
     ★★ ですので `padding` と `gap` は **#paintBox と同じ**です。
       小さくしたのはボタンだけ（`--tool-sz` を 80%）です。

   ★★★ 新しい色は1つも足していません（--ink / --c-sel / --lod0…）。
   ============================================================ */
/* ============================================================
   ★★★★ 第148便 — 道具箱は **横長 2段**、ボタンは **絵**（カジさんご指示）
   ------------------------------------------------------------
   > スマホ画面は縦長なのでツールボックスを縦長ではなく横長にしましょう。
   > （PCのペイントツールのイメージで縦長に囚われていました。）
   > 横長（横5ボタン、2段）にすれば、スマホ画面の横いっぱい編集操作が
   > できます。…PCとスマホのどちらも統一して横長で問題ありません。

   ★★★ 段を **2つに決めて**、列はボタンの数で伸ばします。
   ```
      テキストマーカー 10個 → 2段 × 5列
      絵を描く          6個 → 2段 × 3列
   ```
   ★★ 絵に枠が描いてありますので、ボタン側の枠・地色・影は消します。
   ★★★★ 余白（padding / gap）は **詰めていません** —— つかんで動かす
     ところですので、カジさんのご指示のとおりです。
   ============================================================ */
.ToolBox.tbGrid {
  display: grid;
  gap: 8px;
  justify-content: start;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
}
/* ★★★ 並ぶ順は **横**です（カジさんの「横5ボタン、2段」のとおり）。
   ```
      LOD＋  LOD−  LOD０  太字  下線
      飾りなし ◉    🎨    もどす おわる
   ```
   ★★ 意味のまとまりが、そのまま段になります。 */
#mkBox    { grid-template-columns: repeat(5, var(--tool-sz)); }
#paintBox { grid-template-columns: repeat(3, var(--tool-sz)); }
#mkBox, #paintBox {
  --tool-sz: 45px;                     /* ★★ 56px の 80%（カジさんご指示） */
  top: auto; bottom: 96px; left: 10px; right: auto;
}
/* ★★ 利き手の反対がわ、というこれまでの決まりは横長では意味を持ちません
   （箱が横に広いので、どちらへ寄せても同じだけ隠れます）。
   ★ ですので左に寄せ、あとはつかんで動かしていただきます。 */
body.hand-left  #mkBox, body.hand-left  #paintBox { left: 10px; right: auto; }
body.hand-right #mkBox, body.hand-right #paintBox { left: 10px; right: auto; }

/* ★★★ 絵のボタン。枠は絵の中に描いてあります */
.toolBtn.tbIcon {
  width: var(--tool-sz); height: var(--tool-sz);
  padding: 0; gap: 0;
  background: none; border: 0; box-shadow: none; border-radius: 12px;
  position: relative;
}
.toolBtn.tbIcon > img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  pointer-events: none; user-select: none;
}
/* ★★ えらばれているボタン。絵は塗りつぶさず、まわりに輪を出します */
.toolBtn.tbIcon.is-on {
  background: var(--c-sel-tint);
  box-shadow: 0 0 0 3px var(--c-sel);
}
/* ★★★ 「いまの色」の丸は、枠だけの絵の **まん中**にのせます */
.toolBtn.tbIcon > .swatch.tbNow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56%; height: 56%; border-width: 2px;
}
/* ★ まだ絵をいただいていないボタン（飾りなし）は、印を描きます */
.toolBtn.tbMark {
  background: #ffffff;
  border: 2px solid var(--fld-bd);
  box-shadow: var(--shadow);
}
/* ★★★ 「飾りなし」の印。★★ 「おわる」の ✕ と紛れないよう、
   **Ａ に取り消し線**にしました（飾りを消す、が目で分かります）。 */
.tbMk { font-size: 20px; line-height: 1; font-weight: 700; color: var(--ink);
  text-decoration: line-through; text-decoration-thickness: 2px; }

/* ★★★★ 道具箱を出している間は、横メニューを引っこめます
   ------------------------------------------------------------
   > ツールボックスを表示中は、画面横のsideMenuを非表示にできますか？
   > 作業できる領域が広くなり、特にスマホでは操作性が増します。（カジさん）
   ★★ 隠すだけです。★ 道具箱を閉じれば、そのまま戻ります。 */
body.mk-on .sideMenu,
body.paint-on .sideMenu { display: none; }
/* ★★ なぞっている間、字の上で指が「選ぶ」動きに取られないように */
body.mk-on .ttTarget { user-select: none; -webkit-user-select: none;
  touch-action: none; -webkit-touch-callout: none; }

/* ============================================================
   ★★★★ 第147便 — マーカーで「いま塗ろうとしている所」
   ------------------------------------------------------------
   ★★★ 指を離すまでは、まだ かけません。★ 途中経過の印です。
   ★★ 包み span は flex の子ですので、`min-width: 0` を入れないと
     **縮まずに1行**になります（スマホで起きていました）。
   ============================================================ */
.ttTarget > .ttWrap { min-width: 0; max-width: 100%; }
.mkPart.is-mkhit { background: rgba(255, 179, 218, 0.6); border-radius: 3px; }
.mkGone { opacity: 0.55; font-style: italic; }

/* ============================================================
   ★★★★ 第147便 — 内側の余白を、2行にたたみます
   ------------------------------------------------------------
   > 小見出し[ 上 / 下 / 左 / 右 ][ 数値入力欄 ]2つずつを2行に
   > レイアウトすれば、この領域がコンパクトになります。（カジさん）
   ★★ スマホでスクロールが減ることは、そのままストレスの差になります。
   ============================================================ */
.padGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.szRow.szBare { display: flex; align-items: center; gap: 6px; }
.szRow.szBare .txtNum { flex: 1 1 0; min-width: 0; }

/* ============================================================
   ★★★★ 第148便 — 折り返し・太字
   ------------------------------------------------------------
   ★★★★ スマホで1行になっていた件（カジさんご報告）
     > スマホでテキストマーカーを表示すると、まだ一行の表示になって
     > しまいました。文章がタイルから右にはみ出して編集ができません。
     > （PCの開発ツールのスマホ模擬では、PCと同じように動作しました。）

     ★★★ 模擬では出ないので、**実機の折り返しの判断**の差です。
       `.el-text` は flex ですので、包みは `min-width: 0` で縮みますが、
       ★★★★ 縮んだあと **どこで折るか**は、また別の話でした。
       → `overflow-wrap: anywhere` で「入らなければ、どこでも折る」に
         します。★★ 日本語はもともと どこでも折れますので、
         ふだんの画面と見えかたは変わりません。
   ============================================================ */
.ttTarget > .ttWrap {
  min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
}
/* ★★★ 太字。書体に太さの段が無くても、にじませて必ず太らせます */
.mkBold { text-shadow: 0 0 0.6px currentColor, 0 0 0.6px currentColor; }

/* ============================================================
   ★★★★ 第169便 (カジさんご指示): 権限は、1文字ずつえらびます
   ------------------------------------------------------------
   ★★ 4つを **横に並べます**。縦に積むと、r / w / x / a が
     どの字のことか読めなくなります。
   ★ 幅は狭くてかまいません（中身は1文字ですので）。
   ============================================================ */
.permChars {
  display: flex;
  gap: 4px;
  align-items: center;
}
.permChars .permCh {
  /* ★★ スマホで拡大しないように 16px は保ちます（第163便） */
  font-size: var(--fld-fs);
  padding: 4px 2px;
  min-width: 44px;
  text-align: center;
  border: 1px solid var(--line, #cccccc);
  border-radius: 4px;
  background: #ffffff;
}

/* ============================================================
   ★★★★ 第171便: 画面のものさし（エキスパートのときだけ）
   ------------------------------------------------------------
   ★★ info の箱の中に、そのまま並べます。★★★ 等幅にしておくと、
     欄を触る前と後で **どの桁が動いたか**が、目で追えます。
   ============================================================ */
#dbgVp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  opacity: 0.9;
  margin-top: 4px;
}

/* ============================================================
   ★★★★ 第181便 (カジさんご指示): SYNC の入／切の画面
   ------------------------------------------------------------
   > 太字の大きめの文字で説明文
   ★★ 1つのことだけをする画面ですので、そこだけを大きくします。
   ============================================================ */
.syncWhat {
  margin: 10px auto 6px;
  width: 90%;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  word-break: break-word;
}

/* ============================================================
   ★★★★ 第184便: SYNC のお知らせ（読む場所）
   ★★★ 見た目は、募集の一覧（.msgItem）にそろえます。
   ============================================================ */
.syNews { margin: 0 0 14px; }
.syNewsTtl {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}
.syList { display: flex; flex-direction: column; gap: 6px; }
.syRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 8px;
}
.syWhen { font-size: 11px; opacity: .7; white-space: nowrap; }
.syBody { flex: 1 1 auto; font-size: 13px; line-height: 1.5; }
/* ★★ リンクは、**リンクに見えなければ**押してもらえません */
.syLink { text-decoration: underline; font-weight: 700; }
.syPager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 4px;
}
.syPage { font-size: 12px; opacity: .8; }

/* ============================================================
   ★★★★ 第185便: される側の数字と、SYNC している方の一覧
   ============================================================ */
.syWeeks { display: flex; flex-direction: column; gap: 2px; }
.syWkRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 2px 0;
}
.syWkRow.is-head { font-weight: 700; opacity: .8; font-size: 11px; }
.syWkWhen { flex: 1 1 auto; }
.syWkN { flex: 0 0 68px; text-align: right; font-variant-numeric: tabular-nums; }
.syWho { display: flex; flex-direction: column; gap: 2px; }
.syWhoRow { font-size: 13px; padding: 2px 0; }

/* ★★★ 第186便: 参加キーは、写して人に渡すもの（太字・倍・枠） */
.gsKeyBig {
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 14px;
  border: 2px solid var(--line, #888);
  border-radius: 8px;
  margin: 4px 8px 4px 0;
  font-variant-numeric: tabular-nums;
  user-select: all;      /* ★ ひと押しで全部選べます（写しやすく） */
}

/* ============================================================
   ★★★ 第193便 (カジさんご指示 #4): 用語集と 📒
   ------------------------------------------------------------
   ・`.glossMark` … 用語のうしろに付く小さな 📒（ボタンです）
   ・`#glossModal` … 説明用のモーダルダイアログ（×・うしろ・Esc で閉じる）
   ★ 重なりはトーストの上（--z-toast: 600 の上の 700）——
     どの画面・どのシートの上からでも読めます
   ============================================================ */
.glossMark {
  display: inline-block;
  border: 0;
  background: none;
  padding: 0 2px;
  margin: 0 1px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
  opacity: .85;
}
.glossMark:hover, .glossMark:focus { opacity: 1; }
.glossDesc { margin: 2px 0 6px; }

#glossModal {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
#glossModal[hidden] { display: none; }
.glossBox {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: 76vh;
  overflow: auto;
  /* ★★★ 第197便 (カジさんご指示 #3): トップパネルの色と分けます。
     説明のモーダルは **半透過の白に、黒い字** — 説明として目立たせます */
  background: rgba(255, 255, 255, .92);
  color: #000;
  border: 1px solid var(--line, #ccc);
  border-radius: 12px;
  box-shadow: var(--shadow, 0 8px 30px rgba(0, 0, 0, .25));
  padding: 16px 40px 16px 16px;
  box-sizing: border-box;
}
.glossTtl { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.glossTxt { font-size: 13.5px; line-height: 1.7; white-space: pre-line; }
/* ★ 閉じるのは **小さめの** × ボタン（カジさんご指示） */
.glossX {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line, #ccc);
  border-radius: 50%;
  background: none;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.glossX:hover, .glossX:focus { opacity: 1; }

/* ============================================================
   ★★★ 第200便 (カジさんご指示 #1): 右から左に読むことば（アラビア語）
   ------------------------------------------------------------
   ★★★★ **画面の配置は、変えません。** タイルは東西南北で
     つながっており、パッドもズームレンズも「右が右」であることを
     前提に組まれています。`dir="rtl"` を全体にかけると、そこが
     いっぺんに裏返ってしまいます（憲法13条・壊さない）。
   ★★★ 変えるのは **字の並びだけ**です。`unicode-bidi: plaintext`
     は「その文の中身を見て、右からか左からかを決める」という指定で、
     箱の位置はそのままに、アラビア語の文だけが正しく並びます。
   ★★ 混ざった文（「SYNC する」のように英字が入るもの）も、
     これで素直に出ます。
   ★ 次の段階で、画面ごと右から左にするかどうかを、ご相談させてください。
   ============================================================ */
/* ============================================================
   ★★★★ 第208便 (カジさんご報告): **画面ごと、右から左に。**
   ------------------------------------------------------------
   > 現在の用語説明のモーダルウインドウでは英語と同様に左から右に
   > 書かれています。これは正しいでしょうか？

   ★★★★ 正しくありませんでした。上の `unicode-bidi: plaintext` には、
     2つ届いていない所がありました。

       ① `unicode-bidi` は **受け継がれません**。`.glossBox` に当てても、
          中の `.glossTxt` / `.glossTtl` には効きません。
       ② かりに効いても `direction` は左のままですので、
          **行の揃えは左寄せ**のままです。

   ★★★★ ですので `st_lang.js` が `<html dir="rtl">` を立て、
     **反転してはいけない所だけ、ここが名指しで戻します。**
     ★★★ 戻す所は、こういう性質のものです。

         ・**地図**       … タイルの絵と、その中の辺（東は右、西は左）
         ・**道具**       … コントロールパッド、ズームレンズ（右へ動かすと拡大）
         ・**帯**         … 利き手で左右を決めている所（ヘッダ・足もと）
         ・**機械の字**   … ファイル名・ID・URL・JSON（記号の並びが崩れます）

     ★★ ここに無いものは、ぜんぶ右から左になります —— 見落としは
       「左寄せのまま」ではなく「右寄せ」に倒れます。それがアラビア語では
       正しい姿ですので、**倒れる先が安全なほう**を選んでいます。
   ★ `unicode-bidi: plaintext` は残します。混ざった文（「SYNC する」の
     ように英字が入るもの）で、そのかたまりだけ左から右に読ませるためです。
   ============================================================ */
html[dir="rtl"] .ptitle,
html[dir="rtl"] .subText,
html[dir="rtl"] .fnote,
html[dir="rtl"] .flabel,
html[dir="rtl"] .emptyNote,
html[dir="rtl"] .wlead,
html[dir="rtl"] .wsub,
html[dir="rtl"] .glossBox,
html[dir="rtl"] .glossTtl,
html[dir="rtl"] .glossTxt,
html[dir="rtl"] button,
html[dir="rtl"] summary,
html[dir="rtl"] label,
html[dir="rtl"] option {
  unicode-bidi: plaintext;
}

/* ---- ① 地図 —— タイルの絵と辺は、ことばで左右が入れ替わりません ---- */
html[dir="rtl"] #fsPreview,
html[dir="rtl"] #stage,
html[dir="rtl"] #world,
html[dir="rtl"] .edgeSlot,
html[dir="rtl"] .edgeName,
/* ---- ② 道具 —— パッドとズームレンズ ---- */
html[dir="rtl"] .footer,
html[dir="rtl"] .zoomLens,
html[dir="rtl"] .controlPad,
html[dir="rtl"] .padWrap,
html[dir="rtl"] input[type="range"],
/* ---- ③ 帯 —— 利き手で左右を決めている所 ---- */
html[dir="rtl"] .app-header,
html[dir="rtl"] .second-header,
html[dir="rtl"] .sideMenu {
  direction: ltr;
}

/* ---- ④ 機械の字 —— ファイル名・ID・URL・JSON ----
   ★★★ これらは「読む字」ではなく「そのまま写す字」です。
     右から左にすると、`t_45a61f_0022.json` の記号の並びが崩れて
     **写せなくなります**（打ち直しの元になります）。
   ★ `.ltrText` は、これから書く所で名指しできるようにした札です。 */
html[dir="rtl"] .idBox,
html[dir="rtl"] .ltrText,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] textarea[data-t="json"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] #buildLine,
html[dir="rtl"] #syncWho {
  direction: ltr;
  text-align: left;
}

/* ============================================================
   ★★ 第201便 (カジさんご指示 #2): ウェブのリンクの「引数を設定▼」
   ------------------------------------------------------------
   ★ 「詳しい設定」と同じ扉の見た目ですが、**スタンダードモードでも
     出します** —— リンクを作れる方には、必要な設定だからです。
     （`.buttonDetail` はボトムシートの中でスタンダードだと隠れます。
       この扉だけ、名前を1つ足して戻しています。）
   ============================================================ */
body.mode-standard .btmsheet summary.lkArgSum { display: inline-flex; }
.lkArgRow {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 4px; font-size: 14px;
}
.lkArgRow input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

/* ============================================================
   ★★★ 第202便 (カジさんご指示 #3): 用語の説明の中の「押せる語」と、
   来た道を行き来する「←」「→」
   ------------------------------------------------------------
   ★★ 押せる語は、下線と色だけにします。ボタンの形にすると、
     文が読めなくなります（説明はまず「文」です）。
   ============================================================ */
.glossLink {
  appearance: none; -webkit-appearance: none;
  display: inline;            /* ★ 文の中の1語として並びます */
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; line-height: inherit;
  color: #1b6b4a; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.glossLink:hover, .glossLink:focus { color: #0f4a32; }
.glossNav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 14px;
}
.glossStep {
  appearance: none; -webkit-appearance: none;
  min-width: 56px; height: 36px; padding: 0 14px;
  border: 2px solid #000; border-radius: 999px;
  background: #fff; color: #000;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.glossStep:disabled { opacity: .3; cursor: default; }

/* ============================================================
   ★★ 第203便 (カジさんご指示 #5): SYNC の段の「だれが作ったか」
   ------------------------------------------------------------
   ★ 顔は、その行の字と同じ高さにします（行が跳ねないように）。
   ============================================================ */
#syncWho { display: block; margin: 0 0 6px; }
#syncWho .whoFace {
  display: inline-block; vertical-align: -3px;
  width: 1.35em; height: 1.35em; margin-left: 6px;
  border-radius: 50%; object-fit: cover;
  background: #eee;
}

/* ============================================================
   ★★★ 第204便 (カジさんご指示 #6): 年齢制限は、絵で選びます
   ------------------------------------------------------------
   ★★ 大きさは、タイルの背景色の丸（.swatch）とまったく同じです。
   ★★★ 選んでいないものは **うすく**なります —— 消しません。
     「いま何が選ばれているか」と「ほかに何があるか」が、
     一目で分かる形です。
   ============================================================ */
/* ★ 大きさは `.optRow .swatch`（背景色の丸と同じ規則）に任せます ——
   ここで数を書くと、あちらを直したときに **ここだけ古く**なります。 */
.rateSwatch {
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  border-color: transparent;
  opacity: .35; filter: grayscale(1);
  transition: opacity .15s ease, filter .15s ease;
}
.rateSwatch.is-on {
  opacity: 1; filter: none;
  border-color: var(--c-sel);
}
.rateSwatch[data-rating="G"]    { background-image: url('ui_images/rb_g.png'); }
.rateSwatch[data-rating="PG12"] { background-image: url('ui_images/rb_pg12.png'); }
.rateSwatch[data-rating="R15"]  { background-image: url('ui_images/rb_r15.png'); }
.rateSwatch[data-rating="R18"]  { background-image: url('ui_images/rb_r18.png'); }

/* ============================================================
   ★★★ 第204便 (カジさんご指示 #7): 読み上げの順番の並べ替え
   ------------------------------------------------------------
   ★★ つまんで動かせますが、▲▼ でも動かせます —— 指でつまむのが
     むずかしい端末でも、順番を決められるようにするためです。
   ============================================================ */
.roList { width: 90%; margin: 6px auto 2px; }
.roRow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 0 0 6px;
  background: #fff; border: 2px solid var(--line, #d7e2dc);
  border-radius: 12px; cursor: grab;
}
.roRow.is-drag { opacity: .5; }
.roNum {
  flex: 0 0 auto; min-width: 1.6em; text-align: right;
  font-weight: 700; color: #5c6b65;
}
.roMid { flex: 1 1 auto; min-width: 0; }
.roKind { display: block; font-size: 12px; color: #5c6b65; }
.roText {
  display: block; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roStep {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
  border: 2px solid #000; border-radius: 999px;
  background: #fff; font-size: 14px; cursor: pointer;
}
.roStep:disabled { opacity: .3; cursor: default; }

/* ============================================================
   ★★★★ 第206便 (カジさんご報告 #9): 空のストリップの窓
   ------------------------------------------------------------
   ★★★ 入れものは用語のモーダル（`.glossBox`）を **借ります** ——
     同じ形の窓を2つ作ると、直る日が別々に来ます（台帳 7-87）。
   ★ ここに足すのは、下の3つ（または1つ）のボタンの並びだけです。
   ============================================================ */
#stripFixModal {
  position: fixed;
  inset: 0;
  z-index: 720;   /* ★ 用語のモーダル (700) より上 — 上から出す窓ですので */
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
#stripFixModal[hidden] { display: none; }
#stripFixModal [data-sf="say"] { margin: 8px 0 0; min-height: 1.2em; }
.sfRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.sfRow button { flex: 0 1 auto; }

/* ============================================================
   ★★★★ 第209便 (カジさんご指示): Deep SYNC の説明は、枠の中に
   ------------------------------------------------------------
   ★★★ ここは「読まずに押すと、あとで戻れない」ところです。
     ですので、ふつうの注（`.fnote`）ではなく、**枠で囲って**
     目立たせます（カジさんの画 step02 / step03）。
   ★ 中の 📒 は、これまでどおり押せます。
   ============================================================ */
.dpFrame {
  border: 1px solid var(--line, #9db8ab);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 10px;
  background: rgba(255, 255, 255, .06);
}
.dpFrameP {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--warn, #d23);
}
.dpFrameP:last-child { margin-bottom: 0; }
/* ★ 更新情報は「40字が見やすい大きさ」に（カジさんご指示） */
.dpNoteBox {
  min-height: 3.4em;
  resize: vertical;
  line-height: 1.6;
}

/* ============================================================
   change'231' タイルアドレス表示欄
   ------------------------------------------------------------
   いま読んでいる1枚が、streap.org のものか／外のサーバーのものかを、
   いつでも見せます。ログインの有無も、スタンダード／エキスパートも
   問わず、**常に出します**。

   ★★ 置き場は `.second-header` の中（z 300）です。
     タイル面（#fsPreview・z 0）より前、トップパネル（z 500）より奥 ——
     カジさんのご指示のとおりです。
   ★★★ `.second-header > *` の `pointer-events: auto` を打ち消すため、
     この段は **この下に**置いてあります（同じ強さなら、あとが勝ちます）。
   ★ 帯そのものは指を通し、押す所（3つ）だけが受け取ります。
   ============================================================ */
.tileAddr {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px; box-sizing: border-box;
  pointer-events: none;
}
.tileAddr > * { pointer-events: auto; }
/* ★ 閉じているときは、2つの印が右に寄ります */
.tileAddr.is-closed { justify-content: flex-end; }

.tileAddBtn {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin: 0;
  border: 0; cursor: pointer; background: transparent no-repeat center center;
  background-size: contain;
}
#tileAddToggle { background-image: url('ui_images/tileAddClose.png'); }
.tileAddr.is-closed #tileAddToggle { background-image: url('ui_images/tileAddOpen.png'); }
.tileAddCopy { background-image: url('ui_images/tileUrlCopy.png'); }

.tileAddrBox {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  height: 22px; padding: 2px 8px; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.5); border-radius: 11px;
}
.tileAddr.is-closed .tileAddrBox { display: none; }

/* ★★★ 冒頭の丸が、3つの区分そのものです（カジさんご指示） */
.tileAddrDot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #9e9e9e;
}
.tileAddrDot.is-streap { background: #22c55e; }   /* 明るいグリーン */
.tileAddrDot.is-reg    { background: #1d6fe0; }   /* ブルー */
.tileAddrDot.is-unreg  { background: #d9a300; }   /* 濃いイエロー */

/* ★ 長い住所は、折り返さずに末尾を「…」にします。
   ★★ 大事なのは **どのサーバーから来たか**ですので、頭を残します */
.tileAddrText {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; line-height: 1.4; color: #222;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tileAddrText.is-warn { color: #c00000; }         /* http / 転送されて来た */

/* ★★ 表示欄のぶん、この段の左右の印を下へずらします
   （ratingBadge 40px の 2/3 ＝ 26px。カジさんの目安どおり） */
.second-header .barLeft,
.second-header .barRight { margin-top: 26px; }

/* ============================================================
   change'231' 外のタイルの「それでも読みますか？」の窓
   ★ 共通の断りの箱は［OK］［もどる］で、ことばが決まっています。
     ここは［はい］［いいえ］が要りますので、この形だけ別に持ちます。
   ============================================================ */
.extAskBack {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.extAskBox {
  width: 100%; max-width: 420px; box-sizing: border-box;
  background: #fff; border-radius: 12px; padding: 18px 16px 14px;
  box-shadow: var(--shadow);
}
.extAskText {
  font-size: 14px; line-height: 1.6; color: #222;
  white-space: pre-wrap; word-break: break-all;
}
.extAskRow {
  display: flex; gap: 10px; justify-content: center; margin-top: 14px;
}