:root{
  --bg:#faf7f3;
  --card:#ffffff;
  --ink:#1c1c1c;
  --ink-sub:#8a8378;
  --line:#eee7de;
  --accent:#ff6b52;
  --chip-bg:#f3ede5;
  --shadow:0 6px 24px rgba(60,40,20,.10);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}
button, input{ font-family:inherit; }
.hidden{ display:none !important; }

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

/* ---------- スタート画面 ---------- */
#startScreen{
  flex:1; display:flex; align-items:center; justify-content:center; padding:24px;
}
.start-card{ max-width:360px; text-align:center; }
.start-icon{ font-size:52px; margin-bottom:6px; }
.start-card h1{ font-size:22px; margin:0 0 10px; }
.start-card p{ font-size:14px; color:var(--ink-sub); line-height:1.7; margin:0 0 26px; }
.btn-primary{
  background:var(--accent); color:#fff; border:none; font-weight:700; font-size:16px;
  padding:14px 34px; border-radius:999px; box-shadow:var(--shadow); touch-action:manipulation;
}

#editorScreen{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* ---------- ヘッダー ---------- */
#appHeader{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:calc(7px + env(safe-area-inset-top)) 10px 7px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.header-title{ font-size:14px; font-weight:700; color:var(--ink); }
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--chip-bg);
  color:var(--ink); font-size:15px; display:flex; align-items:center; justify-content:center;
  touch-action:manipulation;
}

/* ---------- ステージ ---------- */
#stage{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:14px; position:relative;
}
#previewCanvas{
  touch-action:none; border-radius:10px; box-shadow:var(--shadow); background:#fff; display:block;
}
#emptyHint{ color:var(--ink-sub); font-size:14px; text-align:center; padding:20px; line-height:1.8; }

/* ---------- 調整シート ---------- */
#sheet{
  flex:none; max-height:0; overflow:hidden;
  background:var(--card); border-top:1px solid var(--line);
  transition:max-height .26s ease;
}
#sheet.on{ max-height:460px; overflow-y:auto; }
.sheet-inner{ padding:10px 14px 8px; }
.row{ margin-bottom:12px; }
.row-label{ font-size:11px; font-weight:700; color:var(--ink-sub); margin-bottom:6px; letter-spacing:.02em; }
.chip-scroll{
  display:flex; align-items:center; gap:8px; overflow-x:auto; padding-bottom:2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chip-scroll::-webkit-scrollbar{ display:none; }

.chip{
  flex:none; border:none; background:var(--chip-bg); color:var(--ink);
  font-size:13px; padding:9px 15px; border-radius:999px; touch-action:manipulation; white-space:nowrap;
}
.chip.on{ background:var(--accent); color:#fff; font-weight:700; }
.chip-icon{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 10px; }
.chip-icon svg{ display:block; border-radius:6px; overflow:hidden; }
.chip-icon span{ font-size:10.5px; }
.sep{ flex:none; width:1px; height:26px; background:var(--line); margin:0 2px; }

.thumb{
  position:relative; width:56px; height:56px; border-radius:13px; overflow:hidden;
  flex:none; touch-action:none; background:#eee; box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.thumb .primary-dot{
  position:absolute; top:4px; left:4px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px rgba(255,255,255,.85);
}
.thumb .badge{
  position:absolute; bottom:3px; right:3px; background:rgba(0,0,0,.62); color:#fff;
  font-size:9px; padding:1px 5px; border-radius:7px; font-weight:700;
}
.thumb .rm{
  position:absolute; top:1px; right:1px; width:22px; height:22px; border-radius:50%; border:none; padding:0;
  background:rgba(0,0,0,.6); color:#fff; font-size:12px; line-height:22px; text-align:center;
}
.thumb-add{
  width:56px; height:56px; border-radius:13px; border:2px dashed var(--line); flex:none; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--ink-sub); font-size:22px; background:none;
  touch-action:manipulation;
}

/* ---------- 下部バー ---------- */
#bottomBar{
  flex:none; display:flex; gap:6px; background:var(--card); border-top:1px solid var(--line);
  padding:7px 8px calc(9px + env(safe-area-inset-bottom));
}
.bar-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--ink); font-size:11.5px; padding:9px 4px;
  border-radius:16px; touch-action:manipulation;
}
.bar-btn.on{ background:var(--chip-bg); }
.bar-btn-primary{ background:var(--accent); color:#fff; font-weight:700; }
.bar-btn-primary:disabled{ opacity:.45; }
.bar-btn.busy{ opacity:.6; }
.bar-icon{ font-size:19px; line-height:1; }

.bar-btn-icon{
  flex:none; width:38px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--ink); font-size:18px; padding:9px 0;
  border-radius:16px; touch-action:manipulation;
}
.bar-btn-icon:disabled{ opacity:.28; }

/* ---------- モーダル ---------- */
.modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(20,16,10,.42); }
.modal-sheet{
  position:relative; width:100%; max-height:84dvh; overflow-y:auto;
  background:var(--card); border-radius:20px 20px 0 0;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px;
}
.modal-title{ font-size:15px; font-weight:700; }
.modal-body{ padding:4px 16px 8px; }
.field{ display:block; margin-bottom:16px; }
.field-label{ display:block; font-size:12px; font-weight:700; color:var(--ink-sub); margin-bottom:7px; }
.field input[type="text"], .field input[type="number"]{
  width:100%; font-size:16px; padding:11px 13px; border-radius:12px;
  border:1px solid var(--line); background:#fdfbf8; color:var(--ink);
}
.field-row{ display:flex; gap:8px; align-items:center; }
.field-row input{ flex:1; }
.field-toggle{ display:flex; align-items:center; justify-content:space-between; }
.field-toggle input{ width:20px; height:20px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- トースト ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(80px + env(safe-area-inset-bottom));
  transform:translateX(-50%); background:rgba(20,18,14,.9); color:#fff;
  font-size:13px; line-height:1.6; padding:10px 18px; border-radius:13px;
  max-width:88vw; text-align:center; z-index:80; transition:opacity .2s;
}