/* PF9: one document-level clearance, including the global business footer.
   The inner frame remains usable in isolated previews without a root layout. */
[data-app-design-v2] {
  --app-v2-dock-size: max(64px, 4rem);
  --app-v2-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-v2-clearance: calc(var(--app-v2-dock-size) + var(--app-v2-safe-bottom) + 12px);
}
/* The viewport scrolls on html, not the document host. Match dock clearance
   only while an app dock exists, including after client-side route changes. */
html:has([data-app-design-v2] .appV2TabDock) {
  scroll-padding-bottom: calc(max(64px, 4rem) + env(safe-area-inset-bottom, 0px) + 12px);
}
/* Keyboard focus never scrolls under the top safe-area inset (0 below a status bar). */
html:has([data-app-design-v2].appV2Document) {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
/* Legal return: 44px control + 12px sticky padding + 8px focus clearance, below the inset.
   Support has no sticky header; keep only the small focus clearance. */
html:has([data-app-design-v2] .appV2TabDock):has([data-app-design-v2] .appV2LegalReturn) {
  scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px));
}
html:has([data-app-design-v2] .appV2TabDock):has([data-app-design-v2] .appV2SupportPage) {
  scroll-padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
[data-app-design-v2].appV2Document {
  --app-v2-canvas: #f6f1ec;
  --app-v2-canvas-ink: #231a1e;
  background: var(--app-v2-canvas);
  /* The one top safe-area reserve (0 while the app draws below the status bar). */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(var(--app-v2-safe-bottom) + 12px);
  display: flex;
  flex-direction: column;
  /* Content starts at the top; only the footer is pushed to the bottom. */
  justify-content: flex-start;
}
[data-app-design-v2].appV2Document > .appV2PublicFooter { margin-top: auto; }
/* The document already reserves the top inset; sticky and fixed controls start below it. */
[data-app-design-v2].appV2Document .appV2AccountLayout.appV2AccountLayout { padding-top: 0; }
[data-app-design-v2].appV2Document .appV2LegalReturn.appV2LegalReturn { top: env(safe-area-inset-top, 0px); }
[data-app-design-v2].appV2Document .appV2Skip.appV2Skip:focus { transform: translateY(env(safe-area-inset-top, 0px)); }
[data-app-design-v2].appV2Document [data-mvp] { min-height: 0; background: transparent; padding: 0; }
[data-app-design-v2].appV2Document:has(.appV2TabDock) { padding-bottom: var(--app-v2-clearance); }
[data-app-design-v2].appV2Frame { min-height: 0; background: transparent; }
[data-app-design-v2].appV2Frame:not(.appV2Document .appV2Frame):has(.appV2TabDock) { padding-bottom: var(--app-v2-clearance); }
[data-app-design-v2].appV2Document:has(.appV2AccountLayout, .appV2Scene-welcome, .appV2Scene-login, .appV2RouteException) { --app-v2-canvas: #f3d9cf; }
[data-app-design-v2].appV2Document:has(.appV2DetailPage[data-journey], .appV2GiftRecipient, .appV2Scene-creating, .appV2Scene-listening, .appV2Scene-share) {
  --app-v2-canvas: #2a1820;
  --app-v2-canvas-ink: #f6f1ec;
}
/* The old spacer has no box. Retained markup preserves the existing tab host contract. */
[data-app-design-v2] .appV2TabSpace { display: none; }
[data-app-design-v2] .appV2TabDock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  height: calc(var(--app-v2-dock-size) + var(--app-v2-safe-bottom));
  max-height: none;
  max-width: 480px;
  margin: 0;
  padding: 0 16px calc(var(--app-v2-safe-bottom) + 8px);
  overflow: visible;
  pointer-events: none;
  /* HOME_MESSAGE_SNS_01: the bar is as wide as its three items, centred, sitting 8px above the bottom edge. */
  align-items: flex-end;
  justify-content: center;
}
[data-app-design-v2] .appV2Tabs { pointer-events: auto; }
/* WELCOME_SHEET_01 (owner: "겹침도 같이 고쳐줘"): a sticky bottom CTA on a page that also has the
   fixed tab dock used the same floor (bottom: 8px) and slid behind the dock. While a dock is
   present, those CTAs stick 8px above it; at the end of the page they sit in flow as before. */
[data-app-design-v2]:has(.appV2TabDock) .appV2ProductsActions,
[data-app-design-v2]:has(.appV2TabDock) .appV2AccountDeleteDock,
[data-app-design-v2]:has(.appV2TabDock) .appV2ExceptionsActions {
  bottom: calc(var(--app-v2-dock-size) + var(--app-v2-safe-bottom) + 8px);
}
/* Above the dock the products CTA no longer needs its own bottom safe-area padding. */
[data-app-design-v2]:has(.appV2TabDock) .appV2ProductsActions { padding-bottom: 10px; }
[data-app-design-v2] .appV2Tabs {
  flex: 0 1 auto;
  box-sizing: border-box;
  height: auto;
  min-width: 0;
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: #fffdfb;
  box-shadow: 0 4px 18px #231a1e1a, 0 0 0 1px #ffffff99 inset;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
/* Thin and short: icon over a one-line label, >= 44px to touch, ink-dark text, only the current tab tinted plum. */
[data-app-design-v2] .appV2Tab {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  gap: 1px;
  padding: 5px 16px;
  border-radius: 999px;
  color: var(--app-v2-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: normal;
}
[data-app-design-v2] .appV2Tab .appV2Icon { width: 20px; height: 20px; }
[data-app-design-v2] .appV2Tab[aria-current="page"] { color: var(--app-v2-ink); background: #4e2c3c14; }
/* Dark glass is selected by visible presentation, never by business state. */
[data-app-design-v2].appV2Frame:has(.appV2DetailPage[data-journey], .appV2GiftRecipient, .appV2Scene-creating, .appV2Scene-listening, .appV2Scene-share) .appV2Tabs,
[data-app-design-v2] .appV2TabDark .appV2Tabs { background: #2a1820; border-color: #f6f1ec66; }
[data-app-design-v2].appV2Frame:has(.appV2DetailPage[data-journey], .appV2GiftRecipient, .appV2Scene-creating, .appV2Scene-listening, .appV2Scene-share) .appV2Tab,
[data-app-design-v2] .appV2TabDark .appV2Tab { color: #f6f1ec; }
[data-app-design-v2].appV2Frame:has(.appV2DetailPage[data-journey], .appV2GiftRecipient, .appV2Scene-creating, .appV2Scene-listening, .appV2Scene-share) .appV2Tab[aria-current="page"],
[data-app-design-v2] .appV2TabDark .appV2Tab[aria-current="page"] { background: #4e2c3c; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-app-design-v2] .appV2Tabs { background: #ffffff8c; }
  [data-app-design-v2].appV2Frame:has(.appV2DetailPage[data-journey], .appV2GiftRecipient, .appV2Scene-creating, .appV2Scene-listening, .appV2Scene-share) .appV2Tabs,
  [data-app-design-v2] .appV2TabDark .appV2Tabs { background: rgba(42, 24, 32, .82); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-app-design-v2] .appV2Tabs { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Remove only outer page-end reserves; cards, consent rows and actions retain their spacing. */
[data-app-design-v2] .appV2PlumHome.appV2PlumHome,
[data-app-design-v2] .appV2Library.appV2Library,
[data-app-design-v2] .appV2ProductsPage.appV2ProductsPage,
[data-app-design-v2] .appV2SupportPage.appV2SupportPage,
[data-app-design-v2] .appV2AccountLayout.appV2AccountLayout,
[data-app-design-v2] .appV2AccountPage.appV2AccountPage,
[data-app-design-v2] .appV2LegalPage.appV2LegalPage,
[data-app-design-v2] .appV2ExceptionsPage.appV2ExceptionsPage,
[data-app-design-v2] .appV2DetailPage.appV2DetailPage,
[data-app-design-v2] .appV2GiftRecipient.appV2GiftRecipient,
[data-app-design-v2] .appV2GiftPage.appV2GiftPage,
[data-app-design-v2] .appV2CreatePage.appV2CreatePage,
[data-app-design-v2] .appV2BetaScene.appV2BetaScene,
[data-app-design-v2] .appV2PlayPage.appV2PlayPage {
  padding-bottom: 0;
  margin-bottom: 0;
  min-height: 0;
}
[data-app-design-v2] .appV2BetaPage.appV2BetaPage { min-height: 0; }
[data-app-design-v2] .appV2Journey_shell.appV2Journey_shell { padding-bottom: 0; min-height: 0; }
[data-app-design-v2] .appV2Journey_backRow { margin-bottom: 0; }
[data-app-design-v2] .appV2Play_page.appV2Play_page { min-height: 0; padding-bottom: 12px; }
/* The delivery menu used a second sticky bottom anchor and covered its following
   report/refund links. The navigation is now the only bottom overlay. */
[data-app-design-v2] .appV2DeliverySheet { position: relative; top: auto; }
/* Match the PF7 recipient report link on the dark owner detail surface. */
[data-app-design-v2] .appV2DetailPage[data-journey] .appV2SupportLink[href="/content/report"] {
  color: #decbd5;
  text-decoration: underline;
}
[data-app-design-v2] .appV2PlayStatus.appV2PlayStatus { min-height: 0; padding-bottom: 12px; }
/* Payment sheet and status fill the document above the footer. Their backdrops
   are drawn by the document, so they reach every edge and the top inset. */
[data-app-design-v2].appV2Document :has(.appV2Play_page, .appV2PlayStatus) { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; }
[data-app-design-v2].appV2Document .appV2Play_page.appV2Play_page,
[data-app-design-v2].appV2Document .appV2PlayStatus.appV2PlayStatus { flex: 1 0 auto; background: transparent; }
[data-app-design-v2].appV2Document .appV2Play_page:not([aria-busy="true"]) { display: flex; flex-direction: column; padding-bottom: 0; }
[data-app-design-v2].appV2Document .appV2Play_page:not([aria-busy="true"]) > .appV2Play_shell { flex: 1 0 auto; width: 100%; }
[data-app-design-v2].appV2Document:has(.appV2Play_page:not([aria-busy="true"])) {
  background: linear-gradient(#faf6f2f5, #faf6f2f5) bottom / 100% calc(var(--app-v2-safe-bottom) + 12px) no-repeat, #a49a99;
}
/* The sheet runs on through the footer to the screen end (same translucent paper over the dim). */
[data-app-design-v2].appV2Document:has(.appV2Play_page:not([aria-busy="true"])) > .appV2PublicFooter { background: #faf6f2f5; }
[data-app-design-v2].appV2Document:has(.appV2PlayStatus, .appV2Play_page[aria-busy="true"]) { background: linear-gradient(180deg, #f3d9cd, #f6f1ec 75%); }
/* Wide dark screens: the hero light is drawn by the document, not the 480px column.
   Below 430px the column is the screen and keeps its own background; 576px = 120% of the column. */
@media (min-width: 430px) {
  [data-app-design-v2].appV2Document:has(.appV2DetailPage[data-journey]:not([data-journey="WAITING"]), .appV2Scene-listening, .appV2Scene-share) {
    background: radial-gradient(576px 70% at calc(50% + min(20%, 96px)) 20%, #8a3f58 0%, #4e2c3c 45%, #2a1820 100%);
  }
  [data-app-design-v2].appV2Document:has(.appV2GiftRecipient) {
    background: radial-gradient(576px 70% at calc(50% + min(30%, 144px)) 25%, #71354e, #4e2c3c 45%, #2a1820 100%);
  }
  [data-app-design-v2].appV2Document .appV2DetailPage[data-journey]:not([data-journey="WAITING"]),
  [data-app-design-v2].appV2Document .appV2Scene-listening.appV2Scene-listening,
  [data-app-design-v2].appV2Document .appV2Scene-share.appV2Scene-share,
  [data-app-design-v2].appV2Document .appV2GiftRecipient.appV2GiftRecipient { background: transparent; }
}
/* Footer follows the page's canvas; its links and complete business text stay in flow. */
[data-app-design-v2].appV2Document .appV2PublicFooter,
[data-app-design-v2].appV2Document .appV2PublicFooter .appV2SupportContent { background: transparent; color: var(--app-v2-canvas-ink); }
[data-app-design-v2].appV2Document .appV2PublicFooter > .appV2SupportContent { margin: 0; padding-block: 0; }
[data-app-design-v2].appV2Document .appV2PublicFooter .appV2SupportLink { color: inherit; }