/* Shared screen layout for study pages; printed A4 styles stay in the HTML. */
@media screen {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
  body { width: 100%; box-sizing: border-box; }
  .exam-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .exam-table-scroll:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
  mjx-container[display="true"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 5px 0; }
  mjx-container:not([display="true"]) { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; padding: 3px 0; }
  img, svg { max-width: 100%; height: auto; }
  a, button { touch-action: manipulation; }
  a:focus-visible, button:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
  html #exam-nav-bar { height: calc(52px + env(safe-area-inset-top)) !important; padding-top: env(safe-area-inset-top) !important; padding-left: max(8px, env(safe-area-inset-left)) !important; padding-right: max(8px, env(safe-area-inset-right)) !important; }
  html #exam-nav-spacer { height: calc(52px + env(safe-area-inset-top)); }
  html #exam-nav-sidebar { top: calc(52px + env(safe-area-inset-top)) !important; overscroll-behavior-y: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; }
  html #exam-nav-bar button, html #exam-nav-bar a.exam-navlink { min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; }
  html #exam-nav-sidebar a { min-height: 44px; display: flex !important; align-items: center; line-height: 1.45; }
  html #exam-nav-bar .exam-nav-title { min-width: 0; }
  body.exam-menu-open { overflow: hidden; }
}
@media screen and (max-width: 600px) {
  body { padding: 12px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); font-size: 17px; line-height: 1.6; }
  h1 { font-size: 23px; line-height: 1.25; overflow-wrap: anywhere; margin-bottom: 12px; }
  h2 { font-size: 21px; line-height: 1.35; margin-top: 28px; }
  h3, .level-title { font-size: 18px; line-height: 1.45; }
  .subtitle { font-size: 15px; line-height: 1.5; }
  .theory p { text-align: left; }
  p, li, h2, h3, .note { overflow-wrap: anywhere; }
  ol, ul { padding-left: 26px; }
  ol.problems { padding-left: 26px; }
  ol.problems > li { margin: 18px 0; }
  .note, .formula-box { padding: 12px; font-size: 16px; }
  .example { padding-left: 12px; }
  .exam-table-scroll { margin: 16px 0; border-radius: 4px; }
  .exam-table-scroll table { min-width: 560px; margin: 0; }
  table.ftable td, table.ftable th { font-size: 16px; padding: 10px 12px; }
  ol:not(.problems) > li { margin: 10px 0; }
  ol:not(.problems) a { display: inline-block; padding: 8px 0; }
  html #exam-nav-bar .exam-nav-word { display: none; }
  html #exam-nav-bar .exam-nav-title { font-size: 12px !important; padding: 0 2px !important; }
  html #exam-nav-bar { gap: 4px !important; }
  html #exam-nav-bar a.exam-navlink, html #exam-nav-bar button { font-size: 19px !important; padding: 8px !important; }
  html ol.problems > li .exam-ans-btn { min-height: 44px; padding: 8px 14px; font-size: 15px; margin-top: 8px; }
  html .exam-ans-all { float: none; display: block; min-height: 44px; padding: 8px 12px; font-size: 15px; margin-top: 8px; }
  html ol.problems > li .exam-ans { padding: 10px; }
}
@media print {
  .exam-table-scroll { overflow: visible; }
}