/* HP の型工場 — 道具の画面（3列：足す／並び／形と文 ＋ 見本） */
.fields-panel summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.fields-panel summary::-webkit-details-marker { display:none; }
.fields-panel summary h2 { margin:0; }
.fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:4px 16px; }
.fields label, .meta-row label, .theme-row label { font-size:.88rem; font-weight:600; margin:12px 0 0; display:block; }
.fields input { margin-top:4px; padding:9px 10px; }
.opt { color:var(--muted); font-weight:400; margin-left:6px; font-size:.76rem; }
.theme-row { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-end; margin-top:8px; }
.theme-row input[type=color] { display:block; width:64px; height:38px; padding:2px; border:1px solid var(--line); border-radius:6px; background:#fff; margin-top:4px; }
.theme-row select, .editor select { display:block; margin-top:4px; padding:8px 10px; font-size:.95rem; font-family:inherit; border:1px solid var(--line); border-radius:6px; background:#fff; }
.meta-row { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.meta-row input, .meta-row textarea { margin-top:4px; padding:9px 10px; }

.builder { display:grid; grid-template-columns:220px 1fr 1.25fr; gap:16px; margin-top:22px; align-items:start; }
.pane { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; min-width:0; }
.pane h2 { margin-bottom:8px; }
.palette ul { list-style:none; margin:0; padding:0; }
.palette li { margin:0 0 6px; font-size:.82rem; }
.palette button.small { width:100%; text-align:left; padding:7px 10px; font-size:.85rem; }

#order { list-style:none; margin:10px 0 0; padding:0; }
#order li { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; background:#fff; padding:4px 6px; }
#order li.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
#order li.has-problem { border-left:4px solid var(--err); }
#order li.dragging { opacity:.4; }
#order li.over { border-top:3px solid #4a6fd1; }
.grip { width:10px; height:18px; cursor:grab; background:radial-gradient(circle, #aaa 1.2px, transparent 1.5px) 0 0 / 5px 5px; flex:none; }
button.pick { flex:1; display:flex; flex-direction:column; align-items:flex-start; margin:0; padding:4px 6px; background:none; border:0; color:var(--fg); font-size:.92rem; font-weight:400; text-align:left; cursor:pointer; line-height:1.4; }
button.pick .muted { font-size:.78rem; }
.ops { display:flex; gap:2px; flex:none; }
button.icon { display:inline-block; width:30px; height:30px; margin:0; padding:0; font-size:.9rem; background:#fff; color:var(--fg); border:1px solid var(--line); border-radius:6px; }
button.icon:disabled { opacity:.3; cursor:default; }

.editor .lbl { font-size:.88rem; font-weight:600; margin:14px 0 6px; }
.variants { display:flex; gap:6px; flex-wrap:wrap; }
.variants button.small { padding:7px 11px; font-size:.85rem; }
.editor label { font-size:.88rem; margin:12px 0 0; }
.editor input, .editor textarea { margin-top:4px; padding:8px 10px; font-size:.95rem; }
fieldset.item { border:1px solid var(--line); border-radius:8px; padding:6px 12px 12px; margin:0 0 10px; }
.item-head { display:flex; justify-content:space-between; align-items:center; }
.editor .row select { margin-top:0; }

.preview-panel { margin-top:22px; }
.preview-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.preview-head h2 { margin:0; }
.seg { display:flex; gap:6px; }
.preview-box { margin-top:12px; background:#e9e9e9; border-radius:8px; padding:12px; display:flex; justify-content:center; }
#preview { width:100%; height:760px; border:0; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.1); transition:width .2s; }
#preview.sp { width:390px; }

#problems { margin:6px 0 10px; }
#problems ul { margin:6px 0 0; padding-left:1.2em; }
button.link-btn { display:inline; width:auto; margin:0; padding:0; background:none; border:0; color:var(--fg); font-size:.9rem; font-weight:400; text-align:left; text-decoration:underline; cursor:pointer; }
#dl:disabled { opacity:.45; cursor:default; }

@media (max-width: 1000px) {
  .builder { grid-template-columns:1fr 1fr; }
  .palette { grid-column:1 / -1; }
  .palette ul { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px; }
  .palette li { margin:0; }
}
@media (max-width: 700px) {
  .builder, .meta-row { grid-template-columns:1fr; }
  #preview.sp { width:100%; }
}
.pickers { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-end; }
.pickers label { font-size:.9rem; font-weight:600; margin:0; }
.pickers select { display:block; margin-top:4px; padding:9px 12px; font-size:1rem; font-family:inherit; border:1px solid var(--line); border-radius:6px; background:#fff; min-width:220px; }
.pickers .note { flex-basis:100%; margin:0; }
.dl-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-row button { margin-top:14px; }
#dl-wp:disabled { opacity:.45; cursor:default; }
@media (max-width: 700px) { .dl-row { grid-template-columns:1fr; } }
fieldset.choices { border:1px solid var(--line); border-radius:8px; padding:8px 12px 10px; margin:14px 0 6px; background:#fafaf7; }
fieldset.choices legend { font-size:.85rem; font-weight:600; padding:0 4px; }
label.choice { display:flex; align-items:flex-start; gap:8px; font-size:.88rem; font-weight:400; margin:6px 0 0; line-height:1.5; cursor:pointer; }
label.choice input { width:auto; margin:3px 0 0; flex:none; }
label.choice .ask { flex:none; font-size:.72rem; color:#8a5a00; background:#fff3d6; border-radius:4px; padding:0 6px; margin-left:auto; }
select.pick-text { display:block; margin-top:4px; padding:6px 8px; font-size:.85rem; font-family:inherit; border:1px solid var(--line); border-radius:6px; background:#fff; max-width:100%; }

#undo { margin-top:8px; width:100%; }
#photos .msg:empty { display:none; }
#photo-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; margin-top:12px; }
.photo-row { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; }
.photo-thumb { width:96px; height:72px; object-fit:cover; border-radius:6px; flex:none; background:#ddd; }
.photo-info { min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.88rem; }
.photo-info .muted { font-size:.76rem; word-break:break-all; }
.photo-info .row { margin-top:6px; }
.small-file { display:inline-block; padding:7px 12px; font-size:.85rem; border:1px solid var(--accent); border-radius:8px; cursor:pointer; background:#fff; font-weight:600; }
.small-file input { display:none; }