/* JudeBible mobile one-flow: every page shows ONE panel at a time; a bottom tab bar switches between panels.
   study: 본문 | 본문연구(or 장소·인물) | 주제탐색 | 지도   ·   timeline: 연표 | 상세   ·   search: 검색 | 상세
   Active only at phone width and only when mobile-flow-20261016.js has set body[data-mflow]. */
#m-flow-tabs { display: none; }
@media (max-width: 760px) {
  body[data-mflow] { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body[data-mflow] #m-flow-tabs {
    display: flex; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80; height: 56px; gap: 4px; padding: 5px;
    border-radius: 18px; border: 1px solid rgba(150, 115, 62, .38);
    background: linear-gradient(145deg, rgba(255, 253, 248, .92), rgba(248, 242, 231, .82));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(60, 45, 20, .22);
  }
  body[data-mflow] #m-flow-tabs button {
    flex: 1 1 0; min-width: 0; border: 0; border-radius: 13px; background: transparent; color: #6b5a49;
    font: 700 13px/1.1 inherit; font-family: inherit; padding: 0 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body[data-mflow] #m-flow-tabs button[aria-selected="true"] { background: #b5703c; color: #fffaf0; box-shadow: 0 2px 6px rgba(120, 70, 30, .35); }

  /* ---- study page ---- */
  body[data-mflow][data-view="study"]:not([data-mtab="text"]) #text-pane { display: none !important; }
  body[data-mflow][data-view="study"]:not([data-mtab="guide"]) #guide-pane { display: none !important; }
  body[data-mflow][data-view="study"][data-mtab="guide"] #guide-pane { width: auto; max-width: none; flex: 1 1 auto; }

  /* ---- map-pane hosts the side panel; show it only for the map / detail tabs ---- */
  body[data-mflow]:not([data-mtab="map"]):not([data-mtab="detail"]) #map-pane { display: none !important; }
  body[data-mflow][data-mtab="detail"] #map-pane { display: block !important; position: static; width: 0; height: 0; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
  body[data-mflow][data-mtab="detail"] #map-pane > :not(#side-pane) { display: none !important; }
  body[data-mflow][data-mtab="map"] #side-pane { display: none !important; }
  body[data-mflow][data-mtab="map"] #map-pane {
    display: block !important; position: relative; width: 100% !important; max-width: none !important; flex: 1 1 100%; grid-column: 1 / -1; margin: 0;
    height: calc(100dvh - 200px); min-height: 360px; overflow: hidden;
  }
  body[data-mflow][data-mtab="map"] #map-pane #map-body { display: block !important; position: absolute; inset: 42px 0 0 0; height: auto !important; max-height: none; }
  body[data-mflow][data-mtab="map"] #map-pane #map-body > * { max-height: none; }

  /* ---- detail tab: the side panel fills the screen (no bottom-sheet) ---- */
  body[data-mflow][data-mtab="detail"] #side-pane {
    display: flex !important; position: fixed !important; z-index: 70; left: 0; right: 0; top: 48px; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; height: auto; max-height: none; transform: none !important; border-radius: 0; margin: 0;
  }
  body[data-mflow]:not([data-mtab="detail"]) #side-pane { display: none !important; }
  body[data-mflow] #side-pane .rs-collapse, body[data-mflow] #side-pane #panel-toggle, body[data-mflow] #side-pane .sheet-grip { display: none !important; }

  /* ---- timeline and search: main view or detail view ---- */
  body[data-mflow][data-view="timeline"][data-mtab="detail"] #timeline-pane,
  body[data-mflow][data-view="explore"][data-mtab="detail"] #search-workspace,
  body[data-mflow][data-view="explore"][data-mtab="detail"] #topic-board { visibility: hidden; }
  body[data-mflow][data-view="timeline"][data-mtab="detail"] #rail,
  body[data-mflow][data-view="explore"][data-mtab="detail"] #rail { visibility: hidden; }

  /* ---- timeline: one vertical flow (era list -> era detail -> events -> overview) ---- */
  body[data-mflow][data-view="timeline"] #timeline-pane { padding: 12px 12px 90px; }
  body[data-mflow][data-view="timeline"] .tl-page { display: flex !important; flex-direction: column; gap: 14px; }
  body[data-mflow][data-view="timeline"] .tl-detail { position: static !important; max-height: none !important; width: auto; }
}
@media (max-width: 760px) {
  html body[data-mflow][data-mtab="map"][data-map] #stage #map-pane,
  html body[data-mflow][data-mtab="map"] #map-pane {
    width: 100% !important; min-width: 0 !important; max-width: none !important; align-self: stretch !important;
    height: calc(100dvh - 200px) !important; min-height: 360px !important; border-radius: 16px;
  }
}
@media (max-width: 760px) {
  /* the map fills the full screen width: its wrapper (#stage) was a narrow column */
  html body[data-mflow][data-mtab="map"] #stage { width: 100% !important; max-width: none !important; min-width: 0 !important; align-self: stretch !important; flex: 1 1 auto !important; }
  html body[data-mflow][data-mtab="map"] #workspace { padding-left: 8px; padding-right: 8px; }
  html body[data-mflow][data-mtab="map"] #map-pane { height: calc(100dvh - 230px) !important; }
}
@media (max-width: 760px) {
  html body[data-mflow][data-mtab="map"] #map-pane { height: calc(100vh - 240px) !important; min-height: 360px !important; }
  html body[data-mflow][data-mtab="map"] #map-pane #map-body { inset: 42px 0 0 0 !important; }
}
@media (max-width: 760px) {
  /* map tab: the map runs from just under the page tabs/tools down to the bottom tab bar */
  html body[data-mflow][data-mtab="map"] #map-pane {
    position: fixed !important; left: 8px; right: 8px; top: var(--m-map-top, 170px); bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: auto !important; height: auto !important; min-height: 0 !important; z-index: 20; margin: 0;
  }
}
@media (max-width: 760px) {
  html body[data-mflow][data-mtab="map"] #map-pane { width: calc(100vw - 16px) !important; right: auto; }
}
@media (max-width: 760px) {
  /* search page: the result panel always runs down to the bottom tab bar (an open side sheet no longer shortens it) and scrolls inside */
  html body[data-mflow][data-view="explore"] #search-workspace { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; max-height: none !important; }
  html body[data-mflow][data-view="explore"] #search-workspace .sw-shell { height: 100% !important; max-height: none !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  html body[data-mflow][data-view="explore"] #topic-board { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; max-height: none !important; }
}
@media (max-width: 760px) {
  /* search page panel: rounded like the other panels, inset from the screen edges */
  html body[data-mflow][data-view="explore"] #search-workspace { left: 8px !important; right: 8px !important; width: auto !important; border-radius: 20px !important; overflow: hidden !important; }
  html body[data-mflow][data-view="explore"] #search-workspace .sw-shell { border-radius: 20px !important; }
}
@media (max-width: 760px) {
  /* ---- timeline: the page scrolls inside its own rounded panel (it was fixed + overflow hidden, so it could not scroll) ---- */
  html body[data-mflow][data-view="timeline"] #timeline-pane {
    position: fixed !important; left: 8px !important; right: 8px !important; top: var(--m-top, 102px) !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; height: auto !important; max-height: none !important;
    overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
    border-radius: 20px !important; padding: 12px 12px 24px !important;
  }
  /* ---- event pager "‹ 1–5 / 10 ›": large, dark, easy to tap (light mode too) ---- */
  html body[data-mflow][data-view="timeline"] .tl-event-head { flex-wrap: wrap; row-gap: 8px; }
  html body[data-mflow][data-view="timeline"] .tl-pager { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px; border-radius: 999px; background: rgba(255, 252, 244, .92); border: 1px solid rgba(150, 115, 62, .45); }
  html body[data-mflow][data-view="timeline"] .tl-pager button { width: 44px; height: 44px; font-size: 24px; line-height: 1; border-radius: 50%; color: #3d2f23; background: #fffaf0; border: 1px solid rgba(150, 115, 62, .55); opacity: 1; cursor: pointer; touch-action: manipulation; }
  html body[data-mflow][data-view="timeline"] .tl-pager button:disabled { opacity: .35; }
  html body[data-mflow][data-view="timeline"] .tl-pager .tl-page-ind { color: #3d2f23 !important; font-weight: 800; font-size: 15px; min-width: 72px; text-align: center; }

  /* ---- search: panel from just below the page tabs to just above the bottom tab bar; never shorter ---- */
  html body[data-mflow][data-view="explore"] #search-workspace { top: var(--m-top, 102px) !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  html body[data-mflow][data-view="explore"] #search-workspace .sw-shell { height: 100% !important; min-height: 100% !important; overflow-y: auto !important; touch-action: pan-y; }
}
@media (max-width: 760px) {
  /* map tab: from just under the page tabs/tools to just above the bottom tab bar */
  html body[data-mflow][data-mtab="map"] #map-pane { top: var(--m-top, var(--m-map-top, 170px)) !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; }
}
@media (max-width: 760px) {
  /* final word for the map tab (matches the specificity of the earlier #stage rule) */
  html body[data-mflow][data-mtab="map"][data-map] #stage #map-pane,
  html body[data-mflow][data-mtab="map"] #stage #map-pane {
    position: fixed !important; left: 8px !important; right: auto !important; width: calc(100vw - 16px) !important; max-width: none !important;
    top: var(--m-top, 170px) !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; min-height: 0 !important;
  }
}
@media (max-width: 760px) {
  /* ---- top bar: the two search boxes share the width; focusing one makes it fill the row ---- */
  html body[data-mflow] header.top { display: flex; align-items: center; gap: 6px; padding-left: 8px; padding-right: 8px; position: sticky; }
  html body[data-mflow] header.top .search-open { display: none !important; }
  html body[data-mflow] header.top #quick-search, html body[data-mflow] header.top .ref-form { position: static; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; }
  html body[data-mflow] header.top .ref-form { order: 1; }
  html body[data-mflow] header.top #quick-search { order: 2; }
  html body[data-mflow] header.top #quick-search .qs-main, html body[data-mflow] header.top #quick-search .qs-input,
  html body[data-mflow] header.top .ref-form .ref-input { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; height: 38px; font-size: 14px; text-overflow: ellipsis; }
  html body[data-mflow] header.top:has(#quick-search:focus-within) .ref-form,
  html body[data-mflow] header.top:has(.ref-form:focus-within) #quick-search { display: none !important; }
  html body[data-mflow] header.top:has(#quick-search:focus-within) #quick-search,
  html body[data-mflow] header.top:has(.ref-form:focus-within) .ref-form { flex: 1 1 100% !important; }
  /* result lists drop down across the whole screen width */
  html body[data-mflow] header.top .qs-list, html body[data-mflow] header.top .ref-pop {
    position: absolute !important; left: 8px !important; right: 8px !important; top: calc(100% + 4px) !important; width: auto !important; max-width: none !important;
    max-height: calc(var(--m-vh, 100vh) - 140px); overflow-y: auto; z-index: 120; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
}
@media (max-width: 760px) {
  /* ---- touch targets: at least ~40px to tap ---- */
  html body[data-mflow] #verses .vnum::after { content: ""; position: absolute; inset: -7px; }
  html body[data-mflow] #rail .rail-map-tools { gap: 2px; justify-content: space-around; }
  html body[data-mflow] #rail .rail-map-tools button { min-width: 42px; min-height: 42px; }
  html body[data-mflow] #map-pane .map-tools button { min-width: 42px; min-height: 42px; }
  /* overview strip of eras at the bottom of the timeline: scrolls sideways with big tap targets */
  html body[data-mflow][data-view="timeline"] .tl-mini { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html body[data-mflow][data-view="timeline"] .tl-mini-seg { flex: 0 0 76px !important; min-width: 76px; }
  html body[data-mflow][data-view="timeline"] .tl-mini-seg button { min-height: 52px; min-width: 76px; width: 100%; }
  html body[data-mflow] #side-pane .note-sort-select, html body[data-mflow] #side-pane summary { min-height: 40px; }
  html body[data-mflow] #search-workspace summary { min-height: 40px; display: flex; align-items: center; }
}
@media (max-width: 760px) {
  /* verse numbers: back to their own absolute position at the left of the first line; round badge, larger tap area */
  html body[data-mflow] #verses .verse .vnum { position: absolute !important; left: 10px !important; top: 10px !important; width: 30px; height: 30px; min-width: 30px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; }
  html body[data-mflow] #verses .verse .vnum::after { content: ""; position: absolute; inset: -6px; }
  html body[data-mflow] #verses .verse.sel .vnum, html body[data-mflow] #verses .verse.ol-default-active .vnum { top: 26px !important; }
}
@media (max-width: 760px) {
  /* ---- timeline: the event detail card lives in the detail tab; the main tab is the flowing timeline ---- */
  html body[data-mflow][data-view="timeline"][data-mtab="main"] #timeline-pane .tl-detail { display: none !important; }
  html body[data-mflow][data-view="timeline"][data-mtab="detail"] #timeline-pane .tl-left { display: none !important; }
  html body[data-mflow][data-view="timeline"][data-mtab="detail"] #timeline-pane .tl-detail { display: block !important; position: static !important; width: auto; max-height: none !important; }
  /* the timeline pane stays visible in the detail tab (it holds the detail card); the side panel is not used on this page */
  html body[data-mflow][data-view="timeline"][data-mtab="detail"] #timeline-pane { visibility: visible !important; }
  html body[data-mflow][data-view="timeline"][data-mtab="detail"] #rail { visibility: visible !important; }
  html body[data-mflow][data-view="timeline"][data-mtab="detail"] #side-pane { display: none !important; }
}
@media (max-width: 760px) {
  /* long-press range selection: no native text selection / callout inside the verses while selecting verses */
  html body[data-mflow] #verses .verse { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  html body.jbc-range-select #verses { touch-action: none; }
}
@media (max-width: 760px) {
  /* "성경 세계 탐색" (guide) tab: the panel spans the full width like every other panel, same 8px side margins */
  html body[data-mflow][data-view="study"][data-mtab="guide"] #guide-pane {
    width: calc(100vw - 16px) !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
    flex: 0 0 auto !important; align-self: stretch !important; box-sizing: border-box;
  }
  html body[data-mflow][data-view="study"][data-mtab="guide"] #stage { width: 100% !important; max-width: none !important; }
  html body[data-mflow][data-view="study"][data-mtab="guide"] #workspace { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 760px) {
  /* the guide panel's inner block was an opaque square box floating inside the rounded glass panel: let the panel itself be the surface */
  html body[data-mflow][data-view="study"][data-mtab="guide"] #guide-pane { padding: 6px 10px !important; }
  html body[data-mflow][data-view="study"][data-mtab="guide"] #guide-pane .g-body { background: transparent !important; border-radius: 14px; box-shadow: none !important; padding: 14px 6px 10px !important; }
}
@media (max-width: 760px) {
  /* map tools (zoom, locate, layers, save, print) only matter on the map tab */
  html body[data-mflow][data-view="study"]:not([data-mtab="map"]) #rail .rail-map-tools,
  html body[data-mflow]:not([data-view="study"]) #rail .rail-map-tools { display: none !important; }
}
@media (max-width: 760px) {
  /* ---- scripture (본문) tab: full-width panel, no stone underneath, crisp gothic Korean text ---- */
  html body[data-mflow][data-view="study"][data-mtab="text"] #text-pane {
    width: calc(100vw - 16px) !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box; flex: 0 0 auto !important; align-self: stretch !important;
  }
  html body[data-mflow] #verses .verse, html body[data-mflow] #verses .verse * {
    font-family: var(--font-ui) !important; font-weight: 500; color: #2b2520; letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  html body[data-mflow] #verses .verse .vnum { font-family: var(--font-ui) !important; font-weight: 700; color: #7b4b21; }
}
@media (max-width: 760px) {
  /* every panel shares the same 8px side margin and full width; the nav card no longer shrinks to its content */
  html body[data-mflow] #workspace { padding-left: 8px !important; padding-right: 8px !important; }
  html body[data-mflow] #rail { width: 100% !important; max-width: none !important; box-sizing: border-box; align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body[data-mflow] #rail > .rail-nav, html body[data-mflow] #rail > nav, html body[data-mflow] #rail .rail-main { width: 100%; justify-content: space-around; }
  html body[data-mflow][data-view="study"][data-mtab="text"] #text-pane { width: 100% !important; }
  html body[data-mflow][data-view="study"][data-mtab="guide"] #guide-pane { width: 100% !important; }
}
@media (max-width: 760px) {
  /* page buttons (본문연구 · 연표 · 검색 · 다크): larger, crisp text; 다크 sits at the far right */
  html body[data-mflow] #rail { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  html body[data-mflow] #rail > .rail-group:not(.rail-util) { display: flex; flex: 1 1 auto; gap: 4px; justify-content: flex-start; }
  html body[data-mflow] #rail > .rail-group.rail-util { margin-left: auto; flex: 0 0 auto; }
  html body[data-mflow] #rail .rail-btn {
    font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--ink, #2b2118) !important;
    min-height: 44px; padding: 0 12px !important; width: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  html body[data-mflow] #rail .rail-btn[aria-current="page"], html body[data-mflow] #rail .rail-btn.is-on, html body[data-mflow] #rail .rail-btn.on { color: var(--accent-ink, #7a3f12) !important; }
  html body[data-mflow] #rail .rail-btn.util { font-size: 17px !important; color: var(--ink-2, #4a3b2e) !important; }
}
@media (max-width: 760px) {
  html body[data-mflow] #rail .rail-btn .rail-lab {
    font-size: 17px !important; font-weight: 700 !important; line-height: 1.2; letter-spacing: -0.01em; color: inherit !important;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; white-space: nowrap;
  }
  html body[data-mflow] #rail > .rail-group:not(.rail-util) { gap: 2px; }
}
@media (max-width: 760px) {
  /* bottom tab bar: fixed flush to the bottom and side edges of the screen (no gap), safe-area aware */
  html body[data-mflow] #m-flow-tabs {
    left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto;
    height: calc(68px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px 20px 0 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
    box-shadow: 0 -4px 16px rgba(60, 45, 20, .22) !important;
  }
  html body[data-mflow] #m-flow-tabs button { height: 100%; }
}
@media (max-width: 760px) {
  /* timeline / search: the page-button card is position:fixed there; keep it inside the screen with 8px side margins */
  html body[data-mflow][data-view="timeline"] #rail, html body[data-mflow][data-view="explore"] #rail {
    left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important;
  }
}
@media (max-width: 760px) {
  /* ---- smooth scrolling of the place cards / list (hundreds of cards on a phone) ---- */
  /* the scroller: momentum scrolling, no scroll chaining into the page, vertical panning only, own compositor layer */
  html body[data-mflow] #search-workspace .sw-shell, html body[data-mflow] #timeline-pane, html body[data-mflow] #side-pane #panel {
    -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; scroll-behavior: auto;
    transform: translateZ(0); backface-visibility: hidden;
  }
  /* no big blurred glass layer behind a scrolling list: it is re-blurred on every frame */
  html body[data-mflow] #search-workspace, html body[data-mflow] #search-workspace .sw-shell, html body[data-mflow] #timeline-pane {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* cards and rows far from the screen are not laid out or painted */
  html body[data-mflow] #search-results article.ee-card, html body[data-mflow] #search-results .sr-row, html body[data-mflow] #search-results .ee-item {
    content-visibility: auto; contain-intrinsic-size: auto 250px; contain: layout paint style;
    box-shadow: 0 1px 3px rgba(75, 60, 40, .10) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html body[data-mflow] #search-results img { content-visibility: auto; }
  html body[data-mflow] .tl-event-card, html body[data-mflow] .tl-era-card { contain: layout paint style; }
}
@media (max-width: 760px) {
  /* era overlay controls (ⓘ + 색면 끄기) sit above the bottom tab bar */
  html body[data-mflow] #jbc-epoch-overlay-status { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; right: 12px !important; }
}