/*
  mystorymaker.css
  StoryMaker 운영 전용 CSS
  obaksa-custom.css 대체 파일
  Header inline CSS migrated from header.php on 2026-06-30
*/

/* StoryMaker mobile quick session button */
.sns-ai-mobile-mypage-link,
.sns-ai-mobile-session-link {
  display: none !important;
}

@media (max-width: 760px) {
  body #site-header .sns-ai-mobile-mypage-link,
  body #site-header .sns-ai-mobile-session-link {
    position: absolute !important;
    right: 56px !important;
    top: 8px !important;
    width: auto !important;
    min-width: 58px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .14) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    z-index: 100002 !important;
  }

  body #site-header .sns-ai-mobile-mypage-link .icon,
  body #site-header .sns-ai-mobile-mypage-link span {
    font-size: 15px !important;
    line-height: 1 !important;
  }
}

/* StoryMaker app iframe wrapper: Hostinger header remains the only global header. */
body.storymaker-app-frame-page .ob-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}
body.storymaker-app-frame-page .ob-footer .inner {
  display: block !important;
}


body.storymaker-app-frame-page #wrapper,
body.storymaker-app-frame-page .ob-page {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.storymaker-app-shell {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #090d16 !important;
  overflow: visible !important;
}

.storymaker-app-frame {
  width: 100% !important;
  height: calc(100vh + 74px) !important;
  min-height: 760px !important;
  border: 0 !important;
  display: block !important;
  background: #090d16 !important;
}

@media (max-width: 760px) {
  .storymaker-app-frame {
    height: auto !important;
    min-height: 760px !important;
  }
}

@media (max-width: 760px) {
  body { padding-top: 78px !important; }

  #site-header {
    --wp-main-menu-font: 20px;
    --wp-main-menu-line-h: 22px;
    --wp-main-menu-h: 20px;
    --wp-main-menu-pad-x: 6px;
    --wp-main-menu-gap: 6px;
    --wp-main-menu-scale: 1;
    --wp-service-menu-font: 20px;
    --wp-service-menu-line-h: 20px;
    --wp-service-menu-h: 18px;
    --wp-service-menu-pad-x: 4px;
    --wp-service-menu-pad-y: 0;
    --wp-service-menu-pad-inline: 1px;
    --wp-service-menu-gap: 3px;
  }

  #site-header,
  #site-header.ob-site-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 78px !important;
    height: 78px !important;
    max-height: 78px !important;
    padding: 4px 10px !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.40) !important;
    background-color: rgba(255, 255, 255, 0.40) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  #site-header::before,
  #site-header::after,
  #site-header .sns-ai-service-line-wp::before,
  #site-header .sns-ai-service-line-wp::after {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  #site-header .ob-brand-line {
    width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  #site-header .ob-logo {
    height: auto !important;
    min-height: 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #site-header .ob-home-mini,
  #site-header .sns-ai-mobile-mypage-link,
  #site-header .sns-ai-mobile-menu-toggle {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  #site-header .sns-ai-mobile-menu-toggle {
    cursor: pointer !important;
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  #site-header .sns-ai-mobile-mypage-link .icon,
  #site-header .sns-ai-mobile-mypage-link svg,
  #site-header .sns-ai-mobile-mypage-link i {
    display: none !important;
  }

  #site-header .sns-ai-mobile-mypage-link::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 8px !important;
    width: 8px !important;
    height: 8px !important;
    transform: translateX(-50%) !important;
    border: 2px solid #111827 !important;
    border-radius: 999px !important;
    background: transparent !important;
  }

  #site-header .sns-ai-mobile-mypage-link::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    width: 18px !important;
    height: 9px !important;
    transform: translateX(-50%) !important;
    border: 2px solid #111827 !important;
    border-bottom: 0 !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
  }

  #site-header .sns-ai-actions {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: -6px 0 0 !important;
    padding: 0 !important;
    z-index: 10020 !important;
  }

  #site-header:not(.is-mobile-menu-open) .sns-ai-actions {
    display: none !important;
    visibility: hidden !important;
  }

  #site-header.is-mobile-menu-open .sns-ai-actions {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 56vw !important;
    max-width: 230px !important;
    margin: 8px 0 0 auto !important;
    padding: 12px !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.92) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28) !important;
  }

  #site-header .sns-ai-actions a,
  #site-header .sns-ai-actions .sns-ai-auth-link {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #site-header .ob-nav-wp-main,
  #site-header .sns-ai-service-line-wp {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #site-header .ob-nav-wp-main,
  #site-header .sns-ai-service-line-wp {
    opacity: 0 !important;
    transform: translateY(-8px) scale(.98) !important;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,1,.36,1) !important;
    pointer-events: none !important;
  }

  #site-header.is-mobile-menu-open .ob-nav-wp-main,
  #site-header.is-mobile-menu-open .sns-ai-service-line-wp {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 56vw !important;
    max-width: 230px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px 0 0 auto !important;
    padding: 12px !important;
    gap: 8px !important;
    overflow: visible !important;
    background: rgba(15, 23, 42, 0.92) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28) !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  #site-header.is-mobile-menu-open .sns-ai-service-line-wp a {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 15px !important;
    padding: 0 10px !important;
    color: #ffffff !important;
  }

  #site-header.is-mobile-menu-open .sns-ai-actions a,
  #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 15px !important;
    padding: 0 10px !important;
    color: #ffffff !important;
  }

  #site-header.is-mobile-menu-open .sns-ai-actions .is-signout {
    color: #fecaca !important;
  }

  #wrapper { margin-top: 0 !important; }
}

