/* ===== SeeQ Design System tokens (design/colors_and_type.css の正本を取り込み) ===== */
  :root{
    /* surfaces */
    --ds-bg:#FFFFFF;--bg-2:#F5F5F0;--bg-3:#EBEBE5;--bg-hover:#E0E0DA;
    --black:#0A0A0A;--black-2:#131313;--black-3:#1C1C1C;
    /* ink */
    --ink-1:#1A1A1A;--ink-2:#333333;--ink-3:#6E6E6E;--ink-4:#9E9E9E;
    --paper:#FFFFFF;--paper-2:#E0E0E0;--paper-3:#9A9A9A;
    /* hairlines */
    --hair:rgba(0,0,0,.12);--hair-soft:rgba(0,0,0,.06);--hair-dark:rgba(255,255,255,.10);
    /* accents (差し色＝赤＋青のみ。LINE緑はLINE専用) */
    /* サイト共通トークン（seeq-site-renewal/assets/seeq-tokens.css）と同値に揃える:
       accent-red #e2231a / accent-blue #1456c4 / LINE #06c755 */
    --red:#E2231A;--red-hover:#F03A31;--red-dark:#B71A13;
    --blue:#1456C4;--blue-hover:#2A6BE0;--blue-dark:#0F429A;--line-green:#06C755;
    /* ブランド可変トークン（BRANDS.theme が data-brand 単位で上書き＝シート全体が再テーマ）
       --hot=主アクション(=赤系) / --data=データ・寸法(=青) / --brand-soft=淡い差し色面 */
    --hot:var(--red);--data:var(--blue);--brand-soft:#FDECEE;
    /* type */
    --font-display:"Bebas Neue","Oswald","Noto Sans JP",system-ui,sans-serif;
    --font-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,monospace;
    /* shadows */
    --shadow-card:0 8px 24px -16px rgba(0,0,0,.18);
    --shadow-cta:0 12px 28px -10px rgba(230,0,18,.32);

    /* ===== 後方互換エイリアス：既存CSSの変数名を新トークンへマッピング ===== */
    --accent:var(--red); --accent-d:var(--red-dark);
    --ink:var(--ink-1); --sub:var(--ink-3);
    --line:var(--hair); --bg:var(--bg-2); --panel:#ffffff; --radius:8px;
    --shadow:var(--shadow-card);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  /* [hidden] を常に効かせる（F-1）。
     UA の `[hidden]{display:none}` は「作者スタイル」に必ず負けるため、
     `.exp-menu button{display:flex}` や `.btn{display:inline-flex}` のような
     既存ルールが hidden 属性を無効化していた。結果、運用者専用の
     「入稿データ」「テンプレートとして登録」が一般のお客様にも見えていた。
     ここで一度だけ !important を宣言し、hidden=真 を常に「隠す」に固定する。 */
  [hidden]{display:none !important;}
  html,body{margin:0;height:100%;}
  body{
    font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
    color:var(--ink);background:var(--bg);
    display:flex;flex-direction:column;height:100vh;overflow:hidden;
  }
  header{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:0 16px;min-height:60px;background:var(--black);border-bottom:1px solid rgba(255,255,255,.08);
    flex:0 0 auto;color:#fff;
  }
  .brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;letter-spacing:.02em;color:#fff;}
  .brand .accent{color:var(--red);}
  /* 本物ロゴ（筆記体SeeQ + Creationlab表記）。黒バー上は filter:invert(1) で白表示 */
  .brand{flex:0 1 auto;min-width:0;}
  /* M-6: .brand-name は span（インライン）のため overflow/text-overflow が効かず、
     幅が足りないと「デザインシミュレータ／ー」のように長音符だけが次行へ落ちていた。
     ブロック化して初めて nowrap + ellipsis が効く。 */
  .brand-name{display:block;min-width:0;overflow:hidden;}
  .brand-name .accent{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brand .logo{height:30px;width:auto;display:block;flex:0 0 auto;filter:invert(1) brightness(2);}
  .brand small{display:block;font-family:var(--font-jp);font-size:11px;font-weight:400;
    color:rgba(255,255,255,.5);letter-spacing:.08em;margin-top:2px;}
  .head-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
  .btn{
    border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
    padding:8px 14px;border-radius:var(--radius-md,4px);transition:.15s;white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;
  }
  /* body(白地)用 ghost：枠線型 */
  .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair);}
  .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg-2);}
  .btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-cta);}
  .btn-primary:hover{background:var(--red-hover);}
  .btn:disabled{opacity:.4;cursor:default;}
  .btn:active:not(:disabled){transform:translateY(1px);}
  .btn svg{width:16px;height:16px;}
  .icobtn{width:36px;height:36px;padding:0;justify-content:center;border-radius:var(--radius-md,4px);background:var(--bg-2);color:var(--ink);box-shadow:none;}
  .icobtn:hover:not(:disabled){background:var(--bg-3);}
  .icobtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
  .hsep{width:1px;height:26px;background:var(--line);margin:0 4px;}

  /* ===== 黒バー(header)上のボタン配色オーバーライド ===== */
  header .btn{height:36px;padding:0 16px;}
  header .icobtn{background:transparent;color:#fff;}
  header .icobtn:hover:not(:disabled){background:rgba(255,255,255,.12);}
  header .hsep{background:rgba(255,255,255,.14);}
  header .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);background:transparent;}
  header .btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);background:rgba(255,255,255,.06);}
  header #btnExport{background:#fff;color:var(--black);box-shadow:none;}
  header #btnExport:hover{background:var(--bg-2);}
  header .btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-cta);}
  header .btn-primary:hover{background:var(--red-hover);}

  /* ===== ブランド切替トグル（黒バー上） ＝ 1エンジン×マルチブランドの顔切替 ===== */
  .brandtoggle{display:inline-flex;flex:0 0 auto;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill,999px);padding:3px;gap:2px;}
  .brandtoggle .bt{border:0;background:transparent;cursor:pointer;font-family:inherit;font-weight:800;
    font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.62);padding:6px 13px;border-radius:999px;
    line-height:1;white-space:nowrap;transition:background .15s,color .15s;}
  .brandtoggle .bt:hover{color:#fff;}
  .brandtoggle .bt.on{background:var(--red);color:#fff;box-shadow:0 2px 8px -2px rgba(0,0,0,.4);}
  /* テキスト型ロゴ（森工業など type:'text'）。黒バー上は白で表示 */
  .brand-logo-text{display:none;flex-direction:column;line-height:1;}
  .brand-logo-text b{font-family:var(--font-jp);font-weight:900;font-size:17px;color:#fff;letter-spacing:.04em;}
  .brand-logo-text i{font-style:normal;font-family:var(--font-display);font-size:9px;font-weight:400;
    color:rgba(255,255,255,.5);letter-spacing:.22em;margin-top:3px;}

  main{flex:1 1 auto;display:flex;min-height:0;overflow:hidden;position:relative;}

  /* Tool panel */
  .tools{
    flex:0 0 256px;background:var(--panel);border-right:1px solid var(--line);
    overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px;
  }
  /* PC 左レール（タブ）: 押したタブのカードだけをサイドバーに出す */
  .pc-rail{display:none;}
  @media (min-width:821px){
    .pc-rail{display:flex;flex-direction:column;align-items:stretch;flex:0 0 66px;background:var(--panel);
      border-right:1px solid var(--line);padding:8px 6px;gap:2px;overflow-y:auto;}
    .ptab{border:0;background:transparent;border-radius:10px;padding:9px 2px 7px;display:flex;flex-direction:column;
      align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--sub);cursor:pointer;
      -webkit-tap-highlight-color:transparent;letter-spacing:.02em;}
    .ptab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;}
    .ptab:hover{background:var(--bg-2);color:var(--ink);}
    .ptab.active{background:var(--brand-soft);color:var(--accent-d);}
    .ptab[hidden]{display:none;}
    body.pc-tabs #tools .card{display:none;}
    body.pc-tabs #tools .card.pc-active{display:block;}
    body.pc-tabs #tools .card.hidden{display:none !important;}
    body.pc-tabs .panel-tools{display:none;}     /* タブで切り替わるので一括開閉は不要 */
    body.pc-tabs .tools{flex-basis:250px;}
  }
  /* desktop right-hand layer dock (req PC-a): the layer card is moved here by JS
     on desktop and back into the sheet on mobile. */
  .layer-dock{flex:0 0 232px;background:var(--panel);border-left:1px solid var(--line);
    overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px;}
  .layer-dock:empty{display:none;}
  /* [printsize0902] プリントサイズ一覧 */
  .ps-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line);}
  .ps-row:last-child{border-bottom:0;}
  .ps-row .ps-k{color:var(--muted);flex:none;}
  .ps-row.cur .ps-k{color:var(--ink,#1a1a1a);font-weight:700;}
  .ps-row .ps-v{font-variant-numeric:tabular-nums;text-align:right;}
  .ps-row.none .ps-v{color:var(--muted);}
  .ps-note{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5;}
  /* sheet header is desktop-hidden; on mobile it becomes the bottom-sheet grip + tabs */
  .sheet-head{display:none;}
  .sheet-close{display:none;}
  .sheet-body{display:flex;flex-direction:column;gap:12px;}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px;}
  .card.hidden{display:none;}
  /* [hidden0902] 汎用 .hidden が無く、#diecutEntryNote / #dieOpts（class="hidden"）がTシャツでも見えていた */
  .hidden{display:none !important;}
  /* ===== パネルの開閉（アコーディオン）=====
     見出しをそのまま開閉ボタンにする。閉じている時は見出し以外を隠すだけなので、
     中の入力状態やイベントはそのまま生きる。 */
  .card>h3{cursor:pointer;user-select:none;-webkit-user-select:none;position:relative;padding-right:20px;
    -webkit-tap-highlight-color:transparent;min-height:22px;}
  .card>h3::after{content:'';position:absolute;right:3px;top:50%;width:7px;height:7px;
    border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);
    transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;}
  .card.collapsed>h3::after{transform:translateY(-25%) rotate(-135deg);}
  .card.collapsed>h3{margin-bottom:0;}
  .card.collapsed>*:not(h3){display:none !important;}
  .card>h3:hover{color:var(--ink);}
  .card>h3:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
  .btn.hidden{display:none !important;}
  /* 長い商品名でボタンからはみ出していたので、文言は固定の短文にしたうえで
     折り返し＋幅の上限を明示しておく（パネル幅を絶対に超えない） */
  #diecutEntry{white-space:normal;line-height:1.35;height:auto;min-height:44px;padding:10px 12px;
    text-align:center;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;}
  .panel-tools{display:flex;justify-content:flex-end;}
  .pt-btn{border:0;background:transparent;color:var(--sub);font-family:inherit;font-size:11.5px;
    font-weight:700;cursor:pointer;padding:4px 2px;}
  .pt-btn:hover{color:var(--accent-d,#B3000E);}
  .card h3{margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.03em;display:flex;align-items:center;gap:7px;}
  .card h3 .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}

  .stage{
    flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:6px;overflow:auto;position:relative;background:
      radial-gradient(circle at 1px 1px,rgba(0,0,0,.05) 1px,transparent 0) 0 0/22px 22px,var(--bg-2);
  }
  /* [view3p0902] 素材ストリップ（デザインタブのみ表示） */
  .matstrip{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;background:var(--bg-2,#f4f2ee);border-radius:12px;max-width:740px;width:100%;}
  .matstrip .ms-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted,#6b6b6b);flex:none;}
  .matstrip .ms-items{display:flex;gap:10px;overflow-x:auto;align-items:center;}
  .matstrip .ms-item{flex:none;width:64px;text-align:center;}
  .matstrip .ms-item .ms-thumb{width:64px;height:74px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair,#e0e0e0);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .matstrip .ms-item .ms-thumb svg,.matstrip .ms-item .ms-thumb img{width:100%;height:100%;object-fit:contain;}
  .matstrip .ms-item .ms-name{font-size:10px;color:var(--muted,#6b6b6b);margin-top:4px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .canvas-wrap{position:relative;width:100%;max-width:740px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.22));}
  /* 広いPC画面: サイドバーを広げ（商品グリッド4列）、キャンバス上限も引き上げて余白を使い切る */
  @media (min-width:1500px){
    .tools{flex-basis:320px;}
    .layer-dock{flex-basis:260px;}
    .canvas-wrap{max-width:900px;}
    .prodgrid{grid-template-columns:repeat(4,1fr);}
    .prodsel{grid-template-columns:repeat(4,1fr);}
  }
  /* 高さの低いPC（ノートPC 768px級）: ステージ余白を詰めてキャンバスを大きく */
  @media (min-width:1024px) and (max-height:820px){
    .stage{padding:4px;}
    .stage-hint{margin-top:4px;font-size:11px;}
    header{min-height:52px;}
  }
  canvas{border-radius:4px;}
  .stage-hint{margin-top:10px;font-size:11.5px;color:var(--sub);text-align:center;line-height:1.6;transition:opacity .12s;}
  /* F-7: 要素を選ぶと操作バー(bottom:14px)がこの説明行に14px重なって読めなくなる。
     選択中はバー側が主役なので説明行を退避する（選択解除で戻る）。 */
  body.has-sel .stage-hint{opacity:0;pointer-events:none;}
  /* F-4: はみ出し警告（ステージ上部・要素の邪魔をしない位置に固定） */
  .ov-warn{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:35;pointer-events:none;
    display:flex;align-items:center;gap:7px;max-width:min(92%,520px);
    background:#fff3f4;border:1px solid rgba(230,0,18,.35);color:#a3121c;
    border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;line-height:1.4;
    box-shadow:var(--shadow-card);}
  .ov-warn svg{width:16px;height:16px;flex:0 0 auto;}
  .zoombar{position:absolute;right:12px;bottom:12px;display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:4px;box-shadow:var(--shadow);}
  .zoombar button{border:0;background:transparent;cursor:pointer;border-radius:7px;width:30px;height:30px;display:grid;place-items:center;color:var(--ink);font-weight:700;}
  .zoombar button:hover{background:#eef3f4;}
  .zoombar .zlabel{min-width:46px;display:grid;place-items:center;font-size:12px;color:var(--sub);}

  /* Face toggle */
  .facetabs{display:flex;gap:6px;margin-bottom:10px;}
  .facetab{flex:1;border:1px solid var(--line);background:#fbfdfd;border-radius:10px;padding:9px;cursor:pointer;font-weight:700;font-size:13px;color:var(--sub);transition:.12s;}
  .facetab.active{background:var(--accent);color:#fff;border-color:var(--accent);}

  /* swatches */
  .swatches{display:flex;flex-wrap:wrap;gap:8px;}
  .swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);transition:.12s;}
  .swatch:hover{transform:scale(1.08);}
  .swatch.active{box-shadow:0 0 0 2px var(--accent);transform:scale(1.08);}

  label.fld{display:block;font-size:11.5px;color:var(--sub);margin:0 0 4px;font-weight:700;}
  textarea,select,input[type=text]{
    width:100%;font-family:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);
    border-radius:9px;background:#fbfdfd;color:var(--ink);outline:none;resize:none;
  }
  textarea:focus,select:focus,input:focus{border-color:var(--accent);}
  .row{display:flex;gap:8px;align-items:center;}
  .row>*{flex:1;}
  .btn-block{width:100%;justify-content:center;margin-top:8px;}
  /* スライダーはブラウザ既定のマージンぶんカードから数px はみ出すことがあるので、
     幅の計算にパディング/マージンを含めて確実に枠内へ収める */
  input[type=range]{width:100%;max-width:100%;box-sizing:border-box;margin-left:0;margin-right:0;accent-color:var(--accent);}
  .mini{font-size:11.5px;color:var(--sub);}
  .field{margin-bottom:9px;}
  .field:last-child{margin-bottom:0;}
  .colorrow{display:flex;align-items:center;gap:8px;}
  .colorrow input[type=color]{width:38px;height:32px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff;cursor:pointer;flex:0 0 auto;}
  .seg{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
  .seg button{flex:1;border:0;background:#fbfdfd;padding:8px 0;cursor:pointer;font-weight:700;font-size:13px;color:var(--sub);}
  .seg button.on{background:var(--accent);color:#fff;}
  .seg button:not(:last-child){border-right:1px solid var(--line);}
  .chiprow{display:flex;flex-wrap:wrap;gap:6px;}
  .chip{border:1px solid var(--line);background:#fbfdfd;border-radius:20px;padding:6px 11px;cursor:pointer;font-size:12px;font-weight:700;color:var(--ink);transition:.12s;}
  .chip:hover{border-color:var(--accent);background:var(--brand-soft);color:var(--accent-d);}
  .chip.chip-primary{background:var(--accent);border-color:var(--accent);color:#fff;padding:9px 15px;}
  .chip.chip-primary:hover{background:var(--accent-d,#B3000E);color:#fff;}
  .chip.chip-primary svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;stroke:currentColor;fill:none;stroke-width:2;}

  /* ---- one-tap background removal (req TR-a) ---- */
  .bg-help{font-size:11.5px;color:var(--sub);line-height:1.6;margin:0 0 9px;}
  .bg-adv-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:9px;border:0;background:transparent;
    color:var(--accent-d,#B3000E);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:4px 0;}
  .bg-adv{margin-top:8px;padding:11px;border:1px dashed var(--line);border-radius:11px;background:#fbfdfd;}
  .bg-adv.hidden{display:none;}
  .bg-state{font-size:11.5px;font-weight:700;color:var(--accent-d,#B3000E);margin:9px 0 0;min-height:1em;line-height:1.6;}
  .bg-state.is-busy{color:var(--sub);display:flex;align-items:center;gap:7px;}
  .bg-spin{display:inline-block;width:13px;height:13px;flex:0 0 13px;border-radius:50%;
    border:2px solid var(--line);border-top-color:var(--accent);animation:bg-spin .8s linear infinite;}
  @keyframes bg-spin{to{transform:rotate(360deg);}}
  .chip.is-busy,.chip.is-disabled{opacity:.55;pointer-events:none;cursor:default;}
  .chip.chip-ai{background:linear-gradient(135deg,var(--accent),#7a1fa2);border-color:transparent;color:#fff;padding:9px 15px;}
  .chip.chip-ai:hover{filter:brightness(1.08);color:#fff;}
  .chip.chip-ai svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;stroke:currentColor;fill:none;stroke-width:2;}

  /* shapes */
  .shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .shape-btn{aspect-ratio:1;border:1px solid var(--line);border-radius:11px;background:#fbfdfd;cursor:pointer;display:grid;place-items:center;transition:.12s;}
  .shape-btn:hover{border-color:var(--accent);background:var(--brand-soft);}
  .shape-btn svg{width:24px;height:24px;fill:#39505a;}

  .upload{border:1.5px dashed #cdd9dc;border-radius:11px;padding:15px;text-align:center;cursor:pointer;color:var(--sub);font-size:12.5px;transition:.12s;background:#fbfdfd;}
  .upload:hover{border-color:var(--accent);color:var(--accent-d);background:var(--brand-soft);}
  .upload svg{width:23px;height:23px;display:block;margin:0 auto 6px;stroke:var(--sub);fill:none;stroke-width:2;}
  .upnote{margin-top:5px;font-size:11.5px;color:#8aa0a4;letter-spacing:.02em;}

  /* preset positions */
  .presets{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
  .preset-btn{border:1px solid var(--line);background:#fbfdfd;border-radius:9px;padding:9px 6px;cursor:pointer;font-size:12px;font-weight:700;color:var(--ink);transition:.12s;}
  .preset-btn:hover{border-color:var(--accent);background:var(--brand-soft);color:var(--accent-d);}

  /* layers */
  .layerlist{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;}
  /* F-3: 固定幅の兄弟(つまみ15+アイコン24+ボタン26×4+隙間)が行幅177pxを超えるため
     flex:1 の名前が width:0 に潰れ、レイヤー名がまったく読めなくなっていた。
     名前に下限を与え、入りきらない時はボタン群を2段目へ折り返す。 */
  .layer{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:7px 8px;background:#fbfdfd;cursor:pointer;transition:.1s;}
  .layer.sel{border-color:var(--accent);background:var(--brand-soft);}
  .layer.dragover{border-style:dashed;border-color:var(--accent);}
  .layer.dragging{opacity:.5;}
  .layer .grip{cursor:grab;color:#b4c0c4;font-size:14px;line-height:1;flex:0 0 auto;touch-action:none;padding:2px 2px;}
  .layer .lname{flex:1 1 72px;min-width:72px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .layer .lacts{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin-left:auto;}
  .layer .licon{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;color:var(--sub);}
  .layer button{border:0;background:transparent;cursor:pointer;border-radius:6px;width:26px;height:26px;display:grid;place-items:center;color:var(--sub);flex:0 0 auto;}
  .layer button:hover{background:#e2eaeb;color:var(--ink);}
  .layer button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
  .layer.off .lname{opacity:.4;}
  .layer-empty{font-size:12px;color:var(--sub);text-align:center;padding:14px 0;}

  /* floating object bar */
  .objbar{
    position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:40;
    background:#fff;border:1px solid var(--hair);border-radius:var(--radius-lg,8px);padding:6px;
    display:none;gap:3px;box-shadow:var(--shadow-card);flex-wrap:wrap;max-width:94vw;justify-content:center;
  }
  .objbar.show{display:flex;}
  .obj-act{border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:var(--radius-md,4px);padding:7px 8px;display:grid;place-items:center;transition:.12s;min-width:38px;}
  .obj-act:hover{background:var(--bg-2);}
  .obj-act.danger{color:var(--red);}
  .obj-act.danger:hover{background:var(--brand-soft);}
  .obj-act svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
  .obj-act small{font-size:11px;display:block;margin-top:2px;color:var(--ink-3);}
  .compose-hint{display:none;font-size:11.5px;color:var(--sub);margin-top:7px;line-height:1.5;}
  /* 整列・等間隔メニュー */
  .alignmenu{position:fixed;z-index:85;transform:translate(-50%,-100%);background:#fff;border:1px solid var(--line);border-radius:11px;
    box-shadow:0 12px 40px rgba(0,0,0,.18);padding:6px;display:none;}
  .alignmenu.show{display:block;}
  .am-row{display:flex;gap:4px;}
  .am-row+.am-row{margin-top:4px;}
  .am-row button{border:1px solid var(--line);background:#fbfdfd;border-radius:8px;padding:7px 10px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;flex:1 1 0;}
  .am-row button:hover{border-color:var(--accent);color:var(--accent-d);}
  .am-dist{display:none;}
  .alignmenu.dist-ok .am-dist{display:flex;}
  .obj-act[hidden]{display:none;}
  /* PC クイックバー（選択中だけ表示・スマホでは出さない） */
  .quickbar{display:none;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:36;
    background:#fff;border:1px solid var(--hair);border-radius:var(--radius-lg,8px);padding:5px 6px;
    box-shadow:var(--shadow-card);align-items:center;gap:4px;max-width:calc(100% - 24px);}
  .quickbar.show{display:flex;}
  .quickbar .qb-group{display:none;align-items:center;gap:4px;}
  .quickbar[data-kind="text"] .qb-text{display:flex;}
  .quickbar[data-kind="image"] .qb-image{display:flex;}
  .quickbar[data-kind="shape"] .qb-shape{display:flex;}
  .qb-swatch-ring{background:transparent !important;box-shadow:inset 0 0 0 4px var(--qb-stroke,#1a1a1a), 0 0 0 1px var(--hair);}
  .qb-btn{border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;border-radius:var(--radius-md,4px);
    min-width:32px;height:32px;padding:0 8px;font-size:13px;font-weight:700;display:grid;place-items:center;line-height:1;white-space:nowrap;}
  .qb-btn:hover{background:var(--bg-2);}
  .qb-btn.on{background:var(--brand-soft);color:var(--accent-d);border-color:rgba(226,35,26,.25);}
  .qb-btn.qb-wide{padding:0 11px;font-size:12.5px;}
  .qb-btn.qb-ai{color:var(--accent-d);}
  .qb-font{border:1px solid var(--line);background:#fff;border-radius:var(--radius-md,4px);height:32px;padding:0 9px 0 10px;
    display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);max-width:190px;}
  .qb-font span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .qb-font .qb-caret{color:var(--sub);font-size:11px;}
  .qb-num{min-width:30px;text-align:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);}
  .qb-sep{width:1px;height:22px;background:var(--hair);margin:0 3px;}
  .qb-color{position:relative;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;border-radius:var(--radius-md,4px);}
  .qb-color:hover{background:var(--bg-2);}
  .qb-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
  .qb-swatch{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--hair);pointer-events:none;background:#222;}
  .quickbar.show ~ .ov-warn{top:58px;}
  @media (max-width:820px){ .quickbar{display:none !important;} }
  @media (min-width:821px){ body.has-sel .toast{top:120px;} }   /* クイックバーと重ならない位置へ */
  /* 実寸の目安 */
  .obj-dim{align-self:center;font-size:11.5px;font-weight:800;color:var(--ink);padding:0 8px 0 9px;border-left:1px solid var(--hair);margin-left:3px;white-space:nowrap;font-variant-numeric:tabular-nums;}
  /* SPはヘッダーが詰まるため「他のアイテム」は商品タブ内のボタンに移す（森さんFB 2026-08-25） */
  @media (max-width:820px){ #btnXitem{display:none;} }
  @media (min-width:821px){ #btnXitemSp{display:none;} }
  .xitem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px;}
  .xitem-card{border:1px solid var(--hair);border-radius:10px;padding:8px 8px 10px;text-align:center;background:#fff;}
  .xitem-card .xi-cv{min-height:60px;}
  .xitem-card .xi-cv canvas{width:100%;height:auto;display:block;}
  .xitem-card .xi-name{font-size:12px;font-weight:800;margin:4px 0 7px;}
  .dpi-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:800;vertical-align:1px;}
  .dpi-good{background:#e3f4e8;color:#1e7c3c;}
  .dpi-mid{background:#fdf3d7;color:#9a6d00;}
  .dpi-low{background:#fde3e3;color:#c0303a;}
  .guide-dim{position:absolute;z-index:30;pointer-events:none;font-size:11px;font-weight:700;color:var(--ink-3);line-height:1.35;
    background:rgba(255,255,255,.84);border:1px solid var(--hair-soft);border-radius:999px;padding:2px 9px;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .real-dim-row input[type=number]{width:74px;min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:var(--radius-md,4px);font-size:13px;}
  #realSizeInfo{margin-top:6px;}
  .real-keep{display:flex;gap:8px;align-items:flex-start;margin:8px 0 2px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.4;}
  .real-keep input{margin-top:2px;accent-color:var(--accent);}
  .real-keep small{display:block;font-weight:400;color:var(--sub);font-size:11px;margin-top:2px;}
  .real-body{flex:1 1 100%;display:flex;gap:6px;margin-bottom:4px;}
  .real-body .chip{flex:1 1 0;text-align:center;}

  /* context menu */
  .ctxmenu{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:6px;display:none;min-width:170px;}
  .ctxmenu.show{display:block;}
  .ctxmenu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;cursor:pointer;padding:8px 10px;border-radius:8px;font-size:13px;font-family:inherit;color:var(--ink);text-align:left;}
  .ctxmenu button:hover{background:var(--brand-soft);}
  .ctxmenu button.danger:hover{background:#fdecef;color:#d6435c;}
  .ctxmenu .sep{height:1px;background:var(--line);margin:5px 2px;}
  .ctxmenu kbd{margin-left:auto;font-size:10.5px;color:var(--sub);font-family:inherit;}

  /* modal */
  /* ===== シルクインク100色（T-6・2026-08-29） ===== */
  .silk-box{max-width:660px;width:min(94vw,660px);max-height:86vh;overflow-y:auto;}
  .silk-note{font-size:11.5px;color:#6b6b6b;margin:4px 0 2px;line-height:1.6;}
  .silk-grp{font-size:12.5px;font-weight:900;margin:14px 0 7px;display:flex;align-items:center;gap:8px;}
  .silk-grp .sp{font-size:10px;color:#fff;background:var(--red,#e2231a);border-radius:999px;padding:1px 8px;font-weight:700;}
  .silk-grid{display:flex;flex-wrap:wrap;gap:7px;}
  .silk-chip{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d5d5d5;cursor:pointer;padding:0;background-size:cover;background-position:center;transition:.12s;}
  .silk-chip:hover{transform:scale(1.14);}
  .silk-chip.on{box-shadow:0 0 0 2px var(--red,#e2231a);transform:scale(1.1);}
  .silk-hover{font-size:11.5px;color:#1a1a1a;min-height:18px;margin-top:10px;font-weight:700;}
  /* [recolor0902] 配色チップ */
  .rc-chip{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cfcfcf;cursor:pointer;padding:0;background-size:cover;transition:.12s;}
  .rc-chip:hover{transform:scale(1.1);}
  .silkbtn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;}
  .silkcur{font-size:11px;color:#6b6b6b;}
  .modal-bg{position:fixed;inset:0;background:rgba(20,35,40,.5);display:none;place-items:center;z-index:90;padding:18px;overflow-y:auto;}
  .modal-bg.show{display:grid;}
  /* C-2: 画面より背の高いダイアログでも必ず「閉じる」まで届くようにする。
     iPhone SE(375×667) 等では保存ダイアログが 703px あり、閉じるボタンが
     画面外＋body が overflow:hidden のためスクロールもできず詰んでいた。
     dvh はアドレスバー可変ぶんを含めた実高さ。非対応ブラウザ向けに vh も置く。 */
  .modal{background:#fff;border-radius:var(--radius-lg,8px);max-width:440px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);
    position:relative;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* 常設の×。スクロールに追従させたいので sticky で右上に貼り付ける */
  .modal .modal-x{position:sticky;top:-8px;float:right;margin:-12px -10px 0 8px;z-index:2;
    width:40px;height:40px;min-width:40px;border:0;background:#eef3f4;border-radius:50%;
    display:grid;place-items:center;color:var(--ink-3,#5a6b72);cursor:pointer;padding:0;}
  .modal .modal-x:hover{background:#e2eaeb;color:var(--ink);}
  .modal .modal-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;}
  .modal.center{text-align:center;}
  .modal .ic{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;margin:0 auto 14px;}
  .modal .ic svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:2;}
  .modal h2{margin:0 0 8px;font-size:18px;}
  .modal p{margin:0 0 16px;color:var(--sub);font-size:13.5px;line-height:1.7;}
  .modal textarea{height:120px;font-family:monospace;font-size:11px;}
  /* ===== C-1: 見積もり依頼フォーム ===== */
  .qf-label{display:block;text-align:left;font-size:12.5px;font-weight:700;color:var(--ink);margin:12px 0 5px;}
  .qf-req{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:4px;background:var(--brand-soft);
    color:var(--accent-d);font-size:11px;font-weight:800;vertical-align:1px;}
  .qf-input{width:100%;border:1px solid var(--line);border-radius:var(--radius-md,6px);padding:11px 12px;
    font-family:inherit;font-size:14px;color:var(--ink);background:#fff;height:auto;}
  .qf-input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent);}
  .qf-input.bad{border-color:var(--accent);background:#fff7f8;}
  .qf-area{height:80px;resize:vertical;font-family:inherit;font-size:14px;line-height:1.6;}
  .qf-note{text-align:left;font-size:11.5px;color:var(--sub);margin:10px 0 0;line-height:1.6;}
  .qf-est{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line,#ddd);border-radius:10px;background:var(--panel,#fafafa);text-align:left;}
  .qf-est .qe-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
  .qf-est .qe-k{font-size:12px;color:var(--sub);}
  .qf-est .qe-v{font-size:18px;letter-spacing:.02em;}
  .qf-est .qe-note{margin:6px 0 0;font-size:11px;color:var(--sub);line-height:1.6;}
  .qf-error{text-align:left;font-size:12.5px;font-weight:700;color:var(--accent-d);background:var(--brand-soft);
    border-radius:6px;padding:9px 11px;margin:10px 0 0;line-height:1.6;white-space:pre-line;}
  .quote-done{text-align:center;}
  .quote-done h3{margin:0 0 8px;font-size:17px;}
  .quote-done p{margin:0 0 16px;color:var(--sub);font-size:13.5px;line-height:1.7;}
  .qd-code{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line,#ddd);border-radius:10px;background:var(--panel,#fafafa);text-align:left;}
  .qd-code .qd-lbl{display:block;font-size:12px;color:var(--sub);margin-bottom:4px;}
  .qd-code .qd-val{display:flex;align-items:center;gap:10px;}
  .qd-code code{font-size:20px;font-weight:700;letter-spacing:.06em;}
  .qd-code .qd-copy{font-size:12px;padding:4px 10px;border:1px solid var(--line,#ccc);border-radius:6px;background:#fff;cursor:pointer;}
  .qd-code .qd-hint{margin:8px 0 0;font-size:12px;color:var(--sub);line-height:1.6;}
  .modal .ic.ok{background:#e8f6ec;}
  .modal .ic.ok svg{stroke:#1f8a44;}
  .btn[disabled]{opacity:.55;cursor:not-allowed;}

  /* product selector */
  .prodsel{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px;}
  .prod-btn{border:1px solid var(--line);background:#fbfdfd;border-radius:10px;padding:10px 6px;cursor:pointer;font-weight:700;font-size:12.5px;color:var(--sub);transition:.12s;}
  .prod-btn:hover{border-color:var(--accent);background:var(--brand-soft);color:var(--accent-d);}
  .prod-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

  /* ===== 商品・プリント面：最重要パネルの強化 =====
     「いまなにに刷ろうとしているのか」を絵で見せる。商品も面も文字だけの
     チップだと初見のお客様には判断材料がないので、実際の商品SVGをそのまま
     サムネイルに使う（別途画像を用意しなくてよい＝単一HTMLのまま）。 */
  .card-primary{border-color:var(--accent);box-shadow:0 2px 16px rgba(224,56,44,.10);}
  .card-primary>h3{color:var(--accent-d,#B3000E);}
  .nm-change{margin-left:auto;flex:0 0 auto;white-space:nowrap;}
  .nowmaking{flex-wrap:wrap;}
  .nowmaking .nm-txt{flex:1 1 120px;}
  .nm-txt b{overflow-wrap:anywhere;}
  .stamps .stamp-btn svg path{fill:currentColor !important;stroke:none !important;}
  .obj-warn{color:#b45309;font-weight:700;}
  .obj-warn.obj-ok{color:#1f7a3a;}
  .nn-entry{margin-top:8px;padding-top:8px;border-top:1px dashed var(--hair,#e5e5e5);}
  .nn-box{max-width:520px;}
  .nn-tablewrap{max-height:40vh;overflow:auto;margin:8px 0;border:1px solid var(--hair,#e5e5e5);border-radius:8px;}
  .nn-table{width:100%;border-collapse:collapse;font-size:13px;}
  .nn-table th{position:sticky;top:0;background:var(--panel,#fff);font-weight:700;text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair,#e5e5e5);}
  .nn-table td{padding:2px 4px;border-bottom:1px solid var(--hair,#f0f0f0);}
  .nn-table input{width:100%;border:none;background:transparent;padding:6px 4px;font:inherit;}
  .nn-table input:focus{outline:2px solid var(--brand,#E60012);border-radius:4px;}
  .nn-del{border:none;background:none;color:var(--sub,#888);cursor:pointer;font-size:17px;padding:4px;min-width:32px;min-height:32px;line-height:1;}   /* [qa0902] 17×25pxで押しにくかった→32px角 */
  #nnPasteArea{width:100%;margin-top:6px;}
  #faceColorNote:empty{display:none;}
  .pos-std{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line,#e5e5e5);}
  .pos-std-h{margin-bottom:4px;}
  .pos-tag{font-style:normal;font-size:10px;line-height:1;padding:2px 5px;border-radius:999px;margin-left:4px;vertical-align:middle;}
  .pos-ok{background:#e6f6ea;color:#1f7a3a;border:1px solid #b9e3c5;}
  .pos-approx{background:#fff4e0;color:#9a5b00;border:1px solid #f1d9a6;}
  .prodpicker{margin-top:6px;}
  .nowmaking{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;
    background:var(--brand-soft,#FDECEA);margin-bottom:12px;}
  .nm-thumb{flex:0 0 auto;width:38px;height:44px;border-radius:8px;background:#ededea;
    border:1px solid rgba(20,28,38,.14);overflow:hidden;display:block;}
  .nm-thumb svg{width:100%;height:100%;display:block;}
  .nm-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
  .nm-txt b{font-size:13.5px;color:var(--ink);}
  .nm-txt small{font-size:11.5px;color:var(--sub);font-weight:700;}
  .fld-sub{font-weight:400;color:var(--sub);}

  /* 旧ルール（.prodsel 自体が3列グリッド）を明示的に打ち消す。打ち消さないと
     カテゴリごとの .prodgrid がグリッドアイテム扱いになり、3列に潰れる。 */
  .prodsel{display:block;margin-bottom:13px;}
  .prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
  /* ===== スタート画面「なにを作りますか？」（Wave2）===== */
  .startscreen{position:fixed;inset:0;z-index:200;background:var(--bg,#f6f8f9);
    display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
    padding:clamp(14px,4vh,40px) 14px calc(20px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;}
  .startscreen[hidden]{display:none !important;}
  body.ss-open{overflow:hidden;}
  .ss-inner{width:100%;max-width:920px;margin:auto;min-width:0;}
  .ss-head{text-align:center;margin-bottom:clamp(12px,2.5vh,22px);}
  .ss-head h1{margin:0 0 6px;font-size:clamp(20px,4.4vw,28px);font-weight:800;color:var(--ink);letter-spacing:.01em;}
  .ss-lead{margin:0;font-size:clamp(12px,2.6vw,13.5px);color:var(--sub);line-height:1.7;}
  .ss-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px;}
  .ss-cat{border:1.5px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;
    font-family:inherit;font-size:13.5px;font-weight:800;color:var(--sub);
    padding:11px 18px;min-height:44px;transition:.14s;-webkit-tap-highlight-color:transparent;}
  .ss-cat:hover{border-color:var(--accent);color:var(--accent-d,#B3000E);}
  .ss-cat.on{background:var(--accent);border-color:var(--accent);color:#fff;}
  .ss-cat[disabled]{opacity:.5;cursor:default;}
  .ss-cat small{display:block;font-size:11px;font-weight:700;opacity:.8;}
  /* グリッドの列は min-width:auto が既定なので、長い商品名で列が縮まずに
     横スクロールが出る。min-width:0＋任意位置での折り返しで確実に収める。 */
  .ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;min-width:0;}
  .ss-card{border:1.5px solid var(--line);background:#fff;border-radius:14px;cursor:pointer;
    padding:12px 10px 11px;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;
    font-family:inherit;transition:.14s;-webkit-tap-highlight-color:transparent;}
  .ss-card:hover{border-color:var(--accent);box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.10));transform:translateY(-2px);}
  /* 白い商品（タオル・缶バッジ等）が沈まないよう、サムネの地はステージと同系の
     ニュートラルグレーにする（真っ白にしない） */
  .ss-thumb{width:100%;height:96px;overflow:hidden;border-radius:9px;background:#eeeeea;}
  .ss-thumb svg{width:100%;height:100%;display:block;}
  .ss-name{font-size:13px;font-weight:800;color:var(--ink);line-height:1.3;text-align:center;overflow-wrap:anywhere;}
  .ss-sub{font-size:11.5px;color:var(--sub);font-weight:700;line-height:1.3;text-align:center;overflow-wrap:anywhere;}
  .ss-note{margin:14px 0 0;font-size:11.5px;color:var(--sub);text-align:center;line-height:1.7;}
  .ss-foot{margin-top:clamp(14px,3vh,24px);text-align:center;}
  @media (max-width:820px){
    .ss-grid{grid-template-columns:repeat(2,1fr);gap:9px;}
    .ss-thumb{height:84px;}
    .ss-cat{font-size:12.5px;padding:11px 14px;}
  }

  /* カテゴリのタブ（アパレル／グッズ・小物／タオル…） */
  .prodcats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px;}
  .prodcat-tab{border:1px solid var(--line);background:#fbfdfd;border-radius:999px;
    padding:6px 11px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:700;
    color:var(--sub);transition:.12s;-webkit-tap-highlight-color:transparent;}
  .prodcat-tab:hover{border-color:var(--accent);color:var(--accent-d,#B3000E);}
  .prodcat-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;}
  .prod-btn{display:flex;flex-direction:column;align-items:center;gap:5px;border:1.5px solid var(--line);
    background:#fff;border-radius:12px;padding:8px 4px 7px;cursor:pointer;font-family:inherit;
    font-weight:700;font-size:11.5px;color:var(--sub);transition:.14s;-webkit-tap-highlight-color:transparent;}
  /* サムネは高さ固定（縦横比は SVG 側の preserveAspectRatio に任せる）。
     可変にすると幅の広い画面で巨大化し、逆に選びにくくなるため。 */
  /* 白い商品（缶バッジ・ステッカー・タオル）が白地に沈むので、サムネの地は
     ステージと同系のニュートラルグレー＋内側の細線で商品の形を見せる */
  .prod-btn .pb-thumb{width:100%;height:56px;overflow:hidden;border-radius:7px;background:#ededea;display:block;
    box-shadow:inset 0 0 0 1px rgba(20,28,38,.07);}
  .prod-btn .pb-thumb svg{width:100%;height:100%;display:block;}
  /* 商品名は2行まで。行数が違ってもボタンの高さが揃うように下限を持たせる */
  .prod-btn .pb-label{display:block;text-align:center;line-height:1.25;min-height:2.5em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .prod-btn:hover{border-color:var(--accent);background:var(--brand-soft);color:var(--accent-d);}
  .prod-btn.active{border-color:var(--accent);background:var(--brand-soft);color:var(--accent-d);
    box-shadow:inset 0 0 0 2px var(--accent);}
  .prod-btn.active .pb-thumb{background:#fff;}

  /* 面が3つ以上（袖つき）でも折り返して収まるように。min-width:0 で中身の縮小も許可 */
  .facetabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;}
  .facetab{flex:1 1 46%;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--line);
    background:#fff;border-radius:11px;padding:7px 9px;cursor:pointer;font-weight:700;font-size:12.5px;
    color:var(--sub);transition:.14s;white-space:nowrap;}
  .facetab .ft-thumb{flex:0 0 auto;width:22px;height:26px;border-radius:5px;overflow:hidden;background:#f7f9fa;}
  .facetab .ft-thumb svg{width:100%;height:100%;display:block;}
  .facetab.active{background:var(--brand-soft);color:var(--accent-d);border-color:var(--accent);
    box-shadow:inset 0 0 0 2px var(--accent);}
  .facetab.active .ft-thumb{background:#fff;}

  .swatches{display:flex;flex-wrap:wrap;gap:9px;}
  .swatch{position:relative;width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;
    border:2px solid #fff;box-shadow:0 0 0 1px var(--line);transition:.12s;}
  .swatch.active{box-shadow:0 0 0 2px var(--accent);transform:scale(1.06);}
  .swatch.active::after{content:'';position:absolute;left:50%;top:46%;width:7px;height:12px;
    border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;
    transform:translate(-50%,-55%) rotate(45deg);filter:drop-shadow(0 0 1.6px rgba(0,0,0,.6));}
  .swatch.light.active::after{border-color:#20303a;filter:none;}

  /* chips: selected (single-select) state */
  .chip.on{background:var(--accent);color:#fff;border-color:var(--accent);}
  .chip.on:hover{background:var(--accent-d);color:#fff;}
  .chip.holding{background:#1f2a30;color:#fff;border-color:#1f2a30;}

  /* threshold slider row with color swatch */
  .threshrow{display:flex;align-items:center;gap:8px;}
  .threshrow input[type=range]{flex:1;}

  /* utilities */
  .accent{color:var(--accent);}
  .note{margin-top:7px;}
  .mt-s{margin-top:8px;}
  .mt-m{margin-top:10px;}
  .mt-l{margin-top:12px;}

  /* ---- templates ---- */
  .tpl-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
  .tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
  .tpl-item{border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
    background:var(--panel);display:flex;flex-direction:column;text-align:left;padding:0;
    -webkit-tap-highlight-color:transparent;transition:border-color .15s,box-shadow .15s,transform .1s;}
  .tpl-item:hover{border-color:var(--accent);box-shadow:var(--shadow);}
  .tpl-item:active{transform:scale(.97);}
  .tpl-thumb{width:100%;aspect-ratio:4/5;background:#eef3f4 center/cover no-repeat;display:grid;place-items:center;color:var(--sub);}
  .tpl-thumb svg{width:40%;height:40%;opacity:.45;}
  .tpl-name{font-size:11.5px;font-weight:700;color:var(--ink);padding:6px 8px;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tpl-empty{font-size:12px;color:var(--sub);margin:2px 0 0;}

  /* ---- font picker ---- */
  .fontbtn{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
    font-family:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);
    border-radius:9px;background:#fbfdfd;color:var(--ink);cursor:pointer;text-align:left;
  }
  .fontbtn:hover{border-color:var(--accent);}
  .fontbtn .fb-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .fontbtn .fb-caret{color:var(--sub);font-size:11px;flex:0 0 auto;}
  .fp-overlay{position:fixed;inset:0;background:rgba(20,35,40,.4);display:none;z-index:100;}
  .fp-overlay.show{display:block;}
  .fp-panel{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(600px,94vw);max-height:80vh;background:var(--panel);border:1px solid var(--line);
    border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden;
  }
  .fp-head{padding:14px 14px 8px;border-bottom:1px solid var(--line);flex:0 0 auto;}
  .fp-head .fp-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .fp-head h3{margin:0;font-size:14px;font-weight:800;}
  .fp-close{border:0;background:#eef3f4;color:var(--ink);cursor:pointer;border-radius:8px;width:30px;height:30px;font-size:16px;line-height:1;}
  .fp-search-wrap{position:relative;}
  .fp-search{width:100%;font-family:inherit;font-size:14px;padding:9px 34px 9px 10px;border:1px solid var(--line);border-radius:9px;background:#fbfdfd;outline:none;box-sizing:border-box;}
  .fp-search:focus{border-color:var(--accent);}
  .fp-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:#eef3f4;color:var(--sub);cursor:pointer;border-radius:50%;width:22px;height:22px;font-size:13px;line-height:1;display:none;}
  .fp-search-wrap.has-q .fp-clear{display:block;}
  .fp-count{font-size:11px;color:var(--sub);padding:6px 2px 0;}
  /* wrap so every category chip is visible at once (req PC-b) instead of a
     single horizontally-scrolling row that hid the later categories */
  .fp-cats{display:flex;flex-wrap:wrap;gap:6px;padding:9px 0 2px;}
  .fp-cat{flex:0 0 auto;border:1px solid var(--line);background:#fbfdfd;border-radius:18px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap;}
  .fp-cat.on{background:var(--accent);color:#fff;border-color:var(--accent);}
  .fp-list{flex:1 1 auto;overflow-y:auto;padding:8px;-webkit-overflow-scrolling:touch;}
  .fp-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent;}
  .fp-item:hover{background:var(--brand-soft);}
  .fp-item.cur{background:var(--brand-soft);border-color:var(--accent);}
  .fp-item .fp-prev{font-size:21px;line-height:1.15;color:var(--ink);}
  .fp-item .fp-lab{font-size:11px;color:var(--sub);}
  .fp-item.cur .fp-lab::after{content:'　使用中';color:var(--accent-d);font-weight:800;}
  .fp-sec{font-size:10.5px;font-weight:800;color:var(--sub);letter-spacing:.04em;padding:8px 6px 3px;text-transform:uppercase;}
  .fp-empty{text-align:center;color:var(--sub);font-size:12.5px;padding:24px 0;}

  /* ---- effects UI ---- */
  .fxtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;}
  .fxtab{border:1px solid var(--line);background:#fbfdfd;border-radius:18px;padding:7px 11px;cursor:pointer;font-size:12px;font-weight:700;color:var(--sub);transition:.12s;}
  .fxtab:hover{border-color:var(--accent);color:var(--accent-d);}
  .fxtab.on{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 2px rgba(230,0,18,.18);}
  .fxstate{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap;}
  .fxbadge{font-size:11.5px;font-weight:800;color:var(--sub);background:#eef3f4;border-radius:14px;padding:4px 11px;}
  .fxbadge.act{color:#fff;background:var(--accent);}
  .fxreset-chip{font-size:11px;padding:4px 10px;}
  .fxbody{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fbfdfd;}
  .fxbody.hidden{display:none;}
  .fxnote{font-size:11px;color:var(--sub);line-height:1.5;margin-top:7px;}

  /* toast */
  /* [tidy0902] SPではトーストを下に出して、上部の情報と重ならないようにする */
  @media (max-width:820px){
    .toast{top:auto !important;bottom:calc(var(--sheet-vis,72px) + 16px + env(safe-area-inset-bottom));}
  }
  .toast{
    position:fixed;left:50%;top:70px;transform:translateX(-50%);
    background:var(--ink);color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;
    z-index:120;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .2s;opacity:0;pointer-events:none;
  }
  .toast.show{opacity:1;}
  /* 取り消し付きトースト（削除など、確認ダイアログを出さない操作の受け皿） */
  .toast.has-act{pointer-events:auto;display:flex;align-items:center;gap:14px;}
  .toast .t-act{border:0;background:transparent;color:#8fd8ff;font-family:inherit;font-size:13px;
    font-weight:800;cursor:pointer;padding:6px 2px;min-height:32px;}
  .label-mb{display:none;}          /* スマホだけに出る短縮ラベル（P0-4） */
  /* 上級者向けの折りたたみ（デザインキー等） */
  .adv-fold{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;}
  .adv-fold>summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--sub);
    list-style:none;padding:6px 0;-webkit-tap-highlight-color:transparent;}
  .adv-fold>summary::-webkit-details-marker{display:none;}
  .adv-fold>summary::before{content:'▸ ';}
  .adv-fold[open]>summary::before{content:'▾ ';}
  .save-lead{font-size:12.5px;line-height:1.7;color:var(--sub);margin:0 0 12px;}
  .code-result{background:var(--brand-soft,#fbecec);border:1px solid var(--accent);border-radius:12px;padding:12px 14px;}
  .code-badge{font-family:'Oswald','Bebas Neue',monospace;font-size:30px;font-weight:700;letter-spacing:.14em;color:var(--accent-d);
    text-align:center;padding:8px 0 4px;user-select:all;-webkit-user-select:all;}
  #codeInput.bad{border-color:var(--accent);box-shadow:0 0 0 2px rgba(226,35,26,.15);}

  /* P0-4：タップ目標44pxは「画面幅」ではなく「指かどうか」で決まる。タブレット
     （820pxより広いのに指で操作する）を取りこぼさないよう pointer:coarse でも
     同じ寸法を当てる。マウスのPCには影響しない。 */
  @media (pointer:coarse){
    header .icobtn{width:44px;height:44px;}
    header .btn{height:44px;}
    .zoombar button{width:44px;height:44px;}
    .zoombar .zlabel{min-width:52px;}
    .obj-act{min-width:44px;min-height:44px;}
    .sheet-close,.fp-close{width:44px;height:44px;}
    .layer button{width:40px;height:40px;}
    .die-seg button{padding:11px 13px;}
    .swatch{width:38px;height:38px;}
    .card>h3{padding-top:11px;padding-bottom:11px;}
    .prodcat-tab{padding:11px 14px;}
  }

  /* The bottom sheet is NON-MODAL (UX research: MD3 / NN-g / iOS HIG advise
     against an always-on scrim). The canvas stays fully interactive while the
     sheet is open, so the scrim is removed entirely. */
  .sheet-scrim{display:none !important;}

  @media (max-width:820px){
    main{flex-direction:column;}
    /* Reserve the sheet's CURRENT visible height (--sheet-vis, set per snap by
       JS) as bottom padding, so the canvas is always laid out ABOVE the sheet.
       fitCanvas() re-fits on every snap → the design is never covered (req #4). */
    .stage{order:1;padding:8px 8px calc(var(--sheet-vis,72px) + 8px + env(safe-area-inset-bottom));flex:1 1 auto;min-height:0;}
    .canvas-wrap{max-width:min(92vw,440px);}
    .brand small{display:none;}
    .brand .logo{height:24px;}
    .brand>span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    /* M-5: 390px ではタイトル(157px)が入る幅が71pxしかなく、ボタンの下へ潜って
       「デザインシ…」と切れていた。ロゴだけでブランドは伝わるので文字は畳む。
       空いた幅ぶんヘッダーの折返しも減り、キャンバスの縦も稼げる。 */
    .brand-name{display:none;}
    .head-actions{gap:3px;}
    .head-actions .label-pc{display:none;}
    .btn{padding:9px 10px;}
    /* P0-4：スマホでも主要CTAが何のボタンか分かるように短縮ラベルを出す。
       アイコンとの併記だとヘッダーが1行増えてキャンバスを圧迫するので、
       スマホではアイコンを畳んで文字だけにする（高さは従来どおり）。 */
    .head-actions .label-mb{display:inline;font-size:11.5px;font-weight:800;}
    header .btn{height:44px;padding:9px 12px;}
    header .btn svg{display:none;}
    .viewtoggle .vt svg{display:none;}
    /* P0-4：タップ目標44px（Undo/Redo・ズーム・選択ツールバー・各種閉じる） */
    header .icobtn{width:44px;height:44px;}
    .zoombar button{width:44px;height:44px;}
    .zoombar .zlabel{min-width:52px;}
    .brandtoggle{padding:2px;}
    .brandtoggle .bt{padding:6px 9px;font-size:11px;}
    .brand-logo-text b{font-size:15px;}

    /* ---- bottom sheet (3-stage snap: peek / mid / full) ----
       Height is CONTENT-driven (head + a fixed-height scrollable body) and the
       whole sheet is slid down by --sheet-off to reveal only the current snap's
       worth. The body keeps a fixed height (--sheet-bodyh) so its top slice acts
       as a scroll viewport → effects/lists scroll IN the sheet without making it
       taller. JS re-fits the canvas per snap (reserving --sheet-vis as stage
       padding) so the design never gets covered (req #4). */
    .tools{
      order:2;position:fixed;left:0;right:0;bottom:0;z-index:50;width:100%;
      max-height:var(--sheet-full,82vh);
      border-right:0;border-top:1px solid var(--line);
      border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(20,40,50,.16);
      padding:0;gap:0;overflow:hidden;display:flex;flex-direction:column;
      transform:translateY(var(--sheet-off,100%));
      transition:transform .3s cubic-bezier(.32,.72,0,1);
      will-change:transform,bottom;
    }
    /* keyboard tracking moves `bottom` directly each visualViewport frame; a CSS
       transition on it would lag behind the keyboard and cause the judder the
       user reported (req 4a) — so `bottom` is intentionally NOT transitioned. */
    /* sheet head = drag grip + close button + tab bar */
    .sheet-head{display:block;position:relative;flex:0 0 auto;background:var(--panel);border-radius:18px 18px 0 0;
      touch-action:none;user-select:none;-webkit-user-select:none;}
    .sheet-grip{width:40px;height:4px;border-radius:3px;background:#cfd9dc;margin:8px auto 4px;cursor:grab;}
    /* explicit close so users aren't forced to discover the swipe gesture */
    .sheet-close{display:none;position:absolute;top:2px;right:4px;z-index:2;width:44px;height:44px;
      border:0;background:#eef3f4;border-radius:50%;align-items:center;justify-content:center;
      color:var(--ink-3,#5a6b72);cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .sheet-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;}
    body.sheet-open .sheet-close{display:flex;}   /* only meaningful when the sheet is up */
    /* C-3: ×(ツールを閉じる)は絶対配置でタブ列の右上に重なっており、
       「レイヤー」タブ(幅64px)の44pxぶんを覆って押せなくなっていた
       （中央をタップすると×が反応してシートが閉じる）。
       タブ列の右側に×ぶんの余白を確保して、当たり判定を完全に分離する。 */
    .mtabs{display:flex;gap:0;padding:0 52px calc(2px + env(safe-area-inset-bottom)) 4px;}
    .mtab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
      border:0;background:transparent;border-radius:12px;padding:6px 1px 7px;cursor:pointer;
      font-size:11px;font-weight:700;color:var(--sub);position:relative;line-height:1;
      -webkit-tap-highlight-color:transparent;transition:color .15s,transform .1s;}
    .mtab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;
      stroke-linecap:round;stroke-linejoin:round;display:block;}
    .mtab .mlab{white-space:nowrap;}
    .mtab:active{transform:scale(.92);}
    .mtab.active{color:var(--accent);}
    .mtab.active::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
      width:24px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);}
    .sheet-body{flex:0 0 auto;height:var(--sheet-bodyh,300px);overflow-y:auto;padding:8px 12px 18px;gap:10px;-webkit-overflow-scrolling:touch;}
    .tools .card{display:none;border:0;border-radius:0;padding:4px 0;}
    .tools .card.m-active{display:block;}
    .panel-tools{display:none;}   /* スマホはタブで切り替わるので一括開閉は出さない */
    .card>h3{padding:11px 20px 11px 0;}   /* 開閉見出しもタップ目標44px相当に */
    .tools .card.hidden{display:none !important;}

    /* Floating context toolbar (案C): JS positions it just above (or below, when
       near the top) the SELECTED object so it never covers the design or the
       layer list, and it's hidden while the object is being moved/scaled so it
       never steals the touch (req 4c/6a/6b). Compact, single row. */
    /* 森さんFB 2026-08-25: オブジェクトの近くに出すとデザインやボタンに被るので、
       ヘッダー直下の上部固定バーに変更（情報も上に集まって見やすい）。横は必要ならスクロール */
    /* [tidy0902] ヘッダー・タブと重ならない位置へ（森さんFB 2026-09-02「情報が重なりすぎ」） */
    .objbar{top:calc(var(--head-h,56px) + 6px);left:8px;right:8px;bottom:auto;transform:none;padding:3px;gap:1px;
      flex-wrap:nowrap;max-width:none;overflow-x:auto;-webkit-overflow-scrolling:touch;
      justify-content:flex-start;transition:opacity .12s ease;}
    .obj-act{min-width:0;width:44px;min-height:44px;padding:8px 3px;}
    .obj-act svg{width:20px;height:20px;}
    /* F-5 / M-8: スマホでは 8px のラベルは読めないうえ、バーが縦に育って
       商品プレビューを余計に覆う。ラベルは畳んでアイコンのみにし、
       名称は title / aria-label（読み上げ・長押し）で担保する。 */
    .obj-act small{display:none;}
    .objbar.manip{opacity:0;pointer-events:none;}   /* hidden during drag/scale/rotate */
    /* F-5: ズームバーは幅206pxの帯として商品プレビューの真上に居座っていた。
       スマホは倍率の数字より操作が大事なので % ラベルを畳んでコンパクトにし、
       要素の選択中は操作バーに主役を譲って隠す（拡縮はピンチでも可能）。 */
    .zoombar{top:56px;bottom:auto;right:8px;padding:3px;gap:2px;opacity:.94;}
    .zoombar .zlabel{display:none;}
    body.has-sel .zoombar{display:none;}

    /* ---- text-compose mode: a big, distraction-free input above the keyboard
       (req 9). When a sheet text field is focused we hide everything except the
       active card's input so the user can type comfortably, and the objbar is
       hidden so the alignment popover never sits over the field (req 4a). ---- */
    body.text-compose .objbar{display:none !important;}
    body.text-compose .sheet-grip{display:none;}
    body.text-compose #txtInput{min-height:104px;font-size:16px;line-height:1.5;}
    body.text-compose .compose-hint{display:block;}

    /* ---- font picker as a bottom sheet that leaves the canvas visible so the
       live preview is seen the instant a font is tapped (req 5a). ---- */
    .fp-overlay{background:rgba(15,30,35,.18);}
    .fp-panel{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:46vh;
      border-radius:16px 16px 0 0;}
    .fp-list{padding-bottom:14px;}

    /* finger-friendly tap targets */
    .swatch{width:38px;height:38px;}
    .prod-btn .pb-thumb{height:64px;}
    .prodcat-tab{padding:11px 14px;font-size:12px;}
    .shape-btn svg{width:28px;height:28px;}
    .chip{padding:10px 14px;font-size:13px;}
    .facetab{padding:12px;font-size:14px;}
    .preset-btn{padding:13px 8px;font-size:13px;}
    .layer{padding:11px 10px;}
    .layer button{width:40px;height:40px;}
    .fp-close{width:44px;height:44px;font-size:20px;}
    .die-seg button{padding:11px 13px;}
    .die-panel .btn-xs{padding:11px 13px;}
    .layer button svg{width:18px;height:18px;}

    /* prevent page scroll/zoom while manipulating the canvas */
    .canvas-wrap,canvas{touch-action:none;}
    /* the verbose hint (incl. desktop-only Ctrl/Alt wheel tip) wastes vertical
       space on phones and could tuck under the sheet at "full" — the dashed
       print-area guide already conveys the key info, so hide it on mobile. */
    .stage-hint{display:none;}
  }

  /* ===== アクセシビリティ：モーション低減 / 印刷時はアニメ無効・要素は消さない ===== */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important;}
  }
  @media print{
    *,*::before,*::after{animation:none!important;}
  }
  ::selection{background:var(--red);color:#fff;}

  /* ===== Export dropdown (PNG/JPG/SVG/PDF) ===== */
  .exp-wrap{position:relative;display:inline-flex;}
  .exp-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:172px;background:var(--panel,#fff);
    border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow,0 8px 28px rgba(0,0,0,.16));
    padding:5px;z-index:60;display:none;}
  .exp-menu.show{display:block;}
  .exp-menu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;cursor:pointer;
    padding:9px 11px;border-radius:8px;font-size:13px;font-family:inherit;color:var(--ink);text-align:left;font-weight:600;}
  .exp-menu button:hover{background:#eef3f4;}
  .exp-menu button small{margin-left:auto;color:var(--sub);font-weight:500;font-size:11.5px;}
  .exp-menu .exp-ico{width:15px;height:15px;flex:0 0 auto;color:var(--accent,#E60012);}
  .exp-sep{height:1px;background:var(--line);margin:5px 4px;}
  /* P0-7：既定は「画像を保存」1本。専門的な形式は畳んでおく */
  .exp-menu .exp-more{color:var(--sub);font-size:12px;font-weight:700;}
  .exp-extra.hidden{display:none;}
  .exp-extra{border-top:1px dashed var(--line);margin-top:4px;padding-top:4px;}

  /* ===== Proof (入稿データ) modal ===== */
  .modal.modal-wide{max-width:560px;}
  .proof-settings{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
  .proof-tag{font-size:11.5px;font-weight:700;color:var(--accent-d,#B3000E);background:var(--brand-soft);
    border-radius:999px;padding:4px 11px;}
  .proof-face{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;}
  .proof-face h4{margin:0 0 4px;font-size:13.5px;color:var(--ink);}
  .proof-face .dim{font-size:11.5px;color:var(--sub);margin:0 0 9px;}
  .proof-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
  .proof-prev{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;}
  .proof-prev img{width:84px;height:auto;border-radius:6px;border:1px solid var(--line);background:#eef3f4;}
  .proof-prev .meta{flex:1 1 0;min-width:0;}
  .proof-prev .meta p{margin:0 0 6px;}
  .btn-xs{padding:7px 12px;font-size:12px;}

  /* ===== AI 図案生成パネル ===== */
  .ai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px;}
  .ai-grid.hidden{display:none;}
  .ai-cand{border:1.5px solid var(--line);border-radius:11px;overflow:hidden;cursor:pointer;background:#fff;
    padding:0;aspect-ratio:1;display:block;transition:border-color .14s,box-shadow .14s,transform .1s;-webkit-tap-highlight-color:transparent;}
  .ai-cand:hover{border-color:var(--accent);box-shadow:var(--shadow);}
  .ai-cand:active{transform:scale(.97);}
  .ai-cand.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
  .ai-cand svg{display:block;width:100%;height:100%;}
  .ai-skel{aspect-ratio:1;border-radius:11px;background:linear-gradient(100deg,var(--bg-3) 30%,var(--bg-2) 50%,var(--bg-3) 70%);
    background-size:200% 100%;animation:ai-shimmer 1.2s linear infinite;}
  @keyframes ai-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
  .ai-note{line-height:1.6;margin-top:8px;}
  .ai-note.hidden,.ai-cand.hidden,#aiImport.hidden{display:none;}
  #aiImport.hidden{display:none;}

  /* ===== 森工業：サイズ／厚みコンフィギュレータ ===== */
  .mmreadout{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap;}
  .mmfield{flex:1 1 0;min-width:70px;border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:#fbfdfd;text-align:center;}
  .mmfield label{display:block;font-size:10px;font-weight:700;color:var(--sub);letter-spacing:.04em;margin-bottom:2px;}
  .mmfield .v{font-family:var(--font-display);font-size:19px;line-height:1;color:var(--data);}
  .mmfield .v small{font-family:var(--font-jp);font-size:10px;color:var(--sub);margin-left:2px;}
  .mmx{font-weight:800;color:var(--sub);}

  /* ===== 見積サマリ（3Dサムネ＋仕様）===== */
  .quote-summary{display:flex;gap:14px;align-items:center;text-align:left;border:1px solid var(--line);
    border-radius:var(--radius-lg,8px);padding:12px;margin:0 0 16px;background:var(--bg-2);}
  .quote-summary img{width:96px;height:96px;object-fit:contain;border-radius:8px;border:1px solid var(--line);
    background:#fff center/contain no-repeat;flex:0 0 auto;}
  .quote-summary img:not([src]),.quote-summary img[src=""]{display:none;}
  .quote-spec{list-style:none;margin:0;padding:0;flex:1 1 0;min-width:0;font-size:12.5px;}
  .quote-spec li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--hair-soft);}
  .quote-spec li:last-child{border-bottom:0;}
  .quote-spec .k{color:var(--sub);font-weight:700;flex:0 0 auto;}
  .quote-spec .v{color:var(--ink);font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .quote-spec .v.badge{color:var(--data);}

  /* ===== 2D / 3D 切替トグル（黒バー上） ===== */
  .viewtoggle{display:inline-flex;flex:0 0 auto;border:1px solid rgba(255,255,255,.22);
    border-radius:var(--radius-pill,999px);overflow:hidden;margin-right:2px;}
  .viewtoggle .vt{border:0;background:transparent;cursor:pointer;font-family:inherit;font-weight:800;
    font-size:12px;color:rgba(255,255,255,.7);padding:7px 13px;display:inline-flex;align-items:center;gap:5px;
    line-height:1;transition:background .15s,color .15s;}
  .viewtoggle .vt svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;}
  .viewtoggle .vt.on{background:var(--red);color:#fff;}

  /* ===== 3D プレビュー・ステージ（共通機能：Three.js テクスチャ投影） ===== */
  /* 2D編集ステージと同じ「ニュートラルなドット地」に統一（青みのある地は使わない） */
  .stage3d{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;
    background:radial-gradient(circle at 1px 1px,rgba(0,0,0,.05) 1px,transparent 0) 0 0/22px 22px,var(--bg-2);}
  .stage3d.show{display:flex;}
  .s3d-mount{flex:1 1 auto;min-height:0;position:relative;touch-action:none;cursor:grab;}
  .s3d-mount:active{cursor:grabbing;}
  .s3d-mount canvas{display:block;width:100%;height:100%;}
  .s3d-fail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;color:var(--ink-3);text-align:center;padding:24px;font-weight:700;}
  .s3d-fail small{font-size:12px;color:var(--ink-4);font-weight:400;}
  .s3d-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--ink-3);font-size:13px;font-weight:700;}
  .s3d-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:10px 12px;pointer-events:none;}
  .s3d-bar>*{pointer-events:auto;}
  .s3d-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11.5px;color:var(--ink-3);
    background:rgba(255,255,255,.72);border:1px solid var(--hair-soft);border-radius:999px;padding:4px 13px;pointer-events:none;}
  .s3d-panel{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);}
  .s3d-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .s3d-group>.lbl{font-size:11px;font-weight:800;color:var(--sub);letter-spacing:.02em;}
  .s3d-chip{border:1px solid var(--line);background:#fbfdfd;border-radius:999px;padding:6px 12px;cursor:pointer;
    font-size:12px;font-weight:700;color:var(--sub);transition:.12s;-webkit-tap-highlight-color:transparent;}
  .s3d-chip:hover{border-color:var(--accent);color:var(--accent-d);}
  .s3d-chip.on{background:var(--accent);color:#fff;border-color:var(--accent);}
  .s3d-panel .spacer{flex:1 1 auto;}
  @media (max-width:820px){
    .s3d-panel{gap:6px 10px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));}
    .s3d-group>.lbl{display:none;}
    .s3d-chip{padding:7px 11px;}
    .s3d-hint{bottom:10px;}
  }

  /* ===== スマートモックアップ・ステージ（2D合成：缶バッジ等） =====
     .stage3d / .s3d-* を土台ごと再利用し、差分だけをここに置く。
     3Dと違い回転しないので mount は「画像を中央に置く額縁」。 */
  .mk-mount{cursor:default;display:flex;align-items:center;justify-content:center;padding:16px 16px 30px;}
  .mk-mount:active{cursor:default;}
  .mk-mount img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
    border-radius:6px;box-shadow:0 6px 26px rgba(16,24,34,.10);}
  .mk-mount img.alpha{background:
    conic-gradient(from 90deg,#fff 0 25%,#ededea 0 50%,#fff 0 75%,#ededea 0) 0 0/18px 18px;}

  /* ===== 入稿データ変換ステージ（ダイカット系） ===== */
  .die-mount{cursor:default;display:flex;align-items:center;justify-content:center;padding:12px;position:relative;}
  .die-mount:active{cursor:default;}
  /* 作業面は「白い商品」なので、地に溶けないよう薄い縁取り＋落ち影で浮かせる */
  .die-canvas-wrap{position:relative;max-width:100%;max-height:100%;border-radius:8px;overflow:hidden;
    box-shadow:0 8px 22px rgba(18,26,36,.22), 0 0 0 1px rgba(20,28,38,.16);
    background:conic-gradient(from 90deg,#fff 0 25%,#ededea 0 50%,#fff 0 75%,#ededea 0) 0 0/18px 18px;}
  .die-canvas-wrap canvas{display:block;max-width:100%;max-height:calc(100vh - 220px);touch-action:none;}
  .die-canvas-wrap.brush canvas{cursor:crosshair;}
  .die-drop{position:absolute;inset:16px;border:2px dashed rgba(20,28,38,.30);border-radius:14px;display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#6b7076;background:rgba(255,255,255,.86);
    text-align:center;padding:20px;font-weight:700;font-size:14px;}
  .die-drop.hide{display:none;}
  /* [diedrop0902] 画像が無いとき #dieWrap はキャンバス(10×10px)の大きさしかなく、
     inset:16px のドロップ枠が 44×44px の小さな丸に潰れて「画像を選ぶ」が押せなかった（森さんFB 2026-09-02） */
  .die-canvas-wrap.empty{width:min(560px,86vw);height:min(400px,60vh);}
  .die-canvas-wrap.empty canvas{position:absolute;left:0;top:0;opacity:0;}
  .die-drop small{font-weight:400;font-size:12px;color:#8a8f94;}
  /* M-15: この画面でやることは「画像を選ぶ」の1つだけなのに、
     1440×787の余白の中央にボタンが84×31pxしかなく見つけにくかった。 */
  .die-drop .btn{pointer-events:auto;font-size:14.5px;padding:13px 26px;border-radius:10px;}
  .die-panel{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);
    max-height:44vh;overflow-y:auto;}
  .die-grp{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .die-grp>.lbl{font-size:11px;font-weight:800;color:var(--sub);letter-spacing:.02em;}
  .die-sld{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sub);font-weight:700;}
  .die-sld input[type=range]{width:96px;}
  .die-sld .val{min-width:38px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;}
  .die-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
  .die-seg button{border:0;background:#fbfdfd;cursor:pointer;font-family:inherit;font-weight:700;font-size:12px;
    color:var(--sub);padding:6px 11px;-webkit-tap-highlight-color:transparent;}
  .die-seg button.on{background:var(--accent);color:#fff;}
  .die-sep-v{width:1px;align-self:stretch;background:var(--line);margin:0 2px;}
  .die-panel .spacer{flex:1 1 auto;}
  .die-grp.hidden{display:none;}
  /* 詳細行（既定は畳む）。パネル幅いっぱいの1行として折り返す */
  .die-adv{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
    padding-top:9px;margin-top:2px;border-top:1px dashed var(--line);}
  .die-adv.hidden{display:none;}
  .die-canvas-wrap.hole canvas{cursor:copy;}
  /* 実効解像度・穴の可否などの入稿チェック表示 */
  .die-info{font-size:11px;font-weight:700;color:var(--sub);line-height:1.5;max-width:340px;}
  .die-info b{color:var(--ink);}
  /* カッティングシートのシート色 */
  .die-vinyl{display:flex;gap:5px;flex-wrap:wrap;}
  .die-vinyl button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;
    box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;transition:.12s;}
  .die-vinyl button.on{box-shadow:0 0 0 2px var(--accent);transform:scale(1.08);}
  .die-info .ng{color:#c0392b;}
  .die-info .ok{color:#1f7a5a;}
  @media (max-width:820px){
    .die-panel{gap:6px 10px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));}
    .die-grp>.lbl{font-size:10px;}
    .die-sld input[type=range]{width:74px;}
  }