/* 図形の重なり スタイルシート(点PQ問題メーカーと同じ配色) */
:root {
  --bg-main: #0f172a; --accent: #fbbf24; --accent-blue: #38bdf8; --accent-purple: #a78bfa;
  --accent-green: #4ade80; --accent-red: #f87171; --text: #f1f5f9; --text-dim: #cbd5e1;
  --text-secondary: #94a3b8; --glass: rgba(15, 23, 42, 0.82); --border: rgba(255, 255, 255, 0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
input { user-select: text; -webkit-user-select: text; }
body { font-family: 'Inter', 'Outfit', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; background: var(--bg-main); color: var(--text); overflow: hidden; }
.hidden { display: none !important; }

.app { position: relative; width: 100vw; height: 100dvh; overflow: hidden; user-select: none; -webkit-user-select: none; }
.stage { position: absolute; inset: 0; background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%); }
#makerCanvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#makerCanvas.panning { cursor: grabbing; }
#makerCanvas.dragedit { cursor: move; }

.readout { position: absolute; top: 12px; right: 12px; padding: 8px 16px; border-radius: 12px; background: var(--glass); border: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; pointer-events: none; }
.readout-label { font-size: .8rem; color: var(--text-secondary); }
.readout b { font-size: 1.5rem; color: var(--accent); min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
.readout-unit { font-size: .85rem; color: var(--text-dim); }
.zoom-box { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; align-items: center; }

.panel { position: absolute; top: 12px; left: 12px; width: 340px; max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 14px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(8px); touch-action: pan-y; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.app-title { font-family: 'Outfit', sans-serif; font-size: 1.25rem; letter-spacing: .05em; background: linear-gradient(135deg, #fff, #cbd5e1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel-body { padding: 0 12px 12px; }
.panel-body.collapsed { display: none; }

.round-btn { min-width: 34px; height: 34px; border-radius: 17px; border: 1px solid var(--border); background: var(--glass); color: var(--text); font-size: 1rem; cursor: pointer; }
.home-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.round-btn.wide { padding: 0 10px; font-size: .8rem; }
.round-btn:hover { border-color: var(--accent); }

.tab-switch { display: flex; gap: 4px; margin-bottom: 10px; }
.tab-btn { flex: 1; padding: 7px 4px; font-size: .78rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.tab-btn.active { background: rgba(251, 191, 36, .15); border-color: var(--accent); color: var(--accent); }
.tab-btn:disabled { opacity: .35; cursor: not-allowed; }

.hint-box { font-size: .78rem; line-height: 1.55; color: var(--text-dim); background: rgba(255,255,255,.05); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.view-btn-row { display: flex; gap: 6px; margin-top: 8px; }
.action-btn, .secondary-btn { flex: 1; padding: 8px 6px; font-size: .8rem; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); color: var(--text); }
.action-btn { background: rgba(56, 189, 248, .18); border-color: rgba(56, 189, 248, .5); }
.secondary-btn { background: rgba(255,255,255,.06); }
.action-btn:disabled { opacity: .4; cursor: not-allowed; }
.secondary-btn.armed { background: rgba(251, 191, 36, .2); border-color: var(--accent); color: var(--accent); }

.figure-card { border: 1px solid var(--border); border-left: 4px solid var(--fig-color, #38bdf8); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(255,255,255,.03); }
.figure-card.selected { background: rgba(251, 191, 36, .08); border-color: var(--accent); border-left-color: var(--fig-color); }
.fc-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.fc-name { font-weight: 700; font-size: 1.05rem; width: 1.6em; }
.fc-row { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; align-items: center; }
.fc-field { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--text-secondary); }
.fc-field input[type=number] { width: 64px; }
.figure-card select, .figure-card input[type=number] { background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: .85rem; }
.fc-head select { flex: 1; }
.fc-row { position: relative; } /* 回転のプルダウン(.rot-menu)は、この行の左端にそろえて開く */
.rot-combo { display: inline-block; }
.rot-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + 2px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; width: 212px; border-radius: 8px; background: #1e293b; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.rot-menu button { padding: 6px 0; font-size: .8rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.rot-menu button:hover { border-color: var(--accent); }
.rot-menu button.on { background: rgba(251, 191, 36, .2); border-color: var(--accent); color: var(--accent); }
.fc-del { border: 1px solid var(--border); background: transparent; color: var(--accent-red); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.display-panel { margin-top: 12px; font-size: .8rem; color: var(--text-dim); }

@media (max-width: 768px) {
  .app { display: flex; flex-direction: column; }
  .panel { position: relative; order: -1; top: 0; left: 0; width: 100%; max-height: 46dvh; border-radius: 0 0 14px 14px; }
  .stage { position: relative; inset: auto; flex: 1; min-height: 0; }
  .readout { top: 8px; right: 8px; padding: 5px 10px; }
  .readout b { font-size: 1.15rem; min-width: 4.5em; }
}

/* 再生バー・動きタブ(フェーズ2) */
.readout { flex-direction: column; align-items: flex-end; gap: 2px; }
.readout-row { display: flex; align-items: baseline; gap: 8px; }
.readout-time { font-size: .85rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.playbar { position: absolute; left: 364px; right: 190px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 20px; background: var(--glass); border: 1px solid var(--border); }
.playbar input[type=range] { flex: 1; min-width: 60px; accent-color: var(--accent); }
.playbar select { background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 4px; font-size: .8rem; }
.playbar .round-btn:disabled, .playbar input:disabled { opacity: .4; }
.time-label { font-size: .78rem; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 9.5em; text-align: right; }
.fc-info { margin-top: 6px; font-size: .78rem; color: var(--accent-green); }
@media (max-width: 768px) {
  .playbar { left: 12px; right: 12px; bottom: 56px; gap: 5px; padding: 4px 8px; } /* スマホは、ズームのボタンの上の段に置く */
  .time-label { min-width: 0; font-size: .7rem; }
}

/* 面積-時間グラフ・拡大ウィンドウ(フェーズ3) */
.graph-wrap { position: relative; }
.graph-canvas { width: 100%; height: 190px; display: block; background: rgba(15, 23, 42, .6); border: 1px solid var(--border); border-radius: 10px; touch-action: pan-y; cursor: ew-resize; }
.graph-expand { position: absolute; top: 6px; right: 6px; min-width: 28px; height: 28px; font-size: .85rem; }
.graph-expand[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.graph-max { white-space: pre-line; margin: 8px 0 6px; font-size: .82rem; line-height: 1.5; color: var(--accent-green); min-height: 1.2em; }
.gp-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; padding: 6px 8px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, .03); cursor: pointer; font-size: .8rem; }
.gp-row.now { background: rgba(251, 191, 36, .12); border-color: var(--accent); }
.gp-range { font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-trend { text-align: right; color: var(--text-secondary); }
.gp-formula { grid-column: 1 / -1; color: var(--accent); }
.gp-formula:empty { display: none; }
.float-win { position: absolute; z-index: 20; right: 12px; top: 84px; width: 460px; height: 320px; min-width: 260px; min-height: 220px; display: flex; flex-direction: column; border-radius: 12px; background: rgba(15, 23, 42, .96); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); resize: both; overflow: hidden; }
.float-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: .85rem; background: rgba(255, 255, 255, .06); cursor: move; touch-action: none; }
.float-win canvas { flex: 1 1 0; min-height: 0; width: 100%; display: block; touch-action: none; cursor: ew-resize; }
.float-info { white-space: pre-line; padding: 6px 10px 8px; font-size: .8rem; line-height: 1.5; color: var(--accent-green); }
.float-btns { display: flex; gap: 6px; }
.float-win.folded { height: auto !important; min-height: 0; resize: none; }
.float-win.folded canvas, .float-win.folded .float-info { display: none; }
.round-btn.small { min-width: 26px; height: 26px; border-radius: 13px; font-size: .8rem; }
@media (max-width: 768px) {
  .float-win { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: 42dvh; resize: none; }
  .graph-canvas { height: 170px; }
}

/* 経路の区間・多角形の頂点入力(フェーズ4) */
.fc-seg { padding: 4px 0; border-top: 1px dashed var(--border); }
.fc-seg:first-of-type { border-top: 0; }
.fc-seg-no { font-size: .78rem; color: var(--text-dim); min-width: 3.2em; }
.fc-seg select { background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 4px; font-size: .8rem; }
.fc-note { font-size: .74rem; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
.fc-part { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 6px; align-items: center; margin-top: 6px; }
.fc-part-no { font-size: .78rem; color: var(--text-dim); }
.fc-part input[type=text] { min-width: 0; background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: .85rem; }
.fc-part.bad input[type=text] { border-color: var(--accent-red); }
.fc-bad { display: none; grid-column: 1 / -1; font-size: .74rem; color: var(--accent-red); }
.fc-part.bad .fc-bad { display: block; }
.fc-del:disabled { opacity: .35; cursor: not-allowed; }
.fc-add { margin-top: 8px; width: 100%; }
.fc-seg .fc-field input[type=number] { width: 54px; }
.fc-seg .fc-field { gap: 3px; }
.fc-seg .fc-del { margin-left: auto; }

/* 回転(フェーズ6) */
.fc-pivot { padding-top: 6px; border-top: 1px dashed var(--border); }
.fc-pivot .fc-center { flex: 0 0 auto; padding: 4px 8px; }
.fc-pivot .fc-note { flex: 1 1 100%; margin-top: 0; }

/* 保存・お手軽セット(フェーズ7) */
.sec-title { font-size: .85rem; color: var(--accent); margin: 14px 0 6px; font-weight: 600; }
.save-row { display: flex; gap: 6px; }
.save-row input[type=text] { flex: 1; min-width: 0; background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: .85rem; }
.save-row .action-btn { flex: 0 0 auto; padding: 6px 14px; }
.save-item { display: flex; align-items: center; gap: 8px; padding: 6px; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.03); }
.save-thumb { width: 96px; height: 60px; flex: 0 0 auto; border-radius: 6px; background: rgba(15, 23, 42, .7); }
.save-info { flex: 1; min-width: 0; }
.save-name { font-size: .82rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.save-name.editable { cursor: pointer; }
.save-name.editable:hover { color: var(--accent); }
.save-rename { width: 100%; box-sizing: border-box; background: #1e293b; color: var(--text); border: 1px solid var(--accent); border-radius: 6px; padding: 3px 6px; font-size: .82rem; }
.save-date { font-size: .72rem; color: var(--text-secondary); line-height: 1.4; }
.save-open { flex: 0 0 auto; padding: 6px 10px; }
#jsonBox { width: 100%; background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: .75rem; font-family: monospace; resize: vertical; user-select: text; -webkit-user-select: text; }
.save-msg { margin-top: 8px; font-size: .8rem; color: var(--accent-green); min-height: 1.2em; }
.save-msg.bad { color: var(--accent-red); }

/* 問題文・答え・解説(フェーズ8) */
.tab-btn { min-width: 0; padding: 7px 2px; font-size: .72rem; } /* タブが5つになったので、少しつめる */
.pt-setup p { font-size: .8rem; line-height: 1.65; color: var(--text); margin-bottom: 4px; }
.pt-setup .pt-sub { padding-left: 1em; color: var(--text-dim); }
.pt-q { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.03); }
.pt-qtext { font-size: .85rem; line-height: 1.6; font-weight: 600; }
.pt-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .8rem; color: var(--text-dim); }
.pt-ans { margin-top: 6px; font-size: .8rem; }
.pt-ans summary { cursor: pointer; color: var(--accent); }
.pt-answer { margin-top: 6px; color: var(--accent-green); font-weight: 600; }
.pt-expl { margin-top: 4px; line-height: 1.6; color: var(--text-dim); }
#printSheet { display: none; }
@media print {
  body { overflow: visible; background: #fff; color: #000; }
  .app { display: none; }
  #printSheet { display: block; white-space: pre-wrap; font-size: 13pt; line-height: 1.9; padding: 14mm; color: #000; font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
}
.pt-opts { margin: 0 0 8px; }
.pt-opts input[type=number] { width: 84px; background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: .85rem; }
.pt-fig { width: 100%; height: auto; display: block; border-radius: 8px; margin-bottom: 8px; background: #fff; }
.pt-note { color: var(--accent); margin-top: 6px; }
@media print { #printSheet img { display: block; width: 100%; max-width: 170mm; margin: 6mm 0; break-inside: avoid; } .pt-print-cap { margin-top: 6mm; font-size: 11pt; line-height: 1.4; } .pt-print-ans { margin-top: 8mm; } .pt-print-text { white-space: pre-wrap; } }

/* つかい方の「?」(説明はツールチップ+おすとパネル内に表示) */
.panel-head { gap: 6px; }
.panel-head .app-title { margin-right: auto; }
#helpBtn[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.hint-box { white-space: pre-line; }

/* 自由描画 */
.fc-draw-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.fc-draw-bar button { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.fc-draw-bar select { background: #1e293b; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px; font-size: .8rem; }
.fc-draw-msg { margin-top: 6px; font-size: .78rem; color: var(--text-dim); }
.fc-draw-msg.bad { color: var(--accent-red); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 14px; font-size: .78rem; }
.fc-chip.bad { border-color: var(--accent-red); color: var(--accent-red); }
.chip-del { background: none; border: none; color: inherit; cursor: pointer; padding: 2px 6px; font-size: .8rem; }
.chip-del:disabled { opacity: .3; cursor: default; }
.chip-hole { font-size: .72rem; padding: 2px 4px; border-left: 1px solid var(--border); border-radius: 0; }
.fc-bad.shown { display: block; margin-top: 4px; font-size: .74rem; color: var(--accent-red); }
.fc-detail { margin-top: 8px; font-size: .8rem; }
.fc-detail summary { cursor: pointer; color: var(--accent); }

/* 輪郭の選択(編集) */
.fc-chip.sel { border-color: var(--accent); background: rgba(251, 191, 36, .12); color: var(--accent); }
.chip-pick { background: none; border: none; color: inherit; cursor: pointer; font-size: inherit; padding: 2px 0; }
.chip-pick:disabled { cursor: default; opacity: .6; }

/* 数字のテンキー(keypad.js): タッチ端末で、数字の欄をタップすると欄の下に開く */
.kp { position: fixed; z-index: 200; width: 248px; padding: 8px; border-radius: 12px; background: #1e293b; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.kp.hidden { display: none; }
.kp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.kp-title { font-size: .75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-disp { flex: 1; text-align: right; font-size: 1.5rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; min-height: 1.6em; }
.kp-disp.empty { color: var(--text-secondary); }
.kp-choices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; max-height: 96px; overflow-y: auto; margin-bottom: 6px; }
.kp-choices.hidden { display: none; }
.kp-chip { padding: 5px 0; font-size: .72rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
.kp-chip.on { background: rgba(251, 191, 36, .2); border-color: var(--accent); color: var(--accent); }
.kp-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.kp-key { height: 44px; font-size: 1.15rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, .06); color: var(--text); cursor: pointer; }
.kp-key:active { background: rgba(251, 191, 36, .25); border-color: var(--accent); }
.kp-key.fn { color: var(--accent-blue); }
.kp-key.step { font-size: .85rem; color: var(--accent-green); }
.kp-key:disabled { opacity: .3; }
.kp-key.ok { grid-column: 1 / -1; background: rgba(251, 191, 36, .18); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.fc-field input[readonly] { cursor: pointer; }