/* 서비스 B 서명 검증소: 계산 노트 */

.verifier-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.verifier-side { display: flex; flex-direction: column; gap: var(--s-4); }

/* 모눈 노트 바탕 */
.notebook {
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--notebook-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--notebook-grid) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
}

/* ---------- 입력 ---------- */

.dropzone {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-5) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-control);
  background: var(--paper-1);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone:focus-within { box-shadow: var(--focus-ring); }
.dropzone-title { font-size: var(--text-sm); font-weight: 600; }
.dropzone-sub { font-size: var(--text-xs); color: var(--fg-muted); }

.mono-input { font-family: var(--font-mono); font-size: 12px; min-height: 180px; }

.input-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.input-actions .btn-primary { flex: 1 1 auto; }
.tamper-note {
  margin-top: var(--s-3);
  font-size: var(--text-xs);
  color: oklch(0.42 0.16 28);
  background: var(--danger-bg);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
}

.history { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.history li:last-child { border-bottom: 0; }
.history .h-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history .h-time { grid-column: 2; font-size: var(--text-xs); color: var(--fg-muted); font-family: var(--font-mono); }
.history-empty { display: block !important; font-size: var(--text-sm); }

/* ---------- 빈 상태 ---------- */

.result-empty { padding: var(--s-10) var(--s-8); }
.empty-title { font-size: var(--text-lg); font-weight: 650; margin-bottom: var(--s-4); max-width: 34ch; }
.empty-steps { margin: 0 0 var(--s-6); padding-left: 1.4em; display: grid; gap: var(--s-2); }
.empty-steps code { color: var(--accent-strong); }
.result-empty > .muted { font-size: var(--text-sm); }

/* ---------- 판정 ---------- */

.verdict {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border-radius: var(--r-panel);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: var(--s-6);
}
.verdict.is-valid { border-color: oklch(0.5 0.13 150 / 0.5); background: var(--success-bg); }
.verdict.is-invalid { border-color: oklch(0.52 0.19 28 / 0.5); background: var(--danger-bg); }
.verdict h2 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.verdict p { margin-top: var(--s-1); color: var(--fg-muted); }
.verdict .verdict-meta { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* 판정 도장 */
.stamp {
  width: 108px; height: 108px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 4px double currentColor;
  font-family: var(--font-doc);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
  transform: rotate(-8deg);
}
.is-valid .stamp { color: var(--ok-green); }
.is-invalid .stamp { color: var(--seal-red); }
.stamp small { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.05em; }

/* ---------- 단계 레일 ---------- */

.result-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); margin-bottom: var(--s-6); }
.block-title { font-size: var(--text-sm); font-weight: 650; color: var(--fg-muted); margin-bottom: var(--s-3); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg-muted);
  position: relative;
  z-index: 1;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13.5px; top: 28px; bottom: 0;
  width: 1.5px;
  background: var(--border);
}
.step.ok::before { content: "✓"; background: var(--ok-green); border-color: var(--ok-green); color: white; }
.step.fail::before { content: "✕"; background: var(--seal-red); border-color: var(--seal-red); color: white; }
.step.skip::before { content: "–"; }
.step-label { font-weight: 600; font-size: var(--text-sm); padding-top: 4px; }
.step-detail { font-size: var(--text-xs); color: var(--fg-muted); overflow-wrap: anywhere; margin-top: 2px; }
.step.fail .step-label { color: oklch(0.42 0.16 28); }
.step.skip .step-label { color: var(--fg-faint); }

/* 결과가 나올 때 단 한 번의 모션: 단계가 위에서부터 차례로 찍힌다 */
.steps.is-animating .step { animation: step-in 260ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.payload-kv dd { font-weight: 500; }

/* ---------- 계산 노트 ---------- */

.math { padding: var(--s-6); }
.math-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.math-head .block-title { margin: 0; color: var(--accent-strong); }
.math-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.math-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.9fr); gap: var(--s-6); align-items: start; }

.equations { display: grid; gap: var(--s-3); }
.eq {
  background: oklch(1 0 0 / 0.86);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: var(--s-2) var(--s-3);
}
.eq-formula { font-family: var(--font-mono); font-size: 13px; color: var(--accent-strong); font-weight: 500; }
.eq-note { font-size: 11px; color: var(--fg-muted); margin-left: var(--s-2); font-family: var(--font-ui); font-weight: 400; }
.eq-value { font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; color: var(--ink-900); margin-top: 2px; font-variant-numeric: tabular-nums; }
.eq.is-compare { border-width: 1.5px; }
.eq.is-compare.match { border-color: var(--ok-green); }
.eq.is-compare.mismatch { border-color: var(--seal-red); }
.compare-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px var(--s-2); margin-top: var(--s-1); font-family: var(--font-mono); font-size: 11.5px; }
.compare-row dt { color: var(--fg-muted); }
.compare-row dd { margin: 0; word-break: break-all; }
.compare-verdict { margin-top: var(--s-2); font-size: var(--text-xs); font-weight: 600; }
.match .compare-verdict { color: oklch(0.38 0.11 150); }
.mismatch .compare-verdict { color: oklch(0.42 0.16 28); }

.curve-figure { margin: 0; position: sticky; top: var(--s-6); background: oklch(1 0 0 / 0.86); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--s-3); }
.curve-figure svg { width: 100%; height: auto; display: block; }
.curve-figure figcaption { font-size: 11px; color: var(--fg-muted); margin-top: var(--s-2); line-height: 1.5; }
.curve-axis { stroke: var(--line-strong); stroke-width: 1; }
.curve-line { fill: none; stroke: var(--notebook-ink); stroke-width: 2; }
.curve-chord { stroke: var(--ink-400); stroke-width: 1; stroke-dasharray: 4 3; }
.curve-reflect { stroke: var(--seal-red); stroke-width: 1; stroke-dasharray: 2 3; }
.curve-pt { fill: var(--notebook-ink); }
.curve-pt-third { fill: var(--surface); stroke: var(--ink-400); stroke-width: 1.5; }
.curve-pt-r { fill: var(--seal-red); }
.curve-label { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-900); }
.curve-label-r { fill: var(--seal-red); font-weight: 500; }
.curve-draw .curve-chord, .curve-draw .curve-reflect { stroke-dashoffset: 0; animation: dash-in 700ms var(--ease-out) both; animation-delay: 300ms; }
.curve-draw .curve-pt-r, .curve-draw .curve-label-r { animation: fade-in 300ms var(--ease-out) both; animation-delay: 900ms; }
@keyframes dash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.curve-params { margin-top: var(--s-4); background: oklch(1 0 0 / 0.86); border: 1px solid var(--border); border-radius: var(--r-control); }
.curve-params summary { cursor: pointer; padding: var(--s-2) var(--s-3); font-size: var(--text-sm); font-weight: 600; }
.curve-params summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }
.curve-params .kv { padding: 0 var(--s-3) var(--s-3); }
.curve-params dd { font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; }

@media (max-width: 1100px) {
  .math-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .verifier-layout { grid-template-columns: minmax(0, 1fr); }
  .result-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 600px) {
  .verdict { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); }
  .stamp { width: 88px; height: 88px; font-size: 18px; }
  .result-empty { padding: var(--s-6) var(--s-4); }
  .math { padding: var(--s-4); }
}