feat: add standalone EST test app

tools/est-test/style.css

@@ -0,0 +1,234 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: #f4f6f8;
+  color: #172a3a;
+  font:
+    15px system-ui,
+    "Malgun Gothic",
+    sans-serif;
+}
+.top {
+  background: #122c40;
+  color: white;
+  padding: 32px max(24px, calc((100% - 1320px) / 2));
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+}
+.eyebrow {
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  color: #8ed8cd;
+  font-weight: 700;
+}
+h1 {
+  font-size: 27px;
+  margin: 8px 0;
+}
+.top p {
+  margin: 0;
+  color: #bfd0da;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+button,
+.button {
+  border: 0;
+  border-radius: 7px;
+  background: #087f73;
+  color: white;
+  padding: 10px 15px;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+button:hover,
+.button:hover {
+  filter: brightness(0.93);
+}
+.secondary {
+  background: #e9f0f1;
+  color: #234253;
+}
+main {
+  max-width: 1320px;
+  margin: auto;
+  padding: 24px;
+}
+.notice {
+  background: #fff6e1;
+  border: 1px solid #efdfb5;
+  border-radius: 8px;
+  padding: 13px 16px;
+  color: #705315;
+}
+.notice strong {
+  margin-right: 10px;
+}
+.summary {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin: 20px 0;
+}
+.metric,
+.card {
+  background: white;
+  border: 1px solid #dfe7ea;
+  border-radius: 9px;
+}
+.metric {
+  padding: 16px;
+}
+.metric span {
+  display: block;
+  color: #6d818c;
+  font-size: 13px;
+}
+.metric strong {
+  display: block;
+  font-size: 21px;
+  margin-top: 6px;
+}
+.tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid #cbd8dc;
+  overflow: auto;
+}
+.tabs button {
+  background: transparent;
+  color: #6a7f8b;
+  border-radius: 0;
+  padding: 14px 18px;
+  border-bottom: 3px solid transparent;
+}
+.tabs button.active {
+  color: #087f73;
+  border-bottom-color: #087f73;
+}
+.card {
+  margin-top: 18px;
+  overflow: hidden;
+}
+.cardhead {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.cardhead h2 {
+  margin: 0;
+  font-size: 19px;
+}
+.cardhead p {
+  margin: 6px 0 0;
+  color: #71838c;
+  font-size: 13px;
+}
+.tablewrap {
+  overflow: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 700px;
+}
+th,
+td {
+  padding: 10px 12px;
+  border-top: 1px solid #e8eef0;
+  text-align: left;
+  vertical-align: middle;
+}
+th {
+  background: #f8fafb;
+  color: #6a7d87;
+  font-size: 12px;
+}
+td.money {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  font-weight: 600;
+}
+input,
+select {
+  width: 100%;
+  min-width: 75px;
+  padding: 8px;
+  border: 1px solid #cfdbdf;
+  border-radius: 5px;
+  background: white;
+  color: #203746;
+  font: inherit;
+}
+input[type="number"] {
+  text-align: right;
+}
+.delete {
+  background: #f3f6f7;
+  color: #8a5151;
+  padding: 7px 10px;
+}
+.details {
+  padding: 16px 20px;
+  color: #59717d;
+  font-size: 13px;
+  border-top: 1px solid #e8eef0;
+  line-height: 1.7;
+}
+.total {
+  background: #f0f8f6;
+}
+.total td {
+  font-weight: 700;
+}
+.empty {
+  padding: 24px;
+  color: #738892;
+}
+.footnote {
+  font-size: 12px;
+  color: #72848d;
+  margin-top: 20px;
+}
+.tag {
+  display: inline-block;
+  padding: 4px 8px;
+  background: #e5f4f0;
+  color: #087f73;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.warning {
+  color: #a45228;
+}
+@media (max-width: 720px) {
+  .top {
+    display: block;
+  }
+  .actions {
+    margin-top: 20px;
+  }
+  .summary {
+    grid-template-columns: 1fr 1fr;
+  }
+  main {
+    padding: 16px;
+  }
+  .metric strong {
+    font-size: 17px;
+  }
+}