@charset "utf-8";
/* @import 구문을 HTML의 <link> 태그로 이동하여 로드 지연 방지 */
/* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('../font/Pretendard-Black.otf') format('woff2'), url('../font/Pretendard-Black.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('../font/Pretendard-ExtraBold.woff2') format('woff2'), url('../font/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../font/Pretendard-Bold.woff2') format('woff2'), url('../font/Pretendard-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../font/Pretendard-SemiBold.woff2') format('woff2'), url('../font/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../font/Pretendard-Medium.woff2') format('woff2'), url('../font/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../font/Pretendard-Regular.woff2') format('woff2'), url('../font/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('../font/Pretendard-Light.woff2') format('woff2'), url('../font/Pretendard-Light.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('../font/Pretendard-ExtraLight.woff2') format('woff2'), url('../font/Pretendard-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'paybooc-ExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('/font/GmarketSansBold.woff2') format('woff2'), 
	url('/font/GmarketSansBold.woff') format('woff'); 
}
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;    
	font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('/font/GmarketSansMedium.woff2') format('woff2'), 
	url('/font/GmarketSansMedium.woff') format('woff'); 
}
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('/font/GmarketSansLight.woff2') format('woff2'), 
	url('/font/GmarketSansLight.woff') format('woff'); 
}
/* Inter 폰트는 layout.php에서 Google Fonts API를 통해 로드됩니다 */

