/*
 * Rose Garden mobile app shell
 *
 * Desktop keeps the existing cinematic picture-book layouts. Phones receive a
 * quieter album-style shell with one primary action, a consistent five-item
 * navigation rail, full-width sheets, and thumb-sized controls.
 */

.rg-mobile-nav,
.family-mobile-shortcuts,
.mom-mobile-shortcuts,
.book-mobile-hint,
.album-mobile-private,
.family-route-mobile-head,
.garden-task-step-copy {
  display: none;
}

@media (max-width: 700px) {
  :root {
    --rg-mobile-nav-height: 72px;
    --rg-mobile-gutter: 16px;
    --rg-mobile-paper: #f6f0e5;
    --rg-mobile-surface: #fffaf1;
    --rg-mobile-ink: #24382f;
    --rg-mobile-green: #234b3c;
    --rg-mobile-rose: #b85e72;
    --rg-mobile-gold: #a47d35;
    --rg-mobile-line: rgba(36, 56, 47, .16);
  }

  html {
    scroll-padding-top: 76px;
    scroll-padding-bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom) + 18px);
  }

  body.has-rg-mobile-nav {
    padding-bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom) + 2px);
  }

  body.has-rg-mobile-nav[data-story-chapter="foyer"] {
    padding-bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom));
  }

  /* A docked large-text toggle removes the legacy floating-toggle padding.
   * Keep the independent fixed navigation allowance so the final footer and
   * controls can still scroll above the five-tab bar on narrow phones. */
  html.easy-mode-docked body.has-rg-mobile-nav {
    padding-bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom) + 2px);
  }

  html.easy-mode-docked body.has-rg-mobile-nav[data-story-chapter="foyer"] {
    padding-bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .rg-mobile-nav {
    position: fixed;
    z-index: 2000;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--rg-mobile-line);
    color: #5e685f;
    background: rgba(255, 250, 241, .985);
    box-shadow: 0 -10px 28px rgba(32, 47, 39, .08);
    font-family: var(--rg-sans, "Noto Sans KR", sans-serif);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .rg-mobile-nav a {
    position: relative;
    min-width: 0;
    min-height: var(--rg-mobile-nav-height);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 7px 2px 6px;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rg-mobile-nav a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: transparent;
  }

  .rg-mobile-nav svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .rg-mobile-nav span {
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rg-mobile-nav a[aria-current="page"] {
    color: var(--rg-mobile-green);
    background: rgba(222, 233, 224, .42);
  }

  .rg-mobile-nav a[aria-current="page"]::before {
    background: var(--rg-mobile-green);
  }

  .rg-mobile-nav a:focus-visible {
    z-index: 1;
    outline: 3px solid var(--rg-focus, rgba(184, 94, 114, .55));
    outline-offset: -4px;
    border-radius: 12px;
  }

  :where(button, a, input, select, textarea, summary) {
    touch-action: manipulation;
  }

  :where(input, select, textarea) {
    font-size: 16px !important;
  }

  /* Dialogs become predictable mobile sheets. Native top-layer behavior,
   * focus trapping, cancel events, and the existing save logic stay intact. */
  :where(.family-dialog, .memory-dialog, .family-album-dialog, .memory-trash-dialog, .cinema-dialog, .photo-lightbox) {
    width: 100% !important;
    max-width: none !important;
    max-height: min(92dvh, 920px) !important;
    margin: auto 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    border-radius: 24px 24px 0 0 !important;
    overscroll-behavior: contain;
  }

  :where(.family-dialog, .memory-dialog, .family-album-dialog, .memory-trash-dialog, .cinema-dialog, .photo-lightbox)[open] {
    animation: rg-mobile-sheet-in 240ms var(--rg-ease, ease) both !important;
  }

  :where(.family-dialog, .memory-dialog, .family-album-dialog, .memory-trash-dialog, .cinema-dialog, .photo-lightbox)::backdrop {
    background: rgba(25, 38, 31, .7) !important;
  }

  @keyframes rg-mobile-sheet-in {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0; }
  }

  :where(.dialog-close, .photo-lightbox-close) {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
  }

  /* --------------------------------------------------------------- */
  /* Public foyer                                                     */
  /* --------------------------------------------------------------- */

  body[data-story-chapter="foyer"] {
    color: var(--rg-mobile-ink);
    background: #fbf7e9;
  }

  body[data-story-chapter="foyer"]::before {
    opacity: .03;
  }

  body[data-story-chapter="foyer"] .foyer-ambient {
    opacity: .3;
  }

  body[data-story-chapter="foyer"] .foyer-header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 64px;
    min-height: 64px;
    padding: max(8px, env(safe-area-inset-top)) var(--rg-mobile-gutter) 8px;
    border-bottom: 1px solid rgba(164, 125, 53, .2);
    background: rgba(251, 247, 233, .84);
    box-shadow: 0 8px 24px rgba(79, 71, 47, .05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body[data-story-chapter="foyer"] .foyer-brand > svg {
    width: 34px;
    height: 34px;
  }

  body[data-story-chapter="foyer"] .foyer-brand strong {
    font-size: 20px;
  }

  body[data-story-chapter="foyer"] .books-link {
    display: none;
  }

  body[data-story-chapter="foyer"] .foyer-header [data-easy-mode-dock] .easy-mode-toggle {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
  }

  body[data-story-chapter="foyer"] .foyer-header .easy-mode-toggle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="foyer"] .foyer-main {
    min-height: calc(100svh - 64px - var(--rg-mobile-nav-height) - env(safe-area-inset-bottom));
    display: grid;
    grid-template-rows: 140px minmax(568px, 1fr);
    gap: 0;
    padding: 0;
  }

  body[data-story-chapter="foyer"] .foyer-intro {
    display: grid;
    align-content: center;
    margin: 0;
    padding: 12px var(--rg-mobile-gutter) 10px;
    text-align: left;
  }

  body[data-story-chapter="foyer"] .foyer-book-overline {
    display: none;
  }

  body[data-story-chapter="foyer"] .foyer-intro h1 {
    max-width: 12ch;
    font-size: 35px;
    line-height: 45px;
    letter-spacing: -1.3px;
    text-shadow: 0 2px 20px rgba(255, 253, 239, .9);
  }

  body[data-story-chapter="foyer"] .foyer-intro p {
    margin-top: 4px;
    font-size: 15px;
    line-height: 24px;
  }

  body[data-story-chapter="foyer"] .garden-doors {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 148px);
    align-content: center;
    gap: 10px;
    width: 100%;
    padding: 0 var(--rg-mobile-gutter);
  }

  body[data-story-chapter="foyer"] .garden-door {
    min-height: 0;
    border-radius: var(--rg-mobile-card-radius, 20px);
  }

  body[data-story-chapter="foyer"] .garden-door::before {
    top: -3px;
    width: 8px;
    height: 8px;
  }

  body[data-story-chapter="foyer"] .garden-door .door-body,
  body[data-story-chapter="foyer"] .garden-door .door-halo {
    border-radius: var(--rg-mobile-card-radius, 20px);
  }

  body[data-story-chapter="foyer"] .garden-door .door-body {
    border-color: rgba(174, 130, 52, .68);
    background: rgba(255, 252, 242, .9);
    box-shadow:
      0 10px 28px rgba(74, 67, 44, .11),
      inset 0 0 0 1px rgba(255, 255, 255, .7);
  }

  body[data-story-chapter="foyer"] .garden-door .door-body::after {
    display: block;
    inset: 5px;
    border-color: rgba(211, 169, 82, .42);
    border-radius: 15px;
  }

  body[data-story-chapter="foyer"] .garden-door .door-body::before {
    background: linear-gradient(90deg, transparent 0 34%, rgba(255, 252, 242, .34) 42%, rgba(255, 252, 242, .92) 56%, #fffaf0 100%);
  }

  body[data-story-chapter="foyer"] .garden-door .door-frame {
    inset: 6px auto 6px 6px;
    width: 41%;
    overflow: hidden;
    border: 1px solid rgba(200, 155, 66, .72);
    border-radius: 14px 58px 58px 14px;
    box-shadow: 5px 0 18px rgba(77, 66, 36, .12);
  }

  body[data-story-chapter="foyer"] .garden-door .door-frame::after {
    inset: 0;
    height: auto;
    background: linear-gradient(90deg, transparent 65%, rgba(255, 249, 232, .34));
  }

  body[data-story-chapter="foyer"] .garden-door .door-copy {
    inset: 0 0 0 41%;
    align-content: center;
    justify-items: start;
    gap: 1px;
    padding: 8px 12px 8px 14px;
    color: var(--rg-mobile-ink);
    text-align: left;
    text-shadow: none;
  }

  body[data-story-chapter="foyer"] .garden-door .door-copy > strong {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -.7px;
  }

  body[data-story-chapter="foyer"] .door-copy > small {
    max-width: 19ch;
    margin-top: 0;
    color: #53645b;
    font-size: 12px;
    line-height: 18px;
    opacity: 1;
  }

  body[data-story-chapter="foyer"] .door-order {
    display: block;
    margin-bottom: 0;
    color: #7b642c;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
    text-shadow: none;
  }

  body[data-story-chapter="foyer"] .door-action {
    min-height: var(--rg-touch-comfortable, 48px);
    gap: var(--rg-space-2, 8px);
    margin-top: 0;
    padding: 0 var(--rg-action-inline, 20px);
    border-color: var(--rg-gold, #e5c27b);
    background: rgba(31, 67, 52, .96);
    box-shadow: 0 8px 20px rgba(31, 67, 52, .2);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }

  body[data-story-chapter="foyer"] .foyer-note,
  body[data-story-chapter="foyer"] .foyer-journey {
    display: none;
  }

  /* --------------------------------------------------------------- */
  /* Mom garden gate and unlocked story                               */
  /* --------------------------------------------------------------- */

  .family-route-mobile-head {
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rg-mobile-line);
    color: var(--rg-mobile-ink);
    font-family: var(--rg-serif, "Gowun Batang", serif);
  }

  .family-route-mobile-head a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    font-family: var(--rg-sans, "Noto Sans KR", sans-serif);
    font-weight: 700;
  }

  .family-route-mobile-head strong {
    justify-self: end;
    font-size: 20px;
  }

  .family-route-mobile-head [data-easy-mode-dock] {
    display: flex;
  }

  html.family-gate-locked body {
    padding-bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
  }

  html.family-gate-locked .rg-mobile-nav {
    z-index: 10001;
  }

  .family-route-gate {
    min-height: calc(100dvh - var(--rg-mobile-nav-height) - env(safe-area-inset-bottom)) !important;
    padding: max(0px, env(safe-area-inset-top)) 0 26px !important;
    background-position: center top !important;
  }

  .family-route-card {
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto !important;
    padding: 16px 18px 26px !important;
    border-radius: 0 0 18px 18px !important;
    text-align: left !important;
    box-shadow: 0 20px 54px rgba(24, 37, 23, .25) !important;
  }

  .family-route-mobile-head {
    display: grid;
  }

  .family-route-card > .family-route-desktop-easy {
    display: none;
  }

  .family-route-mobile-head [data-easy-mode-dock] > .easy-mode-toggle {
    width: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 4px !important;
  }

  .family-route-mark {
    display: none !important;
  }

  .family-route-card p:first-of-type {
    margin: 0 0 6px !important;
    font-size: 12px !important;
    letter-spacing: .06em !important;
  }

  .family-route-card h1 {
    padding-right: 0;
    font-size: clamp(31px, 9vw, 40px) !important;
    line-height: 1.28 !important;
  }

  .family-route-status {
    min-height: 20px !important;
    margin: 10px 0 !important;
    font-size: 13px;
    line-height: 1.6;
  }

  .family-route-story {
    margin-top: 12px !important;
  }

  .family-route-story a {
    min-height: 56px !important;
    border: 1px solid rgba(35, 75, 60, .24) !important;
    border-radius: 14px !important;
    color: var(--rg-mobile-green) !important;
    background: rgba(255, 250, 241, .86) !important;
    font-size: 16px;
    text-align: center;
  }

  .family-route-story .family-route-help {
    margin: 8px 2px 0 !important;
  }

  .family-route-divider {
    margin-top: 18px !important;
    color: var(--rg-mobile-green) !important;
    font-size: 16px !important;
    justify-content: flex-start;
  }

  .family-route-divider::before {
    display: none;
  }

  .family-route-divider::after {
    background: rgba(164, 125, 53, .35) !important;
  }

  .family-route-form {
    gap: 12px !important;
  }

  .family-route-form label {
    gap: 8px !important;
    font-size: 16px !important;
  }

  .family-route-form input {
    min-height: 54px !important;
    border-radius: 12px !important;
  }

  .family-route-form .family-route-submit {
    min-height: 56px !important;
    border-radius: 14px !important;
    background: var(--rg-mobile-green) !important;
    font-size: 17px !important;
  }

  .family-edit-access,
  .family-route-more-help {
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .54) !important;
  }

  .family-edit-access summary,
  .family-route-more-help summary {
    min-height: 52px !important;
    font-size: 15px;
  }

  .family-admin-login,
  .family-route-back {
    font-size: 13px !important;
  }

  body[data-story-chapter="mom"] .site-header {
    position: sticky;
    top: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
    padding: max(8px, env(safe-area-inset-top)) var(--rg-mobile-gutter) 8px;
    border-bottom: 1px solid var(--rg-mobile-line);
    background: rgba(246, 240, 229, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body[data-story-chapter="mom"] .brand {
    min-width: 0;
    font-size: 18px;
  }

  body[data-story-chapter="mom"] .brand-mark {
    width: 34px;
    height: 34px;
  }

  body[data-story-chapter="mom"] .menu-button {
    display: none;
  }

  body[data-story-chapter="mom"] .main-nav {
    grid-column: 1 / -1;
    width: 100%;
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0;
    border: 0;
    background: transparent;
    scrollbar-width: none;
  }

  body[data-story-chapter="mom"] .main-nav::-webkit-scrollbar {
    display: none;
  }

  body[data-story-chapter="mom"] .main-nav a {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--rg-mobile-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    font-size: 13px;
    text-decoration: none;
  }

  body[data-story-chapter="mom"] .main-nav a:nth-child(1),
  body[data-story-chapter="mom"] .main-nav a:nth-child(3),
  body[data-story-chapter="mom"] .main-nav a:nth-child(6) {
    display: none;
  }

  body[data-story-chapter="mom"] .site-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  body[data-story-chapter="mom"] .motion-toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 0 10px;
  }

  body[data-story-chapter="mom"] .motion-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="mom"] .site-header-actions .easy-mode-toggle {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
  }

  body[data-story-chapter="mom"] .site-header-actions .easy-mode-toggle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .mom-mobile-shortcuts,
  .family-mobile-shortcuts {
    position: relative;
    z-index: 12;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px var(--rg-mobile-gutter);
    border-bottom: 1px solid var(--rg-mobile-line);
    background: var(--rg-mobile-paper);
  }

  .mom-mobile-shortcuts {
    display: grid;
  }

  .mom-mobile-shortcuts .mom-mobile-primary {
    grid-column: 1 / -1;
    min-height: 60px;
    border-color: transparent;
    color: #fff;
    background: var(--rg-mobile-green);
  }

  .mom-mobile-shortcuts a,
  .family-mobile-shortcuts a {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid rgba(35, 75, 60, .24);
    border-radius: 13px;
    color: var(--rg-mobile-green);
    background: rgba(255, 250, 241, .86);
    text-align: center;
    text-decoration: none;
    font: 700 14px/1.35 var(--rg-sans, "Noto Sans KR", sans-serif);
  }

  .mom-mobile-shortcuts a {
    flex-direction: column;
    gap: 2px;
  }

  .mom-mobile-shortcuts a strong {
    font-size: 14px;
  }

  .mom-mobile-shortcuts a span {
    font-size: 11px;
    font-weight: 500;
    opacity: .82;
  }

  body[data-story-chapter="mom"] .hero {
    min-height: 78svh;
  }

  body[data-story-chapter="mom"] .hero-content {
    padding-inline: var(--rg-mobile-gutter);
  }

  body[data-story-chapter="mom"] .hero-copy h1 {
    font-size: clamp(38px, 11.5vw, 54px);
  }

  body[data-story-chapter="mom"] .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-story-chapter="mom"] .hero-actions > * {
    width: 100%;
    min-height: 54px;
    justify-content: center;
  }

  body[data-story-chapter="mom"] .hero-note,
  body[data-story-chapter="mom"] .scroll-cue {
    display: none;
  }

  /* --------------------------------------------------------------- */
  /* Family story and private album                                   */
  /* --------------------------------------------------------------- */

  body[data-story-chapter="family"] {
    background: var(--rg-mobile-paper);
  }

  body[data-story-chapter="family"] .family-header {
    position: sticky;
    top: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) var(--rg-mobile-gutter) 8px;
    border-bottom: 1px solid var(--rg-mobile-line);
    background: rgba(246, 240, 229, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body[data-story-chapter="family"] .family-brand {
    min-width: 0;
    font-size: 20px;
  }

  body[data-story-chapter="family"] .family-brand-mark {
    width: 34px;
    height: 34px;
  }

  body[data-story-chapter="family"] .family-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  body[data-story-chapter="family"] .family-header-actions nav,
  body[data-story-chapter="family"] .family-album-quick-link,
  body[data-story-chapter="family"] .family-story-index {
    display: none;
  }

  body[data-story-chapter="family"] .family-control-button {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
  }

  body[data-story-chapter="family"] .family-control-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="family"] .family-header-actions .easy-mode-toggle {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
  }

  body[data-story-chapter="family"] .family-header-actions .easy-mode-toggle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .family-mobile-shortcuts {
    display: grid;
  }

  body[data-story-chapter="family"] .family-hero {
    min-height: auto;
    padding: 30px 0 52px;
  }

  body[data-story-chapter="family"] .family-hero-inner {
    width: min(100% - 32px, 560px);
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  body[data-story-chapter="family"] .family-entry {
    order: -1;
  }

  body[data-story-chapter="family"] .family-title {
    margin-bottom: 10px;
  }

  body[data-story-chapter="family"] .family-title h1 {
    font-size: clamp(45px, 13vw, 58px);
  }

  body[data-story-chapter="family"] .family-hero-lead {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  body[data-story-chapter="family"] .family-key-card {
    padding: 14px 18px;
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(42, 60, 48, .12);
  }

  body[data-story-chapter="family"] .family-key-card input:not([type="checkbox"]) {
    min-height: 52px;
  }

  body[data-story-chapter="family"] .family-keepsake {
    min-height: 300px;
  }

  body[data-story-chapter="family"] .family-keepsake blockquote {
    min-height: 88px;
  }

  body[data-story-chapter="family"] .hero-scroll-cue {
    display: none;
  }

  body[data-story-chapter="family"] :where(.family-story-road, .season-memory, .family-whispers, .garden-connection, .storybook-section) {
    padding-top: 64px;
    padding-bottom: 68px;
  }

  body[data-story-chapter="family"] :where(.story-road-heading h2, .season-memory-heading h2, .whisper-shell h2, .connection-copy h2, .storybook-copy h2) {
    font-size: 31px;
    line-height: 1.45;
  }

  body[data-story-chapter="family"] .album-section {
    min-height: auto;
    padding: 58px 0 108px;
    background: var(--rg-mobile-paper);
  }

  body[data-story-chapter="family"] .album-section .section-shell {
    display: flex;
    flex-direction: column;
  }

  body[data-story-chapter="family"] .album-heading {
    order: 0;
  }

  body[data-story-chapter="family"] :where(.album-content, .album-locked) {
    order: 1;
  }

  body[data-story-chapter="family"] .memory-prompts {
    order: 2;
    margin-top: 26px;
  }

  body[data-story-chapter="family"] .album-section::before {
    display: none;
  }

  body[data-story-chapter="family"] .album-heading {
    gap: 16px;
    margin-bottom: 24px;
  }

  body[data-story-chapter="family"] .album-heading h2 {
    font-size: 34px;
    line-height: 1.38;
  }

  body[data-story-chapter="family"] .album-heading > div > p:not(.family-chapter-label) {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.75;
  }

  body[data-story-chapter="family"] .album-mobile-private {
    order: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin: -10px 0 14px;
    color: var(--rg-mobile-green);
    font: 700 14px/1.4 var(--rg-sans, "Noto Sans KR", sans-serif);
  }

  body[data-story-chapter="family"] .memory-prompts {
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 18px;
    box-shadow: none;
  }

  body[data-story-chapter="family"] .memory-prompt-intro {
    margin-bottom: 12px;
  }

  body[data-story-chapter="family"] .memory-prompt {
    min-height: 104px;
    padding: 16px;
    border-radius: 14px;
  }

  .album-tools {
    width: 100%;
    gap: 10px;
  }

  body[data-story-chapter="family"] .album-tools {
    display: grid;
  }

  .album-search {
    position: relative;
    display: block;
  }

  .album-search svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 21px;
    height: 21px;
    translate: 0 -50%;
    fill: none;
    stroke: var(--rg-mobile-green);
    stroke-width: 1.7;
    stroke-linecap: round;
  }

  .album-search input {
    width: 100%;
    min-height: 52px;
    padding: 0 44px;
    border: 1px solid var(--rg-mobile-line);
    border-radius: 14px;
    color: var(--rg-mobile-ink);
    background: rgba(255, 250, 241, .95);
  }

  .album-search input::-webkit-search-cancel-button {
    width: 22px;
    height: 22px;
  }

  .album-media-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--rg-mobile-line);
    border-radius: 14px;
    background: rgba(255, 250, 241, .7);
  }

  .album-media-filters button {
    min-width: 0;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-radius: 10px;
    color: #69736b;
    background: transparent;
    font: 650 13px/1 var(--rg-sans, "Noto Sans KR", sans-serif);
  }

  .album-media-filters button.is-active {
    color: #fff;
    background: var(--rg-mobile-green);
  }

  body[data-story-chapter="family"] .album-toolbar {
    width: 100%;
    gap: 12px;
    margin-bottom: 16px;
  }

  body[data-story-chapter="family"] .season-filters {
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 2px;
    scrollbar-width: none;
  }

  body[data-story-chapter="family"] .season-filters::-webkit-scrollbar {
    display: none;
  }

  body[data-story-chapter="family"] .season-filters button {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0 15px;
    border-radius: 999px;
  }

  body[data-story-chapter="family"] .album-toolbar-actions {
    width: 100%;
    align-items: center;
    flex-direction: row;
    margin-top: 0;
  }

  body[data-story-chapter="family"] .album-trash-button {
    width: auto;
    min-height: 44px;
  }

  body[data-story-chapter="family"] .album-page-frame {
    min-height: 220px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-story-chapter="family"] .album-page-frame::after,
  body[data-story-chapter="family"] .album-binding {
    display: none;
  }

  body[data-story-chapter="family"] .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-story-chapter="family"] .album-card,
  body[data-story-chapter="family"] .album-card:nth-child(3n + 2),
  body[data-story-chapter="family"] .album-card:nth-child(3n) {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border-radius: 16px;
    translate: 0;
    rotate: 0deg;
    background: var(--rg-mobile-surface);
    box-shadow: 0 8px 20px rgba(43, 57, 48, .09);
  }

  body[data-story-chapter="family"] .album-card::before {
    display: none;
  }

  body[data-story-chapter="family"] .album-card:hover,
  body[data-story-chapter="family"] .album-card:focus-visible {
    transform: none;
    box-shadow: 0 8px 20px rgba(43, 57, 48, .13);
  }

  body[data-story-chapter="family"] .album-card-media {
    aspect-ratio: 1;
    border-radius: 0;
  }

  body[data-story-chapter="family"] .album-card-copy {
    position: static;
    padding: 11px 12px 12px;
    text-align: left;
  }

  body[data-story-chapter="family"] .album-card-copy h3 {
    font-size: 16px;
  }

  body[data-story-chapter="family"] .album-card-copy p {
    font-size: 11px;
  }

  body[data-story-chapter="family"] .family-mobile-write {
    z-index: 1850;
    right: 14px;
    bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom) + 12px);
    left: auto;
    min-height: 56px;
    padding: 0 18px;
    border-width: 1px;
    background: var(--rg-mobile-green);
  }

  body[data-story-chapter="family"] .compose-dialog {
    max-height: 94dvh !important;
  }

  body[data-story-chapter="family"] .family-dialog > .dialog-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  body[data-story-chapter="family"] .family-dialog[open] > .easy-mode-toggle {
    position: absolute !important;
    z-index: 6;
    top: 12px !important;
    right: 68px !important;
    bottom: auto !important;
    width: 48px !important;
    min-height: 48px !important;
    padding: 4px !important;
  }

  body[data-story-chapter="family"] .compose-dialog::before {
    content: "";
    position: sticky;
    z-index: 4;
    top: 8px;
    width: 42px;
    height: 5px;
    display: block;
    margin: 8px auto -12px;
    border-radius: 999px;
    background: rgba(36, 56, 47, .25);
  }

  body[data-story-chapter="family"] .compose-dialog form {
    gap: 15px;
    padding: 34px 18px calc(24px + env(safe-area-inset-bottom));
    background: var(--rg-mobile-paper);
  }

  body[data-story-chapter="family"] .compose-dialog form::before {
    display: none;
  }

  body[data-story-chapter="family"] .compose-dialog h2 {
    font-size: 31px;
  }

  body[data-story-chapter="family"] .compose-dialog input,
  body[data-story-chapter="family"] .compose-dialog select {
    min-height: 52px;
  }

  body[data-story-chapter="family"] .compose-dialog textarea {
    min-height: 118px;
  }

  body[data-story-chapter="family"] .compose-public-consent {
    border-radius: 16px;
    background: rgba(223, 233, 223, .54);
  }

  body[data-story-chapter="family"] .public-consent-check input {
    width: 24px !important;
    height: 24px;
  }

  body[data-story-chapter="family"] .trash-dialog {
    padding: 38px 18px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* --------------------------------------------------------------- */
  /* Seasonal picture-book reader                                    */
  /* --------------------------------------------------------------- */

  body[data-story-chapter="books"] {
    background: var(--rg-mobile-paper);
  }

  body[data-story-chapter="books"] .books-header {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: 62px;
    align-items: center;
    flex-direction: row;
    padding: max(8px, env(safe-area-inset-top)) var(--rg-mobile-gutter) 8px;
    border-bottom: 1px solid var(--rg-mobile-line);
    background: rgba(246, 240, 229, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body[data-story-chapter="books"] .books-brand {
    min-width: 0;
    font-size: 18px;
  }

  body[data-story-chapter="books"] .books-brand-mark {
    width: 34px;
    height: 34px;
  }

  body[data-story-chapter="books"] .books-brand small,
  body[data-story-chapter="books"] .books-header nav {
    display: none;
  }

  body[data-story-chapter="books"] .books-header-actions {
    width: auto;
    margin-left: auto;
  }

  body[data-story-chapter="books"] .books-header .easy-mode-toggle {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
  }

  body[data-story-chapter="books"] .books-header .easy-mode-toggle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="books"] main {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 14px 0 30px;
  }

  body[data-story-chapter="books"] .books-intro {
    display: block;
    padding: 0 var(--rg-mobile-gutter) 10px;
  }

  body[data-story-chapter="books"] .books-intro .story-chapter-mark,
  body[data-story-chapter="books"] .books-intro > div > p,
  body[data-story-chapter="books"] .books-intro-copy,
  body[data-story-chapter="books"] .books-intro .story-bridge-line {
    display: none;
  }

  body[data-story-chapter="books"] .books-intro h1 {
    font-size: 34px;
    line-height: 1.25;
  }

  body[data-story-chapter="books"] .book-shelf-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
  }

  body[data-story-chapter="books"] .book-covers {
    order: 1;
    grid-template-columns: repeat(5, 112px);
    gap: 7px;
    margin: 0 0 12px;
    padding: 2px var(--rg-mobile-gutter) 4px;
    border: 0;
    box-shadow: none;
    scroll-padding-inline: var(--rg-mobile-gutter);
  }

  body[data-story-chapter="books"] .book-covers button,
  body[data-story-chapter="books"] .book-covers button:nth-child(n) {
    min-height: 66px !important;
    align-content: center;
    gap: 2px;
    padding: 8px 11px;
    border-radius: 13px;
    background: rgba(255, 250, 241, .92);
    box-shadow: none;
    rotate: 0deg;
  }

  body[data-story-chapter="books"] .book-covers button::before,
  body[data-story-chapter="books"] .book-covers button::after {
    display: none;
  }

  body[data-story-chapter="books"] .book-covers button[aria-current="true"] {
    color: #fff;
    background: var(--rg-mobile-green);
    outline: 2px solid rgba(255, 255, 255, .78);
    outline-offset: -4px;
    translate: 0;
  }

  body[data-story-chapter="books"] .book-covers button:focus-visible {
    outline: 3px solid var(--rg-focus, rgba(184, 94, 114, .72));
    outline-offset: -4px;
    box-shadow: inset 0 0 0 2px #fff;
  }

  body[data-story-chapter="books"] .book-covers small {
    font-size: 10px;
  }

  body[data-story-chapter="books"] .book-covers strong {
    font-size: 15px;
    line-height: 1.35;
  }

  body[data-story-chapter="books"] .book-reader {
    order: 2;
    height: auto;
    min-height: 0;
    overflow: visible;
    margin: 0 var(--rg-mobile-gutter);
    border: 0;
    border-radius: 18px;
    background: var(--rg-mobile-surface);
    box-shadow: 0 10px 28px rgba(38, 54, 45, .09);
  }

  body[data-story-chapter="books"] .book-visual {
    height: clamp(270px, 36svh, 330px);
    min-height: 270px;
    max-height: 330px;
    border-radius: 18px 18px 0 0;
    touch-action: pan-y;
  }

  body[data-story-chapter="books"] .book-visual img {
    border-radius: inherit;
  }

  body[data-story-chapter="books"] .book-visual::after {
    height: 16px;
  }

  body[data-story-chapter="books"] .page-season {
    top: 13px;
    left: 13px;
    padding: 7px 10px;
  }

  body[data-story-chapter="books"] .photo-zoom-hint {
    right: 12px;
    bottom: 12px;
    width: 46px;
    height: 46px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  body[data-story-chapter="books"] .photo-zoom-hint > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="books"] .book-page {
    min-height: 0;
    padding: 24px 18px 18px;
  }

  body[data-story-chapter="books"] .book-page-tools {
    min-height: 0;
    margin-bottom: 13px;
  }

  body[data-story-chapter="books"] .album-view-button {
    width: auto;
    min-height: 44px;
    border-radius: 12px;
  }

  body[data-story-chapter="books"] .album-view-button small {
    display: none;
  }

  body[data-story-chapter="books"] .book-page h2 {
    margin-bottom: 14px;
    font-size: clamp(28px, 8.4vw, 36px);
    line-height: 1.35;
  }

  body[data-story-chapter="books"] #pageDescription {
    min-height: 0;
    font-size: 19px;
    line-height: 1.82;
  }

  .book-mobile-hint {
    margin: 17px 0 0;
    padding: 10px 12px;
    border: 1px dashed rgba(164, 125, 53, .4);
    border-radius: 11px;
    color: #6a675c;
    background: rgba(255, 250, 241, .72);
    font: 600 12px/1.55 var(--rg-sans, "Noto Sans KR", sans-serif);
    text-align: center;
  }

  body[data-story-chapter="books"] .book-mobile-hint {
    display: block;
  }

  body[data-story-chapter="books"] .page-controls {
    position: sticky;
    z-index: 12;
    bottom: calc(var(--rg-mobile-nav-height) + env(safe-area-inset-bottom));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 18px -18px -18px;
    padding: 12px 12px 14px;
    border-top: 1px solid var(--rg-mobile-line);
    border-radius: 0 0 18px 18px;
    background: rgba(255, 250, 241, .98);
    box-shadow: 0 -9px 22px rgba(39, 52, 45, .06);
  }

  body[data-story-chapter="books"] .page-controls > span {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    font-size: 13px;
  }

  body[data-story-chapter="books"] .page-controls button {
    min-height: 50px;
    justify-self: stretch !important;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 14px;
  }

  body[data-story-chapter="books"] #readPageAloud[aria-pressed="true"] {
    color: #fff;
    border-color: var(--rg-mobile-rose);
    background: var(--rg-mobile-rose);
  }

  body[data-story-chapter="books"] .privacy-note,
  body[data-story-chapter="books"] .story-bridge,
  body[data-story-chapter="books"] footer {
    margin-right: var(--rg-mobile-gutter);
    margin-left: var(--rg-mobile-gutter);
  }

  body[data-story-chapter="books"] .privacy-note {
    order: 3;
    margin-top: 20px;
  }

  body[data-story-chapter="books"] .story-bridge {
    order: 4;
  }

  body[data-story-chapter="books"] .photo-lightbox {
    max-height: 100dvh !important;
  }

  body[data-story-chapter="books"] .photo-lightbox-shell {
    max-height: 100dvh;
    padding: 18px 14px calc(20px + env(safe-area-inset-bottom));
  }

  /* --------------------------------------------------------------- */
  /* Together gate and four-step dream play                           */
  /* --------------------------------------------------------------- */

  body[data-story-chapter="together"] .together-header {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: 62px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) var(--rg-mobile-gutter) 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    background: rgba(35, 66, 54, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body[data-story-chapter="together"] .together-header .foyer-brand {
    min-width: 0;
    font-size: 18px;
  }

  body[data-story-chapter="together"] .together-header .foyer-brand span {
    white-space: nowrap;
  }

  body[data-story-chapter="together"] .together-header .foyer-brand svg {
    width: 34px;
    height: 34px;
  }

  body[data-story-chapter="together"] .together-nav,
  body[data-story-chapter="together"] .foyer-home-link {
    display: none;
  }

  body[data-story-chapter="together"] .garden-header-actions {
    grid-column: 2 !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    justify-self: end;
    justify-content: flex-end;
    gap: 5px;
  }

  body[data-story-chapter="together"] .header-icon-button {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
  }

  body[data-story-chapter="together"] .header-icon-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="together"] .garden-header-actions .easy-mode-toggle {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
  }

  body[data-story-chapter="together"] .garden-header-actions .easy-mode-toggle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="together"] .guest-gate {
    min-height: calc(100dvh - 62px - var(--rg-mobile-nav-height) - env(safe-area-inset-bottom));
    padding: 24px 14px 32px;
  }

  body[data-story-chapter="together"] .guest-gate-card {
    width: 100%;
    max-width: 520px;
    padding: 30px 20px;
    border-radius: 24px;
  }

  body[data-story-chapter="together"] .guest-gate-card h1 {
    font-size: clamp(32px, 9vw, 40px);
  }

  body[data-story-chapter="together"] .guest-gate-card input,
  body[data-story-chapter="together"] .guest-gate-card button {
    min-height: 54px;
    border-radius: 13px;
  }

  body[data-story-chapter="together"] .dream-hero {
    min-height: 76svh;
  }

  body[data-story-chapter="together"] .dream-hero-copy {
    width: min(100% - 32px, 560px);
  }

  body[data-story-chapter="together"] .dream-hero-copy h1 {
    font-size: clamp(40px, 12vw, 58px);
  }

  body[data-story-chapter="together"] .dream-scroll-cue {
    display: none;
  }

  body[data-story-chapter="together"] .progressive-play {
    margin: 0;
  }

  body[data-story-chapter="together"] .progressive-play > summary {
    margin: 18px var(--rg-mobile-gutter);
    padding: 22px 18px;
    border-radius: 20px;
  }

  body[data-story-chapter="together"] .progressive-play > summary h2 {
    font-size: 25px;
  }

  body[data-story-chapter="together"] .chapter-play {
    padding-top: 22px;
    padding-bottom: 80px;
  }

  body[data-story-chapter="together"] .chapter-play .chapter-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body[data-story-chapter="together"] .garden-task-guide {
    width: 100%;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 38vw);
    gap: 7px;
    margin: 0 0 14px;
    padding: 0 var(--rg-mobile-gutter);
    overflow-x: auto;
    scroll-padding-inline: var(--rg-mobile-gutter);
    scrollbar-width: none;
  }

  body[data-story-chapter="together"] .garden-task-guide::-webkit-scrollbar {
    display: none;
  }

  body[data-story-chapter="together"] .garden-task-guide button {
    min-height: 98px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    padding: 7px 4px;
    border-radius: 13px;
    text-align: center;
  }

  body[data-story-chapter="together"] .garden-task-guide button > span {
    width: 28px;
    height: 28px;
  }

  body[data-story-chapter="together"] .garden-task-guide b {
    font-size: 11px;
  }

  body[data-story-chapter="together"] .garden-task-guide small {
    display: block;
    max-width: 15ch;
    font-size: 9px;
    line-height: 1.4;
    text-wrap: balance;
  }

  body[data-story-chapter="together"] .garden-task-guide button:disabled {
    opacity: .46;
    cursor: not-allowed;
  }

  body[data-story-chapter="together"] .garden-task-guide li.is-complete button {
    opacity: .72;
  }

  body[data-story-chapter="together"] .garden-game {
    padding: 0 var(--rg-mobile-gutter);
  }

  body[data-story-chapter="together"] .garden-playfield {
    height: min(74svh, 650px);
    min-height: 590px;
    border-radius: 20px;
  }

  body[data-story-chapter="together"] .dream-chapter-copy {
    right: 12px;
    left: 12px;
  }

  body[data-story-chapter="together"] .garden-resource-dock {
    top: 12px;
    right: 10px;
  }

  body[data-story-chapter="together"] .garden-resource-dock .garden-resource > span:nth-child(2) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-story-chapter="together"] .garden-tasks,
  body[data-story-chapter="together"] .garden-playfield.tasks-open .garden-tasks {
    position: absolute;
    z-index: 18;
    top: 94px;
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    max-height: none;
    display: block;
    overflow: visible;
    padding: 16px;
    border-radius: 20px;
    color: var(--rg-mobile-ink);
    background: rgba(255, 250, 241, .97);
    box-shadow: 0 18px 48px rgba(23, 40, 32, .28);
  }

  body[data-story-chapter="together"] .garden-tasks::before {
    display: none;
  }

  body[data-story-chapter="together"] .task-heading {
    display: none;
  }

  body[data-story-chapter="together"] .garden-task-step-copy {
    display: grid;
    gap: 5px;
    margin-bottom: 11px;
  }

  body[data-story-chapter="together"] .garden-task-step-copy small {
    color: var(--rg-mobile-rose);
    font: 700 12px/1.3 var(--rg-sans, "Noto Sans KR", sans-serif);
  }

  body[data-story-chapter="together"] .garden-task-step-copy h3 {
    margin: 0;
    font: 700 24px/1.35 var(--rg-serif, "Gowun Batang", serif);
  }

  body[data-story-chapter="together"] .garden-task-step-copy p {
    margin: 0;
    color: #667168;
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-story-chapter="together"] .garden-tasks > button[data-task] {
    display: none;
  }

  body[data-story-chapter="together"] .garden-tasks > button[data-task].is-active-step {
    width: 100%;
    min-height: 58px;
    display: grid;
    margin-top: 0;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--rg-mobile-rose);
  }

  body[data-story-chapter="together"] .garden-tasks > button[data-task].is-active-step > span:first-child,
  body[data-story-chapter="together"] .garden-tasks > button[data-task].is-active-step small {
    color: inherit;
  }

  body[data-story-chapter="together"] .garden-tasks .task-reset {
    display: none;
  }

  body[data-story-chapter="together"] .garden-playfield[data-active-task="complete"] .garden-tasks .task-reset {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 0 14px;
    border: 1px solid var(--rg-mobile-line);
    border-radius: 12px;
    color: var(--rg-mobile-green);
    background: rgba(255, 255, 255, .72);
    font: 700 14px/1.4 var(--rg-sans, "Noto Sans KR", sans-serif);
  }

  body[data-story-chapter="together"] .mobile-task-toggle,
  body[data-story-chapter="together"] .dream-chapter-nav,
  body[data-story-chapter="together"] .garden-tool-dock {
    display: none;
  }

  body[data-story-chapter="together"] .garden-story-panel {
    right: 12px;
    bottom: 190px;
    left: 12px;
    width: auto;
    max-height: 45%;
  }

  body[data-story-chapter="together"] .garden-complete-card {
    width: calc(100% - 28px);
    padding: 28px 20px;
    border-radius: 22px;
  }

  @media (prefers-reduced-motion: reduce) {
    .rg-mobile-nav,
    :where(.family-dialog, .memory-dialog, .family-album-dialog, .memory-trash-dialog, .cinema-dialog, .photo-lightbox)[open] {
      animation: none !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

@media (max-width: 370px) and (max-height: 760px) {
  body[data-story-chapter="together"] .guest-gate {
    padding: 12px 14px 18px;
  }

  body[data-story-chapter="together"] .guest-gate-card {
    padding: 18px 18px 20px;
  }

  body[data-story-chapter="together"] .guest-seal {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    font-size: 21px;
  }

  body[data-story-chapter="together"] .guest-gate-card .eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
  }

  body[data-story-chapter="together"] .guest-gate-card h1 {
    font-size: 30px;
    line-height: 1.25;
  }

  body[data-story-chapter="together"] .guest-gate-card > p:not(.eyebrow) {
    margin: 10px 0 0;
    line-height: 1.65;
  }

  body[data-story-chapter="together"] :where(#guestNameForm, #sharedCodeForm) {
    margin-top: 16px;
  }

  body[data-story-chapter="together"] #sharedCodeHelp {
    margin-top: 6px;
    line-height: 1.5;
  }

  body[data-story-chapter="together"] .gate-back {
    margin-top: 10px;
  }
}

