/* Public home (제품 소개, public-spec section 3). All 9 sections built.
   Values below are pulled directly from the real Zeplin export's own
   layer data (design-handoffs/asportal-public/home/zeplin-raw/{pc-main,
   asset-guide}.json), not eyeballed -- see design-handoffs/asportal-public/
   home/NOTES.md for the full extraction trail. */

html {
  /* Matches the fixed top bar's own solid `--color-top-bg` (public-
     top.css) so the real status-bar/toolbar chrome reads as one
     continuous black strip, not a seam against this page's own
     background -- same established mechanism as login.css's
     `--color-login-bg`, and for the same reason: this can only be set
     once at page load, not swapped at runtime for a scroll/hover state. */
  background-color: var(--color-top-bg);
}

body.home-page {
  background-color: var(--color-surface);
}

/* Scroll reveal matches the reference APP Shields page's default AOS
   fade-up values: 100px travel, 400ms duration, and `ease`. The
   JavaScript-set root class keeps content visible when scripting is
   unavailable; reduced-motion users also see the final state immediately. */
.home-reveal-enabled [data-home-reveal] {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  will-change: opacity, transform;
}

.home-reveal-enabled [data-home-reveal].home-reveal--visible {
  opacity: 1;
  /* Release the compositor layer after the fade completes. Keeping an
     identity transform on this ancestor makes Safari occasionally drop
     the marquee's own continuously transformed logo tracks after an
     적용방법 tab changes the wrapper height. */
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .home-reveal-enabled [data-home-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.home-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /* 144px top, not 112px -- verified directly against zeplin-raw/{pc,
     tablet}-main.json's own `All Content Wrap` children: every single
     section-to-section transition (hero->제품군, 제품군->독보적 기술, ...
     all the way through ->적용방법) measures exactly 144px at *both*
     breakpoints, 6-for-6, not a value that only happens to look close.
     Sections render flush against each other (no separate margin), so
     this padding-top is the entire gap. */
  padding-top: 144px;
  /* max(), not a flat 24px -- `viewport-fit=cover` (base.html) already
     lets this page's own background extend edge-to-edge behind the
     notch/rounded-corner safe areas on purpose, but that means actual
     *content* needs its own safe-area padding or it renders underneath
     that same cutout -- real report, phone landscape, text/images
     visibly obscured at the left edge. `.public-top` already does this
     (public-top.css); every `.home-section` needed the same treatment,
     since this one rule drives the page's own horizontal gutter site-
     wide. Portrait's own safe-area-inset-left/right is 0 on every real
     device, so `max(24px, 0)` = 24px there, unchanged from before. */
  padding-right: max(24px, env(safe-area-inset-right));
  padding-left: max(24px, env(safe-area-inset-left));
}

.home-section-title {
  margin: 0 0 56px;
  font-family: var(--font-family);
  font-size: 40px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-align: center;
}

/* APP Shields 제품군 -- 3-card accordion, one product expanded at a time.
   Default: Android expanded (Zeplin annotation "기본 : android sdk
   보이게"). Hover a collapsed card to expand it, per the annotation
   "Hover 시 내용 표시 / 열려있는 내용은 닫힘" -- home.js swaps
   `.home-product-card--expanded` between cards on `mouseenter` for pointer
   devices and click/tap for touch devices. */
.home-products-row {
  display: flex;
  gap: 24px;
  height: 460px;
}

.home-product-card {
  position: relative;
  flex: 0 0 100px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-home-card-collapsed-bg);
  cursor: pointer;
  transition:
    flex-basis 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease;
}

.home-product-card:focus-visible {
  outline: none;
}

