/* Amendment 3: .film-frame's own width:min(1120px,92%) formula already
   scales the vehicle image at every viewport (the img is width:100% of
   the frame, hero-film.css) -- no separate tablet-width override is
   needed here any more. The old .film-hotspot-item--X{left;top} block
   that used to live in this query is gone too: item positioning is now
   the span-based (anchor-to-label) geometry in hero-film.css's
   @media(min-width:769px) block, which already covers this range. */

/* 769-1024px tablet band only: the shared min(320px, 26vw) panel cap
   (hero-film.css) narrows enough in this range that panel copy can wrap
   taller than the fixed label-relative offset (44px) can clear, pushing
   a panel's far edge past the stage's clipped edge. Widening the cap
   here shortens every panel back to fewer lines without touching the
   occlusion-tested per-part directions from the leader-line geometry
   above. Re-verify via a live 6-part x 5-sibling hit-test matrix across
   this band alongside the 1440x900 and 1100x800 regression widths (which
   still resolve to 26vw/320px, outside this query). Bounded to this band
   on both ends so it cannot affect the mobile bottom sheet (<=768px) or
   the unscoped desktop rule (>=1025px). */
@media (min-width: 769px) and (max-width: 1024px) {
  .film-hotspot-panel {
    width: min(320px, 40vw);
  }
}

@media (min-width: 769px) {
  .film-xray-dot { display: none; } /* desktop: the leader lines/labels carry the callout instead */
}

