/* /mock/offer/ — layout glue on the design foundation (tokens only: no new colours, sizes or radii). */
.fx .mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.fx .mk-fig { display: grid; gap: var(--s1); margin: 0; }
.fx .mk-fig img { display: block; max-width: 100%; height: auto; border: var(--line) solid var(--ink); background: var(--paper); }
.fx .mk-tablewrap { overflow-x: auto; }
.fx .mk-table { width: 100%; border-collapse: collapse; text-align: start; font: var(--t5); }
.fx .mk-table caption { text-align: start; padding: 0 0 var(--s1); }
.fx .mk-table :is(th, td) { padding: var(--s1); border-bottom: var(--line) solid var(--ink); vertical-align: top; text-align: start; }
.fx .mk-table th { font-weight: 700; }
.fx .mk-steps { padding-inline-start: var(--s3); list-style: decimal; }
.fx .mk-steps li + li { margin-top: var(--s1); }
.fx .mk-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx .mk-faq { border-top: var(--line) solid var(--ink); padding: var(--s1) 0; }
.fx .mk-faq summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.fx .mk-faq p { padding-bottom: var(--s1); }
.fx select.fx-input { min-height: var(--input-h); }
.fx #files .fx-btn { justify-self: start; }
@media (max-width: 720px) { .fx .mk-split { grid-template-columns: minmax(0, 1fr); } }

/* ---- shared by /mock/, /mock/offer/ and /payment.html (all inside the foundation shell) ---- */
/* sections keep their natural height: the foundation's flex:1 on .fx-work > .fx-stack stretched them (≈200px gaps) */
.fx .fx-work > .fx-stack, .fx .fx-work > div.fx-stack { flex: 0 0 auto; }
.fx .fx-work { gap: var(--s4); }
/* disabled pay / price buttons read 'Coming soon' (their own label), not the foundation's appended '(준비 중)' */
.fx .fx-btn.mk-pay:is(:disabled, [aria-disabled='true'])::after, .fx .fx-btn.mk-pay::after { content: none; }
/* round list + price cards on the landing */
.fx .mk-rounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); list-style: none; padding: 0; }
.fx .mk-rounds li { border: var(--line) solid var(--ink); padding: var(--s1) var(--s2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1); font: var(--t5); }
.fx .mk-rounds li span:first-child { white-space: nowrap; }
.fx .mk-rounds li[data-open="true"] { background: var(--surface); }
.fx .mk-rounds li span:last-child { font: var(--t5); }
/* payment page */
.fx form#buyer { display: grid; gap: var(--space-gap); }
.fx form#buyer label { display: grid; gap: var(--s1); }
.fx form#buyer label.terms-consent { display: flex; gap: var(--s1); align-items: flex-start; font: var(--t5); }
.fx form#buyer label.terms-consent input { flex: none; width: var(--touch); height: var(--touch); margin-top: 2px; accent-color: var(--navy); }
.fx #items { list-style: none; padding: 0; display: grid; gap: var(--s1); }
.fx #items li { border: var(--line) solid var(--ink); padding: var(--s1) var(--s2); }
.fx #total { font: var(--t3); }
.fx #widget { display: grid; gap: var(--space-gap); }
.fx #downloads { display: grid; gap: var(--s1); justify-items: start; }

/* 390: top tabs scroll sideways; fade on the right edge shows there is more, page itself never scrolls sideways */
@media (max-width: 860px) {
  .fx .fx-tabs { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--s4)), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--s4)), transparent); padding-inline-end: calc(var(--s4) * 2); scrollbar-width: none; }
  .fx .fx-tabs::-webkit-scrollbar { display: none; }
}

/* footer: links sit on the same baseline as their label (the shared 44px touch rule made them inline-flex and dropped the value a line) */
/* Korean copy breaks between words, never inside one (390 titles like 실/전 규격) */
.fx .fx-work { word-break: keep-all; overflow-wrap: break-word; }

