/*
Copyright (C) MUHAYU Inc. All rights reserved.
*/
/* 
    Created on : 2025. 6. 9., 오후 4:50:27
    Author     : jypark
*/
@charset "UTF-8";
@import "font.css";

.font-shiningstar-68{
    font-family: 'Cafe24Shiningstar', 'Noto Sans KR', sans-serif;
    font-display: swap;
    font-size: 68px;
    line-height: 1.2;
}

/* 폰트 로딩 완료 후 추가 스타일 */
.fonts-loaded .font-shiningstar-68 {
    /* 폰트 로딩 완료 후 추가적인 스타일 적용 가능 */
    font-family: 'Cafe24Shiningstar', 'Noto Sans KR', sans-serif;
    font-size: 68px;
    line-height: 1.2;
}

body{
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: left;
	word-wrap: break-word;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	background: #212c42;
	color: #3E4448;
}

p, h1, h2, h3, h4, h5 {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

h1{font-size:24px;}
h2{font-size:22px;}
h3{font-size:20px;}
h4{font-size:18px;}
h5{font-size:16px;}

img{vertical-align: middle;}

*, ::before, ::after{
  box-sizing: border-box;
}

input{font-size: inherit;}
input[type='button']:active{transform: translateY(1.4px);}
a{color:inherit;}

.ac{text-align: center;}
.ar{text-align: right;}
.al{text-align: left;}

.mt20{margin-top:20px;}
.ml20{margin-left: 20px;}
.pr12{padding-right: 12px;}

.w200{width: 200px;}
.w100p{width: 100%;}

.ft14{font-size: 14px;}
.ft18{font-size: 18px;}
.ft48{font-size: 48px;}
.ft68{font-size: 68px;}

.nowrap{white-space: nowrap;}
.hide{display: none;}

.bold{font-size: 32px;font-weight: 700}
.blue{color: var(--lite-color-main);}
.red{color: var(--lite-color-red-dark);}

:root {
  --sidebar-width: 275px;
  --sidebar-width-collapse: 60px;
  --header-nav-height: 60px;
  --header-util-height: 48px;
  --min-container-width: 768px;
  --max-container-width: 1020px;
  --myspace-max-container-width: 1512px;
  --footer-height: 200px;
  --container-padding: 12px;
  --font-default: 'Noto Sans KR';
  --font-webfont: 'Noto Sans KR';
  /***************** 기본 사이즈 변수 *****************/
  /* component height */
  --height-xxs: 20px;
  --height-xs: 28px;
  --height-sm: 32px;
  --height-md: 40px;
  --height-lg: 48px;
  /* component padding */
  --spacing-xxxs: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 40px;
  --spacing-minus--xxxs: -2px;
  --spacing-minus--xxs: -4px;
  --spacing-minus--xs: -8px;
  --spacing-minus--sm: -12px;
  --spacing-minus--md: -16px;
  --spacing-minus--lg: -20px;
  --spacing-minus--xl: -24px;
  --spacing-minus--xxl: -32px;
  --spacing-minus--xxxl: -40px;
  /* gap */
  --row-col-gap: 12px;
  /* box Style */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 14px;
  /* font size */
  --font-size-xxxxxl: 36px;
  --font-size-xxxxl: 32px;
  --font-size-xxxl: 24px;
  --font-size-xxl: 22px;
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 11px;
  /* font weight */
  --font-weight-black: 900;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --icon-size-xs: 20px;
  --icon-size-sm: 28px;
  --icon-size-md: 32px;
  --icon-size-lg: 40px;
  --icon-size-xl: 48px;
  /***************** color와 컴포넌트 사이즈는 lite 기준으로 작성 *****************/
  /****** color code ******/
  --lite-color-red: #FF4F79;
  --lite-color-red-light: #FFF1F4;
  --lite-color-red-dark: #FF006B;
  --lite-color-orange: #FF971C;
  --lite-color-orange-dark: #FF7300;
  --lite-color-blue: #0075FF;
  --lite-color-green: #00C86A;
  --lite-color-shadow: rgba(0, 0, 0, 0.25);
  --color-default: var(--color-black);
  --color-primary: var(--lite-color-main);
  --color-primary-dark: var(--lite-color-main-dark);
  --color-secondary: var(--lite-color-white);
  --color-secondary-dark: var(--lite-color-gray-50);
  --color-white: var(--lite-color-white);
  --color-black: var(--lite-color-black);
  --color-rgb-black: 0,0,0;
  --color-rgb-white: 255,255,255;
  --color-danger: var(--lite-color-red);
  --color-danger-light: var(--lite-color-red-light);
  --color-danger-dark: var(--lite-color-red-dark);
  --color-warning: var(--lite-color-orange);
  --color-warning-dark: var(--lite-color-orange-dark);
  --color-shadow: var(--lite-color-shadow);
  --color-error: var(--lite-color-red-dark);
  --color-label: var(--color-black);
  /*** lite color ***/
  --lite-color-main: #00C2FF;
  --lite-color-main-dark: #00afe6;
  --lite-color-main-20: rgba(0, 194, 255, 0.20);
  --lite-color-sub: var(--lite-color-green);
  --lite-color-gpt: #7C52F1;
  --lite-color-gpt-light: #F1F1FF;
  --lite-color-white: #fff;
  --lite-color-black: #3E4448;
  --lite-color-gray-50: #F4F4F4;
  --lite-color-black-5: rgba(39, 39, 44, 0.05);
  --lite-color-black-15: rgba(39, 39, 44, 0.15);
  --lite-color-black-30: #fafafa;
  --lite-color-black-50: #f4f4f4;
  --lite-color-black-100: #E9E9EA;
  --lite-color-black-200: #DCDCDC;
  --lite-color-black-300: #C6C6C6;
  --lite-color-black-400: #A9A8AA;
  --lite-color-black-500: #939395;
  --lite-color-black-600: #7D7D80;
  --lite-color-black-700: #656567;
  --lite-color-gray-800: #363636;
  /****** checkbox, radio ******/
  --mhu-checkbox-line-color: var(--lite-color-black-400);
  --mhu-checkbox-color: var(--color-primary);
  --mhu-checkbox-disabled-color: var(--lite-color-black-100);
  --mhu-checkbox-size: 20px;
  --mhu-checkbox-radius: var(--border-radius-sm);
  --mhu-radio-line-color: var(--lite-color-black-400);
  --mhu-radio-color: var(--color-primary);
  --mhu-radio-disabled-color: var(--lite-color-black-100);
  --mhu-radio-size: 20px;
  --mhu-formControlCheck-gap: 32px;
  --mhu-formControlCheck-label-color: var(--color-label);
  --mhu-formControlCheck-label-font-size: var(--font-size-sm);
  --mhu-formControlCheck-label-font-weight: var(--font-weight-bold);
  --mhu-checkbox-label-gap: var(--spacing-sm);
  /****** button ******/
  --mhu-btn-height: var(--height-md);
  --mhu-btn-font-size: var(--font-size-md);
  --mhu-btn-font-weight: var(--font-weight-medium);
  --mhu-btn-padding: 0 var(--spacing-md);
  --mhu-btn-radius: var(--border-radius-md);
  --mhu-btn-height-sm: var(--height-sm);
  --mhu-btn-font-size-sm: var(--font-size-sm);
  --mhu-btn-font-weight-sm: var(--font-weight-bold);
  --mhu-btn-padding-sm: 0 var(--spacing-sm);
  /*** button color 추가 가능 ***/
  --mhu-btn-primary: var(--color-primary);
  --mhu-btn-primary-text: var(--color-white);
  --mhu-btn-primary-hover: var(--color-primary-dark);
  --mhu-btn-secondary: var(--color-secondary);
  --mhu-btn-secondary-text: var(--color-black);
  --mhu-btn-secondary-hover: var(--color-secondary-dark);
  --mhu-btn-danger: var(--color-danger);
  --mhu-btn-danger-text: var(--color-white);
  --mhu-btn-danger-hover: var(--color-danger-dark);
  --mhu-btn-text-hover: var(--color-secondary-dark);
  --mhu-btn-disabled-bg: var(--lite-color-gray-50);
  --mhu-btn-disabled-text: var(--lite-color-black-400);
  --mhu-btn-spacing-x-minus: var(--spacing-minus--xxs);
  --mhu-btn-spacing-x: var(--spacing-xxs);
  --mhu-btn-spacing-y: var(--spacing-sm);
  --mhu-btn-icon-size: var(--height-xxs);
  /****** accordion ******/
  --mhu-accordion-radius: var(--border-radius-md);
  --mhu-accordion-active-bg: var(--lite-color-black-100);
  --mhu-accordion-gap: var(--spacing-sm);
  --mhu-accordion-item-border-color: "transparent";
  --mhu-accordion-header-padding-left: var(--spacing-lg);
  --mhu-accordion-header-padding-right: var(--spacing-sm);
  --mhu-accordion-header-padding-y: var(--spacing-xs);
  --mhu-accordion-header-font-size: var(--font-size-sm);
  --mhu-accordion-header-font-weight: var( --font-weight-bold);
  --mhu-accordion-header-line-height: 24px;
  --mhu-accordion-header-bg: var(--lite-color-gray-50);
  --mhu-accordion-header-text-color: var(--color-black);
  --mhu-accordion-header-icon-size: var(--icon-size-xs);
  --mhu-accordion-header-icon-bg: var(--lite-color-black-600);
  --mhu-accordion-header-icon-image: var(--svg-icon-chevron);
  --mhu-accordion-body-padding-y: var(--spacing-sm);
  --mhu-accordion-body-padding-x: var(--spacing-lg);
  --mhu-accordion-body-text-color: var(--color-black);
  /****** form ******/
  --mhu-form-control-field-height: var(--height-md);
  --mhu-form-control-field-font-size: var(--font-size-md);
  --mhu-form-control-field-padding: 7px var(--spacing-md);
  --mhu-form-control-field-padding-side: var(--spacing-md);
  --mhu-form-control-field-height-sm: var(--height-sm);
  --mhu-form-control-field-font-size-sm: var(--font-size-sm);
  --mhu-form-control-field-padding-sm: 7px var(--spacing-sm);
  --mhu-form-control-field-padding-side-sm: var(--spacing-sm);
  --mhu-form-control-field-margin: var(--spacing-xs);
  --mhu-form-control-field-margin2: var(--spacing-sm);
  --mhu-form-control-field-margin3: 28px;
  --mhu-form-control-field-icon-size: var(--icon-size-xs);
  --mhu-form-control-field-radius: var(--border-radius-md);
  --mhu-textarea-height: 115px;
  --mhu-form-control-field-gap: var(--spacing-lg);
  --mhu-input-validation-font-size: var(--font-size-md);
  --mhu-input-validation-font-weight: var(--font-weight-medium);
  --mhu-input-validation-icon-size: var(--height-xxs);
  --mhu-select-padding-right: var(--spacing-sm);
  --mhu-select-padding-left: var(--spacing-xs);
  /*** form color ***/
  --mhu-input-placeholder: var(--lite-color-black-400);
  --mhu-input-text: var(--color-black);
  --mhu-input-arrow-color: var(--lite-color-black-600);
  --mhu-input-bg: var(--color-white);
  --mhu-input-disabled-bg: var(--lite-color-gray-50);
  --mhu-input-disabled-text: var(--lite-color-black-400);
  --mhu-input-disabled-line: var(--lite-color-gray-50);
  --mhu-input-line: var(--lite-color-black-100);
  --mhu-input-line-hover: var(--lite-color-black-400);
  --mhu-input-line-focus: var(--color-black);
  --mhu-input-type-line: var(--color-black);
  --mhu-input-type-line-hover-bg: var(--lite-color-gray-50);
  --mhu-input-type-line-disabled: var(--lite-color-black-400);
  --mhu-input-validation: var(--color-black);
  --mhu-input-validation-error: var(--color-error);
  /* table */
  --mhu-table-text-color: var(--color-default);
  --mhu-table-head-line-color: var(--color-default);
  --mhu-table-body-line-color: var(--lite-color-black-400);
  --mhu-table-padding-x: var(--spacing-sm);
  --mhu-table-padding-y: var(--spacing-xs);
  --mhu-table-head-font-size: var(--font-size-md);
  --mhu-table-head-font-weight: var(--font-weight-bold);
  --mhu-table-body-font-size: var(--font-size-md);
  --mhu-table-body-font-weight: var(--font-weight-medium);
  /* pagination */
  --mhu-pagination-margin-top: 28px;
  --mhu-pagination-icon-size: var(--icon-size-xs);
  --mhu-pagination-icon-color: var(--lite-color-black-600);
  --mhu-pagination-number-size: var(--height-xs);
  --mhu-pagination-number-padding: 10px;
  --mhu-pagination-gap: var(--spacing-sm);
  --mhu-pagination-font-size: var(--font-size-md);
  --mhu-pagination-text-color: var(--color-default);
  --mhu-pagination-active-bg-color: var(--color-primary);
  --mhu-pagination-active-text-color: var(--color-white);
  --mhu-pagination-active-radius: var(--border-radius-md);
  --mhu-pagination-active-font-weight: var(--font-weight-regular);
  --mhu-pagination-hover-bg-color: var(--lite-color-black-15);
  /* switch */
  --mhu-switch-width: 40px;
  --mhu-switch-height: 24px;
  --mhu-switch-radius: 24px;
  --mhu-switch-label-gap: var(--spacing-xs);
  --mhu-switch-bg-color: var(--lite-color-black-100);
  --mhu-switch-default-btn-color: var(--lite-color-black-400);
  --mhu-switch-label-color: var(--lite-color-black-400);
  --mhu-switch-label-font-size: var(--font-size-sm);
  --mhu-switch-label-font-weight: var(--font-weight-bold);
  --mhu-switch-hover-btn-color: var(--lite-color-black-500);
  --mhu-switch-hover-label-color: var(--lite-color-black-500);
  --mhu-switch-hover-bg-color: var(--lite-color-black-100);
  --mhu-switch-hover-active-btn-color: var(--color-primary-dark);
  --mhu-switch-hover-active-label-color: var(--color-primary-dark);
  --mhu-switch-hover-active-bg-color: var(--lite-color-black-100);
  --mhu-switch-active-label-color: var(--color-primary);
  --mhu-switch-active-btn-color: var( --color-primary);
  --mhu-switch-active-bg-color: var(--lite-color-black-100);
  --mhu-switch-disabled-label-color: var(--lite-color-black-400);
  --mhu-switch-disabled-bg-color: var(--lite-color-black-100);
  --mhu-switch-disabled-btn-color: var(--lite-color-gray-50);
}

body div, body p, body nav, body aside, body article {
  scrollbar-color: #D9D9D9 transparent;
  scrollbar-width: thin;
}

body div::-webkit-scrollbar, body p::-webkit-scrollbar, body nav::-webkit-scrollbar, body aside::-webkit-scrollbar, body article::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body div::-webkit-scrollbar-thumb, body p::-webkit-scrollbar-thumb, body nav::-webkit-scrollbar-thumb, body aside::-webkit-scrollbar-thumb, body article::-webkit-scrollbar-thumb {
  background: #F4F4F4; /* 스크롤바 색상 */
  border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
body div:hover::-webkit-scrollbar-thumb, body p:hover::-webkit-scrollbar-thumb, body nav:hover::-webkit-scrollbar-thumb, body aside:hover::-webkit-scrollbar-thumb, body article:hover::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
}
body div::-webkit-scrollbar-track, body p::-webkit-scrollbar-track, body nav::-webkit-scrollbar-track, body aside::-webkit-scrollbar-track, body article::-webkit-scrollbar-track {
  background: transparent; /*스크롤바 뒷 배경 색상*/
}

body, table, input, textarea, select, button {
  font-family: var(--font-webfont), var(--font-default);
  color: var(--lite-color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
textarea::-webkit-input-placeholder, input:not([type=checkbox])::-webkit-input-placeholder, input:not([type=radio])::-webkit-input-placeholder, textarea::placeholder, input:not([type=checkbox])::placeholder, input:not([type=radio])::placeholder {
  color: var(--mhu-input-placeholder);
}

input::placeholder {
  font-weight: bold;
  opacity: 0.7;
  font-size: 0.8em;
}


 /*라디오 기본스타일 제거, 버튼 모양 재설정*/
 input[type='radio'] {
	 -webkit-appearance: none;
	 -moz-appearance: none;
	 appearance: none;
	 width: 20px;
	 height: 20px;
	 border: 2px solid #7D7D80;
	 border-radius: 50%;
	 outline: none;
	 cursor: pointer;
	 vertical-align: text-bottom;
 }
 
/*라디오 체크 시 버튼 모양 스타일*/
input[type='radio']:checked {
	background-color: #3E4448; /* 체크 시 내부 원 색상*/
	border: 3px solid #fff; /* 라인이 아닌, 라인과 원 사이 색상 */
	box-shadow: 0 0 0 2px #3E4448; /* 라인*/
}

#form-select{max-width: 600px;}
#form-select option{width: 100%;white-space: pre-wrap;overflow: hidden;text-overflow: ellipsis;}

select{
    border: 1px solid #3E4448;
    background: url("/img/btn-select.png") no-repeat right 5px center #FFF;
    border-radius: 8px;
    padding: 7px 24px 7px 10px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
}
select::-ms-expand{
    display:none;/*for IE10,11*/
}

select:focus{
    border: 1px solid #3E4448;
    outline: 3px solid #ecebec;
    border-radius: 8px;
}

/* 일반 input placeholder에 Froala 스타일 적용 */
input::placeholder,
textarea::placeholder {
  color: #999 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  opacity: 0.9 !important;
}

/* 브라우저 호환성을 위한 벤더 프리픽스 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  opacity: 0.9 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  opacity: 0.9 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  opacity: 0.9 !important;
}


.main{background-color: #FFF;}

#wait{position: fixed;left:0;right:0;top:0;bottom:0;background: rgba(153, 153, 153, 0.3);z-index: 300;display:none;}
#wait .loading{width: 200px;height: 200px;position: fixed;left: 50%;top:40%;transform: translate(-50%, 0);background: url("/img/loading.gif") left top no-repeat;}

.modal{display: none;}
.modal .bg{position: fixed;left:0;right:0;top:0;bottom:0;background: rgba(153, 153, 153, 0.3);z-index: 200;}
.modal h3{text-align: left;margin:30px 30px 10px 30px;padding-left:24px;background: url("/img/ico-info-alert.png") no-repeat left center;line-height: 1.5;font-size: 1.5rem;font-weight: 700;color:#00c2ff}
.modal.error h3{background: url("/img/ico-error-alert.png") no-repeat left center;color:#ff4f79;}
.modal .canvas{position:fixed;top:30%;left:50%;transform: translate(-50%, 0);width:560px;background: #FFF;z-index: 200;border-radius: 16px;box-shadow: 0px 0px 3px 4px #ccc; line-height: 180%;color:#333;}
.modal .canvas input[type=text]{border:1px solid #AAA;background: transparent;}
.modal .message{padding: 0 30px;font-size: 1rem;font-weight: 400;line-height: 1.4;word-break: break-all;white-space: pre-line;color:#000;}
.modal .button{text-align: right;padding: 10px 30px 30px 30px;}
.modal .button input{font-weight: 700;height:40px;padding:0 15px;border-radius: 8px;color:#FFF;font-size: 1rem;border:0;}
.modal .button input[name='close'], .modal .button input[name='ok']{background-color: #00c2ff;}
.modal .button input[name='cancel']{border:1px solid #000;color:#000;background-color: #fff;}
.modal .button input:active{transform: translateY(1.4px);}
.modal.error .button input{background-color: #ff006b;}

.modal ul li{margin-bottom: 10px;}

.modal input{outline: none;}

.pop{border-radius: 8px; background: #FFF; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.45);padding: 40px;display: none;}
.center{position: fixed;left: 50%;transform: translate(-50%, 0);}

.pop-help{border-radius: 4px; background: var(--Black, #3E4448);box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);color:#FFF;font-size: 14px;padding:10px;position: absolute;z-index: 400;display: none;}

#toast{display: none;position:absolute; z-index:2;}
#toast .canvas{position:fixed;top:20%;left:50%;transform: translate(-50%, 0);width:300px;background-color: rgba( 0, 0, 0, 0.6 );z-index: 200;border-radius: 8px;border:1px #ccc solid; line-height: 180%;color:#333;}
#toast .message{padding: 20px 15px;word-break: break-all;white-space: pre-line;text-align: center; color: white;}

header{border-bottom: 1px solid #E9E9EA;}
@media (max-width: 799px){
	header .logo{display:none;}
	header .contents{flex-wrap: wrap;flex-direction: column-reverse;display: flex;padding: 9px 20px;text-align: center;}
	header .contents > * {flex: 1 1 100%;}
	header input[name='keyword']{width: 200px;}
	header .menu{display: flex;justify-content: space-evenly;}
	header .menu .logo2{width: 100px; height: 21px; flex-shrink: 0; aspect-ratio: 140.00/30;}
	header .search{justify-content: center;}
	
	.common-footer .common-footer__inner{height: auto;justify-content: left;}
	.common-footer .common-footer__bottom {margin-top:20px;}
	.common-footer .common-footer__bottom-inner {justify-content: left;}
}


@media (min-width: 800px) {
	
	header .contents{display: flex; max-width: 1600px; padding: 20px 20px 16px 20px; justify-content: space-between; align-items: center;}
	header .contents{gap:0;margin: 0 auto;}
	header .contents .logo{width: 140px;height: auto;flex-shrink: 0;}
	header input[name='keyword']{width: 260px;}
	header .logo2{display:none;}
	
	.common-footer .common-footer__inner{height: 330px;max-width: 980px;margin:0 auto;}
	.common-footer .box2, .common-footer .box3, .common-footer .box4{border-left: 1px solid #414b5e;height: 214px;}
	.common-footer__bottom {border-top: solid 1px #979797;padding-top: 6px;}
	.common-footer .common-footer__inner {justify-content: space-between;max-width: 1200px;}
	.common-footer .common-footer__bottom-inner {width: 950px;justify-content: space-between;gap:20px;}
}





header{background: #FFF;color:#3E4448; font-weight: 700; font-size: 16px;}

header .search{display: flex;align-items: center; gap: 14px;white-space: nowrap;}
header .search div{padding-left: 30px; background: url(/img/ico-search.svg) 8px center no-repeat; border-radius: 8px; border: 1px solid #656567; }
header .search input[type=text]{background: transparent;border:0;outline: 0;font-size: 14px;line-height:2;width: 240px;}

/* index 페이지에서 검색 폼 숨기기 */
header .search-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

header .menu a{color:inherit;margin-left: 10px;white-space: nowrap;}

.search-section .search{display: flex;align-items: center; gap: 14px;white-space: nowrap;width: 100%;}
.search-section .search div{padding-left: 30px; background: url(/img/ico-search.svg) 8px center no-repeat; border-radius: 8px; border: 1px solid #656567; width: 100%;}
.search-section .search input[type=text]{background: transparent;border:0;outline: 0;font-size: 14px;width: 100%;}

.link{cursor: pointer;text-decoration: underline;}
.main .contents{padding: 56px 20px; max-width: 1200px; min-height: 900px; margin: 0 auto;}

table.list{border-spacing: 0 1px;border-bottom: 1px solid #3E4448;font-size: 16px;}
table.list thead th{padding: 12px;text-align: left;background: #F2FCFF;border-bottom: 1px solid #00AFE6;}
table.list tbody td{padding: 12px;border-bottom: 1px solid #A9A8AA;overflow-x: hidden;text-overflow: ellipsis;white-space: nowrap;}
table.list tbody tr:last-child td{border-bottom: 0;}
table.list td a{text-decoration: none;color:inherit;}
table.list td a:hover{text-decoration: underline;}

/* diff 표 스타일 */
.diff-table { width: 100%; border-collapse: collapse; margin: 16px 0 32px 0; font-size: 16px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); table-layout: fixed; }
.diff-table th { padding: 14px 12px; border-bottom: 2px solid #555555; text-align: left; }
.diff-table .title { font-size: 24px; font-weight: 700; }
.diff-table td { padding: 14px 12px; border-bottom: 2px solid #eeeeee; text-align: left; }
.diff-table th.red, .diff-table td.red { color: var(--lite-color-red-dark); border-bottom: 2px solid var(--lite-color-red-dark); }
.diff-table thead th { background: #F4F4F4; font-weight: 700; }
.diff-table tr:last-child td { border-bottom: none; }
.diff-table .no-changed { display: none; }
.diff-table .revision-btn { display: inline-block; padding: 4px 12px; background: #333; border-radius: 6px; color: #ffffff; font-size: 14px; margin-left: 8px; text-decoration: none; }
.diff-table .revision-btn:hover { background: #555; }
.diff-nav { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 16px 0; padding-left: 200px; }
.diff-nav a { height: 40px; text-decoration: none; }

.paging{display: flex;flex-wrap: wrap;gap:1px;justify-content:center;padding: 20px 0;}
.paging span{cursor: pointer;line-height: 24px;font-size: 14px;padding:0 8px; border-radius: 6px;}
.paging span:hover{background: #E0F8FF;}
.paging .on{background: #E0F8FF;color: #00C2FF;}

.main .contents .head{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;padding: 0 12px 12px 12px;border-bottom: 1px solid #A9A8AA;}
.main .contents .head .title{font-size: 32px;}
.main .contents .head .meta{display: flex;flex-wrap: wrap;gap:14px;font-size: 14px;align-items: center;}
.main .contents .head .meta label{font-weight: 700}

.main .contents .version{display: flex;flex-wrap: wrap;flex-direction: row;position: relative;}
.main .contents .version .label{display: flex;justify-content: flex-end;align-content: flex-end;gap:2px;}
.main .contents .version .label label{background: url("/img/ico-info2.png") right center no-repeat;padding-right: 18px;background-size: 14px 14px;}
#version-help-pop{position: sticky;margin-left:6px;height: 40px;}

.main .contents .code-head{margin:20px 0 48px 12px;}
.main .contents .code-head label{font-weight:700;}

.main .contents .content{padding:0 12px 20px 12px;border-bottom: 1px solid #A9A8AA;}
.main .contents .content .tag{font-weight: 700;text-align: right;margin:20px 0;}
.main .contents .content .detail{font-weight: 700;text-align: right;}
/* .main .contents .content a{text-decoration: none;} */
.main .contents .content a{text-decoration: none;color:#3C99DC;}
.main .contents .content a:hover{text-decoration: underline;} 
.main .edit.contents .head{gap:10px;padding:0;padding-bottom: 20px;}
.main .edit .head2{display: flex; gap:10px;padding: 12px;position: relative;}
.main .edit .head2 span#code{min-width: 100px;}
.main .edit .head2 span#code.opacity{opacity: 0.7;}
.main .edit .head input[name='title']{font-size: 32px;font-weight: 700;padding: 6px 10px;border-radius: 8px;border: 1px solid #656567;flex-grow: 1;}
.main .edit .tag, .main .edit .detail{display: flex;flex-wrap: wrap;flex-direction: row;position: relative;}
.main .edit .tag > *, .main .edit .detail > *{flex-basis: 100%}
.main .edit .tag .label, .main .edit .detail .label{display: flex;justify-content: flex-end;align-content: flex-end;gap:2px;}
.main .edit .tag .label img, .main .edit .detail .label img{width:16px;height: 16px;vertical-align: middle;}
.main .edit .tag .label label, .main .edit .detail .label label{background: url("/img/ico-info2.png") right center no-repeat;padding-right: 18px;background-size: 14px 14px;}
.main .edit input[name='tag'], .main .edit input[name='email']{padding: 8px 16px;border-radius: 8px;border: 1px solid #656567;}
.main .edit .subscribe{padding: 12px 0;}

.edit .pop .pop-code{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 5px 10px;margin:30px 0;}
.edit .pop .pop-code label{white-space: nowrap;flex-basis: 47%;}

.main .contents .view h1{font-size:24px;margin:4px 0;}
.main .contents .view h2{font-size:22px;margin:4px 0;}
.main .contents .view h3{font-size:20px;margin:4px 0;}
.main .contents .view h4{font-size:18px;margin:4px 0;}
.main .contents .view h5{font-size:16px;margin:4px 0;}
.main .contents .view p, .main .contents .view ul{margin-top: 6px;margin-bottom:6px;line-height: 1.6}

.main .contents .bottom{padding: 16px 12px;border-bottom: 1px solid #A9A8AA;}
.main .contents .bottom h4{margin-bottom: 8px;}
.main .contents .bottom .list{display: flex;gap: 14px; flex-wrap: wrap;row-gap: 2px;}
.main .contents .bottom .list .link{color: #7D7D80;}

.comments{padding-top:12px;}
.main .contents .bottom.comments{padding: 16px 0;}
.comments .comment{padding:12px 0;}
.comments .comment .meta{display: flex;justify-content: flex-end;align-items: center;gap: 4px;color: #7D7D80;font-size: 14px;}
.comments .comment .text{padding: 12px;}
.comments .comment .buttons{display: flex;justify-content: flex-end;align-items: center;gap: 4px; border-top: 1px solid #A9A8AA;padding:6px 0 12px 0;font-size: 14px;}
.comments .comment .buttons .btn{padding: 5px 8px;}
.comments .comment .buttons input[name='pwd']{border-radius: 8px; border: 1px solid #656567;line-height: 28px;width: 180px;padding: 0 8px;}

.subscribe{padding: 12px 0;}
.subscribe h4{margin-bottom: 8px;}
.subscribe input[name='email']{width: 50%;padding: 8px 16px;border-radius: 8px;border: 1px solid #656567;}

.table-list .search-head{display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}

/* 목차 스타일 */
#toc {position: fixed; top: 250px; left:90%; background: #f8f8f8; border: 1px solid #ccc; border-radius:8px; padding: 10px; min-width: 100px; max-width: 300px; z-index: 195; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
#toc #tocToggle{margin-bottom:10px;cursor: pointer;}
#toc.collapsed {width: auto;}
#toc.collapsed #tocToggle{margin-bottom:0px;}
#toc button {width: 100%; font-weight: bold; background: none; border: none; cursor: pointer; text-align: left;}
#tocList{max-height: 500px;overflow-y: auto; display: none;}
#tocList a {display: block; margin-left: 0; margin-bottom: 5px; text-decoration: none; color: #333;}
#tocList a:hover {text-decoration: underline;}

@media (max-width: 1100px) {
    body{background: #FFF;}
    #toc {
        display: none;
    }
}

.contents.post-list h1{font-size: 32px;}
.contents.post-list .total{font-size: 18px;font-weight: 700;color: #3E4448;}
.contents.post-list .pipe{padding-left: 20px;padding-right: 20px;content: '\2758';}
.contents.post-list .pipe::after{content: '\2758';}

.btn-white{font-weight: 700;border-radius: 8px;border: 1px solid #939395;background: #FFF; padding: 10px 12px;}
.btn-white:hover {background: var(--lite-color-gray-50);}

.btn-red{font-weight: 700;border-radius: 8px;border: 1px solid #FF006B;color: #FF006B;background: #FFF;padding: 10px 12px}
.btn-black{font-weight: 700;border-radius: 8px;border: 1px solid #3E4448;color:#FFF;background: #3E4448;padding: 10px 12px}
.btn-blue{font-weight: 700;border-radius: 8px;border: 1px solid #00C2FF;color:#FFF;background: #00C2FF;padding: 10px 12px}
.btn-blue:hover {background: var(--lite-color-main-dark);}

.btn-blue2{font-weight: 700;border-radius: 8px;border: 1px solid #00C2FF;background: #FFF; padding: 10px 12px;color:#00C2FF;}
.btn-blue2:hover {background: var(--lite-color-gray-50);}

.btn-grey{font-weight: 700;border-radius: 8px;border: 1px solid #E9E9EA;color:#A9A8AA;background: #E9E9EA;padding: 10px 12px}
.btn{padding: 3px 12px};





.fr-box{word-break: break-all;}

.common-footer {
    /*width: 100%;*/
    background-color: #212c42;
    color: #cecece;
    padding:0;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
}

.common-footer * {
	box-sizing: content-box;
	color: #cecece;
}
.common-footer img {
	vertical-align: top;
}
.common-footer a {
	text-decoration: none;
}

.common-footer ul{margin:0;padding:0;list-style: none;}

.common-footer .common-footer__inner {
    /*width: 980px;*/
    margin: 0 auto;
    /*height: 330px;*/
    display: flex;
    /*justify-content: space-between;*/
    padding: 50px 15px 0 15px;
    box-sizing: border-box;
	flex-wrap: wrap;
}

.common-footer__inner--title {
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #ffffff;
}

.common-footer__inner .box1 > img {
    width: 140px;
    margin-top: 8px;
}

.common-footer__inner .box1 p {
    opacity: 0.5;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #ffffff;
}

.common-footer__inner .box1 p:nth-child(2) {
    margin: 17px 0 10px;
}

.common-footer__inner .box1 .right-logo {
    width: 60px;
    height: auto;
    margin-top: 20px;
}

.common-footer__inner .box2 {
    /*width: 170px;*/
    /*border-left: 1px solid #414b5e;*/
    /*height: 215px;*/
    margin-top: 20px;
    padding-left: 30px;
}

.common-footer__inner .box2 p:nth-child(2) {
	font-size: 13px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: normal;
	margin: 23px 0 10px;
}

.common-footer__inner .box2 p:nth-child(3) {
    font-size: 24px;
    line-height: 0.85;
    margin: 15px 0;
}

.common-footer__inner .box2 p:nth-child(4) {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
}
.common-footer__inner .box2 p:nth-child(3).email {
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: normal;
	margin: 0;
}

.common-footer__inner .box2 .box2__btn-wrapper {
    margin-top: 20px;
}

.common-footer__inner .box2 .box2__btn-wrapper a {
    border-radius: 4px;
    padding: 5px 10px;
    margin: 0;
    border: solid 1px #cecece;
    background: none;
    font-size: 12px;
	color: #cecece;
}

.common-footer__inner .box2 .box2__btn-wrapper .remote-btn {
    margin-left: 8px;
}

.common-footer .box3 {
    /*width: 170px;*/
    /*border-left: 1px solid #414b5e;*/
    /*height: 215px;*/
    margin-top: 20px;
    padding-left: 30px;
}

.common-footer .box3 p:nth-child(2) {
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    margin: 23px 0 10px;
}

.common-footer .box3 p:nth-child(3) {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
}



.common-footer .common-footer__bottom-inner {
    /*width: 950px;*/
    padding: 0 15px;
    display: flex;
	flex-wrap: wrap;
    /*justify-content: space-between;*/
    align-items: center;
    margin: 0 auto;
}

.common-footer .common-footer__bottom-inner h4 {
    font-family: NotoSansCJKkr;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    color: #898989;
}

.common-footer .box1 {
    /*width: 300px;*/
}

.common-footer .box4 {
    /*width: 140px;*/
    /*border-left: 1px solid #414b5e;*/
    /*height: 215px;*/
    margin-top: 20px;
    padding-left: 30px;
}

.common-footer .box4 ul {
    margin-top: 23px;
}

.common-footer .box4 ul li {
    font-size: 13px;
}

.common-footer .box4 ul li a {
    color: #ffffff;
}

.common-footer__bottom-inner nav ul{
    /*height: 50px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
    list-style: none;
}

.common-footer__bottom-inner nav ul li {
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    margin: 0 8px;
	white-space: nowrap;
}

.common-footer__bottom-inner nav ul li a {
    color: #cecece;
}

.common-footer__bottom-inner nav > ul > li:first-child {
    font-size: 13px;
}

.common-footer__bottom-inner nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#family-site {
  display: inline-block;
  width: 127px;
  height: 23px;
  line-height: 3.5;
  text-align: left;
  background: url("/img/icon-chevron-down.png") no-repeat center;
    background-position-x: center;
  background-position-x: 95%;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  margin-left: 14px;
  border-radius: 4px;
  border: solid 1px #ffffff;
}

#family-site span {
	position: absolute;
	top: -11px;
	left: 8px;
	font-family: OpenSans;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	letter-spacing: normal;
	color: #ffffff;
}
ul#family-site-menu {
	/*position: relative;*/
	position: absolute;
	top: -378px;
	width: 125px;
	margin: 0;
	padding: 0;
	border: 1px solid #cccccc;
	border-top: none;
	z-index: 100;
	display: none;
	border: solid 1px #333;
	outline: none;
	box-sizing: border-box;
}
ul#family-site-menu li {
	height: 25px;
	z-index: 100;
	position: relative;
	display: block;
	background: white;
	line-height: 25px;
	text-align: left;
	color: black;
	box-sizing: border-box;
	margin:0;
}
ul#family-site-menu li:hover {
	background-color: #808faa;
	cursor: pointer;
}
ul#family-site-menu li:hover a {
	color: #ffffff;
}
ul#family-site-menu a {
	display: inline-block;
	padding-left: 10px;
	width: 100%;
	color: black;
	cursor: pointer;
}

/* 메인 페이지 히어로 섹션 스타일 */
.main .contents.index-contents {
    max-width: 1600px;
    min-height: 1150px;
}

/* 기본 스타일 (1080px 이상) */
/* .hero-section {
    text-align: center;
    max-width: 1200px;
    margin: 220px auto;
} */

/* 화면 높이 1080px 미만 ~ 900px 이상 */
@media (max-height: 1079px) and (min-height: 900px) {
    .index-contents {
        min-height: 707px;
    }
    .hero-section {
        margin: 160px auto;
    }
}

/* 화면 높이 900px 미만 ~ 700px 이상 */
@media (max-height: 899px) and (min-height: 700px) {
    .index-contents {
        min-height: 627px;
    }
    .hero-section {
        margin: 120px auto;
    }
}

/* 화면 높이 700px 미만 */
@media (max-height: 699px) {
    .index-contents {
        min-height: 547px;
    }
    .hero-section {
        margin: 80px auto;
    }
}

.hero-title {
    font-size: 40px;
    font-weight: 400;
    color: var(--lite-color-black);
    line-height: 1.2;
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: 18px;
    color: var(--lite-color-black);
    margin-top: 30px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.search-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.search-container {
    width: 100%;
    max-width:500px;
}

.search-input-wrapper {
    height: 40px;
    display: flex;
    align-items: center;
}

.search-input-wrapper:hover {
    border-color: var(--lite-color-black-400);
}

.search-input-wrapper:focus-within {
    border-color: var(--lite-color-black);
    outline: 3px solid var(--lite-color-black-15);
}

.search-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    opacity: 0.6;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--lite-color-black);
    width: 100%;
}

.search-input::placeholder {
    color: var(--lite-color-black-400);
    font-weight:400;
}

.action-buttons {
    margin: 40px 0;
    display: flex;
    gap:16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Index 페이지 스타일 */
.hero-section { text-align: center; padding: 50px 0 20px 0; margin: 0 auto; }
.hero-title { font-size: 2.5rem; margin-bottom: 20px; }
.hero-title .bold { font-size: 2.5rem; font-weight: bold; }
.search-section { margin: 40px 0; }
.search-container { max-width: 500px; margin: 0 auto 30px auto; }
.terms-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px; width: 100%; margin: 0 auto; padding: 0 20px; }

/* 반응형 디자인 */
@media (max-width: 799px) {
    header .search-hidden{display:none;}

    .hero-title {
        font-size: 32px;
        padding: 0 20px;
    }
    
    .hero-subtitle {
        font-size: 16px;
        padding: 0 20px;
    }
    
    .search-container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .action-buttons button {
        width: 100%;
    }
    
    .terms-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
}