@charset "UTF-8";
/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./res/css/auth/scss/join.scss ***!
  \******************************************************************************************************************************************************************************/
:root {
  --main-900: #1e4a7c;
  --main-800: #2c689d;
  --main-700: #3279b0;
  --main-600: #398bc3;
  --main-500: #3e98d2;
  --main-400: #51a6d6;
  --main-300: #64b4dd;
  --main-200: #89c9e8;
  --main-100: #b5dff2;
  --main-50: #e7f7ff;
  --main-25: #f5fcff;
  --state-red: #db2828;
  --state-red-light: #fee6e6;
  --state-yellow: #fcbc0b;
  --state-yellow-light: #ffe9cf;
  --state-green: #22ba46;
  --state-green-light: #e8f5e9;
  --state-blue-strong: #1a1e81;
  --state-blue: #2285d0;
  --state-blue-light: #f3f8ff;
  --black: #000;
  --gray-800: #262626;
  --gray-700: #434343;
  --gray-600: #555;
  --gray-500: #7b7b7b;
  --gray-400: #9d9d9d;
  --gray-300: #c4c4c4;
  --gray-200: #d9d9d9;
  --gray-100: #e9e9e9;
  --gray-75: #f1f1f1;
  --gray-50: #f5f5f5;
  --gray-25: #f9f9f9;
  --white: #fff;
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  src: local("Pretendard Regular"), local("Pretendard-Regular"), url(../../../../res/fonts/Pretendard-Regular.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-Regular.woff) format("woff"), url(../../../../res/fonts/Pretendard-Regular.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  src: local("Pretendard Medium"), local("Pretendard-Medium"), url(../../../../res/fonts/Pretendard-Medium.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-Medium.woff) format("woff"), url(../../../../res/fonts/Pretendard-Medium.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  src: local("Pretendard SemiBold"), local("Pretendard-SemiBold"), url(../../../../res/fonts/Pretendard-SemiBold.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-SemiBold.woff) format("woff"), url(../../../../res/fonts/Pretendard-SemiBold.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  src: local("Pretendard Bold"), local("Pretendard-Bold"), url(../../../../res/fonts/Pretendard-Bold.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-Bold.woff) format("woff"), url(../../../../res/fonts/Pretendard-Bold.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 800;
  src: local("Pretendard ExtraBold"), local("Pretendard-ExtraBold"), url(../../../../res/fonts/Pretendard-ExtraBold.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-ExtraBold.woff) format("woff"), url(../../../../res/fonts/Pretendard-ExtraBold.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Cafe24 Ssurround";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: local("Cafe24 Ssurround"), local("Cafe24Ssurround"), url(../../../../res/fonts/Cafe24Ssurround.woff2) format("woff2"), url(../../../../res/fonts/Cafe24Ssurround.woff) format("woff"), url(../../../../res/fonts/Cafe24Ssurround.otf) format("opentype"), url(../../../../res/fonts/Cafe24Ssurround.ttf) format("truetype");
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-style: normal;
  font-synthesis: none;
  vertical-align: baseline;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

button {
  user-select: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

input[type=checkbox] + label,
input[type=radio] + label {
  cursor: pointer;
}

input[type=submit] {
  cursor: pointer;
}

input[type=text],
input[type=password],
input[type=textarea],
input[type=fieldset] {
  -webkit-tap-highlight-color: transparent;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=textarea]:focus,
input[type=fieldset]:focus {
  outline: none;
}

input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=password]:-webkit-autofill:hover, input[type=password]:-webkit-autofill:focus, input[type=password]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

img,
video {
  max-width: 100%;
  border: 0 none;
  vertical-align: top;
}

.popup_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.popup_overlay.show {
  opacity: 1;
  visibility: visible;
}

.alert_popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--white);
  border-radius: 12px;
  padding: 40px;
  max-width: 600px;
  min-height: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 0 17.916px 0 rgba(0, 86, 128, 0.25);
}
.popup_overlay.show .alert_popup {
  transform: translateY(0);
}
.alert_popup .alert_icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 37px;
  display: block;
}
.alert_popup .alert_title {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0px;
  color: var(--gray-800);
  margin-bottom: 4px;
}
.alert_popup .alert_message {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  color: var(--gray-400);
}
.alert_popup.success .alert_icon {
  background-image: url("data:image/svg+xml,%3Csvg width=%2774%27 height=%2774%27 viewBox=%270 0 74 74%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2737%27 cy=%2737%27 r=%2737%27 fill=%27%235FCD79%27/%3E%3Cpath d=%27M19 41.4642L32.6615 52.5867L54.52 22%27 stroke=%27white%27 stroke-width=%278.33884%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.alert_popup.warning .alert_icon {
  background-image: url("data:image/svg+xml,%3Csvg width=%2774%27 height=%2774%27 viewBox=%270 0 74 74%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M32.7156 8.62404C34.6211 5.12533 39.3789 5.12532 41.2844 8.62402L69.3281 60.1173C71.2355 63.6196 68.8547 68 65.0438 68H8.95619C5.14532 68 2.76449 63.6196 4.67184 60.1173L32.7156 8.62404Z%27 fill=%27%23FDE298%27/%3E%3Cpath d=%27M41.4328 23.3526C41.4328 25.1276 39.3972 41.1026 38.0849 51.2173C37.9084 52.5773 36.0915 52.5773 35.9151 51.2173C34.6027 41.1026 32.5671 25.1276 32.5671 23.3526C32.5671 20.7334 34.5518 18.6102 37 18.6102C39.4482 18.6102 41.4328 20.7334 41.4328 23.3526Z%27 fill=%27%23FCAC0B%27/%3E%3Cellipse cx=%2737%27 cy=%2758.0169%27 rx=%272.46269%27 ry=%272.62712%27 fill=%27%23FCAC0B%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.alert_popup.error .alert_icon {
  background-image: url("data:image/svg+xml,%3Csvg width=%2774%27 height=%2774%27 viewBox=%270 0 74 74%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2737%27 cy=%2737%27 r=%2737%27 fill=%27%23E76666%27/%3E%3Cpath d=%27M22.1873 25.562C20.9793 24.354 20.9793 22.3954 22.1873 21.1874C23.3954 19.9793 25.354 19.9793 26.562 21.1874L52.8101 47.4355C54.0182 48.6435 54.0182 50.6021 52.8101 51.8101C51.6021 53.0182 49.6435 53.0182 48.4354 51.8101L22.1873 25.562Z%27 fill=%27white%27/%3E%3Cpath d=%27M48.4355 21.1899C49.6435 19.9819 51.6021 19.9819 52.8101 21.1899C54.0182 22.3979 54.0182 24.3566 52.8101 25.5646L26.562 51.8127C25.354 53.0207 23.3954 53.0207 22.1874 51.8127C20.9793 50.6047 20.9793 48.646 22.1874 47.438L48.4355 21.1899Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.alert_popup.confirm .alert_icon {
  background-image: url("data:image/svg+xml,%3Csvg width=%2774%27 height=%2774%27 viewBox=%270 0 74 74%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2737%27 cy=%2737%27 r=%2737%27 fill=%27%2364B4DD%27/%3E%3Cpath d=%27M40.6565 42.9333C40.2987 44.5354 39.0212 45.8723 37.3796 45.8723H35.4499C33.7799 45.8723 32.404 44.5046 32.5842 42.8444C32.6526 42.2138 32.7417 41.6259 32.8513 41.0806C33.1413 39.7204 33.6282 38.4942 34.3119 37.4019C35.0163 36.3096 35.9486 35.2276 37.1088 34.1559C38.0825 33.2903 38.9319 32.466 39.657 31.6828C40.3822 30.8996 40.9519 30.0959 41.3663 29.2715C41.7806 28.4265 41.9878 27.4888 41.9878 26.4583C41.9878 25.263 41.8013 24.2737 41.4284 23.4906C41.0762 22.6868 40.5376 22.0789 39.8124 21.6667C39.108 21.2545 38.2172 21.0484 37.1398 21.0484C36.249 21.0484 35.4203 21.2442 34.6537 21.6358C33.8872 22.0067 33.2553 22.5838 32.758 23.3669C32.2815 24.1501 32.0329 25.1806 32.0122 26.4583C32.0122 26.4583 31.4839 30.879 27.5061 30.879C23 30.879 23 26.4583 23 26.4583C23.0622 23.6349 23.7148 21.306 24.9578 19.4718C26.2216 17.6169 27.9101 16.2464 30.0233 15.3602C32.1365 14.4534 34.5087 14 37.1398 14C40.0403 14 42.5265 14.474 44.5982 15.422C46.67 16.3495 48.2549 17.72 49.3529 19.5336C50.451 21.3266 51 23.5112 51 26.0874C51 27.8804 50.6478 29.4776 49.9434 30.879C49.239 32.2599 48.3171 33.5479 47.1776 34.7433C46.0381 35.9386 44.7847 37.1752 43.4173 38.453C42.2364 39.504 41.4284 40.6066 40.9933 41.7608C40.861 42.1295 40.7487 42.5203 40.6565 42.9333ZM31.4839 55.4247C31.4839 54.1057 31.9397 53.0134 32.8513 52.1479C33.7629 51.2617 34.9852 50.8186 36.5183 50.8186C38.0307 50.8186 39.2427 51.2617 40.1543 52.1479C41.0866 53.0134 41.5527 54.1057 41.5527 55.4247C41.5527 56.7025 41.0866 57.7845 40.1543 58.6707C39.2427 59.5569 38.0307 60 36.5183 60C34.9852 60 33.7629 59.5569 32.8513 58.6707C31.9397 57.7845 31.4839 56.7025 31.4839 55.4247Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.alert_buttons {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 37px;
}
.alert_buttons .btn_cancel,
.alert_buttons .btn_confirm {
  min-width: 168px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 0;
}
.alert_buttons .btn_cancel {
  border: 2px solid var(--main-300);
  color: var(--main-300);
}
.alert_buttons .btn_confirm {
  background: var(--main-300);
  color: var(--white);
  border: 2px solid transparent;
}

.form_input {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-25);
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: border-color 0.2s;
}
.form_input:focus {
  border-color: var(--main-500);
  background: var(--white);
}
.form_input::placeholder {
  color: var(--gray-300);
}
.form_input.valid {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}
.form_input.valid:-internal-autofill-selected {
  appearance: none;
  background-color: var(--white) !important;
}
.form_input:-webkit-autofill {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}
.form_input:-internal-autofill-selected {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}

.form_textarea {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-25);
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: border-color 0.2s;
  resize: vertical;
  min-height: 100px;
}
.form_textarea:focus {
  border-color: var(--main-500);
  background: var(--white);
}
.form_textarea::placeholder {
  color: var(--gray-300);
}
.form_textarea.valid {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}

.form_label {
  color: var(--gray-400);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  font-weight: 600;
}

input:-internal-autofill-selected {
  background-color: var(--white) !important;
}
input:-webkit-autofill {
  background-color: transparent !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  color: inherit !important;
}

.custom_select {
  position: relative;
  width: 100%;
}

.select_btn {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-25);
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: border-color 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.select_btn:focus {
  border-color: var(--main-500);
  background: var(--white);
  color: var(--gray-800);
}
.select_btn.valid {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}
.select_btn.valid .select_arrow {
  filter: invert(14%) sepia(61%) saturate(0%) hue-rotate(173deg) brightness(110%) contrast(109%);
}
.select_btn .select_arrow {
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M4.29289 7.79289C4.68342 7.40237 5.31658 7.40237 5.70711 7.79289L12 14.0858L18.2929 7.79289C18.6834 7.40237 19.3166 7.40237 19.7071 7.79289C20.0976 8.18342 20.0976 8.81658 19.7071 9.20711L12.7071 16.2071C12.3166 16.5976 11.6834 16.5976 11.2929 16.2071L4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289Z%27 fill=%27%23222222%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: invert(79%) sepia(11%) saturate(13%) hue-rotate(321deg) brightness(102%) contrast(83%);
}
.select_btn.active .select_arrow {
  transform: rotate(180deg);
}

.select_options {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.select_options::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--Fill-Strong, rgba(112, 115, 124, 0.16));
}
.select_options::-webkit-scrollbar {
  width: 6px;
}
.select_options::-webkit-scrollbar-track {
  background: transparent;
}
.select_options.show {
  display: block;
}
.select_options li {
  padding: 12px 20px;
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.2s;
}
.select_options li:last-child {
  border-bottom: none;
}
.select_options li:hover {
  background: var(--gray-25);
  color: var(--gray-800);
}
.select_options li.selected {
  background: var(--main-25);
  color: var(--main-500);
}

.hide {
  display: none !important;
}

body.scroll_disabled {
  overflow: hidden;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--white);
}

div.type_flex {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

#header {
  width: 100%;
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
  position: relative;
  z-index: 10;
}
#header:has(.one_menu) {
  border-bottom: none;
}
#header .header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  height: 90px;
  padding: 20px 36px 20px 0;
}
#header .header_inner.one_menu {
  justify-content: center;
}
#header .header_inner .logo {
  font-size: 0;
  width: 150px;
  height: 50px;
  background: url(../../../../res/img/myFC_logo.svg) no-repeat center center/contain;
}
#header .header_inner .gnb ul {
  display: flex;
  gap: 40px;
}
#header .header_inner .gnb ul li a {
  position: relative;
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: all 0.3s ease;
}
#header .header_inner .gnb ul li a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--main-500);
  transition: all 0.3s ease;
}
#header .header_inner .gnb ul li:hover a {
  color: var(--main-500);
}
#header .header_inner .gnb ul li:hover a::after {
  width: 100%;
}
#header .header_inner .gnb ul li.active a {
  color: var(--main-500);
  font-weight: 700;
}
#header .header_inner .gnb ul li.active a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--main-500);
}
#header .header_inner .mega_menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  transform: translateY(-10px);
}
#header .header_inner .mega_menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#header .header_inner .mega_menu__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 36px;
  display: flex;
  gap: 32px;
}
#header .header_inner .mega_menu__section {
  flex: 1;
  min-width: 0;
}
#header .header_inner .mega_menu__title {
  color: var(--gray-600);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0px;
  margin-bottom: 12px;
  text-align: center;
}
#header .header_inner .mega_menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
#header .header_inner .mega_menu__list + .mega_menu__title {
  margin-top: 36px;
}
#header .header_inner .mega_menu__list li {
  margin-bottom: 8px;
}
#header .header_inner .mega_menu__list li:last-child {
  margin-bottom: 0;
}
#header .header_inner .mega_menu__list li a {
  color: var(--gray-500);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0px;
  letter-spacing: -0.6px;
  transition: all 0.3s ease;
  display: inline-block;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
}
#header .header_inner .mega_menu__list li a:hover {
  color: var(--main-500);
  border-bottom: 1px solid var(--main-300);
}
#header .header_inner .header_util {
  display: flex;
  align-items: center;
}
#header .header_inner .header_util .admin {
  color: var(--main-800);
  margin-right: 12px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0px;
  font-weight: 700;
}
#header .header_inner .header_util .mypage {
  color: var(--main-500);
  margin-right: 20px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0px;
  font-weight: 700;
}
#header .header_inner .header_util .coupon {
  position: relative;
  width: 40px;
  height: 40px;
  background: url(../../../../res/img/header_coupon.svg) no-repeat center center/contain;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 22px;
}
#header .header_inner .header_util .coupon .coupon_count {
  position: absolute;
  top: -3px;
  right: -16px;
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--main-500);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 28px;
}
#header .header_inner .header_util .point {
  position: relative;
  width: 40px;
  height: 40px;
  background: url(../../../../res/img/header_point.svg) no-repeat center center/contain;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 22px;
}
#header .header_inner .header_util .point .point_value {
  position: absolute;
  top: -3px;
  right: -58px;
  display: inline-block;
  width: fit-content;
  height: 28px;
  border-radius: 46px;
  box-sizing: border-box;
  padding: 0 8px;
  background-color: var(--main-500);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 28px;
}
#header .header_inner .header_util .login {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid var(--main-500);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0px;
  color: var(--main-500);
  box-sizing: border-box;
  margin-right: 20px;
}
#header .header_inner .header_util .join {
  display: inline-block;
  padding: 6px 0;
  border-bottom: 2px solid var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0px;
  color: var(--gray-300);
  box-sizing: border-box;
}
#header .header_inner .header_util.login_done .header_util__login_done {
  display: flex;
  align-items: center;
}
#header .header_inner .header_util.login_done .header_util__login {
  display: none;
}
#header .header_inner .header_util .header_util__login_done {
  display: none;
}