#site-header .ob-nav-wp-main a,
#site-header .sns-ai-service-line-wp a,
#site-header .sns-ai-actions a,
#site-header .ob-home-mini {
  --wp-menu-transform: none;
  will-change: transform, box-shadow, background-color, border-color, color, filter !important;
  transition:
    transform 220ms cubic-bezier(.22,1,.36,1),
    box-shadow 220ms cubic-bezier(.22,1,.36,1),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    filter 220ms ease !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

#site-header .ob-nav-wp-main a:hover,
#site-header .sns-ai-service-line-wp a:hover,
#site-header .sns-ai-actions a:hover,
#site-header .ob-home-mini:hover {
  --wp-menu-transform: translateY(-4px) scale(1.045);
  transform: var(--wp-menu-transform) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.56)) !important;
  border-color: rgba(125, 211, 252, .36) !important;
  color: #064e3b !important;
  text-shadow: none !important;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, .12),
    0 0 0 1px rgba(255,255,255,.42) inset,
    0 0 24px rgba(110, 231, 183, .15) !important;
  backdrop-filter: blur(16px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.45) !important;
  filter: brightness(1.02) !important;
}

#site-header .ob-nav-wp-main a:active,
#site-header .sns-ai-service-line-wp a:active,
#site-header .sns-ai-actions a:active,
#site-header .ob-home-mini:active {
  transform: translateY(0) scale(.985) !important;
  filter: brightness(.98) !important;
}

#site-header .ob-nav-wp-main a.is-active,
#site-header .sns-ai-service-line-wp a.is-active {
  background: linear-gradient(180deg, rgba(236,253,245,.82), rgba(209,250,229,.56)) !important;
  border-color: rgba(16,185,129,.28) !important;
  color: #065f46 !important;
  box-shadow:
    0 10px 24px rgba(16,185,129,.12),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
  backdrop-filter: blur(14px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.35) !important;
}

#site-header .sns-ai-service-line-wp a:hover {
  background: linear-gradient(180deg, rgba(30,41,59,.78), rgba(15,23,42,.58)) !important;
  color: #eafff6 !important;
  border-color: rgba(94, 234, 212, .30) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    0 0 24px rgba(45, 212, 191, .13),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  text-shadow: none !important;
}

#site-header .sns-ai-service-line-wp a.is-active {
  background: linear-gradient(180deg, rgba(6,95,70,.28), rgba(15,23,42,.58)) !important;
  border-color: rgba(52,211,153,.34) !important;
  color: #d1fae5 !important;
  box-shadow:
    0 10px 28px rgba(16,185,129,.12),
    0 0 28px rgba(52,211,153,.12),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

