:root{
  --bg:#f8f5fc;            /* 薄い藤 */
  --card:#fffdff;
  --ink:#3b3444;
  --sub:#857c93;
  --line:#e8dff3;

  --lav:#cdb8f0;           /* 藤（主役） */
  --lav-deep:#3f2a63;      /* 藤の上に置く文字 */
  --lav-soft:#ebe0fb;
  --sky:#c3e5f7;           /* 水色 */
  --sky-deep:#1f4a63;
  --pink:#f9cde1;          /* ピンク */
  --pink-deep:#6e2f4c;
  --danger:#c0708f;

  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Yu Gothic UI","Yu Gothic","Hiragino Sans",system-ui,sans-serif;
  line-height:1.75;
}
header{padding:30px 20px 8px; max-width:880px; margin:0 auto}
h1{margin:0 0 4px; font-size:26px; letter-spacing:.04em; color:#4a3a63}
.lead{margin:0; color:var(--sub)}
main{max-width:880px; margin:0 auto; padding:12px 20px 80px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin:16px 0;
  box-shadow:0 2px 10px rgba(150,120,190,.06);
}
.card h2{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:18px; color:#4a3a63}
.num{
  display:inline-grid; place-items:center; width:28px; height:28px;
  background:var(--pink); color:var(--pink-deep); border-radius:50%;
  font-size:14px; font-weight:700;
}
.field{margin:14px 0}
.field > label{display:block; font-weight:700; font-size:14px; margin-bottom:6px; color:#58496e}
.hint{margin:6px 0 0; color:var(--sub); font-size:13px}

/* --- 選択チップ --- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; cursor:pointer; font:inherit; font-size:14px; color:#5b5168;
  display:flex; align-items:baseline; gap:6px;
  transition:background .15s, border-color .15s, color .15s;
}
.chip small{color:var(--sub); font-size:11px}
.chip:hover{background:var(--lav-soft); border-color:#dcc9f5}
.chip.on{background:var(--lav); color:var(--lav-deep); border-color:#bda3e8; font-weight:700}
.chip.on small{color:#5b3f85}

input[type=text], input[type=number], select, textarea{
  font:inherit; padding:8px 10px; border:1px solid var(--line);
  border-radius:9px; background:#fff; color:inherit; width:100%;
}
input:focus, select:focus, textarea:focus{outline:2px solid #d9c6f6; outline-offset:1px; border-color:#cbb8ee}
input[type=number]{width:92px}
textarea{resize:vertical}
input[type=file]{font-size:13px}

input[type=range]{
  -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--sky),var(--lav)); vertical-align:middle;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--lav); box-shadow:0 1px 4px rgba(120,90,170,.3); cursor:pointer;
}
.val{font-size:13px; color:var(--sub); margin-left:8px}

/* --- ボタン --- */
.btn{
  font:inherit; padding:9px 17px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:#5b5168;
  transition:background .15s, border-color .15s;
}
.btn:hover{background:var(--lav-soft); border-color:#dcc9f5}
.btn.primary{
  background:linear-gradient(135deg,var(--lav),var(--pink));
  color:var(--lav-deep); border-color:#c8b0ec; font-weight:700;
  box-shadow:0 2px 8px rgba(165,130,215,.25);
}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{background:transparent; border-style:dashed; border-color:#dcc9f5; width:100%; margin-top:10px; color:#6d5f85}
.btn.tiny{padding:3px 12px; font-size:12px}
.btn.danger{color:var(--danger); border-color:#f0d6e0}
.btn.danger:hover{background:#fdeff4; border-color:#eac6d6}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* --- BGMの一覧（試聴つき） --- */
.bgm-list{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.bgm-item{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff;
}
.bgm-item.on{background:var(--lav-soft); border-color:#c9b2ef}
.bgm-item .listen{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid #cbb8ee; background:#fff; color:#5c4590; font-size:14px; line-height:1;
}
.bgm-item .listen:hover:not(:disabled){background:var(--lav-soft)}
.bgm-item .listen:disabled{opacity:.3; cursor:default; border-color:var(--line)}
.bgm-txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.4}
.bgm-txt strong{font-size:14px; color:#4a3a63}
.bgm-txt span{font-size:12px; color:var(--sub)}
.bgm-item .pick{
  flex:0 0 auto; font:inherit; font-size:13px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:#5b5168; cursor:pointer;
}
.bgm-item .pick:hover{background:var(--lav-soft); border-color:#dcc9f5}
.bgm-item.on .pick{background:var(--lav); border-color:#bda3e8; color:var(--lav-deep); font-weight:700}

@media (max-width:520px){
  .bgm-item{flex-wrap:wrap}
  .bgm-txt{flex:1 1 60%}
  .bgm-item .pick{margin-left:50px}
}

/* --- もっと良い曲 --- */
.more-music{
  margin-top:12px; border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; background:#fcfaff;
}
.more-music summary{cursor:pointer; font-size:14px; font-weight:700; color:#4a3a63}
.more-music summary::marker{color:var(--lav)}
.more-music .links{margin:8px 0 0; padding-left:1.2em; font-size:13px; color:var(--sub)}
.more-music .links li{margin:5px 0}
.more-music a{color:#6a4ca8; text-decoration:underline}
.note-license{background:#fff6fa; border-left:3px solid var(--pink); padding:8px 10px; border-radius:6px; margin-top:10px}

/* --- シナリオの手順 --- */
.steps{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.step{
  border:1px solid var(--line); border-left:4px solid var(--sky);
  border-radius:10px; padding:12px 14px; background:#fcfaff;
}
.step strong{display:block; font-size:14px; color:#4a3a63; margin-bottom:4px}
.step textarea{margin:8px 0}
.step .status{display:block; margin-top:6px}

/* --- 場面 --- */
.scene{border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0; background:#fff}
.scene-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.scene-no{font-size:14px; color:#6b5c85}
.scene-body{display:flex; gap:14px}
.thumb{
  flex:0 0 92px; height:138px; border:1px solid var(--line); border-radius:9px;
  display:grid; place-items:center; overflow:hidden; background:var(--lav-soft);
}
.thumb img{width:100%; height:100%; object-fit:cover}
.noimg{font-size:12px; color:#9a8fb0}
.scene-fields{flex:1; min-width:0}
.row{display:flex; align-items:center; gap:8px; margin:7px 0; flex-wrap:wrap}
.row > label{flex:0 0 112px; font-size:13px; color:var(--sub)}
.row > input[type=text], .row > input[type=file], .row > textarea{flex:1; min-width:140px}
.row > textarea.cap{line-height:1.5}

/* --- プレビュー --- */
.stage-wrap{display:flex; flex-direction:column; align-items:center; gap:10px}
#stage{
  max-width:100%; max-height:62vh; border-radius:12px; background:#2a2435;
  border:1px solid var(--line); box-shadow:0 3px 14px rgba(130,100,175,.14);
}
.controls{display:flex; align-items:center; gap:10px; width:100%}
.controls input[type=range]{flex:1}
.time{font-size:13px; color:var(--sub); white-space:nowrap}

.checks{margin:14px 0 0; font-size:13px}
.checks div{padding:3px 0}
.checks .ng{color:#b45c7e; font-weight:700}
.checks .ok{color:#5a8f73}

.actions{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap}
.status{font-size:13px; color:var(--sub)}

/* --- プロンプト --- */
.prompt-box{border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0; background:#fff}
.prompt-box header{display:flex; justify-content:space-between; align-items:center; padding:0; margin:0 0 6px; max-width:none}
.prompt-box strong{font-size:13px; color:#6b5c85}
.prompt-box pre{
  margin:0; white-space:pre-wrap; word-break:break-word;
  font-family:inherit; font-size:12px; color:#5a5168; max-height:150px; overflow:auto;
  background:#fbf8fe; border-radius:8px; padding:8px;
}

@media (max-width:620px){
  .scene-body{flex-direction:column}
  .thumb{flex:0 0 auto; width:100%; height:120px}
  .row > label{flex:0 0 100%}
}