/* Mobile premium portrait treatment: restrained mint orbit for the first founder state. */
@media (max-width: 560px) {
  .public-site .v3-founder-frame:has(.v36-hero-image-founder.is-active)::before {
    content: "";
    inset: auto;
    top: 0;
    left: 50%;
    width: min(96vw, 360px);
    height: min(96vw, 360px);
    z-index: 0;
    border: 1px solid rgba(114, 224, 197, .62);
    border-radius: 50%;
    background:
      radial-gradient(circle at 14% 29%, #f5fffc 0 1px, rgba(147, 244, 218, .96) 2px, transparent 4px),
      radial-gradient(circle at 14% 29%, rgba(112, 229, 198, .58), transparent 17px),
      radial-gradient(circle at 51% 48%, transparent 0 67%, rgba(98, 212, 183, .11) 67.5%, transparent 68.2%),
      radial-gradient(circle at 52% 46%, rgba(91, 215, 181, .10), rgba(10, 48, 40, .05) 54%, transparent 74%);
    box-shadow:
      inset 0 0 0 1px rgba(205, 255, 241, .035),
      inset 0 0 0 23px rgba(98, 212, 183, .025),
      0 0 0 18px rgba(98, 212, 183, .038),
      0 0 36px rgba(67, 206, 169, .14);
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    transform: translateX(-50%);
  }

  .public-site .v3-founder-frame:has(.v36-hero-image-founder.is-active)::after {
    content: "";
    top: 20%;
    right: auto;
    bottom: auto;
    left: 60%;
    width: min(72vw, 282px);
    height: min(72vw, 282px);
    z-index: 1;
    border: 1px solid rgba(137, 236, 210, .24);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, rgba(156, 246, 222, .34), rgba(57, 174, 144, .18) 42%, rgba(12, 64, 53, .11) 68%, transparent 78%);
    box-shadow: inset 0 0 34px rgba(164, 255, 230, .11), 0 14px 44px rgba(0, 0, 0, .18), 0 0 30px rgba(52, 194, 157, .11);
    filter: none;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .public-site .v36-hero-image-founder > img {
    transform: none;
  }

  /* Hero state 1 now carries its finished circle treatment inside the image itself. */
  .public-site .v3-founder-frame:has(.v36-hero-image-founder.is-active)::before,
  .public-site .v3-founder-frame:has(.v36-hero-image-founder.is-active)::after {
    content: none;
  }

  /* Blend only mobile hero state 1 into the page. A single radial mask avoids a box seam. */
  .public-site .v36-hero-image-founder > img {
    -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 54%, #000 0%, #000 58%, rgba(0, 0, 0, .90) 65%, rgba(0, 0, 0, .54) 73%, rgba(0, 0, 0, .18) 82%, transparent 92%);
    mask-image: radial-gradient(ellipse 50% 58% at 50% 54%, #000 0%, #000 58%, rgba(0, 0, 0, .90) 65%, rgba(0, 0, 0, .54) 73%, rgba(0, 0, 0, .18) 82%, transparent 92%);
    clip-path: none;
  }

  .public-site .v3-founder-frame:has(.v36-hero-image-founder.is-active) > .v3-founder-light {
    inset: 3% 0 1%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 52%, rgba(98, 212, 183, .08), transparent 72%);
  }

  /* Lift the first founder scene on real phones without touching desktop. */
  .public-site .v36-hero-image-founder > img {
    filter: saturate(.94) contrast(1.01) brightness(1.16) drop-shadow(0 18px 24px rgba(0, 0, 0, .2));
  }

  .public-site .v3-founder-frame:has(.v36-hero-image-founder.is-active) {
    filter: brightness(1.08);
  }

  /* Compact, high-contrast actions: Dduri stays at the edge and copy stays on one centered line. */
  .public-site .mobile-cta {
    gap: 6px;
    border-top: 1px solid rgba(98, 212, 183, .62);
    background: #07110f;
    color-scheme: only light;
  }

  .public-site .mobile-cta a {
    min-height: 52px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(6, 17, 14, .18), inset 0 1px 0 rgba(255, 255, 255, .34), 0 2px 8px rgba(0, 0, 0, .18);
    color-scheme: only light;
  }

  .public-site .mobile-cta-call {
    border: 2px solid #8ae5ce;
    background: #bdeedc;
    color: #07110f;
  }

  .public-site .mobile-cta-kakao {
    border: 2px solid #ffe600;
    background: #ffe600;
    color: #10201b;
  }

  /* Dduri is decorative: keep copy centered in each button, not centered around the character. */
  .public-site .mobile-cta a {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
  }

  .public-site .mobile-cta a > span {
    width: 100%;
    margin: 0;
    padding: 0;
    transform: none;
    text-align: center;
  }

  .public-site .mobile-cta-dduri {
    bottom: 4px;
    width: 34px;
    height: 42px;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
  }

  .public-site .mobile-cta-dduri-bow {
    left: 7px;
  }

  .public-site .mobile-cta-dduri-point {
    right: 7px;
  }

}

/* Some Android browsers report a 561–768px CSS viewport while still rendering a phone.
   Keep the same action contrast and founder tone in that narrow mobile range. */
@media (min-width: 561px) and (max-width: 768px) {
  .public-site .v36-hero-image-founder > img {
    filter: saturate(.94) contrast(1.01) brightness(1.16) drop-shadow(0 18px 24px rgba(0, 0, 0, .2));
  }

  .public-site .v3-founder-frame:has(.v36-hero-image-founder.is-active) {
    filter: brightness(1.08);
  }

  .public-site .mobile-cta,
  .public-site .mobile-cta a {
    color-scheme: only light;
  }

  .public-site .mobile-cta-call {
    border: 2px solid #8ae5ce;
    background: #bdeedc;
    color: #07110f;
  }

  .public-site .mobile-cta-kakao {
    border: 2px solid #ffe600;
    background: #ffe600;
    color: #10201b;
  }
}