@media (max-width: 760px) {
  #site-header .ob-nav-wp-main a:hover,
  #site-header .sns-ai-service-line-wp a:hover,
  #site-header .sns-ai-actions a:hover,
  #site-header .ob-home-mini:hover {
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow:
      0 8px 20px rgba(15, 23, 42, .12),
      0 0 18px rgba(110, 231, 183, .12) !important;
  }
}
@media (max-width: 760px) {
  html body { padding-top: 44px !important; }

  body #site-header.ob-site-header {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 99999 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  body #site-header .ob-brand-line {
    grid-column: 1 / 2 !important;
    width: auto !important;
    min-height: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #site-header .ob-logo {
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    color: #111827 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body #site-header .ob-home-mini {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    background: transparent !important;
    border: 0 !important;
    color: #111827 !important;
    padding: 0 !important;
  }

  body #site-header .sns-ai-mobile-menu-toggle {
    grid-column: 3 / 4 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(15,23,42,.14) !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(15,23,42,.08) !important;
  }

  body #site-header .sns-ai-actions {
    grid-column: 2 / 3 !important;
    position: static !important;
    width: auto !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #site-header .sns-ai-actions a,
  body #site-header .sns-ai-actions .sns-ai-auth-link {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(148, 163, 184, .35) !important;
    white-space: nowrap !important;
  }

  body #site-header .sns-ai-actions a:not(.is-secondary) {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
  }

  body #site-header .ob-nav-wp-main,
  body #site-header .sns-ai-service-line-wp {
    display: none !important;
    visibility: hidden !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp {
    position: fixed !important;
    right: 10px !important;
    left: auto !important;
    top: 52px !important;
    width: 44vw !important;
    max-width: 188px !important;
    min-width: 162px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 44px rgba(15,23,42,.22) !important;
    z-index: 100000 !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp {
    top: calc(52px + 236px) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a,
  body #site-header.is-mobile-menu-open .ob-nav-wp-main a[style],
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a[style] {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    color: #111827 !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(148,163,184,.25) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.04) !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }
}




/* Hostinger WordPress PC header aligned to StoryMaker app */
@media (min-width: 901px) {
  #site-header.ob-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    grid-template-rows: 74px 42px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 14px !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: none !important;
    font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  #site-header .ob-brand-line {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 74px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  #site-header .ob-logo {
    width: auto !important;
    flex: 0 1 auto !important;
    color: #111827 !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #site-header .ob-home-mini {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    color: #14532d !important;
    background: rgba(220,252,231,.86) !important;
    border: 1px solid rgba(20,83,45,.18) !important;
    text-decoration: none !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(20,83,45,.10) !important;
  }

  #site-header .sns-ai-mobile-menu-toggle {
    display: none !important;
  }

  #site-header .ob-nav-wp-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 74px !important;
    min-height: 74px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #site-header .ob-nav-wp-main a {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: #374151 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  #site-header .ob-nav-wp-main a:hover,
  #site-header .ob-nav-wp-main a.is-active {
    color: #08381f !important;
    background: rgba(20,83,45,.13) !important;
    border-color: rgba(20,83,45,.30) !important;
    box-shadow: 0 7px 18px rgba(20,83,45,.12) !important;
  }

  #site-header .sns-ai-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    height: 74px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  #site-header:not(.is-mobile-menu-open) .sns-ai-actions {
    display: none !important;
    visibility: hidden !important;
  }

  #site-header.is-mobile-menu-open .sns-ai-actions {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 56vw !important;
    max-width: 230px !important;
    margin: 8px 0 0 auto !important;
    padding: 12px !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.92) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28) !important;
  }

  #site-header .sns-ai-actions a,
  #site-header .sns-ai-actions .sns-ai-auth-link {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #14532d !important;
    border-radius: 12px !important;
    background: rgba(20,83,45,.92) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  #site-header .sns-ai-actions a.is-secondary,
  #site-header .sns-ai-actions .sns-ai-auth-link.is-secondary {
    background: #f8fafc !important;
    color: #1f2937 !important;
    border-color: #d9e2ec !important;
  }

  #site-header .sns-ai-service-line-wp {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    position: static !important;
    width: 100vw !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: 2px 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
    background: #0b1220 !important;
    border: 0 !important;
    border-top: 1px solid rgba(148,163,184,.14) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    transform: none !important;
  }

  #site-header .sns-ai-service-line-wp a {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(148,163,184,.08) !important;
    border-radius: 10px !important;
    color: #a0a6b2 !important;
    background: rgba(17,24,39,.34) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  #site-header .sns-ai-service-line-wp a:hover,
  #site-header .sns-ai-service-line-wp a.is-active {
    color: #00ff88 !important;
    background: rgba(0,255,136,.10) !important;
    border-color: rgba(0,255,136,.24) !important;
  }
}


/* StoryMaker hero image animation: isolated, visible-only. */
.storymaker-hero-animated {
  overflow: hidden;
  animation-play-state: paused !important;
}

.storymaker-hero-animated.is-visible {
  animation-play-state: running !important;
}

.storymaker-hero-animated img {
  transform: scale(1.01);
  transform-origin: center center;
  animation: storymakerHeroDrift 14s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}

.storymaker-hero-animated.is-visible img {
  animation-play-state: running;
}

