influence/pages/index.vue

<template>
  <div class="login-wrap">
    <div class="login--gate" v-show="loginVisible == 'Y'">
      <div class="gate-container">
        <div
          class="gate-card influencer-gate"
          :class="gate1 ? 'actv' : ''"
          @mouseover="handleInfluenceMove"
          @click.stop="location('influence')"
          @mouseleave="gate1 = false"
        >
          <div class="gate-icon">
            <div class="icon-circle influencer-bg">
              ❤️
            </div>
          </div>
          <div class="gate-content">
            <h3>인플루언서</h3>
            <p>크리에이터와 함께하세요</p>
          </div>
        </div>

        <div
         @click.stop="location('vendor')"
          class="gate-card vendor-gate"
          :class="gate2 ? 'actv' : ''"
          @mouseover="handleVendorMove"
          @mouseleave="gate2 = false"
        >
          <div class="gate-icon">
            <div class="icon-circle vendor-bg">
              🛍️
            </div>
          </div>
          <div class="gate-content" >
            <h3>벤더사</h3>
            <p>상품을 판매해보세요</p>
          </div>
        </div>

        <div
         @click.stop="location('brand')"
          class="gate-card brand-gate"
          :class="gate3 ? 'actv' : ''"
          @mouseover="handleBrandMove"
          @mouseleave="gate3 = false"
        >
          <div class="gate-icon">
            <div class="icon-circle brand-bg">
              💎
            </div>
          </div>
          <div class="gate-content">
            <h3>브랜드사</h3>
            <p>브랜드를 성장시켜보세요</p>
          </div>
        </div>
      </div>
    </div>

    <div class="login--cock" v-show="loginVisible == 'N'">
      <!-- header -->
      <div class="login--header">
        <div class="login--header--l">
          <div class="logo">
            SHOPDELI
          </div>
        </div>
        <div class="login--header--r"></div>
      </div>
      <!-- login -->
      <div class="login-box">
        <div class="login-l">
          <div class="login-l-center">
            <span class="logo">
              <!-- prettier-ignore  -->
              SHOPDELI
            </span>
            <!-- <p>We Make Scalable Mobility Life</p> -->
          </div>
        </div>
        <div class="login-r">
          <div class="tit-login">
            <strong>{{ route.query.type == 'brand' ? '브랜드사' : route.query.type == 'vendor' ? '벤더사' : '' }} 로그인</strong>
          </div>
          <div class="login-input-wrap">
            <div
              class="txt-field-box"
              :class="!loginForm.validCheck.input.userId ? 'error' : ''"
            >
              <v-text-field
                v-model="loginForm.userId"
                placeholder="아이디를 입력해주세요"
                class="custom-input"
                @keyup.enter="
                  loginAction(loginForm.userId, loginForm.passwd, loginForm.loginType)
                "
                @input="setInputField('main_userId')"
              ></v-text-field>
              <i class="ico"></i>
            </div>
            <div
              class="txt-field-box"
              :class="!loginForm.validCheck.input.passwd ? 'error' : ''"
            >
              <v-text-field
                v-model="loginForm.passwd"
                :type="visible ? 'text' : 'password'"
                placeholder="비밀번호를 입력해주세요"
                class="custom-input"
                id="password"
                @keyup.enter="
                  loginAction(loginForm.userId, loginForm.passwd, loginForm.loginType)
                "
                @input="setInputField('main_passwd')"
              ></v-text-field>
              <i
                class="ico-eye"
                @click.stop="toggleVisibility"
                :class="visible ? 'eye-on' : 'eye-off'"
              ></i>
              <i class="ico"></i>
            </div>
            <!-- <p class="error-txt" v-if="!loginForm.validCheck.inputErrorCheck">
              {{ loginForm.validCheck.passwd }}
            </p> -->
          </div>

          <div class="login-btn-wrap">
            <v-btn
              v-if="loginForm.loginType == 'influence'"
              class="custom-btn btn-blue"
              @keyup.enter="loginAction(loginForm.userId, loginForm.passwd, 'influence')"
              @click="loginAction(loginForm.userId, loginForm.passwd, 'influence')"
              >로그인</v-btn
            >
            <v-btn
              v-else-if="loginForm.loginType == 'vendor'"
              class="custom-btn btn-blue"
              @keyup.enter="loginAction(loginForm.userId, loginForm.passwd, 'vendor')"
              @click="loginAction(loginForm.userId, loginForm.passwd, 'vendor')"
              >로그인</v-btn
            >
            <v-btn
              v-else-if="loginForm.loginType == 'brand'"
              class="custom-btn btn-blue"
              @keyup.enter="loginAction(loginForm.userId, loginForm.passwd, 'brand')"
              @click="loginAction(loginForm.userId, loginForm.passwd, 'brand')"
              >로그인</v-btn
            >
          </div>
          <div class="join--btn--wrap">
            <v-btn class="custom-btn text--btn" @click="showComingSoon">아이디 찾기</v-btn>
            <v-btn class="custom-btn text--btn" @click="showComingSoon">비밀번호 찾기</v-btn>
            <v-btn class="custom-btn text--btn" @click="location('join')">회원가입</v-btn>
          </div>
          <div class="short--login--wrap" v-if="loginForm.loginType == 'influence'">
            <v-btn class="btn--google" @click.stop="onGoogleLogin"></v-btn>
            <v-btn class="btn--kakao" @click.stop="onKakaoLogin"></v-btn>
            <v-btn class="btn--naver" @click.stop="onNaverLogin"></v-btn>
          </div>
        </div>
      </div>

      <!-- footer -->
      <div class="login-footer">
        <div class="login--footer--l">
          <p>COPYRIGHT@2025 SHOPDELI INC. ALL RIGHTS RESERVED.</p>
          <p>마포구 합정동</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  /************************
   *    import
   ************************/
  //import PrivacyPop from "@/components/login/privacyPop.vue";
  //import AgrNPop from "@/components/terms/agreeNListPop.vue";
  import { useI18n } from "vue-i18n";

  /************************
   *    layout setting
   ************************/
  definePageMeta({
    layout: "loginlayout",
  });

  /************************
   *    plugins inject
   ************************/
  const { $dayjs, $log, $eventBus, $toast, $userAgent } = useNuxtApp();

  const useStore = useDetailStore();
  const route = useRoute();
  /************************
   *    data & created
   ************************/

  // 현재 입력 중인 필드를 설정하는 함수
  const setInputField = (name) => {
    fnValidCheck(name);
  };
  const pageId = "login";
  const gate1 = ref(false);
  const gate2 = ref(false);
  const gate3 = ref(false);
  const loginVisible = ref("N");

  const i18n = useI18n();
  // 다국어
  let listObj = ref({
    langTypeList: {},
  });
  // 로그인 정보
  const loginForm = ref({
    userId: "",
    passwd: "",
    otpNum: "",
    username: "",
    authType: "GOOGLE",
    userAgent: "",
    loginType: "",
    validCheck: {
      input: {
        userId: true,
        passwd: true,
      },
      otp: {
        otpNum: true,
      },
      inputErrorCheck: true,
      inputValidTxt: "",
      otpValidTxt: "",
      loginValidCheck: false,
      btnTxt: "",
      btnTxtType: "",
    },
  });
  // 구글 OTP 1차 팝업
  const authPop1 = ref({
    popYn: false,
    certifyYN: false,
    userId: "",
    passwd: "",
    otpNum: "",
    validOtpKey: true,
    validOtpTxt: "",
    btnTxt: "",
    btnTxtType: "",
    applyBtn: false,
    succOtpYn: false,
    businessName: "",
    agreeChk1: false,
    agreeChk2: false,
    validCheck: {
      userId: true,
      passwd: true,
    },
    validTxt: "",
    errorCheck: false,
  });
  // 구글 OTP 2차 팝업
  const authPop2 = ref({
    popYn: false,
    otpNum: "",
    validOtpKey: true,
    validOtpTxt: "",
    errorCheck: false,
  });
  // 아이디 찾기
  const findId = ref({
    popYn: false,
    //tenantName: '',
    email: "",
    otpNum: "",
    validCheck: {
      input: {
        //tenantName: true,
        email: true,
      },
      otp: {
        otpNum: true,
      },
      inputErrorCheck: true,
      inputValidTxt: "",
      otpValidTxt: "",
      findIdValidCheck: false,
    },
    btnTxt: "",
  });
  // 비밀번호 초기화
  const resetPw = ref({
    popYn: false,
    userId: "",
    email: "",
    otpNum: "",
    validCheck: {
      input: {
        userId: true,
        email: true,
      },
      otp: {
        otpNum: true,
      },
      inputErrorCheck: true,
      inputValidTxt: "",
      otpValidTxt: "",
      resetPwValidCheck: false,
    },
    btnTxt: "",
  });

  // 초기 패스워드 변경
  const initPw = ref({
    popYn: false,
    passwd: "",
    passwd2: "",
    validCheck: {
      passwd: true,
      passwd2: true,
    },
    passwdCheck: false,
    errorTxt: "",
  });

  const selectPlaceholder = ref("");
  const initAuthPop1 = ref({});
  const initAuthPop2 = ref({});
  const initFindId = ref({});
  const initResetPw = ref({});
  const initInitPw = ref({});
  const googleOtpQrCode = ref("");
  const googleOtpSecretKey = ref("");
  const loginInfo = ref({});
  const checkbox = ref(false);
  const langType = ref("");
  const toggleVisibility = () => {
    visible.value = !visible.value;
  };
  const visible = ref(false);
  const isAgrNPop = ref(false);
  const isShowAgrNPop = ref(false);
  let saveId = localStorage.getItem("saveId");
  if (saveId) {
    checkbox.value = true;
    loginForm.value.userId = saveId;
  }

  const handleInfluenceMove = (event) => {
    gate1.value = true;
    gate2.value = false;
    gate3.value = false;
  };

  const handleVendorMove = (event) => {
    gate2.value = true;
    gate1.value = false;
    gate3.value = false;
  };

  const handleBrandMove = (event) => {
    gate3.value = true;
    gate1.value = false;
    gate2.value = false;
  };

  // 개인정보처리방침 이용약관 팝업
  //const privacyPop = ref(false);
  const privacyDetail = ref({
    kr: {
      title: "",
      contents: "",
    },
    en: {
      title: "",
      contents: "",
    },
  });
  const systemInfo = ref({
    mode: "",
  });

  const loginAction = (__ID, __PASS, __TYPE) => {
    let _req = {
      id: __ID,
      password: __PASS,
      logintype: __TYPE,
    };

    useAxios()
      .post("/roulette/login", _req)
      .then((res) => {
        if (res.data) {
          // console.log(res.data);
          useAuthStore().setAuth(res.data);
          useAuthStore().setAccessToken(res.data.accessToken);
          useAuthStore().setRefreshToken(res.data.refreshToken);
          
          // 디버깅: 로그인 후 사용자 정보 확인
          console.log('=== 로그인 성공 디버깅 ===');
          console.log('원본 데이터:', res.data);
          console.log('설정된 auth 정보:', useAuthStore().auth);
          console.log('COMPANY_NUMBER:', useAuthStore().auth.companyNumber);
          console.log('memberType:', useAuthStore().auth.memberType);
          console.log('===========================');
          
          localStorage.setItem("tempAccess", __ID);
          
          // vendor/brand 타입이면 dashboard로, 그 외에는 기존 item 페이지로
          const memberType = useAuthStore().auth.memberType;
          if (memberType === 'VENDOR' || memberType === 'BRAND') {
            useUtil.setPageMove("/view/common/dashboard");
            useStore.menuInfo.menuIndex = "0";
            useStore.menuInfo.menuId = "menu00";
            useStore.menuInfo.pageRtName = "대시보드";
            useStore.menuInfo.pageStatus = null;
          } else {
            useUtil.setPageMove("/view/common/item");
            useStore.menuInfo.menuIndex = "0";
            useStore.menuInfo.menuId = "menu01";
            useStore.menuInfo.pageRtName = "제품 관리";
            useStore.menuInfo.pageStatus = null;
          }
        }
      })
      .catch((error) => {
        if (error.response) {
          console.log("status:", error.response.status, "data:", error.response.data);
          // 안전하게 errCode, message 접근
          const errData = error.response.data || {};
          const errCode = errData.errCode || errData.errorCode || errData.code || "";
          const errMsg = errData.message || "알 수 없는 오류가 발생했습니다.";
          console.log("errCode:", errCode, "message:", errMsg);
        } else {
          console.log("error:", error.message, error.code);
        }
        if (error.response?.status) {
          fnLoginSet(error.response.data.messages.message);
        }
        $log.debug("[login][fnIdPwCheck][error]");
      })
      .finally(() => {
        $log.debug("[login][fnIdPwCheck][finished]");
      });
  };

  const location = (__id) => {
    switch (__id) {
      case "join":
        useUtil.setPageMove("/auth/join?type=" + loginForm.value.loginType);
        break;
      case "findId":
        findId.value.popYn = true;
        break;
      case "resetPw":
        resetPw.value.popYn = true;
        break;
      case "influence":
        useUtil.setPageMove("/?type=influence");
        loginVisible.value = "Y";
        break;
      case "vendor":
        useUtil.setPageMove("/?type=vendor");
        loginVisible.value = "N";
        break;
      case "brand":
        useUtil.setPageMove("/?type=brand");
        loginVisible.value = "N";
        break;
      default:
        break;
    }
  };

  // onMounted
  onMounted(() => {
    //로그인페이지 접근시 파라미터 체크하여 인플루언서, 밴더 구분
    const typeParam = route.query.type;
    if (typeParam == "influence") {
      loginForm.value.loginType = "influence";
    } else if (typeParam == "vendor") {
      loginForm.value.loginType = "vendor";
    } else if (typeParam == "brand") {
      loginForm.value.loginType = "brand"; 
    } else {
      loginVisible.value = "Y";
    }

    //구글 인증 프로세스
    function handleMessage(event) {
      const appBaseUrl = import.meta.env.VITE_APP_API_URL;
      // 개발환경이면 아래처럼 확인
      const allowedOrigins = [
        "http://0.0.0.0:3000",
        "http://localhost:3000",
        appBaseUrl,
      ].filter(Boolean);
      if (allowedOrigins.includes(event.origin)) {
        const { accessToken, refreshToken, user } = event.data;

        if (user?.JOIN === "1") {
          useAuthStore().setTempData(user);
          useUtil.setPageMove("/auth/join?type=" + loginForm.value.loginType);
        } else {
          // SNS 로그인 성공 시 인증 정보 제대로 설정
          const authData = {
            refreshToken: refreshToken,
            user: user,
          };

          // setAuth를 호출하여 auth 스토어에 사용자 정보 저장
          useAuthStore().setAuth(authData);
          useAuthStore().setTempData(authData);
          useAuthStore().setAccessToken(accessToken);
          useAuthStore().setRefreshToken(refreshToken);
          localStorage.setItem("tempAccess", user.ID || user.id || user.SEQ);
          useUtil.setPageMove("/view/common/item");
          useStore.menuInfo.menuIndex = "0";
          useStore.menuInfo.menuId = "menu02";
          useStore.menuInfo.pageRtName = "이벤트 관리";
          useStore.menuInfo.pageStatus = null;
        }
      }
    }
    window.addEventListener("message", handleMessage);
    onBeforeUnmount(() => window.removeEventListener("message", handleMessage));
  });

  watch(
    () => route.query.type,
    (newType) => {
      if (newType === "influence" || newType === "vendor" || newType === "brand") {
        loginForm.value.loginType = newType;
        loginVisible.value = "N"; // 로그인 폼 보이기
      } else {
        loginVisible.value = "Y"; // 게이트 페이지 보이기
      }
    },
    {
      immediate: true, // 컴포넌트가 마운트될 때 즉시 실행
    }
  );

  watchEffect(() => {
    // 감시하고자 하는 데이터를 해당 블럭내에서 사용하면 호출된다.
    // getLang.value를 감시하는 상태
    //QfnGetEnumCode(useLangStore().getLang);
  });

  // $eventBus.off("SET_SUCCESS_POPUP");
  // $eventBus.on("SET_SUCCESS_POPUP", () => {
  //   // 안내 팝업 확인 클릭 팝업 초기화처리
  //   fnOtpPopClose("findId");
  //   fnOtpPopClose("resetPw");
  // });

  // $eventBus.off("PASSWD_CHANGE");
  // $eventBus.on("PASSWD_CHANGE", () => {
  //   fnPasswdChange();
  // });

  // $eventBus.off("INIT_PASSWORD");
  // $eventBus.on("INIT_PASSWORD", () => {
  //   initPw.value.popYn = true;
  // });

  // $eventBus.off("SET_LOGIN");
  // $eventBus.on("SET_LOGIN", () => {
  //   fnLogin();
  // });
  /************************
   *    Methods
   ************************/

  const showComingSoon = () => {
    $eventBus.emit('OPEN_CONFIRM_POP_UP', {
      id: 'coming-soon',
      title: '안내',
      content: '준비중입니다.',
      yes: {
        text: '확인',
        isProc: false
      }
    });
  };

  const fnLoginSet = (__MSG) => {
    let param = {
      id: pageId,
      title: "로그인",
      content: __MSG,
      yes: {
        text: "확인",
        isProc: true,
        event: "FN_LOGIN",
        param: "",
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
  };

  // 구글 로그인 인증 시퀀스
  function onGoogleLogin() {
    const appBaseUrl = import.meta.env.VITE_APP_API_URL;
    const clientId =
      "373780605211-diojebh7mug45urv9rnqdil6n0b1ogge.apps.googleusercontent.com"; // 실제 클라이언트 ID로 교체
    //const redirectUri = "https://shopdeli.mycafe24.com/auth/callback"; // 실제 리디렉션 URI로 교체
    const redirectUri = `${appBaseUrl}/auth/callback`;
    const scope = "openid email profile";
    const responseType = "code"; // 또는 'code' (백엔드 연동 시)
    const state = Math.random().toString(36).substring(2);

    const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&client_id=${clientId}&redirect_uri=${encodeURIComponent(
      redirectUri
    )}&response_type=${responseType}&scope=${encodeURIComponent(scope)}&state=${state}`;

    const width = 500;
    const height = 600;
    const dualScreenLeft =
      window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop =
      window.screenTop !== undefined ? window.screenTop : window.screenY;

    const currentWidth = window.innerWidth
      ? window.innerWidth
      : document.documentElement.clientWidth
      ? document.documentElement.clientWidth
      : screen.width;

    const currentHeight = window.innerHeight
      ? window.innerHeight
      : document.documentElement.clientHeight
      ? document.documentElement.clientHeight
      : screen.height;

    const left = dualScreenLeft + (currentWidth - width) / 2;
    const top = dualScreenTop + (currentHeight - height) / 2;

    window.open(
      googleAuthUrl,
      "googleLogin",
      `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
    );
  }

  //카카오 인증 시퀀스
  function onKakaoLogin() {
    const appBaseUrl = import.meta.env.VITE_APP_API_URL;
    const kakaoAuthUrl = `${appBaseUrl}/auth/kakaoLogin`; // 실제 리디렉션 URI로 교체

    const width = 500;
    const height = 600;
    const dualScreenLeft =
      window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop =
      window.screenTop !== undefined ? window.screenTop : window.screenY;

    const currentWidth = window.innerWidth
      ? window.innerWidth
      : document.documentElement.clientWidth
      ? document.documentElement.clientWidth
      : screen.width;

    const currentHeight = window.innerHeight
      ? window.innerHeight
      : document.documentElement.clientHeight
      ? document.documentElement.clientHeight
      : screen.height;

    const left = dualScreenLeft + (currentWidth - width) / 2;
    const top = dualScreenTop + (currentHeight - height) / 2;

    window.open(
      kakaoAuthUrl,
      "kakaoLogin",
      `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
    );
  }

  //네이버 인증 시퀀스
  function onNaverLogin() {
    const appBaseUrl = import.meta.env.VITE_APP_API_URL;
    const naverAuthUrl = `${appBaseUrl}/auth/naverLogin`; // 실제 리디렉션 URI로 교체

    const width = 500;
    const height = 600;
    const dualScreenLeft =
      window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop =
      window.screenTop !== undefined ? window.screenTop : window.screenY;

    const currentWidth = window.innerWidth
      ? window.innerWidth
      : document.documentElement.clientWidth
      ? document.documentElement.clientWidth
      : screen.width;

    const currentHeight = window.innerHeight
      ? window.innerHeight
      : document.documentElement.clientHeight
      ? document.documentElement.clientHeight
      : screen.height;

    const left = dualScreenLeft + (currentWidth - width) / 2;
    const top = dualScreenTop + (currentHeight - height) / 2;

    window.open(
      naverAuthUrl,
      "naverLogin",
      `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
    );
  }

  /**
   * @API
   * 최종 로그인 버튼 클릭 시 API
   */
  function fnLogin(__USERID, __USERPASS) {
    // 파라미터 전달 값 [아이디, 비밀번호, otpNum, 브라우저정보]
    //userId: loginForm.value.userId,
    // let _req = {
    //   username: loginForm.value.userId,
    //   password: btoa(loginForm.value.passwd),
    // };

    localStorage.setItem("tempAccess", __USERID);

    if (__USERID == "admin" && __USERPASS == "1234") {
      useUtil.setPageMove("/view/media/newsList");
    } else {
      fnLoginSet("비밀번호가 맞지 않습니다. 확인해주세요.");
    }
    // useAxios()
    //   .post(apiUrl.otpCheck, _req)
    //   .then((res) => {
    //     loginInfo.value = res.data.data;
    //     useAuthStore().setAccessToken(loginInfo.value.accessToken);
    //     useAuthStore().setRefreshToken(loginInfo.value.refreshToken);

    //     // OTP key체크 성공 후 개인정보에 대한 API를 호출 한다.
    //     fnServiceModeCheck();
    //     $log.debug("[login][fnLogin][success]");
    //   })
    //   .catch((error) => {
    //     $log.debug("[login][fnLogin][error]");
    //     let errorData = error.response.data;
    //     errorData.type = "fnLogin";
    //     fnLoginFail(errorData);
    //   })
    //   .finally(() => {
    //     $log.debug("[login][fnLogin][finished]");
    //   });
  }

  /**
   * @SCRIPT
   * 비밀번호확인 validation
   */
  function fnValidCheck(type) {
    // 아이디 체크
    if (type === "id") {
      const id = loginForm.value.userId;

      // 1. 기본 유효성 검사
      if (!id) {
        $toast.error("아이디를 입력해주세요.");
        return false;
      }

      // 2. 아이디 형식 검사 (영문, 숫자 조합 6~20자)
      const idRegex = /^[a-zA-Z0-9]{6,20}$/;
      if (!idRegex.test(id)) {
        $toast.error("아이디는 영문, 숫자 조합 6~20자로 입력해주세요.");
        return false;
      }
    }

    // 다른 유효성 검사가 필요한 경우 여기에 추가
    return true;
  }
</script>

<style scoped>
/* 게이트 컨테이너 */
.gate-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem;
}

/* 게이트 카드 */
.gate-card {
  background: white;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 18rem;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gate-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.gate-card.actv {
  transform: translateY(-15px) scale(1.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* 게이트 아이콘 */
.gate-icon {
  margin-bottom: 1.5rem;
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.influencer-bg {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.vendor-bg {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.brand-bg {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

.gate-card:hover .icon-circle {
  transform: scale(1.1);
}

/* 게이트 콘텐츠 */
.gate-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
}

.gate-content p {
  color: #666;
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}

/* 게이트 버튼 */
.gate-btn {
  border-radius: 25px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: all 0.3s ease !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.influencer-btn {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  color: white !important;
}

.vendor-btn {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  color: white !important;
}

.brand-btn {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%) !important;
  color: white !important;
}

.gate-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .gate-container {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
  }
  
  .gate-card {
    width: 100%;
    max-width: 300px;
    min-height: 280px;
    padding: 2rem 1.5rem;
  }
  
  .icon-circle {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }
  
  .gate-content h3 {
    font-size: 1.3rem;
  }
  
  .gate-content p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }
}

/* 기존 스타일과 충돌 방지 */
.login--gate {
  position: relative;
  z-index: 1;
}
</style>