.mega_menu_dimmed {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: 80%;
  background: #000;
  opacity: 0.3;
  cursor: pointer;
}
.mega_menu_dimmed.active {
  display: block;
}

#footer {
  width: 100%;
  background: var(--gray-50);
}
#footer .footer_inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#footer .footer_inner .footer_logo {
  width: 157px;
  height: 24px;
  margin-right: 30px;
  background: url(../../../../res/img/tobecon_logo.svg) no-repeat center center/contain;
}
#footer .footer_inner ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: calc(100% - 157px - 30px);
}
#footer .footer_inner ul li {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  letter-spacing: -0.6px;
  margin-right: 42px;
}
#footer .footer_inner ul li:last-child {
  margin-right: 0;
}
#footer .footer_inner ul li strong {
  display: inline-block;
  color: var(--gray-500);
  font-weight: 700;
}
#footer .footer_inner ul li strong::after {
  content: "|";
  display: inline-block;
  font-size: 16px;
  color: #7b7b7b;
  margin: 0 12px;
  vertical-align: middle;
}
#footer .footer_inner ul li span {
  color: var(--gray-400);
}
#footer .footer_inner .footer_copy {
  color: var(--gray-400);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0px;
}

input[type=checkbox] {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url(../../../../res/img/icon_checkbox.svg) no-repeat center center/contain;
  border: none;
  appearance: none;
  margin: 0;
}
input[type=checkbox]:checked {
  background: url(../../../../res/img/icon_checkbox_active.svg) no-repeat center center/contain;
}