@keyframes storymakerHeroDrift {
  from {
    transform: scale(1.01) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.055) translate3d(0, -10px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .storymaker-hero-animated,
  .storymaker-hero-animated.is-visible,
  .storymaker-hero-animated img {
    animation: none !important;
    animation-play-state: paused !important;
    transform: none !important;
  }
}

/* StoryMaker WP service menu SF focus - isolated, single spotlight */
@media (min-width: 901px) {
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: rgba(241, 245, 249, 0.78) !important;
    background: rgba(15, 23, 42, 0.42) !important;
    border: 1px solid rgba(226, 232, 240, 0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    text-shadow: none !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::before,
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:hover {
    color: #ffffff !important;
    background: rgba(30, 41, 59, 0.72) !important;
    border-color: rgba(226, 232, 240, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 14px rgba(226, 232, 240, 0.10) !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2) {
    color: #ffffff !important;
    border-color: rgba(191, 219, 254, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.56)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 0 10px rgba(191, 219, 254, 0.16) !important;
    animation: smWpStorymakerSpotlight 5.8s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2)::before {
    left: -55% !important;
    top: 0 !important;
    width: 42% !important;
    height: 100% !important;
    z-index: -1 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent) !important;
    transform: skewX(-18deg) !important;
    animation: smWpStorymakerSweep 6.4s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2)::after {
    left: 18% !important;
    right: 18% !important;
    bottom: 3px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(219, 234, 254, 0.88), transparent) !important;
    box-shadow: 0 0 10px rgba(219, 234, 254, 0.28) !important;
    opacity: 0.58 !important;
    transform: scaleX(0.74) !important;
    animation: smWpStorymakerLine 5.8s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2):hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.20),
      0 0 24px rgba(219, 234, 254, 0.24),
      0 0 44px rgba(147, 197, 253, 0.12) !important;
  }
}

@keyframes smWpStorymakerSpotlight {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 0 8px rgba(191, 219, 254, 0.12) !important;
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 18px rgba(219, 234, 254, 0.28),
      0 0 34px rgba(147, 197, 253, 0.10) !important;
  }
}

@keyframes smWpStorymakerSweep {
  0%, 72%, 100% { left: -55%; opacity: 0; }
  78% { opacity: 0.55; }
  92% { left: 116%; opacity: 0; }
}

@keyframes smWpStorymakerLine {
  0%, 100% { opacity: 0.34; transform: scaleX(0.58); }
  50% { opacity: 0.78; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp,
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::before,
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::after {
    animation: none !important;
  }
}

/* StoryMaker WP top action buttons calm glass - isolated */
@media (min-width: 901px) {
  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link,
  #site-header.ob-site-header .sns-ai-actions a {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #334155 !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 4px 12px rgba(15, 23, 42, 0.055) !important;
    text-shadow: none !important;
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
    filter: none !important;
  }

  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link.is-secondary,
  #site-header.ob-site-header .sns-ai-actions a.is-secondary {
    background: rgba(255, 255, 255, 0.82) !important;
    color: #1f2937 !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
  }

  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link:hover,
  #site-header.ob-site-header .sns-ai-actions a:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(100, 116, 139, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 8px 18px rgba(15, 23, 42, 0.085) !important;
    transform: translateY(-1px) !important;
  }

  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link:active,
  #site-header.ob-site-header .sns-ai-actions a:active {
    transform: translateY(0) scale(0.99) !important;
  }
}

/* StoryMaker unified mobile drawer 20260703 final */
@media (max-width: 760px) {
  html body { padding-top: 44px !important; }

  body #site-header.ob-site-header {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 0 10px !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  body #site-header.ob-site-header.is-mobile-menu-open {
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    grid-template-rows: 44px auto auto auto !important;
    padding: 0 10px 12px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18) !important;
  }

  body #site-header .ob-brand-line {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body #site-header .ob-logo {
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #111827 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body #site-header .ob-home-mini {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #111827 !important;
  }

  body #site-header .sns-ai-mobile-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 100001 !important;
  }

  body #site-header:not(.is-mobile-menu-open) .ob-nav-wp-main,
  body #site-header:not(.is-mobile-menu-open) .sns-ai-service-line-wp,
  body #site-header:not(.is-mobile-menu-open) .sns-ai-actions {
    display: none !important;
    visibility: hidden !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 8px 8px !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    background: #0b1220 !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 8px !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-actions {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-top: 0 !important;
    border-radius: 8px 8px 14px 14px !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 10px !important;
    color: #111827 !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(148, 163, 184, .25) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 10px !important;
    color: #e5edf8 !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(226, 232, 240, .14) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }
}

