/* ============================================================
 * コードジェネレーター
 * 1画面完結・スクロールなし (PC / モバイル対応)
 * ========================================================== */
:root {
  /* ニューモーフィズム: メイン=灰色、サブ=白、アクセント=オレンジ。
     カード類は背景と同色にし、二方向シャドウ (--shadow-light/--shadow-dark)
     の陰影だけで凹凸を表現する (--neu-* 参照)。ライト/ダークは [data-theme]
     属性で手動切り替え (#theme-toggle-btn、app.js 側で localStorage に保存)。
     属性が無い場合は端末の prefers-color-scheme に従う。 */
  --bg: #e7eaee;
  --surface: #e7eaee;
  --surface-white: #ffffff;  /* サブカラー: 押し込み面 (入力欄・凹面) の下地 */
  --text: #33373d;
  --text-sub: #767d87;
  --border: #d4d9df;
  --accent: #ef8033;         /* QR 系 */
  --accent-weak: #fce3cd;
  --accent2: #d9731f;        /* 二次元コード (QR 以外) */
  --accent2-weak: #f6dcc0;
  --accent3: #b85c1a;        /* 一次元コード */
  --accent3-weak: #f0d5b8;
  --danger: #c0392b;
  --radius: 14px;
  --shadow-dark: #b7bdc6;
  --shadow-light: #ffffff;
  --neu-raised: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
  --neu-raised-sm: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
  --neu-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  --neu-inset-sm: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
  /* Apple 流モーションの共通イージング (Designing Fluid Interfaces の
     critically damped spring を CSS で近似したもの)。押下フィードバックは
     ~100ms、通常の状態遷移は ~200ms を目安とする。 */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --press-scale: 0.96;
  /* 左右メニューゾーンの幅。左右対称を保つため両ゾーンともこの1変数を参照する。
     app.js の updateSideMenuWidth() が縦のはみ出しを検知すると .site-body に
     side-menus-wide を付与し、この変数自体を広い値に上書きする (下記参照)。 */
  --side-menu-width: 200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #3c4149; --surface: #3c4149; --surface-white: #484e57; --text: #eceef0; --text-sub: #9aa0a8; --border: #565c66; --accent: #f2954f; --accent-weak: #47331f; --accent2: #e08a3c; --accent2-weak: #3c2b18; --accent3: #d9731f; --accent3-weak: #362413; --danger: #e57368; --shadow-dark: #292d33; --shadow-light: #4c525c; }
  :root:not([data-theme="light"]) .seg-btn[aria-checked="true"],
  :root:not([data-theme="light"]) .tile[aria-checked="true"],
  :root:not([data-theme="light"]) .right-menu-tab-btn[aria-selected="true"],
  :root:not([data-theme="light"]) .left-mode-btn[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: none; }
  :root:not([data-theme="light"]) .other-standard .seg-btn[aria-checked="true"] { background: var(--accent2); color: #fff; box-shadow: none; }
  :root:not([data-theme="light"]) #ec-control .seg-btn[aria-checked="true"],
  :root:not([data-theme="light"]) #mask-control .seg-btn[aria-checked="true"],
  :root:not([data-theme="light"]) #split-mode-control .seg-btn[aria-checked="true"],
  :root:not([data-theme="light"]) #content-placement-control .seg-btn[aria-checked="true"],
  :root:not([data-theme="light"]) #version-control .seg-btn[aria-checked="true"],
  :root:not([data-theme="light"]) #version-control .tile[aria-checked="true"] { background: var(--accent); color: #fff; box-shadow: none; }
  :root:not([data-theme="light"]) #version-control .other-standard .seg-btn[aria-checked="true"] { background: var(--accent2); color: #fff; }
  :root:not([data-theme="light"]) .tile-fits-1, :root:not([data-theme="light"]) .tile-fits-1:hover:not(:disabled) { color: #3ecb79; }
  :root:not([data-theme="light"]) .tile-fits-2, :root:not([data-theme="light"]) .tile-fits-2:hover:not(:disabled) { color: #82c94a; }
  :root:not([data-theme="light"]) .tile-fits-3, :root:not([data-theme="light"]) .tile-fits-3:hover:not(:disabled) { color: #e0bc3a; }
  :root:not([data-theme="light"]) .tile-fits-4, :root:not([data-theme="light"]) .tile-fits-4:hover:not(:disabled) { color: #ef9a4e; }
  :root:not([data-theme="light"]) .tile-fits-5plus, :root:not([data-theme="light"]) .tile-fits-5plus:hover:not(:disabled) { color: #e57368; }
}
:root[data-theme="dark"] {
  --bg: #3c4149;
  --surface: #3c4149;
  --surface-white: #484e57;
  --text: #eceef0;
  --text-sub: #9aa0a8;
  --border: #565c66;
  --accent: #f2954f;
  --accent-weak: #47331f;
  --accent2: #e08a3c;
  --accent2-weak: #3c2b18;
  --accent3: #d9731f;
  --accent3-weak: #362413;
  --danger: #e57368;
  --shadow-dark: #292d33;
  --shadow-light: #4c525c;
}
/* ダークモードでは「濃い茶色背景+オレンジ文字」ではなく、選択中タブ/QR系
   タブ等 (.tab-group-qr など) と統一して「オレンジ背景+白文字」にする。
   --accent-weak 自体は他の用途 (諸元パネルの薄色背景など) にも使われて
   いるため、変数自体は変えずに該当セレクタだけ上書きする。 */
:root[data-theme="dark"] .seg-btn[aria-checked="true"],
:root[data-theme="dark"] .tile[aria-checked="true"],
:root[data-theme="dark"] .right-menu-tab-btn[aria-selected="true"],
:root[data-theme="dark"] .left-mode-btn[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .other-standard .seg-btn[aria-checked="true"] { background: var(--accent2); color: #fff; box-shadow: none; }
:root[data-theme="dark"] #ec-control .seg-btn[aria-checked="true"],
:root[data-theme="dark"] #mask-control .seg-btn[aria-checked="true"],
:root[data-theme="dark"] #split-mode-control .seg-btn[aria-checked="true"],
:root[data-theme="dark"] #content-placement-control .seg-btn[aria-checked="true"],
:root[data-theme="dark"] #version-control .seg-btn[aria-checked="true"],
:root[data-theme="dark"] #version-control .tile[aria-checked="true"] { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-theme="dark"] #version-control .other-standard .seg-btn[aria-checked="true"] { background: var(--accent2); color: #fff; }
/* コード数の色分けもダークモードではやや明るい色に差し替えてコントラストを確保する */
:root[data-theme="dark"] .tile-fits-1, :root[data-theme="dark"] .tile-fits-1:hover:not(:disabled) { color: #3ecb79; }
:root[data-theme="dark"] .tile-fits-2, :root[data-theme="dark"] .tile-fits-2:hover:not(:disabled) { color: #82c94a; }
:root[data-theme="dark"] .tile-fits-3, :root[data-theme="dark"] .tile-fits-3:hover:not(:disabled) { color: #e0bc3a; }
:root[data-theme="dark"] .tile-fits-4, :root[data-theme="dark"] .tile-fits-4:hover:not(:disabled) { color: #ef9a4e; }
:root[data-theme="dark"] .tile-fits-5plus, :root[data-theme="dark"] .tile-fits-5plus:hover:not(:disabled) { color: #e57368; }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- モーション基盤 (apple-design) ----------
   ボタン類は pointer-down の瞬間に縮む即時フィードバック (:active) を返し、
   離すと spring 風イージングで戻る。transform / opacity のみをアニメーション
   させ、コンポジタで処理できるようにする。色・影の遷移は控えめな 150ms。 */
.seg-btn, .tab, .tile, .small-button, .left-mode-btn, .right-menu-tab-btn,
.quick-combo-btn, .quick-combo-option {
  transition:
    transform 220ms var(--ease-spring),
    color 150ms ease-out,
    background-color 150ms ease-out,
    box-shadow 150ms ease-out;
  will-change: transform;
}
.seg-btn:active:not(:disabled), .tab:active, .tile:active:not(:disabled),
.small-button:active, .left-mode-btn:active, .right-menu-tab-btn:active,
.quick-combo-btn:active, .quick-combo-option:active {
  transform: scale(var(--press-scale));
  transition-duration: 60ms; /* 押下は即時、復帰はゆっくり */
}

/* テーマ切替 (ライト/ダーク) の明度ジャンプを緩和する */
body { transition: background-color 250ms ease, color 250ms ease; }

/* display 指定を持つ要素でも hidden 属性を必ず優先する */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-optical-sizing: auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- 3分割レイアウト ---------- */
.site-body {
  display: flex;
  height: 100%;
  min-height: 0;
  max-width: 1000px;
  margin: 0 auto;
}
/* ---------- サイドメニュー幅の可変化 (デスクトップ限定) ----------
   規格の選択肢や設定項目が増え、左右メニューが縦に収まらずスクロール
   バーが出るケースが出てきたため、はみ出している場合だけ左右メニューを
   広げて2列組みにし、縦幅を圧縮する。判定・付け外しは app.js の
   updateSideMenuWidth() が行う (基準となる1カラム状態で scrollHeight を
   測ってから切り替える。参照: 同関数のコメント)。
   center-content-zone が窮屈にならないよう、site-body 自体の max-width も
   合わせて広げる。 */
.site-body.side-menus-wide {
  --side-menu-width: 380px;
  max-width: 1360px;
}

/* ---------- 左メニューゾーン ---------- */
.left-menu-zone {
  flex: 0 0 var(--side-menu-width);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-sub) 45%, transparent) transparent;
}
.left-menu-zone::-webkit-scrollbar { width: 6px; }
.left-menu-zone::-webkit-scrollbar-track { background: transparent; }
.left-menu-zone::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-sub) 45%, transparent);
  border-radius: 3px;
}
/* 拡張状態では左メニューのタブカードを2列組みにして縦幅を詰める。
   要素数が1個だけのグループ (PDF417・一次元バーコード) は半端に余白が
   残って不格好になるため、その場合だけ全幅に戻す */
.site-body.side-menus-wide .tab-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.site-body.side-menus-wide .tab-group > .tab:only-child {
  grid-column: 1 / -1;
}
.site-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-title-icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--text);
}
/* デスクトップではタイトルと簡易選択を素直に縦積みさせたいので透過させ、
   モバイルのみ1行にまとめる (下の @media 参照) */
.mobile-top-bar { display: contents; }
/* モバイル幅でのみ表示する簡易選択 (規格選択・デコード操作を折りたたみメニューに
   集約し縦幅を節約。デスクトップのリッチカードと見た目を揃えるため、単純な
   <select> ではなく自前のボタン+パネルで実装する) */
.mobile-quick-select { display: none; }
.quick-combo { position: relative; flex: 1; min-width: 0; }
.quick-combo-btn {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border: none;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--text);
  font: inherit;
  padding: 5px 6px;
  cursor: pointer;
  text-align: left;
}
.quick-combo-current {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.quick-combo-current strong,
.quick-combo-current .tab-rich-title {
  font-size: 12.5px;
  font-weight: 700;
}
.quick-combo-current strong,
.quick-combo-current .tab-rich-title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 折りたたみ時 (未展開) は横幅を節約するためタイトルのみ表示し、
   説明文は省略する (説明は展開したパネル側で確認できる) */
.quick-combo-current small,
.quick-combo-current .tab-rich-desc { display: none; }
.quick-combo-current .tab-rich-badge { width: 12px; height: 12px; }
.quick-combo-caret { flex: none; width: 9px; height: 6px; fill: var(--text-sub); }
.quick-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 30;
  /* ボタン自身の上端オフセット (概ね44px) を差し引き、画面下端を超えないようにする。
     以前は 480px の固定上限があり、縦幅の大きい端末でも選択肢が途中で
     見切れていたため、実際に使える高さいっぱいまで表示できるようにする */
  max-height: min(85vh, calc(100dvh - 56px));
  overflow-y: auto;
  overflow-x: hidden;
  /* 浮遊する大きめの面 = 半透明マテリアル (blur) + 深めの影で「厚み」を出す */
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: none;
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 呼び出し元 (トリガーボタン) から生えてくるように見せる。
     単なるフェードではなく scale も同時に動かして「マテリアルの到着」にする */
  transform-origin: top center;
  animation: combo-materialize 220ms var(--ease-spring);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-sub) 45%, transparent) transparent;
}
.quick-combo-panel::-webkit-scrollbar { width: 6px; }
.quick-combo-panel::-webkit-scrollbar-track { background: transparent; }
.quick-combo-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-sub) 45%, transparent);
  border-radius: 3px;
}
#standard-combo .quick-combo-panel { transform-origin: top left; }
#decode-combo .quick-combo-panel { transform-origin: top right; }
@keyframes combo-materialize {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.quick-combo-panel[hidden] { display: none; }
/* 折りたたみボタン自体は横並びの片側 (flex:1) の幅しかないため、展開時は
   中身 (アイコン・説明つきのリッチカード等) が崩れないよう約2倍の幅を確保する。
   はみ出す側は互いに逆方向へ広げ、画面端からあふれないようにする */
#standard-combo .quick-combo-panel { left: 0; width: 150%; }
#decode-combo .quick-combo-panel { right: 0; width: 300%; }
.quick-combo-option {
  border: none;
  background: var(--surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.quick-combo-option:hover { color: var(--accent); }
.quick-combo-note {
  font-size: 10px;
  color: var(--text-sub);
  line-height: 1.4;
}

/* エンコード/デコードの切替トグル (ニューモーフィズムの窪んだトラックに
   選択中の面だけ浮き出させる)。規格の選択肢が増えてデコード操作がスクロール
   しないと見えなくなっていたため、左メニューをタブで切り替えられるようにする */
.left-mode-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--neu-inset-sm);
}
.left-mode-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 0;
  border-radius: calc(var(--radius) - 5px);
  cursor: pointer;
}
.left-mode-btn[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--neu-raised-sm);
}
.decode-panel { display: flex; flex-direction: column; }