input[type=radio] {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url(../../../../res/img/icon_radio.svg) no-repeat center center/contain;
  border: none;
  appearance: none;
  margin: 0;
}
input[type=radio]:checked {
  background: url(../../../../res/img/icon_radio_active.svg) no-repeat center center/contain;
}
input[type=radio]:checked + label {
  color: var(--main-300);
}

.join_section {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 44px;
}

.join_box {
  min-width: 470px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(62, 152, 210, 0.1);
  padding: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.welcome {
  margin-bottom: 33px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0px;
  color: var(--gray-800);
}

.join_title {
  color: var(--gray-800);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0px;
  margin-bottom: 16px;
}

.join_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 47px;
}

.group_container {
  display: flex;
  align-items: center;
  gap: 94px;
  padding-bottom: 47px;
  border-bottom: 1px solid var(--gray-200);
}
.group_container .join_input_group {
  width: calc(50% - 44px);
}

.join_input_group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.join_label {
  color: var(--gray-400);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  font-weight: 600;
}

.join_input {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-25);
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: border-color 0.2s;
}
.join_input:focus {
  border-color: var(--main-500);
  background: var(--white);
  color: var(--gray-800);
}
.join_input::placeholder {
  color: var(--gray-300);
}
.join_input.valid {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}
.join_input.valid:-internal-autofill-selected {
  appearance: none;
  background-color: var(--white) !important;
}
.join_input:-webkit-autofill {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}
.join_input:-internal-autofill-selected {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}

