/* iPhone(Safari)前提のダークUI。ピンチ/ダブルタップ拡大は無効化し、
   キャンバス上のジェスチャだけを自前で扱う。 */
:root{
  --bg:#0e1014;
  --panel:#171a21;
  --panel2:#1f232c;
  --line:#2b303b;
  --fg:#eef1f6;
  --sub:#9aa3b2;
  --accent:#4c8dff;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
/* display を指定した要素にも hidden 属性を効かせる */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  overscroll-behavior:none; touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}
button, textarea, input{font-family:inherit;}
button{
  background:var(--panel2); color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; font-size:14px; cursor:pointer;
}
button:active{transform:scale(.97);}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700;}
button.ghost{background:transparent; border-color:transparent; color:var(--sub);}
button.wide{flex:1;}

#app{display:flex; flex-direction:column; height:100dvh;}

#topbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  border-bottom:1px solid var(--line); background:var(--bg);
}
#topbar .title{font-weight:700; letter-spacing:.04em;}

#stage{
  flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:10px; gap:8px;
}
#canvasWrap{
  max-width:100%; max-height:100%; display:flex;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));
}
#cv{
  max-width:100%; max-height:100%; display:block; border-radius:6px;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
#hint{margin:0; color:var(--sub); font-size:12px; text-align:center;}

#ctxbar{
  display:flex; gap:6px; overflow-x:auto; padding:6px 10px;
  border-top:1px solid var(--line); background:var(--panel);
  scrollbar-width:none;
}
#ctxbar::-webkit-scrollbar{display:none;}
#ctxbar button{white-space:nowrap; font-size:13px; padding:7px 10px;}

#tabs{
  display:flex; background:var(--panel); border-top:1px solid var(--line);
}
#tabs button{
  flex:1; border:0; border-radius:0; background:transparent; color:var(--sub);
  font-size:12px; padding:10px 2px;
}
#tabs button.on{color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent);}

#panels{
  background:var(--panel); border-top:1px solid var(--line);
  padding:10px 12px calc(10px + var(--safe-b));
  height:200px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.panel{display:none;}
.panel.on{display:block;}
.row-label{color:var(--sub); font-size:11px; margin:2px 0 6px;}

.chips{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  white-space:nowrap; padding:7px 11px; border-radius:999px;
  background:var(--panel2); border:1px solid var(--line); font-size:13px; color:var(--fg);
}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.chip.swatch{width:34px; height:34px; padding:0; border-radius:50%; flex:0 0 auto;}

.layouts{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none;}
.layouts::-webkit-scrollbar{display:none;}
.lay{
  flex:0 0 auto; width:52px; height:52px; padding:4px; border-radius:10px;
  background:var(--panel2); border:1px solid var(--line); position:relative;
}
.lay.on{border-color:var(--accent); background:#24304a;}
.lay i{position:absolute; background:var(--sub); border-radius:2px; display:block;}
.lay.on i{background:#cfe0ff;}

.thumbs{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; min-height:64px; scrollbar-width:none;}
.thumbs::-webkit-scrollbar{display:none;}
.thumb{
  flex:0 0 auto; width:58px; height:58px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; background:#000; position:relative;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.thumb.on{border-color:var(--accent);}
.thumb .n{
  position:absolute; left:2px; top:2px; font-size:10px; background:rgba(0,0,0,.6);
  padding:0 4px; border-radius:4px;
}
.empty-note{color:var(--sub); font-size:12px; padding:14px 2px;}

.btnrow{display:flex; gap:6px; margin-top:6px; align-items:center;}
.toggle{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sub); flex:1;}

.sliders{display:flex; flex-direction:column; gap:2px;}
.sl{display:flex; align-items:center; gap:8px;}
.sl label{width:64px; font-size:12px; color:var(--sub); flex:0 0 auto;}
.sl output{width:38px; text-align:right; font-size:11px; color:var(--sub); font-variant-numeric:tabular-nums;}
input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none; height:28px; background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--line); border-radius:2px;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--fg); margin-top:-8.5px; box-shadow:0 1px 3px rgba(0,0,0,.6);
}

textarea{
  width:100%; background:var(--panel2); color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:8px; font-size:16px; resize:none; margin:6px 0;
}

#sheet{
  position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:50;
  display:flex; align-items:flex-end; backdrop-filter:blur(6px);
}
.sheet-inner{
  width:100%; max-height:92dvh; overflow-y:auto; background:var(--panel);
  border-radius:18px 18px 0 0; padding:14px 14px calc(18px + var(--safe-b));
  display:flex; flex-direction:column; gap:10px;
}
.sheet-head{display:flex; justify-content:space-between; align-items:center;}
#resultImg{
  width:100%; max-height:52dvh; object-fit:contain; border-radius:10px; background:#000;
}
.note{margin:0; color:var(--sub); font-size:12px;}

#toast{
  position:fixed; left:50%; bottom:calc(90px + var(--safe-b)); transform:translateX(-50%);
  background:rgba(20,22,28,.95); border:1px solid var(--line); color:var(--fg);
  padding:9px 14px; border-radius:999px; font-size:13px; z-index:60; max-width:90vw; text-align:center;
}