/* StoryMaker mobile glass drawer and soft button feel 20260703 */
@media (max-width: 760px) {
  body #site-header .sns-ai-mobile-mypage-link {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body #site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .90) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a,
  body #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    color: #174151 !important;
    background: linear-gradient(180deg, rgba(239, 249, 255, .84), rgba(224, 242, 254, .66)) !important;
    border-color: rgba(125, 211, 252, .36) !important;
    box-shadow: 0 3px 10px rgba(14, 165, 233, .09), inset 0 1px 0 rgba(255, 255, 255, .68) !important;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, filter 150ms ease !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(2),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(2) {
    background: linear-gradient(180deg, rgba(236, 253, 245, .86), rgba(204, 251, 241, .68)) !important;
    border-color: rgba(45, 212, 191, .34) !important;
    color: #115e59 !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(3),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(3) {
    background: linear-gradient(180deg, rgba(240, 253, 244, .86), rgba(220, 252, 231, .70)) !important;
    border-color: rgba(134, 239, 172, .38) !important;
    color: #166534 !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a {
    color: #164e63 !important;
    background: linear-gradient(180deg, rgba(236, 254, 255, .84), rgba(207, 250, 254, .62)) !important;
    border-color: rgba(103, 232, 249, .34) !important;
    box-shadow: 0 3px 10px rgba(6, 182, 212, .08), inset 0 1px 0 rgba(255, 255, 255, .58) !important;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, filter 150ms ease !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:hover,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:hover,
  body #site-header.is-mobile-menu-open .sns-ai-actions a:hover,
  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:focus-visible,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:focus-visible,
  body #site-header.is-mobile-menu-open .sns-ai-actions a:focus-visible {
    transform: translateY(-1px) scale(1.025) !important;
    filter: brightness(1.025) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:active,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:active,
  body #site-header.is-mobile-menu-open .sns-ai-actions a:active {
    transform: translateY(1px) scale(.965) !important;
    filter: brightness(.98) !important;
    animation: smMobileButtonTwitch 180ms ease-out 1 !important;
  }
}

@keyframes smMobileButtonTwitch {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(1px) scale(.965); }
  100% { transform: translateY(0) scale(1); }
}

/* StoryMaker mobile drawer ultra transparent final override 20260703 */
@media (max-width: 760px) {
  body #site-header.ob-site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .06) !important;
    background-color: rgba(255, 255, 255, .06) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(6px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.08) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    background: rgba(255, 255, 255, .07) !important;
    background-color: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
    backdrop-filter: blur(5px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(5px) saturate(1.08) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a,
  body #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    background: rgba(239, 249, 255, .28) !important;
    background-color: rgba(239, 249, 255, .28) !important;
    border-color: rgba(125, 211, 252, .22) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  }
}

/* StoryMaker mobile hamburger position and compact drawer final tweak 20260703 */
@media (max-width: 760px) {
  body #site-header.ob-site-header {
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  body #site-header .sns-ai-mobile-menu-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 3px !important;
    transform: none !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    width: 34vw !important;
    min-width: 132px !important;
    max-width: 168px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* StoryMaker mobile drawer outside area truly clear final 20260703 */
@media (max-width: 760px) {
  html body #site-header.ob-site-header.is-mobile-menu-open,
  body #site-header.ob-site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .006) !important;
    background-color: rgba(255, 255, 255, .006) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }

  html body #site-header.ob-site-header.is-mobile-menu-open::before,
  html body #site-header.ob-site-header.is-mobile-menu-open::after,
  body #site-header.ob-site-header.is-mobile-menu-open::before,
  body #site-header.ob-site-header.is-mobile-menu-open::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body #site-header.ob-site-header.is-mobile-menu-open .ob-brand-line {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* StoryMaker mobile macOS glass final tuning 20260703 */
@media (max-width: 760px) {
  body #site-header .ob-logo {
    font-size: 20px !important;
    transform: scale(1.27) !important;
    transform-origin: left center !important;
  }

  body #site-header .ob-home-mini {
    width: 43px !important;
    min-width: 43px !important;
    height: 43px !important;
    min-height: 43px !important;
    font-size: 22px !important;
    transform: scale(1.27) !important;
    transform-origin: center center !important;
  }

  body #site-header.ob-site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .035) !important;
    background-color: rgba(255, 255, 255, .035) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
    backdrop-filter: blur(4px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(4px) saturate(1.04) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    background: rgba(255, 255, 255, .04) !important;
    background-color: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
    backdrop-filter: blur(3.5px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(3.5px) saturate(1.04) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a,
  body #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    background: rgba(239, 249, 255, .20) !important;
    background-color: rgba(239, 249, 255, .20) !important;
    border-color: rgba(125, 211, 252, .18) !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .04), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  }
}

/* StoryMaker mobile outside drawer area clear final 20260703 */
@media (max-width: 760px) {
  body #site-header.ob-site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .02) !important;
    background-color: rgba(255, 255, 255, .02) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: rgba(255, 255, 255, .02) !important;
  }
}

