:root {
      --bg: #000000;
      --bg-soft: #0b0c0f;
      --bg-card: #111317;
      --bg-card-2: #15181e;
      --line: #23262d;
      --line-soft: #1a1d23;
      --txt: #ffffff;
      --txt-2: #cdd3db;
      --txt-3: #959ba6;
      --red: #ff2f2f;
      --red-deep: #e01010;
      --red-soft: #ff5a5a;
      --green: #37e08a;
      --amber: #ffb02e;
      --purple: #b06bff;
      --purple-deep: #7c3aed;
      --blue: #5b9dff;
      --blue-deep: #3d7fe6;
      --radius: 20px;
      --radius-lg: 30px;
      --maxw: 1200px;
      --sp-section: clamp(31px, 5.6vw, 62px);
      --ease: cubic-bezier(.22, .61, .36, 1);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: clip;
      width: 100%;
      max-width: 100%;
    }

    body {
      background: var(--bg);
      color: var(--txt);
      font-size: 18.5px;
      line-height: 1.68;
      letter-spacing: -.012em;
      overflow-x: clip;
      width: 100%;
      max-width: 100%;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "tnum";
      position: relative;
    }

    @media(max-width:480px) {
      body {
        font-size: 17px;
      }
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
      color: inherit;
    }

    .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 22px;
    }

    .bg-grid {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .5;
      background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
      -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
    }

    .cursor-glow {
      position: fixed;
      top: 0;
      left: 0;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255, 47, 47, .10), transparent 60%);
      transform: translate(-50%, -50%);
      transition: opacity .4s;
      opacity: 0;
      will-change: left, top;
    }

    @media(hover:hover) and (pointer:fine) {
      .cursor-glow {
        opacity: 1;
      }
    }

    @media(pointer:coarse) {
      .cursor-glow {
        display: none;
      }
    }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0;
      z-index: 200;
      background: linear-gradient(90deg, var(--red), #ff8a3d);
      box-shadow: 0 0 14px rgba(255, 47, 47, .8);
      transition: width .1s linear;
    }

    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
      will-change: transform, opacity;
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    .reveal[data-rv="scale"] {
      transform: scale(.97);
    }

    .stagger>* {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .75s var(--ease-out), transform .8s var(--ease-out);
    }

    .stagger.in>* {
      opacity: 1;
      transform: none;
    }

    .stagger.in>*:nth-child(1) {
      transition-delay: .05s
    }

    .stagger.in>*:nth-child(2) {
      transition-delay: .14s
    }

    .stagger.in>*:nth-child(3) {
      transition-delay: .23s
    }

    .stagger.in>*:nth-child(4) {
      transition-delay: .32s
    }

    .stagger.in>*:nth-child(5) {
      transition-delay: .41s
    }

    .stagger.in>*:nth-child(6) {
      transition-delay: .5s
    }

    .pop {
      display: inline-block;
      transform: scale(.55);
      opacity: 0;
      transition: transform .9s var(--ease-out), opacity .6s;
    }

    .pop.in {
      transform: none;
      opacity: 1;
    }

    @media(prefers-reduced-motion:reduce) {

      .reveal,
      .stagger>*,
      .pop {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

      .cursor-glow,
      .bg-grid {
        display: none;
      }
    }

    .shimmer {
      background: linear-gradient(100deg, var(--red) 0%, #ff8a3d 28%, var(--red-soft) 52%, var(--red) 80%);
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      animation: shimmer 5s linear infinite;
    }

    @keyframes shimmer {
      to {
        background-position: -220% 0;
      }
    }

    .shine {
      position: relative;
      overflow: hidden;
    }

    .shine::after {
      content: "";
      position: absolute;
      top: -60%;
      left: -130%;
      width: 60%;
      height: 220%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
      transform: skewX(-22deg);
      animation: sweep 4.5s ease-in-out infinite;
    }

    .shine:hover::after {
      animation: sweep 1s ease;
    }

    @keyframes sweep {
      0% {
        left: -130%;
      }

      45% {
        left: 140%;
      }

      100% {
        left: 140%;
      }
    }

    @keyframes kpulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 47, 47, .5);
      }

      50% {
        box-shadow: 0 0 0 10px rgba(255, 47, 47, 0);
      }
    }

    .uline {
      position: relative;
      display: inline-block;
    }

    .uline::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -.06em;
      height: .09em;
      width: 0;
      background: currentColor;
      border-radius: 4px;
    }

    .uline.draw::after {
      animation: drawline .8s var(--ease) forwards;
    }

    @keyframes drawline {
      to {
        width: 100%;
      }
    }

    .promo {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      z-index: 120;
      background: linear-gradient(90deg, var(--red-deep), var(--red));
      color: #fff;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: .01em;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: transform .45s var(--ease);
      white-space: nowrap;
      overflow: hidden;
    }

    .promo.hide {
      transform: translateY(-100%);
    }

    .promo .bolt {
      font-size: 14px;
    }

    .promo b {
      font-weight: 800;
    }

    .promo .sep {
      opacity: .55;
    }

    @media(max-width:480px) {
      .promo {
        font-size: 12px;
        gap: 6px;
        height: 40px;
      }
    }

    .nav {
      position: fixed;
      top: 42px;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      z-index: 110;
      background: rgba(6, 7, 9, .72);
      backdrop-filter: saturate(140%) blur(16px);
      -webkit-backdrop-filter: saturate(140%) blur(16px);
      border-bottom: 1px solid var(--line-soft);
      transition: top .45s var(--ease), background .3s;
    }

    .nav.up {
      top: 0;
    }

    .nav.solid {
      background: rgba(6, 7, 9, .92);
    }

    .nav-in {
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo img {
      height: 26px;
      width: auto;
      display: block;
      transition: transform .3s var(--ease);
    }

    .logo:hover img {
      transform: scale(1.05);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .menu-btn {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      border: 1px solid var(--line);
      transition: border-color .2s;
    }

    .menu-btn:hover {
      border-color: #3a3f49;
    }

    .menu-btn span {
      display: block;
      width: 20px;
      height: 2px;
      background: #fff;
      position: relative;
    }

    .menu-btn span::before,
    .menu-btn span::after {
      content: "";
      position: absolute;
      left: 0;
      width: 20px;
      height: 2px;
      background: #fff;
    }

    .menu-btn span::before {
      top: -6px;
    }

    .menu-btn span::after {
      top: 6px;
    }

    .drawer {
      position: fixed;
      inset: 0;
      z-index: 130;
      background: rgba(0, 0, 0, .97);
      display: flex;
      flex-direction: column;
      padding: 90px 30px 40px;
      gap: 6px;
      transform: translateY(-100%);
      transition: transform .4s var(--ease);
    }

    .drawer.open {
      transform: none;
    }

    .drawer a {
      font-size: 26px;
      font-weight: 800;
      padding: 18px 0;
      border-bottom: 1px solid var(--line-soft);
      transition: color .2s, padding-left .2s;
    }

    .drawer a:hover,
    .drawer a.cur {
      color: var(--red-soft);
      padding-left: 8px;
    }

    .drawer .close {
      position: absolute;
      top: 26px;
      right: 26px;
      font-size: 34px;
      font-weight: 300;
    }

    .page {
      padding-top: 110px;
      overflow-x: clip;
      max-width: 100%;
    }

    .hero {
      position: relative;
      padding: 30px 0 var(--sp-section);
      text-align: center;
      overflow: hidden;
    }

    .aurora {
      position: absolute;
      top: -220px;
      left: 50%;
      width: 900px;
      height: 760px;
      max-width: 140vw;
      z-index: 0;
      pointer-events: none;
      transform: translateX(-50%);
      filter: blur(30px);
      will-change: transform;
    }

    .aurora i {
      position: absolute;
      border-radius: 50%;
      mix-blend-mode: screen;
      animation: float 11s ease-in-out infinite;
    }

    .aurora i:nth-child(1) {
      width: 440px;
      height: 440px;
      left: 20%;
      top: 8%;
      background: radial-gradient(circle, rgba(255, 47, 47, .42), transparent 64%);
    }

    .aurora i:nth-child(2) {
      width: 380px;
      height: 380px;
      right: 14%;
      top: 0;
      background: radial-gradient(circle, rgba(124, 58, 237, .34), transparent 64%);
      animation-delay: -3s;
    }

    .aurora i:nth-child(3) {
      width: 340px;
      height: 340px;
      left: 42%;
      top: 34%;
      background: radial-gradient(circle, rgba(255, 138, 61, .3), transparent 64%);
      animation-delay: -6s;
    }

    @keyframes float {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      33% {
        transform: translate(26px, -22px) scale(1.08);
      }

      66% {
        transform: translate(-22px, 18px) scale(.95);
      }
    }

    .hero .wrap {
      position: relative;
      z-index: 1;
    }

    .hero-eyebrow {
      margin: 0 0 30px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: var(--txt-2);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .03);
      padding: 9px 18px;
      border-radius: 999px;
      backdrop-filter: blur(6px);
    }

    .hero-eyebrow .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(55, 224, 138, .18);
      animation: pulse 1.6s infinite;
    }

    .chat {
      position: relative;
      max-width: 560px;
      margin: 0 auto;
      background: linear-gradient(180deg, #101218, #0a0b0f);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 22px;
      text-align: left;
      overflow: hidden;
      box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .9);
      min-height: 292px;
      box-sizing: border-box;
    }

    .chat-msgs {
      min-height: 200px;
    }

    .chat::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 80%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 47, 47, .8), transparent);
      animation: scan 3.6s ease-in-out infinite;
    }

    @keyframes scan {
      0% {
        left: -100%;
      }

      55% {
        left: 140%;
      }

      100% {
        left: 140%;
      }
    }

    .chat-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 4px 16px;
      border-bottom: 1px solid var(--line-soft);
      margin-bottom: 18px;
    }

    .chat-bar .dots {
      display: flex;
      gap: 7px;
    }

    .chat-bar .dots i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: block;
    }

    .chat-bar .dots i:nth-child(1) {
      background: #ff5f56;
    }

    .chat-bar .dots i:nth-child(2) {
      background: #ffbd2e;
    }

    .chat-bar .dots i:nth-child(3) {
      background: #27c93f;
    }

    .chat-bar .live {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--txt-3);
      letter-spacing: .08em;
    }

    .chat-bar .live b {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--red);
      animation: pulse 1.4s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .25
      }
    }

    .msg {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(10px);
      min-height: 52px;
    }

    .msg.ai {
      margin-bottom: 0;
      min-height: 108px;
    }

    .msg.show {
      opacity: 1;
      transform: none;
      transition: all .5s var(--ease);
    }

    .msg.user {
      flex-direction: row-reverse;
      transform: translateX(40px);
    }

    .msg.user.show {
      transform: none;
    }

    .msg.user .bubble {
      background: #22262e;
      border-color: #2c3038;
    }

    .msg .av {
      flex: none;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-size: 14px;
      font-weight: 800;
    }

    .msg.user .av {
      background: #2a2e37;
      color: #fff;
    }

    .msg.ai .av {
      background: linear-gradient(135deg, var(--red), var(--red-deep));
      color: #fff;
    }

    .msg .bubble {
      background: #1a1d24;
      border: 1px solid var(--line);
      border-radius: 15px;
      padding: 13px 16px;
      font-size: 16.5px;
      color: var(--txt);
      max-width: calc(100% - 48px);
      line-height: 1.55;
      min-height: 1.55em;
    }

    .msg.user .bubble {
      min-height: 2.85em;
    }

    .msg.ai .bubble,
    #aiBubble {
      min-height: 5.6em;
    }

    .typing.is-hidden {
      visibility: hidden;
    }

    .caret {
      color: var(--red-soft);
      font-weight: 400;
      animation: caretBlink .7s step-end infinite;
    }

    @keyframes caretBlink {
      50% {
        opacity: 0;
      }
    }

    .typing span {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--txt-3);
      margin: 0 2px;
      animation: blink 1.2s infinite;
    }

    .typing span:nth-child(2) {
      animation-delay: .2s
    }

    .typing span:nth-child(3) {
      animation-delay: .4s
    }

    @keyframes blink {

      0%,
      80%,
      100% {
        opacity: .25
      }

      40% {
        opacity: 1
      }
    }

    .brand-pop {
      color: var(--red-soft);
      font-weight: 900;
      display: inline-block;
      transform: scale(.3);
      opacity: 0;
      text-shadow: 0 0 18px rgba(255, 90, 90, .7);
    }

    .brand-pop.show {
      animation: brandPop .6s var(--ease-out) forwards;
    }

    @keyframes brandPop {
      0% {
        transform: scale(.3);
        opacity: 0;
      }

      60% {
        transform: scale(1.28);
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .hero-cta {
      display: flex;
      gap: 14px;
      justify-content: center;
      margin-top: 36px;
      flex-wrap: wrap;
    }

    @media(max-width:480px) {
      .chat {
        min-height: 276px;
      }

      .chat-msgs {
        min-height: 188px;
      }

      .msg.ai .bubble,
      #aiBubble {
        min-height: 6.8em;
      }
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      font-size: 17px;
      padding: 17px 26px;
      border-radius: 16px;
      transition: transform .2s var(--ease), box-shadow .25s;
    }

    .cta svg {
      flex: none;
    }

    .cta-primary {
      background: linear-gradient(180deg, var(--red), var(--red-deep));
      color: #fff;
      box-shadow: 0 16px 40px -12px rgba(255, 47, 47, .7);
    }

    .cta-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 22px 48px -10px rgba(255, 47, 47, .85);
    }

    .cta-ghost {
      background: var(--bg-card);
      color: #fff;
      border: 1px solid var(--line);
    }

    .cta-ghost:hover {
      transform: translateY(-3px);
      border-color: #3a3f49;
    }

    /* top video: rounded, mobile full-bleed, PC contained */
    .vidtop {
      width: 100%;
    }

    .vidtop .wrap {
      padding: 0;
      display: flex;
      justify-content: center;
    }

    .vidtop video {
      width: 100%;
      max-width: none;
      height: auto;
      display: block;
      border-radius: 14px;
    }

    @media(min-width:760px) {
      .vidtop .wrap {
        padding: 0 22px;
      }

      .vidtop video {
        max-width: 600px;
        border-radius: 18px;
      }
    }

    .section {
      padding: var(--sp-section) 0;
      position: relative;
    }

    .kicker {
      display: inline-block;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .05em;
      color: var(--red-soft);
      margin-bottom: 18px;
    }

    .h-sec {
      font-size: clamp(34px, 8.6vw, 64px);
      font-weight: 900;
      line-height: 1.14;
      letter-spacing: -.028em;
      text-align: center;
    }

    .h-sec .accent {
      color: var(--red);
    }

    .lede {
      color: var(--txt-2);
      font-size: clamp(18px, 4.4vw, 23px);
      line-height: 1.66;
      margin-top: 20px;
    }

    .quote-sec {
      text-align: center;
    }

    .quote-sec h2 {
      font-size: clamp(38px, 10.5vw, 80px);
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: -.03em;
    }

    .quote-sec h2 .accent {
      color: var(--red);
    }

    .quote-sec .sub {
      margin-top: 30px;
      font-size: clamp(19px, 4.8vw, 27px);
      font-weight: 700;
      color: var(--txt);
      line-height: 1.55;
    }

    .quote-sec .sub .accent {
      color: var(--red-soft);
    }

    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 40px;
    }

    .stat {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 38px 20px;
      transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
    }

    .stat:hover {
      transform: translateY(-5px);
      border-color: #34393f;
      box-shadow: 0 24px 50px -28px rgba(255, 47, 47, .4);
    }

    .stat .num {
      font-size: clamp(50px, 15vw, 90px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.035em;
    }

    .stat .num.red {
      color: var(--red);
    }

    .stat .num.amber {
      color: var(--amber);
    }

    .stat .lbl {
      margin-top: 18px;
      font-size: 16.5px;
      font-weight: 600;
      color: var(--txt-2);
      line-height: 1.5;
    }

    /* one background video zone (band + funnel share a single bg) */
    .bg-zone {
      position: relative;
      overflow: hidden;
    }

    .bg-zone .zone-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .bg-zone .zone-ov {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .72) 50%, rgba(0, 0, 0, .86));
    }

    .bg-zone .zone-inner {
      position: relative;
      z-index: 2;
    }

    .video-band {
      position: relative;
      min-height: clamp(280px, 46vh, 480px);
      display: grid;
      place-items: center;
      text-align: center;
    }

    .video-band .vb-in {
      padding: 48px 22px;
      max-width: 900px;
    }

    .video-band h2 {
      font-size: clamp(30px, 7.8vw, 62px);
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: -.03em;
      text-shadow: 0 6px 36px rgba(0, 0, 0, .7);
    }

    .video-band h2 .c-cite {
      color: var(--purple);
    }

    .video-band h2 .accent {
      color: var(--red-soft);
    }

    .video-band p {
      margin-top: 22px;
      font-size: clamp(17px, 4.2vw, 23px);
      color: #eef1f5;
      font-weight: 600;
      line-height: 1.7;
      text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
    }

    .video-band p .accent {
      color: var(--red-soft);
      font-weight: 800;
    }

    .funnel-rows {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .frow {
      display: flex;
      flex-direction: column;
      gap: 11px;
      background: rgba(17, 19, 23, .92);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px 22px;
      border-left: 5px solid var(--line);
      transition: transform .3s var(--ease);
      backdrop-filter: blur(2px);
    }

    .frow:hover {
      transform: translateX(8px);
    }

    .frow .frow-head {
      display: flex;
      align-items: baseline;
      gap: 14px;
    }

    .frow .pct {
      font-size: clamp(32px, 8.6vw, 48px);
      font-weight: 900;
      line-height: 1;
    }

    .frow .frow-head b {
      font-size: clamp(19px, 5vw, 22px);
      font-weight: 800;
    }

    .frow p {
      font-size: clamp(15px, 4vw, 17px);
      color: var(--txt-2);
      line-height: 1.7;
    }

    .frow .tag {
      align-self: flex-start;
      font-size: 13px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 999px;
    }

    .frow.ignore {
      border-left-color: #3a3f49;
    }

    .frow.ignore .pct {
      color: #7b818c;
    }

    .frow.cite {
      border-left-color: var(--purple);
    }

    .frow.cite .pct {
      color: var(--purple);
    }

    .frow.cite .tag {
      background: rgba(176, 107, 255, .2);
      color: #cba8ff;
      animation: tagpulse 2s ease-in-out infinite;
    }

    @keyframes tagpulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(176, 107, 255, .55);
        transform: scale(1);
      }

      50% {
        box-shadow: 0 0 0 9px rgba(176, 107, 255, 0);
        transform: scale(1.05);
      }
    }

    .frow.reco {
      border-left-color: var(--green);
    }

    .frow.reco .pct {
      color: var(--green);
    }

    .frow.reco .tag {
      background: rgba(55, 224, 138, .15);
      color: #8af0ba;
    }

    .funnel-vis {
      text-align: center;
    }

    .funnel-vis .ftitle {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .06em;
      color: var(--txt-2);
      margin-bottom: 18px;
    }

    /* journey diagram (전문영역/현재목표/다음단계) */
    .journey {
      position: relative;
      max-width: 680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .journey .jline {
      position: absolute;
      left: 26px;
      top: 34px;
      bottom: 34px;
      width: 2px;
      background: linear-gradient(180deg, var(--purple), var(--red-soft) 55%, var(--green));
      opacity: .55;
    }

    .jstep {
      position: relative;
      display: flex;
      gap: 18px;
      align-items: flex-start;
      z-index: 1;
    }

    .jnode {
      flex: none;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: 17px;
      background: #0d0f13;
      border: 2px solid var(--line);
    }

    .jnode.n1 {
      border-color: var(--purple);
      color: #cba8ff;
      box-shadow: 0 0 18px -4px rgba(176, 107, 255, .6);
    }

    .jnode.n2 {
      border-color: var(--red-soft);
      color: var(--red-soft);
      box-shadow: 0 0 18px -4px rgba(255, 90, 90, .6);
    }

    .jnode.n3 {
      border-color: var(--green);
      color: #8af0ba;
      box-shadow: 0 0 18px -4px rgba(55, 224, 138, .6);
    }

    .jcard {
      flex: 1;
      background: linear-gradient(160deg, #14161c, #0c0d11);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 20px 22px;
    }

    .jcard .jtag {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      color: var(--red-soft);
      margin-bottom: 9px;
    }

    .jcard p {
      font-size: clamp(17px, 4.4vw, 22px);
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: -.01em;
    }

    .jcard p .accent {
      color: var(--red);
    }

    .jcard p b {
      font-weight: 900;
    }

    .reads h2 {
      text-align: center;
    }

    .reads .ask {
      text-align: center;
      font-size: clamp(24px, 6.6vw, 40px);
      font-weight: 900;
      margin-top: clamp(44px, 10vw, 80px);
      color: #fff;
      letter-spacing: -.02em;
    }

    .reads ol {
      max-width: 840px;
      margin: 30px auto 0;
      list-style: none;
      display: grid;
      gap: 16px;
    }

    .reads ol li {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px 24px;
      font-size: clamp(18px, 4.8vw, 26px);
      font-weight: 700;
      color: var(--txt);
      display: flex;
      gap: 14px;
      line-height: 1.45;
    }

    .reads ol li b {
      color: var(--red-soft);
      flex: none;
      font-weight: 900;
    }

    .marquee {
      margin-top: clamp(44px, 10vw, 80px);
      overflow: hidden;
      overflow-x: clip;
      max-width: 100%;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }

    .mtrack {
      display: flex;
      gap: 16px;
      width: max-content;
      animation: flowx 24s linear infinite;
      will-change: transform;
    }

    @keyframes flowx {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .mlogo {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 16px 28px;
      font-weight: 800;
      font-size: 20px;
      white-space: nowrap;
    }

    .mlogo svg {
      flex: none;
    }

    .ctx h2 {
      text-align: center;
    }

    .ctx .qcard {
      max-width: 660px;
      margin: 42px auto 0;
      background: linear-gradient(180deg, #101218, #0a0b0f);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 30px;
    }

    .ctx .qlabel {
      font-size: 14px;
      font-weight: 700;
      color: var(--purple);
      letter-spacing: .06em;
      margin-bottom: 14px;
    }

    .ctx .userq {
      background: #1a1d24;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 22px;
      font-size: clamp(20px, 5vw, 28px);
      font-weight: 800;
      font-style: italic;
      line-height: 1.45;
      color: #fff;
    }

    .mods {
      margin-top: 26px;
      padding-top: 26px;
      border-top: 1px dashed var(--line);
    }

    .mods .mlabel {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--txt-3);
      letter-spacing: .08em;
      margin-bottom: 16px;
      text-align: center;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      justify-content: center;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 17px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 700;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .18s var(--ease), background .2s;
    }

    .chip small {
      font-size: 12px;
      font-weight: 800;
      opacity: .75;
    }

    .chip.c1 {
      background: rgba(91, 157, 255, .14);
      color: #9cc4ff;
      border-color: rgba(91, 157, 255, .3);
    }

    .chip.c2 {
      background: rgba(176, 107, 255, .14);
      color: #cba8ff;
      border-color: rgba(176, 107, 255, .3);
    }

    .chip.c3 {
      background: rgba(255, 176, 46, .14);
      color: #ffce7d;
      border-color: rgba(255, 176, 46, .3);
    }

    .chip.c4 {
      background: rgba(55, 224, 138, .14);
      color: #8af0ba;
      border-color: rgba(55, 224, 138, .3);
    }

    .chip:hover,
    .chip.active {
      transform: translateY(-2px) scale(1.05);
    }

    .chip.active {
      box-shadow: 0 0 0 2px currentColor inset;
    }

    .faq-list-demo {
      margin-top: 20px;
      display: grid;
      gap: 9px;
    }

    .faq-list-demo .fq {
      background: #13161c;
      border: 1px solid var(--line-soft);
      border-radius: 13px;
      padding: 14px 16px;
      font-size: 15px;
      color: var(--txt-2);
      display: flex;
      gap: 10px;
      align-items: center;
      transition: all .3s var(--ease);
    }

    .faq-list-demo .fq .q {
      color: var(--green);
      font-weight: 800;
      flex: none;
    }

    .faq-list-demo.filtering .fq:not(.hi) {
      opacity: .28;
    }

    .faq-list-demo .fq.hi {
      border-color: var(--green);
      background: rgba(55, 224, 138, .1);
      opacity: 1;
      transform: translateX(4px);
      box-shadow: 0 8px 24px -16px rgba(55, 224, 138, .7);
    }

    .ctx-sign {
      max-width: 760px;
      margin: clamp(48px, 11vw, 88px) auto clamp(20px, 6vw, 44px);
      text-align: center;
    }

    .ctx-sign p {
      font-size: clamp(19px, 4.8vw, 26px);
      color: var(--txt-2);
      line-height: 1.75;
    }

    .ctx-sign p b {
      color: #fff;
      font-weight: 800;
    }

    .ctx-sign .signal {
      margin-top: 24px;
      font-size: clamp(24px, 6.4vw, 40px);
      font-weight: 900;
      color: #fff;
      font-style: italic;
      letter-spacing: -.02em;
      line-height: 1.4;
    }

    .swipe-head {
      text-align: center;
      margin-bottom: 28px;
    }

    .swiper {
      display: flex;
      gap: 18px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 8px 22px 26px;
      margin: 0;
      max-width: 100%;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: auto;
      cursor: grab;
    }

    .ref-head {
      text-align: center;
      margin-bottom: 28px;
    }

    .ref-swiper-shell {
      position: relative;
      max-width: 480px;
      margin: 0 auto;
      padding: 0 52px;
    }

    #refSwiper.ref-swiper {
      display: block;
      overflow: hidden;
      width: 100%;
      padding: 0;
      margin: 0;
      scroll-snap-type: none;
      scroll-behavior: auto;
      cursor: default;
      touch-action: auto;
    }

    .ref-swiper {
      overflow: hidden;
      width: 100%;
    }

    .ref-swiper .swiper-slide {
      height: auto;
      box-sizing: border-box;
    }

    .ref-swiper-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: rgba(255, 255, 255, 0.88);
      cursor: pointer;
    }

    .ref-swiper-nav:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.28);
    }

    .ref-swiper-nav:active {
      transform: translateY(-50%) scale(0.94);
    }

    .ref-swiper-nav.swiper-button-disabled {
      opacity: 0.35;
      cursor: default;
      pointer-events: none;
    }

    .ref-swiper-prev {
      left: 0;
    }

    .ref-swiper-next {
      right: 0;
    }

    @media (max-width: 480px) {
      .ref-swiper-shell {
        padding: 0 44px;
      }

      .ref-swiper-nav {
        width: 36px;
        height: 36px;
      }
    }

    .swiper a,
    .swiper button {
      cursor: pointer;
    }

    .swiper img {
      -webkit-user-drag: none;
      user-select: none;
      pointer-events: none;
    }

    .swiper.is-dragging {
      cursor: grabbing;
      scroll-snap-type: none;
      scroll-behavior: auto;
      user-select: none;
      touch-action: pan-x;
    }

    .swiper.is-dragging a {
      pointer-events: none;
    }

    .swiper::-webkit-scrollbar {
      display: none;
    }

    .slide {
      scroll-snap-align: start;
      scroll-snap-stop: always;
      flex: 0 0 80%;
      max-width: 440px;
      min-width: 0;
    }

    @media(min-width:760px) {
      .slide {
        flex: 0 0 46%;
      }
    }

    @media(min-width:1024px) {
      .slide {
        flex: 0 0 31%;
      }
    }

    #algoSwiper.algo-swiper {
      display: block;
      overflow: hidden;
      width: 100%;
      padding: 8px 22px 26px;
      margin: 0;
      max-width: 100%;
      scroll-snap-type: none;
      scroll-behavior: auto;
      cursor: default;
      touch-action: auto;
    }

    #algoSwiper .swiper-slide {
      height: auto;
      box-sizing: border-box;
    }

    @media(min-width:1024px) {
      #algoSwiper.algo-swiper {
        max-width: none;
        margin: 0;
      }
    }

    .swiper-wrap {
      position: relative;
      max-width: 100%;
      overflow-x: clip;
    }

    .swiper-wrap:not(.can-scroll) .swiper {
      justify-content: center;
    }

    .swiper-wrap:not(.can-scroll) .slide {
      scroll-snap-align: center;
    }

    .swiper-arrow {
      display: none;
    }

    @media(min-width:1024px) {
      .swiper-wrap.can-scroll .swiper-arrow {
        display: grid;
        place-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: rgba(255, 255, 255, 0.82);
        cursor: pointer;
        opacity: 0.72;
        transition: opacity 0.25s var(--ease), background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
      }

      .swiper-wrap.can-scroll .swiper-arrow:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.28);
      }

      .swiper-wrap.can-scroll .swiper-arrow:active {
        transform: translateY(-50%) scale(0.94);
      }

      .swiper-prev {
        left: 14px;
      }

      .swiper-next {
        right: 14px;
      }
    }

    .feature-sec .feature-grid {
      display: grid;
      gap: clamp(36px, 6vw, 60px);
      align-items: center;
    }

    @media(min-width:860px) {
      .feature-sec .feature-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .feature-sec .ftxt h2 {
      font-size: clamp(30px, 7.2vw, 52px);
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: -.025em;
      text-align: center;
    }

    .feature-sec .ftxt h2 .accent {
      color: var(--red);
    }

    .chat-light {
      background: #fff;
      border-radius: 26px;
      padding: 24px;
      box-shadow: 0 44px 100px -36px rgba(0, 0, 0, .65);
      max-width: 460px;
      margin: 0 auto;
      width: 100%;
    }

    .chat-light .cl-bar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding-bottom: 14px;
      border-bottom: 1px solid #eef0f3;
      margin-bottom: 18px;
    }

    .chat-light .cl-bar i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: block;
    }

    .chat-light .cl-bar i:nth-child(1) {
      background: #ff5f56;
    }

    .chat-light .cl-bar i:nth-child(2) {
      background: #ffbd2e;
    }

    .chat-light .cl-bar i:nth-child(3) {
      background: #27c93f;
    }

    .chat-light .cl-bar .t {
      margin-left: auto;
      font-size: 12.5px;
      font-weight: 800;
      color: #0c0d11;
      letter-spacing: .02em;
    }

    .cl-msg {
      max-width: 90%;
      padding: 13px 16px;
      border-radius: 16px;
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 12px;
      font-weight: 600;
    }

    .cl-msg.u {
      margin-left: auto;
      background: #eaf0fb;
      color: #0c0d11;
      border-bottom-right-radius: 5px;
    }

    .cl-msg.a {
      background: #f5f6f8;
      color: #23262d;
      border-bottom-left-radius: 5px;
    }

    .cl-msg.a b {
      color: var(--red-deep);
      font-weight: 800;
    }

    .cl-cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 13px;
      background: linear-gradient(180deg, var(--red), var(--red-deep));
      color: #fff;
      font-weight: 800;
      font-size: 14.5px;
      padding: 12px 18px;
      border-radius: 13px;
      box-shadow: 0 12px 26px -12px rgba(255, 47, 47, .7);
      transition: transform .2s var(--ease);
    }

    .cl-cta:hover {
      transform: translateY(-2px);
    }

    .algo-card {
      background: linear-gradient(170deg, #14161c, #0b0c10);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 36px 30px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .algo-card .step {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .14em;
      color: var(--txt-3);
      margin-bottom: 24px;
    }

    .algo-card .ico {
      width: 72px;
      height: 72px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      font-size: 34px;
      margin-bottom: 26px;
    }

    .algo-card .ico.i1 {
      background: radial-gradient(circle at 30% 30%, rgba(255, 176, 46, .3), rgba(255, 176, 46, .06));
      box-shadow: 0 0 0 1px rgba(255, 176, 46, .3);
    }

    .algo-card .ico.i2 {
      background: radial-gradient(circle at 30% 30%, rgba(91, 157, 255, .3), rgba(91, 157, 255, .06));
      box-shadow: 0 0 0 1px rgba(91, 157, 255, .3);
    }

    .algo-card .ico.i3 {
      background: radial-gradient(circle at 30% 30%, rgba(176, 107, 255, .3), rgba(176, 107, 255, .06));
      box-shadow: 0 0 0 1px rgba(176, 107, 255, .3);
    }

    .algo-card .ico.i4 {
      background: radial-gradient(circle at 30% 30%, rgba(55, 224, 138, .32), rgba(55, 224, 138, .06));
      box-shadow: 0 0 0 1px rgba(55, 224, 138, .35);
    }

    .algo-card h3 {
      font-size: clamp(26px, 6.6vw, 34px);
      font-weight: 900;
      letter-spacing: -.015em;
    }

    .algo-card .desc {
      margin-top: 16px;
      font-size: 17.5px;
      line-height: 1.6;
      color: var(--txt-2);
    }

    .algo-card .meta {
      margin-top: auto;
      padding-top: 24px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .algo-card .meta.amber {
      color: var(--amber);
    }

    .algo-card .meta.red {
      color: var(--red-soft);
    }

    .algo-card .meta.blue {
      color: var(--blue);
    }

    .algo-card .meta.green {
      color: var(--green);
    }

    .cost h2 {
      text-align: center;
    }

    .circles {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: clamp(12px, 4vw, 46px);
      margin-top: 54px;
      flex-wrap: wrap;
    }

    .circle-item {
      text-align: center;
      flex: 1 1 96px;
      min-width: 100px;
    }

    .circ {
      margin: 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-weight: 900;
      color: #fff;
      position: relative;
      transform: scale(.35);
      opacity: 0;
      transition: transform 1s var(--ease-out), opacity .6s;
    }

    .cost.in .circ {
      transform: scale(1);
      opacity: 1;
    }

    .circ::after {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 2px solid currentColor;
      opacity: .4;
      animation: ring 2.6s ease-out infinite;
    }

    @keyframes ring {
      0% {
        transform: scale(1);
        opacity: .4;
      }

      100% {
        transform: scale(1.22);
        opacity: 0;
      }
    }

    .circ.c-early {
      width: clamp(94px, 27vw, 150px);
      height: clamp(94px, 27vw, 150px);
      font-size: clamp(20px, 5.4vw, 30px);
      background: radial-gradient(circle at 35% 30%, rgba(55, 224, 138, .28), rgba(55, 224, 138, .04));
      box-shadow: 0 0 0 2px var(--green), 0 0 44px -8px rgba(55, 224, 138, .6);
      color: var(--green);
      transition-delay: .05s;
    }

    .circ.c-mid {
      width: clamp(122px, 35vw, 196px);
      height: clamp(122px, 35vw, 196px);
      font-size: clamp(24px, 6.4vw, 36px);
      background: radial-gradient(circle at 35% 30%, rgba(255, 176, 46, .26), rgba(255, 176, 46, .04));
      box-shadow: 0 0 0 2px var(--amber), 0 0 50px -8px rgba(255, 176, 46, .55);
      color: var(--amber);
      transition-delay: .2s;
    }

    .circ.c-late {
      width: clamp(152px, 44vw, 250px);
      height: clamp(152px, 44vw, 250px);
      font-size: clamp(28px, 8vw, 46px);
      background: radial-gradient(circle at 35% 30%, rgba(255, 47, 47, .3), rgba(255, 47, 47, .05));
      box-shadow: 0 0 0 2px var(--red), 0 0 62px -6px rgba(255, 47, 47, .6);
      color: var(--red-soft);
      transition-delay: .35s;
    }

    .circle-item .ctitle {
      margin-top: 18px;
      font-size: clamp(17px, 4.2vw, 21px);
      font-weight: 900;
    }

    .circle-item .csub {
      margin-top: 7px;
      font-size: 14px;
      color: var(--txt-2);
      line-height: 1.5;
    }

    .circle-item.early .ctitle {
      color: var(--green);
    }

    .circle-item.mid .ctitle {
      color: var(--amber);
    }

    .circle-item.late .ctitle {
      color: var(--red-soft);
    }

    .cost-foot {
      text-align: center;
      margin-top: 50px;
      font-size: clamp(22px, 6vw, 34px);
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .cost-foot .accent {
      color: var(--red-soft);
    }

    .ref-card {
      background: linear-gradient(175deg, #14161c, #0a0b0f);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .ref-shot {
      position: relative;
      flex-shrink: 0;
      width: 100%;
      aspect-ratio: 16 / 10;
      min-height: 180px;
      overflow: hidden;
      background: repeating-linear-gradient(135deg, #16191f 0 14px, #13161b 14px 28px);
      border-bottom: 1px solid var(--line);
    }

    .ref-shot .ph {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: #454a54;
    }

    .ref-shot .ph img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center top;
    }

    .ref-shot .ph svg {
      opacity: .7;
    }

    .ref-shot .ph span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .05em;
    }

    .ref-shot .badge {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 2;
      font-size: 12px;
      font-weight: 800;
      padding: 6px 13px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .6);
      border: 1px solid var(--line);
      color: var(--txt-2);
      backdrop-filter: blur(4px);
    }

    .ref-body {
      padding: 26px 26px 28px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .ref-body .cat {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--txt-3);
    }

    .ref-body .brand {
      font-size: clamp(22px, 5.4vw, 28px);
      font-weight: 900;
      margin-top: 7px;
    }

    .ref-body .url {
      font-size: 13.5px;
      color: var(--txt-3);
      margin-top: 5px;
    }

    .ref-body .rank {
      font-size: clamp(28px, 7.2vw, 38px);
      font-weight: 900;
      color: var(--green);
      margin-top: 18px;
      letter-spacing: -.015em;
    }

    .ref-link {
      margin-top: auto;
      padding-top: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 800;
      color: var(--blue);
    }

    .ref-link .ar {
      display: inline-block;
    }

    .dl-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin: 36px auto 0;
      max-width: 880px;
    }

    .dl-banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
      background: linear-gradient(160deg, #15171d, #101216);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 30px 26px;
      margin: 0;
      max-width: none;
      height: 100%;
    }

    .dl-banner .doc {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: rgba(255, 47, 47, .12);
    }

    .dl-banner .doc svg {
      width: 26px;
      height: 26px;
    }

    .dl-banner .doc--service {
      background: rgba(77, 141, 255, .14);
    }

    .dl-banner .dl-title {
      font-weight: 800;
      font-size: 18px;
      line-height: 1.35;
      word-break: keep-all;
    }

    .dl-banner .btn-dl {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: linear-gradient(180deg, var(--red), var(--red-deep));
      color: #fff;
      font-weight: 800;
      font-size: 15px;
      padding: 14px 26px;
      border-radius: 13px;
      white-space: nowrap;
    }

    .dl-banner .btn-dl svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .dl-banner .btn-dl--service {
      background: linear-gradient(180deg, var(--blue), var(--blue-deep));
    }

    @media(max-width:640px) {
      .dl-grid {
        gap: 12px;
        max-width: 100%;
      }

      .dl-banner {
        padding: 30px 12px;
      }

      .dl-banner .btn-dl {
        gap: 6px;
        padding: 12px 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
    }

    .promo-sec h2 {
      text-align: center;
    }

    .promo-sec .kicker {
      display: block;
      text-align: center;
      width: max-content;
      margin-left: auto;
      margin-right: auto;
      font-size: clamp(15px, 4vw, 19px);
      color: #fff;
      background: linear-gradient(180deg, var(--red), var(--red-deep));
      padding: 9px 20px;
      border-radius: 999px;
      animation: kpulse 2s ease-in-out infinite;
    }

    .price-anchor {
      max-width: 600px;
      margin: 42px auto 0;
      text-align: center;
    }

    .price-anchor .orig {
      font-size: clamp(24px, 6vw, 32px);
      font-weight: 800;
      color: var(--txt-3);
    }

    .price-anchor .orig .olabel {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--txt-3);
      margin-bottom: 8px;
      letter-spacing: .04em;
    }

    .price-anchor .oval {
      position: relative;
      display: inline-block;
    }

    .price-anchor .oval .strike {
      position: absolute;
      left: 0;
      top: 50%;
      height: 5px;
      width: 0;
      background: var(--red);
      border-radius: 3px;
      transform: translateY(-50%) rotate(-7deg);
    }

    .price-anchor.in .oval .strike {
      animation: strike 1s var(--ease) .3s forwards;
    }

    @keyframes strike {
      to {
        width: 100%;
      }
    }

    .price-anchor .now {
      margin-top: 22px;
    }

    .price-anchor .now .nlabel {
      font-size: 14px;
      font-weight: 800;
      color: var(--red-soft);
      letter-spacing: .04em;
    }

    .price-anchor .now .val {
      font-size: clamp(54px, 15vw, 96px);
      font-weight: 900;
      color: #fff;
      line-height: 1;
      letter-spacing: -.035em;
      margin-top: 8px;
    }

    .price-anchor .now .val small {
      font-size: .4em;
      font-weight: 800;
    }

    .escal {
      max-width: 720px;
      margin: 46px auto 0;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 32px 24px 28px;
    }

    .escal .etitle {
      font-size: clamp(20px, 5.2vw, 28px);
      font-weight: 900;
      letter-spacing: -.01em;
      color: var(--txt);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .escal .ewarn {
      color: var(--amber);
    }

    .bars {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px;
      height: 260px;
      margin-top: 30px;
    }

    .bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      gap: 12px;
    }

    .bar {
      width: 100%;
      max-width: 54px;
      border-radius: 12px 12px 5px 5px;
      height: 0;
      transition: height 1s var(--ease);
      position: relative;
    }

    .escal.in .bar {
      height: var(--h);
    }

    .bar .bv {
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
      opacity: 0;
      transition: opacity .4s .8s;
    }

    .escal.in .bar .bv {
      opacity: 1;
    }

    .bar-col .bm {
      font-size: 13px;
      font-weight: 700;
      color: var(--txt-3);
    }

    .bar.b1 {
      background: linear-gradient(180deg, #2a6f4d, #1d4f37);
    }

    .bar.b1 .bv {
      color: #6fe6a8;
    }

    .bar.b2 {
      background: linear-gradient(180deg, #3a6f3a, #2a4f2a);
    }

    .bar.b2 .bv {
      color: #a8e66f;
    }

    .bar.b3 {
      background: linear-gradient(180deg, #8a6a1f, #5f4a15);
    }

    .bar.b3 .bv {
      color: var(--amber);
    }

    .bar.b4 {
      background: linear-gradient(180deg, #9a4a1f, #6f3415);
    }

    .bar.b4 .bv {
      color: #ff9a5a;
    }

    .bar.b5 {
      background: linear-gradient(180deg, #b33820, #8a2a18);
    }

    .bar.b5 .bv {
      color: #ff7a55;
    }

    .bar.b6 {
      background: linear-gradient(180deg, var(--red), var(--red-deep));
    }

    .bar.b6 .bv {
      color: var(--red-soft);
    }

    .mission {
      max-width: 760px;
      margin: 44px auto 0;
      text-align: center;
    }

    .mission p {
      font-size: clamp(17px, 4.2vw, 21px);
      color: var(--txt-2);
      line-height: 1.85;
    }

    .mission p strong {
      color: var(--red-soft);
      font-weight: 800;
    }

    .mission .punch {
      margin-top: 24px;
      font-size: clamp(22px, 6vw, 34px);
      font-weight: 900;
      font-style: italic;
      letter-spacing: -.02em;
      line-height: 1.35;
    }

    .plans {
      display: grid;
      gap: 20px;
      margin: 50px 0 0;
    }

    @media(min-width:840px) {
      .plans {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
      }
    }

    .plan {
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      transition: transform .3s var(--ease);
      display: flex;
      flex-direction: column;
    }

    .plan:hover {
      transform: translateY(-6px);
    }

    .plan-tag {
      font-size: clamp(14px, 3.7vw, 17px);
      font-weight: 900;
      letter-spacing: .01em;
      padding: 16px 120px 16px 22px;
      color: #fff;
    }

    .plan01 .plan-tag {
      background: #000;
      border: 1px solid var(--line);
      border-bottom: none;
    }

    .plan02 .plan-tag {
      background: linear-gradient(90deg, var(--red-deep), var(--red));
    }

    .plan-body {
      background: #fff;
      color: #0c0d11;
      padding: 32px 24px 28px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .plan02 .plan-body {
      box-shadow: 0 0 0 2px var(--red);
    }

    .plan .recommend {
      position: absolute;
      top: 15px;
      right: 16px;
      z-index: 2;
      background: #000;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      padding: 7px 13px;
      border-radius: 999px;
    }

    .plan02 .recommend {
      background: #fff;
      color: var(--red-deep);
    }

    .plan-body .ptitle {
      font-size: clamp(22px, 5.4vw, 28px);
      font-weight: 900;
      letter-spacing: -.015em;
    }

    .plan-body .porig {
      margin-top: 18px;
      font-size: 16.5px;
      font-weight: 700;
      color: #9aa0aa;
      text-decoration: line-through;
    }

    .plan-body .prow {
      display: flex;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .plan-body .pprice {
      font-size: clamp(54px, 14vw, 84px);
      font-weight: 900;
      line-height: .92;
      letter-spacing: -.035em;
      color: #0c0d11;
    }

    .plan-body .pprice small {
      font-size: .32em;
      font-weight: 800;
    }

    .plan-body .poff {
      font-size: clamp(17px, 4.4vw, 22px);
      font-weight: 900;
      color: var(--red-deep);
    }

    .plan-body .feat {
      margin-top: 28px;
      border-top: 1px solid #ececef;
      padding-top: 8px;
    }

    .plan-body .feat li {
      list-style: none;
      display: flex;
      gap: 11px;
      padding: 13px 0;
      font-size: 16px;
      color: #23262d;
      border-bottom: 1px solid #f0f0f3;
      align-items: flex-start;
    }

    .plan-body .feat li:last-child {
      border-bottom: none;
    }

    .plan-body .feat li .ck {
      flex: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #0c0d11;
      color: #fff;
      font-size: 11px;
      margin-top: 2px;
    }

    .plan02 .feat li .ck {
      background: var(--red-deep);
    }

    .plan-body .feat li small {
      color: #8b929c;
    }

    .plan-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      font-weight: 900;
      font-size: clamp(18px, 4.6vw, 22px);
      padding: 20px;
      border-radius: 15px;
      margin-top: auto;
      transition: transform .2s var(--ease);
    }

    .plan01 .plan-cta {
      background: #0c0d11;
      color: #fff;
    }

    .plan02 .plan-cta {
      background: linear-gradient(180deg, var(--red), var(--red-deep));
      color: #fff;
      box-shadow: 0 14px 30px -10px rgba(255, 47, 47, .7);
    }

    .plan-cta:hover {
      transform: translateY(-2px);
    }

    .faq h2 {
      text-align: center;
    }

    .faq-acc {
      max-width: 800px;
      margin: 46px auto 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .acc {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      transition: border-color .2s, background .2s;
    }

    .acc.open {
      border-color: #3a3f49;
      background: var(--bg-card-2);
    }

    .acc q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 24px 26px;
      cursor: pointer;
      font-size: clamp(17px, 4.4vw, 20px);
      font-weight: 800;
      quotes: none;
    }

    .acc q::before,
    .acc q::after {
      content: "";
    }

    .acc q .qx {
      flex: 1;
      text-align: left;
    }

    .acc q .pm {
      flex: none;
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 9px solid var(--red-soft);
      transition: transform .25s var(--ease);
      margin-top: 3px;
    }

    .acc.open q .pm {
      transform: rotate(180deg);
    }

    .acc .ans {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s var(--ease);
    }

    .acc .ans-in {
      padding: 0 26px 26px;
      font-size: 16px;
      color: var(--txt-2);
      line-height: 1.78;
    }

    .acc .ans-in p {
      margin-bottom: 14px;
    }

    .acc .ans-in p:last-child {
      margin-bottom: 0;
    }

    .acc .ans-in b {
      color: #fff;
      font-weight: 800;
    }

    .acc .ans-in .accent {
      color: var(--red-soft);
      font-weight: 800;
    }

    .contact-card {
      max-width: 600px;
      margin: 46px auto 0;
      background: linear-gradient(180deg, #101218, #0a0b0f);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(30px, 7vw, 48px);
    }

    .field {
      margin-bottom: 20px;
    }

    .field label {
      display: block;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--txt-2);
      margin-bottom: 9px;
    }

    .field label .req {
      color: var(--red);
    }

    .field label .opt {
      color: var(--txt-3);
      font-weight: 600;
    }

    .field input {
      width: 100%;
      background: #0b0c10;
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 16px 17px;
      color: #fff;
      font-size: 16.5px;
      font-family: inherit;
      transition: border-color .2s, box-shadow .2s;
    }

    .field input:focus {
      outline: none;
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(255, 47, 47, .16);
    }

    .field input::placeholder {
      color: #5a606b;
    }

    .agree {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 8px 0 24px;
      font-size: 15px;
      color: var(--txt-2);
    }

    .agree input {
      width: 20px;
      height: 20px;
      accent-color: var(--red);
    }

    .form-honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .form-error {
      margin: 0 0 12px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 14px;
      color: #ffb4b4;
      background: rgba(255, 80, 80, 0.12);
      border: 1px solid rgba(255, 120, 120, 0.25);
    }

    .form-submit {
      width: 100%;
      background: linear-gradient(180deg, var(--red), var(--red-deep));
      color: #fff;
      font-weight: 900;
      font-size: 18px;
      padding: 19px;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: transform .2s var(--ease);
    }

    .form-submit:hover {
      transform: translateY(-2px);
    }

    .form-ok {
      display: none;
      text-align: center;
      padding: 34px 10px;
    }

    .form-ok.show {
      display: block;
    }

    .form-ok .ic {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(55, 224, 138, .14);
      display: grid;
      place-items: center;
      margin: 0 auto 20px;
      border: 1px solid rgba(55, 224, 138, .4);
    }

    .form-ok h3 {
      font-size: 23px;
      font-weight: 900;
    }

    .form-ok p {
      color: var(--txt-2);
      margin-top: 10px;
      font-size: 16px;
    }

    .logo-band {
      margin: 40px auto 0;
      max-width: 760px;
      border-radius: 24px;
      overflow: hidden;
      line-height: 0;
    }

    .logo-band video {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 24px;
    }

    @media(min-width:760px) {
      .logo-band {
        max-width: 1000px;
      }
    }

    .sticky-cta {
      position: fixed;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      bottom: 0;
      z-index: 100;
      overflow: hidden;
      display: flex;
      background: rgba(8, 9, 11, .92);
      backdrop-filter: blur(12px);
      border-top: 1px solid var(--line);
      transform: translateY(110%);
      transition: transform .4s var(--ease);
    }

    .sticky-cta.show {
      transform: none;
    }

    @media(max-width:1023px) {
      .sticky-cta .shine::after {
        display: none;
      }
    }

    .sticky-cta .s-txt {
      flex: 0 0 30%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 12px 10px;
    }

    .sticky-cta .s-txt .l2 {
      font-size: clamp(11px, 2.8vw, 16px);
      font-weight: 800;
      line-height: 1.35;
      display: inline-block;
      animation: stickyAccentPulse 1.6s ease-in-out infinite;
    }

    .sticky-cta .s-txt .l2 .accent {
      color: var(--red-soft);
    }

    @keyframes stickyAccentPulse {

      0%,
      100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 90, 90, 0);
      }

      50% {
        transform: scale(1.08);
        text-shadow: 0 0 14px rgba(255, 90, 90, 0.65);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .sticky-cta .s-txt .l2 {
        animation: none;
      }
    }

    .sticky-cta .s-btn {
      flex: 0 0 70%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, var(--red), var(--red-deep));
      color: #fff;
      font-weight: 900;
      font-size: clamp(15px, 4.2vw, 23px);
      padding: 14px 10px;
    }

    @media(max-width:760px) {
      .stats {
        gap: 12px;
      }
    }

    /* ——— 개인정보처리방침 모달 ——— */
    .legal-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .legal-modal[hidden] {
      display: none !important;
    }

    body.legal-modal-open {
      overflow: hidden;
    }

    .legal-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .82);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .legal-modal__panel {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 44rem;
      max-height: 85vh;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
      overflow: hidden;
    }

    @media (prefers-reduced-motion: no-preference) {
      .legal-modal.is-open .legal-modal__panel {
        animation: legal-modal-in .3s var(--ease-out);
      }

      .legal-modal.is-open .legal-modal__backdrop {
        animation: legal-modal-fade-in .25s ease;
      }
    }

    @keyframes legal-modal-in {
      from {
        opacity: 0;
        transform: scale(.96) translateY(16px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes legal-modal-fade-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .legal-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid var(--line-soft);
      flex-shrink: 0;
    }

    .legal-modal__title {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--txt);
      letter-spacing: -.02em;
    }

    .legal-modal__close {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .5rem;
      border: none;
      border-radius: 999px;
      background: transparent;
      color: var(--txt-3);
      cursor: pointer;
      transition: color .2s, background .2s;
    }

    .legal-modal__close:hover {
      color: var(--txt);
      background: rgba(255, 255, 255, .06);
    }

    .legal-modal__body {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
      color: var(--txt-2);
      font-size: 15px;
      line-height: 1.65;
    }

    .legal-modal__panel-content {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .legal-modal__panel-content[hidden] {
      display: none !important;
    }

    .legal-modal__intro {
      padding: 1.1rem 1.25rem;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--line-soft);
      border-radius: 14px;
    }

    .legal-modal__intro p {
      margin: 0;
      color: var(--txt);
      font-weight: 500;
    }

    .legal-modal__section-title {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin: 0 0 .75rem;
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--txt);
    }

    .legal-modal__section-dot {
      width: 6px;
      height: 6px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px rgba(55, 224, 138, .2);
    }

    .legal-modal__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .legal-modal__list li {
      display: flex;
      gap: .5rem;
      margin-bottom: .45rem;
    }

    .legal-modal__bullet {
      color: var(--txt-3);
      flex-shrink: 0;
    }

    .legal-modal__mb {
      margin-bottom: .75rem;
    }

    .legal-modal__panel-content section p {
      margin: 0;
    }

    .legal-link,
    .drawer .legal-link {
      font: inherit;
      color: inherit;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-align: inherit;
      text-decoration: none;
    }

    .drawer .legal-link {
      font-size: 26px;
      font-weight: 800;
      padding: 18px 0;
      width: 100%;
      border-bottom: 1px solid var(--line-soft);
      color: var(--txt);
      transition: color .2s, padding-left .2s;
    }

    .drawer .legal-link:hover {
      color: var(--red-soft);
      padding-left: 8px;
    }

    .agree-legal-link {
      margin-left: 4px;
      padding: 0;
      border: none;
      background: none;
      font: inherit;
      font-size: inherit;
      color: var(--green);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .agree-legal-link:hover {
      color: #5ef0a8;
    }