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


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

.COM_TB{width: 100%; float: left} 	



/**** 공백 ****/
.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}


/* ** align ** */
.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}


/* ================================================
   hycom 폼 변수 + 폼 공통 스타일
   (setting_css.php에서 이동 - var() 참조)
   ※ :root 변수값은 setting_css.php에서 PHP로 선언
================================================ */

:root {
/* ★ hycom 폼 변수 오버라이드 (rem → px 통일) --------- */

/* Input (text, password, number, email 등) */
--hycom-input-h-xsm: 28px;
--hycom-input-h-sm: 32px;
--hycom-input-h-md: 36px;
--hycom-input-h-lg: 42px;
--hycom-input-h-xlg: 52px;

--hycom-input-px-xsm: 8px;
--hycom-input-px-sm: 10px;
--hycom-input-px-md: 12px;
--hycom-input-px-lg: 14px;
--hycom-input-px-xlg: 16px;

--hycom-input-rd-xsm: 3px;
--hycom-input-rd-sm: 4px;
--hycom-input-rd-md: 5px;
--hycom-input-rd-lg: 6px;
--hycom-input-rd-xlg: 8px;

--hycom-input-fz-xsm: 12px;
--hycom-input-fz-sm: 13px;
--hycom-input-fz-md: 14px;
--hycom-input-fz-lg: 15px;
--hycom-input-fz-xlg: 16px;

/* Select */
--hycom-select-h-xsm: 28px;
--hycom-select-h-sm: 32px;
--hycom-select-h-md: 36px;
--hycom-select-h-lg: 36px;

--hycom-select-pd-xsm: 0 28px 0 8px;
--hycom-select-pd-sm: 0 30px 0 10px;
--hycom-select-pd-md: 0 34px 0 12px;
--hycom-select-pd-lg: 0 34px 0 12px;

--hycom-select-rd-xsm: 3px;
--hycom-select-rd-sm: 4px;
--hycom-select-rd-md: 5px;
--hycom-select-rd-lg: 6px;

--hycom-select-fz-xsm: 12px;
--hycom-select-fz-sm: 13px;
--hycom-select-fz-md: 14px;
--hycom-select-fz-lg: 14px;

--hycom-select-rn-xsm: 0px;
--hycom-select-rn-sm: 0px;
--hycom-select-rn-md: 4px;
--hycom-select-rn-lg: 4px;

--hycom-select-bgs-xsm: 24px;
--hycom-select-bgs-sm: 24px;
--hycom-select-bgs-md: 28px;
--hycom-select-bgs-lg: 28px;

/* Checkbox */
--hycom-chk-size-xsm: 14px;
--hycom-chk-size-sm: 16px;
--hycom-chk-size-md: 18px;
--hycom-chk-size-lg: 20px;

--hycom-chk-fz-xsm: 12px;
--hycom-chk-fz-sm: 13px;
--hycom-chk-fz-md: 14px;
--hycom-chk-fz-lg: 15px;

--hycom-chk-primary-chk-xsm: 10px;
--hycom-chk-primary-chk-sm: 12px;
--hycom-chk-primary-chk-md: 14px;
--hycom-chk-primary-chk-lg: 16px;

--hycom-chk-secondary-chk-md: 16px;

--hycom-chk-pos-xs: 4px;
--hycom-chk-pos-sm: 4px;
--hycom-chk-pos-md: 4px;
--hycom-chk-pos-lg: 4px;

/* Radio */
--hycom-rdo-size-xsm: 14px;
--hycom-rdo-size-sm: 16px;
--hycom-rdo-size-md: 18px;
--hycom-rdo-size-lg: 20px;

--hycom-rdo-fz-xsm: 12px;
--hycom-rdo-fz-sm: 13px;
--hycom-rdo-fz-md: 14px;
--hycom-rdo-fz-lg: 15px;

--hycom-rdo-chk-xsm: 6px;
--hycom-rdo-chk-sm: 8px;
--hycom-rdo-chk-md: 10px;
--hycom-rdo-chk-lg: 12px;

--hycom-rdo-pos-sm: 2px;
--hycom-rdo-pos-md: 4px;
--hycom-rdo-pos-lg: 6px;

/* Textarea */
--hycom-rd-6: 5px;
}

/* ★ 폼 공통 스타일 보정 */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"] {
  height: var(--from-h) !important;
  font-size: var(--from-tx) !important;
  padding: 0 12px !important;
  border: 1px solid var(--from-border) !important;
  border-radius: var(--from-rd) !important;
  color: #333 !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
}