/* StoryMaker mobile drawer depth and beige priority 20260703 */
@media (max-width: 760px) {
  html body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  html body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a,
  html body #site-header.is-mobile-menu-open .sns-ai-actions a,
  html body #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    opacity: 1 !important;
    box-shadow: 0 9px 18px rgba(15,23,42,.18), 0 2px 5px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(15,23,42,.08) !important;
    transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease !important;
  }

  html body #site-header.is-mobile-menu-open .ob-nav-wp-main a:first-child,
  html body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:first-child,
  html body #site-header.is-mobile-menu-open .sns-ai-actions a.is-logout {
    color: #3f321f !important;
    background: linear-gradient(180deg, rgba(255,248,235,.94), rgba(245,230,203,.82)) !important;
    background-color: rgba(255,248,235,.90) !important;
    border-color: rgba(217,184,132,.60) !important;
  }

  html body #site-header.is-mobile-menu-open .ob-nav-wp-main a:hover,
  html body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:hover,
  html body #site-header.is-mobile-menu-open .sns-ai-actions a:hover {
    filter: brightness(1.035) !important;
    transform: translateY(-2px) scale(1.018) !important;
    box-shadow: 0 13px 24px rgba(15,23,42,.22), 0 4px 8px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(15,23,42,.08) !important;
  }

  html body #site-header.is-mobile-menu-open .ob-nav-wp-main a:active,
  html body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:active,
  html body #site-header.is-mobile-menu-open .sns-ai-actions a:active {
    filter: brightness(.98) !important;
    transform: translateY(2px) scale(.965) !important;
    box-shadow: 0 3px 7px rgba(15,23,42,.15), inset 0 2px 5px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.48) !important;
    animation: smMobileButtonTap 190ms cubic-bezier(.2,.8,.2,1) 1 !important;
  }
}

@keyframes smMobileButtonTap {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(2px) scale(.965); }
  68% { transform: translateY(-1px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* StoryMaker mobile drawer readable pastel buttons final 20260703 */
@media (max-width: 760px) {
  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a,
  body #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    color: #0f172a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .36) !important;
    background: linear-gradient(180deg, rgba(239, 249, 255, .74), rgba(224, 242, 254, .58)) !important;
    background-color: rgba(239, 249, 255, .68) !important;
    border-color: rgba(147, 197, 253, .46) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .52) !important;
    backdrop-filter: blur(2px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(2px) saturate(1.04) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(2),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(2) {
    background: linear-gradient(180deg, rgba(219, 234, 254, .78), rgba(191, 219, 254, .60)) !important;
    background-color: rgba(219, 234, 254, .70) !important;
    border-color: rgba(96, 165, 250, .42) !important;
    color: #0f2f5f !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(3),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(3) {
    background: linear-gradient(180deg, rgba(204, 251, 241, .76), rgba(153, 246, 228, .54)) !important;
    background-color: rgba(204, 251, 241, .66) !important;
    border-color: rgba(45, 212, 191, .38) !important;
    color: #134e4a !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(4),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(4) {
    background: linear-gradient(180deg, rgba(220, 252, 231, .76), rgba(187, 247, 208, .56)) !important;
    background-color: rgba(220, 252, 231, .66) !important;
    border-color: rgba(74, 222, 128, .36) !important;
    color: #14532d !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(5),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(5) {
    background: linear-gradient(180deg, rgba(240, 249, 255, .80), rgba(186, 230, 253, .58)) !important;
    background-color: rgba(240, 249, 255, .70) !important;
    border-color: rgba(56, 189, 248, .40) !important;
    color: #075985 !important;
  }
}

/* StoryMaker WP service menu SF focus v2 - isolated, no badges, no emoji */
@media (min-width: 901px) {
  #site-header.ob-site-header .sns-ai-service-line-wp {
    --sm-wp-sf-text: rgba(248, 250, 252, 0.88);
    --sm-wp-sf-line: rgba(219, 234, 254, 0.72);
    --sm-wp-sf-line-soft: rgba(147, 197, 253, 0.22);
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: var(--sm-wp-sf-text) !important;
    background: rgba(15, 23, 42, 0.44) !important;
    border: 1px solid rgba(226, 232, 240, 0.11) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 0 8px rgba(147, 197, 253, 0.05) !important;
    text-shadow: none !important;
    animation: smWpServiceBreathSoft 6.8s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::before,
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::before {
    left: -62% !important;
    top: 0 !important;
    width: 38% !important;
    height: 100% !important;
    z-index: -1 !important;
    opacity: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent) !important;
    transform: skewX(-18deg) !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::after {
    left: 20% !important;
    right: 20% !important;
    bottom: 3px !important;
    height: 2px !important;
    border-radius: 999px !important;
    opacity: 0.42 !important;
    transform: scaleX(0.62) !important;
    background: linear-gradient(90deg, transparent, var(--sm-wp-sf-line), transparent) !important;
    box-shadow: 0 0 10px var(--sm-wp-sf-line-soft) !important;
    animation: smWpServiceLineSoft 6.8s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2) {
    color: #ffffff !important;
    border-color: rgba(219, 234, 254, 0.44) !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.60)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 14px rgba(219, 234, 254, 0.18),
      0 0 28px rgba(147, 197, 253, 0.08) !important;
    animation: smWpServiceBreathFocus 5.4s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2)::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent) !important;
    animation: smWpServiceSweepFocus 5.8s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2)::after {
    left: 14% !important;
    right: 14% !important;
    opacity: 0.74 !important;
    transform: scaleX(0.82) !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.94), transparent) !important;
    box-shadow:
      0 0 12px rgba(255, 255, 255, 0.28),
      0 0 22px rgba(147, 197, 253, 0.18) !important;
    animation: smWpServiceLineFocus 5.4s ease-in-out infinite !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:hover {
    color: #ffffff !important;
    background: rgba(30, 41, 59, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 18px rgba(219, 234, 254, 0.18) !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:hover::before {
    animation: smWpServiceHoverSweep 0.72s ease-out 1 !important;
  }

  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp:nth-child(2):hover {
    border-color: rgba(255, 255, 255, 0.56) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 0 26px rgba(255, 255, 255, 0.22),
      0 0 46px rgba(147, 197, 253, 0.14) !important;
  }
}

@keyframes smWpServiceBreathSoft {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 7px rgba(147,197,253,.045) !important; }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.085), 0 0 12px rgba(191,219,254,.10) !important; }
}

