@layer utilities {
  .mobile-bottom-nav { display: none; }
  .reading-bookmark-trigger { position: fixed; z-index: 39; left: 0; top: calc(30% - 22px); display: grid; place-items: center start; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
  .reading-bookmark-trigger > span { width: 20px; height: 2px; background: var(--brand-accent); }
  .reading-bookmark-trigger.is-saved > span { height: 3px; }
  .reading-bookmark-trigger:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
  .reading-bookmark-panel { position: fixed; z-index: 46; left: 12px; bottom: 24px; width: min(340px, calc(100% - 24px)); max-height: calc(100dvh - 130px); overflow: auto; padding: 20px; border: 1px solid var(--nc-300); border-radius: 10px; background: #fff; color: var(--nc-800); box-shadow: var(--shadow-float); font: 400 14px/1.7 var(--font-sans); }
  .reading-bookmark-panel p { margin: 8px 0; }
  .reading-bookmark-panel strong { padding-right: 36px; display: block; }
  .reading-bookmark-panel [data-bookmark-close] { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--nc-800); font-size: 24px; cursor: pointer; }
  .reading-bookmark-actions { display: grid; gap: 8px; }
  .reading-bookmark-actions button { min-height: 44px; padding: 9px 12px; border: 1px solid var(--nc-300); border-radius: 6px; background: #fff; color: var(--brand-ink); font: 600 14px/1.5 var(--font-sans); cursor: pointer; }
  .reading-bookmark-actions [data-bookmark-save] { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }
  .reading-bookmark-actions button:disabled { opacity: .6; cursor: wait; }
  .reading-bookmark-panel [data-bookmark-status]:empty { display: none; }
  .reading-bookmark-trigger[hidden], .reading-bookmark-panel[hidden], .reading-bookmark-panel [hidden] { display: none; }

  @media (max-width: 768px) {
    html { scroll-padding-bottom: calc(var(--mobile-nav-height) + 20px); }
    /* WordPressのbody余白補正はcss/utilities.cssへ集約。 */
    .mobile-bottom-nav { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: var(--mobile-nav-height); padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)); background: #102a3b; color: #fff; border-top: 1px solid #395263; box-shadow: 0 -3px 14px rgb(0 0 0 / 12%); }
    .mobile-bottom-nav a { position: relative; min-width: 0; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 3px; color: #e5edf3; font: 500 12px/1.3 var(--font-sans); text-decoration: none; }
    .mobile-bottom-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-bottom-nav a[aria-current] { color: #fff; background: #233f52; font-weight: 700; }
    .mobile-bottom-nav a[aria-current]::before { content: ""; position: absolute; top: 0; width: 30px; height: 3px; background: #e5c38d; }
    .mobile-bottom-nav a:focus-visible { outline: 2px solid #e5c38d; outline-offset: -4px; }
    .lp-sticky { display: none; }
    .reading-bookmark-panel { bottom: calc(var(--mobile-nav-height) + 12px); }
    html.mobile-keyboard-open .mobile-bottom-nav,
    html.mobile-keyboard-open .reading-bookmark-trigger,
    html.mobile-keyboard-open .reading-bookmark-panel { display: none; }
    main.wrap:has(.news-body, .persona-body, .personal-report, .compatibility-report), main.wrap.static-page, .member-main.wrap:has(#reading-content) { width: calc(100% - 48px); }
    .persona-article, .reading-page { padding-inline: 0; }
    .news-single { padding-inline: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    :is(.news-body, .persona-body, .faq-answer, .glossary-technical, .about-section, .features-section, .legal, .personal-report, .compatibility-report) { font-family: var(--font-reading-mobile); }
    :is(.news-body, .persona-body, .faq-answer, .glossary-technical, .about-section, .features-section, .legal, .personal-report, .compatibility-report) p,
    :is(.news-body, .persona-body, .faq-answer, .glossary-technical, .about-section, .features-section, .legal, .personal-report, .compatibility-report) li { font-family: var(--font-reading-mobile); font-size: 16px; font-weight: 400; line-height: 2; letter-spacing: normal; }
    :is(.news-body, .persona-body) p, :is(.personal-report, .compatibility-report) :is(.story-chapter, .answer-body) p { color: #333; }
    .reading-story { padding-inline: 0; border: 0; border-radius: 0; background: transparent; }
    :is(.personal-report, .compatibility-report) :is(.reading-block, .reading-body, .reading-chapter) { padding-inline: 0; }
    .personal-report .reading-disclaimer, .compatibility-report .reading-disclaimer,
    .personal-report .section-feedback p, .compatibility-report .section-feedback p { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; }
  }
  @media print { .mobile-bottom-nav, .reading-bookmark-trigger, .reading-bookmark-panel { display: none; } body { padding-bottom: 0; } }
}
