/* One outer canvas for the intro, every replay step, and the report reader. */
:root {
  --seolhwa-page-max:440px;
  --seolhwa-page-width:min(100vw,var(--seolhwa-page-max));
  --palm-page-width:var(--seolhwa-page-max);
  --seolhwa-reader-gutter:22px;
  --seolhwa-card-width:88%;
  --seolhwa-partner-card-width:92%;
}
/* The outer canvas, safe areas and keyboard resize gaps belong to the product. */
html,body {background-color:#000!important;color-scheme:dark}
/* A classic scrollbar must not steal 15px from only the long report page. */
html:has(> body[data-view]), html:has(.rp) {scrollbar-width:none}
html:has(> body[data-view])::-webkit-scrollbar, html:has(.rp)::-webkit-scrollbar {display:none}
body[data-view=input] {--intro-column-width:var(--seolhwa-page-width)}
/* Fit the unchanged hero plus CTA inside the safe viewport. The intro never
   becomes a scrollable page, including short and landscape screens. */
html:has(> body[data-view]) {height:100%;overflow:hidden;overscroll-behavior:none}
body[data-view=intro] {
  --intro-column-width:var(--seolhwa-page-width);padding-left:0;padding-right:0;
  position:fixed;inset:0;height:100%;min-height:0;overflow:hidden;
  display:grid;place-items:center;
}
body[data-view=input] {height:100%;overflow:hidden}
body[data-view] > iframe[title="설화도령 손금사주 입력"] {
  left:50%!important;right:auto!important;
  width:var(--seolhwa-page-width)!important;
  bottom:auto!important;height:100vh!important;height:100lvh!important;
  transform:translateX(-50%);
}
/* Only the live native input document uses the parent's visual viewport.
   Photo/loading/preview retain the original fixed full-height iframe. */
body[data-view=input] > iframe[title="설화도령 손금사주 입력"][data-palm-input-viewport=managed] {
  position:absolute!important;inset:auto!important;
  left:var(--palm-input-viewport-center,50%)!important;
  width:min(var(--palm-input-viewport-width,100vw),var(--seolhwa-page-max))!important;
  top:var(--palm-input-viewport-top,0px)!important;
  height:var(--palm-input-viewport-height,100vh)!important;
}
/* A phone keeps its full artwork width. Crop only the hero's available height;
   the original title and CTA assets remain inside the fixed composition. */
  body[data-view=intro] > main {
    display:flex;flex-direction:column;
    height:calc(100vh - var(--intro-top) - var(--intro-bottom));
    height:calc(100svh - var(--intro-top) - var(--intro-bottom));
  }
  body[data-view=intro] .hero {flex:1 1 0;min-height:0;aspect-ratio:auto}
  body[data-view=intro] .title {max-height:45%;object-fit:contain}
  body[data-view=intro] .start {flex:none}
  body[data-view=intro] .start img {max-height:calc((100svh - var(--intro-top) - var(--intro-bottom))*.25);object-fit:contain}
body[data-view] #palm2-music-toggle {
  right:max(12px,env(safe-area-inset-right),calc((100vw - var(--intro-column-width))/2 + 12px));
}
body[data-view=input][data-seolhwa-offer-bars=visible] #palm2-music-toggle {
  right:max(8px,env(safe-area-inset-right),calc((100vw - var(--seolhwa-page-width))/2 + 8px));
}
/* The report keeps its own content spacing and uses the same canvas edges. */
html body .rp, html body .report-nav, html body .td {
  box-sizing:border-box;width:100%!important;max-width:var(--seolhwa-page-max)!important;
  margin-left:auto;margin-right:auto;
}