/* styles/modals.css  — fullscreen modals for compact-80
   目的：
   - 初期状態は非表示（display:none）
   - JSで開く時だけ display:flex（inline style / .is-open / aria-hidden=false / open に対応）
   - モーダル内部は 0.8 スケール（--ui-compact-scale）で統一
*/

/* ====== 基本フレーム（全モーダル共通：デフォルト非表示） ====== */
body.ui-compact-80 #vectorizer-panel,
body.ui-compact-80 #font-preview-panel,
body.ui-compact-80 #exporter-panel,
body.ui-compact-80 #fold3d-panel,
body.ui-compact-80 #saved-designs-panel {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  z-index: 1600;
  background: var(--panel-bg-color, rgba(255,255,255,.85));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: none;                 /* ← 初期は必ず非表示 */
  flex-direction: column;
}

/* ====== 表示トリガ（JS / 属性 / クラス いずれでも表示） ====== */
body.ui-compact-80 #vectorizer-panel[style*="display:block"],
body.ui-compact-80 #font-preview-panel[style*="display:block"],
body.ui-compact-80 #exporter-panel[style*="display:block"],
body.ui-compact-80 #fold3d-panel[style*="display:block"],
body.ui-compact-80 #saved-designs-panel[style*="display:block"],
body.ui-compact-80 #vectorizer-panel[style*="display:flex"],
body.ui-compact-80 #font-preview-panel[style*="display:flex"],
body.ui-compact-80 #exporter-panel[style*="display:flex"],
body.ui-compact-80 #fold3d-panel[style*="display:flex"],
body.ui-compact-80 #saved-designs-panel[style*="display:flex"],
body.ui-compact-80 #vectorizer-panel.is-open,
body.ui-compact-80 #font-preview-panel.is-open,
body.ui-compact-80 #exporter-panel.is-open,
body.ui-compact-80 #fold3d-panel.is-open,
body.ui-compact-80 #saved-designs-panel.is-open,
body.ui-compact-80 #vectorizer-panel[aria-hidden="false"],
body.ui-compact-80 #font-preview-panel[aria-hidden="false"],
body.ui-compact-80 #exporter-panel[aria-hidden="false"],
body.ui-compact-80 #fold3d-panel[aria-hidden="false"],
body.ui-compact-80 #saved-designs-panel[aria-hidden="false"],
body.ui-compact-80 #vectorizer-panel[open],
body.ui-compact-80 #font-preview-panel[open],
body.ui-compact-80 #exporter-panel[open],
body.ui-compact-80 #fold3d-panel[open],
body.ui-compact-80 #saved-designs-panel[open] {
  display: flex !important;      /* ← 表示時だけ flex を強制 */
}

/* ====== ヘッダー／ボディ／フッター レイアウト ====== */
body.ui-compact-80 #vectorizer-panel .panel-header,
body.ui-compact-80 #font-preview-panel .panel-header,
body.ui-compact-80 #exporter-panel .panel-header,
body.ui-compact-80 #fold3d-panel .panel-header,
body.ui-compact-80 #saved-designs-panel .panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  flex-shrink: 0;
}

body.ui-compact-80 #vectorizer-panel .panel-body,
body.ui-compact-80 #font-preview-panel .panel-body,
body.ui-compact-80 #exporter-panel .panel-body,
body.ui-compact-80 #fold3d-panel .panel-body,
body.ui-compact-80 #saved-designs-panel .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem;
  /* モーダル内部のコンパクト倍率 */
  font-size: calc(1rem * var(--ui-compact-scale, .8));
  line-height: 1.45;
}

body.ui-compact-80 #vectorizer-panel .panel-footer,
body.ui-compact-80 #font-preview-panel .panel-footer,
body.ui-compact-80 #exporter-panel .panel-footer,
body.ui-compact-80 #fold3d-panel .panel-footer,
body.ui-compact-80 #saved-designs-panel .panel-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  align-items: center;
}

/* ====== フォームコントロールの縮尺（モーダル内） ====== */
body.ui-compact-80 #vectorizer-panel input,
body.ui-compact-80 #vectorizer-panel select,
body.ui-compact-80 #vectorizer-panel button,
body.ui-compact-80 #vectorizer-panel label,
body.ui-compact-80 #font-preview-panel input,
body.ui-compact-80 #font-preview-panel select,
body.ui-compact-80 #font-preview-panel button,
body.ui-compact-80 #font-preview-panel label,
body.ui-compact-80 #exporter-panel input,
body.ui-compact-80 #exporter-panel select,
body.ui-compact-80 #exporter-panel button,
body.ui-compact-80 #exporter-panel label,
body.ui-compact-80 #fold3d-panel input,
body.ui-compact-80 #fold3d-panel select,
body.ui-compact-80 #fold3d-panel button,
body.ui-compact-80 #fold3d-panel label,
body.ui-compact-80 #saved-designs-panel input,
body.ui-compact-80 #saved-designs-panel select,
body.ui-compact-80 #saved-designs-panel button,
body.ui-compact-80 #saved-designs-panel label {
  font-size: .9em;
  padding: .45em .7em;
  min-height: 36px;
}

/* ====== フォントプレビュー：検索・入力欄を見やすく ====== */
#font-preview-panel .panel-body input[type="search"],
#font-preview-panel .panel-body input[type="text"],
#font-preview-panel .panel-body select {
  font-size: 1rem;     /* 競合対策で明示 */
  min-height: 36px;
}

/* 検索アイコン付きのフィールド調整（アイコンが重ならないように） */
#font-preview-panel .has-icon input[type="search"] { padding-left: 2.25rem; }
#font-preview-panel .has-icon .icon { left: .6rem; opacity: .6; position: absolute; }

/* ====== 保存済みデザイン：注意書きのテキスト小さめ（0.8em） ====== */
/* よくある名称に広くマッチさせる（どれか1つ付いていればOK） */
#saved-designs-panel .panel-body .notice,
#saved-designs-panel .panel-body .warning,
#saved-designs-panel .panel-body .callout,
#saved-designs-panel .panel-body .alert,
#saved-designs-panel .panel-body p.notice,
#saved-designs-panel .panel-body p.warning {
  font-size: .8em;
  line-height: 1.7;
}

/* メタ情報の小テキスト */
#saved-designs-panel .panel-body .meta,
#saved-designs-panel .panel-body .muted {
  font-size: .9em;
  color: var(--muted, #667085);
}

/* ====== （オプション）PANTONE サイドパネルのスクロール最適化 ====== */
body.ui-compact-80 .pantone-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  height: 100vh; max-height: 100vh;
}
body.ui-compact-80 .pantone-panel .panel-body,
body.ui-compact-80 .pantone-panel .modal-content {
  height: 100%;
  overflow: auto;
  font-size: calc(1rem * var(--ui-compact-scale, .8));
}
/* modals.css の末尾などに追加 */
body.modal-open { overflow: hidden; }