/* =====================================================================
 * mobile.css ― スマホ版
 * 画面いっぱいのプレビュー＋下から出るシート、という構成。
 * app.css の変数と .pv-* （プレビュー）はそのまま使い回す。
 * ===================================================================== */
/* 並べ方：上にヘッダー、まん中に「左に絵・右に設定」、下にタブ。
   スマホの幅でも左右に並べる（上下に分けると、絵が小さくなりすぎて変化が見えない）。
   設定をしまうと（body.dock-off）、絵が幅いっぱいになる。 */
body.mb{
  overflow:hidden;height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
body.mb.dock-off{grid-template-columns:minmax(0,1fr)}
.mb-head,.mb-step,.mb-tabs{grid-column:1 / -1}
.mb-stage{grid-column:1;grid-row:3}
.mb-dock{grid-column:2;grid-row:3}
body.mb *{ -webkit-user-select:none; user-select:none }
body.mb input,body.mb textarea{ -webkit-user-select:text; user-select:text }

/* ---------- ヘッダー ---------- */
.mb-head{display:flex;align-items:center;gap:8px;padding:8px 10px;flex:0 0 auto;
  background:var(--bg2);border-bottom:1px solid var(--line)}
.mb-icon{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);background:var(--bg3);
  border-radius:10px;font-size:17px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.mb-icon:disabled{opacity:.35}
.mb-hist{display:flex;gap:4px;flex:0 0 auto}
.mb-hist .mb-icon{width:38px}
.mb-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mb-icon:active{background:var(--hover)}
.mb-title{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:10px;font-size:15px}
.mb-title:focus{outline:none;border-color:var(--brand-fg)}
.mb-go{flex:0 0 auto;min-height:40px;padding:0 14px;border:0;border-radius:10px;
  background:var(--brand);color:var(--onbrand);font-weight:700;font-size:14px;cursor:pointer}
.mb-go:active{background:var(--brand-hover)}

/* ---------- 作り方ガイドの帯（見た目は app.css の .gd-bar） ---------- */
.mb-step{min-height:0}

/* ---------- プレビュー ---------- */
.mb-stage{flex:1;min-height:0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--bg0)}
.mb-fit{transform-origin:center center}
.mb-hintbar{position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:11px;color:var(--fg3);pointer-events:none}

/* ---------- 画面切り替えタブ ---------- */
/* --host-badge は、置き場所が右下に重ねてくる帯の高さ（mobile.js が測る）。
   そのぶんだけタブを上に逃がさないと、右側のタブが押せなくなる。 */
.mb-tabs{flex:0 0 auto;display:flex;background:var(--bg2);border-top:1px solid var(--line);
  padding-bottom:calc(env(safe-area-inset-bottom) + var(--host-badge, 0px))}
.mb-tabs button{flex:1;background:none;border:0;padding:11px 2px 12px;color:var(--fg3);
  font-size:11px;cursor:pointer;border-top:2px solid transparent;min-height:52px}
.mb-tabs button.on{color:var(--fg);font-weight:700;border-top-color:var(--brand-fg)}

/* ---------- ボトムシート ---------- */
.mb-sheet-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;
  transition:.2s;z-index:60}
.mb-sheet-mask.on{opacity:1;pointer-events:auto}
.mb-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--bg2);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;
  max-height:86dvh;display:flex;flex-direction:column;
  transform:translateY(102%);transition:transform .24s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom)}
.mb-sheet.on{transform:translateY(0)}
.mb-sheet-grip{padding:9px 0 3px;display:flex;justify-content:center;flex:0 0 auto;touch-action:none}
.mb-sheet-grip::before{content:"";width:42px;height:4px;border-radius:3px;background:var(--grip)}
.mb-sheet-head{display:flex;align-items:center;gap:10px;padding:4px 14px 10px;flex:0 0 auto}
.mb-sheet-head b{font-size:14px}
.mb-sheet-head .mb-icon{margin-left:auto;width:34px;height:34px;font-size:15px}
.mb-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px 18px;flex:1;min-height:0}

