/*
  ジェイクの作曲教室 — 仮の見た目（灰色のワイヤー）
  ★このファイルは、あとで ChatGPT がデザインをやり直すときに「まるごと差し替える」前提。
  ★HTML の data-part（部品の名前）・data-state（状態）・id・name はプログラムが使うので変えないこと。
  見た目の指定は、このファイルにしか書いていない（HTML に style は書いていない）。
*/
:root {
  --wire-bg: #f2f2f2;
  --wire-box: #d9d9d9;
  --wire-box-strong: #bdbdbd;
  --wire-line: #9e9e9e;
  --wire-text: #333;
  --wire-muted: #777;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wire-bg);
  color: var(--wire-text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
}
[data-part] { position: relative; }
main, header, footer { display: block; max-width: 960px; margin: 0 auto; padding: 16px; }
section { background: #fff; border: 1px dashed var(--wire-line); margin: 16px 0; padding: 16px; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.4; }
p { margin: 0 0 8px; }
a { color: inherit; }

/* 画像を置く予定の場所（中身は丸山があとで選ぶ） */
.wire-image {
  background: var(--wire-box);
  border: 1px solid var(--wire-line);
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; color: var(--wire-muted); font-size: 13px; text-align: center; padding: 8px;
}

.wire-row { display: flex; flex-wrap: wrap; gap: 12px; }
.wire-row > * { flex: 1 1 240px; }
.wire-card { background: var(--wire-bg); border: 1px solid var(--wire-line); padding: 12px; }

button, .wire-button {
  display: inline-block; min-height: 44px; padding: 10px 16px;
  background: var(--wire-box-strong); border: 1px solid var(--wire-line); border-radius: 0;
  color: var(--wire-text); font: inherit; cursor: pointer; text-decoration: none; text-align: center;
}
button[disabled], [data-state="disabled"] { opacity: .45; cursor: not-allowed; }
[data-state="selected"] { outline: 3px solid #555; }
[data-state="loading"] { opacity: .6; }
[data-state="error"] { border-color: #555; border-style: solid; border-width: 2px; }
[hidden] { display: none !important; }

label { display: block; margin: 8px 0 4px; font-size: 14px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], select, textarea {
  width: 100%; min-height: 44px; padding: 8px; font: inherit; background: #fff; border: 1px solid var(--wire-line); border-radius: 0;
}
textarea { min-height: 120px; }
.wire-choice { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.wire-choice input { width: 20px; height: 20px; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border: 1px solid var(--wire-line); padding: 6px 8px; text-align: left; vertical-align: top; font-size: 14px; }
.wire-scroll { overflow-x: auto; }

.wire-message { background: var(--wire-bg); border: 1px solid var(--wire-line); padding: 8px 12px; margin: 8px 0; }
.wire-small { font-size: 13px; color: var(--wire-muted); }
.wire-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.wire-slots button { flex: 0 0 auto; }