/*
 * Intopia public mobile contract
 *
 * This file supplies the minimum responsive behavior shared by every public
 * page. Page-specific styles may refine it, but must not remove these guards.
 */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  min-width: 0;
  max-width: 100%;
}

img,
picture,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

img,
picture,
video {
  height: auto;
}

pre,
table,
.katex-display,
.MathJax_Display,
mjx-container[display="true"],
[data-mobile-scroll] {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

pre,
code,
.katex-display,
.MathJax_Display,
mjx-container[display="true"] {
  scrollbar-width: thin;
}

h1,
h2,
h3,
p,
li,
dd,
dt,
a,
button {
  overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

@media (max-width: 760px) {
  :root {
    --intopia-mobile-gutter: 20px;
  }

  html,
  body {
    width: 100%;
  }

  body {
    overflow-x: clip;
  }

  body.has-intopia-floating-return {
    padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important;
  }

  body.has-intopia-floating-return.has-sage-nav {
    padding-top: calc(104px + env(safe-area-inset-top, 0px)) !important;
  }

  @supports not (overflow: clip) {
    body {
      overflow-x: hidden;
    }
  }

  /* Claude/DC inline layouts use this repeated max-width + auto-margin form. */
  body [style*="max-width:"][style*="margin:0 auto"],
  body [style*="max-width:"][style*="margin: 0px auto"],
  body [style*="max-width:"][style*="margin: 0 auto"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  body [style*="max-width:"][style*="margin:0 auto"][style*="padding:"],
  body [style*="max-width:"][style*="margin: 0px auto"][style*="padding:"],
  body [style*="max-width:"][style*="margin: 0 auto"][style*="padding:"] {
    padding-right: var(--intopia-mobile-gutter) !important;
    padding-left: var(--intopia-mobile-gutter) !important;
  }

  /* Repeated desktop card columns become readable single-column sections. */
  body [style*="grid-template-columns:repeat(2"],
  body [style*="grid-template-columns: repeat(2"],
  body [style*="grid-template-columns:repeat(3"],
  body [style*="grid-template-columns: repeat(3"],
  body [style*="grid-template-columns:repeat(4"],
  body [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body [style*="display:flex"][style*="gap:64px"],
  body [style*="display: flex"][style*="gap: 64px"],
  body [style*="display:flex"][style*="gap:40px"],
  body [style*="display: flex"][style*="gap: 40px"] {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  /*
   * Rich readers can nest age-level or scale cards several layers deep.
   * Grid items default to an intrinsic minimum width, so one long sentence
   * can push the entire page past the viewport unless every layer can shrink.
   */
  .chain,
  .eq,
  .dim,
  .grade-stack,
  .scale-stack,
  .grade,
  .scale {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .grade-stack,
  .scale-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .chain {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .eq {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .dim,
  .grade,
  .scale {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .grade,
  .scale {
    overflow-wrap: anywhere;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .eq-display,
  .chain-flow {
    max-width: 100% !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .katex-display .katex,
  .eq-display .katex,
  .dim .katex,
  .grade .katex,
  .scale .katex {
    position: relative;
  }

  /* Shared primary navigation: brand row, then five stable destinations. */
  .intopia-primary-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 14px var(--intopia-mobile-gutter) 12px !important;
  }

  .intopia-primary-nav > a:first-child {
    justify-self: start;
  }

  .intopia-primary-nav > div {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  .intopia-primary-nav > div > a {
    display: flex !important;
    min-width: 0 !important;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 5px 2px !important;
    text-align: center !important;
  }

  .intopia-primary-nav > div > a > div:first-child {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }

  .intopia-primary-nav > div > a > span:first-child {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }

  .intopia-primary-nav > div > a > div:last-child,
  .intopia-primary-nav > div > a > small {
    display: none !important;
  }

  table {
    display: block;
    width: max-content;
  }

  /*
   * Rich-preview genealogy tables all use the same three columns
   * (person, work, note). On phones, turn each row into a readable record
   * instead of hiding the last column behind horizontal scrolling.
   */
  body > .section-block {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body > .section-block .eq {
    padding-right: 11px !important;
    padding-left: 11px !important;
  }

  body > .section-block .dim {
    min-width: 0;
    max-width: 100%;
    padding-right: 11px !important;
    padding-left: 11px !important;
  }

  .dim.gen {
    overflow: hidden;
  }

  .dim.gen table,
  .dim.gen tbody,
  .dim.gen tr,
  .dim.gen td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  .dim.gen table {
    overflow: visible;
  }

  .dim.gen thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .dim.gen tr {
    padding: 10px 0;
    border-bottom: 1px solid rgba(28, 28, 30, 0.1);
  }

  .dim.gen tr:last-child {
    border-bottom: 0;
  }

  .dim.gen td {
    padding: 2px 0 !important;
    border-bottom: 0 !important;
    overflow-wrap: anywhere;
  }

  .dim.gen td::before {
    display: block;
    color: var(--gen, #3a7a5a);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
  }

  .dim.gen td:nth-child(1)::before {
    content: "인물";
  }

  .dim.gen td:nth-child(2)::before {
    content: "저작";
  }

  .dim.gen td:nth-child(3)::before {
    content: "설명";
  }

  .dim.gen td + td {
    margin-top: 5px;
  }

  pre {
    white-space: pre;
  }
}

@media (max-width: 430px) {
  :root {
    --intopia-mobile-gutter: 16px;
  }

  .intopia-primary-nav > div > a > div:first-child {
    font-size: 11px !important;
  }
}