/* 衣装プロンプト工房 / styles.css
 * 方針（実機試行修正①）：スチームパンク風の衣装工房。
 * 明るい羊皮紙を基調に、革・真鍮・銅・緑青を要所へ。装飾過多にせず、
 * スマホでの可読性と操作性を最優先する。画像素材・外部フォントは使わない。
 * 見出しは明朝、本文はゴシック（従来どおり端末標準のみ）。
 * 変数名は従来のまま値だけ差し替え、既存ルールがそのまま新しい配色を受け取る。
 */

:root {
  --paper:        #F1EADC;  /* 羊皮紙 */
  --surface:      #FBF6EC;  /* 明るい生成り */
  --surface-2:    #E7DCC8;  /* 古紙 */
  --ink:          #2D251E;  /* 墨に近い濃茶 */
  --ink-2:        #4a3f3378;
  --muted:        #74685B;
  --line:         #B9A481;  /* 古金の枠線 */
  --accent:       #60402C;  /* 革（主ボタン・強調） */
  --accent-deep:  #493020;
  --accent-soft:  #EFE4CD;
  --wine:         #963F32;  /* 錆びた赤（警告・削除・未保存） */
  --brass:        #A47B3C;  /* 真鍮 */
  --copper:       #9A5935;  /* 銅（小さな文字の金属色はこちら） */
  --patina:       #426B67;  /* 緑青（選択中の印） */
  --radius:       10px;
  --tap:          44px;

  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
}

.skip-link {
  position: absolute; left: -9999px;
}
.skip-link:focus {
  left: 8px; top: 8px; z-index: 50;
  background: var(--surface); padding: 8px 12px; border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ---------- 見出し ---------- */
.hero { margin: 24px 0 28px; }
.hero-eyebrow {
  margin: 0 0 6px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper);
}
.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px; font-weight: 600; letter-spacing: .06em;
}
.hero-sub {
  margin: 8px 0 0;
  color: var(--muted); font-size: 14px;
}
.page-title {
  margin: 12px 0 8px;
  font-family: var(--serif);
  font-size: 22px; font-weight: 600; letter-spacing: .04em;
}

/* ---------- 基本パーツ ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

.p { margin: 6px 0; font-size: 14px; }
.p--lead { color: var(--muted); }
.p--sub { color: var(--muted); font-size: 13px; }
.p--meta { color: var(--muted); font-size: 12px; }
.p--note { color: var(--muted); font-size: 13px; padding-left: 10px; border-left: 2px solid var(--line); }
.p--warn { color: var(--wine); }

.list { margin: 6px 0 0; padding-left: 1.1em; font-size: 14px; color: var(--muted); }
.list li { margin: 2px 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
}
.card--quiet { background: transparent; border-style: dashed; }
.card--tap { cursor: pointer; min-height: var(--tap); }
.card--tap:active { background: var(--accent-soft); }
.card-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px; font-weight: 600; letter-spacing: .03em;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 15px; text-decoration: none;
  cursor: pointer;
}
.btn:active { background: var(--surface-2); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:active { background: var(--accent-deep); }
.btn--danger { color: var(--wine); border-color: #DCBFB6; }
.btn--sm { min-height: var(--tap); padding: 6px 12px; font-size: 13px; }   /* 仕様書§5-6：タップ領域44px以上 */
.btn[disabled] { opacity: .6; color: var(--muted); cursor: default; }

/* ---------- 戻る導線（sticky） ----------
 * 行き先を明示した押せるボタン。長くスクロールした後でも画面上部に残る。
 * iPhone Safari のセーフエリアぶんだけ上に余白を足す。 */