/* 
	start: style guide
*/
:root {
	/* font - individual font names */
	--font-pretendard: 'Pretendard';
	--font-poppins: 'Poppins';
	--font-inter: 'Inter';
	--font-paybooc-extra-bold: 'paybooc-ExtraBold';
	--font-paybooc-bold: 'paybooc-Bold';
	--font-paybooc-medium: 'paybooc-Medium';
	--font-paybooc-light: 'paybooc-Light';
	--font-gmarket-sans: 'Gmarket Sans';
	--font-monospace: monospace;
	
	/* font - font stacks (composed from individual fonts) */
	/* Poppins는 한글을 지원하지 않으므로, 한글 문자는 fallback인 Pretendard로 표시됩니다 */
	--font-primary: var(--font-poppins), var(--font-pretendard), 'notokr-regular', sans-serif;
	--font-poppins-inter-fallback: var(--font-poppins), var(--font-inter), 'notokr-regular', sans-serif;

	/* color */
	--color-brand: #D01164;  /* 기존 1B2EFF를 변경 */
	/* --color-default: #BE3455;  /* 기존 1B50FF를 변경 */
	/* --color-default-hover: #9D2A45; */
	--color-default: #D01164;  /* 20260204: brand와 같음 */
	--color-default-hover: #b11958;  /* 20260204: 어울리는 컬러로 변경 */
	--color-footer-bg: #F9F9F9;
	--color-card-bg: #F7F9FD;
	--color-card-bg-hover: #EFF4FC;
	--color-card-bg-pink: #F9EBEE;
	--color-card-bg-pink-hover: #f5e1e5;
	--color-img-bg: #FDF7F8;

	--color-pink-50: #E36A86;
	--color-pink-40: #E8889E;
	--color-pink-30: #ED9EB0;
	--color-pink-20: #F1B5C3;
	--color-pink-15: #FBECEF;
	--color-pink-10: #FCF5F7;
 
	--color-grayscale-100-hover: #1A1B1D;
	--color-grayscale-100-primary-text: #212224;  /* primary text */
	--color-grayscale-70: #646566;
	--color-grayscale-60: #7A7A7C;
	--color-grayscale-55-secondary-text: #828488;  /* secondary text */
	--color-grayscale-50: #909192;
	--color-grayscale-40: #A6A7A7;
	--color-grayscale-30: #BDBDBE;
	--color-grayscale-25: #C7C7C8;
	--color-grayscale-20: #D3D3D3;
	--color-grayscale-10: #E9E9EA;
	--color-grayscale-0-hover: #faf5f7;
	--color-grayscale-0-hover-blue: #F5F8FA;
	--color-grayscale-0: #FFFFFF;
	--color-grayscale-pagination: #899097; 
	--color-grayscale-pagination-active: #2C2827;
	--color-grayscale-bg-detail: #FAFAFA;

	--color-blue-2e: #1B2EFF;
	--color-blue-50-primary: #1B50FF;
	--color-blue-50-hover: #0E3BD0; 
	--color-blue-24: #245CD7;
	--color-blue-22: #2265F5;
	--color-blue-22-a-50: #2265F580;
	--color-blue-footer: #E7ECF5;
	--color-blue-e9: #E9EFFB;
	--color-blue-e9-hover: #DDE2EB;

	--color-semantic-red: #DC2626;
	--color-semantic-yellow: #E99C26;
	--color-semantic-yellow-hover: #BA7D1E;
	--color-semantic-green: #4CB592;
	--color-semantic-green-hover: #3D9175;
	--color-semantic-turquoise: #30BCCC;
	--color-semantic-blue: #4680FF;
	--color-semantic-blue-hover: #3866CC;
	--color-semantic-purple: #9B6BFF;
	--color-semantic-purple-hover: #7C56CC;

	/* hero background */
	--sbg-bg-color: #151617;

	/* border */
	--border-pagination: 1px solid #BEC9D7;

	/* shadow */
 	--shadow-normal: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);  /* #0000001A */
	--shadow-pagination: 0px 2px 6px 0px rgba(108, 117, 125, 0.5);  /* #6C757D80 */
	--shadow-toggle-switch: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);  /* #00000033 */
	--shadow-table-header: -10px 0px 0px -9px rgba(0, 0, 0, 0.06);  /* #0000000F */
	--shadow-mobile-modal: 0px -4px 16px 0px rgba(0, 0, 0, 0.1);  /* #0000001A */
	
	/* step shadow - 각 시멘틱 컬러의 20% opacity */
	--shadow-step-yellow: 0px 0px 16px 0px rgba(233, 156, 38, 0.2);  /* #E99C26 20% */
	--shadow-step-yellow-mobile: 0px 0px 8px 0px rgba(233, 156, 38, 0.2);  /* #E99C26 20% */
	--shadow-step-green: 0px 0px 16px 0px rgba(76, 181, 146, 0.2);  /* #4CB592 20% */
	--shadow-step-green-mobile: 0px 0px 8px 0px rgba(76, 181, 146, 0.2);  /* #4CB592 20% */
	--shadow-step-blue: 0px 0px 16px 0px rgba(70, 128, 255, 0.2);  /* #4680FF 20% */
	--shadow-step-blue-mobile: 0px 0px 8px 0px rgba(70, 128, 255, 0.2);  /* #4680FF 20% */
	--shadow-step-purple: 0px 0px 16px 0px rgba(155, 107, 255, 0.2);  /* #9B6BFF 20% */
	--shadow-step-purple-mobile: 0px 0px 8px 0px rgba(155, 107, 255, 0.2);  /* #9B6BFF 20% */

}
/* 
	end: style guide
*/


html {overflow-x:hidden; width:100%; height:100% }
body {
	font-family: var(--font-primary);
	font-size: 75%;
	line-height: 150%;
	letter-spacing: 0.3px;
	color: var(--color-grayscale-100-primary-text);
}
label { cursor:pointer}

/* input이 아닌 요소에서 커서 깜빡임 방지 - 전역 설정 */
* {
    caret-color: transparent;
}


/* 편집 가능한 요소에서만 커서가 보이도록 설정 */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
[contenteditable],
[contenteditable="true"],
[contenteditable=""] {
    caret-color: auto;
}
a:link, a:visited { text-decoration:none;}
a:hover, a:focus, a:active { text-decoration:underline}

a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav, menu,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var { margin:0; padding:0}

h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1em}
em, cite, address, optgroup { font-style:normal}
kbd, samp, code { font-family: var(--font-monospace);}


img, input, button, select, textarea { vertical-align:middle}
ul, ol { list-style:none}
img, fieldset { border:0}
abbr, acronym { cursor:help; border-bottom:1px dotted black}
table {	width:100%;  border-spacing:0}/* border-collapse: collapse; ff에서 border="0" 인 경우 문제 발생 */