.custom_select {
  position: relative;
  width: 100%;
}

.select_btn {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-25);
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: border-color 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.select_btn:focus {
  border-color: var(--main-500);
  background: var(--white);
  color: var(--gray-800);
}
.select_btn.valid {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}
.select_btn.valid .select_arrow {
  filter: invert(14%) sepia(61%) saturate(0%) hue-rotate(173deg) brightness(110%) contrast(109%);
}
.select_btn .select_arrow {
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M4.29289 7.79289C4.68342 7.40237 5.31658 7.40237 5.70711 7.79289L12 14.0858L18.2929 7.79289C18.6834 7.40237 19.3166 7.40237 19.7071 7.79289C20.0976 8.18342 20.0976 8.81658 19.7071 9.20711L12.7071 16.2071C12.3166 16.5976 11.6834 16.5976 11.2929 16.2071L4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289Z%27 fill=%27%23222222%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: invert(79%) sepia(11%) saturate(13%) hue-rotate(321deg) brightness(102%) contrast(83%);
}
.select_btn.active .select_arrow {
  transform: rotate(180deg);
}

.select_options {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.select_options::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--Fill-Strong, rgba(112, 115, 124, 0.16));
}
.select_options::-webkit-scrollbar {
  width: 6px;
}
.select_options::-webkit-scrollbar-track {
  background: transparent;
}
.select_options.show {
  display: block;
}
.select_options li {
  padding: 12px 20px;
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.2s;
}
.select_options li:last-child {
  border-bottom: none;
}
.select_options li:hover {
  background: var(--gray-25);
  color: var(--gray-800);
}
.select_options li.selected {
  background: var(--main-25);
  color: var(--main-500);
}