/* ---------- シート内の部品（指で押せる大きさに） ---------- */
.mb .fld{margin-bottom:14px}
.mb .fld>label{font-size:12.5px;margin-bottom:7px}
.mb .txt{padding:11px;font-size:15px;border-radius:10px}
.mb .seg button{padding:11px 6px;font-size:13px;min-height:44px}
.mb .btn{padding:11px 14px;font-size:14px;min-height:44px;border-radius:10px}
.mb .btn.sm{padding:9px 12px;font-size:13px;min-height:40px}
.mb .sw input{width:44px;height:26px}
.mb .sw input::after{width:20px;height:20px}
.mb .sw input:checked::after{transform:translateX(18px)}
.mb .color input[type=color]{width:44px;height:40px}
.mb .sw-btn{width:44px;height:40px}
.mb .color input[type=text]{padding:9px;font-size:13px;width:92px}
.mb .rng input[type=range]{height:34px}
.mb .presets{grid-template-columns:repeat(3,1fr);gap:10px}
.mb .preset .sw2{height:44px}
.mb .preset span{padding:7px 4px;font-size:11px}
.mb .ptab{padding:9px 12px;font-size:12.5px;min-height:38px}
/* 指で触る画面ではホバーが無いので、押せる場所は常に枠で示す */
.mb .pv-show-hits .pv-hit::after{border-color:rgba(6,199,85,.5);border-style:dashed}
.mb .pv-hit::before{display:none}
/* 色を選んでいるあいだは、設定シートを引っ込めてプレビューを見せる */
.mb.cp-open .mb-sheet{transform:translateY(100%)}
.mb.cp-open .mb-sheet-mask{opacity:0;pointer-events:none}
.mb .rng .val.num{width:72px;padding:9px 8px;font-size:13px;min-height:40px}
.mb .seam{height:46px}
.mb .fixrow{gap:8px}
.mb .btn.sm{padding:10px 12px;font-size:13px;min-height:42px;flex:1 1 auto}
.mb .shapes{grid-template-columns:repeat(4,1fr);gap:9px;max-height:none}
.mb .shape{padding:11px 4px 7px}
.mb .shape img{width:36px;height:36px}
.mb .slots{grid-template-columns:repeat(3,1fr);gap:10px}
.mb .slot{padding:9px}
.mb .slot .thumb{height:54px}
.mb .files{grid-template-columns:repeat(3,1fr)}
.mb .file .box{height:56px}

/* 素材エディタ（シート版）：プレビューを上に貼り付けて、下で調整 */
.mb-ed-preview{position:sticky;top:0;z-index:2;background:var(--bg2);padding-bottom:10px;
  margin:0 -14px 12px;padding-left:14px;padding-right:14px;border-bottom:1px solid var(--line)}
.mb-ed-preview .zoom-box{margin:0;padding:10px 6px}
.mb-ed-preview .zoom-box .zoom-box{padding:7px!important;margin:0}

/* 規格チェックのまとめ */
.mb-sum{display:flex;gap:8px;margin-bottom:12px}
.mb-sum div{flex:1;background:var(--bg3);border-radius:10px;padding:11px;text-align:center}
.mb-sum b{display:block;font-size:20px}
.mb-sum small{color:var(--fg3);font-size:11px}

/* ---------- プレビューの拡大・移動 ---------- */
.mb-stage{touch-action:none}
.mb-fit{will-change:transform}
/* 右下は、置き場所の帯に取られることがあるので左に置く */
.mb-zoom{position:relative;display:flex;align-items:center;gap:2px;flex:0 0 auto;
  background:var(--bg3);border:1px solid var(--line);border-radius:11px;padding:3px;
  backdrop-filter:blur(6px)}
.mb-zoom button{width:34px;height:34px;border:0;background:none;color:var(--fg2);font-size:16px;
  line-height:1;border-radius:8px;cursor:pointer}
.mb-zoom button:active{background:var(--hover)}
.mb-zoom span{min-width:44px;text-align:center;font-size:11.5px;color:var(--fg3);
  font-variant-numeric:tabular-nums}
.mb-zoom.is-on span{color:var(--brand-fg);font-weight:700}
/* 等倍のときは「＋」だけの小さなボタンにしておく。
   プレビューのメニューアイコンは画面の下にあるので、
   バーを出したままにするとそこを覆ってしまう。 */
.mb-zoom{opacity:.72;transition:opacity .15s}
.mb-zoom.is-on,.mb-zoom:active{opacity:1}
.mb-zoom:not(.is-on) #mbZoomOut,
.mb-zoom:not(.is-on) #mbZoomVal,
.mb-zoom:not(.is-on) #mbZoomFit{display:none}