/* ---- /mock V2 sections ---- */
.fx .mk-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-gap); }
.fx .mk-cta-row > .fx-btn { width: auto; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.fx .mk-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.fx .mk-sample { margin: 0; display: grid; gap: var(--s1); align-content: start; }
.fx .mk-zoom { padding: 0; border: var(--line) solid var(--ink); background: var(--paper); cursor: zoom-in; display: block; }
.fx .mk-zoom img { display: block; width: 100%; height: auto; }
.fx .mk-table-wrap { overflow-x: auto; }
.fx .mk-table { width: 100%; border-collapse: collapse; font: var(--t5); }
.fx .mk-table th, .fx .mk-table td { border: var(--line) solid var(--ink); padding: var(--s1) var(--s2); text-align: start; vertical-align: top; }
.fx .mk-table th[scope='row'] { white-space: nowrap; background: var(--surface); }
.fx .mk-rounds-table th[scope='col'] { background: var(--surface); }
.fx .mk-rounds-table tr[data-open='false'] td { color: var(--ink); }
.fx .mk-topics summary { cursor: pointer; text-decoration: underline; }
.fx .mk-topics ol { margin: var(--s1) 0 0; padding-inline-start: var(--s4); display: grid; gap: var(--s1); }
.fx .mk-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.fx .mk-numbered { margin: 0; padding-inline-start: var(--s4); display: grid; gap: var(--space-gap); }
.fx .mk-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.fx .mk-steps li { display: flex; gap: var(--space-gap); align-items: baseline; border: var(--line) solid var(--ink); padding: var(--s1) var(--s2); }
.fx details.mk-faq { border: var(--line) solid var(--ink); padding: var(--s1) var(--s2); }
.fx details.mk-faq summary { cursor: pointer; font: var(--t4); min-height: 40px; display: flex; align-items: center; }
.fx .mk-lightbox { max-width: 96vw; max-height: 96vh; padding: var(--s2); border: var(--line) solid var(--ink); background: var(--paper); }
.fx .mk-lightbox img { display: block; max-width: 100%; max-height: calc(96vh - var(--touch) - var(--s4)); width: auto; height: auto; margin-top: var(--s2); }
.fx .mk-lightbox::backdrop { background: var(--ink); opacity: 0.6; }
.fx .mk-cta-bar { display: none; }
@media (max-width: 860px) {
  .fx .mk-guide { grid-template-columns: minmax(0, 1fr); }
  /* P0 (astra review): the fixed CTA owns a dedicated bottom strip; the page reserves 72px + safe area so it never covers content */
  .fx .mk-cta-bar { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 5; padding: var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: var(--line) solid var(--navy); box-shadow: 0 calc(-1 * var(--s1)) var(--s2) var(--paper); }
  .fx .mk-cta-bar[data-hidden='true'] { display: none; }
  .fx .mk-cta-bar > .fx-btn { width: 100%; display: flex; justify-content: center; text-decoration: none; }
  .fx .fx-work { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

.fx .mk-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); align-items: flex-start; }
.fx .mk-chips.is-tall { flex-direction: column; }
.fx .mk-chips li { border: var(--line) solid var(--ink); padding: calc(var(--s1) / 2) var(--s2); font: var(--t6); white-space: nowrap; }
.fx .mk-rounds-table td { vertical-align: top; }
.fx .mk-rounds-table tr[data-made='true'] .mk-topics ol { margin-top: 0; }

@media (max-width: 860px) {
  .fx .mk-rounds-table thead { display: none; }
  .fx .mk-rounds-table, .fx .mk-rounds-table tbody, .fx .mk-rounds-table tr { display: block; }
  .fx .mk-rounds-table tr { display: grid; grid-template-columns: auto 1fr; border: var(--line) solid var(--ink); margin-bottom: var(--s1); }
  .fx .mk-rounds-table th, .fx .mk-rounds-table td { display: block; border: 0; }
  .fx .mk-rounds-table th[scope='row'] { grid-column: 1; }
  .fx .mk-rounds-table td:nth-child(2) { grid-column: 2; }
  .fx .mk-rounds-table td:nth-child(n+3) { grid-column: 1 / -1; border-top: var(--line) solid var(--ink); }
  .fx .mk-chips.is-tall { flex-direction: row; }
}
@media (min-width: 861px) {
  /* grid rows: narrow 회·상태, content-fit chips, wide topics; the chip list stretches to the row height (no empty block) */
  .fx .mk-rounds-table, .fx .mk-rounds-table thead, .fx .mk-rounds-table tbody { display: block; }
  .fx .mk-rounds-table tr { display: grid; grid-template-columns: 4.5rem 8rem 15rem minmax(0, 1fr); }
  .fx .mk-rounds-table th, .fx .mk-rounds-table td { display: flex; flex-direction: column; border-top: 0; border-inline-start: 0; }
  .fx .mk-rounds-table tr + tr > * { border-top: var(--line) solid var(--ink); }
  .fx .mk-rounds-table td[colspan] { grid-column: 3 / -1; }
  .fx .mk-rounds-table .mk-chips.is-tall { flex: 1; display: grid; grid-auto-rows: 1fr; align-content: stretch; justify-items: stretch; }
  .fx .mk-rounds-table .mk-chips.is-tall li { display: flex; align-items: center; }
}

/* ---- How we made it ---- */
.fx .mk-bars { margin: 0; display: grid; gap: var(--s1); align-content: start; }
.fx .mk-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.fx .mk-bars li { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); align-items: center; font: var(--t5); }
.fx .mk-bars li > span:last-child { text-align: end; }
.fx .mk-bar { display: block; height: var(--s2); border: var(--line) solid var(--ink); background: var(--paper); }
.fx .mk-bar > i { display: block; height: 100%; background: var(--navy); }
.fx #making-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
/* 8 steps as numbered cards; wraps into rows, never sideways-scrolls */
.fx .mk-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-gap); }
.fx .mk-flow > li { border: var(--line) solid var(--ink); padding: var(--s3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-gap); align-content: start; }
.fx .mk-flow > li > h3 { grid-column: 1 / -1; }
.fx .mk-flow > li:has(> .mk-viz) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* diagram left, explanation right (CEO 10/11 19:07) */
.fx .mk-flow > li:has(> .mk-viz) > :not(h3):not(.mk-viz) { grid-column: 2; }
.fx .mk-flow > li:has(> .mk-viz) > .mk-viz { grid-column: 1; grid-row: 2; }
.fx .mk-flow > li:has(> .mk-viz) > .mk-step-text { grid-row: 2; align-self: stretch; }
.fx .mk-flow h3 { display: flex; gap: var(--s1); align-items: baseline; }
.fx .mk-flow .mk-step-n { display: inline-grid; place-items: center; min-width: 32px; border: var(--line) solid var(--ink); font: var(--t6); }
.fx .mk-flow ul { margin: 0; padding-inline-start: var(--s3); display: grid; gap: var(--s1); }
.fx .mk-flow .mk-step-n { font: var(--t6); }
@media (max-width: 860px) { .fx .mk-bars li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4rem; } .fx .mk-flow { grid-template-columns: minmax(0, 1fr); } .fx .mk-bars li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fx .mk-bars li > span:last-child { grid-column: 1 / -1; text-align: start; } }
.fx .mk-why { margin: 0; padding-inline-start: var(--s3); display: grid; gap: var(--s1); }