.topnav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -20px -16px 10px; padding: calc(6px + env(safe-area-inset-top)) 16px 6px;
  background: rgba(241, 234, 220, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.back-btn {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 6px 14px 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: 13px; text-decoration: none;
}
.back-btn:active { background: var(--surface-2); }

/* 見出し：小さな真鍮の二重罫線。装飾はアクセントに留める。 */
.card-title { border-bottom: 3px double var(--brass); padding-bottom: 4px; }
.page-title { border-bottom: 3px double var(--brass); padding-bottom: 6px; }

/* ---------- チップ ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.chip {
  min-height: var(--tap); padding: 6px 12px;   /* 仕様書§5-6：タップ領域44px以上 */
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 13px; line-height: 1.4;
  cursor: pointer;
}
.chip.is-selected {
  background: var(--patina);
  border-color: var(--patina);
  color: #fff;
  font-weight: 600;
}
/* 色だけに依存しない：選択済みは記号でも示す */
.chip.is-selected::before { content: "✓ "; }
.chip-group-label {
  margin: 12px 0 2px;
  font-size: 11px; letter-spacing: .1em; color: var(--copper);
}

.switches { display: flex; flex-wrap: wrap; gap: 6px; }
.switch {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--muted);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.switch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); flex: none;
}
.switch.is-on { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); font-weight: 600; }
.switch.is-on .switch-dot { background: var(--accent); }
.switch.is-on::after { content: "ON"; font-size: 10px; letter-spacing: .08em; }
.switch:not(.is-on)::after { content: "OFF"; font-size: 10px; letter-spacing: .08em; }