@keyframes smWpServiceBreathFocus {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 12px rgba(219,234,254,.16), 0 0 24px rgba(147,197,253,.06) !important; }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 24px rgba(255,255,255,.24), 0 0 42px rgba(147,197,253,.14) !important; }
}

@keyframes smWpServiceLineSoft {
  0%, 100% { opacity: .32; transform: scaleX(.56); }
  50% { opacity: .62; transform: scaleX(.92); }
}

@keyframes smWpServiceLineFocus {
  0%, 100% { opacity: .60; transform: scaleX(.72); }
  50% { opacity: .95; transform: scaleX(1); }
}

@keyframes smWpServiceSweepFocus {
  0%, 68%, 100% { left: -62%; opacity: 0; }
  74% { opacity: .48; }
  90% { left: 118%; opacity: 0; }
}

@keyframes smWpServiceHoverSweep {
  0% { left: -62%; opacity: 0; }
  24% { opacity: .48; }
  100% { left: 118%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp,
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::before,
  #site-header.ob-site-header .sns-ai-service-line-wp .sns-ai-service-item-wp::after {
    animation: none !important;
  }
}

/* StoryMaker WP top action buttons calm glass - isolated */
@media (min-width: 901px) {
  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link,
  #site-header.ob-site-header .sns-ai-actions a {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #334155 !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 4px 12px rgba(15, 23, 42, 0.055) !important;
    text-shadow: none !important;
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
    filter: none !important;
  }

  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link.is-secondary,
  #site-header.ob-site-header .sns-ai-actions a.is-secondary {
    background: rgba(255, 255, 255, 0.82) !important;
    color: #1f2937 !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
  }

  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link:hover,
  #site-header.ob-site-header .sns-ai-actions a:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(100, 116, 139, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 8px 18px rgba(15, 23, 42, 0.085) !important;
    transform: translateY(-1px) !important;
  }

  #site-header.ob-site-header .sns-ai-actions .sns-ai-auth-link:active,
  #site-header.ob-site-header .sns-ai-actions a:active {
    transform: translateY(0) scale(0.99) !important;
  }
}

/* StoryMaker unified mobile drawer 20260703 final */
@media (max-width: 760px) {
  html body { padding-top: 44px !important; }

  body #site-header.ob-site-header {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 0 10px !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  body #site-header.ob-site-header.is-mobile-menu-open {
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    grid-template-rows: 44px auto auto auto !important;
    padding: 0 10px 12px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18) !important;
  }

  body #site-header .ob-brand-line {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body #site-header .ob-logo {
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #111827 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body #site-header .ob-home-mini {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #111827 !important;
  }

  body #site-header .sns-ai-mobile-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 100001 !important;
  }

  body #site-header:not(.is-mobile-menu-open) .ob-nav-wp-main,
  body #site-header:not(.is-mobile-menu-open) .sns-ai-service-line-wp,
  body #site-header:not(.is-mobile-menu-open) .sns-ai-actions {
    display: none !important;
    visibility: hidden !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 8px 8px !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    background: #0b1220 !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 8px !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-actions {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-top: 0 !important;
    border-radius: 8px 8px 14px 14px !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 10px !important;
    color: #111827 !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(148, 163, 184, .25) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-radius: 10px !important;
    color: #e5edf8 !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(226, 232, 240, .14) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }
}

