/* レポーターズ・ラストミール サムネ＆OBSアイコン メーカー */
:root{
  --bg:#13100e;
  --panel:#1b1714;
  --panel2:#241f1b;
  --line:#3a322b;
  --line-soft:#2b2522;
  --ink:#ece4d8;
  --ink-dim:#a89d8d;
  --red:#bb3a30;
  --red-deep:#8d2a22;
  --gold:#c9a96b;
  --radius:12px;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
}

*{box-sizing:border-box}
/* hidden属性を最優先で隠す（.row{display:flex}等のクラス指定に負けないように） */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 80% -10%, #2a211c 0%, rgba(42,33,28,0) 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ---------- レイアウト ---------- */
.app{display:grid; grid-template-columns:368px 1fr; height:100vh}
.panel{
  height:100vh; overflow-y:auto;
  padding:22px 22px 32px;
  background:linear-gradient(180deg,#1d1814,#171310);
  border-right:1px solid var(--line);
}
.stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:28px;
  min-width:0;
}

/* ---------- ブランド ---------- */
.brand{margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line-soft)}
.brand h1{
  font-family:var(--serif); font-weight:600;
  font-size:19px; line-height:1.35; margin:0; letter-spacing:.02em;
}
.brand__sub{
  margin:6px 0 0; font-size:11px; letter-spacing:.45em; text-indent:.45em;
  color:var(--gold); text-transform:uppercase;
}

/* ---------- セクション ---------- */
.group{margin-top:20px}
.group__title{
  font-family:var(--serif); font-size:13px; font-weight:600;
  margin:0 0 10px; color:var(--ink);
  display:flex; align-items:center; gap:9px;
}
.group__title::before{content:""; width:3px; height:14px; background:var(--red); border-radius:2px}

