/* Hallmark · genre: modern-minimal · theme: Cobalt */
@import url("./landing.css?v=20260726.8");

html,
body {
  overflow-x: clip;
}

.page-hero {
  padding-block: var(--space-2xl) var(--space-3xl);
  border-block-end: var(--line) solid var(--color-rule);
}

.page-hero__grid {
  display: grid;
  gap: var(--space-2xl);
}

.page-hero__copy {
  display: grid;
  align-content: end;
  max-width: var(--measure);
  gap: var(--space-lg);
}

.page-hero h1 {
  max-width: 17ch;
  font-size: clamp(var(--text-2xl), 7vw, var(--text-display));
  line-height: 0.98;
}

.page-hero__lead {
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

.root-receipt {
  display: grid;
  min-width: 0;
  align-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl);
  border-block-start: 0.2rem solid var(--color-accent);
  background: var(--color-graphite);
  color: var(--color-graphite-text);
}

.root-receipt__label {
  color: var(--color-graphite-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.root-receipt__hash {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
}

.root-receipt__hash--prose {
  max-width: 32ch;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.root-receipt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  color: var(--color-graphite-muted);
  font-size: var(--text-xs);
}

.proof-layout,
.anatomy-layout,
.inquiry-layout {
  display: grid;
  gap: var(--space-2xl);
}

.section-head--sticky {
  align-self: start;
}

.limitation-note {
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.verifier {
  min-width: 0;
  border-block-start: 0.2rem solid var(--color-ink);
  background: var(--color-paper);
}

.verifier__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-block-end: var(--line) solid var(--color-rule);
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.verifier__status {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-lg);
  border-block-end: var(--line) solid var(--color-rule);
}

.status-mark {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: var(--line) solid var(--color-rule);
  border-radius: 50%;
  color: var(--color-muted);
  font-family: var(--font-display);
  font-weight: 700;
}

.verifier__status-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-2xs);
}

.verifier__status-copy strong {
  font-family: var(--font-display);
}

.verifier__status-copy span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.verifier[data-state="working"] .status-mark {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.verifier[data-state="pass"] .status-mark {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.verifier[data-state="fail"] .status-mark {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.check-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.check-row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-end: var(--line) solid var(--color-rule-2);
}

.check-row__state {
  align-self: start;
  padding-block: var(--space-2xs);
  border-radius: var(--radius-xs);
  background: var(--color-paper-3);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.check-row[data-status="pass"] .check-row__state {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.check-row[data-status="fail"] .check-row__state {
  background: var(--color-error-soft);
  color: var(--color-error);
}

.check-row__copy {
  display: grid;
  min-width: 0;
  gap: var(--space-2xs);
}

.check-row__copy strong {
  font-size: var(--text-sm);
}

.check-row__copy span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.verification-summary {
  display: none;
  padding-block: var(--space-xl);
}

.verification-summary[data-visible="true"] {
  display: grid;
  gap: var(--space-lg);
}

.verification-summary dl {
  margin: 0;
}

.verification-summary dl > div {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  border-block-end: var(--line) solid var(--color-rule-2);
}

.verification-summary dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.verification-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pack-ledger {
  padding: 0;
  margin: 0;
  border-block-start: 0.2rem solid var(--color-ink);
  list-style: none;
  counter-reset: ledger;
}

.pack-ledger li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--line) solid var(--color-rule);
  counter-increment: ledger;
}

.pack-ledger li::before {
  content: counter(ledger, decimal-leading-zero);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
}

.pack-ledger li > div {
  display: grid;
  gap: var(--space-xs);
}

.pack-ledger strong {
  font-family: var(--font-display);
}

.pack-ledger span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.context-panel {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-xl);
  border-inline-start: 0.2rem solid var(--color-accent);
  background: var(--color-paper-2);
}

.context-panel .section-head {
  max-width: none;
}

.inquiry-copy {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
}

.inquiry-copy__note {
  padding-block: var(--space-md);
  border-block: var(--line) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* 개인정보 처리 고지 — 동의 체크박스 바로 위에서 무엇에 동의하는지 먼저 읽히게 한다. */
.privacy-note {
  margin: 0;
  padding: var(--space-md);
  border: var(--line) solid var(--color-rule);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.privacy-note b {
  color: var(--color-ink-1);
}

/* Honeypot — 화면 밖으로 밀어낸다. display:none 은 일부 봇이 무시하므로 쓰지 않는다.
   aria-hidden 과 tabindex="-1" 은 마크업 쪽에 있다. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 전송 실패로 판정됐을 때만 열리는 대체 경로. 평상시엔 [hidden] 이라 보이지 않는다. */
.form-fallback {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--line) solid var(--color-error, var(--color-rule));
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}

.form-fallback[hidden] {
  display: none;
}

.form-fallback__note {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.inquiry-form {
  display: grid;
  min-width: 0;
  gap: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: 0.2rem solid var(--color-ink);
}

.field {
  display: grid;
  min-width: 0;
  gap: var(--space-xs);
}

.field label {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
}

.field small {
  min-height: 1lh;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: var(--space-sm) var(--space-md);
  border: var(--line) solid var(--color-rule);
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-transparent);
  background: var(--color-paper);
  color: var(--color-ink);
  transition:
    border-color var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    outline-color var(--dur-short) var(--ease-out);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-neutral);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-focus);
  outline-color: var(--color-focus);
  outline-offset: 1px;
}

.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.field--check label {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  font-family: var(--font-body);
  font-weight: 400;
}

.field--check input {
  width: 1.25rem;
  min-height: 1.25rem;
  margin: 0.1rem 0 0;
  padding: 0;
  accent-color: var(--color-accent);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.form-status {
  min-height: 1.5rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.form-status[data-state="error"] {
  color: var(--color-error);
}

.form-status[data-state="success"] {
  color: var(--color-success);
}

@media (min-width: 40rem) {
  .verification-summary dl > div {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-md);
  }

  .pack-ledger li {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 60rem) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(23rem, 0.92fr);
    align-items: end;
    gap: var(--space-3xl);
  }

  .proof-layout,
  .anatomy-layout,
  .inquiry-layout {
    grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.22fr);
    gap: var(--space-3xl);
  }

  .section-head--sticky,
  .inquiry-copy {
    position: sticky;
    inset-block-start: 6.5rem;
  }

  .context-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (pointer: coarse) {
  .field input,
  .field select,
  .field textarea {
    min-height: 3rem;
  }
}

@media print {
  .site-nav,
  .action-row,
  .verifier__controls,
  .site-footer {
    display: none;
  }

  .page-hero,
  .section {
    padding-block: var(--space-lg);
  }

  .root-receipt,
  .context-panel {
    break-inside: avoid;
  }
}