/* 枠に合わせる（切り抜き）と説明ガイドの見た目は app.css にある。
   ここではスマホ用の大きさだけ足す。 */
.mb-ed-preview .seg{margin-bottom:8px}
.mb .crop-seg button,.mb .crop-reset{min-height:40px;font-size:12.5px}
.mb .helpbtn{min-height:42px}

/* ---------- 絵を見ながら操作するシート（素材） ---------- */
/* 画面のほぼ全体まで高くして、上に絵・下に操作を置く */
.mb-sheet.mb-sheet--tall{height:94dvh;max-height:94dvh}
.mb-sheet--tall .mb-sheet-body{padding-bottom:24px}
.mb-sheet--tall .mb-sheet-head{padding-bottom:6px}

/* 下の中身が、絵と切り替えのすき間から透けて見えないよう、余白も背景で塗る */
.mb-sheet--tall .mb-ed-preview{margin-bottom:0;padding-bottom:10px;border-bottom:0;
  box-shadow:0 8px 12px -10px rgba(0,0,0,.6)}
.mb-ed-preview .crop{gap:6px}
.mb-ed-preview .crop-tools{gap:6px}
/* 「絵を小さく」を押したときは、説明の行も畳んで一覧を広く見せる */
.mb-ed-preview.is-small .crop-hint,
.mb-ed-preview.is-small .ed-legend{display:none}
.crop-size-btn{border:1px solid var(--line);background:var(--bg3);color:var(--fg2);
  border-radius:9px;padding:8px 10px;font-size:12.5px;min-height:40px;cursor:pointer;white-space:nowrap}
.mb-ed-preview .ed-variant{margin-bottom:6px}
.mb-ed-preview .ed-variant button{min-height:36px;padding:7px 6px;font-size:12px}

/* 線の意味（トーク背景） */
.ed-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:11px;color:var(--fg3);margin-top:2px}
.ed-legend span{white-space:nowrap;display:inline-flex;align-items:center}
.ed-legend i{display:inline-block;width:16px;height:0;vertical-align:middle;margin-right:4px}
.ed-legend .lg-g{border-top:2px solid #06C755}
.ed-legend .lg-w{border-top:2px dotted rgba(255,255,255,.8)}
.ed-legend .lg-y{border-top:2px dashed #FFD24A}
.ed-legend .lg-d{height:10px;width:12px;background:var(--veil-chip);border:1px solid var(--line2);border-radius:2px}
.ed-legend .lg-r{border-top:2px dashed #FF7A7A}
.ed-legend .lg-l{height:10px;width:12px;background:rgba(255,90,90,.35);border-radius:2px}
.ed-legend .lg-h{height:10px;width:12px;border-radius:2px;border:1px solid var(--line2);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 1px,rgba(10,12,15,.7) 1px 4px)}

/* 素材／位置・大きさ／見え方 の切り替え（絵のすぐ下に残る） */
.ed-tabs{display:flex;gap:4px;margin:8px 0 0;padding:4px;background:var(--bg3);
  border:1px solid var(--line);border-radius:12px}
.ed-tabs button{flex:1;min-height:40px;border:0;border-radius:9px;background:none;
  color:var(--fg3);font-size:13px;font-weight:600;cursor:pointer}
.ed-tabs button.on{background:var(--brand);color:var(--onbrand)}
.ed-panel{padding-top:2px}

/* 位置・大きさ：項目を選んで、つまみ1本で動かす */
.adj-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.adj-chip{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg3);color:var(--fg2);cursor:pointer;padding:6px 2px}
.adj-chip span{font-size:11.5px;color:var(--fg3)}
.adj-chip b{font-size:14px;font-variant-numeric:tabular-nums}
.adj-chip.on{border-color:var(--brand-fg);background:var(--brand-soft)}
.adj-chip.on span{color:var(--brand-fg)}
.adj-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.adj-row input[type=range]{flex:1;min-width:0;height:40px}
.adj-step{flex:0 0 auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg3);color:var(--fg);font-size:20px;line-height:1;cursor:pointer;touch-action:manipulation}
.adj-step:active{background:var(--hover)}
.adj-row .val.num{width:70px;min-height:44px;padding:9px 6px;font-size:14px;text-align:center;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;font-variant-numeric:tabular-nums}
.adj-row .val.num:focus{outline:none;border-color:var(--brand-fg)}

