/* ============================================================
   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
   ============================================================ */
:root {
  /* --- sizes --- */
  --hdr-h: 70px;        /* app-header */
  --hdr2-h: 50px;       /* second-header (Viewer) */
  --savebar-h: 60px;    /* saveBar (Editor)\u3002第8便: 1行に詰めた (保存ボタン 40px + 上下 10px) */
  --ftr-h: 190px;       /* footer */
  --side-w: 60px;       /* sideMenu */
  --pad-box: 190px;     /* controlPad box */
  --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% */
  --drop-bg: #cccccc;
  --shadow: 0 2px 8px rgba(0,51,102,0.25);
  --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;

  /* --- 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;
  box-sizing: border-box; padding: 10px;
  overflow: hidden; pointer-events: auto;
}

/* 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;
  pointer-events: auto;
}
/* エディター時は top を saveBar の高さに合わせて切り替え */
body.page-editor .sideMenu {
  top: calc(var(--hdr-h) + var(--savebar-h));
}

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; }

/* エディター用 4エッジボタン */
#arrN { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background-image: url('ui_images/ic_arrN.png'); }
#arrS { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-image: url('ui_images/ic_arrS.png'); }
#arrW { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-image: url('ui_images/ic_arrW.png'); }
#arrE { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-image: url('ui_images/ic_arrE.png'); }

.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: calc(50px + 5px); 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;
}

.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);
  background: radial-gradient(circle at 50% 42%, #ffffff, #dce9f7);
}
#padCircle { position: absolute; inset: 0; border-radius: 50%; touch-action: none; }
#padKnob {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 34%; height: 34%;
  border-radius: 50%; background: var(--ink); box-shadow: var(--shadow);
  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;
}
.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-panel);
  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; }
.cell .body { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
.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;
}

.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;
}
.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); }
.el-textblock {
  overflow: hidden; font-size: 12px; 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);
}
.el svg { width: 100%; height: 100%; display: block; }

@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; }

/* ---- 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-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; }

.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); }

/* 「どれかを選ぶ」ページの選択肢グリッド */
.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); }

/* ---- 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; }

/* ---- 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); }

.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); }

.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-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; }
/* 第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; }
/* 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); }
.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 {
  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-panel);
  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; }
.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); }
.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 .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; }