/* ★ Date / DateTime / Time 입력 */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  height: var(--from-date-h) !important;
  font-size: var(--from-date-tx) !important;
  padding: 0 12px !important;
  border: 1px solid var(--from-border) !important;
  border-radius: var(--from-rd) !important;
  color: #333 !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  cursor: pointer !important;
}
/* 날짜 피커 아이콘 커서 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
  border-color: var(--from-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--from-focus) 12%, transparent) !important;
}
.form-control::placeholder,
input::placeholder {
  color: var(--from-placeholder) !important;
  font-size: var(--from-tx) !important;
}

textarea.form-control,
textarea {
  height: auto !important;
  min-height: 80px;
  padding: 10px 12px !important;
  font-size: var(--from-textarea-fz) !important;
  line-height: 1.5 !important;
  border: 1px solid var(--from-border) !important;
  border-radius: var(--from-textarea-rd) !important;
  resize: vertical;
}
textarea.form-control:focus,
textarea:focus {
  border-color: var(--from-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--from-focus) 12%, transparent) !important;
  outline: none !important;
}

/* ★ Select (셀렉트, 년도, 월, 일, 시간 드롭다운 통일) */
.form-select,
select {
  height: var(--from-select-h) !important;
  font-size: var(--from-select-tx) !important;
  padding: 0 24px 0 7px !important;
  border: 1px solid var(--from-border) !important;
  border-radius: var(--from-select-rd) !important;
  color: #333 !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
  background-size: 14px !important;
}

.form-select:focus,
select:focus {
  border-color: var(--from-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--from-focus) 10%, transparent) !important;
}

/* ★ Checkbox - input 자체 커스텀 (label 불필요) */
/* 아코디언(.acc) 및 hidden 체크박스 제외 */
input[type="checkbox"]:not(.acc):not([hidden]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: var(--from-chk) !important;
  height: var(--from-chk) !important;
  min-width: var(--from-chk) !important;
  min-height: var(--from-chk) !important;
  max-width: var(--from-chk) !important;
  max-height: var(--from-chk) !important;
  border: 1.5px solid var(--from-border) !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
input[type="checkbox"]:not(.acc):not([hidden]):hover {
  border-color: var(--from-focus) !important;
}
input[type="checkbox"]:not(.acc):not([hidden]):checked {
  background-color: var(--from-focus) !important;
  border-color: var(--from-focus) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
input[type="checkbox"]:not(.acc):not([hidden]):focus-visible {
  outline: 2px solid var(--from-focus) !important;
  outline-offset: 2px !important;
}
input[type="checkbox"]:not(.acc):not([hidden]):disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* label 연동 보정 (.form-check 내부만 - 전역 적용 금지) */
.form-check input[type="checkbox"] ~ label:not(.checkset-label):not(.radioset-label) {
  font-size: var(--from-tx) !important;
  cursor: pointer;
  vertical-align: middle;
}
.form-check input[type="checkbox"] ~ label:not(.checkset-label):not(.radioset-label)::before {
  display: none !important;
}
.form-check input[type="checkbox"] ~ label:not(.checkset-label):not(.radioset-label)::after {
  display: none !important;
}

/* ★ Radio - input 자체 커스텀 (label 불필요) */
input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: var(--from-rdo) !important;
  height: var(--from-rdo) !important;
  min-width: var(--from-rdo) !important;
  min-height: var(--from-rdo) !important;
  max-width: var(--from-rdo) !important;
  max-height: var(--from-rdo) !important;
  border: 1.5px solid var(--from-border) !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
input[type="radio"]:hover {
  border-color: var(--from-focus) !important;
}
input[type="radio"]:checked {
  border-color: var(--from-focus) !important;
  background-image: radial-gradient(circle, var(--from-focus) 38%, transparent 40%) !important;
}
input[type="radio"]:focus-visible {
  outline: 2px solid var(--from-focus) !important;
  outline-offset: 2px !important;
}
input[type="radio"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* label 연동 보정 (.form-check 내부만 - 전역 적용 금지) */
.form-check input[type="radio"] ~ label:not(.checkset-label):not(.radioset-label) {
  font-size: var(--from-tx) !important;
  cursor: pointer;
  vertical-align: middle;
}
.form-check input[type="radio"] ~ label:not(.checkset-label):not(.radioset-label)::before {
  display: none !important;
}
.form-check input[type="radio"] ~ label:not(.checkset-label):not(.radioset-label)::after {
  display: none !important;
}




/* 폰트관리 날개 버튼 */
.wing_left_openbtn_font{width: 60px; height: 60px; border-radius: 0px; background-color: #2563eb; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 30px; position: fixed; left:0px; bottom:300px; z-index: 99999999999999; cursor: pointer}
.wing_left_openbtn_font:before{width: 60px; height: 60px; content: "\ec91"; font-family: unicons-line; font-size: 25px; color: #fff; display: flex; justify-content: center; align-items: center;}

/* 위젯생성 날개 버튼 */
.wing_left_openbtn_wg{width: 60px; height: 60px; border-radius: 0px; background-color: #E67E22; display: flex;  justify-content: center;  align-items: center; color: #fff; font-size: 30px; position: fixed; left:0px; bottom:240px; z-index: 99999999999999; cursor: pointer}
.wing_left_openbtn_wg:before{width: 60px; height: 60px;content: "\e98b";    font-family: unicons-line; font-size: 25px; color: #fff; display: flex;  justify-content: center;  align-items: center;}
.wing_left_openbtn_wg.hidden{display: none; }