/* 編み物の友 デザイン（正本: docs/design/amirobo-ui.pen「番号のついた優しい紙のカード」）
   編み図は黒記号×白地が前提。強制ダークモード（Android Chrome自動ダーク等）の色反転で
   記号が見えなくなるのを防ぐため、ライト固定を宣言する（index.htmlのmetaと対） */
:root {
  color-scheme: only light;
  --step1: #C0392B;
  --step2: #E67E22;
  --step3: #F1C40F;
  --step4: #34728C;
  --paper: #ECECEE;
  --card: #FBFBFC;
  --ink: #222222;
  --ink-soft: #6B6B6B;
  --tab3-ink: #4A3A00;
  --line: #E3E3E6;
  --chip: #F4F4F6;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --r-card: 16px;
  --r-btn: 12px;
  --r-tab: 8px;
}
* { box-sizing: border-box; font-size: 18px; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hiragino Maru Gothic ProN', 'BIZ UDGothic', 'Yu Gothic', sans-serif;
}
#app { position: relative; width: 100vw; height: 100vh; overflow: clip; }

/* アプリ名（固定表示。工程レイヤーより上・タップは透過） */
.wordmark {
  position: fixed;
  top: 10px; left: 0; right: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--ink-soft);
  z-index: 10;
  pointer-events: none;
}

.step-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 44px 16px 16px;
  transition: transform 0.3s ease;
  overflow-y: auto;
  background: var(--paper);
}
.step-layer svg { max-width: 100%; height: auto; }

/* 工程見出し＝番号タブ（01〜04）＋工程名。タブが現在地表示を兼ねる */
h2.step-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
  font-size: 24px;
  font-weight: 800;
}
h2.step-h::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 10px 0;
  border-radius: var(--r-tab);
  font-size: 30px;
  font-weight: 800;
  color: #FFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
}
h2.step-h.s1 { color: var(--step1); }
h2.step-h.s1::before { content: "01"; background: var(--step1); }
h2.step-h.s2 { color: var(--step2); }
h2.step-h.s2::before { content: "02"; background: var(--step2); }
h2.step-h.s3 { color: var(--tab3-ink); }
h2.step-h.s3::before { content: "03"; background: var(--step3); color: var(--tab3-ink); }
h2.step-h.s4 { color: var(--step4); }
h2.step-h.s4::before { content: "04"; background: var(--step4); }

/* 紙カード（工程の中身を載せる） */
.step-card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* ボタン共通: 白カードボタン */
.big-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  margin: 10px 0;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
}
.big-button:disabled { opacity: 0.45; cursor: default; }

/* 作品選択ボタン（アイコン付き・左寄せ） */
.select-button { justify-content: flex-start; }
.select-button .icon { display: inline-flex; flex-shrink: 0; color: var(--ink-soft); }

/* 主ボタン（工程色） */
.primary { border: none; color: #FFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.primary.s2 { background: var(--step2); }
.primary.s3 { background: var(--step3); color: var(--tab3-ink); }
.primary.s4 { background: var(--step4); }

/* 印刷の大きさ選択（選択中=青枠＋チェック） */
.option-button { justify-content: flex-start; }
.option-button::before { content: "○"; color: var(--ink-soft); font-size: 22px; }
.option-button.selected { border: 2px solid var(--step4); }
.option-button.selected::before { content: "✓"; color: var(--step4); font-weight: 800; }

/* つづきから */
.resume-heading { margin: 18px 0 6px; font-size: 18px; font-weight: 700; color: var(--ink-soft); }
.resume-button {
  background: var(--chip);
  border: none;
  color: var(--ink-soft);
  font-weight: 400;
  min-height: 56px;
  justify-content: flex-start;
}

/* 採寸入力 */
label { display: block; margin: 12px 0; font-size: 18px; }
label input[type="number"] {
  width: 140px;
  min-height: 56px;
  margin-left: 12px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}

.problems p { color: #B33; }
.notice { background: #FFF4E5; padding: 12px; border-radius: var(--r-tab); }
.notice-error { background: #FDE8E8; }

/* 編み図カード */
.chart-card {
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 12px;
  margin: 8px 0;
}

/* 工具箱 */
.toolbox {
  position: sticky;
  bottom: 0;
  background: #FFF;
  border-radius: var(--r-btn);
  box-shadow: var(--shadow);
  padding: 8px;
  margin-top: 8px;
}
.toolbox-bar { display: flex; gap: 8px; }
.tool-button {
  flex: 1;
  min-height: 56px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: var(--chip);
  border: none;
  border-radius: var(--r-tab);
  cursor: pointer;
}
.tool-active { background: #FBEFC1; border: 2px solid var(--tab3-ink); color: var(--tab3-ink); }
.tool-panel { padding: 10px 2px 2px; }
.palette-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch { width: 52px; height: 52px; border-radius: var(--r-tab); border: 1px solid #999; cursor: pointer; }
.chart-editable { cursor: crosshair; }
.adjust-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.adjust-button { flex: 1; }
.adjust-value { min-width: 2.5em; text-align: center; font-size: 24px; font-weight: 800; }
.stamp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 警告 */
.warning-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  margin: 8px 0;
  font-family: inherit;
  font-size: 18px;
  color: var(--tab3-ink);
  background: #FFF4CE;
  border: none;
  border-radius: var(--r-tab);
  cursor: pointer;
}
.warning-bar::before { content: "⚠"; font-size: 20px; }
.warning-list { background: #FFF4CE; border-radius: var(--r-tab); padding: 12px; }
.warning-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.warning-row span { flex: 1; }
.warning-row .big-button { width: auto; flex-shrink: 0; margin: 0; }