/* step diagrams */
.fx .mk-viz { margin: 0; display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.fx .mk-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px; }
.fx .mk-strip li { border: var(--line) solid var(--ink); display: grid; place-items: center; padding: var(--s1) 0; font: var(--t6); text-align: center; min-width: 0; }
.fx .mk-strip li[data-g='blank'] { background: var(--navy); color: var(--paper); }
.fx .mk-strip li[data-g='flow'] { background: var(--surface); font-weight: 700; }
.fx .mk-strip li[data-g='etc'] { background: var(--paper); }
.fx .mk-strip small { display: block; font: var(--t6); }
.fx .mk-legend-inline { display: flex; flex-wrap: wrap; gap: var(--space-gap); font: var(--t6); list-style: none; margin: 0; padding: 0; }
.fx .mk-annot-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
.fx .mk-annot-page { position: relative; border: var(--line) solid var(--ink); }
.fx .mk-annot-page img { display: block; width: 100%; height: auto; }
.fx .mk-pin { position: absolute; border: var(--line-strong) solid var(--navy); }
.fx .mk-pin b { position: absolute; top: calc(-1 * var(--s2)); inset-inline-start: calc(-1 * var(--s1)); min-width: 24px; text-align: center; background: var(--navy); color: var(--paper); font: var(--t6); }
.fx .mk-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--space-gap); }
.fx .mk-legend b { display: inline-block; min-width: 24px; text-align: center; background: var(--navy); color: var(--paper); }
@media (max-width: 860px) {
  .fx .mk-flow > li:has(> .mk-viz) { grid-template-columns: minmax(0, 1fr); }
  .fx .mk-flow > li:has(> .mk-viz) > .mk-viz { grid-column: 1; grid-row: 2; }
  .fx .mk-flow > li:has(> .mk-viz) > :not(h3):not(.mk-viz) { grid-column: 1; grid-row: 3; }
  .fx .mk-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.fx .mk-pin[data-side='end'] b { inset-inline-start: auto; inset-inline-end: calc(-1 * var(--s1)); }

.fx .mk-viz-body { display: grid; gap: var(--s1); min-width: 0; }
.fx .mk-heat-wrap { overflow-x: auto; }
.fx .mk-heat { border-collapse: collapse; font: var(--t6); }
.fx .mk-heat th, .fx .mk-heat td { border: var(--line) solid var(--ink); padding: calc(var(--s1) / 2) var(--s1); text-align: center; min-width: 32px; }
.fx .mk-heat td[data-v] { background: color-mix(in srgb, var(--navy) calc(var(--v) * 30%), var(--paper)); color: var(--ink); }
.fx .mk-heat td[data-v='3'] { color: var(--paper); }
.fx .mk-heat-total th, .fx .mk-heat-total td { background: var(--surface); font-weight: 700; }
.fx .mk-heat-legend { margin: 0; padding-inline-start: var(--s4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-gap); }
.fx .mk-len { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.fx .mk-len li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 2px var(--s1); align-items: center; font: var(--t6); }
.fx .mk-len-text { grid-column: 2; }
.fx .mk-len-track { position: relative; display: block; height: var(--s3); border-bottom: var(--line) solid var(--ink); }
.fx .mk-len-target { position: absolute; top: 0; bottom: 0; border: var(--line) solid var(--ink); background: var(--surface); }
.fx .mk-len-actual { position: absolute; top: 25%; height: 50%; background: var(--navy); }
.fx .mk-len-mean { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: var(--line-strong) solid var(--paper); text-decoration: none; }
.fx .mk-cue { display: grid; gap: var(--s1); min-width: 0; }
.fx .mk-cue-given { margin: 0; padding: var(--s1) var(--s2); border: var(--line) solid var(--ink); background: var(--surface); font: var(--t5); }
.fx .mk-cue-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s1); align-items: start; }
.fx .mk-cue-row > div { display: grid; gap: 2px; }
.fx .mk-cue-arrow { font: var(--t4); }
.fx .mk-cue-slots { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); }
.fx .mk-cue-slots li { border: var(--line) solid var(--ink); min-width: 32px; text-align: center; padding: calc(var(--s1) / 2) var(--s1); }
.fx .mk-cue-slots li[data-answer='true'] { background: var(--navy); color: var(--paper); font-weight: 700; }

