/* *****************************************************************
 * filename : common.css
 * description : 변경된 reset / ui / button / input / color / common ( 공통으로 사용되는 CSS)
 * date : 2026-04-06
***************************************************************** */

/* reset(변경) */



html {
	overflow-x: hidden;
	background-color: var(--color-b);
	overscroll-behavior: none;
}

body {
    overflow-x: hidden;
	background-color: var(--color-b);
}

body, button, select, textarea, sub {
	color:var(--color-w);
	font-size:16px;
	font-weight: 400;
	font-family:'Pretendard','돋움', dotum, sans-serif;
	line-height:1.6;
	word-break:break-all;
}

label {
	font-size:var(--fs-xs);
	background-color:var(--color-b);
	line-height:1.0;
	color:var(--color-w);
}

input, select {
	font-size:16px;
	background-color:var(--color-b);
	line-height:1.0;
	color:var(--color-w);
}

textarea {
    font-size: 18px;
	background-color:var(--color-b);
	line-height:1.0;
	color:var(--color-w);
}

input[type="checkbox"] {
    background-color: transparent;
    accent-color: var(--color-main);
}

/* 자동완성 스타일 덮어쓰기 */
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--color-b) inset !important; /* 배경색 */
    -webkit-text-fill-color: var(--color-w) !important;                 /* 글자색 */
    caret-color: var(--color-w);                                        /* 커서색 */
    transition: background-color 9999s ease-in-out 0s;                  /* 색 변경 지연 트릭 */
}


/* 기본 상태 — 아무것도 선택 안 됐을 때 (placeholder) 회색 */
select.placeholder-active {
    color: var(--color-g);
}

select {
    /* 기본 화살표 제거 — reset.css의 appearance:none으로 이미 처리됨 */
    appearance: none;
    -webkit-appearance: none;

    /* 오른쪽에 아이콘 공간 확보 */
    padding-right: clamp(32px, 3.33vw, 48px);

    cursor: pointer;
	color: var(--color-w);
}


.select-field {
    position: relative; /* 이미 pgt_re 클래스로 적용되어 있음 */
}