@media (max-width: 768px) {
  .film-hero {
    min-height: 100svh;
  }

  /* Mobile flows opening -> car (with mirror dots) -> caption -> 2x3 chips
     -> rest of page in normal document flow: the merged stage is at least
     one viewport tall but is not clipped to exactly one the way desktop's
     side-by-side composition is. */
  .film-stage {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .film-stage::before {
    background:
      linear-gradient(180deg, rgba(3, 4, 5, 0.92) 0%, transparent 53%, rgba(3, 4, 5, 0.3) 100%),
      radial-gradient(ellipse at center, transparent 52%, rgba(3, 4, 5, 0.68) 100%);
  }

  .film-fog span {
    width: 100vw;
    height: 100vw;
  }

  .film-opening {
    /* the mobile nav (logo row + hamburger) measures ~92px tall, taller than
       the 72px desktop nav the base --nav-clear covers */
    --nav-clear: 92px;
    padding-top: calc(var(--nav-clear) + max(8px, 2vh));
    width: calc(100% - (var(--film-gutter) * 2));
  }

  .film-overline {
    margin-bottom: 16px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .film-title {
    max-width: 100%;
    font-size: clamp(42px, 11vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.06em;
  }

  .film-opening-sub {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
  }

  .film-opening-proof {
    gap: 5px 16px;
    margin-top: 12px;
    font-size: 10px;
  }

  .film-actions {
    margin-top: 14px;
  }

  .film-action {
    min-width: 0;
    min-height: 46px;
    padding: 0 18px;
    font-size: 13px;
  }

  .film-scroll-next {
    top: calc(100svh - 72px);
    bottom: auto;
    transition: opacity 220ms var(--film-ease), visibility 220ms;
  }

  .film-parts[data-film-callouts-revealed] .film-scroll-next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .film-corner {
    display: none;
  }

  .film-stage-caption {
    margin: 8px 0 0 var(--film-gutter);
    font-size: 13px;
  }

  .film-parts-stage {
    min-height: 0;
    /* Amendment 5: side padding trimmed 20px->14px (the scaled-up frame
       below needs the room, and a tighter gutter reads more composed);
       bottom padding trimmed 88px->60px to close the dead gap before the
       caption/scroll-cue now that the frame itself carries more visual
       weight. */
    padding: 0 14px 60px;
    overflow: visible;
    /* Amendment 3: the mobile coordinate override is gone -- .film-frame
       (hero-film.css) now wraps the vehicle image exactly at every
       viewport, mobile included, so the same --dot-<part>-x/y set
       declared there (one coordinate set total) lands on the same
       physical part here too. Recalibrate that block, not this one, if
       the anchors ever need to move. */
  }

  .film-parts-stage::before {
    display: none;
  }

  .film-frame {
    width: 100%;
  }

  /* Amendment 3: the old cropped/zoomed mobile treatment (height:250px,
     overflow:hidden, an oversized img clamp(500px,132vw,580px) centered
     and bottom-anchored) is retired -- .film-parts-vehicle now falls
     through to hero-film.css's base rule (position:relative, normal
     flow) and .film-body falls through to width:100%;aspect-ratio, the
     same "frame wraps the image exactly" contract desktop uses. This is
     what lets one coordinate set track the body at every viewport: the
     vehicle's own box is always exactly .film-frame's box, never a
     wider/shorter crop with an unrelated aspect ratio. The car now
     renders as the full, uncropped photograph (smaller, not zoomed) with
     a bit of breathing room before the chip grid below. */
  .film-parts-vehicle {
    margin-bottom: 0;
    transform: none;
  }
  .film-parts .film-parts-vehicle .film-body {
    opacity: 1;
    filter: brightness(1.18) contrast(1.08);
  }

  .film-xray-dot { display: block; }

  .film-hotspot-layer {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: clamp(150px, 21svh, 190px);
  }

  .film-parts.film-callouts-armed:not(.film-callouts-live) .film-hotspot-layer {
    visibility: hidden;
    pointer-events: none;
  }

  .film-parts.film-callouts-armed:not(.film-callouts-live) .film-hotspot-item {
    opacity: 0;
    transform: translateY(14px);
  }

  .film-parts.film-callouts-armed .film-hotspot-item {
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }

  .film-parts.film-callouts-armed .film-hotspot-item:nth-of-type(1),
  .film-parts.film-callouts-armed .film-hotspot-item:nth-of-type(2) {
    transition-delay: 0ms;
  }

  .film-parts.film-callouts-armed .film-hotspot-item:nth-of-type(3),
  .film-parts.film-callouts-armed .film-hotspot-item:nth-of-type(4) {
    transition-delay: 90ms;
  }

  .film-parts.film-callouts-armed .film-hotspot-item:nth-of-type(5),
  .film-parts.film-callouts-armed .film-hotspot-item:nth-of-type(6) {
    transition-delay: 180ms;
  }

  .film-hotspot-item,
  .film-hotspot-item--injector,
  .film-hotspot-item--ecu,
  .film-hotspot-item--switch,
  .film-hotspot-item--reducer,
  .film-hotspot-item--filler,
  .film-hotspot-item--trunk {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
  }

  .film-hotspot {
    width: 100%;
    min-height: 58px;
    justify-content: space-between;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(216, 219, 222, 0.15);
    background: rgba(3, 4, 5, 0.72);
  }

  .film-hotspot-copy {
    min-width: 0;
    gap: 3px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .film-hotspot-copy small {
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .film-hotspot-copy strong {
    font-size: 13px;
  }

  .film-hotspot-plus {
    width: 30px;
    height: 30px;
  }

  .film-hotspot-line,
  .film-hotspot-anchor {
    display: none;
  }

  .film-hotspot-panel,
  .film-hotspot-item--switch .film-hotspot-panel,
  .film-hotspot-item--filler .film-hotspot-panel,
  .film-hotspot-item--trunk .film-hotspot-panel,
  .film-hotspot-item--reducer .film-hotspot-panel {
    top: 66px;
    right: auto;
    bottom: auto;
    left: 0;
    width: calc(200% + 10px);
    grid-template-columns: minmax(100px, 36%) 1fr;
    gap: 14px;
    padding: 14px;
  }

  .film-hotspot-item:nth-of-type(even) .film-hotspot-panel {
    right: 0;
    left: auto;
  }

  .film-parts:not(.film-hotspots-enhanced) .film-hotspot-item[open] {
    grid-column: 1 / -1;
  }

  .film-parts:not(.film-hotspots-enhanced) .film-hotspot-item[open] .film-hotspot-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 8px;
    transform: none;
  }

  .film-hotspots-enhanced .film-hotspot-item[open] {
    z-index: 11;
  }

  .film-hotspots-enhanced .film-hotspot-scrim {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: block;
    border: 0;
    background: rgba(3, 4, 5, 0.62);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms var(--film-ease), visibility 220ms;
  }

  .film-parts[data-film-hotspot-open] .film-hotspot-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .film-parts[data-film-hotspot-open] {
    z-index: 25;
  }

  .film-hotspots-enhanced .film-hotspot-panel,
  .film-hotspots-enhanced .film-hotspot-item--switch .film-hotspot-panel,
  .film-hotspots-enhanced .film-hotspot-item--filler .film-hotspot-panel,
  .film-hotspots-enhanced .film-hotspot-item--trunk .film-hotspot-panel,
  .film-hotspots-enhanced .film-hotspot-item--reducer .film-hotspot-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-height: min(76svh, 620px);
    grid-template-columns: minmax(112px, 38%) 1fr;
    gap: 16px;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(32px);
  }

  .film-hotspots-enhanced .film-hotspot-panel[data-open] {
    transform: translateY(0);
  }

  .film-hotspot-media {
    min-width: 0;
  }
  .film-hotspot-panel img {
    height: 148px;
  }

  .film-hotspot-panel h3 {
    padding-right: 28px;
    font-size: 18px;
  }

  .film-parts.film-stage-armed:not(.film-stage-play) .film-parts-vehicle {
    transform: translateX(58%);
  }
}

@media (max-width: 480px) {
  .film-action {
    flex: 1;
    padding: 0 14px;
  }
}

@media (min-width: 769px) and (max-height: 720px) {

  .film-opening {
    padding-top: calc(var(--nav-clear) + clamp(4px, 1vh, 12px));
  }

  .film-opening-sub,
  .film-opening-proof,
  .film-actions {
    margin-top: 8px;
  }

  /* Critical fix (2026-07-14): .film-frame's width formula (hero-film.css)
     now floors at max(560px, calc(152.5vh - 413.4px)) so the callout
     frame can no longer collapse below a usable size -- unfloored it
     reached ~502px at 1024x600, tight enough that the injector/reducer
     label pair overlapped by double-digit pixels (a click aimed at
     injector's + control resolved to reducer's label instead -- Critical,
     wrong panel opens). Flooring the width alone would just re-open the
     ECU-label-vs-CTA overlap that height term was originally added to
     prevent (a taller floor -> a taller frame -> more upward bleed past
     the "시스템 보기" CTA above it), so two more adjustments are scoped to
     this same short-viewport band -- both leave the six --dot-* anchor
     coordinates untouched, only the labels' offset FROM those anchors:
     1. Injector/reducer elbow spread widened from the unscoped default
        (2%/28%, hero-film.css) to -2%/32% -- label text is a fixed pixel
        width but this spread is a frame-relative percentage, so a
        floored (smaller) frame needs more percentage-point separation to
        keep the same pixel clearance between the two labels.
     2. Top row (ecu/switch/filler) dropped from top:12% to top:22% as
        one group, to restore the CTA clearance the taller floored frame
        costs. Moved together (not ecu alone, the only one of the three
        actually over the CTA horizontally) to keep the row visually
        aligned -- switch and filler have no clearance problem of their
        own and moving them costs nothing, since nothing else occupies
        that band of the frame.
     Verified (getBoundingClientRect + elementFromPoint, Playwright) at
     1024x600 / 1280x650 / 1440x700: minimum pairwise label/+ gap 42.8 /
     48.8 / 74.8px (>=12px required), zero label-CTA/copy intersection,
     6/6 '+' controls resolve to their own summary. The regression widths
     1440x900 / 1100x800 / 810x1080 all sit above 720px viewport height,
     so this block never applies there -- confirmed unchanged at 101.8 /
     62.1 / 46.1px min gap, matching the pre-fix measurements exactly.
     Re-run that same check if the floor, this spread, or this offset
     ever changes. */
  .film-hotspot-item--ecu,
  .film-hotspot-item--switch,
  .film-hotspot-item--filler {
    top: 22%;
  }
  /* Lines keep the 8px stand-off below the dropped label row (same
     junction grammar as the unscoped rules in hero-film.css). The old
     in-band injector/reducer elbow-spread overrides are gone: with the
     labels now centered on their line terminals (translate rules,
     hero-film.css) the base 6%/30% elbow outers already clear each other
     by ~60px at the 560px frame floor — re-measured via the same
     gap/elementFromPoint check documented above. */
  .film-hotspot-line--ecu,
  .film-hotspot-line--switch,
  .film-hotspot-line--filler {
    top: calc(22% + var(--callout-label-h, 44px) + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-fog span {
    animation: none;
  }

  .film-action,
  .film-scroll-next svg,
  .film-hotspot-plus,
  .film-hotspot-panel,
  .film-hotspot-scrim {
    transition: none;
  }
}