/* ---------- 絵の右の「この画面の設定」 ----------
   ストアの画面と同じく、絵を見ながらすぐ直せるように、設定だけが上下に動く。
   項目は見出しを押して開く（アコーディオン）。スマホの幅では1つずつ開く。 */
.mb-dock{background:var(--bg2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;min-width:0}
.mb-dock.is-off{display:none}
.mb-dock-bar{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;
  min-height:44px;border-bottom:1px solid var(--line)}
.mb-dock-bar b{font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-dock-hide{margin-left:auto;flex:0 0 auto;min-height:34px;padding:0 9px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg3);color:var(--fg2);font-size:11.5px;cursor:pointer;white-space:nowrap}
.mb-dock-hide:active{background:var(--hover)}
.mb-dock-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 10px 20px;overscroll-behavior:contain;position:relative}
.mb-dock .fld{margin-bottom:12px}
.mb-dock .grpttl:first-child{margin-top:0}

/* しまったときに、絵の下の帯から設定を出し直すボタン */
.mb-dock-show{flex:0 0 auto;display:none;min-height:40px;padding:0 14px;
  border:1px solid var(--brand-line);border-radius:10px;background:var(--brand);color:var(--onbrand);
  font-size:13px;font-weight:700;cursor:pointer}
body.mb.dock-off .mb-stage:not(.is-doc) .mb-dock-show{display:block}

/* アコーディオン */
.acc{border-bottom:1px solid var(--line)}
.acc-head{display:flex;align-items:center;gap:6px;width:100%;min-height:48px;padding:8px 0;
  border:0;background:none;color:var(--fg);font:inherit;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer}
.acc-head:focus-visible{outline:2px solid var(--brand-fg);outline-offset:-2px;border-radius:6px}
.acc-ttl{min-width:0;flex:1 1 auto}
.acc-chips{display:flex;gap:3px;flex:0 0 auto}
.acc-chips i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line2);display:block}
.acc-mark{flex:0 0 auto;width:16px;text-align:center;color:var(--fg3);font-size:10px;transition:transform .15s}
.acc.is-open>.acc-head{color:var(--brand-fg)}
.acc.is-open>.acc-head .acc-mark{transform:rotate(180deg)}
.acc-body{padding:0 0 14px}
.acc:not(.is-open)>.acc-body{display:none}
.acc-body>.btn{width:100%;margin-bottom:8px}
/* 「ツールで作るもの」「LINE で選ぶもの」の見出し */
.acc-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:16px 0 0;padding-bottom:4px;
  font-size:11px;font-weight:700;color:var(--fg3)}
.acc-group:first-child{margin-top:10px}
.acc-group.is-line{padding-top:12px;border-top:2px dashed var(--line)}
.acc.is-line>.acc-head .acc-ttl{color:var(--fg2)}
.mb-dock .fld>.gd-tag{display:inline-block;margin:-3px 0 7px}

/* 狭い右の欄に収まるように、入力部品を詰める */
.mb-dock .color{flex-wrap:wrap;gap:6px}
.mb-dock .color input[type=text]{width:auto;flex:1 1 70px;min-width:0}
.mb-dock .color input[type=range]{flex:1 1 100%!important;height:30px}
.mb-dock .rng{gap:6px}
.mb-dock .rng input[type=range]{min-width:0}
.mb-dock .rng .val.num{width:58px;padding:9px 4px}
.mb-dock .seg button{padding:10px 3px;font-size:12px}
.mb-dock .fixrow{flex-direction:column}
.mb-dock .slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px}
.mb-dock .slot{padding:5px}
.mb-dock .slot .thumb{height:40px}
.mb-dock .slot .nm{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-dock .sw{align-items:center}
.mb-dock .sw span{font-size:12.5px;flex:1;min-width:0;line-height:1.45}
.mb-dock .hint{font-size:11px}

/* 絵の下の帯：拡大と見え方の切り替え */
.mb-stagebar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;
  justify-content:center;gap:6px;padding:6px}
.mb-stage.is-doc .mb-stagebar{display:none}
.mb-os{display:flex;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:2px;min-width:0}
.mb-os button{min-height:34px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--fg3);
  font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.mb-os button.on{background:var(--brand);color:var(--onbrand)}
