:root {
  --primary: #1565c0;
  --secondary: #f57c00;
  --bg-color: #f0f4f8;
  --card-bg: #ffffff;
  --grid-minor: #cfd8dc;
  --grid-major: #78909c;
  --bar-color: #ef5350;
  --bar-color-mini: #ff7043;
}

body {
  font-family: 'Zen Maru Gothic', sans-serif;
  background-color: var(--bg-color);
  color: #333; margin: 0; padding: 20px;
}

.app-container { max-width: 1000px; margin: 0 auto; }

header { text-align: center; margin-bottom: 25px; background: white; padding: 15px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
header h1 { color: var(--primary); margin: 0 0 5px 0; font-size: 1.8rem; }
header p { margin: 0; font-weight: bold; color: #555; }

.hidden { display: none !important; }

/* ステップカード共通 */
.step-card { background: var(--card-bg); border-radius: 12px; margin-bottom: 30px; box-shadow: 0 6px 15px rgba(0,0,0,0.08); overflow: hidden; border: 2px solid #e3f2fd; }
.step-header { background: #e3f2fd; padding: 15px 20px; border-bottom: 3px solid #bbdefb; }
.step-header h2 { margin: 0; color: #0d47a1; font-size: 1.4rem; }
.step-content { padding: 25px; }

/* 吹き出し */
.story-box { display: flex; background: #fff9c4; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 2px solid #fbc02d; font-size: 1.1rem; font-weight: bold; align-items: center; }
.character { color: #f57f17; min-width: 100px; }
.dialogue { color: #333; }

/* ヒント・ボタン類 */
.instruction { font-size: 1.1rem; font-weight: bold; color: #455a64; margin-bottom: 15px; }
.hint-btn { background: #fff59d; border: 2px solid #fbc02d; padding: 6px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; color: #f57f17; margin-bottom: 10px; transition: 0.1s; }
.hint-btn:active { transform: translateY(2px); }
.hint-box { background: #fffde7; border: 1px dashed #fbc02d; padding: 15px; border-radius: 8px; font-size: 1.1rem; margin-bottom: 20px; line-height: 1.5; }
.primary-btn { background: var(--secondary); color: white; border: none; padding: 15px 40px; font-size: 1.3rem; font-weight: bold; border-radius: 30px; cursor: pointer; box-shadow: 0 4px 0 #e65100; transition: 0.1s; display: block; margin: 30px auto 0; }
.primary-btn:active { transform: translateY(4px); box-shadow: none; }

/* ================== 動的グラフ（目盛り変更ギミック） ================== */
.graph-interactive-area { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.controls { text-align: center; width: 100%; }
.btn-group { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
.scale-btn { background: #eceff1; border: 2px solid #b0bec5; padding: 10px 20px; border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer; color: #455a64; transition: all 0.3s; }
.scale-btn.active { background: #1976d2; color: white; border-color: #0d47a1; box-shadow: 0 4px 10px rgba(25, 118, 210, 0.4); }
.scale-btn.highlight { animation: pulse 2s infinite; border-color: #f57c00; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 124, 0, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(245, 124, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 124, 0, 0); } }

/* 縦グラフ構造 */
.graph-v-wrapper { display: flex; height: 350px; position: relative; width: 450px; padding-bottom: 80px; }
.y-axis-v { width: 30px; position: relative; margin-right: 10px; }
.y-axis-v span { position: absolute; right: 0; transform: translateY(-50%); font-weight: bold; font-size: 1rem; color: #555; transition: top 0.5s; }
.graph-area-v { flex-grow: 1; position: relative; border-left: 2px solid #333; border-bottom: 2px solid #333; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 10px; transition: background 0.5s; }

/* CSSのグラデーションで10分割のグリッドを描画 */
.graph-area-v { background-image: repeating-linear-gradient(to top, transparent, transparent calc(100% / 10 - 1px), var(--grid-minor) calc(100% / 10 - 1px), var(--grid-minor) calc(100% / 10)); }
.graph-area-v::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background-image: repeating-linear-gradient(to top, transparent, transparent calc(100% / 2 - 2px), var(--grid-major) calc(100% / 2 - 2px), var(--grid-major) calc(100% / 2)); }

.bar-v-group { flex: 1; display: flex; justify-content: center; position: relative; z-index: 2; height: 100%; align-items: flex-end; }
.bar-v { width: 40px; background: var(--bar-color); border: 2px solid #b71c1c; border-bottom: none; height: 0%; transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* X軸の縦書き（文字切れ対策） */
.x-axis-v { position: absolute; bottom: 0; left: 40px; right: 0; height: 80px; display: flex; justify-content: space-around; padding-top: 5px; }
.x-axis-v span { writing-mode: vertical-rl; font-size: 1.1rem; font-weight: bold; letter-spacing: 2px; color: #333; }

/* ================== ポスター作成エリア ================== */
.poster-workspace { display: flex; gap: 15px; margin-top: 20px; overflow-x: auto; padding-bottom: 10px; }
.poster-item { flex: 1; min-width: 260px; background: #fff; border: 2px solid #cfd8dc; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; align-items: center; }
.poster-item h3 { margin: 0 0 15px 0; font-size: 1.2rem; color: #00695c; text-align: center; }

/* ミニグラフの完全な文字切れ対策 */
.mini-graph {
  width: 100%;
  height: 120px;
  border-bottom: 2px solid #90a4ae;
  border-left: 2px solid #90a4ae;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 5px;
  margin-bottom: 85px; /* ここを大きくしてテキストボックスとの重なりを防ぐ */
  position: relative;
}

/* JavaScriptで生成する棒とラベルの包み要素 */
.mini-bar-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
  height: 100%;
  align-items: flex-end;
}

.mini-bar { width: 22px; background: var(--bar-color-mini); transition: 0.5s; border-radius: 2px 2px 0 0; }

.mini-label {
  position: absolute;
  top: 100%; /* グラフの底面からスタート */
  padding-top: 6px; /* 少しだけ隙間をあける */
  writing-mode: vertical-rl;
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* テキストエリアの調整 */
textarea { width: 100%; height: 90px; padding: 12px; border: 2px solid #b0bec5; border-radius: 6px; font-family: inherit; font-size: 1.05rem; resize: none; box-sizing: border-box; background-color: #fafafa; }
textarea:focus { outline: none; border-color: #1565c0; background-color: #fff; }

/* ================== 発表用モーダル ================== */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-content { background: #fff9c4; width: 95%; max-width: 1100px; height: 90vh; border-radius: 16px; padding: 30px; position: relative; overflow-y: auto; border: 8px solid #fbc02d; }
.close-btn { position: absolute; top: 15px; right: 20px; background: #e53935; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 1.1rem; }
.final-poster { text-align: center; }
.poster-title { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 2.5rem; color: #d84315; margin-bottom: 30px; text-shadow: 2px 2px 0 #fff; border-bottom: 4px dashed #ffab91; padding-bottom: 10px; }
.poster-grid { display: flex; gap: 20px; justify-content: center; }
.poster-result { flex: 1; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; }
.result-text { margin-top: 20px; font-size: 1.3rem; font-weight: bold; color: #1565c0; text-align: left; width: 100%; border: 3px solid #64b5f6; padding: 15px; border-radius: 8px; background: #e3f2fd; min-height: 80px; box-sizing: border-box;}

/* モーダル内のクローングラフの文字切れ対策 */
.mini-graph-clone {
  width: 100%;
  max-width: 220px;
  height: 150px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin-bottom: 80px; /* ここを大きくして下のテキストとの重なりを防ぐ */
  position: relative;
}