:root {
  --bg: #111418; --panel: #1b2027; --line: #2c333d; --text: #e8ecf1; --muted: #8d97a5;
  --accent: #3ea6ff; --ok: #34c472; --warn: #f2b33d; --ng: #f0525a;
  --field: #0e1115; --btn: #232a33; --selected: #16314a; --on-accent: #04121f;
  --note-text: #d9c79e; --note-bg: #2a2416;
  /* 埋め込み時は iframe の高さが中身に合わせて伸びるため、vh ではなく親ページから渡された値を使う */
  --vh: 1vh;
}
/* サイト本体（public/theme-init.js / 親ページ）が <html data-theme="light"> を付けたときの配色。
   写真を置くステージは見やすさを優先して暗いままにする。 */
:root[data-theme='light'] {
  --bg: #f6f6fa; --panel: #ffffff; --line: #cdcddd; --text: #12121c; --muted: #4e4e66;
  --accent: #1f6fd1; --ok: #1a8a4c; --warn: #a86a00; --ng: #c62828;
  --field: #f6f6fa; --btn: #eeeef4; --selected: #dfe8fb; --on-accent: #fff;
  --note-text: #5c4300; --note-bg: #fff6df;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; }
header { padding: 14px 16px 6px; }
header h1 { margin: 0; font-size: 19px; }
header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
nav { display: flex; gap: 4px; padding: 8px 16px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
nav button { flex: 1; padding: 9px 4px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); border-radius: 8px; font-size: 14px; }
nav button.on { color: var(--text); border-color: var(--accent); background: var(--selected); }
main { padding: 0 16px 40px; max-width: 980px; margin: 0 auto; }
section { display: none; } section.on { display: block; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
label.f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); flex: 1 1 140px; }
select, input[type=number] { background: var(--field); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; font-size: 15px; width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--btn); color: var(--text); font-size: 14px; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn input { display: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { padding: 8px 12px; border: 0; background: var(--field); color: var(--muted); font-size: 14px; }
.seg button.on { background: var(--selected); color: var(--text); }
.steps { display: flex; flex-wrap: wrap; gap: 6px; }
.steps button { padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--field);
  color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.steps button .dot { width: 10px; height: 10px; border-radius: 50%; }
.steps button.on { border-color: var(--text); color: var(--text); }
.steps button.done { color: var(--text); }
.steps button.done::after { content: "✓"; color: var(--ok); }
.hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; min-height: 1.5em; }
.hint b { color: var(--text); }
.stage { position: relative; height: min(calc(var(--vh) * 68), 640px); border-radius: 12px; overflow: hidden;
  background: #07090b; border: 1px solid var(--line); margin-top: 10px; }
.stage canvas { display: block; touch-action: none; cursor: crosshair; }
.stage .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8d97a5; text-align: center; padding: 20px; pointer-events: none; font-size: 14px; }
.nudge { position: absolute; right: 8px; bottom: 8px; display: grid; grid-template-columns: repeat(3, 38px);
  grid-template-rows: repeat(3, 38px); gap: 3px; }
.nudge button { border: 1px solid #ffffff30; background: #000a; color: #fff; border-radius: 8px; font-size: 16px; }
.zoomer { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.zoomer button { width: 38px; height: 38px; border: 1px solid #ffffff30; background: #000a; color: #fff; border-radius: 8px; font-size: 16px; }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.res { border-radius: 10px; padding: 12px; border: 1px solid var(--line); background: var(--field); }
.res h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.res .v { font-size: 26px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.res .j { font-weight: 700; }
.res.ok { border-color: var(--ok); } .res.ok .j { color: var(--ok); }
.res.warn { border-color: var(--warn); } .res.warn .j { color: var(--warn); }
.res.ng { border-color: var(--ng); } .res.ng .j { color: var(--ng); }
.res small { color: var(--muted); display: block; }
.meta { color: var(--muted); font-size: 12px; margin-top: 8px; }
.guide h2 { font-size: 16px; margin: 4px 0 6px; }
.guide ol, .guide ul { padding-left: 20px; margin: 6px 0; }
.guide li { margin: 4px 0; }
.note { border-left: 3px solid var(--warn); padding: 6px 10px; color: var(--note-text); background: var(--note-bg); border-radius: 4px; font-size: 13px; }

.site-back { display: inline-block; margin-bottom: 6px; color: var(--muted); font-size: 12px; text-decoration: none; }
.site-back:hover { color: var(--accent); }
.embedded header { display: none; }
.embedded nav { padding: 0 10px 8px; }
.embedded main { padding: 0 10px 8px; }