.home-product-card-label {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Center on the card's true midpoint (both axes) before rotating --
     rotating around any other anchor (e.g. a `top: 24px` starting box)
     swings part of the text outside that box, and with the card's own
     `overflow: hidden` that silently clips characters instead of erroring
     (caught from a real screenshot: "PureAPP SDK" rendered as "reAPP
     SDK"). translate(-50%,-50%) first, so rotate(90deg) always pivots on
     the exact center regardless of the text's own measured width. */
  transform: translate(-50%, -50%) rotate(90deg);
  white-space: nowrap;
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  opacity: 1;
  transition: opacity 0.18s ease 0.2s;
}

.home-product-card--expanded .home-product-card-label {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

/* The illustration is never a full-bleed cover fill -- every breakpoint's
   own export (pc/tablet/mobile-main.json) shows it at its native 675x460
   size, right-anchored, with a `Gradient_Area` fading it into the card's
   solid accent color toward the text side. An earlier pass used plain
   `object-fit: cover` across the whole card, which pushed the
   illustration's own decorative icons up behind the title text -- caught
   from a real Mobile screenshot comparison against the design export. */
.home-product-card-bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.home-product-card--expanded .home-product-card-bg-wrap {
  opacity: 1;
  transition: opacity 0.35s ease 0.08s;
}

.home-product-card-bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

.home-product-card-gradient {
  position: absolute;
  inset: 0;
}

.home-product-card--android.home-product-card--expanded { background: var(--color-home-android-bg); }
.home-product-card--ios.home-product-card--expanded { background: var(--color-home-ios-bg); }
.home-product-card--pureapp.home-product-card--expanded { background: var(--color-home-pureapp-bg); }

.home-product-card--android .home-product-card-gradient { background: linear-gradient(to left, transparent 0%, var(--color-home-android-bg) 60%); }
.home-product-card--ios .home-product-card-gradient { background: linear-gradient(to left, transparent 0%, var(--color-home-ios-bg) 60%); }
.home-product-card--pureapp .home-product-card-gradient { background: linear-gradient(to left, transparent 0%, var(--color-home-pureapp-bg) 60%); }

.home-product-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* `flex-start`, not `space-between` -- Zeplin's own Text Wrap is a
     fixed 281px tall block (badge 43 + 24px gap + title 34 + 16px gap +
     desc 54 + 40px gap + checks 70 = 281, confirmed identical at PC and
     Tablet), sitting inside a much taller 460px card with real leftover
     space below it -- not stretched to fill the card via auto-
     distributed flex gaps. `space-between` inflated the 24/16/40px gaps
     by however much slack was left in the card (~60-70px extra),
     pushing the title/desc/checks well below their real Zeplin
     position. Mobile's own override already correctly used `flex-
     start` -- this base rule (shared by PC and Tablet) was the one
     still wrong. */
  justify-content: flex-start;
  height: 100%;
  padding: 56px 48px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.24s ease,
    visibility 0s linear 0.24s;
}

.home-product-card--expanded .home-product-card-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.25s ease 0.16s,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    visibility 0s linear;
}

.home-product-card-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 43px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
}

.home-product-card--android .home-product-card-badge { background: var(--color-home-android-accent); }
.home-product-card--ios .home-product-card-badge { background: var(--color-home-ios-accent); }
.home-product-card--pureapp .home-product-card-badge { background: var(--color-home-pureapp-accent); }

.home-product-card-title {
  margin: 24px 0 0;
  max-width: 391px;
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-product-card-desc {
  margin: 16px 0 0;
  max-width: 391px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

.home-product-card-checks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 40px, matching the exact gap Zeplin's own Text Wrap shows after the
     description text (was implicitly relying on `justify-content:
     space-between`'s auto-distributed spacing instead of a real value --
     see `.home-product-card-content`'s own comment). Mobile keeps its
     own already-correct 24px override below. */
  margin-top: 40px;
}

.home-product-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.02em;
}

.home-product-check-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.home-product-check-label {
  font-weight: 500;
  color: var(--color-text-primary);
}

.home-product-check-value {
  font-weight: 400;
  color: var(--color-text-muted);
}

.home-products-footnote {
  margin: 24px 0 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--color-text-faint);
  /* `left`, not `center` -- confirmed directly against both PC and
     Tablet's own raw text layer style (`textAlign: "left"` in
     zeplin-raw/{pc,tablet}-main.json), not a value that only applies at
     Mobile -- Mobile's own override already had this right, the shared
     base rule (PC/Tablet) didn't. Reported directly by the user. */
  text-align: left;
}

@media (min-width: 1200px) {
  /* The Desktop handoff's section Content is exactly 1280px wide at
     1920px. Keep the shared 24px responsive gutters outside that frame,
     rather than subtracting them from it. */
  .home-products-section {
    max-width: 1328px;
  }

  .home-products-row {
    gap: 16px;
  }

  /* Zeplin pins every collapsed label 32px below the card top. Vertical
     writing preserves the current clockwise text orientation while
     exposing the label's real 33px x content-height box, so it can be
     top-aligned directly instead of being rotated around the card center. */
  .home-product-card-label {
    top: 32px;
    left: 50%;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: translateX(-50%);
  }

  .home-product-card--expanded {
    /* 100% minus two 100px collapsed cards and two 16px gaps. */
    flex-basis: calc(100% - 232px);
  }
}

@media (max-width: 1199px) {
  .home-products-row {
    flex-direction: column;
    height: auto;
  }

  .home-product-card {
    flex: none;
    height: 80px;
  }

  .home-product-card--expanded {
    height: 460px;
  }

  .home-product-card-label {
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Tablet cards are separated by the 16px guide interval; the footnote
     then begins one 24px interval after the final collapsed card. */
  .home-products-row {
    gap: 16px;
  }

  .home-products-footnote {
    margin-top: 24px;
    line-height: 24px;
  }
}

@media (max-width: 767px) {
  /* Mobile section frame shared by the home-page content sections. The
     export consistently uses a 16px page inset and 104px between the end
     of one section's content and the next section title. */
  .home-section {
    padding-top: 104px;
    /* max(), not a flat 16px -- same landscape safe-area reasoning as
       the base rule's own comment. Real notched-phone landscape widths
       practically never land under 768px, but this keeps the pattern
       consistent for whatever narrow/short case does. */
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .home-section-title {
    margin-bottom: 40px;
    font-size: 28px;
  }

  /* Mobile product List: 463px selected card + two 64px collapsed cards,
     separated by 8px, for the export's exact 607px Box Wrap. */
  .home-products-row {
    gap: 8px;
  }

  .home-product-card {
    height: 64px;
  }

  .home-product-card--expanded {
    height: 463px;
  }

  .home-product-card-content {
    justify-content: flex-start;
    /* Zeplin Box_Selected: 32px top + 271px Text Wrap + 160px bottom
       = the card's exact 463px height. Keep the bottom space explicit
       even though the fixed card height arrives at the same geometry. */
    padding: 32px 24px 160px;
  }

  .home-product-card-badge {
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 24px;
  }

  .home-product-card-title {
    margin-top: 24px;
    font-size: 22px;
  }

  .home-product-card-desc {
    margin-top: 16px;
    font-size: 16px;
  }

  .home-product-card-checks {
    gap: 16px;
    margin-top: 24px;
  }

  .home-product-check {
    font-size: 16px;
    line-height: 24px;
  }

  .home-product-card-label {
    font-size: 18px;
    line-height: 27px;
  }

  .home-products-footnote {
    margin-top: 16px;
    font-size: 15px;
    line-height: 150%;
    text-align: left;
  }

  /* Mobile's own Box_Selected (zeplin-raw/mobile-main.json) stretches the
     illustration to the card's full width instead of anchoring it to the
     right, and anchors it to the *bottom* instead -- the Gradient_Area
     fades vertically (transparent at the bottom, opaque at the top) here,
     not horizontally like PC/Tablet. */
  .home-product-card-bg {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  .home-product-card--android .home-product-card-gradient { background: linear-gradient(to top, transparent 0%, var(--color-home-android-bg) 45%); }
  .home-product-card--ios .home-product-card-gradient { background: linear-gradient(to top, transparent 0%, var(--color-home-ios-bg) 45%); }
  .home-product-card--pureapp .home-product-card-gradient { background: linear-gradient(to top, transparent 0%, var(--color-home-pureapp-bg) 45%); }
}

@media (prefers-reduced-motion: reduce) {
  .home-product-card,
  .home-product-card-label,
  .home-product-card-bg-wrap,
  .home-product-card-content,
  .home-product-card--expanded .home-product-card-bg-wrap,
  .home-product-card--expanded .home-product-card-content {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

.home-hero {
  position: relative;
  width: 100%;
  /* Annotation (pc-main.json, layer "가로 : width 100% 세로 : 뷰포트로
     계산 / 87.89vh") is an explicit hard rule: this section's height must
     track the viewport, not render at a fixed pixel height. */
  height: 87.89vh;
  min-height: 640px;
  overflow: hidden;
  /* Column, not `align-items: center` alone -- `.home-hero-content` and
     `.home-hero-orbit-wrap` are real flex siblings now (see both rules'
     own comments) so the flex box itself divides the available height
     between them and neither can encroach on the other, however short
     the viewport gets. Both `.home-hero-video` and `.home-hero-deco--
     mobile` stay `position: absolute` and are unaffected either way. */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-top-bg);
}

.home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-deco {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

/* One shared coordinate space for the arc artwork + 2 icon badges AND
   the 5 floating status pills below -- Zeplin's own "Text Area" (pill +
   dotted line + dot) groups sit *above* `img_main_deco`'s own bounds
   (e.g. Tablet's tallest pill starts at content-y 762, the arc art itself
   only starts at 879), but both are positioned within the same overall
   hero `Content` frame and both bottom out flush with the hero's own
   bottom edge (confirmed against zeplin-raw/{pc,tablet}-main.json: PC
   cluster is exactly 1024-678=346px tall, Tablet 1024-762=262px). This
   wrapper reproduces that full cluster height, bottom-anchored/centered
   the same way the old (art-only) box was, so every percentage position
   below -- pills, lines, dots, and the unchanged art+icon-badge numbers
   -- shares one consistent scale as the window resizes, instead of
   drifting relative to each other. */
.home-hero-orbit-wrap {
  /* `position: relative`, not `absolute` -- this is a real flex sibling
     of `.home-hero-content` now (`.home-hero`'s own comment), so the
     flex box divides height between the two instead of both claiming
     the section's full height independently. `position: relative` still
     gives its own absolutely-positioned children (the art, icon badges,
     and 5 pills below) the same containing block an `absolute` wrapper
     would have -- only the wrapper's *own* placement changed, not how
     its children resolve their percentages against it. Horizontal
     centering now comes from `.home-hero`'s `align-items: center`
     instead of `left: 50%` + `transform`. */
  position: relative;
  flex: none;
  /* Sized from a single `width` expression, with `height` left `auto` to
     derive purely from `aspect-ratio` -- NOT `height: <vh>` + `max-width:
     100%` + `aspect-ratio` together, which was the original approach and
     turned out to not reliably reconcile in real browsers: once a
     narrower viewport made `max-width: 100%` clamp the width below what
     the explicit vh height implied, the height stayed put instead of
     shrinking back down to match, silently breaking the aspect ratio
     (confirmed directly -- the 2 icon-badge circles and all 5 dots
     rendered as visibly non-square ellipses at in-between widths like
     1300px, though not at 1920px or 1500px, since those two happened to
     still be wide enough for the vh-derived width to already fit under
     100% -- reported directly by the user, screenshot). `min(<height-
     driven-width-in-vh>, 100%)` picks whichever constraint is tighter
     for `width` alone, and lets `aspect-ratio` derive a *matching*
     height from that already-resolved value every time, so the box can
     never end up with a width/height pair that violates its own ratio.
     164.794vh = 346/1024*87.89vh (the hero's own height fraction this
     cluster occupies) converted to the equivalent width via this
     cluster's own 1920/346 ratio -- same underlying intent as the
     original height-first approach (shrink in lockstep with the hero's
     `87.89vh`, not just with window width), just expressed as the one
     dimension that's actually safe to constrain directly here. */
  width: min(164.794vh, 100%);
  /* 1920, not 1750 -- the arc art itself is only 1750 wide, but Zeplin's
     own Text Area (pill) coordinates are reported against the *true*
     1920px `Content` frame, which insets the art by 85px on each side.
     Building this wrapper on the narrower 1750 basis (an earlier
     approach) collapsed that 85px margin away entirely once the window
     dropped below 1750px wide -- with nowhere left to go, the two
     outermost pills (소스코드 난독화, GS인증 1등급) clipped against
     `.home-hero`'s own `overflow: hidden` (reported directly, screenshot
     from the user). Building on the real 1920 frame keeps that margin
     alive at every scale instead of just at the native width. */
  aspect-ratio: 1920 / 346;
  pointer-events: none;
  /* Establishes this box as a query container so the pill text/padding
     and icon-badge glyphs below can be sized in `cqw` (% of *this*
     element's own rendered width) instead of fixed px -- percentage
     left/top alone only fixes *position* drift; without this, every
     pill/icon stayed full native size while its anchor point kept
     scaling down, so they started overlapping each other at any width
     narrower than the tier's own native 1750px/920px (reported directly
     against a live resize test, not visible at the native breakpoint
     canvas size screenshots alone). */
  container-type: inline-size;
}

/* The arc art + 2 icon badges keep their own pre-existing 1750x220
   sub-box (unchanged icon-badge numbers below, still relative to *this*
   box) -- just inset within the wider 1920-basis wrapper above (85/1920,
   1750/1920) instead of filling it edge to edge, matching the real
   85px margin `.home-hero-orbit-wrap`'s own comment explains. Bottom-
   anchored the same way it was before this wrapper existed. */
.home-hero-orbit-art {
  position: absolute;
  left: 4.427%;
  bottom: 0;
  width: 91.146%;
  aspect-ratio: 1750 / 220;
}

.home-hero-orbit-img {
  display: block;
  width: 100%;
}

.home-hero-orbit-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Icon glyph centered on a real frosted-glass circle -- not baked into
   the orbit vector (images/home/img-main-deco{,-t}.svg, arcs/dots only,
   same as Mobile's own img-main-deco-m.svg) -- so the badge stays legible
   over the moving hero video by blurring whatever's directly behind it rather
   than covering it with a flat stamped color. Values are the exact
   `Round`/`Frame 48098098` layer spec in zeplin-raw/{pc,tablet}-main.json
   (identical at both breakpoints): `fills: rgba(0,0,0,0.1)` +
   `blur: { radius: 40, type: "background" }`, i.e. a CSS
   `backdrop-filter`, not an opaque fill color. */
.home-hero-orbit-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.home-hero-orbit-badge img {
  display: block;
  /* 24px at the wrap's own native 1750px width (24/1750*100) -- fixed px
     would stop fitting the circle once `.home-hero-orbit-badge`'s own
     percentage width/height (above) shrinks below it on a narrower
     window; cqw keeps both scaling together. Tablet's own 920-basis
     value is set in the 1199px block below. */
  width: 1.371cqw;
  height: 1.371cqw;
}

/* Percentages, not the raw px rect Zeplin reports -- `.home-hero-orbit-art`
   itself already scales fluidly below its 1750px native width
   (`max-width: 100%`), so a fixed-px badge position only ever lined up
   with the orbit artwork at that exact native width and visibly drifted
   off the dotted arcs at any narrower window size in between (reported
   directly against a live resize, not caught by fixed-breakpoint
   screenshots). Each value is the same Zeplin rect divided by its own
   1750x220 container -- not a proportional scale-down from Tablet's own
   numbers below, since Tablet's 64px->56px badge shrink doesn't match
   its 1750px->920px artwork shrink ratio (a real, independent
   per-breakpoint design choice, not a bug) -- so `width`/`height` stay
   percentages of two *different* base container sizes per breakpoint. */
.home-hero-orbit-badge--stats {
  left: 30.514%;
  top: 40.909%;
  width: 3.657%;
  height: 29.091%;
}

.home-hero-orbit-badge--shield {
  left: 67.886%;
  top: 21.818%;
  width: 3.657%;
  height: 29.091%;
}

.home-hero-deco--mobile {
  display: none;
  width: 100%;
  aspect-ratio: 360 / 106;
  overflow: hidden;
}

/* Mobile's dedicated Zeplin orbit stays vector-sharp. The two icon badges
   are independent layers, as they are at Tablet, rather than the old
   img-main-deco-m-icons raster with both circles baked into it. */
.home-hero-deco-orbit {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.home-hero-deco-badge {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.333%;
  height: 45.283%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.home-hero-deco-badge--stats {
  top: 0;
  left: 14.167%;
}

.home-hero-deco-badge--shield {
  top: 27.358%;
  left: 72.5%;
}

.home-hero-deco-badge img {
  display: block;
  width: 41.667%;
  height: 41.667%;
}

.home-hero-content {
  position: relative;
  /* `flex: 1` claims whatever height `.home-hero-orbit-wrap` (a real flex
     sibling below, own size driven by vh) doesn't -- previously this was
     the *only* in-flow flex item in `.home-hero` (the wrap was `position:
     absolute`, invisible to the flex box), so it always centered across
     the section's *full* height with no awareness of the wrap's own
     space needs. On anything short-but-wide (confirmed from 1199px width
     down at ~900px height and narrower) the two absolutely-positioned
     layers could genuinely overlap -- the pills sitting on top of the
     buttons, not just visually close. `min-height: 0` is required for a
     flex item to actually shrink below its content size instead of
     forcing the row taller than the parent (the flexbox default is
     `min-height: auto`, which ignores `flex: 1` entirely for this). Its
     own `justify-content: center` re-centers the title/subtitle/buttons
     stack within whatever *smaller* space it actually gets, instead of
     the section as a whole. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 794px;
  /* max(), not a flat 24px each side -- same landscape safe-area reasoning
     as .home-section's own comment; this centered title/subtitle/button
     stack doesn't route through .home-section at all, so it needed its
     own copy of the fix. */
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  text-align: center;
}

.home-hero-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 64px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: normal;
}

.home-hero-subtitle {
  margin: 0;
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* The trailing product phrase is bold; the remainder stays regular. */
.home-hero-subtitle strong {
  font-weight: 700;
}


.home-hero-btns {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Button component. Both hero buttons are the same gold/translucent-white
   pair used everywhere else on this page they appear (적용방법's tabs
   aside) -- corrected from an earlier white/solid-black guess after
   comparing a built screenshot against the real PC/Tablet/Mobile exports,
   which all three use this exact same fill pair (zeplin-raw/{pc,tablet,
   mobile}-main.json's own `Btns` group).

   Corner radius is NOT a pill/stadium shape at any breakpoint -- checked
   each button instance's own `borderRadius` directly: 12px at PC/Tablet,
   8px at Mobile (a real, smaller value there, not just visually smaller
   on a narrower button). An earlier pass used `var(--radius-pill)`
   (1000px) throughout, which reads as a completely different button
   shape once you compare it against the real export side by side. The
   White/ghost variant also has a real 1px `rgba(255,255,255,0.25)`
   border in the export at every breakpoint, which the earlier pass
   dropped entirely. */
.home-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: none;
  border-radius: 12px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  cursor: pointer;
}

.home-hero-btn-gold {
  background: var(--color-home-cta-bg);
  color: var(--color-text-primary);
}

.home-hero-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-text-inverse);
}

.home-hero-btn-icon {
  width: 16px;
  height: 16px;
}

/* Zeplin's button guide uses the same fill for Hover and Pressed. Keep
   hover pointer-only so a touch release cannot leave a sticky hover state;
   :active supplies the transient pressed state for every input type. */
@media (hover: hover) and (pointer: fine) {
  .home-hero-btn-gold:hover {
    background: var(--color-home-primary-button-active);
  }

  .home-hero-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.25);
  }
}

.home-hero-btn-gold:active {
  background: var(--color-home-primary-button-active);
}

.home-hero-btn-ghost:active {
  background: rgba(255, 255, 255, 0.25);
}

/* Each of the 5 status pills is its own dotted line down to a small dot
   sitting on the arc art -- Zeplin's real "Text Area" groups (Text Box +
   Line + Round), not the plain centered row this used to be. `.home-hero-
   float-tag` itself carries no position of its own; `pill`/`line`/`dot`
   each position directly against `.home-hero-orbit-wrap` (the nearest
   positioned ancestor) using percentages of that same 1750x346 (PC) /
   920x262 (Tablet) coordinate space the arc art and icon badges already
   use, so everything scales together with no drift at any width. */
.home-hero-float-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  /* Fixed px, matching every other piece of hero typography
     (`.home-hero-title`/`.home-hero-subtitle`/`.home-hero-btn` all stay
     flat within a tier, only switching at the 767/1199px breakpoints,
     never scaling continuously in between -- see the PC/Tablet title
     rule's own comment). An earlier pass made this `cqw`-based instead
     to stop adjacent pills colliding as the window narrowed, but that
     meant the pills kept visibly *shrinking* through the whole PC/
     Tablet range, unlike anything else on this page -- a real
     regression the user caught directly. Center-anchoring each pill on
     its dot (this file's own next comment block) turned out to already
     be enough room to prevent horizontal collisions on its own.
     `10px 24px` is PC's own real value, confirmed directly against its
     Text Box `layout.padding` (never actually checked before -- an
     earlier pass assumed it matched Tablet's own 8px/16px since both
     share the same 18px font-size, but the two breakpoints' padding is
     genuinely different: 47px total pill height at PC, 43px at Tablet.
     Tablet's own 8px/16px override is set in the 1199px block below. */
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  /* Real frosted-glass pill per Zeplin's own Text Box layer spec
     (`fills: rgba(255,255,255,0.2)` + `blur: { radius: 20, type:
     "background" }`) -- no border in the design at all; the earlier flat
     centered-row version had invented one (`1px solid rgba(255,255,255,
     .25)`) that doesn't exist in the actual layer data. */
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
}

.home-hero-float-line {
  position: absolute;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
}

.home-hero-float-dot {
  position: absolute;
  /* Fixed 8x8px -- Zeplin's own Round layer is exactly 8x8 at both
     breakpoints (not a value that differs PC vs Tablet the way the 2
     icon badges do), so there's no need to size it as a percentage of
     the scaling container at all. An earlier pass used percentage
     width/height instead (tracking `.home-hero-orbit-wrap`'s own scale,
     same idea as the icon badges), but that made it visibly render as a
     non-circular ellipse at in-between window widths -- the wrapper's
     own width/height stopped reconciling to the same ratio once
     `max-width: 100%` clamped one axis independently of the other (see
     `.home-hero-orbit-wrap`'s own comment on the underlying bug, now
     fixed there too) -- and even with that fixed, a plain fixed px size
     is simpler and removes any dependency on the ratio holding exactly.
     Only its `left`/`top` position needs to track the artwork (so the
     dot still lands on the right point on the arc); its own size does
     not. */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

@media (min-width: 1200px) {
  /* Let the desktop hero grow to the measured title/content/orbit stack.
     Compact windows can then scroll rather than crop any part of it. */
  .home-hero {
    height: auto;
    min-height: 0;
  }

  /* Zeplin's Title + Btns frame is 794px wide. Its visible children
     begin at y=(viewport - 422px frame)/2: title 180px, 16px gap,
     subtitle 66px, 56px gap, then the 56px buttons. The frame's final
     48px is intentionally empty. */
  .home-hero-content {
    box-sizing: border-box;
    flex: none;
    min-height: auto;
    width: min(794px, calc(100% - 48px));
    max-width: none;
    justify-content: flex-start;
    gap: 16px;
    /* 177px from the fixed header's lower edge to the title. */
    padding: calc(60px + env(safe-area-inset-top) + 177px) 0 0;
  }

  .home-hero-subtitle {
    width: min(527px, 100%);
  }

  .home-hero-btns {
    margin-top: 40px;
    /* home.js adds the absolute pill overhang so the visible distance to
       the true highest pill remains 87px at every desktop size. */
    margin-bottom: calc(87px + var(--home-hero-orbit-overhang, 0px));
  }
}

@media (max-width: 1199px) {

  /* The refreshed Tablet artwork is 970x145. Keep the shared 262px
     vertical coordinate space for pills but size it by available width,
     so their fixed text never collapses together on short tablets. */
  .home-hero-orbit-wrap {
    width: min(970px, calc(100% - 48px));
    aspect-ratio: 970 / 262;
  }

  /* Tablet's Content frame has no PC-style inset -- it's already the
     same 920px width as the arc art itself, so this resets the PC
     rule's `left`/`width` back to filling the wrapper edge to edge. */
  .home-hero-orbit-art {
    left: 0;
    width: 100%;
    aspect-ratio: 970 / 145;
  }

  /* cqw values recomputed against Tablet's own 920px container width
     (24/920 *100) -- same reasoning as the PC rule above, just a
     different basis once `.home-hero-orbit-wrap` itself switches to
     `width: 920px`. */
  .home-hero-orbit-badge img {
    width: 2.609cqw;
    height: 2.609cqw;
  }

  /* Tablet's own real padding (confirmed against its Text Box layer
     spec) -- genuinely different from PC's 10px/24px, not a shared
     value, even though both breakpoints use the same 18px font-size.
     43px total pill height here vs PC's 47px. */
  .home-hero-float-pill {
    padding: 8px 16px;
  }

  /* Same percentage-not-px reasoning as the PC rule above, against
     Tablet's own 920x145 container. */
  .home-hero-orbit-badge--stats {
    left: 25.326%;
    top: 16.552%;
    width: 6.087%;
    height: 38.621%;
  }

  .home-hero-orbit-badge--shield {
    left: 71.522%;
    top: 48.966%;
    width: 6.087%;
    height: 38.621%;
  }

}

/* Tablet must remain a vertically flowing hero at compact heights: the
   fixed header overlays the page, while the title/content/orbit need their
   full measured space below it. Let the hero grow and scroll instead of
   re-centering this stack into a 87.89vh box and clipping its title. */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-hero {
    height: auto;
    min-height: 0;
  }

  .home-hero-content {
    flex: none;
    min-height: auto;
    justify-content: flex-start;
    /* 177px from the fixed bar's lower edge to the title, including an
       iOS safe-area inset when present. */
    padding-top: calc(60px + env(safe-area-inset-top) + 177px);
  }

  .home-hero-btns {
    /* The topmost pill can protrude above its normal-flow wrapper by up
       to 14px as the tablet orbit narrows. Compensate for that overhang
       so the visible button-to-pill distance remains exactly 87px. */
    margin-bottom: clamp(87px, calc(140.52px - 5.257vw), 101px);
  }
}

/* A phone rotated to landscape is often *wider* than 767px (iPhone 14 Pro:
   852px), so it falls straight into the Tablet pill layout above instead
   of Mobile's own `display: none` treatment for this whole cluster --
   but it's nowhere near as *tall* as a real tablet even in landscape (a
   phone: <=430px; an iPad, even landscape: >=744px). The actual bug isn't
   the section running out of room -- `.home-hero` already has a 640px
   `min-height` floor (base rule, above) -- it's that `.home-hero-orbit-
   wrap`'s own `width: min(78.964vh, 100%)` derives its size from the raw
   *viewport* height, completely independent of how much space its own
   flex parent actually has. At 852x393 that's 78.964% of 393px =~ 310px
   wide =~ 88px tall once aspect-ratio applies -- crushed to a third of
   its native 262px regardless of the 640px+ the section itself could
   provide -- so growing the section's height alone (an earlier, wrong
   fix here hid the whole cluster instead, per explicit user pushback)
   would not have fixed it either. `width: 100%` here makes the wrap size
   itself off the space it's actually given (letting `aspect-ratio`,
   already set correctly by the active PC/Tablet width-tier block above,
   derive height from that real width) instead of an unrelated viewport
   measurement; `height: auto` lets `.home-hero` grow past its 640px
   floor if the now-properly-sized content needs more, same "min-height,
   let the page scroll, never crop" approach already used on the login
   page (`.login-bg { min-height: 100dvh }`). `min-width: 768px` scopes
   this to the range the orbit/pills render in at all -- Mobile already
   correctly hides the whole cluster below 767px by design, untouched
   here. */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .home-hero {
    height: auto;
    min-height: 680px;
  }

  /* `justify-content: flex-start` + an explicit `padding-top`, not the
     base rule's `justify-content: center` left as-is -- centering leaves
     the title's actual top clearance dependent on the *total* resolved
     height of both this box and `.home-hero-orbit-wrap` (itself width-
     driven, so it varies with viewport width), which turned out not to
     be a reliable enough guarantee: fine in this session's own emulated
     testing (852-1024px width, min-height bumped to 680px), but a real
     device report showed the title's ascenders still clipped against
     `.home-hero`'s `overflow: hidden` regardless -- no Pretendard
     `@font-face` means the fallback font's own ascender metrics render
     taller than its computed line-height box, and *some* real viewport/
     toolbar-visibility combination left less centering slack than every
     configuration tested here did. A fixed `padding-top` guarantees the
     title never starts closer than this to the box's own top edge,
     independent of the box's total height, the orbit-wrap's width-
     derived size, or how any centering math resolves. */
  .home-hero-content {
    justify-content: flex-start;
    /* 80px, not 40px -- the 40px value only guaranteed enough clearance
       to stop the title's ascenders clipping against `overflow: hidden`;
       real user feedback wanted genuine breathing room below the top bar,
       not just the bare minimum. */
    padding-top: 80px;
  }

  /* Base rule's `margin-top: 40px` (PC/Tablet) has no bottom margin of its
     own -- fine when the orbit-wrap's badges start further down on their
     own vh-derived offset, but here the wrap is now width-derived and
     sits close beneath, so the button row read as almost touching the
     first row of pills. A fixed bottom margin, not spacing pulled from
     the orbit-wrap side, since the wrap's own internal badge offsets are
     already tuned per width-tier and shouldn't be touched just to open a
     gap above them. */
  .home-hero-btns {
    margin-bottom: 120px;
  }

  .home-hero-orbit-wrap {
    /* Not a flat 100% -- unlike `.home-hero-content` (already fixed for
       safe-area), this wrap had zero inset of its own, so the pills
       (positioned as percentages of *this* box's own width) could land
       right at, or under, the notch on whichever side it's on. `.home-
       hero`'s own `align-items: center` centers this narrower box for
       free once its width shrinks; every pill's percentage position
       shifts inward with it since they're all relative to this same
       (now-inset) width, not the true viewport edges. Symmetric on both
       sides (the larger of the two real insets, not each side's own --
       simpler and still always safe, at the cost of some unused space on
       whichever side doesn't actually need it) since flexbox auto-
       centering can't apply asymmetric margins on its own. */
    width: calc(100% - 2 * max(24px, env(safe-area-inset-left), env(safe-area-inset-right)));
  }
}

@media (max-width: 767px) {
  /* Mobile's hero occupies the full 760px design viewport. The 87.89vh
     value above comes from the PC annotation and shortened a 760px mobile
     viewport to 668px, pulling the bottom decoration 92px too high. */
  .home-hero {
    height: 100vh;
    height: 100dvh;
  }

  /* The mobile content stack is a true centered layer over the full hero.
     Its internal spacing remains 16px title-to-subtitle plus the button
     group's 24px top margin (40px total below the subtitle). */
  .home-hero-content {
    position: absolute;
    inset: 0 0 48px;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
    gap: 16px;
    justify-content: center;
  }

  .home-hero-title {
    font-size: 36px;
  }

  .home-hero-subtitle {
    font-size: 18px;
  }

  /* Mobile's own Btns group (zeplin-raw/mobile-main.json) is a compact
     295x48 auto-width row, not a stacked full-width pair -- an earlier
     guess stacked these before the mobile export existed to check against.
     Padding/gap corrected to the export's own exact measurements: 184px-
     wide brochure button minus its 16px icon and 112px text leaves 24px
     padding each side with an 8px icon-text gap (not the earlier 20px/6px
     guess); the two buttons themselves also sit 8px apart, not 16px. */
  .home-hero-btn {
    height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 16px;
    gap: 8px;
  }

  .home-hero-btns {
    gap: 8px;
    margin-top: 24px;
  }

  /* The 5 status pills are not part of the Mobile hero at all --
     confirmed directly against zeplin-raw/mobile-main.json's own hero
     `Content` group, which has no badge layer whatsoever (Tablet's own
     export does still have them, so this is Mobile-only). Hiding the one
     wrapper takes the arc art + 2 icon badges + all 5 pills with it. */
  .home-hero-orbit-wrap {
    display: none;
  }

  .home-hero-deco--mobile {
    display: block;
    /* The new 520px artwork is centered and intentionally clipped by
       narrower phones, keeping the orbit at its designed scale. */
    width: 520px;
    height: 106px;
    aspect-ratio: auto;
    bottom: 0;
  }

  /* The new export adds 80px on both sides of the former 360px canvas.
     Shift the independently-rendered badges by that same inset. */
  .home-hero-deco-badge {
    width: 48px;
    height: 48px;
  }

  .home-hero-deco-badge--stats {
    top: 0;
    left: 131px;
  }

  .home-hero-deco-badge--shield {
    top: 29px;
    left: 341px;
  }
}

/* 독보적인 기술로 모바일 애플리케이션을 보호합니다 -- 4 icon+text features,
   divided by vertical lines. Icon box default state is a plain
   `--color-surface-muted`-toned circle with the icon's own dark variant;
   hover swaps to a gold gradient (sampled directly from the export's own
   "Icon_Box_마우스 Hover 시" instance fill, not guessed) with the white
   icon variant on top -- CSS-only via two stacked `<img>`s, no JS. */
.home-features-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.home-feature {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0;
  max-width: 283px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.home-feature + .home-feature {
  border-left: 1px solid var(--color-border-light);
}

.home-feature-icon-box {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-feature-icon-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-home-feature-icon-hover-start), var(--color-home-feature-icon-hover-end));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.home-feature:hover .home-feature-icon-box::before {
  opacity: 1;
}

.home-feature-icon {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
}

.home-feature-icon-dark {
  display: block;
}

.home-feature-icon-wh {
  display: none;
}

.home-feature:hover .home-feature-icon-dark {
  display: none;
}

.home-feature:hover .home-feature-icon-wh {
  display: block;
}

.home-feature-title {
  /* 32px, not 24px -- confirmed identical at both PC and Tablet in the
     raw Zeplin data (Icon_Box bottom to Text Wrap top measures exactly
     32px at both breakpoints, not a value the earlier 24px guess ever
     matched). */
  margin: 32px 0 0;
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-feature-body {
  /* 10px, not 8px -- same confirmation as `.home-feature-title`'s own
     comment, identical at both breakpoints. */
  margin: 10px 0 0;
  white-space: pre-line;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

@media (min-width: 1200px) {
  /* Zeplin's Desktop Content is 1280px wide. As with the product
     accordion above, keep the shared 24px responsive gutters outside
     that native frame instead of subtracting them from it. */
  .home-features-section {
    max-width: 1328px;
  }

  /* Native row: 4 x 283.25px feature columns plus 3 x 49px channels.
     Each channel is 24px + a 1px divider + 24px. Fractional columns let
     the same composition contract cleanly below the native width. */
  .home-features-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 49px;
  }

  .home-feature {
    max-width: none;
    padding: 0;
  }

  .home-feature + .home-feature {
    border-left: 0;
  }

  .home-feature + .home-feature::before {
    content: "";
    position: absolute;
    top: 23.5px;
    left: -25px;
    width: 1px;
    height: 140px;
    background: var(--color-border-faint);
  }
}

@media (max-width: 1199px) {
  .home-features-row {
    flex-wrap: wrap;
    gap: 40px 0;
  }

  .home-feature {
    flex: 1 1 50%;
    max-width: 50%;
  }

  .home-feature:nth-child(3) {
    border-left: none;
  }
}

/* Tablet only, not Mobile. Zeplin's 920px frame uses a 856px content
   width (32px page gutters), two 403.5px feature columns, and a 49px
   center channel. Each center divider is 140px tall and inset 23.5px
   within its row. The horizontal divider is two 336px segments with a
   104px center gap; its percentages below are resolved against the real
   403.5px columns. Mobile instead stacks a single column without lines. */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-features-section {
    /* max(), not a flat 32px -- same landscape safe-area reasoning as
       .home-section's own comment; this selector re-declares its own
       padding at this exact breakpoint, silently bypassing that fix. */
    padding-right: max(32px, env(safe-area-inset-right));
    padding-left: max(32px, env(safe-area-inset-left));
  }

  .home-features-row {
    position: relative;
    column-gap: 49px;
  }

  .home-features-row::before,
  .home-features-row::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 140px;
    background: var(--color-border-light);
    transform: translateX(-50%);
  }

  .home-features-row::before {
    top: 23.5px;
  }

  .home-features-row::after {
    top: 291.5px;
  }

  .home-feature {
    flex: 0 0 calc((100% - 49px) / 2);
    max-width: calc((100% - 49px) / 2);
  }

  .home-feature + .home-feature {
    border-left: 0;
  }

  .home-feature-icon-box {
    border-radius: 50%;
  }

  .home-feature:nth-child(3),
  .home-feature:nth-child(4) {
    /* The separator occupies 1px, followed by Zeplin's 40px gap before
       row 2. Together those require 41px of wrapper padding. */
    padding-top: 41px;
  }

  .home-feature:nth-child(3)::before,
  .home-feature:nth-child(4)::before {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    background: var(--color-border-light);
  }

  .home-feature:nth-child(3)::before {
    left: 9.914%;
    right: 6.816%;
  }

  .home-feature:nth-child(4)::before {
    left: 6.816%;
    right: 9.914%;
  }
}

@media (max-width: 767px) {
  .home-features-row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .home-feature {
    flex: none;
    width: 100%;
    max-width: none;
    padding: 0;
    border-left: none !important;
  }

  .home-feature-icon-box {
    border-radius: 50%;
  }

  .home-feature-title {
    font-size: 18px;
    line-height: 27px;
  }

  .home-feature-body {
    min-height: 46px;
    font-size: 15px;
    line-height: 22.5px;
  }
}

/* 검증된 품질로 신뢰를 제공합니다 -- PC and Tablet share an 840px-tall
   rounded card. The background belongs to that card, not to the section:
   on Zeplin's 920px Tablet frame the card is 856x840 at x:32, while the
   native 760x640 Lottie is centered inside it (48px side insets and
   100px top/bottom insets). The animation itself already bakes in every
   label, badge, and decorative connector, so separate DOM overlays would
   duplicate that content.

   Mobile is a real exception, not just a smaller version of the same
   thing: it uses its own compact `json_main_verified_product_m` (296x289)
   composition that does NOT bake in the 3 outer text rows -- confirmed
   via zeplin-raw/mobile-main.json, those are separate `Text` layers next
   to the animation only at this breakpoint. `.home-verified-card--mobile`
   (rounded off-white card, matching `img_main_verified_product_bg`'s own
   sizing there) + `.home-verified-mobile-rows` are real, hand-built
   markup shown only under 767px. */
.home-verified {
  position: relative;
  background: transparent;
}

.home-verified-card--desktop {
  position: relative;
  height: 840px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--color-surface-muted);
}

.home-verified-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-verified-bg--desktop {
  object-fit: fill;
}

.home-verified-bg--mobile {
  display: none;
}

.home-verified-stage {
  position: relative;
  z-index: 1;
}

.home-verified-stage--pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.home-verified-lottie {
  width: 100%;
  height: 100%;
  line-height: 0;
}

.home-verified-lottie svg {
  display: block;
}

.home-verified-stage--pc .home-verified-lottie {
  flex: none;
  width: min(760px, calc(100% - 96px));
  height: auto;
  aspect-ratio: 760 / 640;
}

.home-verified-card--mobile {
  display: none;
}

@media (min-width: 1200px) {
  .home-verified {
    /* Preserve the 1280px native card at 1920px while keeping the shared
       24px page gutters when Desktop narrows. A 1328px border box gives
       the native card its exact x=320 position without letting it touch
       either viewport edge near the 1200px breakpoint. */
    max-width: 1328px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-verified {
    /* max(), not a flat 32px -- same landscape safe-area reasoning as
       .home-section's own comment. */
    padding-right: max(32px, env(safe-area-inset-right));
    padding-left: max(32px, env(safe-area-inset-left));
  }
}

@media (max-width: 767px) {
  .home-verified-card--desktop {
    display: none;
  }

  .home-verified-card--mobile {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 617px;
    padding: 32px 16px;
    overflow: hidden;
    border-radius: 24px;
    background: transparent;
  }

  .home-verified-bg--mobile {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .home-verified-stage--mobile {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 296px;
    aspect-ratio: 296 / 289;
    margin: 0 auto;
  }

  .home-verified-mobile-rows {
    position: relative;
    z-index: 1;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .home-verified-mobile-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    height: 72px;
    min-height: 72px;
    padding: 0 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    white-space: pre-line;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
  }

  .home-verified-mobile-row-sub {
    font-size: 15px;
    font-weight: 400;
    line-height: 22.5px;
    color: var(--color-text-faint);
  }
}

/* 도입효과 / 기업의 핵심 자산을 보호하세요 -- 2-column layout (288px title
   left, 700px numbered list right). Zeplin's On component removes the
   row separator while applying the gray highlight and dark number circle;
   rows start Off and enter that state on hover, press, or tap selection. */
.home-effects-layout {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.home-effects-title-col {
  flex: 0 0 288px;
}

.home-effects-eyebrow {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.02em;
  color: var(--color-text-faint);
}

.home-effects-heading {
  margin: 16px 0 0;
  white-space: pre-line;
  font-family: var(--font-family);
  font-size: 40px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-effects-list {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 8px -- confirmed identical at PC and Tablet (each "Number + Text"
     row advances by exactly 104px in the raw Zeplin data, 96px row
     height + 8px gap, not touching edge-to-edge as the rows rendered
     with no gap declared at all here before). */
  gap: 8px;
  flex: 1 1 auto;
  padding-left: 48px;
  border-left: 2px solid var(--color-border-light);
}

.home-effects-row {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 96px;
  padding: 0 24px;
  border-radius: var(--radius-lg);
}

.home-effects-row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-surface-hover);
}

.home-effects-row:active,
.home-effects-row--active {
  background: var(--color-home-card-collapsed-bg);
}

.home-effects-row:active::after,
.home-effects-row--active::after {
  opacity: 0;
}

.home-effects-number {
  flex: none;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-surface-hover);
  border-radius: 50%;
  background: var(--color-nav-bg);
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-effects-row:active .home-effects-number,
.home-effects-row--active .home-effects-number {
  background: var(--color-top-bg);
  color: var(--color-text-inverse);
}

@media (hover: hover) {
  .home-effects-row:hover {
    background: var(--color-home-card-collapsed-bg);
  }

  .home-effects-row:hover .home-effects-number {
    background: var(--color-top-bg);
    color: var(--color-text-inverse);
  }

  .home-effects-row:hover::after {
    opacity: 0;
  }
}

.home-effects-label {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-effects-arrow {
  position: absolute;
  left: -9px;
  bottom: 0;
  width: 16px;
  height: 16px;
}

@media (min-width: 1200px) {
  /* Native Desktop Content is 1280px wide: a 288px title column at the
     left edge and a 700px list at the right edge, leaving a flexible
     292px center channel at 1920px. */
  .home-effects-section {
    max-width: 1328px;
  }

  .home-effects-layout {
    justify-content: space-between;
    gap: 0;
  }

  /* The list's 576px frame includes 32px above/below five 96px rows and
     four 8px row gaps. Its vertical line is inside the rows at x=47 so
     it passes through every 48px number circle centered at x=48. */
  .home-effects-list {
    box-sizing: border-box;
    flex: 0 0 700px;
    width: 700px;
    height: 576px;
    padding: 32px 0;
    border-left: 0;
  }

  .home-effects-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 1px;
    bottom: 1px;
    left: 47px;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--color-border-strong) 0 4px,
      transparent 4px 8px
    );
  }

  .home-effects-row {
    flex: none;
    width: 100%;
  }

  .home-effects-arrow {
    z-index: 0;
    left: 40px;
    bottom: 0;
  }
}

@media (max-width: 1199px) {
  .home-effects-layout {
    flex-direction: column;
    /* 56px, not 40px -- confirmed directly against Tablet's own raw
       Zeplin data (Title bottom to List top measures exactly 56px). */
    gap: 56px;
  }

  .home-effects-title-col {
    flex: none;
  }
}

/* Tablet's list is a full-width timeline below the title, not the PC
   list's indented right column. At the 920px handoff it is 856x576:
   32px top/bottom breathing room around five 96px rows with four 8px
   gaps. The dotted line sits at x=47 so it pierces the 48px number
   circles centered at x=48, and terminates in the real 16px arrow asset. */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-effects-section {
    /* max(), not a flat 32px -- same landscape safe-area reasoning as
       .home-section's own comment. */
    padding-right: max(32px, env(safe-area-inset-right));
    padding-left: max(32px, env(safe-area-inset-left));
  }

  .home-effects-title-col {
    width: 288px;
  }

  .home-effects-list {
    box-sizing: border-box;
    width: 100%;
    height: 576px;
    flex: none;
    padding: 32px 0;
    border-left: 0;
  }

  .home-effects-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 1px;
    bottom: 1px;
    left: 47px;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--color-border-strong) 0 4px,
      transparent 4px 8px
    );
  }

  .home-effects-row {
    flex: none;
    width: 100%;
    height: 96px;
    min-height: 96px;
  }

  .home-effects-arrow {
    z-index: 0;
    left: 40px;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .home-effects-eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  .home-effects-heading {
    margin-top: 12px;
    font-size: 28px;
    line-height: 39.2px;
  }

  .home-effects-list {
    box-sizing: border-box;
    width: 100%;
    height: 420px;
    padding: 24px 0;
    border-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .home-effects-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 2px;
    left: 33px;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--color-border-strong) 0 4px,
      transparent 4px 8px
    );
  }

  .home-effects-row {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    flex: none;
    width: 100%;
    height: 68px;
    min-height: 68px;
    padding: 16px;
    gap: 12px;
  }

  .home-effects-row::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 16px;
    height: 1px;
    background: var(--color-surface-hover);
  }

  .home-effects-row:active::after,
  .home-effects-row--active::after {
    opacity: 0;
  }

  .home-effects-number {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-surface-hover);
    font-size: 18px;
    line-height: 27px;
  }

  .home-effects-label {
    font-size: 18px;
    line-height: 27px;
  }

  .home-effects-arrow {
    z-index: 0;
    left: 26px;
    bottom: 0;
  }
}

/* 주요기능 -- 3 panels stacked vertically (NOT click-to-switch tabs,
   despite the category-header look; confirmed directly against the
   export's own `Content` group, which is 2042px tall to fit all 3 at
   once, no tab-switcher component anywhere in the file). Panel 1: 4
   cards in a row. Panels 2/3: 2 cards in a column + one big diagram/
   mockup image side-by-side -- `img_main_step`/`img_main_manager` are
   themselves single flattened exportable images (confirmed via their own
   `exportable: true` flag with no further real content underneath worth
   rebuilding), not something to reconstruct node-by-node. */
.home-keyfeatures-panel + .home-keyfeatures-panel {
  margin-top: 88px;
}

.home-keyfeatures-header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 24px, not 32px -- confirmed identical at PC and Tablet (Title bottom
     to All Box Wrap top measures exactly 24px in the raw Zeplin data at
     both breakpoints, all 3 panels). Mobile's own override already had
     this right. */
  margin-bottom: 24px;
}

.home-keyfeatures-header img {
  width: 24px;
  height: 24px;
}

.home-keyfeatures-header h3 {
  margin: 0;
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-keyfeatures-cards {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.home-keyfeatures-cards--split {
  align-items: stretch;
}

.home-keyfeatures-cards-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
}

.home-keyfeatures-card {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.home-keyfeatures-card,
.home-keyfeatures-image-box {
  transition: all 0.5s;
}

@media (hover: hover) {
  .home-keyfeatures-card:hover,
  .home-keyfeatures-image-box:hover {
    border-color: #333;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  }

  .home-keyfeatures-image-box:hover img {
    border-color: #333;
  }
}

.home-keyfeatures-card-image-area,
.home-keyfeatures-card-image-area picture {
  display: contents;
}

.home-keyfeatures-card-image {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.home-keyfeatures-card-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-keyfeatures-card-bullets {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-keyfeatures-card-bullets li {
  position: relative;
  padding-left: 12px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

.home-keyfeatures-card-bullets li::before {
  content: "-";
  position: absolute;
  left: 0;
}

.home-keyfeatures-image-box {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-keyfeatures-image-box picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.home-keyfeatures-image-box-label {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-keyfeatures-image-box img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: border-color 0.5s;
}

.home-keyfeatures-effect {
  display: flex;
  align-items: center;
  gap: 16px;
  /* 24px, not 32px -- same confirmation as `.home-keyfeatures-header`'s
     own comment (All Box Wrap bottom to Text Wrap top, identical at PC
     and Tablet, all 3 panels). */
  margin-top: 24px;
}

.home-keyfeatures-effect-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-top-bg);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
}

.home-keyfeatures-effect-text {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}

.home-keyfeatures-effect-highlight {
  font-weight: 700;
  color: #ffa802;
}

@media (min-width: 1200px) {
  /* Desktop's complete section is a 1280x2042 frame. Keep the standard
     24px responsive gutters outside that frame, and preserve the
     handoff's left-aligned section title. */
  .home-keyfeatures-section {
    max-width: 1328px;
  }

  .home-keyfeatures-title {
    text-align: left;
  }

  .home-keyfeatures-header {
    gap: 16px;
  }

  .home-keyfeatures-header h3 {
    line-height: 34px;
  }

  /* Every Desktop feature card uses the same full-bleed 210px muted
     image area as Tablet, with the native 120px 3D asset centered
     inside it. Text begins 32px below the image area and 32px from the
     card edge. */
  .home-keyfeatures-card {
    flex: 1 1 0;
    overflow: hidden;
    padding: 0 0 40px;
  }

  .home-keyfeatures-panel--source .home-keyfeatures-card {
    height: 504px;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-card {
    height: 480px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-card {
    height: 428px;
  }

  .home-keyfeatures-card-image-area {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(100% + 2px);
    height: 210px;
    margin: -1px -1px 0;
    background: var(--color-nav-bg);
  }

  .home-keyfeatures-card-image {
    width: 120px;
    height: 120px;
    margin-bottom: 0;
    border-radius: 0;
  }

  .home-keyfeatures-card-title {
    margin-top: 32px;
    padding: 0 31px;
  }

  .home-keyfeatures-card-bullets {
    margin-right: 31px;
    margin-left: 31px;
  }

  /* Panels 2/3 divide the available row evenly. At Zeplin's 1280px
     content width this resolves to two 632px columns and two 308px
     cards; keeping the tracks flexible prevents horizontal overflow
     between the desktop and tablet breakpoints. */
  .home-keyfeatures-cards-col {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: 0;
    flex-direction: row;
  }

  .home-keyfeatures-cards-col > .home-keyfeatures-card {
    flex: 1 1 0;
  }

  .home-keyfeatures-image-box {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .home-keyfeatures-image-box img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
  }

  .home-keyfeatures-image-box--step {
    height: 480px;
  }

  .home-keyfeatures-image-box--step img {
    width: min(552px, 100%);
    height: auto;
  }

  .home-keyfeatures-image-box--manager {
    height: 428px;
    padding: 31px;
  }

  .home-keyfeatures-image-box--manager img {
    width: min(568px, 100%);
    max-height: 267px;
    object-fit: fill;
  }

  .home-keyfeatures-image-box-label {
    width: 100%;
    margin-bottom: 24px;
    font-size: 20px;
    line-height: 30px;
  }

  .home-keyfeatures-effect-badge {
    box-sizing: border-box;
    width: 87px;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
    line-height: 24px;
  }

  .home-keyfeatures-effect-text {
    line-height: 27px;
    white-space: nowrap;
  }
}

/* Keep the compact Desktop tier usable before the Tablet composition
   takes over. Narrower cards create extra Korean line wraps, so these
   two rows may grow vertically while retaining the native minimum
   heights and equal column geometry. */
@media (min-width: 1200px) and (max-width: 1327px) {
  .home-keyfeatures-panel--tamper .home-keyfeatures-card,
  .home-keyfeatures-panel--monitor .home-keyfeatures-card,
  .home-keyfeatures-image-box--step,
  .home-keyfeatures-image-box--manager {
    height: auto;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-card,
  .home-keyfeatures-image-box--step {
    min-height: 480px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-card,
  .home-keyfeatures-image-box--manager {
    min-height: 428px;
  }
}

@media (max-width: 1199px) {
  .home-keyfeatures-cards {
    flex-wrap: wrap;
  }

  .home-keyfeatures-cards > .home-keyfeatures-card {
    flex: 1 1 45%;
  }

  /* Zeplin's Tablet layer tree (zeplin-raw/tablet-main.json, the
     "Title + Box"/"All Box Wrap" groups) shows panels 2/3 using the
     exact same 420px-wide "2단_Box" card shape as panel 1's 4-card
     grid -- icon area on top, text below -- just 2 per row instead of
     4, with the diagram/mockup image moved into its own full-width
     bordered box underneath. It is NOT PC's "2 cards stacked in a
     column beside one tall image" layout reflowed narrower; that
     desktop structure was leaking straight through at this breakpoint
     with no override, stretching each 120x120 icon asset to `width:
     100%` of a near-full-section-width column. */
  .home-keyfeatures-cards--split {
    flex-direction: column;
  }

  .home-keyfeatures-cards-col {
    flex-direction: row;
    gap: 16px;
  }

  .home-keyfeatures-cards-col > .home-keyfeatures-card {
    flex: 1 1 0;
  }

  /* img_main_3d_* icons are 120x120 native (design-handoffs NOTES.md) --
     Tablet's own Zeplin rect for each is also 120x120, a true 1x
     render, not a scale-up. */
  .home-keyfeatures-card-image-area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
  }

  .home-keyfeatures-card-image {
    width: 120px;
    height: 120px;
    margin-bottom: 0;
  }

  .home-keyfeatures-image-box {
    box-sizing: border-box;
    flex: none;
    width: 100%;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .home-keyfeatures-image-box img {
    width: auto;
    max-width: 100%;
    border: 0;
    margin: 0 auto;
  }

  /* img_main_step/img_main_manager are also native-resolution 1:1 at
     this tier (552x416 / 568x267 per zeplin-raw/tablet-main.json) --
     cap at that intrinsic size so a wide Tablet viewport doesn't
     upscale them past their real pixels, matching the Mobile block's
     own `--step`/`--manager` treatment below. */
  .home-keyfeatures-image-box--step img {
    max-width: 552px;
  }

  .home-keyfeatures-image-box--manager img {
    max-width: 568px;
  }
}

/* Tablet 주요기능 uses three measured two-column grids. Cards have a
   full-bleed 210px muted image area followed by text inset 32px; desktop
   card padding must not leak into this tier. Exact panel geometry at the
   920px handoff: source 994px, tamper 1066px, monitor 919px, separated
   by 88px. */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-keyfeatures-section {
    /* max(), not a flat 32px -- same landscape safe-area reasoning as
       .home-section's own comment. */
    padding-right: max(32px, env(safe-area-inset-right));
    padding-left: max(32px, env(safe-area-inset-left));
  }

  .home-keyfeatures-title {
    text-align: left;
  }

  .home-keyfeatures-header {
    width: max-content;
    gap: 16px;
  }

  .home-keyfeatures-header h3 {
    line-height: 34px;
    white-space: nowrap;
  }

  .home-keyfeatures-panel--source .home-keyfeatures-header {
    width: 168px;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-header {
    width: 246px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-header {
    width: 218px;
  }

  .home-keyfeatures-card {
    flex: none;
    overflow: hidden;
    padding: 0 0 40px;
  }

  .home-keyfeatures-panel--source .home-keyfeatures-card {
    height: 432px;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-card {
    height: 456px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-card {
    height: 404px;
  }

  .home-keyfeatures-card-image-area {
    flex: none;
    width: calc(100% + 2px);
    height: 210px;
    margin: -1px -1px 0;
    background: var(--color-nav-bg);
  }

  .home-keyfeatures-card-title {
    margin-top: 32px;
    padding: 0 31px;
  }

  .home-keyfeatures-card-bullets {
    margin-right: 31px;
    margin-left: 31px;
  }

  .home-keyfeatures-image-box {
    padding: 31px;
  }

  .home-keyfeatures-image-box img {
    display: block;
  }

  .home-keyfeatures-image-box--step {
    height: 480px;
  }

  .home-keyfeatures-image-box--manager {
    height: 385px;
  }

  .home-keyfeatures-image-box--manager img {
    width: 568px;
    height: 267px;
  }

  .home-keyfeatures-image-box-label {
    margin-bottom: 24px;
    font-size: 20px;
    line-height: 30px;
  }

  .home-keyfeatures-effect {
    width: max-content;
    max-width: 100%;
  }

  .home-keyfeatures-effect-badge {
    box-sizing: border-box;
    width: 87px;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
    line-height: 24px;
  }

  .home-keyfeatures-effect-text {
    line-height: 27px;
    white-space: nowrap;
  }

  .home-keyfeatures-panel--source .home-keyfeatures-effect {
    width: 493px;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-effect {
    width: 416px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-effect {
    width: 452px;
  }
}

/* Below Zeplin's 920px Tablet canvas, narrower card text wraps onto
   additional lines. Preserve the reference heights as minimums but let
   these cards grow so 768-919px Tablets never clip their final bullets. */
@media (min-width: 768px) and (max-width: 919px) {
  .home-keyfeatures-panel--source .home-keyfeatures-card {
    height: auto;
    min-height: 432px;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-card {
    height: auto;
    min-height: 456px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-card {
    height: auto;
    min-height: 404px;
  }
}

@media (max-width: 767px) {
  .home-section-title {
    line-height: 39.2px;
  }

  .home-keyfeatures-title {
    text-align: left;
  }

  .home-keyfeatures-panel + .home-keyfeatures-panel {
    margin-top: 64px;
  }

  .home-keyfeatures-header {
    gap: 8px;
    margin-bottom: 24px;
  }

  .home-keyfeatures-header h3 {
    font-size: 22px;
    line-height: 30.8px;
  }

  .home-keyfeatures-cards,
  .home-keyfeatures-cards--split {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }

  .home-keyfeatures-cards > .home-keyfeatures-card {
    flex: none;
    width: 100%;
  }

  .home-keyfeatures-cards-col {
    flex: none;
    flex-direction: column;
    width: 100%;
  }

  .home-keyfeatures-cards-col > .home-keyfeatures-card {
    flex: none;
    width: 100%;
  }

  .home-keyfeatures-card {
    overflow: hidden;
    padding: 0 0 32px;
    border-color: #dddfe2;
    border-radius: 16px;
  }

  .home-keyfeatures-card.home-keyfeatures-item--selected,
  .home-keyfeatures-image-box.home-keyfeatures-item--selected {
    border-color: #333;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  }

  .home-keyfeatures-card-image-area {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(100% + 2px);
    height: 180px;
    margin: -1px -1px 24px;
    background: #f9fafb;
  }

  .home-keyfeatures-card-image-area picture {
    display: block;
    width: 96px;
    height: 96px;
    line-height: 0;
  }

  .home-keyfeatures-card-image {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0;
    border-radius: 0;
  }

  .home-keyfeatures-card-title {
    padding: 0 24px;
    font-size: 17px;
    line-height: 25.5px;
  }

  .home-keyfeatures-panel--source .home-keyfeatures-card:nth-child(1) {
    min-height: 397px;
  }

  .home-keyfeatures-panel--source .home-keyfeatures-card:nth-child(n + 2) {
    min-height: 401px;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-card:nth-child(1) {
    height: 262px;
    min-height: 262px;
  }

  .home-keyfeatures-panel--tamper .home-keyfeatures-card:nth-child(2) {
    min-height: 401px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-card:nth-child(1) {
    min-height: 374px;
  }

  .home-keyfeatures-panel--monitor .home-keyfeatures-card:nth-child(2) {
    min-height: 347px;
  }

  .home-keyfeatures-card-bullets {
    gap: 4px;
    margin: 12px 24px 0;
  }

  .home-keyfeatures-card-bullets li {
    padding-left: 11px;
    font-size: 15px;
    line-height: 22.5px;
  }

  .home-keyfeatures-image-box {
    box-sizing: border-box;
    flex: none;
    width: 100%;
    padding: 23px;
    border: 1px solid #dddfe2;
    border-radius: 16px;
    background: var(--color-surface);
  }

  .home-keyfeatures-image-box--step {
    height: 259px;
  }

  .home-keyfeatures-image-box--manager {
    height: 230px;
  }

  .home-keyfeatures-image-box img {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
  }

  .home-keyfeatures-image-box-label {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 25.5px;
  }

  .home-keyfeatures-effect {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
  }

  .home-keyfeatures-effect-badge {
    height: auto;
    padding: 4px 16px;
    font-size: 15px;
    line-height: 22.5px;
  }

  .home-keyfeatures-effect-text {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 24px;
  }
}

/* 적용방법 + 라이선스 정책 + 파트너 로고 -- one combined full-bleed dark
   section (img_main_bottom_bg as its own flattened background image,
   same "just render the exported composite" approach as img_main_step/
   img_main_manager earlier). Not `.home-section` itself (that caps at
   1280px) -- the bg image needs the full viewport width, so it's a plain
   full-width wrapper with two `.home-section`-capped inner blocks plus
   the logo wall stacked inside it, mirroring `.home-hero`'s own
   full-bleed-bg-plus-centered-content pattern. */
.home-apply-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 64px;
  background: #000;
}

.home-apply-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  z-index: 0;
}

.home-apply-bg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.home-apply-inner,
.home-license-inner {
  position: relative;
  z-index: 1;
}

.home-apply-title {
  color: var(--color-text-inverse);
  text-align: left;
}

.home-apply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.home-apply-subheading {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
}

.home-apply-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.home-apply-tab {
  height: 48px;
  padding: 12px 24px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.home-apply-tab--active {
  border-bottom-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}

@media (hover: hover) {
  .home-apply-tab:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.home-apply-tab:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.home-apply-diagram {
  position: relative;
  width: 100%;
}

.home-apply-panel {
  display: none;
  width: 100%;
}

.home-apply-diagram-img--pc {
  width: 100%;
}

/* Mobile has no flattened Android/iOS composite (see the template's own
   comment) so it gets a hand-built zigzag instead of the PC/Tablet image;
   Pure App's own mobile image (`img_main_pureapp_m`) does exist, so it
   stays a plain <img>. Both PC-shaped panels and their Mobile
   counterparts share the same `data-apply-panel` value and both receive
   `--active` together -- the breakpoint itself (not the tab click)
   decides which of the two actually renders. */
.home-apply-panel--active.home-apply-diagram-img--pc {
  display: block;
}

/* Tablet only ever swaps the Android/iOS SDK tab's own diagram --
   `img_main_sdk_t` is the only Tablet-specific layer Zeplin actually
   captured (Pure App isn't the default-active tab in the export), so
   that second tab keeps using the PC flat image at this breakpoint,
   same as it always did. */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Tablet Zeplin uses a dedicated 920x1870 flattened backdrop. Keep it
     width-derived and top-anchored so tab changes can only clip its bottom;
     they must never rescale or re-center the artwork. */
  .home-apply-wrap {
    margin-top: 144px;
    padding-bottom: 80px;
  }

  .home-apply-bg > img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    object-fit: initial;
  }

  .home-apply-inner,
  .home-license-inner {
    /* max(), not a flat 32px -- same landscape safe-area reasoning as
       .home-section's own comment. */
    padding-right: max(32px, env(safe-area-inset-right));
    padding-left: max(32px, env(safe-area-inset-left));
  }

  .home-apply-header {
    margin-bottom: 56px;
  }

  .home-apply-subheading {
    line-height: 33px;
    white-space: nowrap;
  }

  .home-apply-tab {
    padding: 12px;
    line-height: 24px;
    white-space: nowrap;
  }

  .home-apply-tabs {
    box-sizing: border-box;
    height: 48px;
  }

  .home-apply-tab:first-child {
    width: auto;
    min-width: 153px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .home-apply-tab:last-child {
    width: 92px;
  }

  [data-apply-panel="android-ios"].home-apply-diagram-img--pc {
    display: none;
  }

  .home-apply-panel--active.home-apply-diagram-img--tablet {
    display: block;
  }
}

@media (max-width: 767px) {
  .home-apply-panel--active.home-apply-diagram-img--pc {
    display: none;
  }

  .home-apply-panel--active.home-apply-diagram-img--mobile {
    display: block;
  }
}

/* 804x133px at Zeplin's own Tablet width (centers within `.home-apply-
   diagram`'s 856px content width with a deliberate 26px gap each side:
   26+804+26=856) -- but min(804px, 100%), not a bare fixed 804px, since
   `.home-apply-diagram`'s own available width now shrinks below 804px
   whenever `.home-apply-inner`'s safe-area padding (its own comment
   above) eats further into a landscape phone's narrower viewport than
   the flat-32px case this 804px number assumed. A bare fixed width
   doesn't shrink with its parent -- confirmed via WebKit, this actually
   overflowed the diagram's own protected right edge by 16px even at
   852px wide with zero real inset, meaning a real device's nonzero
   env(safe-area-inset-right) pushed it further, straight under the
   Dynamic Island (real report, screenshot showing 배포's icon clipped by
   it). `margin: 0 auto` still centers it normally whenever 100% loses
   (i.e. whenever there's genuinely 804px+ to spare, same as before). */
.home-apply-diagram-img--tablet {
  width: min(804px, 100%);
  margin: 0 auto;
}

.home-apply-diagram-img--mobile {
  width: 100%;
}

.home-apply-note {
  margin: 24px 0 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 1200px) {
  /* Zeplin's complete dark block begins 144px after 주요기능 and uses
     one fixed, top-anchored 1920x1900 background across 적용방법,
     라이선스 정책, and the logo wall. Its bottom may be clipped as
     content changes, but the artwork itself must not stretch. */
  .home-apply-wrap {
    margin-top: 144px;
    padding-bottom: 0;
  }

  .home-apply-bg > img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    object-fit: initial;
  }

  /* A 1328px border box plus the shared 24px gutters produces Zeplin's
     exact 1280px content frame at native Desktop width. */
  .home-apply-inner {
    max-width: 1328px;
  }

  .home-apply-header {
    align-items: flex-end;
    margin-bottom: 56px;
  }

  .home-apply-subheading {
    line-height: 33px;
  }

  .home-apply-tabs {
    box-sizing: border-box;
    width: auto;
    height: 48px;
  }

  .home-apply-tab {
    padding: 12px;
    line-height: 24px;
    white-space: nowrap;
  }

  .home-apply-tab:first-child {
    flex: 0 0 auto;
    width: auto;
    min-width: 153px;
  }

  .home-apply-tab:last-child {
    flex: 0 0 92px;
    width: 92px;
  }

  .home-apply-note {
    margin-top: 56px;
    line-height: 24px;
  }
}

.home-license-cards {
  display: flex;
  gap: 16px;
}

.home-license-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.home-license-card-header {
  position: relative;
  height: 240px;
}

.home-license-card-header > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-license-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-license-card-badge {
  position: absolute;
  left: 32px;
  bottom: 24px;
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.home-license-card-badge--permanent {
  color: var(--color-text-primary);
}

.home-license-card-badge--annual {
  color: var(--color-text-inverse);
}

.home-license-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 131px;
  padding: 0 32px;
  border-top: 1px solid var(--color-border-light);
}

.home-license-row-label {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

.home-license-row-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.home-license-row-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-license-row-item-label {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

.home-license-row-item-value,
.home-license-row-value {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.home-license-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--color-border-light);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

.home-license-footnote {
  margin: 24px 0 0;
  font-family: var(--font-family);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 1200px) {
  /* Desktop license content is the same native 1280px frame as the
     application-method block above it. */
  .home-license-inner {
    max-width: 1328px;
  }

  .home-license-card {
    height: 633px;
  }

  .home-license-card-badge {
    bottom: 32px;
    line-height: 39.2px;
  }

  /* Zeplin's three 131px rows include their 32px insets and divider.
     Border-box sizing is essential: content-box inflated every row and
     made both cards hundreds of pixels too tall. */
  .home-license-row {
    box-sizing: border-box;
    gap: 24px;
  }

  .home-license-row-label {
    flex: 1 1 auto;
    line-height: 30px;
    color: #585e6a;
    white-space: pre-line;
  }

  .home-license-row-value,
  .home-license-row-item-value {
    flex: none;
    line-height: 27px;
    color: #101011;
    white-space: nowrap;
  }

  .home-license-row-item-label {
    line-height: 24px;
    color: #585e6a;
    white-space: nowrap;
  }

  .home-license-row-item {
    min-height: 27px;
    justify-content: flex-end;
  }

  .home-license-card--permanent .home-license-row--basic
    .home-license-row-right {
    flex: 0 0 145px;
    min-width: 145px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .home-license-row--basic .home-license-row-item:nth-child(1)
    .home-license-row-item-label {
    width: 90px;
  }

  .home-license-row--basic .home-license-row-item:nth-child(2)
    .home-license-row-item-label {
    width: 59px;
  }

  .home-license-row--basic .home-license-row-item-value {
    width: 47px;
  }

  .home-license-card--annual .home-license-row-right {
    flex: 0 0 68px;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .home-license-pill {
    flex: none;
    justify-content: center;
    box-sizing: border-box;
    width: 68px;
    padding-right: 0;
    padding-left: 0;
    line-height: 24px;
    color: #585e6a;
  }

  .home-license-footnote {
    line-height: 24px;
  }

}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-apply-note {
    margin-top: 56px;
    line-height: 24px;
  }

  .home-license-card-badge {
    bottom: 32px;
    line-height: 39.2px;
  }

  .home-license-row {
    box-sizing: border-box;
    gap: 24px;
    border-top: 0;
    box-shadow: inset 0 1px #f2f3f5;
  }

  .home-license-row-label {
    flex: 1 1 auto;
    line-height: 30px;
    color: #585e6a;
    white-space: pre-line;
  }

  .home-license-row-value,
  .home-license-row-item-value {
    flex: none;
    line-height: 27px;
    color: #101011;
    white-space: nowrap;
  }

  .home-license-row-item-label {
    line-height: 24px;
    color: #585e6a;
    white-space: nowrap;
  }

  .home-license-row-item {
    min-height: 27px;
    justify-content: flex-end;
  }

  .home-license-card--permanent .home-license-row--basic
    .home-license-row-right {
    flex: 0 0 145px;
    min-width: 145px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .home-license-row--basic .home-license-row-item:nth-child(1)
    .home-license-row-item-label {
    width: 90px;
  }

  .home-license-row--basic .home-license-row-item:nth-child(2)
    .home-license-row-item-label {
    width: 59px;
  }

  .home-license-row--basic .home-license-row-item-value {
    width: 47px;
  }

  .home-license-card--annual .home-license-row-right {
    flex: 0 0 68px;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .home-license-pill {
    flex: none;
    justify-content: center;
    width: 68px;
    padding-right: 0;
    padding-left: 0;
    line-height: 24px;
    color: #585e6a;
  }

  .home-license-footnote {
    line-height: 24px;
  }
}

/* Partner logo wall -- two counter-scrolling marquee rows (annotation:
   top left->right, bottom right->left, continuously). Track content is
   duplicated in the template so translateX(-50%) loops seamlessly. */
.home-logo-wall {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  box-sizing: border-box;
}

.home-logo-row {
  width: 100%;
  overflow: hidden;
}

.home-logo-row--top {
  height: 32px;
}

.home-logo-row--bottom {
  height: 40px;
}

.home-logo-track {
  --home-logo-gap: 64px;
  position: relative;
  width: 100%;
  height: 100%;
}

.home-logo-set {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  gap: var(--home-logo-gap);
  width: max-content;
  height: 100%;
  will-change: transform;
}

.home-logo-row--top .home-logo-set:first-child {
  animation: home-logo-marquee-ltr-primary 60s linear infinite;
}

.home-logo-row--top .home-logo-set:last-child {
  animation: home-logo-marquee-ltr-duplicate 60s linear infinite;
}

.home-logo-row--bottom .home-logo-set:first-child {
  animation: home-logo-marquee-rtl-primary 54s linear infinite;
}

.home-logo-row--bottom .home-logo-set:last-child {
  animation: home-logo-marquee-rtl-duplicate 54s linear infinite;
}

.home-logo-img {
  flex: none;
  height: 32px;
  width: auto;
  opacity: 1;
}

.home-logo-img--sktelecom {
  height: 40px;
}

.home-logo-img--at-t,
.home-logo-img--seevider,
.home-logo-img--pnu {
  height: 36px;
}

/* var(--home-logo-distance-*), not a bare calc(100% + gap) -- Safari
   doesn't compute a percentage translateX correctly for a
   position:absolute + width:max-content flex container (confirmed via
   real device report: the two counter-scrolling copies drift out of
   sync, visible as a periodic overlap/seam right where they should
   hand off seamlessly). home.js measures each row's actual rendered
   width + gap on load, on every logo <img> finishing decode, and on
   resize/rotation (a real notched phone crosses the 768px Tablet
   threshold, where .home-logo-set switches from Mobile's own fixed-px
   width to max-content, just by rotating), and writes the correct
   distance as this custom property on #home-logo-wall. The calc()
   fallback only covers the brief pre-JS paint / a no-JS context -- one
   shared set of keyframes for every breakpoint now, not a second,
   separately-hardcoded Mobile-only copy that would silently drift out
   of date the same way the one it replaced already had. */
@keyframes home-logo-marquee-ltr-primary {
  from { transform: translateX(0); }
  to { transform: translateX(var(--home-logo-distance-top, calc(100% + var(--home-logo-gap)))); }
}

@keyframes home-logo-marquee-ltr-duplicate {
  from { transform: translateX(calc(-1 * var(--home-logo-distance-top, calc(100% + var(--home-logo-gap))))); }
  to { transform: translateX(0); }
}

@keyframes home-logo-marquee-rtl-primary {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--home-logo-distance-bottom, calc(100% + var(--home-logo-gap))))); }
}

@keyframes home-logo-marquee-rtl-duplicate {
  from { transform: translateX(var(--home-logo-distance-bottom, calc(100% + var(--home-logo-gap)))); }
  to { transform: translateX(0); }
}

@media (max-width: 767px) {
  /* Confirmed against zeplin-raw/tablet-main.json (라이선스 정책's two
     420px-wide cards sit side by side, same as PC) that this stacking
     is Mobile-only -- it previously fired at the whole `<=1199px`
     Tablet tier too, wrongly flattening Tablet's own 2-column layout
     into a single column. */
  .home-license-cards {
    flex-direction: column;
  }

  /* `flex: 1 1 0` (flex-basis 0) only works along the row-direction main
     axis it was written for -- once the container flips to column here,
     the same basis-0 rule collapses both cards to 0 height instead of
     stacking them (caught from a real screenshot, both cards missing
     entirely at Tablet/Mobile). */
  .home-license-card {
    flex: none;
  }
}

@media (max-width: 767px) {
  /* Zeplin leaves one full Mobile section gap between the 4172px
     주요기능 content block and this dark combined section. */
  .home-apply-wrap {
    margin-top: 104px;
    padding-bottom: 0;
    background: #000;
  }

  /* Keep the exported artwork at a stable width-derived scale while tab
     content changes the wrapper height. The wrapper clips only the image's
     bottom; it must never re-center or re-scale the artwork per tab. */
  .home-apply-bg > img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    object-fit: initial;
  }

  .home-apply-title {
    text-align: left;
  }

  .home-apply-header {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
  }

  .home-apply-subheading {
    font-size: 18px;
    line-height: 27px;
  }

  .home-apply-diagram {
    max-width: 328px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-apply-tabs {
    box-sizing: border-box;
    width: 248px;
    height: 47px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: none;
  }

  .home-apply-tab {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 47px;
    padding: 12px;
    font-size: 15px;
    line-height: 22.5px;
    white-space: nowrap;
  }

  .home-apply-tab:first-child {
    width: 145px;
  }

  .home-apply-tab:last-child {
    width: 87px;
  }

  .home-apply-tab--active {
    border: none;
    border-bottom: 2px solid var(--color-text-inverse);
    background-color: transparent;
    box-shadow: none;
  }

  .home-apply-tab--active:active {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .home-apply-note {
    margin-top: 40px;
    min-height: 92px;
    font-size: 15px;
    line-height: 22.5px;
  }

  /* Mobile license cards are fixed 328x560 Zeplin components:
     200px title panel + three 120px horizontal content rows. */
  .home-license-card-header {
    height: 200px;
  }

  .home-license-card-badge {
    left: 24px;
    bottom: 24px;
    font-size: 22px;
    line-height: 30.8px;
    letter-spacing: -0.44px;
  }

  .home-license-row {
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    height: 120px;
    padding: 24px;
    gap: 16px;
  }

  .home-license-row-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: 17px;
    line-height: 25.5px;
    letter-spacing: -0.34px;
  }

  .home-license-row-right {
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
  }

  .home-license-card:first-child > .home-license-row:nth-child(2) .home-license-row-right {
    width: 132px;
    align-items: stretch;
  }

  .home-license-row-item {
    justify-content: flex-end;
    gap: 8px;
  }

  .home-license-row-item-label {
    flex: none;
    font-size: 15px;
    line-height: 22.5px;
    letter-spacing: -0.3px;
    opacity: 0.75;
    white-space: nowrap;
  }

  .home-license-row-item-value {
    flex: none;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
    white-space: nowrap;
  }

  .home-license-card:first-child > .home-license-row:not(:first-of-type) .home-license-row-value {
    font-size: 18px;
    line-height: 27px;
    letter-spacing: -0.36px;
  }

  .home-license-card:last-child .home-license-row-right {
    width: 65px;
  }

  .home-license-card:last-child .home-license-row-value {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
  }

  .home-license-pill {
    height: 31px;
    padding: 4px 12px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 22.5px;
    letter-spacing: -0.3px;
  }

  .home-license-footnote {
    margin-top: 16px;
    font-size: 15px;
    line-height: 22.5px;
    letter-spacing: -0.3px;
  }

  .home-logo-wall {
    margin-top: 104px;
    height: 145.6px;
    padding: 32px 0;
    gap: 24px;
    box-sizing: border-box;
  }

  .home-logo-track {
    --home-logo-gap: 40px;
  }

  .home-logo-row--top {
    height: 25.6px;
  }

  .home-logo-row--bottom {
    height: 32px;
  }

  .home-logo-img {
    height: 25.6px;
  }

  .home-logo-img--sktelecom {
    height: 32px;
  }

  .home-logo-img--at-t,
  .home-logo-img--seevider,
  .home-logo-img--pnu {
    height: 28.8px;
  }
}

@media (min-width: 1200px) {
  /* The reference/logo area begins one full 144px section interval after
     the license content. Its own 40px top/bottom padding supplies the
     only space around the two marquee rows, so the CTA begins flush at
     the dark block's exact 1900px boundary. Keep this after the base
     marquee declaration so the 64px fallback cannot override it. */
  .home-logo-wall {
    margin-top: 144px;
  }
}

/* Bottom CTA banner -- fixed-position illustration that crops rather than
   reflows on resize, per annotation ("해당 위치 고정 (해상도가 줄어도
   움직이지 않고 이미지 잘리게)"). */
.home-cta {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-home-cta-bg);
}

.home-cta-banner-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 370px;
  height: 290px;
  max-width: none;
}

@media (min-width: 1200px) {
  /* At the native 1920px canvas the banner occupies x=1230..1600:
     fixed to the centered 1280px content frame's right edge, not the
     viewport edge. As Desktop narrows it keeps its 370x290 size and is
     clipped by the viewport, matching the handoff annotation. */
  .home-cta-banner-img {
    right: auto;
    left: calc(50% + 270px);
  }

  .home-cta-btn {
    box-sizing: border-box;
    width: 126px;
    padding-right: 0;
    padding-left: 0;
    line-height: 27px;
  }

  .home-cta .home-cta-title {
    color: #000;
  }

  .home-cta-subtitle {
    line-height: 27px;
  }
}

.home-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  height: 340px;
  padding-top: 56px;
  padding-bottom: 56px;
  /* max(0px, env(...)), not a flat 0 -- stays a no-op in portrait (every
     real device's safe-area-inset-left/right is 0 there, so this still
     resolves to exactly 0px, unchanged) but protects landscape too. */
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-cta-banner-img {
    /* The dedicated Tablet export already contains Zeplin's clipped
       326x290 visible region. Keep that size fixed while the viewport
       changes; Zeplin explicitly calls for right/bottom anchoring and
       clipping rather than responsive scaling. */
    right: 0;
    width: 326px;
    height: 290px;
  }

  .home-cta-inner {
    /* max(), not a flat 32px -- same landscape safe-area reasoning as
       .home-section's own comment. */
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }
}

.home-cta-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  white-space: pre-line;
}

.home-cta-subtitle {
  margin: 12px 0 0;
  font-family: var(--font-family);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.8);
  white-space: pre-line;
}

.home-cta-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 12px;
  background: var(--color-surface);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .home-cta-btn:hover {
    background: var(--color-surface-muted);
  }
}

.home-cta-btn:active {
  background: var(--color-surface-muted);
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-cta-title {
    line-height: 39.2px;
    color: #000;
  }

  .home-cta-subtitle,
  .home-cta-btn {
    line-height: 27px;
  }

  .home-cta-btn {
    width: 126px;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .home-cta {
    height: 400px;
  }

  .home-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    height: 400px;
    padding: 56px 32px;
  }

  .home-cta-text {
    width: 100%;
    max-width: 296px;
  }

  .home-cta-title {
    font-size: 22px;
    line-height: 30.8px;
    letter-spacing: -0.44px;
  }

  .home-cta-subtitle {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
  }

  .home-cta-btn {
    width: auto;
    height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
  }

  .home-cta-banner-img {
    width: 259px;
    height: auto;
    opacity: 1;
  }
}

/* Desktop and Tablet hero: fixed Zeplin coordinate layers.  The orbit and
   its icon badges never scale with the viewport; narrow viewports crop the
   decorative layer while the pill groups and content remain readable. */
@media (min-width: 768px) {
  .home-hero {
    display: block;
    height: 100vh;
    height: 100dvh;
    min-height: 900px;
  }

  .home-hero-content {
    position: absolute;
    top: 0;
    right: 24px;
    bottom: 48px;
    left: 24px;
    box-sizing: border-box;
    width: auto;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .home-hero-btns {
    margin-top: 40px;
    margin-bottom: 0;
  }

  .home-hero-orbit-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 262px;
    aspect-ratio: auto;
    container-type: normal;
    pointer-events: none;
  }

  .home-hero-orbit-art {
    left: 50%;
    bottom: 0;
    width: 920px;
    height: 145px;
    aspect-ratio: auto;
    transform: translateX(-50%);
  }

  .home-hero-orbit-badge {
    width: 56px;
    height: 56px;
  }

  .home-hero-orbit-badge--stats {
    left: 233px;
    top: 24px;
  }

  .home-hero-orbit-badge--shield {
    left: 658px;
    top: 71px;
  }

  .home-hero-orbit-badge img,
  .home-hero-orbit-badge--stats img,
  .home-hero-orbit-badge--shield img {
    width: auto;
    height: auto;
  }

  .home-hero-orbit-badge--stats img { width: 24px; height: 24px; }
  .home-hero-orbit-badge--shield img { width: 24px; height: 24px; }

  .home-hero-pill-group {
    position: absolute;
    bottom: 0;
    pointer-events: none;
  }

  .home-hero-pill-group--left {
    left: 24px;
    width: 493px;
    height: 262px;
  }

  .home-hero-pill-group--right {
    right: 24px;
    width: 289px;
    height: 237px;
  }

  .home-hero-float-pill { transform: none; }

  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-pill { left: 0; top: 0; }
  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-dot { left: 67px; top: 51px; }
  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-line { left: 70.5px; top: 59px; height: 203px; }

  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-pill { left: 380px; top: 33px; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-dot { left: 433px; top: 84px; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-line { left: 436.5px; top: 92px; height: 77px; }

  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-pill { left: 136px; top: 63px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-dot { left: 198px; top: 114px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-line { left: 201.5px; top: 122px; height: 56px; }

  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-pill { left: 160px; top: 0; }
  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-dot { left: 221px; top: 51px; }
  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-line { left: 224.5px; top: 59px; height: 170px; }

  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-pill { left: 0; top: 64px; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-dot { left: 78px; top: 115px; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-line { left: 81.5px; top: 123px; height: 33px; }
}

@media (min-width: 1200px) {
  .home-hero-content {
    right: 24px;
    bottom: 48px;
    left: 24px;
    max-width: 794px;
  }

  .home-hero-orbit-wrap { height: 346px; }

  .home-hero-orbit-art {
    width: 1750px;
    height: 220px;
  }

  .home-hero-orbit-badge {
    width: 64px;
    height: 64px;
  }

  .home-hero-orbit-badge--stats { left: 534px; top: 90px; }
  .home-hero-orbit-badge--shield { left: 1188px; top: 48px; }

  .home-hero-orbit-badge--stats img { width: 24px; height: 24px; }
  .home-hero-orbit-badge--shield img { width: 24px; height: 24px; }

  .home-hero-pill-group--left {
    left: 24px;
    width: 415px;
    height: 346px;
  }

  .home-hero-pill-group--right {
    right: 24px;
    width: 343px;
    height: 313px;
  }

  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-pill { left: 0; top: 0; }
  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-dot { left: 75px; top: 55px; }
  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-line { left: 78.5px; top: 63px; height: 283px; }

  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-pill { left: 286px; top: 61px; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-dot { left: 347px; top: 116px; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-line { left: 350.5px; top: 124px; height: 80px; }

  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-pill { left: 134px; top: 111px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-dot { left: 204px; top: 166px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-line { left: 207.5px; top: 174px; height: 56px; }

  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-pill { left: 198px; top: 0; }
  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-dot { left: 267px; top: 55px; }
  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-line { left: 270.5px; top: 63px; height: 250px; }

  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-pill { left: 0; top: 47px; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-dot { left: 86px; top: 102px; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-line { left: 89.5px; top: 110px; height: 54px; }
}


/* A status label and its connector are one anchored unit. Keeping the pill center on the line center avoids horizontal drift when text metrics change, while the left and right sets retain their fixed Zeplin group geometry. */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-hero-orbit-badge--stats img { width: 24px; height: 24px; }
  .home-hero-orbit-badge--shield img { width: 24px; height: 24px; }

  .home-hero-pill-group .home-hero-float-tag { position: absolute; width: 1px; }
  .home-hero-pill-group .home-hero-float-tag .home-hero-float-pill { left: 50%; top: 0; transform: translateX(-50%); }
  .home-hero-pill-group .home-hero-float-tag .home-hero-float-dot { left: -4px; top: 51px; }
  .home-hero-pill-group .home-hero-float-tag .home-hero-float-line { left: -0.5px; top: 59px; }

  .home-hero-pill-group--left .home-hero-float-tag--obfuscation { left: 71px; top: 0; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity { left: calc(50vw - 24px); top: 33px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper { left: 202px; top: 63px; }
  .home-hero-pill-group--right .home-hero-float-tag--gs { left: 225px; top: 0; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement { left: 82px; top: 64px; }

  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-line { height: 203px; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-line { height: 77px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-line { height: 56px; }
  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-line { height: 170px; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-line { height: 33px; }
}

@media (min-width: 1200px) {
  .home-hero-pill-group .home-hero-float-tag { position: absolute; width: 1px; }
  .home-hero-pill-group .home-hero-float-tag .home-hero-float-pill { left: 50%; top: 0; transform: translateX(-50%); }
  .home-hero-pill-group .home-hero-float-tag .home-hero-float-dot { left: -4px; top: 55px; }
  .home-hero-pill-group .home-hero-float-tag .home-hero-float-line { left: -0.5px; top: 63px; }

  .home-hero-pill-group--left .home-hero-float-tag--obfuscation { left: 79px; top: 0; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity { left: 351px; top: 61px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper { left: 208px; top: 111px; }
  .home-hero-pill-group--right .home-hero-float-tag--gs { left: 271px; top: 0; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement { left: 90px; top: 47px; }

  .home-hero-pill-group--left .home-hero-float-tag--obfuscation .home-hero-float-line { height: 283px; }
  .home-hero-pill-group--left .home-hero-float-tag--integrity .home-hero-float-line { height: 80px; }
  .home-hero-pill-group--left .home-hero-float-tag--tamper .home-hero-float-line { height: 56px; }
  .home-hero-pill-group--right .home-hero-float-tag--gs .home-hero-float-line { height: 250px; }
  .home-hero-pill-group--right .home-hero-float-tag--procurement .home-hero-float-line { height: 54px; }
}


/* Above 1850px, keep the desktop pill groups on one centered 1850px canvas.
   This prevents both groups from separating farther as the viewport widens. */
@media (min-width: 1850px) {
  .home-hero-orbit-wrap {
    right: auto;
    left: 50%;
    width: 1850px;
    transform: translateX(-50%);
  }
}

/* Main hero content uses a dedicated full-size layer. The layer owns
   placement; the content box owns width and its title/subtitle/button stack. */
.home-hero-content-layer {
  position: absolute;
  inset: 0 0 48px;
  display: grid;
  place-items: center;
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  pointer-events: none;
}

.home-hero-content {
  position: static;
  box-sizing: border-box;
  width: min(794px, 100%);
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .home-hero-content-layer {
    right: 24px;
    left: 24px;
    padding: 0;
  }

  .home-hero-content { width: min(920px, 100%); }
}

@media (min-width: 1200px) {
  .home-hero-content { width: min(794px, 100%); }
}