/* 실제 실험의 질문·관측·행동을 위계로 쓴다. 팔레트와 글꼴은 공용 토큰을 따른다. */
.discovery { padding-block: var(--sp-8) var(--sp-4); }
.discoveryHero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-9); align-items: center; }
.discoveryIntro h1 { max-width: 10em; margin: 0; font-size: var(--fs-display); font-weight: var(--fw-black); line-height: 1.16; letter-spacing: var(--ls-tight); word-break: keep-all; overflow-wrap: anywhere; }
.discoveryLead { max-width: 36em; color: var(--dim); font-size: var(--fs-lg); line-height: var(--lh-loose); margin: var(--sp-6) 0; word-break: keep-all; overflow-wrap: anywhere; }
.discoveryActions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.discoveryAccess { max-width: 38em; font-size: var(--fs-sm); color: var(--dim); line-height: var(--lh-base); margin: var(--sp-4) 0 0; }
.discoveryTextLink { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-text); font-weight: var(--fw-semibold); text-underline-offset: .2em; }
.discoveryCase { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: 0 8px 24px hsl(var(--color-neutral-900) / .04); }
.discoverySample { display: inline-block; color: var(--dim); font-size: var(--fs-sm); border-bottom: 2px solid var(--accent); padding-bottom: var(--sp-2); }
.discoveryCase h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); margin: var(--sp-4) 0 var(--sp-5); max-width: 22em; word-break: keep-all; }
.discoveryFacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--sp-5); border-block: 1px solid var(--border); padding-block: var(--sp-4); }
.discoveryFacts > div { padding-inline: var(--sp-3); border-left: 1px solid var(--border); min-width: 0; }
.discoveryFacts > div:first-child { padding-left: 0; border-left: 0; }
.discoveryFacts dt { color: var(--dim); font-size: var(--fs-xs); line-height: var(--lh-base); }
.discoveryFacts dd { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.discoveryFactMissing dd { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; }
.discoveryChoices { border: 0; padding: 0; margin: 0; min-width: 0; }
.discoveryChoices legend { font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.discoveryChoice { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 44px; padding: var(--sp-3); margin-bottom: var(--sp-2); text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-sm); cursor: pointer; line-height: var(--lh-snug); }
.discoveryChoice::before { content: ''; flex: 0 0 14px; height: 14px; border: 1px solid currentColor; border-radius: var(--r-full); }
.discoveryChoice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-fg); }
.discoveryChoice[aria-pressed="true"]::before { background: currentColor; box-shadow: inset 0 0 0 3px var(--accent-bg); }
.discoveryChoice:hover { border-color: var(--accent); }
.discoveryResponse { font-size: var(--fs-sm); color: var(--dim); line-height: var(--lh-base); margin-top: var(--sp-3); }
.discoveryResponse p { margin: var(--sp-2) 0 0; }
.discoveryResponse strong { display: block; color: var(--text); font-size: var(--fs-base); }
.discoveryResponse[data-result="correct"] strong { color: var(--ok); }
.discoveryReset { display: block; min-height: 44px; margin-top: var(--sp-2); padding: var(--sp-2) 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.discoveryReset[hidden], .discovery [hidden] { display: none; }
.discoverySampleNote { margin: var(--sp-4) 0 0; color: var(--dim); font-size: var(--fs-xs); line-height: var(--lh-base); }
.discoveryProcess { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); padding: var(--sp-6) 0; margin: var(--sp-8) 0; list-style: none; border-block: 1px solid var(--border); counter-reset: lab-step; }
.discoveryProcess li { counter-increment: lab-step; display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-content: start; }
.discoveryProcess li::before { content: counter(lab-step); grid-row: span 2; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; color: var(--accent-text); }
.discoveryProcess strong { font-size: var(--fs-base); }
.discoveryProcess p { color: var(--dim); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; }
.discoverySectionHead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.discoverySectionHead h2 { margin: 0; font-size: var(--fs-2xl); }
.discoveryCourseNote { color: var(--dim); margin: var(--sp-2) 0 var(--sp-5); }
.discoveryCatalogStatus { color: var(--dim); line-height: var(--lh-base); }
.discoveryCatalogStatus:empty { display: none; }
.discoveryCatalog { margin-bottom: var(--sp-3); }
.discoveryCourse { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 2.5fr) auto; gap: var(--sp-5); align-items: center; padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.discoveryCourseLabel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.discoveryTopic { color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.discoveryLevel { font-size: var(--fs-xs); color: var(--dim); }
.discoveryCourse h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.discoveryCourseTitle { font-size: var(--fs-sm); margin: var(--sp-2) 0; color: var(--dim); overflow-wrap: anywhere; }
.discoveryPrerequisite { font-size: var(--fs-xs); margin: 0; color: var(--dim); }
.discoveryCourseLink { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-underline-offset: .2em; }
.discovery :is(a, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 900px) {
  .discoveryHero { gap: var(--sp-6); }
  .discoveryIntro h1 { font-size: var(--fs-4xl); }
  .discoveryCase { padding: var(--sp-5); }
}
@media (max-width: 700px) {
  .discovery { padding-top: var(--sp-6); }
  .discoveryHero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .discoveryIntro h1 { max-width: 14em; font-size: var(--fs-3xl); }
  .discoveryLead { font-size: var(--fs-base); margin-block: var(--sp-4); }
  .discoveryActions { gap: var(--sp-3); }
  .discoveryActions .btn { min-height: 48px; }
  .discoveryCase h2 { font-size: var(--fs-xl); }
  .discoveryFacts > div { padding-inline: var(--sp-2); }
  .discoveryFacts dd { font-size: var(--fs-base); }
  .discoveryProcess { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-block: var(--sp-6); }
  .discoverySectionHead { align-items: flex-start; gap: var(--sp-3); flex-direction: column; }
  .discoverySectionHead h2 { font-size: var(--fs-xl); }
  .discoveryCourse { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .discoveryCourseLabel { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .discoveryCourseLink { justify-self: start; }
}