/* ---------- フィールド ---------- */
.field { padding: 14px 0; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: none; }
.field-head { display: flex; align-items: center; gap: 8px; }
.field-label { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.field-sub { margin: 12px 0 2px; font-size: 12px; color: var(--muted); }
.field-note { margin: 4px 0 6px; font-size: 12px; color: var(--muted); }
.field-note--data { padding-left: 8px; border-left: 2px solid var(--accent-soft); }
.tag-optional {
  font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px;
}
.tag-phase {
  font-size: 10px; color: var(--copper); letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px;
}

/* ---------- 設計台のヘッダ（仕立て札） ---------- */
.workshop-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.wh-top { display: flex; align-items: center; justify-content: space-between; }
.badge {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.badge--dirty { color: var(--wine); border-color: #DCBFB6; background: #F6E9E4; }
.name-input {
  width: 100%; min-height: var(--tap);
  border: none; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font-family: var(--serif); font-size: 19px; letter-spacing: .04em;
  padding: 4px 0;
}
.name-input:focus { outline: none; border-bottom-color: var(--accent); }
.wh-conds { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.wh-conds--empty { color: var(--ink-2); }

.swatch-row { display: flex; gap: 2px; margin: 10px 0 0; height: 10px; border-radius: 999px; overflow: hidden; }
.swatch-row--sm { height: 8px; margin: 8px 0; }
.swatch { flex: 1 1 auto; border: 1px solid rgba(45,37,30,.25); }

.progress { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.progress-bar {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.progress-fill { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
.progress-label { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------- アコーディオン ---------- */
.accordion { display: flex; flex-direction: column; gap: 8px; }
.acc-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acc-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.acc-title { flex: 1; font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.acc-mark {
  width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.acc-head[aria-expanded="true"] .acc-mark { transform: rotate(-135deg); }
.acc-panel { padding: 0 14px 14px; }

/* ---------- 下部固定バー ---------- */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 8px;
  max-width: 560px; margin: 0 auto;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: rgba(241, 234, 220, .94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.bb-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 13px; text-decoration: none; cursor: pointer;
}
.bb-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.bb-btn[disabled] { opacity: .4; cursor: default; }

/* ---------- 出力 ---------- */
.tabs { display: flex; gap: 6px; margin: 10px 0; }
.tab {
  flex: 1; min-height: 40px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--muted);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.tab.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }
.tab[disabled] { opacity: .4; cursor: default; }

.struct { margin: 0; font-size: 14px; }
.struct dt {
  font-size: 11px; letter-spacing: .08em; color: var(--copper);
  margin-top: 10px;
}
.struct dt:first-child { margin-top: 0; }
.struct dd { margin: 2px 0 0; }

/* ---------- トースト ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  max-width: 88%; z-index: 40;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 13px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Phase 2：複合スロット（手袋） ---------- */
.composite {
  border-left: 2px solid var(--accent-soft);
  padding-left: 10px;
  margin-top: 4px;
}
.field-note--over { color: var(--wine); }

/* ---------- Phase 2：重ね着の層 ---------- */
.layer-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 0;
}
.layer-name {
  font-size: 13px; color: var(--muted);
  min-width: 8em;
}
.chips--tight { gap: 4px; }
.chip--sm { min-height: 34px; padding: 4px 10px; font-size: 12px; }

@media (max-width: 560px) {
  .chip--sm { min-height: var(--tap); }
}

/* ---------- Phase 2：装飾 ---------- */
.deco-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
  padding: 10px 12px; margin: 8px 0;
}
.deco-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.deco-index {
  font-family: var(--serif); font-size: 13px; letter-spacing: .06em; color: var(--copper);
}

/* ---------- Phase 2：配色 ---------- */
.palette-preview { margin: 4px 0 12px; }
.swatch-row--tall { height: 16px; }

.color-role {
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.color-role:last-child { border-bottom: none; }
.color-role-head { display: flex; align-items: center; gap: 8px; }
.color-role-name {
  font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: .04em;
  flex: none; min-width: 4.5em;
}
.color-current { flex: 1; font-size: 12px; color: var(--muted); }
.swatch--dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0,0,0,.12);
}
.swatch--empty {
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--surface) 3px, var(--surface) 6px);
}
.link-btn {
  border: none; background: none; padding: 6px 0;
  color: var(--muted); font-family: inherit; font-size: 12px;
  text-decoration: underline; cursor: pointer;
  min-height: 32px;
}

.picker {
  margin-top: 8px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.color-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px; margin-top: 6px;
}
.color-cell {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  min-height: var(--tap); padding: 6px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-family: inherit; text-align: left; cursor: pointer;
}
.color-cell.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.color-cell.is-selected .color-cell-ja { font-weight: 600; color: var(--accent-deep); }
.color-cell.is-selected .color-cell-ja::before { content: "✓ "; }
.color-cell-chip {
  height: 22px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.1);
}
.color-cell-ja { font-size: 12px; line-height: 1.3; }
.color-cell-en { font-size: 10px; color: var(--muted); line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Phase 3：出力 ---------- */
.prompt-text {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.75;
  word-break: break-word;
  -webkit-user-select: text; user-select: text;
}
.opt-line { padding: 8px 0; border-bottom: 1px solid var(--line); }
.opt-line:last-child { border-bottom: none; }
.opt-line .field-note { margin: 4px 0 0; }

/* ============================================================
   Phase 4：警告・補助候補・部分ガチャ
   ============================================================ */
.workshop-links { padding: 0 1rem 0.5rem; }
.link-btn {
  display: inline-block; font-size: 0.86rem; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.bb-btn--warn { color: var(--accent); }
.bb-btn--alert { color: var(--wine); font-weight: 600; }

.page-head { padding: 0.75rem 1rem 0.25rem; }
.page-title { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 0.35rem; }
.sub-head {
  font-family: var(--serif); font-size: 0.95rem; margin: 1rem 0 0.4rem;
  padding: 0 1rem;
}

.check-counts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.count {
  font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
}
.count--hard { border-color: var(--wine); color: var(--wine); }
.count--warning { border-color: var(--accent); color: var(--accent); }
.count--info { color: var(--muted); }
.count--muted { color: var(--muted); }

.check-body { padding: 0.5rem 1rem 5rem; }
.issue-card {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  background: var(--surface); padding: 0.7rem 0.8rem; margin-bottom: 0.6rem;
}
.issue-card--hard { border-left-color: var(--wine); }
.issue-card--warning { border-left-color: var(--accent); }
.issue-card--info { border-left-color: var(--line); }
.issue-card.is-ignored { opacity: 0.55; }
.issue-head { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; }
.issue-sev {
  font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px;
  background: var(--surface-2); color: var(--muted);
}
.issue-sev--hard { background: var(--wine); color: #fff; }
.issue-sev--warning { background: var(--accent); color: #fff; }
.issue-cat { font-size: 0.72rem; color: var(--muted); }
.issue-title { font-family: var(--serif); font-size: 0.98rem; margin: 0 0 0.3rem; }
.issue-paths { font-size: 0.76rem; color: var(--muted); margin: 0.2rem 0; }
.issue-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }

.mode-switch { display: flex; gap: 0.35rem; padding: 0 1rem 0.5rem; }
.cand-list { padding: 0.25rem 1rem 5rem; }
.cand-card {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 0.7rem 0.8rem; margin-bottom: 0.6rem;
}
.cand-head { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.25rem; }
.cand-kind {
  font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px;
  background: var(--surface-2); color: var(--muted);
}
.cand-kind--resolve { background: var(--accent); color: #fff; }
.cand-kind--surprise { border: 1px dashed var(--accent); color: var(--accent); }
.cand-target { font-size: 0.72rem; color: var(--muted); }
.cand-title { font-family: var(--serif); font-size: 1rem; margin: 0 0 0.15rem; }
.cand-en { font-size: 0.8rem; color: var(--muted); font-style: italic; margin: 0 0 0.3rem; }

.chip--action { border-color: var(--accent); color: var(--accent); }
.chip--muted { color: var(--muted); }

.diff { margin: 0.4rem 0; }
.diff-row {
  display: grid; grid-template-columns: 5.5rem 1fr auto 1fr;
  gap: 0.3rem; align-items: baseline;
  font-size: 0.8rem; padding: 0.18rem 0; border-bottom: 1px dotted var(--line);
}
.diff-label { color: var(--muted); font-size: 0.74rem; }
.diff-from { color: var(--muted); text-decoration: line-through; }
.diff-arrow { color: var(--muted); }
.diff-to { color: var(--ink); font-weight: 600; }
.row-actions { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; }
.btn--small { font-size: 0.8rem; padding: 0.35rem 0.8rem; }

/* ---------- 特殊パーツ・演出（Phase 5A） ---------- */
/* 翼・角・光輪・尾は、開いた1つだけ詳細を出す。カードで畳んでおく。 */
.sp-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  background: var(--surface);
  overflow: hidden;
}
.sp-item.is-set { border-color: var(--accent); }

.sp-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: var(--tap);            /* 片手で押せる大きさを保つ */
  padding: .6rem .75rem;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sp-head:hover { background: var(--surface-2); }
.sp-name { font-weight: 600; flex: 0 0 auto; }
.sp-summary {
  flex: 1 1 auto;
  font-size: .85rem;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-summary.is-empty { color: var(--muted); }
.sp-head[aria-expanded="true"] .acc-mark { transform: rotate(180deg); }

.sp-body {
  padding: .25rem .75rem .75rem;
  border-top: 1px solid var(--line);
}
.sp-body[hidden] { display: none; }
.sp-body .field-sub { margin-top: .6rem; }
.sp-body .btn { margin-top: .75rem; }

/* 出力設定の都合で英語に出ないときの注意（拘束チェーン） */
.field-note--warn {
  color: var(--wine);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: .4rem .5rem;
}
/* Phase 5C: one level of headings; every option remains a wrapping tap target. */
.option-group { margin: 12px 0 6px; font-size: 13px; font-weight: 700; }
.field, .field-body, .chips { min-width: 0; max-width: 100%; }
.chip { min-width: 44px; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* Phase 5D: compact wizard; existing screen safe-area spacing remains in use. */
.concept-wizard, .cf-candidate { min-width:0; overflow-wrap:anywhere; }
.cf-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0; }
.cf-steps .btn[aria-current="step"] { border:2px solid var(--accent); }
.cf-select { display:block; width:100%; min-width:0; max-width:100%; min-height:44px; padding:10px; font:inherit; border:1px solid var(--line); border-radius:8px; background:var(--paper,#fff); color:inherit; }
.cf-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.concept-wizard fieldset { border:0; padding:0; margin:0; }
.cf-candidate summary, .presentation-panel summary { min-height:44px; padding:10px 0; cursor:pointer; }
.cf-candidate .btn { width:100%; margin-top:10px; }

.presentation-panel > label { display:block; margin-top:12px; }
.presentation-panel > .btn { display:block; margin-top:12px; }

/* Shared progressive-disclosure controls. */
.ui-level-switch { display:flex; flex-wrap:wrap; gap:8px; border:0; padding:12px 0; margin:0; min-width:0; }
.ui-level-switch legend { font-weight:600; }
.ui-level-switch .btn { flex:1; min-width:120px; min-height:44px; }
.ui-hidden-summary:not(:empty) { border-left:3px solid var(--accent); padding:10px 14px; margin:12px 0; background:var(--paper); overflow-wrap:anywhere; }
.cf-search-scope { display:flex; align-items:center; gap:8px; min-height:44px; }
.cf-search-scope input { width:24px; height:24px; }
#cf-search-results:empty { display:none; }
/* Preset and pose discovery: mobile-first, readable cards and visible focus. */
.discovery { display:flex; flex-direction:column; gap:14px; }
.discovery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; }
.discovery-grid > * { min-width:0; text-align:left; overflow-wrap:anywhere; }
.discovery .btn, .discovery select, .discovery input, .discovery .back-btn { min-height:44px; max-width:100%; }
.discovery .card { white-space:normal; }
.discovery .is-selected { outline:2px solid var(--accent,#765442); outline-offset:-2px; }
.discovery button:disabled { opacity:.65; cursor:not-allowed; }
.discovery :focus-visible { outline:3px solid #2768ad; outline-offset:3px; }
.discovery-swatches { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; }
.discovery-swatch { display:inline-block; width:20px; height:20px; flex-shrink:0; border:1px solid #999; border-radius:50%; }
.discovery .prompt-text { overflow-wrap:anywhere; }
.discovery .tabs { flex-wrap:wrap; }

/* ---------- 衣装拡張 Phase 1：細項目の折りたたみ ----------
 * 大セクションの内側で、各項目を「見出し＋状態＋要約」に畳む。
 * 状態は色だけに頼らず、文字（設定済み／未設定／必須・未設定／休止中）でも示す。 */
.acc-headline { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-headline .acc-title { flex: none; }
.acc-summary { font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-summary.is-empty { color: var(--muted); }
.field--fold { padding: 0; }
.fold-head {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; min-height: var(--tap); padding: 10px 2px;
  background: transparent; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.fold-head:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; border-radius: 6px; }
.fold-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fold-line .field-label { flex: 0 1 auto; min-width: 0; }
.fold-state {
  margin-left: auto; flex: none; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; white-space: nowrap;
}
.fold-head .acc-mark { margin-left: 4px; }
.fold-head[aria-expanded="true"] .acc-mark { transform: rotate(-135deg); }
.fold-summary { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field--fold.is-filled .fold-summary { color: var(--accent); font-weight: 600; }
.field--fold.is-filled .fold-state { color: var(--patina); border-color: var(--patina); }
.field--fold.is-filled .fold-state::before { content: "✓ "; }
.field--fold.is-required .fold-state { color: var(--wine); border-color: #DCBFB6; background: #F6E9E4; }
.field--fold.is-recommended .fold-state { color: var(--copper); }
.fold-body { padding: 0 0 12px; }
.fold-body[hidden] { display: none; }
.fold-clear:empty { display: none; }
.fold-clear .link-btn { min-height: var(--tap); }
.dormant-note { padding: 10px 0; }
.dormant-note [hidden] { display: none; }
.dormant-note .link-btn { min-height: var(--tap); }