@media (max-width: 389px) {
  body[data-story-chapter="foyer"] .door-action {
    padding-inline: 16px;
    font-size: 12px;
  }
}

@media (max-width: 370px) {
  .rg-mobile-nav span {
    font-size: 10px;
  }

  body[data-story-chapter="foyer"] .garden-doors {
    grid-template-rows: repeat(3, 132px);
    align-content: start;
    gap: 9px;
    padding-top: 20px;
  }

  body[data-story-chapter="foyer"] .foyer-main {
    grid-template-rows: 126px minmax(506px, 1fr);
  }

  body[data-story-chapter="foyer"] .foyer-intro {
    padding-block: 8px;
  }

  body[data-story-chapter="foyer"] .foyer-intro h1 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1px;
  }

  body[data-story-chapter="foyer"] .garden-door .door-copy {
    inset-inline-start: 38%;
    padding: 8px 10px;
  }

  body[data-story-chapter="foyer"] .garden-door .door-frame {
    width: 38%;
    border-radius: 13px 48px 48px 13px;
  }

  body[data-story-chapter="foyer"] .garden-door .door-copy > strong {
    font-size: 22px;
    line-height: 28px;
  }

  body[data-story-chapter="foyer"] .door-copy > small {
    font-size: 11px;
    line-height: 16px;
  }

  body[data-story-chapter="foyer"] .door-order {
    font-size: 9px;
    line-height: 13px;
  }

  body[data-story-chapter="foyer"] .door-action {
    padding-inline: 12px;
    font-size: 11px;
  }

  body[data-story-chapter="family"] .family-header-actions .family-motion-button {
    display: none;
  }

  body[data-story-chapter="family"] .album-grid {
    gap: 9px;
  }

}

@media (forced-colors: active) {
  .rg-mobile-nav {
    border-top: 2px solid CanvasText;
    background: Canvas;
  }

  .rg-mobile-nav a[aria-current="page"] {
    color: HighlightText;
    background: Highlight;
  }
}