legend, hr { overflow:hidden; position:absolute; top:0; left:0}
legend, hr, caption { visibility:hidden; font-size:0; width:0; height:0; line-height:0}

* {
	box-sizing:border-box;
	font-family: var(--font-primary);
	line-height: 150%;
	letter-spacing: 0.3px;
	word-break: keep-all;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--color-grayscale-100-primary-text);
}

/* Html5 Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block}
mark, rp, rt, ruby, summary, time{ display: inline }
 
A:link {text-decoration:none;color: #666;font-size: 12px;letter-spacing:0;font-weight: normal; transition:all ease 0.4s}
A:visited {text-decoration:none;color: #666;font-size: 12px;letter-spacing:0;font-weight: normal;}
A:active {text-decoration:none;color: #222;font-size: 12px;letter-spacing:0;font-weight: normal;}
A:hover {text-decoration:none;color: #222;font-size: 12px;letter-spacing:0;font-weight: normal;}

a.accessibility01 {position:absolute; display:block; width:100%; left:0; text-align:center; top:-10000px; z-index:500; font-size:1.3em}
a.accessibility01:hover, a.accessibility01:focus, a.accessibility01:active {position: absolute; top:0; padding: 15px 0; font-weight:bold; color:#fff; background:#1d60a7; z-index:500}

/* skip navi */
.accessibility02 { position:absolute; top:0; display:block; left:0; width:199px; z-index:1; visibility:hidden; }
.accessibility02 a { display:block; height:19px; text-indent:-5000px; overflow:hidden}



/* hidden */
.hidden, #contents .hidden { visibility:hidden; position:absolute; font-size:0; width:0; height:0; line-height:0; margin:0; padding:0; background:none }