/* 커스텀 화살표 아이콘 */
.select-field::after {
    content: '';
    position: absolute;
    top: 50%;
    right: clamp(12px, 1.25vw, 20px);
    transform: translateY(-50%);
    width: clamp(20px, 1.67vw, 32px);
    height: clamp(20px, 1.67vw, 32px);

    /* 아이콘 이미지 사용 */
    background-image: url('/assets/img/00_common/icon_arrow_down_w.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    pointer-events: none; /* 클릭 이벤트 방해 안 함 */
}

h1, h2, h3, h4 ,h5 {
	line-height:1.2;
}

/* 커스텀 스크롤 바 */
.scroll-box div::-webkit-scrollbar {
    width: 8px;
}

.scroll-box > div::-webkit-scrollbar-thumb {
    background: var(--color-g);
    border-radius: 10px;
}

.scroll-box> div::-webkit-scrollbar-thumb:hover {
    background: var(--color-w);
}

.scroll-box textarea::-webkit-scrollbar {
    width: 8px;
}

.scroll-box > textarea::-webkit-scrollbar-thumb {
    background: var(--color-g);
    border-radius: 10px;
}

.scroll-box> textarea::-webkit-scrollbar-thumb:hover {
    background: var(--color-w);
}



/* 영문폰트 */
.font-eng-01 {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.font-eng-02 {
	font-family: "Economica", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.font-eng-03 {
	font-family: "Alfa Slab One", serif;
	font-weight: 400;
	font-style: normal;
}

:root {

	/*영문 폰트*/

	/*폰트 사이즈*/
	--fs-xxs: clamp(12px, 0.83vw, 16px);   /* 16 / 19.2 */
	--fs-xs: clamp(14px, 0.94vw, 18px);    /* 18 / 19.2 */
	--fs-sm: clamp(16px, 1.04vw, 20px);    /* 20 / 19.2 */
	--fs-md: clamp(18px, 1.25vw, 24px);    /* 24 / 19.2 */
	--fs-lg: clamp(20px, 1.67vw, 32px);    /* 32 / 19.2 */
	--fs-xl: clamp(24px, 2.5vw, 48px);		/* 48 / 19.2 */
	--fs-xxl: clamp(40px, 3.33vw, 64px);    /* 64 / 19.2 */
	--fs-xxxl: clamp(60px, 5.20vw, 100px);  /* 100 / 19.2 */
	--fs-hero: clamp(64px, 6.25vw, 120px); /* 120 / 19.2 */
	--fs-max: clamp(120px, 10.41vw, 200px); /* 120 / 19.2 */

	/*가로 사이즈*/
	--width-1: clamp(40px, 4.17vw, 100px);
	--width-2: clamp(480px, 46.875vw, 900px);
	--width-3: clamp(400px, 43.75vw, 840px);
	--width-4: clamp(120px, 16.66vw, 320px);
	--width-5: clamp(12px, 1.25vw, 24px);
	--width-6: clamp(160px, 17.70vw, 340px);
	
	/*높이 사이즈*/
	--height-1: clamp(300px, 32.29vw, 620px);
	--height-2: clamp(300px, 33.33vw, 640px);
	--height-3: clamp(48px, 5vw, 96px);
	--height-4: clamp(480px, 46.87vw, 900px);
	--height-5: clamp(120px, 16.66vw, 320px);
	--height-6: clamp(64px, 8.33vw, 160px);
	--height-7: clamp(320px, 34.68vw, 666px);
	
	/*패딩 마진 사이즈*/
	--space-1: clamp(4px, 0.42vw, 8px);
	--space-1-1: clamp(6px, 0.62vw, 12px);
	--space-2: clamp(8px, 0.83vw, 16px);
	--space-2-1: clamp(16px, 1.04vw, 20px); 
	--space-3: clamp(12px, 1.25vw, 24px);
	--space-4: clamp(16px, 1.67vw, 32px);
	--space-4-1: clamp(20px, 2.08vw, 40px);
	--space-5: clamp(24px, 2.5vw, 48px);
	--space-5-1: clamp(32px, 3.33vw, 60px);
	--space-6: clamp(32px, 3.33vw, 64px);
	--space-7: clamp(40px, 4.17vw, 80px);
	--space-7-1: clamp(44px, 5.20vw, 100px);
	--space-8: clamp(48px, 6.25vw, 120px);
	--space-9: clamp(64px, 8.33vw, 160px);
	--space-10: clamp(80px, 10.42vw, 200px);
	--space-10-1: clamp(120px, 15.62vw, 300px);
	--space-11: clamp(160px, 20.83vw, 400px);
	--space-12: clamp(200px, 20.83vw, 400px);
	
		/*간격 사이즈*/
	--gap-1: var(--space-1);
	--gap-2: var(--space-2);
	--gap-2-1: var(--space-2-1);
	--gap-3: var(--space-3);
	--gap-4: clamp(20px, 2.08vw, 40px);
	--gap-5: var(--space-5);
	--gap-5-1: var(--space-5-1);
	--gap-6: var(--space-6);
	--gap-7: var(--space-7);
	--gap-8: var(--space-8);
	--gap-9: var(--space-9);
	--gap-10: var(--space-10);
		
	/*보더 라디우스 사이즈*/
	--radius-xs: clamp(4px, 0.42vw, 8px);
	--radius-sm: clamp(8px, 0.63vw, 12px);
	--radius-md: clamp(12px, 1.04vw, 20px);
	--radius-lg: clamp(16px, 1.67vw, 32px);
	--radius-xl: clamp(24px, 2.5vw, 48px);
	--radius-2xl: clamp(32px, 3.33vw, 64px);
	--radius-3xl: clamp(48px, 4.17vw, 80px);
	--radius-round: clamp(50px, 5.21vw, 100px);

	/*컬러*/
	--color-b: #000;
    --color-w: #fff;
    --color-g: #808080;
	--color-lg: #ddd;
	--color-dg: #333;
    --color-main: #BBFF00; 
}


/* 출력 및 정렬 */
.none {display:none !important;}
.overflow {overflow:hidden;}
.clear {clear:both;}
.clear:after {display:block; clear:both; content:'';}

.pc_only {display:block;}
.tablet_only {display:none;}
.pnt_only {display:block;}
.tnm_only {display:none;}
.mo_only {display:none;}


/* ************** 폰트 스타일 ************** */

/* font align */
.t_left {text-align:left !important;}
.t_center {text-align:center !important;}
.t_right {text-align:right !important;}

/* font weight */
.fw_normal {font-weight:normal !important;}
.fw_bold {font-weight:bold !important;}

/* font-break*/
.t_break {word-break:break-all !important;}
.t_keep {word-break:keep-all !important;}

/* line style */
.bor {border:1px solid #fff;}
.bor_t {border-top:1px solid #fff;}
.bor_l {border-left:1px solid #fff;}
.bor_r {border-right:1px solid #fff;}
.bor_b {border-bottom:1px solid #fff;}
.bor_ddd { border:1px solid #ddd;}

/* font 컬러 */
.fc_b {color:var(--color-b);}
.fc_w {color:var(--color-w);}
.fc_main {color:var(--color-main);}

/* 포지션 */
.pgt_re {position:relative;}
.pgt_ab {position:absolute;}

/* ************** 그리드 스타일 ************** */
/* display */
.dp_bl {display:block;}
.dp_inbl {display:inline-block;}
.dp_in {display:inline;}
.dp_fx {display:flex;}
.dp_gr {display:grid;}

/* flex 관련 */
.fl_jc_cen {justify-content:center;}
.fl_jc_sb {justify-content:space-between;}
.fl_jc_end {justify-content:flex-end;}
.fl_ai_str {align-items:stretch;}
.fl_ai_cen {align-items:center;}
.fl_ai_end {align-items:end;}
.fl_dr_row {flex-direction:row;}
.fl_dr_column {flex-direction:column;}
.fl_it_fe {place-items: flex-end;}

/* ************** 너비/여백 스타일 ************** */
/* width */
.w100 {width:100%;}
.w90 {width:90%;}
.w80 {width:80%;}
.w75 {width:75%;}
.w70 {width:70%;}
.w65 {width:65%;}
.w60 {width:60%;}
.w50 {width:50%;}
.w45 {width:45%;}
.w40 {width:40%;}
.w35 {width:35%;}
.w30 {width:30%;}
.w25 {width:25%;}
.w20 {width:20%;}
.w10 {width:10%;}

.m_w {max-width:2560px; margin:0 auto;}

/* height */
.full_section {
	min-height: 100vh;   /* 구형 브라우저 대비 */
    min-height: 100dvh;  /* 최신 브라우저 - 모바일까지 완벽 대응 */
}

/* ************** 기타 ************** */
/* 커서 */
.csr_p {cursor:pointer;}


.pro_view_keyword {margin: 2px 0; }

.file_del {padding: 0 0 0 5px;cursor: pointer;}



/* 태블릿 */
@media all and (max-width: 1024px) {

	.pc_only {display:none;}
	.tablet_only {display:block;}
	.pnt_only {display:block;}
	.tnm_only {display:block;}
	.mo_only {display:none;}

	input, select {
		font-size:14px;
	}

	textarea {
		font-size: 16px;
	}

}





/* 모바일 */
@media all and (max-width: 768px) {

	.pc_only {display:none;}
	.tablet_only {display:none;}
	.pnt_only {display:none;}
	.tnm_only {display:block;}
	.mo_only {display:block;}

	
}