/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: mmpg
 * BUILD_ID: YR-2025-0826-K1                 // ← 公開用の可視ビルドID
 * CANARY_ZW
 * SPDX-License-Identifier: LicenseRef-Yuuraku-Proprietary
 * Contact: yuurakunomori@gmail.com  |  URL: https://yuurakus.jp/
 *
 * 重要
 * 
* [日本語 / Japanese]
 * 本スタイルシートおよび関連ファイルの著作権（著作権法上の権利）は、パソコンサロンゆうらくに専属します。
 * 法令で明示的に認められる場合を除き、当社の事前の書面許諾なく、複製・複写・転載・転用・編集・改変・翻案・
 * 逆コンパイル／リバースエンジニアリング・再配布・商用利用・公衆送信（Webへのアップロードを含む）・
 * 自動取得／スクレイピング等の二次利用を固く禁じます。侵害が判明した場合、警告なく直ちに
 * 差止請求・損害賠償請求等の法的措置を厳格に行います。
 * 【重要】本スタイルシートには検証用のBUILD IDおよび不可視の「カナリア文字（ウォーターマーク）」が埋め込まれ、
 * ソースには識別用IDが隠されています。これらの削除・改変は契約違反・不正競争・著作権侵害等として追及します。
 *
 * [English]
 * Copyright in this stylesheet and related files is owned exclusively by
 * Pasokon Salon Yuuraku unless otherwise stated. Except as expressly permitted by law,
 * any reproduction, modification, adaptation, reverse engineering, redistribution,
 * commercial use, public transmission (including posting on the web), or automated
 * collection/scraping without prior written permission is strictly prohibited.
 * Upon detection of infringement, we will immediately pursue legal remedies including
 * injunctive relief and damages. IMPORTANT: This stylesheet embeds a verifiable BUILD ID
 * and invisible “canary” watermark characters, and an identification ID is hidden in the source.
 * Removal or alteration will be treated as a violation and strictly enforced.
 *
 * [中文 / Chinese (Simplified)]
 * 本样式表及相关文件之著作权，除非另有说明，专属于「Pasokon Salon Yuuraku」。
 * 未经事先书面许可，严禁复制、转载、修改、改编、逆向工程、再分发、商业使用、
 * 公开传播（含上传至网络）及自动抓取/爬取等二次利用。一经发现侵权，将立即采取包括
 * 禁令与损害赔偿在内的法律措施。重要：本样式表内已嵌入可验证的BUILD ID与不可见
 * “金丝雀”水印字符，且源代码中隐藏有识别用ID。擅自删除或篡改将被视为违规并依法追究。
 *
 * [한국어 / Korean]
 * 본 스타일시트 및 관련 파일의 저작권은 별도 고지가 없는 한
 * ‘파소콘 살롱 유우라쿠(Pasokon Salon Yuuraku)’에 전속됩니다.
 * 사전 서면 허가 없이 복제, 전재, 전용, 수정, 각색, 리버스 엔지니어링,
 * 재배포, 상업적 이용, 공중송신(웹 게시 포함), 자동 수집·스크래핑 등의 2차 이용을 엄격히 금합니다.
 * 위반 시 예고 없이 즉시 금지청구 및 손해배상 청구 등 법적 조치를 취합니다.
 * 중요: 본 스타일시트에는 검증 가능한 BUILD ID와 보이지 않는 ‘카나리아(워터마크) 문자’가 포함되며,
 * 소스 내부에는 식별용 ID가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */

/*================================================================================
  style.css — 見取り算 練習問題ジェネレータ 用スタイル（一から再生成）
  ・黒板テクスチャ背景
  ・教室の床（.problems-grid）
  ・教室の机（.card）
  ・最大5列×300px、余白調整
  ・ボタン・枠線太め
  ・「解答終了」は .action-btn と同じ配色
================================================================================*/

/*--------------------------------------
  ベースリセット / Base Reset
--------------------------------------*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: #2c3e50; /* 黒板色 */
  color: #fafafa;            /* チョークホワイト */
  line-height: 1.5;
  position: relative;
}

/*--------------------------------------
  黒板テクスチャ背景 / Chalkboard Background
--------------------------------------*/
body {
  background-image: url('images/chalkboard-texture.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: -1;
}

/*--------------------------------------
  言語切替部分 / Language Toggle
--------------------------------------*/
.lang-toggle{display:flex;gap:8px;}
.lang-en .lang-ja { display: none; }
body:not(.lang-en) .lang-en { display: none; }

/*--------------------------------------
  ヘッダー / Header
--------------------------------------*/
.header-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 0;margin:0;}

