.hk4-wrap { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans JP', Meiryo, sans-serif; color:#1f2937; }
.hk4-head { padding:.9rem 1.1rem; background:#166534; color:#fff; border-radius:.6rem; margin-bottom:1rem; }
.hk4-title { font-weight:700; letter-spacing:.04em; }

.hk4-note { font-size:.85rem; color:#6b7280; margin:.4rem 0 .8rem; }
.hk4-note .hk4-hint { color:#111827; background:#fffbe6; padding:.15rem .4rem; border-radius:.35rem; border:1px dashed #f59e0b; }

/* formation scroll */
.hk4-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:.6rem; background:#fff; box-shadow:0 0 0 1px #e5e7eb inset; }
.hk4-scroll::-webkit-scrollbar { height:10px; }
.hk4-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:10px; }

/* formation table */
.hk4-table { width:100%; min-width:880px; border-collapse:separate; border-spacing:0; background:#fff; }
.hk4-table thead th { position:sticky; top:0; z-index:2; background:#f3f4f6; font-weight:700; font-size:.95rem; color:#374151; padding:.6rem .4rem; text-align:center; border-right:1px solid #e5e7eb; white-space:nowrap; }
.hk4-table thead th:first-child { text-align:left; padding-left:.6rem; width:104px; } /* narrower first column */
.hk4-table td { padding:.5rem; text-align:center; border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; }
.hk4-table tbody th { position:sticky; left:0; z-index:1; text-align:left; padding:.6rem .6rem; background:#eaffef; color:#166534; border-bottom:1px solid #e5e7eb; font-weight:700; white-space:nowrap; }
.hk4-table .num { width:40px; font-size:.95rem; color:#374151; }
.hk4-table th.all, .hk4-table td.all { width:70px; }
.hk4-table .all { color:#374151; }

/* check style */
.hk4-check, .hk4-check-all { appearance:none; width:22px; height:22px; border:2px solid #9ca3af; border-radius:.35rem; display:inline-grid; place-content:center; cursor:pointer; transition:.15s; background:#fff; }
.hk4-check:checked, .hk4-check-all:checked { border-color:#166534; background:#16a34a; }
.hk4-check:checked::after, .hk4-check-all:checked::after { content:''; width:8px; height:8px; background:#fff; border-radius:.15rem; }

/* result panel */
.hk4-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; background:#fff; padding:1rem; border-radius:.6rem; box-shadow:0 0 0 1px #e5e7eb inset; margin-top:.9rem; }
.hk4-metric { display:flex; align-items:center; justify-content:space-between; gap:.6rem; border:1px solid #e5e7eb; border-radius:.6rem; padding:.7rem .9rem; }
.hk4-metric label { font-size:1rem; color:#374151; }
.hk4-metric input { width:110px; text-align:right; font-weight:700; padding:.4rem .6rem; border:1px solid #d1d5db; border-radius:.5rem; background:#f9fafb; }
.hk4-btn { background:#e5e7eb; color:#111827; padding:.7rem 1.2rem; border-radius:.6rem; border:none; cursor:pointer; font-weight:700; }

/* reference tables wrapper (with scroll) */
.hk4-tables { margin-top:1.25rem; display:grid; gap:1rem; }
.hk4-refscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:.6rem; background:#fff; box-shadow:0 0 0 1px #e5e7eb inset; }
.hk4-refscroll::-webkit-scrollbar { height:10px; }
.hk4-refscroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:10px; }

/* reference tables */
.hk4-tables h3 { margin:.2rem 0; font-size:1rem; color:#111827; }
.hk4-tables table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:.6rem; overflow:hidden; }
.hk4-tables .hk4-box { min-width:980px; }
.hk4-tables .hk4-nagashi { min-width:720px; }
.hk4-tables thead th { background:#eef2ff; color:#3730a3; padding:.5rem .5rem; text-align:center; font-weight:700; border-right:1px solid #e5e7eb; white-space:nowrap; }
.hk4-tables tbody th { background:#f8fafc; text-align:left; padding:.5rem .7rem; border-bottom:1px solid #e5e7eb; color:#334155; white-space:nowrap; }
.hk4-tables td { text-align:right; padding:.55rem .7rem; border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; white-space:nowrap; font-variant-numeric:tabular-nums; min-width:56px; color:#111827; }
.hk4-tables td:last-child, .hk4-tables thead th:last-child { border-right:none; }

/* tablet tuning */
@media (min-width: 768px) and (max-width: 1024px){
  .hk4-table { min-width:920px; }
  .hk4-table thead th:first-child { width:120px; }
  .hk4-table .num { width:42px; }
  .hk4-metric input { width:100px; }
}

/* mobile */
@media (max-width: 720px){
  .hk4-table { min-width:820px; }
  .hk4-metric input { width:96px; }
}