:root{

  --color-bg:#fff8ec;
  --color-surface:#f9e9d2;
  --color-border:#e0cfa8;
  --color-text:#3a2e22;
  --color-text-muted:#75654f;
  --color-accent:#e2622b;
  --color-accent-strong:#a8481a;
  --color-accent-soft:#fbe3d3;
  --color-accent-shadow:rgba(226,98,43,0.30);
  /* 小さい文字でもAA 4.5:1を保つためLPのteal/mutedより一段暗い。 */
  --color-accent-text:#1f6f8b;
  --color-on-accent:#ffffff;
  --color-nav-active:#1e3a5f;
  --color-danger:#c0392b;
  --color-cool-soft:#dcedfa;
  --color-cool-strong:#4a8fc9;
  --opacity-disabled:0.6;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:18px;
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --font-ui:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --frame-board:oklch(0.955 0.025 80);
  --frame-rim:oklch(0.42 0.12 25);
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}



.screen{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:var(--color-bg);
}

.screen--footer{grid-template-rows:auto minmax(0,1fr) auto;}

.body{
  min-height:0;overflow-y:auto;
  padding:var(--space-3) var(--space-3) var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-3);
}


.body > *{flex:0 0 auto;}

.body--center{justify-content:center;}



.hdr{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3) var(--space-3);
  border-bottom:1px solid var(--color-border);
}

.hdr__title{
  margin:0;flex:1;min-width:0;
  font-size:1.0625rem;font-weight:700;letter-spacing:.01em;
}

.hdr__title--lead{padding-left:var(--space-1);}

.back{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin-left:calc(var(--space-2) * -1);
  padding:0 var(--space-2);
  border:none;background:none;color:var(--color-accent-text);
  font-family:inherit;font-size:1rem;font-weight:600;
}



.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
  min-height:44px;padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md);border:1px solid transparent;
  font-family:inherit;font-weight:600;text-align:center;
}

.btn--primary{
  background:var(--color-accent);color:var(--color-on-accent);
  font-size:19px;font-weight:700;
  border-bottom-color:var(--color-accent-strong);
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  box-shadow:inset 0 -2px 0 var(--color-accent-strong),0 4px 12px var(--color-accent-shadow);
}

.btn--ghost{
  background:var(--color-surface);border-color:var(--color-accent);color:var(--color-text);
}

.btn--block{width:100%;}

.btn--sm{min-height:36px;padding:0 var(--space-3);font-size:.85rem;border-radius:999px;}

.btn--primary.btn--sm{font-size:.9rem;box-shadow:inset 0 -2px 0 var(--color-accent-strong);}

.btn--quiet{
  background:none;border:none;color:var(--color-text-muted);
  min-height:36px;padding:0 var(--space-2);font-size:.85rem;font-weight:600;
}

.btn[disabled]{opacity:var(--opacity-disabled);cursor:not-allowed;}



.note-box{
  padding:var(--space-3);border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:var(--color-surface);
  display:flex;flex-direction:column;gap:6px;
}

.note-box p{margin:0;}

.note-lead{font-size:.86rem;line-height:1.55;}

.note-fine{font-size:.76rem;line-height:1.5;color:var(--color-text-muted);}

.row__name{
  margin:0;font-size:.9rem;font-weight:700;line-height:1.35;
  overflow-wrap:anywhere;
}



.notes{display:flex;flex-direction:column;gap:var(--space-2);}

.notes p,.notes li{margin:0;font-size:.78rem;line-height:1.6;color:var(--color-text-muted);}

.notes__strong{
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  background:var(--color-accent-soft);
}

.notes__strong strong{color:var(--color-text);font-size:.8rem;}



.diagram{
  position:relative;
  width:160px;height:200px;
  margin:0 auto;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);
}

.diagram__band{
  position:absolute;
  left:calc(160px * .03);bottom:calc(200px * .03);
  width:calc(160px * .62);height:calc(160px * .04);
  background:rgba(192,57,43,.35);
  border-radius:2px;
}

.diagram__label{
  position:absolute;top:50%;left:100%;margin-left:6px;
  transform:translateY(-50%);
  white-space:nowrap;
  font-size:.7rem;font-weight:700;color:var(--color-danger);
}
html,body{height:100dvh;overflow:hidden;background:var(--color-bg)}.screen{height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.back{text-decoration:none}.btn{min-height:44px}.note-box button{font-size:16px}
body { color:var(--color-text); font-family:var(--font-ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--color-accent-text); }