/* ---------- セグメント（モード） ---------- */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:6px}
.seg__btn{
  appearance:none; border:0; cursor:pointer; color:var(--ink-dim);
  background:transparent; border-radius:8px; padding:9px 6px;
  font-family:var(--sans); font-size:13px; font-weight:700; line-height:1.2;
  display:flex; flex-direction:column; gap:3px; align-items:center;
  transition:.15s;
}
.seg__btn small{font-size:10px; font-weight:500; opacity:.8; letter-spacing:.04em}
.seg__btn:hover{color:var(--ink)}
.seg__btn.is-active{background:var(--red); color:#fff; box-shadow:0 2px 10px rgba(187,58,48,.35)}

/* ---------- ハンドアウト ---------- */
.ho{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.ho__btn{
  appearance:none; cursor:pointer; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:9px 2px 8px; display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:.15s;
}
.ho__btn:hover{border-color:var(--gold); color:var(--ink)}
.ho__dot{width:13px; height:13px; border-radius:50%; background:#555; border:1px solid rgba(255,255,255,.25)}
.ho__no{font-size:11px; font-weight:800; letter-spacing:.02em}
.ho__name{font-size:11px; font-family:var(--serif)}
.ho__btn.is-active{
  color:#fff; border-color:var(--gold);
  background:linear-gradient(180deg,#2c241f,#241d18);
  box-shadow:inset 0 0 0 1px rgba(201,169,107,.35);
}

/* ---------- 立ち絵ドロップ ---------- */
.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:96px; padding:16px; cursor:pointer; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--radius);
  background:var(--panel); color:var(--ink-dim); transition:.15s;
}
.drop:hover,.drop.is-over{border-color:var(--red); color:var(--ink); background:#221b17}
.drop__icon{font-size:26px; line-height:1; color:var(--gold)}
.drop__text{font-size:12.5px}

.portrait-tools{margin-top:12px; display:flex; flex-direction:column; gap:11px}
.btnline{display:flex; gap:6px; flex-wrap:wrap}
.mini{
  appearance:none; cursor:pointer; flex:1; min-width:84px;
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:8px 6px; font-size:12px; font-family:var(--sans); transition:.15s;
}
.mini:hover{border-color:var(--gold)}
.mini--ghost{color:var(--ink-dim)}
.mini--ghost:hover{color:var(--red); border-color:var(--red)}

/* ---------- 行・コントロール ---------- */
.row{display:flex; align-items:center; gap:10px}
.row--split{justify-content:space-between; margin-top:12px}
.row__label{font-size:12.5px; color:var(--ink-dim); white-space:nowrap}
.row output{font-size:12px; color:var(--ink-dim); min-width:42px; text-align:right; font-variant-numeric:tabular-nums}

input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:3px;
  background:var(--line); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--red); border:2px solid #fff2; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border:2px solid #fff2; border-radius:50%; background:var(--red); cursor:pointer;
}

.text{
  flex:1; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:8px 10px; font-size:13px; font-family:var(--serif);
}
.text:focus{outline:none; border-color:var(--gold)}
.num{
  width:84px; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:7px 8px; font-size:13px; font-variant-numeric:tabular-nums;
}
.num:focus{outline:none; border-color:var(--gold)}
.row__unit{font-size:12px; color:var(--ink-dim)}

.mini:disabled{opacity:.38; cursor:not-allowed}
.mini:disabled:hover{border-color:var(--line)}
input[type=range]:disabled{opacity:.4}
input[type=range]:disabled::-webkit-slider-thumb{background:#777}
.num:disabled{opacity:.4; cursor:not-allowed}

/* ---------- 背景ピッカー ---------- */
.bg{display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
.bg__btn{
  appearance:none; cursor:pointer; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 4px; font-size:12.5px; font-weight:700;
  display:flex; flex-direction:column; gap:3px; align-items:center; transition:.15s;
}
.bg__btn small{font-size:10px; font-weight:500; opacity:.8}
.bg__btn:hover{border-color:var(--gold); color:var(--ink)}
.bg__btn.is-active{color:#fff; border-color:var(--gold); background:linear-gradient(180deg,#2c241f,#241d18)}

/* ---------- 2択トグル ---------- */
.toggle2{display:flex; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.toggle2 button{
  appearance:none; cursor:pointer; border:0; background:transparent; color:var(--ink-dim);
  padding:7px 16px; font-size:13px; font-weight:700; transition:.15s;
}
.toggle2 button.is-active{background:var(--red); color:#fff}

/* レイヤー編集UI（上＝前面） */
.layer-row{display:flex; flex-direction:column; gap:7px}
.layers-list{display:flex; flex-direction:column; gap:5px}
.layer-item{display:flex; align-items:center; gap:8px; padding:5px 7px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); transition:.12s}
.layer-item:hover{border-color:var(--gold)}
.layer-item.is-active{border-color:var(--red); background:#2a1d1b}
.layer-thumb{width:30px; height:30px; flex:0 0 auto; object-fit:contain; border-radius:4px;
  background:repeating-conic-gradient(#0000 0% 25%, #ffffff14 0% 50%) 50%/10px 10px}
.layer-item__name{flex:1; min-width:0; font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.layer-item--fixed .layer-item__name{color:var(--ink-dim)}
.layer-item__btns{display:flex; gap:3px; flex:0 0 auto}
.layer-item__btns button{width:24px; height:22px; padding:0; cursor:pointer; font-size:10px; line-height:1;
  border:1px solid var(--line); background:var(--panel2); color:var(--ink); border-radius:5px}
.layer-item__btns button:hover{border-color:var(--gold)}
.layer-item__btns button:disabled{opacity:.3; cursor:not-allowed}
.portrait-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px}
.portrait-count{font-size:12px; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.portrait-meta .mini{flex:0 0 auto}

/* ---------- チェック ---------- */
.check{display:flex; align-items:flex-start; gap:9px; cursor:pointer; font-size:13px; padding:6px 0; line-height:1.4}
.check input{margin-top:2px; width:16px; height:16px; accent-color:var(--red); cursor:pointer}
.check small{color:var(--ink-dim); font-size:11px}
#labelBox{margin-top:2px; padding-left:2px}

/* ---------- ダウンロード ---------- */
.download{
  width:100%; appearance:none; cursor:pointer; border:0; border-radius:var(--radius);
  background:linear-gradient(180deg,var(--red),var(--red-deep)); color:#fff;
  font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:.04em;
  padding:14px; box-shadow:0 4px 16px rgba(141,42,34,.4); transition:.15s;
}
.download:hover{filter:brightness(1.08); transform:translateY(-1px)}
.download:active{transform:translateY(0)}
.download:disabled{opacity:.45; cursor:not-allowed; filter:grayscale(.4); transform:none}

.hint{font-size:11px; color:var(--ink-dim); margin:2px 0 0; line-height:1.5}
.credit{margin-top:26px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:10.5px; color:var(--ink-dim); line-height:1.7; text-align:center}

/* ---------- プレビュー ---------- */
.stage__inner{
  position:relative; max-width:100%;
  display:flex; align-items:center; justify-content:center;
}
#canvas{
  max-width:100%; max-height:74vh; width:auto; height:auto;
  border-radius:6px; background:#0c0a09;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px var(--line);
  cursor:default; touch-action:none;
}
#canvas.grabbable{cursor:grab}
#canvas.dragging{cursor:grabbing}
.stage__empty{
  position:absolute; inset:0; margin:auto; height:fit-content; width:80%;
  text-align:center; color:var(--ink-dim); font-size:14px; pointer-events:none;
  text-shadow:0 2px 8px #000;
}
.stage__size{font-size:12px; color:var(--ink-dim); letter-spacing:.06em; margin:0}

/* ---------- 起動オーバーレイ ---------- */
.boot{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); z-index:50}
.boot__box{display:flex; flex-direction:column; align-items:center; gap:16px; color:var(--ink-dim); font-size:13px}
.boot__spin{width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--red); animation:spin .8s linear infinite}
.boot.is-error .boot__spin{display:none}
.boot.is-error .boot__box{color:var(--red); max-width:460px; text-align:center; line-height:1.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- レスポンシブ ---------- */
@media (max-width:880px){
  .app{grid-template-columns:1fr; height:auto; min-height:100vh}
  .panel{height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--line)}
  .stage{padding:18px}
  #canvas{max-height:60vh}
}