/* 생성 파일: tools/design/mock-final.css 수정 후 node tools/build-design-t1.mjs */
/* /mock: one foundation grid, card and desktop section rhythm. */
.fx [data-mock-final] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); width: calc(100% - var(--s6) * 2); max-width: 1080px; margin: var(--s6); padding: 0; align-content: start; }
.fx [data-mock-final] > * { grid-column: span 12; min-width: 0; }
.fx [data-mock-final] :is(section, details, h2, h3, [id]) { scroll-margin-top: var(--s6); }
.fx [data-mock-final] .mk-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4) var(--s5); min-width: 0; }
.fx [data-mock-final] .mk-section > * { grid-column: span 12; min-width: 0; }
.fx [data-mock-final] .mk-card-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; padding: 0; margin: 0; list-style: none; }
.fx [data-mock-final] .mk-card { display: flex; flex-direction: column; gap: var(--s2); grid-column: span 6; min-width: 0; margin: 0; padding: var(--s4); border: var(--line) solid var(--ink); border-radius: var(--r); background: var(--paper); box-shadow: none; }
.fx [data-mock-final] .mk-card-row > .mk-card:not(details) { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
.fx [data-mock-final] .mk-card > :is(h3, h2), .fx [data-mock-final] .mk-card > summary { font: var(--t3); color: var(--navy); }
.fx [data-mock-final] .mk-label { font: var(--t6); }
.fx [data-mock-final] .mk-card :is(p, ol), .fx [data-mock-final] .mk-section > p { font: var(--t5); }
.fx [data-mock-final] .mk-card-body { display: flex; flex-direction: column; gap: var(--s2); }
.fx [data-mock-final] .mk-card > :is(.fx-btn, .mk-card-cta) { margin-top: auto; }
.fx [data-mock-final] .mk-card-cta { display: flex; align-items: center; min-height: var(--touch); font: var(--t5); }
.fx [data-mock-final] .mk-prices > * { grid-column: span 3; }
.fx [data-mock-final] .final-flow > * { grid-column: span 4; }
.fx [data-mock-final] .final-sample-price > .mk-label { color: var(--gem); font-weight: 700; }
.fx [data-mock-final] .final-hero { align-items: center; }
.fx [data-mock-final] .final-hero > * { grid-column: span 6; }
.fx .final-hero-copy { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.fx .final-hero h1 { font: var(--t1); color: var(--navy); }
.fx .final-hero h1 em { display: block; font-style: normal; color: var(--gem); }
.fx .final-intro { font: var(--t3); }
.fx .final-checklist { display: grid; gap: var(--s2); list-style: none; font: var(--t5); }
.fx .final-checklist li::before { content: '✓'; color: var(--gem); margin-inline-end: var(--s2); }
.fx .final-student { width: 100%; height: auto; border-radius: var(--r); }
.fx .final-actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.fx .final-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.fx .final-eyebrow { color: var(--gem); font: var(--t5); font-weight: 700; }
.fx [data-mock-final] .mk-sample { display: grid; gap: var(--s1); width: 100%; }
.fx [data-mock-final] .mk-sample .mk-zoom { width: calc(var(--menu-w) - var(--s6)); max-width: 100%; align-self: start; }
.fx [data-mock-final] .mk-numbered { gap: var(--s1); padding-inline-start: var(--s4); }
.fx [data-mock-final] details.mk-card { display: block; }
.fx [data-mock-final] details.mk-card > summary { min-height: var(--touch); cursor: pointer; }
.fx [data-mock-final] details.mk-card > summary span { font: var(--t6); margin-inline-start: var(--s2); }
.fx [data-mock-final] details.mk-card > :not(summary) { margin-top: var(--s2); }
.fx [data-mock-final] > .final-details, .fx [data-mock-final] .final-policy > .mk-card { grid-column: span 12; }
.fx [data-mock-final] .final-details > section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.fx [data-mock-final] .final-details > section > * { grid-column: span 12; min-width: 0; }
.fx [data-mock-final] .fx-btn, .fx .final-dialog .fx-btn { min-height: var(--touch); white-space: normal; text-align: center; }
.fx [data-mock-final] .fx-btn:not(.sub):not(:disabled), .fx .final-dialog .fx-btn:not(.sub):not(:disabled) { background: var(--navy); color: var(--paper); border-color: var(--navy); box-shadow: none; filter: none; }
.fx:has([data-mock-final]) .fx-btn:not(.sub):not(:disabled), .fx:has([data-mock-final]) .fx-btn:is([aria-pressed='true'], [aria-selected='true'], .is-selected):not(:disabled) { background: var(--navy); color: var(--paper); filter: none; }
.fx [data-mock-final] .fx-btn:disabled { background: var(--surface); color: var(--ink); border: var(--line) solid var(--ink); box-shadow: none; opacity: 1; }
/* Preserve the real evidence and its readable visualizations inside full-width disclosures. */
.fx [data-mock-final] .mk-flow { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
.fx [data-mock-final] .mk-flow > li { grid-column: span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s2) var(--s5); padding: var(--s4); border-radius: var(--r); background: var(--paper); }
.fx [data-mock-final] .mk-flow > li > h3 { grid-column: span 12; }
.fx [data-mock-final] .mk-flow > li:has(> .mk-viz) > .mk-viz { grid-column: 1 / span 6; }
.fx [data-mock-final] .mk-flow > li:has(> .mk-viz) > :not(h3):not(.mk-viz) { grid-column: 7 / span 6; }
.fx [data-mock-final] #making-bars { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
.fx [data-mock-final] #making-bars > * { grid-column: span 6; }
.fx [data-mock-final] .mk-topics summary { min-height: var(--touch); }
@media (min-width: 861px) {
  .fx [data-mock-final] .mk-rounds-table tr { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fx [data-mock-final] .mk-rounds-table tr > * { grid-column: span 3; min-width: 0; }
  .fx [data-mock-final] .mk-rounds-table td[colspan] { grid-column: span 6; }
}
.fx .final-dialog { width: min(calc(var(--menu-w) * 2 + var(--s6) * 3), calc(100% - var(--s4) * 2)); max-height: calc(100dvh - var(--s4) * 2); margin: auto; padding: var(--s3); overflow-y: auto; overscroll-behavior: contain; border: var(--line) solid var(--navy); border-radius: var(--r); background: var(--paper); color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.fx .final-dialog[open] { display: flex; flex-direction: column; gap: var(--s2); }
.fx .final-dialog::backdrop { background: color-mix(in srgb, var(--navy) 55%, transparent); }
.fx .final-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.fx .final-dialog-head .fx-btn { box-shadow: none; }
.fx .final-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); background: var(--surface); padding: var(--s2); border-radius: var(--r); }
.fx .final-summary strong { font: var(--t3); }
.fx .final-summary span { font: var(--t5); }
.fx .final-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s2); }
.fx .final-fields > * { grid-column: span 6; min-width: 0; }
.fx .final-dialog .fx-stack { gap: var(--s1); }
.fx .final-dialog form.fx-stack { gap: var(--s2); }
.fx .final-dialog select { width: 100%; font: var(--t4); color: var(--ink); }
.fx .final-consent { display: flex; align-items: flex-start; gap: var(--s1); min-height: var(--touch); font: var(--t5); cursor: pointer; }
.fx .final-consent input { flex: none; width: var(--s4); height: var(--s4); margin-top: var(--line-strong); accent-color: var(--navy); }
.fx .final-popup { max-width: calc(var(--menu-w) * 2); }
.fx .final-popup h2 { font: var(--t2); }
.fx .final-later { min-height: var(--touch); border: 0; background: transparent; color: var(--navy); text-decoration: underline; cursor: pointer; }
.fx .final-dialog #done-h { font: var(--t3); }
html:has(.final-dialog[open]) { overflow: hidden; }