/*--------------------------------------
  タイトル / Title
--------------------------------------*/
h1 {
  text-align: left;
  margin: 0;
  font-size: 2.4rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  color: #fafafa;
}

/*--------------------------------------
  コントロールパネル / Controls Panel
--------------------------------------*/
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background-color: rgba(255,255,255,0.9);
  padding: 16px;
  border-radius: 8px;
  margin: 0 16px 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.field {
  display: flex;
  flex-direction: column;
  min-width: 104px;
}
.field label {
  margin-bottom: 4px;
  font-weight: 600;
  color: #2c3e50;
}
.field input[type="number"],
.field select {
  padding: 8px;
  border: 2px solid #2c3e50;
  border-radius: 4px;
  font-size: 1rem;
}
.checkboxes {
  display: flex;
  gap: 8px;
}
.checkboxes label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: #2c3e50;
}
#show-answers {
  margin-top: 8px;
}
.action-btn {
  background-color: #fafafa;
  color: #2c3e50;
  border: 3px solid #2c3e50;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  min-width: 104px;
  text-align: center;
}
.action-btn:hover {
  background-color: #e0e0e0;
}

/*--------------------------------------
  級判定表示 / Level Judgement
--------------------------------------*/
#level-judgement {
  margin: 16px;
  font-weight: 700;
  text-align: center;
  background-color: rgba(255,255,255,0.9);
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  color: #2c3e50;
}

/*--------------------------------------
  説明セクション / Instructions
--------------------------------------*/
#instructions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 16px;
}
#instructions .box {
  flex: 1;
  background-color: rgba(255,255,255,0.9);
  border: 3px solid #2c3e50;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#instructions .box summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  background-color: #2c3e50;
  color: #fafafa;
  font-weight: 600;
  user-select: none;
}
#instructions .box summary::-webkit-details-marker {
  display: none;
}
#instructions .box ul,
#instructions .box ol {
  display: none;
}
#instructions .box[open] > ul,
#instructions .box[open] > ol {
  display: block;
  padding: 16px;
}
#instructions .box ul,
#instructions .box ol {
  padding-left: 24px;
  color: #2c3e50;
}
#instructions .box li {
  margin-bottom: 8px;
  line-height: 1.4;
}

/*--------------------------------------
  結果概要 / Summary
--------------------------------------*/
.problems-summary {
  text-align: center;
  margin: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
}
.sub-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 16px 32px;
}
.sub-summary div {
  font-size: 1rem;
  color: #ffffff;
}
/* 解答終了ボタンは .action-btn と同じ配色 */
#finishBtn {
  /* .action-btn と同じ rules */
  background-color: #fafafa;
  color: #2c3e50;
  border: 3px solid #2c3e50;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  min-width: 104px;
  text-align: center;
}
#finishBtn:hover {
  background-color: #e0e0e0;
}

