/* ================================================
   setting_util.css - 순수 CSS 유틸리티 클래스
   PHP 변수 불필요한 공통 클래스 모음
   setting_css.php에서 link로 로드
================================================ */


/* 폰트 유틸리티 클래스: setting_css.php에서 동적 생성으로 이전됨 */





/**** 공백 ****/
.sp_com{height: 40px; width: 100%; float: left}
.sp_100{ width:100%; height:100px; float:left}
.sp_90{ width:100%; height:90px; float:left}
.sp_80{ width:100%; height:80px; float:left}
.sp_70{ width:100%; height:70px; float:left}
.sp_60{ width:100%; height:60px; float:left}
.sp_50{ width:100%; height:50px; float:left}
.sp_40{ width:100%; height:40px; float:left}
.sp_30{ width:100%; height:30px; float:left}
.sp_20{ width:100%; height:20px; float:left}
.sp_10{ width:100%; height:10px; float:left}

/**** 마진값: 하단 ****/
.mb_100{ margin-bottom:100px !important}
.mb_90{ margin-bottom:90px !important}
.mb_80{ margin-bottom:80px !important}
.mb_70{ margin-bottom:70px !important}
.mb_60{ margin-bottom:60px !important}
.mb_50{ margin-bottom:50px !important}
.mb_40{ margin-bottom:40px !important}
.mb_30{ margin-bottom:30px !important}
.mb_20{ margin-bottom:20px !important}
.mb_10{ margin-bottom:10px !important}
.mb_5{ margin-bottom:5px !important}

/**** 마진값: 상단 ****/
.mt_100{ margin-top:100px}
.mt_90{ margin-top:90px}
.mt_80{ margin-top:80px}
.mt_70{ margin-top:70px}
.mt_60{ margin-top:60px}
.mt_50{ margin-top:50px}
.mt_40{ margin-top:40px}
.mt_30{ margin-top:30px}
.mt_20{ margin-top:20px}
.mt_10{ margin-top:10px}
.mt_5{ margin-top:5px}

/**** 태블릿: 3분의 2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
.sp_100{ height:66px}
.sp_90{ height:60px}
.sp_80{ height:53px}
.sp_70{ height:47px}
.sp_60{ height:40px}
.sp_50{ height:33px}
.sp_40{ height:27px}
.sp_30{ height:20px}
.sp_20{ height:13px}
.sp_10{ height:7px}

.mb_100{ margin-bottom:66px !important}
.mb_90{ margin-bottom:60px !important}
.mb_80{ margin-bottom:53px !important}
.mb_70{ margin-bottom:47px !important}
.mb_60{ margin-bottom:40px !important}
.mb_50{ margin-bottom:33px !important}
.mb_40{ margin-bottom:27px !important}
.mb_30{ margin-bottom:20px !important}
.mb_20{ margin-bottom:13px !important}
.mb_10{ margin-bottom:7px !important}
.mb_5{ margin-bottom:3px !important}

.mt_100{ margin-top:66px}
.mt_90{ margin-top:60px}
.mt_80{ margin-top:53px}
.mt_70{ margin-top:47px}
.mt_60{ margin-top:40px}
.mt_50{ margin-top:33px}
.mt_40{ margin-top:27px}
.mt_30{ margin-top:20px}
.mt_20{ margin-top:13px}
.mt_10{ margin-top:7px}
.mt_5{ margin-top:3px}
}

/**** 모바일: 50% ****/
@media only all and (max-width:767px) {
.sp_100{ height:50px}
.sp_90{ height:45px}
.sp_80{ height:40px}
.sp_70{ height:35px}
.sp_60{ height:30px}
.sp_50{ height:25px}
.sp_40{ height:20px}
.sp_30{ height:15px}
.sp_20{ height:10px}
.sp_10{ height:5px}

.mb_100{ margin-bottom:50px !important}
.mb_90{ margin-bottom:45px !important}
.mb_80{ margin-bottom:40px !important}
.mb_70{ margin-bottom:35px !important}
.mb_60{ margin-bottom:30px !important}
.mb_50{ margin-bottom:25px !important}
.mb_40{ margin-bottom:20px !important}
.mb_30{ margin-bottom:15px !important}
.mb_20{ margin-bottom:10px !important}
.mb_10{ margin-bottom:5px !important}
.mb_5{ margin-bottom:3px !important}

.mt_100{ margin-top:50px}
.mt_90{ margin-top:45px}
.mt_80{ margin-top:40px}
.mt_70{ margin-top:35px}
.mt_60{ margin-top:30px}
.mt_50{ margin-top:25px}
.mt_40{ margin-top:20px}
.mt_30{ margin-top:15px}
.mt_20{ margin-top:10px}
.mt_10{ margin-top:5px}
.mt_5{ margin-top:3px}

/**** 모바일 전용 폰트 축소 (COM_tit 조합용) ****/
/* font-size 직접 오버라이드 → 레이아웃 공간도 함께 줄어듦 */
.COM_tit.mo-f99 { font-size: calc(var(--_base-size) * 0.99) !important }
.COM_tit.mo-f98 { font-size: calc(var(--_base-size) * 0.98) !important }
.COM_tit.mo-f97 { font-size: calc(var(--_base-size) * 0.97) !important }
.COM_tit.mo-f96 { font-size: calc(var(--_base-size) * 0.96) !important }
.COM_tit.mo-f95 { font-size: calc(var(--_base-size) * 0.95) !important }
.COM_tit.mo-f94 { font-size: calc(var(--_base-size) * 0.94) !important }
.COM_tit.mo-f93 { font-size: calc(var(--_base-size) * 0.93) !important }
.COM_tit.mo-f92 { font-size: calc(var(--_base-size) * 0.92) !important }
.COM_tit.mo-f91 { font-size: calc(var(--_base-size) * 0.91) !important }
.COM_tit.mo-f90 { font-size: calc(var(--_base-size) * 0.90) !important }
.COM_tit.mo-f85 { font-size: calc(var(--_base-size) * 0.85) !important }
.COM_tit.mo-f80 { font-size: calc(var(--_base-size) * 0.80) !important }
.COM_tit.mo-f75 { font-size: calc(var(--_base-size) * 0.75) !important }
.COM_tit.mo-f70 { font-size: calc(var(--_base-size) * 0.70) !important }
}


.COM_tit.letter-05 {letter-spacing: -0.5px!important}
.COM_tit.letter-1 {letter-spacing: -1px!important }
.COM_tit.letter-15 {letter-spacing: -1.5px!important }
.COM_tit.letter-2 {letter-spacing: -2px!important;  }
.COM_tit.letter-3 {letter-spacing: -3px!important }

.COM_tit em.w400{font-weight: 400}
.COM_tit em.w500{font-weight: 500}
.COM_tit em.w600{font-weight: 600}
.COM_tit em.w700{font-weight: 700}
.COM_tit em.w800{font-weight: 800}