@media (max-width: 860px) {
  .fx [data-mock-final] { width: 100%; margin: 0; padding: var(--s3) var(--s2); gap: var(--s4); }
  .fx [data-mock-final] .mk-section { row-gap: var(--s2); }
  .fx [data-mock-final] .mk-card-row { gap: var(--s2); }
  .fx [data-mock-final] .mk-card-row > .mk-card:not(details) { display: flex; grid-row: auto; }
  .fx [data-mock-final] .mk-card-row > *, .fx [data-mock-final] .final-hero > *, .fx [data-mock-final] #making-bars > * { grid-column: span 12; }
  .fx [data-mock-final] .final-flow { gap: var(--s4); }
  .fx [data-mock-final] .final-flow > li { padding: var(--s2); }
  .fx .final-intro { font: var(--t4); }
  .fx .final-hero-copy { gap: var(--s2); }
  .fx .final-summary { align-items: flex-start; flex-direction: column; gap: var(--s1); }
  .fx .final-dialog { padding: var(--s2); }
  .fx [data-mock-final] .mk-flow > li:has(> .mk-viz) > .mk-viz { grid-column: span 12; grid-row: 2; }
  .fx [data-mock-final] .mk-flow > li:has(> .mk-viz) > :not(h3):not(.mk-viz) { grid-column: span 12; grid-row: 3; }
}