.error_message {
  color: var(--state-red);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  min-height: 16px;
  margin-top: 4px;
  display: none;
}
.error_message.show {
  display: block;
}

.auth_btn {
  width: 100%;
  max-width: 168px;
  padding: 12px 20px;
  background: var(--main-300);
  border-radius: 8px;
  color: var(--white);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  transition: all 0.2s;
}
.auth_btn:hover {
  background: var(--main-500);
  color: var(--white);
}
.auth_btn.auth_done {
  background: none;
  color: #5fcd79;
  padding: 12px 0;
  text-align: left;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0px;
}
.auth_btn.auth_done:before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width=%2774%27 height=%2774%27 viewBox=%270 0 74 74%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2737%27 cy=%2737%27 r=%2737%27 fill=%27%235FCD79%27/%3E%3Cpath d=%27M19 41.4642L32.6615 52.5867L54.52 22%27 stroke=%27white%27 stroke-width=%278.33884%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-size: contain;
  margin-right: 12px;
  vertical-align: middle;
}

.email_input_group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.email_id {
  flex: 1;
  min-width: 0;
}

.email_at {
  color: var(--black);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  white-space: nowrap;
}

.email_domain_select {
  flex: 1;
  min-width: 0;
}

.email_domain_direct {
  flex: 1;
  min-width: 0;
}

