@charset "utf-8";

:root{
--primary-color:#3EB5F1;
--primary-color-hover:#179ADB;
--primary-light-color:#EFFAFF;

--secondary-color:#517AFF;
--secondary-color-hover:#3B61DB;

--accent-color:#F86A3C;
--accent-color-hover:#DF5F36;

--blue-color:#3576EF;
--blue-color-hover:#1458D7;

--red-color:#e81717;
--red-color-hover:#d11515;
--red-light-color:#FFF0F0;

--green-color:#289C77;
--green-color-hover:#067b14;

--gray-color:#939EA7;
--gray-color-hover:#7B868F;

--disable-fill-bg-color:#EAEBEF;
--disable-fill-line-color:#D3D7DE;
--disable-fill-text-color:#8D9098;

--default-line-color:#d3d7de;
--disable-line-bg-color:#F5F6F7;
--disable-line-border-color:#eaebef;
--disable-line-text-color:#bcc0ca;

/* Font Families */
--primary-title-font:"Pretendard Variable",sans-serif;
--secondary-title-font:'Gmarket Sans TTF';

/* Font Sizes */
--fs-44:2.750em;
--fs-24:1.500em;
--fs-22:1.375em;
--fs-19:1.188em;
--fs-18:1.125em;
--fs-16:1em;
--fs-14:0.875em;
--fs-13:0.813em;
}

/* ==========================================================================
   폰트
   ========================================================================== */

/* 서체 설정 */
[class*="titType"],[class*="tType"],.cfText{font-family:var(--font-main);}

/* 폰트 크기 */
.tType1{font-size:var(--fs-44);} /* 44px */
.tType2{font-size:var(--fs-24);} /* 24px */
.titType1{font-size:var(--fs-22);} /* 22px */
.tType3{font-size:var(--fs-19);} /* 19px */
.tType4{font-size:var(--fs-18);} /* 18px */
.titType2{font-size:var(--fs-18);} /* 18px */
.tType5{font-size:var(--fs-16);} /* 16px */
.tType6{font-size:var(--fs-14);} /* 14px */
.cfText{font-size:var(--fs-14);font-weight:500;} /* 14px / 강조형 */
.tType7{font-size:var(--fs-13);} /* 13px */

/* 폰트 굵기 */
.fwMd{font-weight:500;}
.fwBold{font-weight:600;}
.fwExtBold{font-weight:700;}

/* 텍스트 컬러 */
.c_222222{color:#222222;}
.c_333333{color:#333333;}
.c_999999{color:#999999;}
.c_b4b4b4{color:#b4b4b4;}
.c_456ded{color:var(--primary-color);}
.c_e40000{color:var(--red-color);}
.c_ed4555{color:#ed4555;}

.color_primary{color:var(--primary-color);}
.color_secondary{color:var(--secondary-color);}
.color_blue{color:var(--blue-color);}
.color_gray{color:var(--gray-color);}
.color_red{color:var(--red-color);}

/* ==========================================================================
   버튼 및 유틸리티
   ========================================================================== */
   
.form_wrap,.form_wrap .left,.form_wrap .right,.form_wrap .center{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.form_wrap.left,.form_wrap .left{justify-content:flex-start;}
.form_wrap.center,.form_wrap .center{justify-content:center;}
.form_wrap.right,.form_wrap .right{justify-content:flex-end;}

/* 기본 버튼 스타일 */
.btnType{min-width:70px;height:42px;background:#888;color:#fff;font-size:16px;border-radius:3px;margin:0 2px;transition:all 0.3s;}
.btnType:first-child{margin:0 2px 0 0;}
.btnType:last-child{margin:0 0 0 2px;}

/* 버튼 색상 변형 */
.btnType.bluefill{background-color:var(--primary-color);}
.btnType.bluebor{background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);}
.btnType.redfill{background-color:var(--red-color);}
.btnType.redbor{background-color:#fff;border:1px solid var(--red-color);color:var(--red-color);}

.btnType.fill{border:0;}
.btnType.fill.primary{background:var(--primary-color);color:#fff;}
.btnType.fill.secondary{background:var(--secondary-color);color:#fff;}
.btnType.fill.accent{background:var(--accent-color);color:#fff;}
.btnType.fill.gray{background:var(--gray-color);color:#fff;}
.btnType.fill.red{background:var(--red-color);color:#fff;}

.btnType.fill.primary:hover{background:var(--primary-color-hover);color:#fff;}
.btnType.fill.secondary:hover{background:var(--secondary-color-hover);color:#fff;}
.btnType.fill.accent:hover{background:var(--accent-color-hover);color:#fff;}
.btnType.fill.gray:hover{background:var(--gray-color-hover);color:#fff;}
.btnType.fill.red:hover{background:var(--red-color-hover);color:#fff;}

.btnType.line{background:#fff;}
.btnType.line.primary{border:1px solid var(--primary-color);color:var(--primary-color);}
.btnType.line.secondary{border:1px solid var(--secondary-color);color:var(--secondary-color);}
.btnType.line.accent{border:1px solid var(--accent-color);color:var(--accent-color);}
.btnType.line.gray{border:1px solid var(--gray-color);color:var(--gray-color);}
.btnType.line.red{border:1px solid var(--red-color);color:var(--red-color);}

.btnType.line.primary:hover{background:solid var(--primary-light-color);color:var(--primary-color);}
.btnType.line.secondary:hover{background:var(--secondary-light-color);color:var(--secondary-color);}
.btnType.line.accent:hover{background:var(--accent-light-color);color:var(--accent-color);}
.btnType.line.gray:hover{background:var(--gray-light-color);color:var(--gray-color);}
.btnType.line.red:hover{background:var(--red-light-color);color:var(--red-color);}

.btnType.tiny{height:26px;}
.btnType.small{height:32px;}
.btnType.regular{height:40px;}
.btnType.medium{height:44px;}
.btnType.large{height:50px;}
.btnType.xlarge{height:56px;}

/* 배경색 유틸리티 */
.bg_888888{background-color:#888!important;color:#fff!important;}
.bg_888888:hover{background-color:#555!important;}
.bg_ed4545{background-color:#ed4545!important;color:#fff!important;}
.bg_ed4545:hover{background-color:#e82323!important;}
.bg_456ded{background-color:var(--primary-color)!important;color:#fff!important;}
.bg_456ded:hover{background-color:var(--primary-color-hover)!important;}

/* 정렬 및 배치 */
.center{text-align:center!important;margin:0 auto;}
.left{text-align:left!important;}
.right{text-align:right!important;}
.block{display:block;width:100%;}

/* 기타 요소 (필수 표시 및 리스트) */
.reqArea{position:relative;}
.reqArea::after{content:"*";position:absolute;color:var(--red-color);left:-10px;top:50%;transform:translateY(-30%);}
.listType1 li{list-style:url(/pb/img/common/listType1.png);text-align:left;vertical-align:middle;}
.listType2 li{list-style:url(/pb/img/common/listType2.png);text-align:left;}

/* 비활성화 상태 */
button[disabled],html input[disabled]{cursor:default;background-color:var(--disable-fill-bg-color);color:var(--disable-fill-text-color);text-align:center;}