/* Desktop polish (director 15:12): one-line big headline, copy and image centred on the same height, sample cards 2-up inside, FAQ/details boxes one spec. */
@media (min-width: 861px) {
  body.t1 .final-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s4); align-items: center; }
  body.t1 .final-hero > h1 { grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: 3.25rem; line-height: 1.15; white-space: nowrap; }
  body.t1 .final-hero > .final-hero-copy { grid-column: 1 / span 6; grid-row: 2; align-self: center; }
  body.t1 .final-hero > .final-student { grid-column: 7 / span 6; grid-row: 2; width: 100%; height: auto; align-self: center; }
  body.t1 .mk-samples .mk-card-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s2); align-items: start; }
  body.t1 .mk-samples .mk-card-body > figure { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  body.t1 .mk-samples .mk-card-body > :not(figure) { grid-column: 2; margin: 0; }
  body.t1 .mk-samples .mk-card-body img { width: 100%; height: auto; display: block; }
}
@media (max-width: 860px) { body.t1 .final-hero > h1 { white-space: normal; } }
body.t1 :is(.mk-faq, .final-details).mk-card { box-sizing: border-box; padding: var(--s4); min-height: calc(var(--touch) + 2 * var(--s4)); }
body.t1 :is(.mk-faq, .final-details) > summary { display: flex; align-items: center; gap: var(--s2); min-height: var(--touch); cursor: pointer; }
body.t1 .final-hero > h1 em { display: inline !important; font-style: normal; }
@media (min-width: 861px) { body.t1 .final-hero > .final-hero-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; } }
@media (min-width: 861px) {
  /* Headline sits right above the copy/image row; the row (copy + image) is the vertically centred pair. */
  body.t1 .final-hero { row-gap: var(--s4); }
  body.t1 .final-hero > .final-hero-copy { gap: var(--s2); }
}

/* Hero v3 (director 15:21): ONE row, two equal-height columns - left: headline (1 line) -> sub -> checks -> buttons; right: image. */
@media (min-width: 861px) {
  body.t1 .final-hero { align-items: stretch; row-gap: 0; }
  body.t1 .final-hero > h1 { all: unset; }
  body.t1 .final-hero > .final-hero-copy { grid-column: 1 / span 6; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
  body.t1 .final-hero-copy > h1 { margin: 0; font-size: 2.25rem; line-height: 1.2; white-space: nowrap; }
  body.t1 .final-hero > .final-student { grid-column: 7 / span 6; grid-row: 1; align-self: stretch; width: 100%; height: 100%; object-fit: cover; }
}
body.t1 .final-hero h1 em { display: inline !important; font-style: normal; }