/* style.css - シンプルで見やすいレイアウト */
:root{
  --red:#f8d7da;
  --blue:#dbeafe;
  --cyan:#d1fae5;
  --purple:#f3e8ff;
  --muted:#f4f4f6;
  --accent:#4f46e5;
  --table-border:#cfcfcf;
}

*{box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
body{margin:0;background:linear-gradient(0deg,#fff,#fbfbff);color:#111}
header{padding:16px 24px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:12px}
header h1{margin:0;font-size:20px}
.controls{display:flex;gap:18px;flex-wrap:wrap}
.category-box, .helpers-box, .changes-box, .recipes-source{background:var(--muted);padding:10px;border-radius:8px;min-width:220px}
.category-box label, .recipes label{display:block;font-size:12px;color:#333;margin-bottom:6px}
.recipes{display:flex;gap:8px;align-items:center}
.recipes select{min-width:120px}

main{display:flex;gap:20px;padding:24px}
.ingredients{flex:1}
.side{width:320px;background:var(--purple);padding:12px;border-radius:12px}

.ingredient-controls{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.ingredient-controls select{min-width:200px}
table{width:100%;border-collapse:collapse;background:white}
thead th{background:#f3f3f3;padding:8px;border:1px solid var(--table-border);text-align:left;font-size:13px}
tbody td{padding:6px;border:1px solid var(--table-border);height:36px}
.initial-cell{background:var(--red)}
.add-col-btn{background:var(--cyan);border-radius:4px;padding:6px 8px;border:none}
.remove-col{background:transparent;border:none;color:#b00;font-weight:bold;margin-left:6px;cursor:pointer}

.helper-form{display:flex;flex-wrap:wrap;gap:6px}
.helper-form input{padding:6px;border-radius:6px;border:1px solid #ccc}
.helper-form button{padding:6px 8px;border-radius:6px;border:none;background:var(--accent);color:white}

#helpersList, #changesList{list-style:none;padding-left:0;margin-top:8px;max-height:160px;overflow:auto}
#helpersList li, #changesList li{background:white;padding:6px;margin-bottom:6px;border-radius:6px;border:1px solid #ddd}

#alerts,#warnings{color:#a33;font-size:13px;margin-top:8px}
footer{padding:12px 24px;font-size:12px;color:#666;border-top:1px solid #eee}