/* ==========================================================================
   청온 케어 — 2차 페이지(작업 절차) 전용 스타일. 공통 셸과 토큰은 main.css·tokens.css 가 맡는다.
   ========================================================================== */

.proto-intro {
  padding-block: var(--space-5) var(--space-7);
}

.crumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

.crumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-block);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.crumb a:hover {
  color: var(--accent);
}

.crumb-sep {
  color: var(--ink-faint);
}

.crumb [aria-current="page"] {
  color: var(--ink);
  font-weight: var(--weight-strong);
}

.proto-facts {
  max-width: 40em;
}

.proto-intro .demo-notice {
  margin-top: var(--space-5);
}

.proto-record {
  padding-block: var(--space-7);
  border-top: 1px solid var(--line);
}

.proto-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: center;
}

.proto-record-grid .gear-cutout img {
  aspect-ratio: 16 / 10;
  object-position: 55% 45%;
  mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
}

.proto-lead {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.compare {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  overflow: hidden;
}

.compare-cell {
  padding: var(--space-4);
}

.compare-cell + .compare-cell {
  border-left: 1px solid var(--line);
}

.compare dt {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
}

.compare-val {
  margin-top: var(--space-1);
  font-size: var(--step-2);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
}

.compare-val.before {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.compare-val.after {
  color: var(--accent-hover);
}

.compare-sub {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.proto-cta {
  padding-block: 0 var(--space-7);
}

.card {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.card .btn-primary {
  margin-top: var(--space-3);
}

.calc-submit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 60em) {
  .proto-record-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .proto-record-grid .gear-cutout {
    order: 2;
  }
}

@media (max-width: 37.5em) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .compare-cell + .compare-cell {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}