.fx .mk-review { font: var(--t6); }
.fx .mk-hist { display: grid; gap: var(--s1); }
.fx .mk-badge { margin: 0; justify-self: start; border: var(--line-strong) solid var(--navy); padding: calc(var(--s1) / 2) var(--s2); font: var(--t5); font-weight: 700; }
.fx .mk-hist-plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: 10rem; border-bottom: var(--line) solid var(--ink); padding-top: var(--s3); }
.fx .mk-hist-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.fx .mk-hist-col > i { display: block; background: var(--navy); min-height: 0; }
.fx .mk-hist-n { text-align: center; font: var(--t6); }
.fx .mk-hist-x { position: absolute; bottom: calc(-1 * var(--s3)); inset-inline-start: 0; font: var(--t6); }
.fx .mk-hist-ref { position: absolute; top: 0; bottom: 0; border-inline-start: var(--line-strong) dashed var(--ink); }
.fx .mk-hist-ref span { position: absolute; top: 0; inset-inline-end: var(--s1); white-space: nowrap; font: var(--t6); background: var(--paper); }
.fx .mk-hist { padding-bottom: var(--s3); }
.fx .mk-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); }
.fx .mk-thumbs figure { margin: 0; display: grid; gap: 2px; text-align: center; }
.fx .mk-thumbs img { width: 100%; height: auto; border: var(--line) solid var(--ink); display: block; }
@media (max-width: 860px) { .fx .mk-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx .mk-hist-plot { margin-bottom: var(--s3); }

.fx .mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.fx .mk-split-text { display: grid; gap: var(--s1); }
@media (max-width: 860px) { .fx .mk-split { grid-template-columns: minmax(0, 1fr); } }

/* explanation column: text on top, key figures pinned to the bottom so the column matches the diagram height */
.fx .mk-step-text { display: flex; flex-direction: column; gap: var(--space-gap); min-width: 0; }
.fx .mk-step-text ul.mk-facts { list-style: none; margin: auto 0 0; padding: var(--s2) 0 0; border-top: var(--line) solid var(--ink); display: flex; flex-wrap: wrap; gap: var(--space-gap) var(--s3); }
.fx .mk-facts li { display: grid; gap: 2px; min-width: 6rem; }
.fx .mk-facts b { font: var(--t3); }
.fx .mk-facts span { font: var(--t6); }
.fx .mk-diff { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .fx .mk-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fx .mk-diff { grid-template-columns: minmax(0, 1fr); } }