/* ── Font ─────────────────────────────────────────────────────────── */

      @font-face {
        font-family: "Pretendard";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2")
          format("woff2");
        font-weight: 400;
        font-display: swap;
      }

      @font-face {
        font-family: "Pretendard";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2")
          format("woff2");
        font-weight: 500;
        font-display: swap;
      }

      @font-face {
        font-family: "Pretendard";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2")
          format("woff2");
        font-weight: 700;
        font-display: swap;
      }

      /* ── Reset ─────────────────────────────────────────────────────────── */

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
      }

      a {
        color: inherit;
        text-decoration: none;
        background: none;
        border: 0;
        outline: none;
        box-shadow: none;
        cursor: pointer;
      }
      a:visited,
      a:active,
      a:focus,
      a:hover {
        color: inherit;
        text-decoration: none;
        outline: none;
        background: none;
      }

      /* ── Gate ──────────────────────────────────────────────────────────── */

      .gate {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }

      /* ── Background ────────────────────────────────────────────────────── */

      .gate__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: url("/images/bg_gate.jpg") no-repeat center center / cover;
      }

      .gate__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.2) 0%,
          transparent 66%
        );
      }

      /* ── Cards Container ───────────────────────────────────────────────── */

      .gate__cards {
        position: absolute;
        left: 272px;
        top: 50%;
        transform: translateY(calc(-50% - 27px));
        z-index: 1;

        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      /* ── Card Base ─────────────────────────────────────────────────────── */

      .gate__card {
        position: relative;
        padding: 30px 40px;
        border-radius: 24px;
        border: 2px solid rgba(255, 255, 255, 0.6);
        display: block;
        transition:
          background 0.4s ease,
          box-shadow 0.4s ease,
          backdrop-filter 0.4s ease,
          -webkit-backdrop-filter 0.4s ease,
          transform 0.4s ease;
      }

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

      /* ── Card Content ──────────────────────────────────────────────────── */

      .gate__card-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 540px;
        transition: opacity 0.4s ease;
      }

      .gate__flag {
        width: 143px;
        height: 95px;
        overflow: hidden;
        border: 1px solid transparent;
        transition: border-color 0.4s ease;
      }

      .gate__flag img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

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

      .gate__title {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.6px;
        line-height: normal;
        transition: color 0.4s ease;
      }

      .gate__desc {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: -0.36px;
        transition: color 0.4s ease;
      }

      /* ── Arrow Icon ────────────────────────────────────────────────────── */

      .gate__arrow {
        position: absolute;
        top: 28px;
        right: 40px;
        width: 60px;
        height: 60px;
        transition: color 0.4s ease;
      }

      /* ─────────────────────────────────────────────────────────────────── */
      /* ── Active State (흰색 카드) ──────────────────────────────────────── */
      /* ─────────────────────────────────────────────────────────────────── */

      .gate__card.is-active {
        background: #fff;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: none;
      }

      .gate__card.is-active .gate__card-content {
        opacity: 1;
      }

      .gate__card.is-active .gate__flag {
        border-color: #eee;
      }

      .gate__card.is-active .gate__title {
        background: linear-gradient(to bottom, #31a8dd, #3276a1);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      .gate__card.is-active .gate__desc {
        color: #222;
      }

      .gate__card.is-active .gate__arrow {
        color: #3a8dbd;
      }

      /* ─────────────────────────────────────────────────────────────────── */
      /* ── Glass State (반투명 카드) ─────────────────────────────────────── */
      /* ─────────────────────────────────────────────────────────────────── */

      .gate__card.is-glass {
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
          inset -3px -3px 10px 0 rgba(255, 255, 255, 0.2),
          inset 2px 2px 10px 0 rgba(255, 255, 255, 0.15);
      }

      .gate__card.is-glass .gate__card-content {
        opacity: 0.2;
      }

      .gate__card.is-glass .gate__flag {
        border-color: transparent;
      }

      .gate__card.is-glass .gate__title {
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: #fff;
        color: #fff;
      }

      .gate__card.is-glass .gate__desc {
        color: #fff;
      }

      .gate__card.is-glass .gate__arrow {
        color: rgba(255, 255, 255, 0.3);
      }

      /* ── Responsive ────────────────────────────────────────────────────── */

      @media screen and (max-width: 1400px) {
        .gate__cards {
          left: 140px;
        }
      }

      @media screen and (max-width: 1200px) {
        .gate__cards {
          left: 80px;
        }

        .gate__card-content {
          width: 440px;
        }

        .gate__title {
          font-size: 26px;
        }

        .gate__desc {
          font-size: 16px;
        }

        .gate__arrow {
          width: 48px;
          height: 48px;
          top: 24px;
          right: 30px;
        }
      }

      @media screen and (max-width: 768px) {
        .gate__cards {
          left: 20px;
          right: 20px;
          transform: translateY(-50%);
        }

        .gate__card-content {
          width: 100%;
        }

        .gate__card {
          padding: 24px;
        }

        .gate__flag {
          width: 90px;
          height: 60px;
        }

        .gate__title {
          font-size: 22px;
        }

        .gate__desc {
          font-size: 15px;
        }

        .gate__desc br {
          display: none;
        }

        .gate__arrow {
          width: 40px;
          height: 40px;
          top: 20px;
          right: 20px;
        }

        /* 모바일: 두 카드 모두 활성 상태 */
        .gate__card.is-glass {
          background: rgba(255, 255, 255, 0.01);
          box-shadow:
            inset -3px -3px 10px 0 rgba(255, 255, 255, 0.2),
            inset 2px 2px 10px 0 rgba(255, 255, 255, 0.15);
        }

        .gate__card.is-glass .gate__card-content {
          opacity: 1;
        }

        .gate__card.is-glass .gate__arrow {
          color: rgba(255, 255, 255, 0.7);
        }
      }

      @media screen and (max-width: 375px) {
        .gate__title {
          font-size: 20px;
        }

        .gate__desc {
          font-size: 14px;
        }

        .gate__flag {
          width: 72px;
          height: 48px;
        }
      }