.join_select {
  position: relative;
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: border-color 0.2s;
  appearance: none;
  cursor: pointer;
}
.join_select:focus {
  border-color: var(--main-500);
  background: var(--white);
  color: var(--gray-800);
}
.join_select.valid {
  background: var(--white) !important;
  color: var(--gray-800) !important;
}
.join_select.email_domain.valid {
  color: var(--gray-300) !important;
}
.join_select::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M4.29289 7.79289C4.68342 7.40237 5.31658 7.40237 5.70711 7.79289L12 14.0858L18.2929 7.79289C18.6834 7.40237 19.3166 7.40237 19.7071 7.79289C20.0976 8.18342 20.0976 8.81658 19.7071 9.20711L12.7071 16.2071C12.3166 16.5976 11.6834 16.5976 11.2929 16.2071L4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289Z%27 fill=%27%23222222%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

.radio_group {
  display: flex;
  gap: 24px;
}

.radio_item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio_input {
  width: 18px;
  height: 18px;
  accent-color: var(--main-500);
  cursor: pointer;
}

.radio_label {
  color: var(--gray-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  cursor: pointer;
}

.join_agreement {
  width: 100%;
  margin-top: 8px;
}

.agreement_title {
  color: var(--gray-700);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  font-weight: 600;
  margin-bottom: 12px;
}

.agreement_list {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--main-25);
  gap: 24px;
}
.agreement_list + .error_message {
  padding-left: 16px;
}

