/* Content layout uses the shared foundation and mock-page tokens. */
.fx .mk-content-list { list-style: none; display: grid; gap: var(--space-gap); }
.fx .mk-content-list li { display: grid; gap: var(--s1); padding: var(--s3); border: var(--line) solid var(--ink); }
.fx .mk-content-list .fx-btn { justify-self: start; }
.fx .mk-content-index { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; }
.fx .mk-content-index a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px var(--s2); border: var(--line) solid var(--ink); border-radius: var(--r); text-decoration: none; overflow-wrap: anywhere; }
.fx .mk-content-list h3 a { display: inline-flex; align-items: center; min-height: 40px; }
.fx .mk-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); list-style: none; }
.fx .mk-book { display: grid; align-content: start; gap: var(--s1); height: 100%; min-height: var(--touch); padding: var(--s3); border: var(--line) solid var(--ink); border-radius: var(--r); text-decoration: none; overflow-wrap: anywhere; }
.fx .mk-book:hover, .fx .mk-content-index a:hover { background: var(--surface); }
.fx .mk-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx .mk-table-wrap { min-width: 0; max-width: 100%; }
.fx .mk-table th[scope='row'] { white-space: normal; }
.fx .mk-table :is(th, td) { overflow-wrap: anywhere; }
.fx .mk-table .mk-pay { white-space: nowrap; }
.fx .mk-content-thumb { width: var(--s6); min-width: var(--touch); }
.fx .mk-zoom { min-height: 40px; }
.fx .mk-sample .fx-btn { justify-self: start; }
.fx .fx-work > section, .fx [data-grade] { min-width: 0; scroll-margin-block: var(--s2); }
@media (max-width: 860px) {
  .fx .mk-samples, .fx .mk-books { grid-template-columns: minmax(0, 1fr); }
  .fx .fx-work { padding-bottom: var(--s2); }
}

/* product-name cell: no grey fill (director review) */
.fx .mk-table th[scope='row'] { background: none; font-weight: 500; }

/* P0 (astra review): on phones every product row becomes a card — name, then type + question count, then price + round, then preview + status */
@media (max-width: 860px) {
  .fx .mk-prodtable { min-width: 0; }
  .fx .mk-prodtable thead { display: none; }
  .fx .mk-prodtable, .fx .mk-prodtable tbody { display: block; }
  .fx .mk-prodtable tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s1) var(--space-gap); margin: 0 0 var(--s2); padding: var(--s3); border: var(--line) solid var(--ink); border-radius: 8px; }
  .fx .mk-prodtable :is(th, td) { display: block; min-width: 0; padding: 0; border: 0; background: none; text-align: start; }
  .fx .mk-prodtable td::before { content: attr(data-label); display: block; font: var(--t6); opacity: 0.7; }
  .fx .mk-prodtable th[scope='row'] { grid-column: 1 / -1; order: -1; font: var(--t4); font-weight: 600; }
  .fx .mk-prodtable td:nth-of-type(1) { order: 1; }
  .fx .mk-prodtable td:nth-of-type(3) { order: 2; }
  .fx .mk-prodtable td:nth-of-type(4) { order: 3; }
  .fx .mk-prodtable td:nth-of-type(2) { order: 4; }
  .fx .mk-prodtable td:nth-of-type(5) { order: 5; }
  .fx .mk-prodtable td:nth-of-type(6) { order: 6; }
}

/* Library and orders: compact controls, with guidance below the title row. */
html body.fx :is(.mk-intro, .mk-hub-search) { display: grid; gap: var(--s1); margin-bottom: var(--s2); min-width: 0; }
html body.fx .mk-intro:empty, html body.fx .mk-hub-search[hidden] { display: none; }
html body.fx .mk-hub-search input { width: 100%; min-width: 0; min-height: var(--touch); }
html body.fx .fx-work:has(.mk-intro) :is(.fx-btn, .fx-chip) { min-height: var(--touch); min-width: var(--touch); height: auto; padding: var(--s1) var(--s2); font-weight: 500; box-shadow: none; overflow-wrap: anywhere; white-space: normal; }
html body.fx .fx-work:has(.mk-intro) .fx-btn { border-radius: 8px; }
html body.fx .fx-work:has(.mk-intro) .fx-chip { border-radius: 6px; }
html body.fx .fx-work:has(.mk-intro) .fx-chip:is([aria-pressed='true'], [aria-current='true'], .is-selected),
html body.fx .fx-work:has(.mk-intro) .fx-chip:is([aria-pressed='true'], [aria-current='true'], .is-selected):is(:hover, :focus, :active, :focus-visible) { background: var(--navy); color: var(--paper); }
html body.fx .fx-page-orders .mk-cta-row { display: flex; flex-wrap: wrap; gap: var(--s1); }
html body.fx .fx-page-orders .mk-cta-row a { max-width: 100%; }
html body.fx .mk-intro :is(p, figure) { margin: 0; }
html body.fx .mk-intro figure { display: none; }

/* At phone widths, preserve the table structure while laying out each row as a card. */
@media (max-width: 600px) {
  .fx .mk-table-wrap { overflow: visible; }
  .fx .mk-table, .fx .mk-table tbody { display: block; width: 100%; min-width: 0; }
  .fx .mk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fx .mk-table caption { display: block; }
  .fx .mk-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s2); padding: var(--s2); margin: 0 0 var(--s1); border: var(--line) solid var(--ink); border-radius: 8px; }
  .fx .mk-table tbody :is(th, td) { min-width: 0; padding: 0; border: 0; background: none; }
  .fx .mk-table:not(.mk-prodtable) th { grid-column: 1 / -1; }
  .fx .mk-table:not(.mk-prodtable) td:nth-of-type(2)::before { content: '가격 '; }
  .fx .mk-prodtable tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .fx .mk-prodtable th[scope='row'] { grid-column: auto; order: 0; font-size: 0; }
  .fx .mk-prodtable th[scope='row']::before { content: attr(data-unit); font: var(--t5); }
  .fx .mk-prodtable td[data-label='자료 종류'] { order: 1; }
  .fx .mk-prodtable td[data-label='가격'] { order: 2; }
  .fx .mk-prodtable td:is([data-label='회차'], [data-label='문항 수'], [data-label='구매']) { display: none; }
  .fx .mk-prodtable td[data-label='첫 쪽'] { grid-column: 1 / -1; order: 3; }
  .fx .mk-prodtable td[data-label='첫 쪽']::before { display: none; }
  .fx .mk-prodtable .mk-content-thumb { width: var(--touch); }
}
@media (max-width: 600px) {
  .fx .mk-prodtable td[data-round]:not([data-round=''])::after { content: ' · ' attr(data-round); }
  .fx .mk-prodtable thead { display: block; }
}

/* The four category cards sit in one first-screen grid on phones (2 x 2), no long vertical list. */
@media (max-width: 600px) {
  html body:not(#_) .hv-entries { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--s1) !important; }
  html body:not(#_) .hv-entries .hv-card { padding: var(--s2) var(--s1) !important; gap: 4px !important; }
  html body:not(#_) .hv-entries .hv-card h2 { font: var(--t4) !important; font-weight: 700 !important; }
  html body:not(#_) .hv-entries .hv-card > p:not(:last-child) { font: var(--t6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  html body:not(#_) .hv-entries .hv-card > p:nth-last-child(2):not(:first-of-type) { display: none; }
  html body:not(#_) .hv-entries .hv-card .fx-btn { min-height: 40px; padding-inline: var(--s1); font-size: 13px; white-space: normal; }
}