.mb-stagebar .mb-zoom.is-on ~ .mb-os{display:none}
/* スマホの幅で設定を出しているときは、絵の欄が細いので「＋」は出さない
  （つまむ・2回たたくで拡大できる。拡大したら戻すボタンが出る） */
@media (max-width: 759px) {
  body.mb:not(.dock-off) .mb-zoom:not(.is-on){display:none}
  body.mb:not(.dock-off) .mb-os button{padding:0 6px;font-size:11px}
}

/* 開いている項目が、絵のどこなのかを枠で示す（ほかの場所の点線は引っ込める） */
#stage.is-focusing .pv-hit::after{border-color:transparent!important;background:none!important}
#stage.is-focusing .pv-hit.is-focus::after{inset:1px;border:4px solid var(--brand)!important;
  background:none!important;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
#stage.is-focusing .pv-hit.is-focus .pv-hit::after{border-color:transparent!important;background:none!important}
/* 画像そのものが押せる場所（パスコードの丸など）は ::after を描けないので、outline で囲む */
#stage.is-focusing img.pv-hit.is-focus{outline:4px solid var(--brand);outline-offset:3px;border-radius:50%}
/* 色を選んでいるあいだ、直している場所が色の窓に隠れないよう絵をずらす */
.mb-fit.is-reveal{transition:transform .2s ease-out}

/* ---------- 画面が広いとき（パソコンでこのページを開いたとき） ----------
   右の設定は幅を決めて、残りを絵に使う。広いので、項目はいくつでも開いたままにできる。 */
@media (min-width: 760px) {
  body.mb{grid-template-columns:minmax(0,1fr) clamp(320px,32%,440px)}
  .mb-dock-body{padding:0 14px 20px}
  .mb-dock .slots{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mb-dock .color{flex-wrap:nowrap}
  .mb-dock .color input[type=text]{flex:0 0 92px}
  .mb-dock .color input[type=range]{flex:1 1 auto!important}
  .mb-dock .fixrow{flex-direction:row}
  .mb-dock .acc-head{font-size:13.5px}
}

/* ---------- ストア・チェック（スマホ） ---------- */
/* モックを縮めずに画面の幅で並べ、上下にスクロールして見る */
.mb-stage.is-doc{touch-action:auto;align-items:stretch;justify-content:stretch}
.mb-stage.is-doc .mb-fit{transform:none!important}
.mb-stage.is-doc #stage{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:12px 12px 24px;box-sizing:border-box;overscroll-behavior:contain}
/* チェック画面の先頭（規格チェックの結果） */
.mb-chk{margin-bottom:16px}
.mb-chk-ttl{font-size:14px;font-weight:700;margin:4px 2px 10px}
.mb-chk .mb-sum{margin-bottom:10px}
.mb-chk .iss{display:block;width:100%;text-align:left;font:inherit;color:inherit;border-top:0;border-right:0;border-bottom:0}
.mb-chk .iss.is-link{cursor:pointer}
.mb-chk .iss.is-link:active{filter:brightness(1.2)}
.mb-chk .iss .go{float:right;color:var(--brand-fg);font-weight:700;font-size:12px}
.mb-chk .iss .cnt{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;background:rgba(255,255,255,.1);
  font-size:10.5px;font-weight:600;color:var(--fg2);vertical-align:1px}
.mb-chk-info{margin:6px 0 10px}
.mb-chk-info summary{font-size:12.5px;color:var(--fg2);padding:10px 2px;cursor:pointer}
.mb-chk>.mb-chk-ttl:not(:first-child){margin-top:20px}
.mb .pv-check{gap:12px}
.mb .st{--st-ground:var(--bg0);--st-bleed:12px;--st-bleed-top:12px}
.mb .st-step{width:44px;height:44px}
.mb .st[data-cols="1"] .st-size{grid-template-columns:44px minmax(0,1fr) 44px}
.mb .tp-row{grid-template-columns:70px minmax(0,1fr)}
.mb .tp-chip,.mb .tp-seg button,.mb .tp-btn{min-height:40px}
.mb .tp-swatch{width:40px;height:40px}
.mb .tp-text,.mb .tp-select{font-size:15px;padding:9px}