.agreement_item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agreement_item .btn_view_more {
  position: relative;
  display: inline-block;
  margin-left: 8px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--gray-300);
  cursor: pointer;
}
.agreement_item .btn_view_more::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gray-300);
}

.agreement_checkbox {
  width: 26px;
  height: 26px;
  accent-color: var(--main-500);
  cursor: pointer;
}

.agreement_label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-500);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  cursor: pointer;
}
.agreement_label .required {
  color: var(--state-red);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
}
.agreement_label .optional {
  color: var(--gray-400);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
}

.join_btn {
  width: 228px;
  padding: 14px 0;
  border-radius: 8px;
  background: var(--main-300);
  color: var(--white);
  font-size: 18px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  border: 2px solid var(--main-300);
  transition: all 0.2s;
}
.join_btn:hover {
  background: var(--main-500);
  border-color: var(--main-500);
}

.join_etc {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.join_etc span {
  color: var(--gray-400);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0px;
}

.join_cancel {
  width: 228px;
  padding: 14px 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--main-300);
  border: 2px solid var(--main-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  transition: all 0.2s;
  text-align: center;
}

.popup_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.popup_overlay.show {
  display: flex;
}

.popup_container {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  animation: popupFadeIn 0.3s ease-out;
}
.popup_container.terms_popup {
  max-width: 600px;
  max-height: 70vh;
}
.popup_container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 18.22%, #fff 58%);
  z-index: 1;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.popup_header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 20px;
  background: var(--white);
}

.popup_title {
  color: var(--gray-800);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0px;
  text-align: center;
}

.popup_close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg width=%2740%27 height=%2740%27 viewBox=%270 0 40 40%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect x=%278.57153%27 y=%2711.4276%27 width=%274.04061%27 height=%2728.2843%27 rx=%272.02031%27 transform=%27rotate%28-45 8.57153 11.4276%29%27 fill=%27%239D9D9D%27/%3E%3Crect x=%2728.5715%27 y=%278.57214%27 width=%274.04061%27 height=%2728.2843%27 rx=%272.02031%27 transform=%27rotate%2845 28.5715 8.57214%29%27 fill=%27%239D9D9D%27/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.popup_content {
  padding: 32px 32px 40px;
  max-height: calc(80vh - 120px);
  overflow-y: auto;
}
.popup_content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--Fill-Strong, rgba(112, 115, 124, 0.16));
}
.popup_content::-webkit-scrollbar {
  width: 6px;
}
.popup_content::-webkit-scrollbar-track {
  background: transparent;
}
.terms_popup .popup_content {
  max-height: calc(70vh - 120px);
}

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

.auth_method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  background: var(--gray-25);
  transition: all 0.2s;
}
.auth_method:hover {
  border-color: var(--main-300);
  background: var(--main-25);
}

.auth_method_header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.auth_icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--main-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.auth_icon.phone_icon::after {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--main-500);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M17 1.01L3 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H3V5h14v14z%27/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}
.auth_icon.card_icon::after {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--main-500);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z%27/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}
.auth_icon.ipin_icon::after {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--main-500);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z%27/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}

.auth_info h3 {
  color: var(--gray-800);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  margin: 0 0 4px 0;
}
.auth_info p {
  color: var(--gray-400);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  margin: 0;
}