.tabs-vertical {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tab-category {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tab-category-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.06em;
  padding: 0 2px;
}
.tab-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-inset-sm);
  border-radius: var(--radius);
  padding: 3px;
}
.tab {
  border: none;
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.tab:hover:not([aria-selected="true"]) { color: var(--text); }
.tab-group-qr { --tab-accent: var(--accent); }
.tab-group-qr .tab[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: var(--neu-raised-sm); }
/* 二次元コード (QR 以外) は色を変えて分離 */
.tab-group-other { --tab-accent: var(--accent2); }
.tab-group-other .tab[aria-selected="true"] { background: var(--accent2); color: #fff; box-shadow: var(--neu-raised-sm); }
/* 一次元コードはさらに別の色で分離 */
.tab-group-barcode { --tab-accent: var(--accent3); }
.tab-group-barcode .tab[aria-selected="true"] { background: var(--accent3); color: #fff; box-shadow: var(--neu-raised-sm); }

/* QR系タブ: サブスクプラン風のリッチなカードボタン */
.tab-rich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 56px;
  padding: 8px 10px;
  white-space: normal;
}
.tab-rich-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tab-rich-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
}
.tab-rich-badge {
  flex: none;
  width: 13px;
  height: 13px;
  fill: var(--text-sub);
}
.tab-rich-desc {
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-sub);
}
.tab-rich-icon {
  flex: none;
  width: 32px;
  height: 32px;
  fill: var(--text-sub);
  opacity: 0.7;
}
.tab-rich[aria-selected="true"] .tab-rich-desc { color: rgba(255, 255, 255, 0.85); }
.tab-rich[aria-selected="true"] .tab-rich-badge { fill: #fff; }

/* アイコン内の「抜き」部分: 通常時はカード背景色、選択時はボタン背景 (アクセント色) に同化させて穴として見せる */
.icon-gap { fill: var(--surface); }
.tab-rich[aria-selected="true"] .icon-gap { fill: var(--tab-accent); }

/* ---------- 右メニューゾーン ---------- */
.right-menu-zone {
  flex: 0 0 var(--side-menu-width);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 14px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-sub) 45%, transparent) transparent;
}
.right-menu-zone::-webkit-scrollbar { width: 6px; }
.right-menu-zone::-webkit-scrollbar-track { background: transparent; }
.right-menu-zone::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-sub) 45%, transparent);
  border-radius: 3px;
}
/* モバイルのみタブで2枚に分ける (右メニューゾーンの縦幅節約用)。
   デスクトップでは display:contents で透過させ、従来通り .field が
   直接 .right-menu-zone の flex レイアウトに参加する */
