/* KBIBLE public mobile hardening v3 — 2026-08-15
   Shared, last-loaded override for 320–760px screens.
   Goals: no clipped controls, no horizontal page overflow, touch-safe controls,
   compact headers, safe-area spacing, and no fixed learning bridge over content. */

html, body { max-width:100%; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { overflow-x:clip; }
*, *::before, *::after { box-sizing:border-box; }
img, picture, video, canvas, svg, iframe { max-width:100%; }
img, video { height:auto; }
main, section, article, aside, nav, header, footer, form, fieldset, div { min-width:0; }
input, select, textarea, button { max-width:100%; }

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

@media (max-width:760px) {
  :root { --kb-mobile-edge:12px; --kb-mobile-header-h:64px; }

  body { width:100%; min-width:0; }
  body.kb-has-site-header { padding-top:calc(var(--kb-mobile-header-h) + env(safe-area-inset-top,0px)) !important; }

  /* Unified service header: one compact row, no clipped auth/menu controls. */
  .header.kb-main-site-header,
  .kb-site-header {
    min-height:var(--kb-mobile-header-h) !important;
    height:auto !important;
  }
  .header.kb-main-site-header .header-inner,
  .kb-site-header__inner {
    min-height:var(--kb-mobile-header-h) !important;
    padding:8px var(--kb-mobile-edge) !important;
    gap:8px !important;
  }
  .header.kb-main-site-header .header-brand,
  .kb-site-header__brand { min-width:0 !important; gap:8px !important; }
  .header.kb-main-site-header .header-logo,
  .kb-site-header__logo { width:40px !important; height:40px !important; flex:0 0 40px !important; }
  .header.kb-main-site-header .header-wordmark-top,
  .kb-site-header__title { font-size:1.18rem !important; line-height:1 !important; }
  .header.kb-main-site-header .header-wordmark-sub,
  .kb-site-header__subtitle { display:none !important; }
  .kb-main-header-actions,
  .kb-global-header-actions,
  .kb-site-header__actions { margin-left:auto !important; flex:0 0 auto !important; gap:7px !important; }
  .kb-main-header-actions .hdr-login,
  .kb-global-auth { min-height:44px !important; padding:0 14px !important; border-radius:13px !important; font-size:.86rem !important; }
  .kb-main-header-actions .hdr-btn,
  .kb-global-menu-btn { width:44px !important; height:44px !important; min-height:44px !important; border-radius:13px !important; }
  .kb-main-register {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 11px !important;
    border-radius:13px !important;
    font-size:.80rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* Home header follows the same compact mobile rule. */
  body > .page-wrap .header .header-inner,
  .page-wrap > .header .header-inner { min-height:64px !important; padding:8px 12px !important; gap:8px !important; }
  .page-wrap .header .header-logo { width:40px !important; height:40px !important; }
  .page-wrap .header .header-wordmark-sub { display:none !important; }
  .page-wrap .header .header-nav { display:none !important; }
  .page-wrap .header .header-actions { margin-left:auto !important; gap:7px !important; flex-wrap:nowrap !important; }
  .page-wrap .header .header-actions > :is(#btnThemeCycle,#btnModeCycle,#installLaunchBtn) { display:none !important; }
  .page-wrap .header .hdr-login,
  .page-wrap .header .btn-menu { min-height:44px !important; }

  /* Global page geometry. */
  :where(.ls-page,.sp-page,.qt-page,.memory-page,.vocab-page,.plan-page,.prayer-page,.ccm-app-shell,.video-app-shell,.mp-app,.suite-main,.legal-page,.free-shell) {
    width:min(100%,100vw) !important;
    max-width:100% !important;
  }
  :where(.ls-page,.sp-page,.qt-page,.memory-page,.vocab-page,.plan-page,.prayer-page,.ccm-app-shell,.video-app-shell,.mp-app,.suite-main) {
    padding-left:var(--kb-mobile-edge) !important;
    padding-right:var(--kb-mobile-edge) !important;
  }

  /* Any desktop multi-column core area collapses instead of shrinking children. */
  :where(.ls-hero,.ls-workspace,.sp-hero,.sp-workspace,.qt-hero,.qt-workspace,.memory-hero,.memory-workspace,.vocab-hero,.vocab-workspace,.prayer-hero,.prayer-workspace,.mp-grid,.mp-main-grid,.ccm-layout,.video-layout,.suite-hero,.suite-grid) {
    grid-template-columns:minmax(0,1fr) !important;
  }

  /* Forms and controls: prevent iOS zoom and clipped select text. */
  :where(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
    font-size:16px !important;
    max-width:100% !important;
  }
  :where(button,a[role="button"],input[type="button"],input[type="submit"]) { min-height:44px; }
  select { text-overflow:ellipsis; }

  /* Tables never push the document wider than the viewport. */
  table { max-width:100%; }
  :where(.table-wrap,.table-responsive,.kb-scroll-guard) { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Dialogs use the visual viewport and safe areas. */
  :where(dialog,[role="dialog"],.reader-modal-card,.sp-modal-panel,.qt-modal-card,.memory-modal-card,.prayer-focus-card,.course-history-card) {
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  }

  /* The desktop learning bridge was the black bar covering Bible text in mobile.
     Mobile pages already expose navigation from the header and native page docks. */
  .kb-study-bridge { display:none !important; }
  body.kb-has-study-bridge { padding-bottom:env(safe-area-inset-bottom,0px) !important; }

  /* Shalom must not sit on top of Bible's fixed reader dock. */
  body.kb-bible-v5 .kb-shalom-launcher {
    bottom:max(78px,calc(env(safe-area-inset-bottom,0px) + 68px)) !important;
    right:10px !important;
  }
  body:not(.kb-bible-v5) .kb-shalom-launcher {
    bottom:max(12px,env(safe-area-inset-bottom,0px)) !important;
    right:10px !important;
  }
  .kb-shalom-panel {
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(80dvh,720px) !important;
  }

  /* Long labels and generated content wrap instead of expanding the viewport. */
  :where(p,li,dd,dt,label,small,span,strong,h1,h2,h3,h4,.card,.panel) { overflow-wrap:anywhere; }
}

@media (max-width:430px) {
  :root { --kb-mobile-edge:10px; }
  .header.kb-main-site-header .header-logo,
  .kb-site-header__logo,
  .page-wrap .header .header-logo { width:38px !important; height:38px !important; flex-basis:38px !important; }
  .header.kb-main-site-header .header-wordmark-top,
  .kb-site-header__title,
  .page-wrap .header .header-wordmark-top { font-size:1.08rem !important; }
  .kb-main-header-actions .hdr-login,
  .kb-global-auth,
  .page-wrap .header .hdr-login { padding-inline:12px !important; }
}

@media (max-width:360px) {
  :root { --kb-mobile-edge:8px; }
  .header.kb-main-site-header .header-logo,
  .kb-site-header__logo,
  .page-wrap .header .header-logo { width:36px !important; height:36px !important; flex-basis:36px !important; }
  .kb-main-header-actions .hdr-login,
  .kb-global-auth,
  .page-wrap .header .hdr-login { padding-inline:10px !important; font-size:.8rem !important; }
}

/* KBIBLE home mobile auth pair fix — 2026-08-15
   The home template already renders both Register and Login for guests.
   Previous mobile hardening hid .hdr-register; keep both actions visible and compact. */
@media (max-width:760px) {
  .page-wrap .header .header-actions > .hdr-register {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    min-width:auto !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 12px !important;
    border-radius:13px !important;
    font-size:.82rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .page-wrap .header .hdr-login {
    height:44px !important;
    padding-inline:12px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:430px) {
  .page-wrap .header .header-inner { padding-inline:10px !important; gap:6px !important; }
  .page-wrap .header .header-brand { gap:7px !important; }
  .page-wrap .header .header-actions { gap:6px !important; }
  .page-wrap .header .header-actions > .hdr-register,
  .page-wrap .header .hdr-login {
    min-height:42px !important;
    height:42px !important;
    padding-inline:10px !important;
    border-radius:12px !important;
    font-size:.78rem !important;
  }
}

@media (max-width:360px) {
  .page-wrap .header .header-inner { padding-inline:8px !important; gap:5px !important; }
  .page-wrap .header .header-actions { gap:5px !important; }
  .page-wrap .header .header-wordmark-top { font-size:1rem !important; }
  .page-wrap .header .header-actions > .hdr-register,
  .page-wrap .header .hdr-login {
    padding-inline:8px !important;
    font-size:.74rem !important;
  }
}


/* KBIBLE home mobile guest auth pair — V3 hard guarantee.
   Keep Register visible beside Login. This selector intentionally outranks
   older mobile hide rules that used :is() with ID selectors. */
@media (max-width:760px) {
  body .page-wrap > .header .header-actions > a#headerRegisterBtn.hdr-register {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:relative !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 12px !important;
    margin:0 !important;
    border-radius:13px !important;
    white-space:nowrap !important;
    font-size:.82rem !important;
    line-height:1 !important;
    z-index:2 !important;
  }
  body .page-wrap > .header .header-actions > a.hdr-login {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 auto !important;
  }
  body .page-wrap > .header .header-actions > a.hdr-login span:last-child {
    display:inline !important;
  }
  body .page-wrap > .header .header-actions > a.hdr-login span:first-child {
    display:none !important;
  }
}
@media (max-width:430px) {
  body .page-wrap > .header .header-inner {
    padding-left:10px !important;
    padding-right:10px !important;
    gap:6px !important;
  }
  body .page-wrap > .header .header-brand {
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  body .page-wrap > .header .header-actions {
    gap:6px !important;
    flex:0 0 auto !important;
  }
  body .page-wrap > .header .header-actions > a#headerRegisterBtn.hdr-register,
  body .page-wrap > .header .header-actions > a.hdr-login {
    min-height:42px !important;
    height:42px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:.78rem !important;
  }
}
@media (max-width:360px) {
  body .page-wrap > .header .header-wordmark-top { font-size:.96rem !important; }
  body .page-wrap > .header .header-logo { width:36px !important; height:36px !important; }
  body .page-wrap > .header .header-actions > a#headerRegisterBtn.hdr-register,
  body .page-wrap > .header .header-actions > a.hdr-login {
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:.74rem !important;
  }
}


/* KBIBLE shared mobile header guest auth pair — V4
   Every user page rendered through kb_render_main_site_header() must show
   회원가입 + 로그인 + menu together. */
@media (max-width:760px) {
  body .header.kb-main-site-header .kb-main-header-actions > a.kb-main-register.hdr-register {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:relative !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 11px !important;
    margin:0 !important;
    border-radius:13px !important;
    font-size:.80rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > a.hdr-login {
    display:inline-flex !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 11px !important;
    gap:0 !important;
    white-space:nowrap !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > a.hdr-login span:first-child {
    display:none !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > a.hdr-login span:last-child {
    display:inline !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > .btn-menu {
    display:inline-flex !important;
    width:44px !important;
    min-width:44px !important;
  }
}
@media (max-width:430px) {
  body .header.kb-main-site-header .header-inner {
    padding-inline:9px !important;
    gap:5px !important;
  }
  body .header.kb-main-site-header .header-brand {
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  body .header.kb-main-site-header .header-wordmark-top {
    font-size:1.00rem !important;
    letter-spacing:.025em !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions {
    gap:5px !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > a.kb-main-register.hdr-register,
  body .header.kb-main-site-header .kb-main-header-actions > a.hdr-login {
    min-height:42px !important;
    height:42px !important;
    padding-inline:9px !important;
    font-size:.76rem !important;
    border-radius:12px !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > .btn-menu {
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
  }
}
@media (max-width:360px) {
  body .header.kb-main-site-header .header-logo {
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
  body .header.kb-main-site-header .header-wordmark-top {
    font-size:.94rem !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > a.kb-main-register.hdr-register,
  body .header.kb-main-site-header .kb-main-header-actions > a.hdr-login {
    padding-inline:7px !important;
    font-size:.72rem !important;
  }
  body .header.kb-main-site-header .kb-main-header-actions > .btn-menu {
    width:40px !important;
    min-width:40px !important;
  }
}


/* ======================================================================
   V41 — FULL-SITE MOBILE RE-AUDIT (public/member pages)
   Final last-loaded guards for 320–900px. The intent is to remove horizontal
   overflow, collapse desktop split panes, keep controls touch-safe, and make
   fixed/floating UI respect safe areas without changing desktop geometry.
   ====================================================================== */
@media (max-width:900px) {
  html, body { width:100%; max-width:100%; min-width:0; }
  body { overflow-x:hidden !important; }
  @supports (overflow:clip) { body { overflow-x:clip !important; } }

  /* Every major shell must be allowed to shrink. */
  :where(
    .page-wrap,.main,.main-content,.content,.container,.wrap,
    .ls-page,.sp-page,.sp-shell,.qt-page,.qt-workspace,.memory-page,.memory-app,
    .vocab-page,.vocab-main,.plan-page,.plan-workspace,.prayer-page,.prayer-shell,
    .ccm-app-shell,.ccm-main,.video-app-shell,.video-main-shell,.mp-app,.mp-shell,
    .suite-main,.suite-layout,.stats-main,.stats-layout,.legal-page,.free-shell,
    .login-card,.register-card,.reset-card,.panel,.card
  ) { min-width:0 !important; max-width:100% !important; }

  /* Desktop split panes collapse before they can squeeze text/controls. */
  :where(
    .suite-layout,.stats-layout,.stats-spotlight,
    .plan-workspace,.plan-layout,.course-layout,
    .sp-workspace,.qt-workspace,.memory-workspace,.vocab-workspace,.prayer-workspace,
    .ccm-layout,.video-layout,.mp-grid,.mp-main-grid,
    .auth-grid,.account-grid,.profile-grid,.settings-grid,.form-grid
  ) { grid-template-columns:minmax(0,1fr) !important; }

  /* Secondary sidebars become normal flow blocks on phones/tablets. */
  :where(.plan-control-panel,.plan-sidebar,.suite-sidebar,.stats-sidebar,.mp-sidebar,.video-sidebar,.ccm-sidebar) {
    position:static !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* Metrics remain compact on tablets while never overflowing. */
  :where(.suite-metrics,.stats-metrics,.mp-metrics,.dashboard-metrics,.metric-grid) {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Generic form pairs and action rows stack cleanly. */
  :where(.form-row,.field-row,.form-columns,.form-two,.two-col,.two-column,.filter-row,.toolbar-row) {
    min-width:0 !important;
    max-width:100% !important;
  }
  :where(.form-row,.field-row,.form-columns,.form-two,.two-col,.two-column) > * { min-width:0 !important; }

  /* Long generated text/URLs never force page width. */
  :where(p,li,dd,dt,code,pre,a,span,strong,label,.suite-note,.suite-status,.help-text,.hint,.description) {
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  pre, code { max-width:100%; white-space:pre-wrap; }

  /* Media and iframes remain contained. */
  :where(img,video,iframe,canvas,svg) { max-width:100% !important; }
  iframe { width:100% !important; }

  /* Tables scroll inside themselves rather than widening the document. */
  :where(.table-wrap,.table-responsive,.table-scroll,.data-table-wrap,.kb-scroll-guard) {
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  table { min-width:0; }

  /* Toolbars/tabs can wrap or scroll intentionally, never clip silently. */
  :where(.tabs,.tab-list,.toolbar,.button-row,.action-row,.actions,.filter-actions,.suite-actions) {
    max-width:100% !important;
  }

  /* Dialogs and drawers fit the visual viewport plus safe areas. */
  :where(dialog,[role="dialog"],.modal,.modal-card,.drawer,.sheet) {
    width:min(100% - 16px,720px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  }

  /* Toasts must remain visible above Shalom and inside the viewport. */
  :where(.kb-toast,.mp-toast,.memory-toast,[class*="toast"]) {
    left:50% !important;
    right:auto !important;
    width:min(calc(100vw - 24px),560px) !important;
    max-width:calc(100vw - 24px) !important;
    transform:translateX(-50%) !important;
  }
}

@media (max-width:760px) {
  :root { --kb-mobile-edge:10px; }

  /* All major page padding follows the same edge rhythm. */
  :where(
    .ls-page,.sp-page,.sp-shell,.qt-page,.qt-workspace,.memory-page,.memory-app,
    .vocab-page,.vocab-main,.plan-page,.plan-workspace,.prayer-page,.prayer-shell,
    .ccm-app-shell,.ccm-main,.video-app-shell,.video-main-shell,.mp-app,.mp-shell,
    .suite-main,.stats-main,.legal-page,.free-shell
  ) {
    padding-left:max(var(--kb-mobile-edge),env(safe-area-inset-left,0px)) !important;
    padding-right:max(var(--kb-mobile-edge),env(safe-area-inset-right,0px)) !important;
  }

  /* Cards use phone-friendly radii/spacing and cannot hide their own content. */
  :where(.card,.panel,.suite-panel,.mp-section,.course-panel,.practice-card,.qt-editor-card,
         .vocab-entry-form,.vocab-lookup-card,.ccm-library-panel,.video-library-panel) {
    max-width:100% !important;
    min-width:0 !important;
    overflow-wrap:anywhere;
  }

  /* Inputs: 16px prevents iOS focus zoom; full-width by default. */
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    width:100%;
    min-width:0 !important;
    max-width:100% !important;
    font-size:16px !important;
  }
  textarea { resize:vertical; }

  /* Dense two-column input rows become one column. */
  :where(.form-row,.field-row,.form-columns,.form-two,.two-col,.two-column,.profile-grid,.account-grid,.settings-grid) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
  }

  /* Touch targets. */
  :where(button,a[role="button"],input[type="button"],input[type="submit"],input[type="reset"],.btn,.button) {
    min-height:44px;
  }

  /* Stats page was missing the shared mobile sheet before V41. */
  .suite-layout { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
  .stats-spotlight { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
  .suite-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .stats-weekly-bars,.stats-heatmap,.stats-modules,.stats-timeline { min-width:0 !important; max-width:100% !important; }
  .stats-heatmap-grid { max-width:100% !important; overflow-x:auto !important; }

  /* Plan tool area: visible buttons rather than a clipped hidden-scroll row. */
  .plan-control-panel .plan-tool-tabs {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    overflow:visible !important;
    padding:4px 0 8px !important;
    scroll-snap-type:none !important;
  }
  .plan-control-panel .plan-tool-tab {
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:6px 5px !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.2 !important;
  }

  /* Home theme choices wrap into a stable grid instead of overlong pills. */
  .theme-picker {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:min(100%,560px) !important;
    margin-inline:auto !important;
  }
  .theme-pill { width:100% !important; min-width:0 !important; justify-content:center !important; padding-inline:8px !important; }

  /* Footer/business info and home service cards stay readable. */
  :where(.svc-grid,.footer-premium-grid,.kb-footer-grid,.business-grid,.home-closing-actions) {
    grid-template-columns:minmax(0,1fr) !important;
  }

  /* Shalom panel uses the whole safe phone width, not a narrow floating box. */
  .kb-shalom-panel {
    left:max(6px,env(safe-area-inset-left,0px)) !important;
    right:max(6px,env(safe-area-inset-right,0px)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
    border-radius:22px !important;
  }
}

@media (max-width:430px) {
  :where(.suite-metrics,.stats-metrics,.mp-metrics,.dashboard-metrics,.metric-grid) {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .plan-control-panel .plan-tool-tabs { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .theme-picker { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .theme-pill { font-size:.72rem !important; }
}

@media (max-width:340px) {
  :root { --kb-mobile-edge:7px; }
  :where(.suite-metrics,.stats-metrics,.mp-metrics,.dashboard-metrics,.metric-grid) {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .plan-control-panel .plan-tool-tabs { grid-template-columns:minmax(0,1fr) !important; }
}