/* input */
.inp_st1 { border:1px solid #d7d7d7; background:#fff; padding:7px 11px 8px 10px; color:#555; font-size:1.05em }
.inp_st2 { border:1px solid #eaeaea; background:#fff; padding:5px 10px 7px 8px; color:#555; font-size:1.0em }
.inp_st3 { border:1px solid #d7d7d7; background:#fff; padding:7px 10px 8px 8px; color:#888; font-size:1.1em }
.sel_st1 { padding:5px 5px 7px 5px; border:1px solid #4a4b4f }
.sel_st2 { padding:5px 5px 7px 5px; border:1px solid #d7d7d7 }

/* with */
.w_40{ width:40px!important;}
.w_45{ width:45px!important;}
.w_60{ width:60px!important;}
.w_63{ width:63px!important;}
.w_80{ width:80px!important;}
.w_90{ width:88px!important;}
.w_110{ width:110px!important;}
.w_124{ width:120px!important;}
.w_142{ width:142px!important;}
.w_150{ width:156px!important;}
.w_164{ width:164px!important;}
.w_180{ width:180px!important;}
.w_240{ width:220px!important;}
.w_400{ width:400px!important;}
.w_500{ width:494px!important;}
.w_550{ width:550px!important;}
.w_700{ width:700px!important;}
.w_31_3p{ width:31.3333333%!important;}
.w_26p{ width:26%!important;}
.w_28p{ width:28%!important;}
.w_40p{ width:40%!important;}
.w_4p{ width:3% !important;}
.w_48p{ width:48%!important;}
.w_49p{ width:49%!important;}
.w_70p{ width:70%!important;}
.w_100p{ width:100%!important;}
.h_50{ height:50px!important;}
.h_70{ height:70px!important;}
.h_100{ height:100px!important;}
.h_200{ height:200px!important;}
.h_250{ height:250px!important;}

/* align */
.t_alc { text-align:center }
.t_alr { text-align:right }

/* margin */
.mt_0 { margin-top:0px!important; }
.mt_3 { margin-top:3px }
.mt_5 { margin-top:5px }
.mt_7 { margin-top:7px }
.mt_10 { margin-top:10px }
.mt_12 { margin-top:12px }
.mt_15 { margin-top:15px }
.mt_17 { margin-top:17px }
.mt_20 { margin-top:20px!important; }
.mt_21 { margin-top:21px!important; }
.mt_24 { margin-top:24px }
.mt_25 { margin-top:25px }
.mt_30 { margin-top:30px }
.mt_35 { margin-top:35px }
.mt_37 { margin-top:37px }
.mt_40 { margin-top:40px }
.mt_44 { margin-top:44px }
.mt_50 { margin-top:50px }
.mt_55 { margin-top:55px }
.mt_70 { margin-top:70px }
.mt_80 { margin-top:80px }
.mt_2p{ margin-top:2% }
.mt_100 { margin-top:100px }
.mt_410 { margin-top:410px }
.mr_5 { margin-right:5px }
.mr_10 { margin-right:10px }
.mr_21 { margin-right:21px }
.mr_38 { margin-right:38px }
.mr_2p { margin-right:2% }
.ml2 { margin-left:2px }
.ml4 { margin-left:4px }
.ml10 { margin-left:10px }
.ml20 { margin-left:20px }
.ml_50 { margin-left:50px }
.ml_57 { margin-left:57px }
.mrl_26 { margin-right:26px; margin-left:26px }
.mrl_50 { margin-right:50px; margin-left:50px }
.mb_20 { margin-bottom:20px!important; }
.mb_30 { margin-bottom:30px!important; }
.pt_69 { padding-top:69px!important; }


/* SVG 요소와 내부 요소들은 부모의 color를 상속받도록 (currentColor 사용을 위해) */
svg, svg path,svg circle,svg rect,svg ellipse,svg line,svg polyline,svg polygon,svg text,svg tspan,svg g {
	color: inherit;
}

/* 
	start: typography style guide
*/
.font-pretendard { font-family: var(--font-pretendard), 'notokr-regular', sans-serif; }
.font-poppins { font-family: var(--font-poppins), var(--font-pretendard), 'notokr-regular', sans-serif; }
/* Heading styles */
.heading-h1 { font-size: 28px; font-weight: 700; }
.heading-h2 { font-size: 24px; font-weight: 700; }
.heading-h3 { font-size: 20px; font-weight: 700; }
.heading-h4 { font-size: 18px; font-weight: 700; }
/* Body styles */
.body-18-semibold { font-size: 18px; font-weight: 600; }
.body-18-medium { font-size: 18px; font-weight: 500; }
.body-18-regular { font-size: 18px; font-weight: 400; }
.body-16-bold { font-size: 16px; font-weight: 700; }
.body-16-semibold { font-size: 16px; font-weight: 600; }
.body-16-medium { font-size: 16px; font-weight: 500; }
.body-16-regular { font-size: 16px; font-weight: 400; }
.body-14-semibold { font-size: 14px; font-weight: 600; }
.body-14-medium { font-size: 14px; font-weight: 500; }
.body-14-regular { font-size: 14px; font-weight: 400; }
.caption-13-medium { font-size: 13px; font-weight: 500; }
.caption-13-regular { font-size: 13px; font-weight: 400; }
.caption-12-medium { font-size: 12px; font-weight: 500; }
.caption-12-regular { font-size: 12px; font-weight: 400; }
/* 
	end: typography style guide
*/

.divider {
	width: 100%;
	height: 1px;
	background: var(--color-grayscale-10);
}

/* ============================================
   전역 스크롤바 스타일
   ============================================ */
/* WebKit 기반 브라우저 (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

*::-webkit-scrollbar-track {
	background: #2b15150d;
}

*::-webkit-scrollbar-thumb {
	border-radius: 0;
	background: #00000026;
	border: 0;
}

*::-webkit-scrollbar-thumb:hover {
	background: #0000003D;
}

/* 화살표 버튼 숨김 */
*::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

*::-webkit-scrollbar-corner {
	background: transparent;
}

/* ============================================
   Firefox에만 표준 속성 적용 (Chrome 덮어쓰기 방지. scrollbar-width와 scrollbar-color 설정이 스크롤바 화살표나 radius, border 등의 스타일을 덮어씀,,)
   ============================================ */
@supports (-moz-appearance: none) {
	* {
		scrollbar-width: thin;
		scrollbar-color: #00000026 #0000000D;
	}
}

/* 스크롤바 숨김 */
.hide-scrollbar {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
	display: none;  /* Chrome, Safari, Opera */
}

.empty-text {
	color: var(--color-grayscale-30);
}

/* 
    start: 언어 선택 드롭다운 스타일
*/
/* 구글 번역 위젯 숨기기 - CSS만으로 처리 */
.skiptranslate,
#google_translate_element,
.goog-te-banner-frame,
.goog-te-menu-frame,
.goog-te-gadget,
.goog-te-combo,
.goog-te-banner,
.goog-te-balloon-frame,
.skiptranslate,
.goog-te-spinner-pos,
.goog-te-menu-value,
.goog-te-menu2,
body > .goog-te-banner-frame,
body > .goog-te-menu-frame,
/* 동적 클래스명을 가진 구글 번역 버튼 */
body > div[class*="VIpgJd"],
body > div[class*="VIpgJd-ZVi9od"],
body > div[class*="VIpgJd-ZVi9od-aZ2wEe"],
/* SVG viewBox를 가진 구글 번역 아이콘 */
body > div:has(svg[viewBox="0 0 66 66"]),
body > div:has(svg[viewBox="0 0 96 96"]),
/* 구글 번역 관련 모든 body 직접 자식 div */
body > div[id^="google"],
body > div[class*="goog-te"],
/* 구글 번역 iframe */
iframe[src*="translate.google.com"],
iframe[src*="translate.googleapis.com"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
}

body {
	top: unset !important;
}
/* 구글 번역 font 태그 스타일 오버라이드 */
font {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-decoration: inherit !important;
	color: inherit !important;
}

/* 언어 선택 드롭다운 스타일 */
.lang-selector {
	position: relative;
	display: inline-block;
	overflow: visible;
	z-index: 1001;
}

/* 헤더 내부에서 드롭다운이 잘리지 않도록 */
#header .top_gnb,
.jbFixed #header .top_gnb {
	overflow: visible;
}

.lang-dropdown-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 17px;
	padding: 23px 0 23px 25px;
    border: none;
    background: transparent;
	cursor: pointer;
	transition: border-color 0.3s ease;
	/* iOS 사파리: 터치 영역 확대 및 300ms 지연 제거 */
	min-height: 44px;
	min-width: 44px;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.lang-dropdown-btn:focus {
	outline: none;
}

/* iOS 사파리: 자식 span이 터치를 가로채지 않도록 클릭은 항상 버튼으로 전달 */
.lang-dropdown-selected {
    flex: 1;
	text-align: left;
    font-size: 15.6px;
    font-weight: 500;
    color: var(--color-grayscale-0);
	pointer-events: none;
}
.lang-dropdown-arrow {
    width: fit-content;
    height: fit-content;
    font-size: 8px;
    transition: transform 0.3s ease;
	pointer-events: none;
}
.lang-dropdown-arrow svg {
    width: 8px;
    height: 5px;
    color: var(--color-grayscale-0);
}

.lang-dropdown-btn[aria-expanded="true"] .lang-dropdown-arrow {
	transform: rotate(90deg);
}

.lang-dropdown-menu {
	z-index: 10001;
	position: fixed;
	top: auto;
	left: auto;
	right: auto;
	width: auto;
	min-width: 100px;
	margin-top: 4px;
	padding: 4px 0;
	border: 1px solid var(--color-grayscale-10);
	border-radius: 4px;
	background-color: var(--color-grayscale-0);
	box-shadow: var(--shadow-normal);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.lang-dropdown-menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-dropdown-option {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.2s ease;
}

.lang-dropdown-option:hover {
	background-color: var(--color-grayscale-0-hover);
}

.lang-dropdown-option[aria-selected="true"],
.lang-dropdown-option.active {
	background-color: #e8e8e8;
	font-weight: 600;
}
/* 
    end: 언어 선택 드롭다운 스타일
*/

@media (max-width: 1000px) {
	.lang-dropdown-btn {
		height: 60px;
		padding: 16px 0 16px 15px;
	}
}