:root{
  --line:#556070;
  --ink:#1a2b3c;
  --muted:#627185;
  --bg:#f3f5fb;
  --card:#ffffff;
  --accent:#2f6feb;
  --accent-ink:#fff;
  --danger:#d73a49;
  --ok:#1a7f37;
  --warn:#b08800;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; color:var(--ink); background:var(--bg); }
.app-header{ display:flex; justify-content:center; padding:14px 18px; border-bottom:3px solid var(--line); background:#eef2ff; position:sticky; top:0; z-index:3;}
.app-header-inner{ width:100%; max-width:1200px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.app-header .brand{ font-size:20px; font-weight:700; flex:1 1 auto; min-width:260px; }
.nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.container{ max-width:1200px; margin:24px auto; padding: 0 16px; display:flex; flex-direction:column; gap:20px; }

.card{ background:var(--card); border:3px solid var(--line); border-radius:12px; padding:16px; }
.card-title{ display:flex; align-items:center; gap:12px; }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; border:2px solid var(--line); background:#fff; font-weight:700; }
.explain summary{ font-weight:700; color:var(--muted); cursor:pointer; }
.explain div{ padding:8px 4px 0; line-height:1.7; }

.doc-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ border:2px solid var(--line); padding:4px 8px; border-radius:999px; background:#fff; font-size:12px; }
.doc-area{ overflow:auto; }
.doc-table{ width:100%; border-collapse:collapse; border:3px solid var(--line); }
.doc-table th,.doc-table td{ border:2px solid var(--line); padding:8px 10px; text-align:left; white-space:nowrap;}
.doc-title{ font-weight:700; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center;}
.doc-title .stamp{ border:2px solid var(--danger); color:var(--danger); padding:2px 10px; border-radius:8px; font-weight:700; }

.grid4{ width:100%; border-collapse:collapse; }
.grid4 th, .grid4 td{ border:3px solid var(--line); padding:8px 10px; }
.grid4 th{ background:#f8faff; }

.entry-row{ display:grid; grid-template-columns: 1.2fr 0.8fr 1.2fr 0.8fr; gap:0; }
.entry-row > *{ border:2px solid var(--line); padding:4px; }
.entry-row select, .entry-row input{ width:100%; font-size:16px; padding:8px; border:2px solid var(--line); border-radius:10px; }
.entry-head{ display:grid; grid-template-columns: 1.2fr 0.8fr 1.2fr 0.8fr; }
.entry-head div{ padding:8px 10px; font-weight:700; border:3px solid var(--line); background:#f8faff; }

.btn-row{ display:flex; gap:12px; margin-top:12px; }
.btn{ font-size:16px; padding:10px 18px; border-radius:12px; cursor:pointer; }
.solid{ background:#fff; color:var(--ink); border:3px solid var(--line); }
.solid.left::before{ content:"◀"; margin-right:6px; }
.solid.right::after{ content:"▶"; margin-left:6px; }
.sel{ font-size:16px; padding:8px 12px; border:3px solid var(--line); border-radius:12px; background:#fff; }

.btn.thick{ border-width:4px; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.btn.ghost{ background:#fff; border:4px solid var(--line); }

.result-ok{ color:var(--ok); font-weight:700; }
.result-ng{ color:var(--danger); font-weight:700; }
.result-msg{ margin-top:8px; line-height:1.7; }
.okmark{ color:var(--ok); font-weight:700; }
.ngmark{ color:var(--danger); font-weight:700; }

.app-footer{ text-align:center; padding:24px; color:var(--muted); }
.small-muted{ color:var(--muted); font-size:13px; }

/* Ensure vertical stacking on narrow/tall windows */
@media (max-width: 1100px) {
  .doc-title{ flex-direction: column; align-items: flex-start; gap:8px; }
}

@media (max-width: 768px) {
  .app-header-inner{ flex-direction:column; align-items:flex-start; }
  .app-header .brand{ min-width:0; }
  .nav{ width:100%; justify-content:flex-start; }
}