<<<<<<< HEAD
/* 全体設定・パステルカラー基調 */
:root {
  --bg-color: #FDF9F1;
  --primary-color: #93C5E6;
  --secondary-color: #FFB7B2;
  --accent-color: #FFDAC1;
  --text-main: #333333;
  --border-light: #E0E0E0;
  --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-base); background-color: var(--bg-color); color: var(--text-main); }

.app-wrapper { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ヘッダー・キャラクター */
.header { background: #fff; padding: 10px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 10; }
.character-area { display: flex; align-items: center; gap: 15px; }
.character-icon { font-size: 2.5rem; }
.speech-bubble {
  background: var(--accent-color); padding: 12px 20px; border-radius: 20px;
  position: relative; font-weight: bold; font-size: 1.1rem;
}
.speech-bubble::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  border: 10px solid transparent; border-right-color: var(--accent-color);
}

/* メインレイアウト */
.main-content { display: flex; flex: 1; overflow: hidden; }

/* サイドバー（問題選択） */
.sidebar {
  width: 280px; background: #fff; border-right: 2px solid var(--border-light);
  padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px;
}
.sidebar h2 { font-size: 1.1rem; text-align: center; color: #555; padding-bottom: 10px; border-bottom: 2px dashed var(--border-light); }
.problem-group { display: flex; flex-direction: column; gap: 5px; }
.problem-group label { font-size: 0.9rem; font-weight: bold; color: #666; }
.problem-select, .problem-btn {
  width: 100%; padding: 12px; font-size: 1rem; border: 2px solid var(--primary-color);
  border-radius: 8px; background: #fff; cursor: pointer; min-height: 48px; /* タブレットのタップ領域確保 */
}
.problem-btn { background: var(--primary-color); color: #fff; border: none; font-weight: bold; transition: 0.2s; }
.problem-btn:active { transform: scale(0.97); }

/* シミュレーターエリア */
.simulator-area { flex: 1; display: flex; flex-direction: column; background: #FAFAFA; }
.tabs { display: flex; background: #EEEEEE; }
.tab-btn {
  flex: 1; padding: 15px; border: none; background: #EEEEEE; font-size: 1.1rem;
  font-weight: bold; cursor: pointer; color: #777; transition: 0.2s; min-height: 56px;
}
.tab-btn.active { background: #fff; color: var(--primary-color); border-bottom: 4px solid var(--primary-color); }

.current-equation { text-align: center; font-size: 2.5rem; font-weight: bold; padding: 15px; background: #fff; letter-spacing: 5px; }

/* ツールコンテンツ共通 */
.tool-content { flex: 1; display: none; flex-direction: column; padding: 20px; overflow-y: auto; }
.tool-content.active { display: flex; }
.tool-controls { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.action-btn { background: var(--secondary-color); border: none; padding: 15px 30px; font-size: 1.2rem; border-radius: 30px; font-weight: bold; cursor: pointer; color: #fff; box-shadow: 0 4px 0 #E5A4A0; }
.action-btn:active { transform: translateY(4px); box-shadow: none; }
.reset-btn { background: #ccc; border: none; padding: 15px 20px; font-size: 1rem; border-radius: 30px; cursor: pointer; }

/* ツール1：ブロック */
.blocks-workspace { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.pool-area, .groups-area { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); min-height: 150px;}
.pool-area h3, .groups-area h3 { font-size: 1rem; color: #666; margin-bottom: 10px; }
.dots-container { display: flex; flex-wrap: wrap; gap: 8px; }
.dot { width: 24px; height: 24px; background: var(--primary-color); border-radius: 50%; }
.groups-container { display: flex; flex-wrap: wrap; gap: 15px; }
.group-box { border: 2px dashed var(--secondary-color); padding: 10px; border-radius: 10px; display: flex; gap: 5px; background: #FFF5F5; }

/* ツール2：数直線 */
.number-line-workspace { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 40px; }
.line-container { position: relative; width: 90%; height: 100px; margin-top: 50px; }
.number-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #333; }
/* メモリのズレを防ぐためflexboxと%で厳密配置 */
.line-labels { position: absolute; bottom: -30px; left: 0; width: 100%; display: flex; justify-content: space-between; font-weight: bold; font-size: 1.2rem; }
.jump-arcs { position: absolute; bottom: 4px; left: 0; width: 100%; height: 60px; display: flex; }
.arc { height: 100%; border: 3px solid var(--primary-color); border-bottom: none; border-radius: 50px 50px 0 0; position: relative; }
.arc::after { content: '▶'; position: absolute; right: -8px; bottom: -5px; color: var(--primary-color); font-size: 12px; }
.line-status { font-size: 1.5rem; font-weight: bold; }

/* ツール3：たしかめ算 */
.check-workspace { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;}
.equation-inputs { font-size: 2rem; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;}
.num-input { width: 80px; height: 60px; font-size: 1.5rem; text-align: center; border: 3px solid var(--primary-color); border-radius: 10px; }
.formula-box { background: var(--accent-color); padding: 20px; border-radius: 15px; font-size: 1.5rem; font-weight: bold; display: inline-block; }

/* フッター */
.footer { background: #fff; padding: 15px; text-align: center; border-top: 2px solid var(--border-light); z-index: 10; }
.notebook-message { font-size: 1.2rem; color: #D35400; background: #FFF3E0; display: inline-block; padding: 10px 30px; border-radius: 30px; }
=======
// --- ナビゲーション（問題切り替え） ---
const navBtns = document.querySelectorAll('.nav-btn');
const views = document.querySelectorAll('.worksheet-view');

navBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    navBtns.forEach(b => b.classList.remove('active'));
    views.forEach(v => v.classList.remove('active'));
    e.target.classList.add('active');
    document.getElementById(e.target.dataset.target).classList.add('active');
  });
});

// --- シミュレータータブ切り替え ---
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tool-content').forEach(c => c.classList.remove('active'));
    e.target.classList.add('active');
    document.getElementById(e.target.dataset.target).classList.add('active');
  });
});

// --- 全角数字を半角に変換 ---
function toHalfWidth(str) {
  return str.replace(/[０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0)).replace(/[^0-9]/g, '');
}

// ==========================================
// 判定と状態保存（DOM上で完結）
// ==========================================

const hintText = document.getElementById('character-message');

// すべての入力欄でリアルタイム判定
document.querySelectorAll('.ans-input').forEach(input => {
  input.addEventListener('input', (e) => {
    let val = toHalfWidth(e.target.value);
    e.target.value = val; // 半角に上書き
    
    if (val === e.target.dataset.correct) {
      e.target.classList.add('correct');
    } else {
      e.target.classList.remove('correct');
    }
    checkProgress();
  });
});

// Q1のトグルボタン判定
let q1Selections = [false, false, false, false, false, false, false, false, false];
const q1Buttons = document.querySelectorAll('.q1-choice');
q1Buttons.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('selected');
    q1Selections[index] = !q1Selections[index];
    
    // 正解の判定（わりきれないものだけを選ぶ）
    let isCorrectBtn = btn.dataset.ans === "true";
    if (btn.classList.contains('selected') && isCorrectBtn) {
      btn.classList.add('correct-selection');
    } else {
      btn.classList.remove('correct-selection');
    }
    checkProgress();
  });
});

// 全体の進行状況をチェック
function checkProgress() {
  let allCleared = true;

  // 各問題グループのチェック
  ['q1', 'q2', 'q3', 'q4', 'q5', 'q6'].forEach(qId => {
    let isQCleared = true;
    
    if (qId === 'q1') {
      // Q1: data-ans="true" のものが全て selected、"false"が非selectedであること
      q1Buttons.forEach(btn => {
        let shouldSelect = btn.dataset.ans === "true";
        let isSelected = btn.classList.contains('selected');
        if (shouldSelect !== isSelected) isQCleared = false;
      });
    } else {
      // Q2~Q6: そのセクション内の全ての .ans-input が .correct であること
      const inputs = document.getElementById(qId).querySelectorAll('.ans-input');
      inputs.forEach(input => {
        if (!input.classList.contains('correct')) isQCleared = false;
      });
    }

    // サイドバーの✅更新
    const navBtn = document.querySelector(`.nav-btn[data-target="${qId}"]`);
    if (isQCleared) {
      navBtn.classList.add('cleared');
      if (!navBtn.textContent.includes('✅')) {
        navBtn.textContent = '✅ ' + navBtn.textContent;
      }
    } else {
      navBtn.classList.remove('cleared');
      allCleared = false;
    }
  });

  if (allCleared) {
    hintText.textContent = "すごい！ぜんぶ 正解だよ！";
    setTimeout(() => {
      document.getElementById('clear-screen').classList.add('show');
    }, 500);
  } else {
    hintText.textContent = "ひだりのメニューから 問題をえらんで、ノートにも 答えをかきながら すすめよう！";
  }
}

// ==========================================
// シミュレーターのロジック
// ==========================================
let currentDividend = 0;
let currentDivisor = 0;
let poolDotsCount = 0;
let groupsArray = [];
let jumpsMade = 0;

function loadSim(dividend, divisor) {
  currentDividend = parseInt(dividend);
  currentDivisor = parseInt(divisor);
  
  document.getElementById('eq-dividend').textContent = currentDividend;
  document.getElementById('eq-divisor').textContent = currentDivisor;
  document.getElementById('btn-divisor-val').textContent = currentDivisor;
  document.getElementById('btn-jump-val').textContent = currentDivisor;
  document.getElementById('check-div').textContent = currentDividend;
  document.getElementById('check-dsr').textContent = currentDivisor;
  document.getElementById('check-dsr-2').textContent = currentDivisor;
  
  // ブロック初期化
  poolDotsCount = currentDividend;
  groupsArray = [];
  renderBlocks();
  
  // 数直線初期化
  jumpsMade = 0;
  document.getElementById('jump-arcs').innerHTML = '';
  document.getElementById('line-max-val').textContent = currentDividend;
  updateLineUI();
  
  // たしかめ算初期化
  document.getElementById('sim-input-q').value = '';
  document.getElementById('sim-input-r').value = '';
  updateSimCheck();
}

// --- ブロックツール ---
const blockPool = document.getElementById('block-pool');
const blockGroups = document.getElementById('block-groups');

function renderBlocks() {
  document.getElementById('pool-count').textContent = poolDotsCount;
  blockPool.innerHTML = '';
  for(let i=0; i<poolDotsCount; i++) {
    const dot = document.createElement('div');
    dot.className = 'dot';
    blockPool.appendChild(dot);
  }

  const completed = groupsArray.filter(c => c === currentDivisor).length;
  document.getElementById('group-count').textContent = completed;
  blockGroups.innerHTML = '';
  
  groupsArray.forEach((count, gIndex) => {
    const group = document.createElement('div');
    group.className = 'group-box';
    if(count === currentDivisor) group.classList.add('full');
    for(let i=0; i<count; i++) {
      const dot = document.createElement('div');
      dot.className = 'dot';
      dot.dataset.gIndex = gIndex;
      group.appendChild(dot);
    }
    blockGroups.appendChild(group);
  });
}

blockPool.addEventListener('click', (e) => {
  if(e.target.classList.contains('dot') && poolDotsCount > 0) {
    poolDotsCount--;
    let tIdx = groupsArray.findIndex(c => c < currentDivisor);
    if(tIdx === -1) groupsArray.push(1);
    else groupsArray[tIdx]++;
    renderBlocks();
  }
});

blockGroups.addEventListener('click', (e) => {
  if(e.target.classList.contains('dot')) {
    const gIdx = parseInt(e.target.dataset.gIndex);
    groupsArray[gIdx]--;
    poolDotsCount++;
    if(groupsArray[gIdx] === 0) groupsArray.splice(gIdx, 1);
    renderBlocks();
  }
});

document.getElementById('auto-group-btn').addEventListener('click', () => {
  if (poolDotsCount >= currentDivisor) {
    poolDotsCount -= currentDivisor;
    groupsArray.push(currentDivisor);
    renderBlocks();
  }
});

document.getElementById('reset-blocks-btn').addEventListener('click', () => {
  poolDotsCount = currentDividend; groupsArray = []; renderBlocks();
});

// --- 数直線ツール ---
function updateLineUI() {
  const currentPos = jumpsMade * currentDivisor;
  document.getElementById('jumped-total').textContent = currentPos;
  document.getElementById('jump-remain').textContent = currentDividend - currentPos;
}

document.getElementById('jump-btn').addEventListener('click', () => {
  const currentPos = jumpsMade * currentDivisor;
  if ((currentDividend - currentPos) >= currentDivisor) {
    jumpsMade++;
    const arcPercent = (currentDivisor / currentDividend) * 100;
    const arc = document.createElement('div');
    arc.className = 'arc';
    arc.style.width = `${arcPercent}%`;
    document.getElementById('jump-arcs').appendChild(arc);
    updateLineUI();
  }
});

document.getElementById('reset-line-btn').addEventListener('click', () => {
  jumpsMade = 0; document.getElementById('jump-arcs').innerHTML = ''; updateLineUI();
});

// --- たしかめ算ツール（シミュレーター内） ---
const simInQ = document.getElementById('sim-input-q');
const simInR = document.getElementById('sim-input-r');
function updateSimCheck() {
  let q = toHalfWidth(simInQ.value);
  let r = toHalfWidth(simInR.value);
  simInQ.value = q; simInR.value = r;
  
  document.getElementById('mirror-q').textContent = q !== "" ? q : "?";
  document.getElementById('mirror-r').textContent = r !== "" ? r : "?";
  
  if(q !== "" && r !== "") {
    document.getElementById('calc-result').textContent = (currentDivisor * parseInt(q)) + parseInt(r);
  } else {
    document.getElementById('calc-result').textContent = "?";
  }
}
simInQ.addEventListener('input', updateSimCheck);
simInR.addEventListener('input', updateSimCheck);

// 初期ロード時のダミーセット
loadSim(16, 2);
>>>>>>> dab01cf64e1f894f42ffc4b53e7f14216635ece6