/* Dedicated app-only surfaces for native iOS WebViews. The full app DOM
   remains available to its existing scripts, while all web chrome is
   removed from the rendered surface. Two variants share these rules:
   - .mobileCanvasOnly (/mobile/canvas): the tree canvas itself. Native SwiftUI
     owns every popup here, so <dialog>s are force-hidden too.
   - .mobileGuideOnly (/mobile/guide): the starter-setup wizard and guided
     tutorial, opened from WebGuideView for flows that only exist as
     <dialog>s/toolbar panels in the DOM -- those need to stay visible here.
     It also skips the tree-canvas background treatment below: this page is
     just the starter form/dialog content floating in a native sheet, not a
     canvas standing in for one, so it keeps a plain background instead. */
body.mobileCanvasOnly,
body.mobileCanvasOnly.railCollapsed,
body.mobileGuideOnly,
body.mobileGuideOnly.railCollapsed {
  display: block;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  /* App-only web surfaces otherwise inherit the website's compact desktop
     typography. Let iOS scale the existing component text consistently. */
  -webkit-text-size-adjust: 110%;
  text-size-adjust: 110%;
}

body.mobileCanvasOnly,
body.mobileCanvasOnly.railCollapsed {
  background: #f8efd9;
}

body.mobileCanvasOnly .forestScene,
body.mobileCanvasOnly .rail,
body.mobileCanvasOnly > nav,
body.mobileCanvasOnly .demoExperienceNotice,
body.mobileCanvasOnly .treeTabBar,
body.mobileCanvasOnly .treeToolbar,
body.mobileCanvasOnly #calendarView,
body.mobileCanvasOnly #ceremonyView,
body.mobileCanvasOnly #tabsView,
body.mobileCanvasOnly #profileView,
body.mobileCanvasOnly dialog,
body.mobileGuideOnly .forestScene,
body.mobileGuideOnly .rail,
body.mobileGuideOnly > nav,
body.mobileGuideOnly .demoExperienceNotice,
body.mobileGuideOnly .treeTabBar,
body.mobileGuideOnly .treeToolbar,
body.mobileGuideOnly #calendarView,
body.mobileGuideOnly #ceremonyView,
body.mobileGuideOnly #tabsView,
body.mobileGuideOnly #profileView {
  display: none !important;
}