.right-menu-tabs { display: none; }
.right-menu-panel { display: contents; }
/* 拡張状態では右メニューの各設定項目 (.field) を2列組みにする。ただし
   型番(複雑度)・分割方式・バーコード表示は選択肢が多く縦に長いため、
   半分幅にすると窮屈になるので全幅のまま残す */
.site-body.side-menus-wide .right-menu-zone {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 10px 16px;
}
.site-body.side-menus-wide #version-field,
.site-body.side-menus-wide #split-mode-field,
.site-body.side-menus-wide #barcode-text-field {
  grid-column: 1 / -1;
}

/* ---------- 中央コンテンツゾーン ---------- */
.center-content-zone.layout.preview {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 10px;
}

/* 中央中・中央下 */
.content-middle {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.04em;
}
.qr-frame {
  flex: 1;
  min-width: 0;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-bottom {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 10px;
  /* 規格によって表示項目数が変わっても QR 表示域の大きさが変化しないよう、
     全規格中で最大の高さ (QR: 分割方式・内容表示の行を含む) に固定する */
  min-height: 168px;
}

/* ---------- 入力コントロール ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.04em;
}

textarea {
  width: 100%;
  resize: none;
  border: none;
  border-radius: 10px;
  background: var(--surface-white);
  box-shadow: var(--neu-inset-sm);
  color: var(--text);
  font: inherit;
  padding: 7px 10px;
}
.data-input-wrap { position: relative; }
.data-input-wrap textarea { padding-right: 34px; }
.small-button.data-clear-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
textarea:focus, select:focus, input:focus-visible,
.seg-btn:focus-visible, .tab:focus-visible, .small-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.segmented-vertical {
  flex-direction: column;
  flex-wrap: nowrap;
}
.segmented-vertical .seg-btn {
  width: 100%;
}
.seg-category-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.06em;
  padding: 0 2px;
  margin: 4px 0 -2px;
}
.seg-category-label:first-child {
  margin-top: 0;
}
.seg-btn {
  border: none;
  background: var(--surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 3px 0;
  min-width: 42px;
  flex: 1 0 auto;
  border-radius: 7px;
  cursor: pointer;
}
.seg-btn[aria-checked="true"] {
  background: var(--accent-weak);
  box-shadow: var(--neu-inset-sm);
  color: var(--accent);
  font-weight: 700;
}
.other-standard .seg-btn[aria-checked="true"] {
  background: var(--accent2-weak);
  color: var(--accent2);
}
.seg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.seg-btn-full { flex: 1 0 100%; }
/* 縦並び (segmented-vertical) では主軸が縦になるため、flex-basis:100% のままだと
   このボタンだけコンテナの高さいっぱいに伸びてしまう。他のボタンと同じ高さに戻す */
.segmented-vertical .seg-btn-full { flex: 0 0 auto; }
.seg-note {
  font-size: 11px;
  color: var(--text-sub);
}

/* マスク選択: 「自動」を全幅、番号ボタンを等幅グリッドに */
.mask-grid { display: grid; gap: 8px; }
.mask-grid .seg-btn { min-width: 0; }
.mask-grid .seg-btn:first-child { grid-column: 1 / -1; }

.version-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 28px;
}
.auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
.auto-toggle input { accent-color: var(--accent); }