.auth_method_btn {
  padding: 12px 24px;
  background: var(--main-500);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.auth_method_btn:hover {
  background: var(--main-600);
}

.terms_content h3 {
  color: var(--gray-800);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  margin: 24px 0 12px 0;
}
.terms_content h3:first-child {
  margin-top: 0;
}
.terms_content p {
  color: var(--gray-600);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  line-height: 1.6;
  margin: 0 0 8px 0;
}

.popup_overlay#terms_popup .popup_container[data-content=privacy] {
  display: none;
}

.auth_popup {
  max-width: 664px;
}
.auth_popup:after {
  display: none;
}
.auth_popup .input_group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth_popup .input_group + .input_group {
  margin-top: 22px;
}
.auth_popup .input_group_wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth_popup .input_group_wrap .resident_front {
  flex: 1;
  width: calc(50% - 4px);
}
.auth_popup .input_group_wrap .resident_back_wrap {
  width: calc(50% - 4px);
}
.auth_popup .input_group_wrap .resident_back {
  width: 60px;
  flex: 1;
}
.auth_popup .input_group_wrap .masking_input {
  display: inline-block;
  color: var(--gray-500);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0px;
  margin-left: 8px;
}
.auth_popup .input_group_wrap .masking_input span {
  letter-spacing: 8px;
}
.auth_popup .input_group_wrap .phone_select {
  width: 124px;
}
.auth_popup .input_group_wrap .btn_auth_code {
  min-width: 148px;
  border-radius: 8px;
  background: var(--main-300);
  border: 2px solid var(--main-300);
  color: var(--white);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  padding: 14px 20px 15px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
}
.auth_popup .input_group_wrap .btn_auth_code.disabled {
  background: var(--gray-200);
  border-color: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}
.auth_popup .input_group_wrap .phone_input {
  flex: 1;
}
.auth_popup .auth_notice {
  margin-top: 48px;
  padding: 24px;
  background: var(--main-25);
}
.auth_popup .auth_notice > .agreement_item {
  padding-bottom: 16px;
  border-bottom: 2px solid #e9e9e9;
}
.auth_popup .auth_notice > .agreement_item label {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--gray-600);
}
.auth_popup .auth_notice .auth_agreement {
  margin-top: 16px;
}
.auth_popup .auth_notice .auth_agreement .agreement_item {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--gray-500);
}
.auth_popup .auth_notice .auth_agreement .agreement_item em {
  color: var(--main-300);
}
.auth_popup .auth_notice .auth_agreement .agreement_item .btn_view_terms {
  position: relative;
  display: inline-block;
  margin-left: 15px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--gray-400);
  cursor: pointer;
}
.auth_popup .auth_notice .auth_agreement .agreement_item .btn_view_terms:hover {
  color: var(--gray-500);
}
.auth_popup .auth_notice .auth_agreement .agreement_item .btn_view_terms::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gray-300);
}
.auth_popup .auth_notice .auth_agreement .agreement_item + .agreement_item {
  margin-top: 20px;
}
.auth_popup .auth_actions {
  margin-top: 48px;
  text-align: center;
}
.auth_popup .auth_actions .auth_btn_primary {
  width: 30%;
  padding: 14px 20px 15px;
  border-radius: 8px;
  background: var(--main-300);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.auth_popup .auth_actions .auth_btn_primary:hover:not(:disabled) {
  background: var(--main-500);
}
.auth_popup .auth_actions .auth_btn_primary:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}
.auth_popup .auth_actions .auth_btn_primary.disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}
.auth_popup .auth_timer {
  color: var(--state-red);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  font-weight: 600;
  white-space: nowrap;
}
.auth_popup .auth_code_message {
  margin-top: 8px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  min-height: 16px;
}
.auth_popup .auth_code_message.success {
  color: var(--main-500);
}
.auth_popup .auth_code_message.error {
  color: var(--state-red);
}
.auth_popup .error_message {
  color: var(--state-red);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0px;
  min-height: 16px;
  margin-top: 4px;
  display: none;
}
.auth_popup .error_message.show {
  display: block;
}
.auth_popup .hide {
  display: none !important;
}
.auth_popup .disabled {
  opacity: 0.5;
  cursor: default !important;
}