/*--------------------------------------
  問題グリッド / Problems Grid
--------------------------------------*/
.problems-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1500px; /* 300px × 5列 */
  margin: 0 auto 32px;
  padding: 16px;
  background-image: url('images/classroom-floor.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}
.problems-grid:empty {
  background-image: none;
  padding: 0;
  margin-bottom: 0;
}

/*--------------------------------------
  問題カード / Problem Card
--------------------------------------*/
.card {
  flex: 0 0 300px;
  width: 300px;
  background-image: url('images/classroom-desk.jpg');
  background-size: cover;
  background-position: center;
  border: 3px solid #2c3e50;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.card-header div:first-child {
  font-weight: 500;
  color: #2c3e50;
}
.judgement {
  font-size: 0.9rem;
  color: #2c3e50;
}
.judgement.pass {
  color: #2e7d32;
}
.judgement.fail {
  color: #c62828;
}

/*--------------------------------------
  数式 / Formula
--------------------------------------*/
.formula {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
.horizontal-text {
  font-size: 1.5rem;
  font-weight: 500;
  color: #2c3e50;
}
.vertical-box {
  text-align: right;
}
.vertical-line {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
.operator {
  width: 1.2em;
  margin-right: 0.2em;
  font-size: 1.2rem;
  color: #2c3e50;
}
.number {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  color: #2c3e50;
}
.separator {
  border-top: 2px solid #555;
  margin-top: 4px;
}

/*--------------------------------------
  回答欄 / Answer Input
--------------------------------------*/
.answer-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.answer-input {
  width: 100%;
}
.answer-input input {
  width: 100%;
  padding: 8px;
  border: 2px solid #2c3e50;
  border-radius: 8px;
  font-size: 1rem;
  color: #2c3e50;
  background-color: #fafafa;
}
.correct {
  border-color: #2e7d32 !important;
}
.wrong {
  border-color: #c62828 !important;
}

/*--------------------------------------
  LAPタイム表示 / LAP Time
--------------------------------------*/
.small-muted {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 4px;
}


/* =========================
   Two-column layout shell
   ========================= */
.app-shell{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 24px;
}
.layout.two-col{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0 16px;
}
.left-panel{
  flex: 1 1 auto;
  min-width: 0;
}
.right-panel{
  flex: 0 0 380px;
  width: 380px;
  position: sticky;
  top: 8px;
}

/* Make the controls block fill the right column neatly */
.right-panel .controls{
  margin: 0;
  width: 100%;
}

/* Fit game cards into the left panel more comfortably on 1280px screens */
.problems-grid{
  max-width: 100%;
}
.card{
  flex: 1 1 280px;
  width: 280px;
}

/* Slight overall scale-down for narrower laptops */
@media (max-width: 1280px){
  .app-shell{
    transform: scale(0.94);
    transform-origin: top center;
  }
}

/* 言語切替の右に置くリンクボタン */
.lang-toggle .lang-link{
  display:inline-block;
  padding:6px 12px;
  border:2px solid #2c3e50;
  border-radius:6px;
  background:#fafafa;
  color:#2c3e50;
  text-decoration:none;
  font-weight:700;
}
.lang-toggle .lang-link:hover{ background:#e0e0e0; }

/* =========================
   強調タイポ & 3カラム配置
   ========================= */

/* 出題（式）を大きく */
.horizontal-text {        /* 横書きの式 */
  font-size: 2.0rem;      /* 旧: 1.5rem */
  font-weight: 600;
}
.number {                 /* 縦書きの各数値 */
  font-size: 2.0rem;      /* 旧: 1.2rem */
  font-variant-numeric: tabular-nums;
}
.operator {               /* +, -, ×, ÷ の記号 */
  font-size: 2.0rem;      /* 旧: 1.2rem */
  width: 1.4em;
}

/* 答案（入力欄）を大きく */
.answer-input input {
  font-size: 1.8rem;      /* 旧: 1rem */
  padding: 14px;          /* 旧: 8px */
}

/* 3カラムでカードを横に3つ並べる（広い画面） */
.problems-grid {
  display: grid; 
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 16px;
  max-width: 100%;
}
/* === Floor（教室の床）を広く見せる調整 ===================== */
/* 横方向を少し広げ、上下の余白も増やして“床”の見える面積を拡大 */
.problems-grid{
  /* 幅を画面めいっぱい使いつつ、超ワイドでも破綻しないように制限 */
  width: min(1600px, 96vw);
  margin: 0 auto 40px;

  /* 床の回り込みを増やす（上下左右の余白） */
  padding: clamp(24px, 3vw, 56px);

  /* 角を少しだけ大きめに（任意） */
  border-radius: 14px;
}

/* 1段だけでも床が“薄く”見えないよう、最低高さを確保 */
@media (min-width: 900px){
  .problems-grid{ min-height: 36vh; }  /* お好みで 30〜45vh へ調整可 */
}

/* すごく狭い画面では過剰にならないよう少し控えめに */
@media (max-width: 480px){
  .problems-grid{
    padding: 18px;
    border-radius: 10px;
  }
}

/* グリッドに合わせ、カード幅の固定を解除 */
.card {
  width: 100%;
  flex: initial;          /* 既存の flex 幅指定を無効化 */
}

/* 画面が狭いときは 2列/1列に落とす（お好みで） */
@media (max-width: 1100px) {
  .problems-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 680px) {
  .problems-grid { grid-template-columns: 1fr; }
}

/* === 床をカードより大きく見せる：擬似要素で外側に張り出す === */
.problems-grid{
  position: relative;
  z-index: 0;
  /* 既存の床背景が効いている場合に二重描画を防ぐ */
  background: none !important;
  /* 床をしっかり見せるための余白（好みで調整可） */
  padding: clamp(24px, 3vw, 48px);
  margin: 0 auto 40px;
}

/* 床の本体。上下左右に張り出して“広く”見せる */
.problems-grid::before{
  content: "";
  position: absolute;
  top: -36px;     /* 上に張り出し */
  right: -36px;   /* 右に張り出し */
  bottom: -56px;  /* 下に多めに張り出し（←ここで“短い”問題を解消） */
  left: -36px;    /* 左に張り出し */
  background: url('images/classroom-floor.jpg') center/cover no-repeat;
  border-radius: 14px;
  z-index: -1;    /* カードの背面に配置 */
  pointer-events: none;
}

/* 画面が狭いときの張り出し量（少し控えめに） */
@media (max-width: 680px){
  .problems-grid::before{
    top: -20px; right: -20px; bottom: -32px; left: -20px;
    border-radius: 10px;
  }
}