body.mobileCanvasOnly main,
body.mobileCanvasOnly #treeView,
body.mobileCanvasOnly .workspace,
body.mobileCanvasOnly .canvasShell,
body.mobileGuideOnly main,
body.mobileGuideOnly #treeView,
body.mobileGuideOnly .workspace,
body.mobileGuideOnly .canvasShell {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.mobileCanvasOnly .canvasShell {
  background-color: #f8efd9 !important;
  background-image:
    linear-gradient(rgba(248, 239, 217, .30), rgba(248, 239, 217, .30)),
    url("/assets/canvas-backgrounds/hanji-familymap-01.webp") !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center, top center !important;
  background-repeat: no-repeat, repeat-y !important;
  background-attachment: local !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.mobileGuideOnly .canvasShell {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.mobileCanvasOnly .canvas,
body.mobileCanvasOnly .treeContent,
body.mobileGuideOnly .canvas,
body.mobileGuideOnly .treeContent {
  background: transparent;
}

/* Canvas-only: the raw tree needs pan/zoom to own all touch gestures.
   The guide surface hosts normal form/dialog UI, so it keeps default
   touch scrolling instead. */
body.mobileCanvasOnly .canvasShell {
  touch-action: none;
}

body.mobileCanvasOnly .mobileCanvasResetBtn {
  position: fixed;
  right: 18px;
  bottom: max(26px, calc(96px + env(safe-area-inset-bottom)));
  z-index: 80;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(83, 70, 50, .18);
  border-radius: 22px;
  background: rgba(255, 252, 244, .80);
  box-shadow: 0 12px 28px rgba(42, 34, 22, .16), inset 0 1px 0 rgba(255,255,255,.85);
  color: #325f49;
  font-size: 14px;
  font-weight: 900;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

body.mobileCanvasOnly .mobileCanvasResetBtn:active { transform: scale(.96); }
body.mobileCanvasOnly .mobileCanvasResetBtn[hidden] { display: none; }

/* 삭제는 네이티브 카드 메뉴의 확인 흐름으로만 제공한다. 드래그 중 나타나는
   웹 삭제 영역은 손가락 이동과 겹쳐 혼란을 줘 앱 전용 캔버스에서는 숨긴다. */
body.mobileCanvasOnly .deleteDropZone {
  display: none !important;
}

/* The most frequently read canvas labels use fixed pixel sizes, so make
   them explicitly legible even when WebKit does not inflate fixed text. */
body.mobileCanvasOnly .nodeName { font-size: 18px; }
body.mobileCanvasOnly .nodeRel { font-size: 14px; }
body.mobileCanvasOnly .unconnectedBadge { font-size: 13px; }

/* /mobile/guide should show *only* the starter-wizard card -- renderTree()
   still renders the tab's existing person cards/relation lines underneath it
   (the starter panel is an overlay next to them on the real website, not a
   replacement for the canvas), so hide those explicitly. #treeNodes/#treeLines
   themselves stay in the DOM (not display:none) because on wide viewports
   (>1280px) mountStarterPanel appends the panel *into* #treeNodes instead of
   to <body> -- hiding the container would hide the panel too. */
body.mobileGuideOnly #treeNodes > .node,
body.mobileGuideOnly #treeLines {
  display: none !important;
}

/* .starterSetup's mobile layout (responsive.css) reserves top/bottom space
   for the website's mobile nav bar and bottom tab bar via these two custom
   properties -- neither exists on this chrome-free surface, so collapse
   them down to just the safe-area inset instead of leaving dead space. */
body.mobileGuideOnly .starterSetup {
  --starter-panel-mobile-top: max(20px, env(safe-area-inset-top));
  --starter-panel-mobile-bottom: max(20px, env(safe-area-inset-bottom));
}

/* onboarding.css/responsive.css style .starterSetup as its own rounded,
   bordered, drop-shadowed card -- makes sense floating over the real
   canvas on the website, but here the page behind it is already just plain
   background (see .canvasShell above), so the card reads as a second,
   visibly separate layer inside the native sheet instead of blending into
   it. Flatten it to plain content sitting directly on the page. */
body.mobileGuideOnly .starterSetup {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* The guided tutorial dialog's own "×" fully exits the tutorial -- the same
   thing the native sheet's own "닫기" button already does, so it's a
   redundant second way to do the exact same thing here. (Left alone
   elsewhere: the person/photo/info dialogs' own close buttons cancel just
   that one sub-dialog and stay on the page, which "닫기" does not -- hiding
   those would remove functionality, not redundancy.) */
body.mobileGuideOnly .guidedTutorialClose {
  display: none !important;
}

/* Same flattening as .starterSetup above, applied to the guided tutorial
   dialog: onboarding.css gives it its own rounded/bordered/shadowed card
   (sized with margins so the real website's canvas shows around it) plus a
   dimming ::backdrop. Both read as a floating, separate layer inside the
   already-plain native sheet. Expand it edge-to-edge and drop the backdrop
   dimming instead -- .guidedTutorialShell keeps its own inner background,
   since that one's load-bearing for the tutorial's own mock-canvas UI, not
   just decorative separation from the page like the outer card chrome was. */
body.mobileGuideOnly dialog.guidedTutorialDialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.mobileGuideOnly dialog.guidedTutorialDialog::backdrop {
  background: transparent;
  backdrop-filter: none;
}

/* Same flattening again, for the "가계도를 다듬어볼까요?" tip popup
   (.starterTutorialOverlay/.starterTutorialCard, shown right after
   creating the starter family -- see showStarterTutorial in app.js, whose
   "직접 연습하기" button is what opens the guided tutorial dialog above).
   Drop the overlay's own dimming and the card's border/radius/shadow/
   background the same way. .starterTutorialCharacter keeps its own framing
   -- that's decorative image cropping, not the "separate card" chrome. */
body.mobileGuideOnly .starterTutorialOverlay {
  /* Same dead-space fix as .starterSetup's custom properties above --
     responsive.css reserves top/bottom padding here for the website's
     mobile nav/tab bars, which don't exist on this surface. */
  --starter-tutorial-mobile-top: max(20px, env(safe-area-inset-top));
  --starter-tutorial-mobile-bottom: max(20px, env(safe-area-inset-bottom));
  background: none;
  backdrop-filter: none;
}
body.mobileGuideOnly .starterTutorialCard {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The starter panels' and tip popup's own action buttons are now duplicated
   by native (see GuideBridgeController / WebGuideView's bottom bar) --
   hide just those specific buttons, not their containers, since
   .starterActions on the 조직도 panel also holds "섹션 추가" (no native
   equivalent -- see notifyGuideScreen's doc comment in app.js) and needs to
   stay visible. */
body.mobileGuideOnly .starterSetup [data-starter-dismiss],
body.mobileGuideOnly .starterSetup [data-starter-create] {
  display: none !important;
}
body.mobileGuideOnly .starterTutorialActions {
  display: none !important;
}