/* 配色プリセットのスウォッチ行。手動で色を選ばなくても、趣味のよい配色を
   1クリックで選べるようにするための行。色そのものは各スウォッチの
   インラインスタイル (プリセット由来) で表現し、CSS 側は形と選択状態だけを持つ。 */
.palette-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.palette-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.palette-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  box-shadow: var(--neu-raised-sm);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.palette-swatch-dot {
  width: 11px;
  height: 11px;
  margin: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.palette-swatch:hover { box-shadow: var(--neu-raised-sm), 0 0 0 2px var(--accent-weak); }
.palette-swatch[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: var(--neu-inset-sm);
}
/* サイコロ (ランダム配色) ボタン。トグルではなく都度実行されるアクションなので
   スウォッチとは見た目を変え (角丸の四角ではなく円形)、押すたび配色が変わる
   ことが直感的にわかるようにする。 */
.palette-random {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.palette-random:hover { color: var(--accent); }
.palette-random:active { box-shadow: var(--neu-inset-sm); }

.color-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.color-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 5px;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  cursor: pointer;
}
.color-item input[type="color"] {
  width: 30px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 5px;
  box-shadow: var(--neu-raised-sm);
  background: none;
  cursor: pointer;
}

.small-button {
  border: none;
  background: var(--surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  padding: 2px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.small-button:hover { color: var(--accent); }
.small-button:active { box-shadow: var(--neu-inset-sm); }

/* ---------- プレビュー ---------- */
.save-menu {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.qr-card {
  flex: none;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  background: var(--surface);
  box-shadow: var(--neu-inset);
  border-radius: var(--radius);
  overflow: hidden;
}
.edit-reset {
  position: absolute;
  top: 8px;
  right: 8px;
}
/* canvas は編集判定・画像生成の裏方に徹し、画面には出さない。実際に表示し、
   右クリック/長押しでの画像保存を可能にするのは #qr-image (canvas の内容を
   都度 toDataURL() で同期した普通の <img>)。 */
#qr-canvas { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#qr-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#qr-image.editable { cursor: crosshair; }
#scan-video {
  max-width: 100%;
  max-height: 100%;
}
.decode-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.decode-group .small-button { width: 100%; }
/* テーマ切り替えは常に絵文字アイコンのみの小さなトグルにする (デスクトップ/モバイル共通) */
#theme-toggle-btn {
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle-icon { display: inline; font-size: 15px; line-height: 1; }
#theme-toggle-btn .reset-all-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.scan-status {
  font-size: 11px;
  color: var(--text-sub);
}
.scan-status.error { color: var(--danger); font-weight: 600; }
.scan-note {
  font-size: 10px;
  color: var(--text-sub);
  line-height: 1.4;
}
.copy-status {
  font-size: 11px;
  color: var(--text-sub);
}
.copy-status.error { color: var(--danger); font-weight: 600; }
.qr-message {
  color: var(--danger);
  font-weight: 600;
  text-align: center;
  padding: 0 20px;
}

.info {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px 16px;
  background: var(--surface);
  border: none;
  box-shadow: var(--neu-inset-sm);
  border-radius: var(--radius);
  padding: 5px 14px;
  font-size: 12px;
  /* 規格によって項目数が変わっても QR 表示域の大きさが変化しないよう、
     最大2行ぶんの高さで固定する */
  height: 48px;
  overflow: hidden;
}
.info > div { display: flex; gap: 6px; white-space: nowrap; }
.info dt { color: var(--text-sub); }
.info dd { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 内容: 枠をはみ出さないよう改行させる (1行分で見切れるが overflow:hidden で崩れない) */
.info-content {
  flex: 1 0 100%;
  white-space: normal !important;
}
.info-content dd {
  min-width: 0;
  overflow-wrap: anywhere;
  max-height: 32px;
  line-height: 1.4;
  overflow: hidden;
}

/* ---------- 複雑度(型番)タイル選択 (クリック数を減らすため最初から選択肢を表示) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 6px;
}
.tile-grid .tile-full { grid-column: 1 / -1; }
.tile {
  border: none;
  background: var(--surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--text);
  font: inherit;
  font-size: 9px;
  font-weight: 600;
  padding: 4px 1px;
  border-radius: 5px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile:hover:not(:disabled) { color: var(--accent); }
/* 選択中のコード数によって色分けする (1個で収まる=緑 〜 5個以上必要=赤)。
   「型番を上げるほど分割数が減る」ことが一目でわかるようにするための指標で、
   アプリ本体のオレンジ系アクセントとは独立した信号色を使う。 */
.tile-fits-1 { color: #1f9d55; }
.tile-fits-2 { color: #4f9d1f; }
.tile-fits-3 { color: #b8960f; }
.tile-fits-4 { color: #d9731f; }
.tile-fits-5plus { color: #c0392b; }
.tile-fits-1:hover:not(:disabled) { color: #1f9d55; }
.tile-fits-2:hover:not(:disabled) { color: #4f9d1f; }
.tile-fits-3:hover:not(:disabled) { color: #b8960f; }
.tile-fits-4:hover:not(:disabled) { color: #d9731f; }
.tile-fits-5plus:hover:not(:disabled) { color: #c0392b; }
.tile[aria-checked="true"] {
  background: var(--accent-weak);
  box-shadow: var(--neu-inset-sm);
  color: var(--accent);
  font-weight: 700;
}
.tile:disabled { opacity: 0.4; cursor: not-allowed; }

/* 型番タイルの色分けが複数種類混在するときだけ表示する凡例。ドットの色は
   .tile-fits-N の文字色 (currentColor) をそのまま流用し、ライト/ダーク
   それぞれの色定義を二重管理しないようにする */
.tile-fits-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-sub);
}
.tile-fits-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tile-fits-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* rMQR: 高さ×幅の2次元タイル */
.tile-grid-2d {
  display: grid;
  gap: 4px;
  align-items: center;
}
.tile-grid-2d .tile-axis-label {
  font-size: 9px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-grid-2d .tile { font-size: 9px; padding: 3px 0; }
.tile-grid-2d .tile:disabled { visibility: hidden; opacity: 1; }

/* 誤り訂正・マスクパターン・容量超過時の分割方式・型番・コード下の内容表示は、
   複数の選択肢から1つだけ選ぶトグルUIであるため、左メニューのエンコード/
   デコード切替と統一感のある「窪んだトラック+選択中だけ浮き上がる」
   ニューモーフィズム表現にする (通常の .seg-btn/.tile は「常に浮き出て
   選択中だけ窪む」表現のままなので、他の用途 (規格タブ・保存範囲など) には
   影響しない) */
#ec-control, #mask-control, #split-mode-control, #content-placement-control,
#version-control .segmented, #version-control .tile-grid, #version-control .tile-grid-2d {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--neu-inset-sm);
  padding: 4px;
}
#ec-control .seg-btn, #mask-control .seg-btn, #split-mode-control .seg-btn,
#content-placement-control .seg-btn, #version-control .seg-btn, #version-control .tile {
  background: transparent;
  box-shadow: none;
}
#ec-control .seg-btn[aria-checked="true"], #mask-control .seg-btn[aria-checked="true"],
#split-mode-control .seg-btn[aria-checked="true"], #content-placement-control .seg-btn[aria-checked="true"],
#version-control .seg-btn[aria-checked="true"], #version-control .tile[aria-checked="true"] {
  background: var(--surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--accent);
}
#version-control .other-standard .seg-btn[aria-checked="true"] { color: var(--accent2); }

/* ---------- モバイル ----------
   デスクトップは3ゾーンを横並び・site-body 内スクロールで「1画面完結」を
   狙うが、モバイル幅ではその前提が成立しないため、上から
   左メニュー(規格選択)→中央(データ入力・コード表示)→右メニュー(詳細設定)
   の縦1カラムに組み替え、ページ全体を素直に縦スクロールさせる。
   app.js の MOBILE_MAX_WIDTH_PX と同期 */
@media (max-width: 760px) {
  body { font-size: 13px; }
  .site-body {
    flex-direction: column;
    height: auto;
    /* コンテンツが少ない場合でもスマホ画面の縦幅いっぱいまでは必ず確保する。
       100% だとコンテンツが短いときにサイト自体の高さも縮み、規格選択・
       デコードのプルダウンパネルがその短い高さでクリップされて見切れて
       いたため、常にビューポート高さ (100dvh) を最低保証する */
    min-height: 100dvh;
    overflow-y: visible;
  }
  html, body { height: auto; min-height: 100dvh; overflow-y: auto; }

  /* side-menus-wide はデスクトップ限定の状態のはずだが、リサイズ中に JS の
     判定が追いつく前の一瞬だけこの幅で入り込む可能性があるため、念のため
     モバイル側でも明示的に打ち消しておく (拡張幅・2列グリッド化を無効化) */
  .site-body.side-menus-wide {
    --side-menu-width: 200px;
    max-width: none;
  }
  .site-body.side-menus-wide .tab-group,
  .site-body.side-menus-wide .right-menu-zone {
    display: flex;
    grid-template-columns: none;
  }

  /* タイトル横のロゴはモバイルでは横幅節約のため非表示にする */
  /* .site-title-icon { display: none; } */

  /* 規格選択・デコードのプルダウンボタンにはニューモーフィズムの浮き出し影をつけ、
     開いたときに出るモーダル (.quick-combo-panel) 側は影なしにする */
  .quick-combo-btn { box-shadow: var(--neu-raised-sm); }

  .left-menu-zone, .right-menu-zone {
    flex: none;
    width: 100%;
    max-width: none;
    /* overflow-x が hidden のままだと overflow-y: visible は仕様上 auto に
       格上げされてしまい (どちらかが非 visible ならもう片方も非 visible 化
       される)、規格選択・デコードの折りたたみパネルがこのゾーンの高さで
       クリップされて QR 表示域の裏に隠れ選択不能になっていたため、
       overflow-x も明示的に visible にする */
    overflow-x: visible;
    overflow-y: visible;
  }
  .left-menu-zone {
    padding: 8px 12px 4px;
    gap: 8px;
    border-right: none;
    border-bottom: none;
  }
  .right-menu-zone {
    border-left: none;
    border-top: none;
    padding: 4px 12px 8px;
    gap: 8px;
  }
  .site-title { font-size: 13px; flex: none; }
  .tab { padding: 3px 10px; font-size: 12px; }

  /* タイトルと規格選択・デコードの折りたたみメニューを1行にまとめ、
     ページ最上部の縦幅を節約する */
  .mobile-top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* 規格選択とデコード操作を折りたたみメニュー2つに集約し、縦幅のかさむ
     常設のリッチカード・デコードボタン・注意書きは非表示にする
     (中身は .quick-combo-panel 側に複製済み・説明書きも複製して表示する) */
  .mobile-quick-select { display: flex; flex: 1; gap: 6px; }
  /* 「読取り」は「規格」に比べて選ぶ機会が少ないため、横幅を従来の6割程度
     (2分割時の50%→30%) に短くし、その分「規格」を広げて見やすくする */
  #standard-combo { flex: 2; }
  #decode-combo { flex: 1; }
  #mobile-scan-status-slot:not(:empty) { margin-top: 4px; }
  .reset-all-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .left-menu-zone > .tabs-vertical,
  .left-menu-zone > .left-mode-toggle,
  .left-menu-zone > .decode-panel { display: none; }
  #scan-camera-btn, #scan-image-btn, .scan-note { display: none; }

  .center-content-zone.layout.preview {
    flex: none;
    flex-direction: column;
    padding: 4px 12px;
    gap: 8px;
  }

  /* QR 表示域は残り高さを埋めるのではなく、幅基準の正方形として確保する。
     縦幅節約のため、デスクトップ相当 (420px) の6割程度に縮小する。
     保存ボタン列もこの横幅に揃える (--qr-frame-width で一元管理) */
  .content-middle { flex: none; gap: 8px; --qr-frame-width: 250px; }
  .qr-frame {
    flex: none;
    width: 100%;
    max-width: var(--qr-frame-width);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
  .save-menu {
    width: 100%;
    max-width: var(--qr-frame-width);
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .content-bottom { min-height: 0; gap: 8px; }
  .version-box { min-height: 0; }

  textarea { padding: 5px 8px; }
  /* 3行ぶん確保 (line-height 1.5em × 3 + 上下パディング) */
  #data-input { height: 4.5em; }
  .seg-btn { min-width: 36px; padding: 4px 0; font-size: 12px; }

  /* 「出力部」「入力部」ラベルは縦幅節約のため視覚的に非表示にする
     (スクリーンリーダー向けには残す) */
  #qr-zone > label[for="qr-zone"],
  #data-field > label[for="data-input"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  /* 諸元: デスクトップは QR 表示域の大きさを保つため2行ぶんに固定しているが、
     モバイルはページ全体がスクロールするためその制約が不要。折り返した分だけ
     素直に高さを取り、内容が見切れないようにする */
  .info { padding: 6px 10px; gap: 2px 12px; font-size: 11px; height: auto; overflow: visible; }
  .info-content dd { max-height: none; overflow: visible; }
  /* 「諸元」タブに移した際、タブ名と重複するフィールド自身のラベルは非表示にする */
  #right-menu-info-panel #info-label { display: none; }
  #right-menu-color-panel #color-label { display: none; }

  /* 右メニューゾーンをタブ4枚 (外観 / 設定 / 型式 / 諸元) に分けて縦幅を節約。
     他のボタン群と統一感を持たせ、凹んだ帯の中に選択中タブだけが
     浮き上がるニューモーフィズム表現にする (.tab-group / .seg-btn と同系統)。 */
  .right-menu-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 3px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--neu-inset-sm);
  }
  .right-menu-tab-btn {
    flex: 1;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-sub);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 4px;
    cursor: pointer;
  }
  .right-menu-tab-btn[aria-selected="true"] {
    background: var(--accent-weak);
    box-shadow: var(--neu-raised-sm);
    color: var(--accent);
    font-weight: 700;
  }
  .right-menu-panel { display: flex; flex-direction: column; gap: 16px; }
  .right-menu-panel.tab-inactive { display: none; }

  /* QR の「設定」タブ (誤り訂正) はデスクトップでは縦並びだが、モバイルは
     縦幅を節約するため横並びに戻す (縦並び用の幅100%指定も打ち消す) */
  #ec-control.ec-control-qr { flex-direction: row; flex-wrap: wrap; }
  #ec-control.ec-control-qr .seg-btn { width: auto; }

  /* 「型式」タブの「自動」ボタンの下は、grid の gap だけだと数字ボタンの
     影と近すぎて重なって見えるため、余白をその分 (現状の2倍) 広げる */
  .tile-grid .tile-full { margin-bottom: 6px; }
}

/* 縦幅の低いモバイル (iPhone SE 等) では QR 表示域と余白をさらに切り詰める。
   ボタン間隔もスクロールフリーを維持できる範囲まで戻す (影の重なりよりも
   縦幅超過を優先して回避する)。 */
@media (max-width: 760px) and (max-height: 700px) {
  .content-middle { gap: 4px; --qr-frame-width: 190px; }
  .center-content-zone.layout.preview { padding: 2px 12px; gap: 6px; }
  .left-menu-zone { padding: 6px 12px 2px; gap: 6px; }
  .right-menu-zone { padding: 2px 12px 6px; gap: 6px; }
  .tab-group { gap: 3px; }
  .decode-group { gap: 6px; }
  .segmented, .mask-grid { gap: 4px; }
  .tile-grid { gap: 3px; }
  .tile-grid-2d { gap: 2px; }
  .save-menu { gap: 8px; }
  .right-menu-tabs { gap: 3px; margin-bottom: 6px; padding: 2px; }
  .right-menu-panel { gap: 8px; }
  .field { gap: 3px; }
  .tile-grid .tile-full { margin-bottom: 3px; }
}

/* さらに縦幅が厳しい端末向けの追加の切り詰め */
@media (max-width: 760px) and (max-height: 620px) {
  .content-middle { --qr-frame-width: 160px; }
  .right-menu-panel { gap: 6px; }
}

/* 高さの低い横向きモバイルなど */
@media (max-height: 460px) {
  .left-menu-zone { padding: 4px 12px 2px; }
}

/* ---------- アクセシビリティ: モーション/透過の抑制 (apple-design) ----------
   reduced-motion は「モーションなし」ではなく「前庭刺激のない同等表現」。
   スライド・スケール・スプリングは短いフェード等に置き換え、
   理解を助ける色・不透明度の変化は残す。 */
@media (prefers-reduced-motion: reduce) {
  .seg-btn, .tab, .tile, .small-button, .left-mode-btn, .right-menu-tab-btn,
  .quick-combo-btn, .quick-combo-option {
    transition: color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
  }
  .seg-btn:active:not(:disabled), .tab:active, .tile:active:not(:disabled),
  .small-button:active, .left-mode-btn:active, .right-menu-tab-btn:active,
  .quick-combo-btn:active, .quick-combo-option:active { transform: none; }
  .quick-combo-panel { animation: none; }
  body { transition: none; }
}

/* 透過抑制: 半透明マテリアルを不透明に落とし、blur を外す */
@media (prefers-reduced-transparency: reduce) {
  .quick-combo-panel {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* 高コントラスト: 浮遊面には明確な輪郭線を与える */
@media (prefers-contrast: more) {
  .quick-combo-panel {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--text-sub);
  }
}