/* StoryMaker mobile glass drawer and soft button feel 20260703 */
@media (max-width: 760px) {
  body #site-header .sns-ai-mobile-mypage-link {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body #site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .90) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a,
  body #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    color: #174151 !important;
    background: linear-gradient(180deg, rgba(239, 249, 255, .84), rgba(224, 242, 254, .66)) !important;
    border-color: rgba(125, 211, 252, .36) !important;
    box-shadow: 0 3px 10px rgba(14, 165, 233, .09), inset 0 1px 0 rgba(255, 255, 255, .68) !important;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, filter 150ms ease !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(2),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(2) {
    background: linear-gradient(180deg, rgba(236, 253, 245, .86), rgba(204, 251, 241, .68)) !important;
    border-color: rgba(45, 212, 191, .34) !important;
    color: #115e59 !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:nth-child(3),
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:nth-child(3) {
    background: linear-gradient(180deg, rgba(240, 253, 244, .86), rgba(220, 252, 231, .70)) !important;
    border-color: rgba(134, 239, 172, .38) !important;
    color: #166534 !important;
  }

  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a {
    color: #164e63 !important;
    background: linear-gradient(180deg, rgba(236, 254, 255, .84), rgba(207, 250, 254, .62)) !important;
    border-color: rgba(103, 232, 249, .34) !important;
    box-shadow: 0 3px 10px rgba(6, 182, 212, .08), inset 0 1px 0 rgba(255, 255, 255, .58) !important;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, filter 150ms ease !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:hover,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:hover,
  body #site-header.is-mobile-menu-open .sns-ai-actions a:hover,
  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:focus-visible,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:focus-visible,
  body #site-header.is-mobile-menu-open .sns-ai-actions a:focus-visible {
    transform: translateY(-1px) scale(1.025) !important;
    filter: brightness(1.025) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a:active,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a:active,
  body #site-header.is-mobile-menu-open .sns-ai-actions a:active {
    transform: translateY(1px) scale(.965) !important;
    filter: brightness(.98) !important;
    animation: smMobileButtonTwitch 180ms ease-out 1 !important;
  }
}

@keyframes smMobileButtonTwitch {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(1px) scale(.965); }
  100% { transform: translateY(0) scale(1); }
}

/* StoryMaker mobile drawer ultra transparent final override 20260703 */
@media (max-width: 760px) {
  body #site-header.ob-site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .06) !important;
    background-color: rgba(255, 255, 255, .06) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(6px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.08) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    background: rgba(255, 255, 255, .07) !important;
    background-color: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
    backdrop-filter: blur(5px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(5px) saturate(1.08) !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main a,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp a,
  body #site-header.is-mobile-menu-open .sns-ai-actions a,
  body #site-header.is-mobile-menu-open .sns-ai-actions .sns-ai-auth-link {
    background: rgba(239, 249, 255, .28) !important;
    background-color: rgba(239, 249, 255, .28) !important;
    border-color: rgba(125, 211, 252, .22) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  }
}

/* StoryMaker mobile hamburger position and compact drawer final tweak 20260703 */
@media (max-width: 760px) {
  body #site-header.ob-site-header {
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  body #site-header .sns-ai-mobile-menu-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 3px !important;
    transform: none !important;
  }

  body #site-header.is-mobile-menu-open .ob-nav-wp-main,
  body #site-header.is-mobile-menu-open .sns-ai-service-line-wp,
  body #site-header.is-mobile-menu-open .sns-ai-actions {
    width: 34vw !important;
    min-width: 132px !important;
    max-width: 168px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* StoryMaker mobile drawer outside area truly clear final 20260703 */
@media (max-width: 760px) {
  html body #site-header.ob-site-header.is-mobile-menu-open,
  body #site-header.ob-site-header.is-mobile-menu-open {
    background: rgba(255, 255, 255, .006) !important;
    background-color: rgba(255, 255, 255, .006) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }

  html body #site-header.ob-site-header.is-mobile-menu-open::before,
  html body #site-header.ob-site-header.is-mobile-menu-open::after,
  body #site-header.ob-site-header.is-mobile-menu-open::before,
  body #site-header.ob-site-header.is-mobile-menu-open::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body #site-header.ob-site-header.is-mobile-menu-open .ob-brand-line {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* StoryMaker WP fixed header content offset fix 20260709 */
@media (min-width: 901px) {
  body:not(.storymaker-app-frame-page) {
    padding-top: 36px !important;
  }

  body.admin-bar:not(.storymaker-app-frame-page) {
    padding-top: 68px !important;
  }

  body:not(.storymaker-app-frame-page) #wrapper.ob-page,
  body:not(.storymaker-app-frame-page) .ob-page {
    margin-top: 0 !important;
  }

  body.admin-bar #site-header.ob-site-header {
    top: 32px !important;
  }
}